红包规则变动修改

hdApp/src/admin/hb/list.vue

@@ -163,8 +163,6 @@ export default {
       this.$util.confirmModal({content: '确认作废该红包？'}, () => {
         unAvailableHb({id: item.id, status: -1}).then(res => {
           if(res.code == 1){
-            //this.loadData()
-            item.statusText = '已失效'
             item.status = -1
             this.$msg('操作成功')
           }

hdApp/src/admin/hb/ruleList.vue

@@ -3,23 +3,16 @@
         <view class="list-wrap">
             <block v-if="!$util.isEmpty(list.data)">
                 <block v-for="(item, index) in list.data" :key="item.id">
-                    <view class="list" :class="{ dragging: draggedIndex === index }" :style="{
-                        transform: transformStyle(index),
-                        transition: isDragging ? 'none' : 'transform 0.3s ease',
-                        zIndex: draggedIndex === index ? 999 : 1
-                    }" @click="navigateToGoodsSort(item)">
-                        <!-- <view class="list-img">
-                            <image :src="item.img" mode="aspectFit"></image>
-                        </view> -->
+                    <view class="list" @click="navigateToGoodsSort(item)">
                         <view class="list-det">
-                            <view class="app-size-28 app-color-0">满<text style="margin-left: 8upx;font-size: 32upx; font-weight: bold">{{ item.amount }}元</text>，送{{ item.num }}个红包</view>
+                            <view class="app-size-28 app-color-0">满<text style="margin-left: 6upx;font-size: 32upx; font-weight: bold">{{ formatAmountDisplay(item.amount) }}元</text>，送{{ item.num }}红包(共{{ formatAmountDisplay(item.allHbAmount) }}元)</view>
                         </view>
 
                         <view class="confirm-btn">
                             <button class="admin-button-com middle blue"
-                                style="position:absolute;top:50rpx;right: 170rpx" @click="navigateToSendHb(item)">修改</button>
+                                style="position:absolute;top:50rpx;right: 130rpx" @click.stop="navigateToSendHb(item)">修改</button>
                             <button class="admin-button-com middle blue"
-                                style="position:absolute;top:50rpx;right: 10rpx">删除</button>
+                                style="position:absolute;top:50rpx;right: 5rpx" @click.stop="deleteRule(item, index)">删除</button>
                         </view>
                     </view>
                 </block>
@@ -34,54 +27,32 @@
     </view>
 </template>
 <script>
-import ModalModule from '@/components/plugin/modal';
-import AppUploader from '@/components/app-uploader';
-import OperateModule from '@/admin/home/components/module/operate';
 import AppWrapperEmpty from '@/components/app-wrapper-empty';
 import { list } from '@/mixins';
-import { hbRulesList, sendHbRule, deleteHbRule } from '@/api/hb';
-import { categoryListInfo } from '@/api/goods';
-import { sort } from '@/api/category';
+import { hbRulesList, deleteHbRule } from '@/api/hb';
 export default {
     name: 'category',
     components: {
-        ModalModule,
-        AppUploader,
-        OperateModule,
         AppWrapperEmpty
     },
     mixins: [list],
-    data() {
-        return {
-            draggedIndex: -1,
-            draggedItem: null,
-            dragOffsetY: 0,
-            isDragging: false,
-            itemHeight: 160, // 列表项高度，单位rpx
-            startY: 0
-        };
-    },
     onPullDownRefresh() {
         this.resetList();
-        this.getCategoryList().then(() => {
+        this.getHbRulesList().then(() => {
             uni.stopPullDownRefresh();
         });
     },
     onReachBottom() {
-        if (!this.list.finished) {
-            this.getCategoryList().then(() => {
-                uni.stopPullDownRefresh();
-            });
-        } else {
-            uni.stopPullDownRefresh();
-        }
+        uni.stopPullDownRefresh();
+    },
+    onShow() {
+        this.getHbRulesList();
     },
     methods: {
-        async init() {
-            this.getHbRulesList();
+        async init() {  
         },
         getHbRulesList() {
-            hbRulesList().then(res => {
+            return hbRulesList().then(res => {
                 if(res.code == 1) {
                     let data = { code: res.code, msg: res.msg, data: { list: res.data.list } };
                     this.completes(data);
@@ -93,167 +64,32 @@ export default {
         navigateToSendHb(item) {
             uni.navigateTo({ url: '/admin/hb/sendHb?id=' + item.id})
         },
-        // 跳转到商品排序页面
-        navigateToGoodsSort(item) {
-            uni.navigateTo({ url: '/admin/goods/goodsSort?id=' + item.id + "&name=" + item.categoryName })
-        },
-        addHbRuleFn() {
-            uni.navigateTo({ url: '/admin/hb/sendHb'})
-        },
-        getCategoryList() {
-            return categoryListInfo().then((res) => {
-                let data = { code: res.code, msg: res.msg, data: { list: res.data } };
-                this.completes(data);
-            });
-        },
-        // 拖拽相关方法
-        transformStyle(index) {
-            if (index === this.draggedIndex) {
-                return `translateY(${this.dragOffsetY}rpx)`;
-            }
-            return 'translateY(0rpx)';
-        },
-
-        dragStart(e) {
-            const index = parseInt(e.currentTarget.dataset.index);
-            this.draggedIndex = index;
-            this.draggedItem = this.list.data[index];
-            this.startY = e.touches[0].clientY;
-            this.isDragging = true;
-        },
-
-        dragMove(e) {
-            if (!this.isDragging || this.draggedIndex === -1) return;
-
-            const currentY = e.touches[0].clientY;
-            const deltaY = currentY - this.startY;
-
-            const systemInfo = uni.getSystemInfoSync();
-            const pixelRatio = 750 / systemInfo.windowWidth;
-            // 根据设备像素比例转换为rpx单位
-            const deltaYrpx = deltaY * pixelRatio;
-
-            this.dragOffsetY = deltaYrpx;
-
-            // 计算目标位置
-            const itemHeightrpx = this.itemHeight * pixelRatio;
-
-            // 使用更精确的计算方法确定移动的项目数
-            const moveDistance = Math.abs(deltaYrpx);
-            const moveDirection = deltaYrpx > 0 ? 1 : -1;
-            const moveItems = Math.floor(moveDistance / (itemHeightrpx * 0.5)) * moveDirection;
-
-            // 确保目标索引在有效范围内
-            const targetIndex = Math.max(0, Math.min(this.list.data.length - 1, this.draggedIndex + moveItems));
-
-            if (targetIndex !== this.draggedIndex) {
-                // 交换元素位置
-                const newData = [...this.list.data];
-                const draggedItem = newData[this.draggedIndex];
-                newData.splice(this.draggedIndex, 1);
-                newData.splice(targetIndex, 0, draggedItem);
-
-                // 更新数据和拖拽状态
-                this.list.data = newData;
-                this.draggedIndex = targetIndex;
-                this.startY = currentY;
-                this.dragOffsetY = 0;
-            }
-        },
-
-        dragEnd() {
-            if (!this.isDragging) return;
-
-            // 重置拖拽状态
-            this.draggedIndex = -1;
-            this.draggedItem = null;
-            this.dragOffsetY = 0;
-            this.isDragging = false;
-            this.startY = 0;
-
-            // 更新排序值并发送到后端
-            this.updateSortOrder();
-        },
-
-        updateSortOrder() {
-            // 更新每个项目的inTurn值，从大到小排序
-            const sortData = this.list.data.map((item, index) => ({
-                id: item.id,
-                inTurn: this.list.data.length - index // 反向索引，使第一个项目有最大值
-                // 如果是分页加载的，请用 data.total 替换掉 this.list.data.length
-            }));
-
-            // 调用API更新排序
-            sort({ items: sortData })
-                .then((res) => {
-                    if (res.code === 1) {
-                        this.$msg('已更新');
+        deleteRule(item, index) {
+            this.$util.confirmModal({title: '提示', content: '确定要删除该规则吗？'}, () => {
+                deleteHbRule({ id: item.id }).then(res => {
+                    if (res.code == 1) {
+                        this.$msg('删除成功');
+                        this.list.data.splice(index, 1);
+                        if (this.list.data.length === 0) {
+                            this.getHbRulesList(); // 列表为空时重新获取刷新状态
+                        }
                     } else {
-                        this.$msg('排序更新失败');
+                        this.$msg(res.msg);
                     }
-                })
-                .catch((err) => {
-                    console.error('更新排序失败:', err);
-                    this.$msg('排序更新失败');
                 });
+            });
         },
-
-        // 上移
-        upFn(id) {
-            const index = this.list.data.findIndex((item) => item.id === id);
-            if (index > 0) {
-                const newData = [...this.list.data];
-                const temp = newData[index];
-                newData[index] = newData[index - 1];
-                newData[index - 1] = temp;
-                this.list.data = newData;
-                this.updateSortOrder();
-            }
+        // 跳转到商品排序页面
+        navigateToGoodsSort(item) {
+            uni.navigateTo({ url: '/admin/goods/goodsSort?id=' + item.id + "&name=" + item.categoryName })
         },
-
-        // 下移
-        downFn(id) {
-            const index = this.list.data.findIndex((item) => item.id === id);
-            if (index < this.list.data.length - 1) {
-                const newData = [...this.list.data];
-                const temp = newData[index];
-                newData[index] = newData[index + 1];
-                newData[index + 1] = temp;
-                this.list.data = newData;
-                this.updateSortOrder();
-            }
+        formatAmountDisplay(value) {
+            if (value === null || value === undefined || value === '') return value;
+            const str = String(value);
+            return /^-?\d+\.00$/.test(str) ? str.split('.')[0] : str;
         },
-
-        // 置顶
-        topFn(id) {
-            const index = this.list.data.findIndex((item) => item.id === id);
-            if (index > 0) {
-                const newData = [...this.list.data];
-                const targetItem = newData[index];
-
-                // 将目标项移到第一位
-                newData.splice(index, 1);
-                newData.unshift(targetItem);
-
-                this.list.data = newData;
-                this.updateSortOrder();
-            }
-        },
-
-        // 置底
-        bottomFn(id) {
-            const index = this.list.data.findIndex((item) => item.id === id);
-            if (index < this.list.data.length - 1) {
-                const newData = [...this.list.data];
-                const targetItem = newData[index];
-
-                // 将目标项移到最后一位
-                newData.splice(index, 1);
-                newData.push(targetItem);
-
-                this.list.data = newData;
-                this.updateSortOrder();
-            }
+        addHbRuleFn() {
+            uni.navigateTo({ url: '/admin/hb/sendHb'})
         }
     }
 };
@@ -269,31 +105,18 @@ export default {
     background-color: #fff;
 
     .list {
-        height: 160rpx;
+        height: 160upx;
         @include disFlex(center, flex-start);
-        padding: 30rpx 0;
-        margin: 0 30rpx;
+        padding: 30upx 0;
+        margin: 0 15upx;
         color: $fontColor3;
         border-bottom: 1px solid $borderColor;
         position: relative;
 
-        .list-img {
-            width: 130rpx;
-            height: 130rpx;
-
-            image {
-                width: 130rpx;
-                height: 130rpx;
-                border-radius: 20rpx;
-            }
-        }
-
         .list-det {
-            margin-left: 20rpx;
-
+            margin-left: 20upx;
             &>div {
                 margin-top: 14rpx;
-
                 &:first-child {
                     margin-top: 0;
                 }
@@ -302,53 +125,4 @@ export default {
     }
 }
 
-.move-btn {
-    position: absolute;
-    top: 65rpx;
-    color: blue;
-    border: 1px solid #cccccc;
-    padding: 5rpx 10rpx;
-    border-radius: 50%;
-}
-
-.move-btn-line {
-    position: absolute;
-    top: 65rpx;
-    color: blue;
-}
-
-// 拖拽相关样式
-.list.dragging {
-    border: 2px dashed #007aff !important;
-    box-shadow: 0 4px 20px rgba(0, 122, 255, 0.3) !important;
-    background-color: rgba(0, 122, 255, 0.05) !important;
-    opacity: 0.85;
-    border-radius: 12rpx;
-    transform: scale(1.05);
-}
-
-.drag-handle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 70rpx;
-    height: 70rpx;
-    border-radius: 12rpx;
-    background-color: rgba(0, 0, 0, 0.03);
-    transition: all 0.2s ease;
-    -webkit-touch-callout: none;
-    /* 禁用长按菜单 */
-    -webkit-user-select: none;
-    /* 禁用文本选择 */
-    user-select: none;
-    touch-action: none;
-    /* 禁用浏览器默认触摸行为 */
-
-    /* 增加触摸反馈 */
-    &:active {
-        transform: scale(1.1);
-        background-color: rgba(0, 122, 255, 0.1);
-        box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.2);
-    }
-}
 </style>

hdApp/src/admin/hb/sendHb.vue

@@ -21,6 +21,10 @@
           <view class="label">红包金额</view>
           <input class="input" type="digit" v-model="item.hbAmount" placeholder="请输入金额" />
         </view>
+        <view class="form-item">
+          <view class="label">红包数量</view>
+          <input class="input" type="digit" v-model="item.hbNum" placeholder="请输入数量" />
+        </view>
         <view class="form-item">
           <view class="label">有效时长</view>
           <input class="input" type="number" v-model="item.duration" placeholder="请输入天数，填0是永不过期" />
@@ -32,10 +36,41 @@
         <view class="form-item action-row">
           <view class="label">生效时间</view>
           <view class="right-content">
-            <view class="value">马上生效</view>
+            <view class="type-selector">
+              <view class="type-btn" :class="{'active': Number(item.effectiveType) === 2}" @click="changeEffectiveType(index, 2)">指定天数</view>
+              <view class="type-btn" :class="{'active': Number(item.effectiveType) !== 2}" @click="changeEffectiveType(index, 1)">指定日期</view>
+            </view>
+          </view>
+        </view>
+        
+        <view class="form-item action-row" v-if="Number(item.effectiveType) !== 2">
+          <view class="label">选择日期</view>
+          <view class="right-content">
+            <view class="value" @click="openDatePicker(index)">
+              <text v-if="!item.effectiveDate" style="color:#ccc;">马上生效</text>
+              <text v-else>{{item.effectiveDate}}</text>
+            </view>
+            <view class="btn-group">
+                <button v-if="index > 0" class="mini-btn delete-btn" @click="deleteRule(index)">删除</button>
+                <button v-if="index == rules.length - 1" class="mini-btn add-btn" @click="addRule">添加</button>
+            </view>
+          </view>
+        </view>
+        
+        <view class="form-item action-row" v-else>
+          <view class="label">充值成功后</view>
+          <view class="right-content">
+            <view style="display:flex;align-items:center;">
+              <view class="number-box">
+                <view class="num-btn minus" @click="changeDays(index, -1)">-</view>
+                <input class="num-input" type="number" v-model="item.effectiveDays" @input="onDaysInput(index, $event)" />
+                <view class="num-btn plus" @click="changeDays(index, 1)">+</view>
+              </view>
+              <view class="days-text">天后生效</view>
+            </view>
             <view class="btn-group">
                 <button v-if="index > 0" class="mini-btn delete-btn" @click="deleteRule(index)">删除</button>
-                <button class="mini-btn add-btn" @click="addRule">添加</button>
+                <button v-if="index == rules.length - 1" class="mini-btn add-btn" @click="addRule">添加</button>
             </view>
           </view>
         </view>
@@ -47,25 +82,39 @@
       <button class="cancel-btn" @click="cancel">取消</button>
       <button class="confirm-btn" @click="save">保存</button>
     </view>
+
+    <!-- 日期选择器蒙板 -->
+    <view v-if="datePickerShow" class="date-picker-mask" @click="datePickerShow = false"></view>
+    <mx-date-picker :show="datePickerShow" format="yyyy-mm-dd" type="date" :value="datePickerValue" :show-tips="true" @confirm="confirmDatePicker" @cancel="datePickerShow = false" />
   </view>
 </template>
 
 <script>
 import { hbRuleDetail, sendHbRule, deleteHbRule } from '@/api/hb';
+import MxDatePicker from '@/components/mx-datepicker/mx-datepicker.vue';
 
 export default {
+  components: {
+    MxDatePicker
+  },
   data() {
     return {
       id: '',
       amount: '', //充值金额
-      num: '', //红包个数
       rules: [
         {
           hbAmount: '',
+          hbNum: '',
           miniCost: '',
-          duration: ''
+          duration: '',
+          effectiveDate: '',
+          effectiveType: 2, // 1: 日期 2: 天数
+          effectiveDays: 0
         }
-      ]
+      ],
+      datePickerShow: false,
+      datePickerValue: '',
+      currentRuleIndex: -1
     };
   },
   onLoad(options) {
@@ -75,18 +124,25 @@ export default {
       this.getHbRuleDetail(this.id)
     } else {
       uni.setNavigationBarTitle({title: '创建充值送红包规则'});
-      //this.addRule()
     }
   },
   methods: {
-    init() {
-    },
+    init(){},
     getHbRuleDetail(id) {
-      console.log(id);
       hbRuleDetail({id: id}).then(res => {
         if(res.code == 1) {
-          console.log(res.data);
-          //this.rules = res.data.rules;
+          if (res.data) {
+            if (res.data.amount !== undefined) {
+              this.amount = res.data.amount;
+            }
+            if (res.data.rules) {
+              try {
+                this.rules = typeof res.data.rules === 'string' ? JSON.parse(res.data.rules) : res.data.rules;
+              } catch (e) {
+                console.error('解析rules出错', e);
+              }
+            }
+          }
         } else {
           this.$msg(res.msg);
         }
@@ -95,10 +151,44 @@ export default {
     addRule() {
       this.rules.push({
         hbAmount: '',
+        hbNum: '',
         duration: '',
-        miniCost: ''
+        miniCost: '',
+        effectiveDate: '',
+        effectiveType: 2,
+        effectiveDays: 0
       });
     },
+    changeEffectiveType(index, type) {
+      this.$set(this.rules[index], 'effectiveType', type);
+      if (type === 2 && this.rules[index].effectiveDays === undefined) {
+        this.$set(this.rules[index], 'effectiveDays', 0);
+      }
+      if (type === 1 && this.rules[index].effectiveDate === undefined) {
+        this.$set(this.rules[index], 'effectiveDate', '');
+      }
+    },
+    changeDays(index, delta) {
+      let currentDays = parseInt(this.rules[index].effectiveDays || 0);
+      let newDays = currentDays + delta;
+      if (newDays < 0) newDays = 0;
+      this.$set(this.rules[index], 'effectiveDays', newDays);
+    },
+    onDaysInput(index, event) {
+      let val = parseInt(event.detail.value);
+      if (isNaN(val) || val < 0) val = 0;
+      this.$set(this.rules[index], 'effectiveDays', val);
+      return val;
+    },
+    openDatePicker(index) {
+      this.currentRuleIndex = index;
+      this.datePickerValue = this.rules[index].effectiveDate || '';
+      this.datePickerShow = true;
+    },
+    confirmDatePicker(e) {
+      this.$set(this.rules[this.currentRuleIndex], 'effectiveDate', e.value);
+      this.datePickerShow = false;
+    },
     deleteRule(index) {
       //确认提示
       this.$util.confirmModal({title: '提示', content: '确定删除该规则吗？'},() => {
@@ -133,6 +223,10 @@ export default {
                 this.$msg(`请输入第${i+1}项单个红包金额`);
                 return;
             }
+            if (!rule.hbNum) {
+                this.$msg(`请输入第${i+1}项红包数量`);
+                return;
+            }
             if (rule.duration === '') {
                 this.$msg(`请输入第${i+1}项有效时长`);
                 return;
@@ -290,12 +384,88 @@ export default {
         align-items: center;
         justify-content: space-between;
     }
+    
+    .type-selector {
+        display: flex;
+        background-color: #f5f5f5;
+        border-radius: 8upx;
+        padding: 4upx;
+        width: 100%;
+        
+        .type-btn {
+            flex: 1;
+            text-align: center;
+            font-size: 26upx;
+            color: #666;
+            padding: 10upx 0;
+            border-radius: 6upx;
+            transition: all 0.3s;
+            
+            &.active {
+                background-color: #fff;
+                color: #09C567;
+                font-weight: bold;
+                box-shadow: 0 2upx 8upx rgba(0,0,0,0.05);
+            }
+        }
+    }
+    
+    .number-box {
+        display: flex;
+        align-items: center;
+        border: 1upx solid #ddd;
+        border-radius: 8upx;
+        height: 60upx;
+        
+        .num-btn {
+            width: 60upx;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 32upx;
+            color: #333;
+            background-color: #f8f8f8;
+            
+            &:active {
+                background-color: #e8e8e8;
+            }
+            
+            &.minus {
+                border-right: 1upx solid #ddd;
+                border-radius: 8upx 0 0 8upx;
+            }
+            
+            &.plus {
+                border-left: 1upx solid #ddd;
+                border-radius: 0 8upx 8upx 0;
+            }
+        }
+        
+        .num-input {
+            width: 80upx;
+            height: 100%;
+            text-align: center;
+            font-size: 28upx;
+            color: #333;
+        }
+    }
+    
+    .days-text {
+        font-size: 28upx;
+        color: #333;
+        margin-left: 10upx;
+        margin-right: auto;
+    }
+    
     .value {
         color: #333;
     }
     .btn-group {
         display: flex;
-        gap: 20upx;
+        .mini-btn + .mini-btn {
+            margin-left: 20upx;
+        }
     }
     .mini-btn {
         margin: 0;
@@ -336,6 +506,15 @@ export default {
   box-shadow: 0 -2upx 10upx rgba(0,0,0,0.05);
   z-index: 99;
 
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
   .cancel-btn {
     width: 45%;
     background-color: #fff;
@@ -356,4 +535,15 @@ export default {
     &::after { border: none; }
   }
 }
+
+.date-picker-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+  animation: fadeIn 0.3s ease-in-out;
+}
 </style>

hdApp/src/admin/member/detail.vue

@@ -25,7 +25,6 @@
               <image v-else-if="data.member == 5" class="member-badge-icon" style="width:77upx;height:77upx;" src="@/static/member-icons/member-5.svg" mode="aspectFit"></image>
               <text class="member-name">{{ data.memberName }}</text>
             </view>
-
           </view>
         </view>
       </view>
@@ -234,7 +233,7 @@
           </view>
         </view>
         
-                 <!-- 弹框内容 -->
+          <!-- 弹框内容 -->
          <scroll-view class="popup-content" scroll-y="true" :style="{maxHeight: '70vh'}">
           <!-- 充值金额输入 -->
           <view class="input-section">

mallApp/src/pages/hb/list.vue

@@ -10,7 +10,7 @@
 							<img :src="`${constant.imgUrl}/retail/coupon/expired.png`" alt mode="widthFix" />
 						</template>
 						<template v-else>
-							<img :src="`${constant.imgUrl}/retail/coupon/bg.png`" alt mode="widthFix" />
+							<img :src="`${constant.imgUrl}/retail/coupon/bg.png`" alt />
 						</template>
 					</view>
 					<!-- 列表 -->
@@ -26,9 +26,11 @@
 						<view class="list-det-right">
 							<view class="coupon-message">
 								<view class="title">{{ item.name }}</view>
-								<view class="shop">{{ item.merchantName }}</view>
+								<view class="shop">所属门店：{{ item.merchantName }}</view>
+								<!-- 开始生效时间点 -->
+								<view class="date" v-if="item.beginTime * 1000 > Date.now()">生效时间：{{ item.beginTime | formatTime('YYYY-MM-DD') }}</view>
 								<view class="date" v-if="item.endTime == 4102416000">有效期：永久可用</view>
-								<view class="date" v-else>有效期：{{ item.endTime | formatTime('YYYY-MM-DD') }}</view>
+								<view class="date" v-else>有效期至：{{ item.endTime | formatTime('YYYY-MM-DD') }}</view>
 							</view>
 							<!-- 未使用 -->
 							<template v-if="item.status == 0">
@@ -146,17 +148,35 @@ export default {
 			padding: 100upx 22upx 0;
 			.list {
 				position: relative;
-				margin-bottom: 6upx;
-				.list-det {
-					width: 100%;
-					@include disFlex(center, space-between);
+				margin-bottom: 20upx;
+				min-height: 180upx;
+				@include disFlex(stretch, space-between);
+				
+				.list-img {
 					position: absolute;
 					top: 0;
 					left: 0;
+					width: 100%;
+					height: 100%;
+					z-index: 1;
+					img {
+						width: 100%;
+						height: 100%;
+						display: block;
+					}
+				}
+				.list-det {
+					width: 100%;
+					@include disFlex(stretch, space-between);
+					position: relative;
+					z-index: 2;
 					.list-det-left {
 						padding: 30upx 0 30upx 36upx;
 						width: 210upx;
 						color: #fff;
+						@include disFlex(center, center);
+						flex-direction: column;
+						align-items: flex-start;
 						.price-wrap {
 							margin-bottom: 6upx;
 							font-size: 26upx;
@@ -168,30 +188,37 @@ export default {
 						}
 					}
 					.list-det-right {
-						width: calc(100% - 280upx);
-						margin-left: 22upx;
+						width: calc(100% - 250upx);
+						margin-left: 20upx;
 						@include disFlex(center, space-between);
 						padding: 30upx 26upx 30upx 0;
 						.coupon-message {
 							color: $fontColor3;
-							font-size:28upx;
+							font-size:26upx;
+							flex: 1;
+							margin-right: 16upx;
 							.title{
-								margin-bottom:5upx;
+								margin-bottom:8upx;
 								font-size:30upx;
 								font-weight:bold;
 								color:#333;
+								line-height: 1.3;
 							}
 							.shop{
 								font-size:26upx;
-								margin-bottom: 5upx;
+								margin-bottom: 8upx;
+								line-height: 1.3;
 							}
 							.date{
-								font-size:26upx;
+								font-size:24upx;
+								line-height: 1.3;
+								color: #666;
 							}
 						}
 						.button-com {
 							padding-top: 15upx;
 							padding-bottom: 15upx;
+							flex-shrink: 0;
 						}
 						.icon-wrap {
 							position: absolute;