feat: 优惠券领取列表

src/pages/merchant/components/cancel-card.vue

@@ -20,10 +20,21 @@ const doVisibleQrcode = () => {
 <template>
     <view class="coupon-item">
         <!-- 左侧主体 -->
-        <view class="coupon-left">
+        <view class="coupon-left relative">
             <view class="size-140rpx rounded-8rpx flex-row-center flex-shrink-0 bg-#f0f0f0 m-r-10rpx">
                 <image class="size-110rpx" src="/static/icon/act_cancel.png" mode="aspectFill" />
             </view>
+            <view class="absolute top-0rpx right-80rpx">
+                <!-- 未使用 -->
+                <view v-if="detail.actStatus == 1"
+                    class="iconfont icon-weishiyong absolute font-size-80rpx! color-blue" />
+                <!-- 已使用 -->
+                <view v-if="detail.actStatus == 2"
+                    class="iconfont icon-weishiyong1 absolute font-size-80rpx! color-#cccccc" />
+                <!-- 已过期 -->
+                <view v-if="detail.actStatus == 3"
+                    class="iconfont icon-yiguoqi absolute font-size-80rpx! color-#cccccc" />
+            </view>
             <view class="info-box">
                 <view class="price-row">
                     <view v-if="detail.faceValue" class="flex items-center">
@@ -49,7 +60,9 @@ const doVisibleQrcode = () => {
         </view>
         <!-- 右侧按钮 -->
         <view class="coupon-right">
-            <view class="action-btn" @tap="doVisibleQrcode">核销码</view>
+            <view v-if="detail.actStatus == 1" class="action-btn" @tap="doVisibleQrcode">核销码</view>
+            <view v-if="detail.actStatus == 2" class="action-btn disabled">已使用</view>
+            <view v-if="detail.actStatus == 3" class="action-btn disabled">已过期</view>
         </view>
     </view>
 </template>
@@ -194,5 +207,9 @@ const doVisibleQrcode = () => {
     padding: 10rpx 24rpx;
     border-radius: 30rpx;
     font-weight: 500;
+
+    &.disabled {
+        background: #cccccc;
+    }
 }
 </style>

src/pages/merchant/components/coupon-card.vue

@@ -20,9 +20,18 @@ const doVisibleQrcode = () => {
 <template>
     <view class="coupon-item">
         <!-- 左侧主体 -->
-        <view class="coupon-left">
+        <view class="coupon-left relative">
             <image class="size-140rpx rounded-8rpx flex-shrink-0 m-r-10rpx bg-#f0f0f0" src="/static/icon/act_coupon.png"
                 mode="aspectFill" />
+            <view class="absolute top-0rpx right-80rpx">
+                <!-- 未使用 -->
+                <view v-if="detail.status == 1" class="iconfont icon-weishiyong absolute font-size-80rpx! color-blue" />
+                <!-- 已使用 -->
+                <view v-if="detail.status == 2"
+                    class="iconfont icon-weishiyong1 absolute font-size-80rpx! color-#cccccc" />
+                <!-- 已过期 -->
+                <view v-if="detail.status == 3" class="iconfont icon-yiguoqi absolute font-size-80rpx! color-#cccccc" />
+            </view>
             <view class="info-box">
                 <view class="price-row">
                     <view v-if="detail.faceValue" class="flex items-center">
@@ -48,7 +57,9 @@ const doVisibleQrcode = () => {
         </view>
         <!-- 右侧按钮 -->
         <view class="coupon-right">
-            <view class="action-btn" @tap="doVisibleQrcode">核销码</view>
+            <view v-if="detail.status == 1" class="action-btn" @tap="doVisibleQrcode">核销码</view>
+            <view v-if="detail.status == 2" class="action-btn disabled">已使用</view>
+            <view v-if="detail.status == 3" class="action-btn disabled">已过期</view>
         </view>
     </view>
 </template>
@@ -193,5 +204,9 @@ const doVisibleQrcode = () => {
     padding: 10rpx 24rpx;
     border-radius: 30rpx;
     font-weight: 500;
+
+    &.disabled {
+        background: #cccccc;
+    }
 }
 </style>

src/pages/merchant/merchant-activity.vue

@@ -19,8 +19,6 @@
 				</view>
 				<view class="absolute bottom-40 left-60 text-28 bg-#eeeeee44 c-#fff px-2 rounded-full">限量领取 先领先得</view>
 			</view>
-
-
 			<view class="card relative rounded-lb-0! rounded-rb-0! w-full activity-sr-card overflow-hidden"
 				v-if="state.actType == 'COUPON_ACT' && state.actDetail.uniqueCode === '1qRgFo'">
 				<image class="w-full block" src="/static/page/act_li_quan.jpg" mode="widthFix" />

src/sheep/scss/font/iconfont.scss

@@ -1,9 +1,9 @@
 @font-face {
     font-family: "iconfont";
     /* Project id 4740692 */
-    src: url('//at.alicdn.com/t/c/font_4740692_dlzhw41ofij.woff2?t=1731448556379') format('woff2'),
-        url('//at.alicdn.com/t/c/font_4740692_dlzhw41ofij.woff?t=1731448556379') format('woff'),
-        url('//at.alicdn.com/t/c/font_4740692_dlzhw41ofij.ttf?t=1731448556379') format('truetype');
+    src: url('//at.alicdn.com/t/c/font_4740692_uwg9mtj0d0p.woff2?t=1770172172940') format('woff2'),
+        url('//at.alicdn.com/t/c/font_4740692_uwg9mtj0d0p.woff?t=1770172172940') format('woff'),
+        url('//at.alicdn.com/t/c/font_4740692_uwg9mtj0d0p.ttf?t=1770172172940') format('truetype');
 }
 
 .iconfont {
@@ -14,6 +14,34 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-yiguoqi:before {
+    content: "\e642";
+}
+
+.icon-weishiyong:before {
+    content: "\e60c";
+}
+
+.icon-weishiyong1:before {
+    content: "\e623";
+}
+
+.icon-icon-phone:before {
+    content: "\e657";
+}
+
+.icon-saoyisao:before {
+    content: "\e658";
+}
+
+.icon-wode:before {
+    content: "\f0b4";
+}
+
+.icon-a-kefu3x:before {
+    content: "\e62e";
+}
+
 .icon-fuzhi:before {
     content: "\e8b0";
 }