feat: 卡券

src/components/coupon/coupon.vue

@@ -4,14 +4,17 @@
       'coupon',
       {
         'coupon-active': active,
-        disabled: '' + coupon.use_type !== 'undefined' && coupon.use_type !== 1,
+        disabled:
+          ('' + coupon.use_type !== 'undefined' && coupon.use_type !== 1) ||
+          coupon.is_use,
         expired: coupon.use_type === 0,
-        used: coupon.use_type === 2,
+        used: coupon.use_type === 2 || coupon.is_use,
       },
     ]"
   >
     <view :class="['coupon-card', { checked: checked }]" @click="handleClick">
-      <view class="coupon-label">
+      <image class="coupon-img" v-if="coupon.img" :src="coupon.img"></image>
+      <view v-else class="coupon-label">
         <view class="coupon-title">
           <text
             v-if="coupon.unit === '元' || coupon.unit === '￥'"
@@ -28,15 +31,28 @@
         <text class="coupon-desc">{{ coupon.satisfy_notice }}</text>
       </view>
       <view class="coupon-body">
-        <text class="coupon-title">{{ coupon.coupon_name }}</text>
-        <text class="coupon-desc">{{ coupon.date }}</text>
-        <view class="rule-btn" @click.stop="active = !active">
+        <text class="coupon-title" v-if="coupon.coupon_name">{{
+          coupon.coupon_name
+        }}</text>
+        <text class="coupon-desc">{{ coupon.date || coupon.name }}</text>
+        <button
+          class="btn"
+          v-if="coupon.is_use === 1"
+          @click.stop="handleUseClick"
+        >
+          立即使用
+        </button>
+        <view
+          class="rule-btn"
+          v-if="coupon.rule"
+          @click.stop="active = !active"
+        >
           <text class="text">使用规则</text>
           <image class="arrow" src="@/assets/coupon/icon-arrow.png"></image>
         </view>
       </view>
     </view>
-    <view class="rule-text" v-html="coupon.rule"></view>
+    <view v-if="coupon.rule" class="rule-text" v-html="coupon.rule"></view>
   </view>
 </template>
 
@@ -63,6 +79,9 @@ export default {
     handleClick() {
       this.$emit("click", this.coupon);
     },
+    handleUseClick() {
+      this.$emit("use", this.coupon);
+    },
   },
 };
 </script>
@@ -83,6 +102,12 @@ export default {
     color: #979797;
     margin: 0 auto 20rpx;
 
+    .coupon-img {
+      width: 186rpx;
+      height: 186rpx;
+      margin: 20rpx;
+    }
+
     .coupon-label {
       width: 226rpx;
       height: 164rpx;
@@ -114,7 +139,7 @@ export default {
 
       .coupon-title {
         display: block;
-        height: 48rpx;
+        // height: 48rpx;
         font-size: 34rpx;
         font-weight: 600;
         line-height: 48rpx;
@@ -273,5 +298,14 @@ export default {
       }
     }
   }
+  .btn {
+    display: block;
+    font-size: 28rpx;
+    margin-top: 20rpx;
+    background-color: rgba(255, 255, 255, 0.2);
+    &::after {
+      display: none;
+    }
+  }
 }
 </style>

src/pages.json

@@ -308,6 +308,10 @@
       {
         "name": "签到",
         "path": "pages/task/index"
+      },
+      {
+        "name": "卡券",
+        "path": "pages/my/coupon"
       }
     ]
   }

src/pages/my/coupon.vue

@@ -17,7 +17,12 @@
       </view>
     </view>
     <view v-show="navCur == 'curr'" class="list">
-      <coupon v-for="item in currList" :key="item.id" :coupon="item" />
+      <coupon
+        v-for="item in currList"
+        :key="item.id"
+        :coupon="item"
+        @use="handleUse"
+      />
     </view>
 
     <view v-show="navCur == 'his'" class="list">
@@ -28,7 +33,7 @@
 
 <script>
 import coupon from "@/components/coupon/coupon.vue";
-import api from "@/lib/api/api";
+import { getMySkuList, useMySku } from "@/lib/api/shop";
 export default {
   name: "PageMyCoupon",
   components: {
@@ -46,6 +51,10 @@ export default {
     const uinfoStr = uni.getStorageSync("userinfo");
     if (uinfoStr) {
       this.userInfo = JSON.parse(uinfoStr);
+      uni.showLoading({
+        title: "加载中",
+        mask: true,
+      });
     } else {
       uni.showToast({
         title: "请先登录",
@@ -62,20 +71,20 @@ export default {
   },
   methods: {
     async initList() {
-      uni.showLoading({
-        title: "加载中",
-        mask: true,
-      });
-      const { data } = await api.myCouponList(this.userInfo.session);
+      const currList = [];
+      const hisList = [];
+      const { data } = await getMySkuList();
       if (data) {
         for (let j = 0; j < data.length; j++) {
-          if (data[j].use_type == 1) {
-            this.currList.push(data[j]);
-          } else if (data[j].use_type == 2 || data[j].use_type == 0) {
-            this.hisList.push(data[j]);
+          if (!data[j].is_use) {
+            currList.push(data[j]);
+          } else {
+            hisList.push(data[j]);
           }
         }
       }
+      this.currList = currList;
+      this.hisList = hisList;
       uni.hideLoading();
     },
     // 切换 nav
@@ -85,6 +94,33 @@ export default {
       }
       this.navCur = alias;
     },
+    async handleUse(item) {
+      // if (item.is_use) {
+      //   return;
+      // }
+      const confirm = await new Promise((resolve) => {
+        uni.showModal({
+          title: "提示",
+          content: "请在门店内与店员沟通后当面兑换。卡券失效后无法找回。",
+          cancelText: "不在门店",
+          confirmText: "确认兑换",
+          success: function (res) {
+            if (res.confirm) {
+              resolve(true);
+            } else if (res.cancel) {
+              resolve(false);
+            }
+          },
+        });
+      });
+      if (!confirm) return;
+      const res = await useMySku({ sku_id: item.sku_id });
+      uni.showToast({
+        icon: "none",
+        title: res.errno !== 10000 ? res.errmsg : "兑换成功",
+      });
+      res.errno === 10000 && this.initList();
+    },
   },
 };
 </script>

src/pages/my/my.vue

@@ -24,13 +24,13 @@
       <view class="my-balance">
         <view class="my-balance-item" @click="jump('../task/index')">
           <view class="num">{{ userInfo.score ? userInfo.score : "0" }}</view>
-          <view class="label">任务积分</view>
+          <view class="label">积分</view>
         </view>
         <view class="my-balance-item" @click="jump('./coupon')">
           <view class="num">{{
             userInfo.coupon_count ? userInfo.coupon_count : "0"
           }}</view>
-          <view class="label">红包卡券</view>
+          <view class="label">卡券</view>
         </view>
       </view>
     </view>