Merge branch 'master' of https://gitea.zianxin.com/zax/biz-mobile-react-cloud

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { reactive, ref, computed } from "vue"
-import { onLoad, onShow } from "@dcloudio/uni-app"
+import { computed } from "vue"
+import dayjs from "dayjs"
 
-import { hooks, router } from "@/sheep"
+import { hooks } from "@/sheep"
 import { serviceEnum } from "@@/constant"
 
 const { actCouponTypeEnum } = serviceEnum
@@ -14,13 +14,27 @@ const props = withDefaults(defineProps<{ mode?: 'list' | 'select', detail: any }
     detail: {},
 })
 
-const doVisibleQrcode = () => {
-    emit("doVisibleQrcode", { type: 'ACT_COUPON', detail: props.detail })
-}
-
 const doUse = () => {
     emit("doUse", { type: 'ACT_COUPON', detail: props.detail })
 }
+
+const doVisibleQrcode = () => {
+    emit("doVisibleQrcode", { type: "ACT_COUPON", detail: props.detail })
+}
+
+const timeStatus = computed(() => {
+    const startTime = props.detail?.startTime
+    const endTime = props.detail?.endTime
+    if (!startTime || !endTime) return "active"
+    const start = dayjs(startTime)
+    const end = dayjs(endTime)
+    if (!start.isValid() || !end.isValid()) return "active"
+    const now = dayjs()
+    if (now.isBefore(start)) return "not_started"
+    if (now.isAfter(end)) return "expired"
+    return "active"
+})
+
 </script>
 
 <template>
@@ -72,14 +86,18 @@ const doUse = () => {
         <!-- 右侧按钮 -->
         <view class="flex-row-center">
             <view v-if="mode == 'list'" class="coupon-right">
-                <view v-if="detail.status == 1">
-                    <view v-if="detail.couponType == '4'" class="action-btn" @tap="doVisibleQrcode">核销码</view>
-                    <view v-else class="action-btn" @tap="doUse">去使用</view>
+                <view v-if="detail.status == 1" class="flex-col items-center">
+                    <view v-if="timeStatus === 'active'">
+                        <view v-if="detail.couponType == '4'" class="action-btn" @tap="doVisibleQrcode">核销码</view>
+                        <view v-else class="action-btn" @tap="doUse">去使用</view>
+                    </view>
+                    <view v-else-if="timeStatus === 'not_started'" class="action-btn disabled">未到期</view>
+                    <view v-else class="action-btn disabled">已过期</view>
                 </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 v-else-if="mode == 'select'">
+            <view v-else-if="mode == 'select'" class="coupon-right">
                 <view class="action-btn">使用</view>
             </view>
         </view>
@@ -212,7 +230,7 @@ const doUse = () => {
 
 /* 右侧按钮区 */
 .coupon-right {
-    width: 140rpx;
+    width: 160rpx;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -224,7 +242,7 @@ const doUse = () => {
 .action-btn {
     background: #0094ff;
     color: #fff;
-    font-size: 26rpx;
+    font-size: 22rpx;
     padding: 10rpx 24rpx;
     border-radius: 30rpx;
     font-weight: 500;