city-gather/src/subPack-xsb/components/coupon/index.vue

<script setup lang="ts">
import { dayjs } from 'wot-design-uni'
import { StaticUrl } from '@/config'
import router from '@/router'

defineProps<{
  itemcoupon: Api.AppMemberCouponVO
  /** 是否显示"去使用"按鈕，默认 true */
  showUseBtn?: boolean
  /** 隐藏所有操作按鈕（选券模式用） */
  hideAllBtn?: boolean
}>()
function handleUseCoupon() {
  router.replace({ name: 'xsb-homeTabbar', params: { name: 'xsb-classfiy' } })
}
</script>

<template>
  <view class="relative">
    <view class="relative box-border h164rpx w-full flex overflow-hidden rounded-16rpx">
      <image
        v-if="itemcoupon.useStatus !== 2 || itemcoupon.isUsed === 1"
        :src="`${StaticUrl}/xsb-coupon-bg-un.png`"
        class="h-full w-full"
      />
      <image
        v-else
        :src="`${StaticUrl}/xsb-coupon-bg-item.png`"
        class="h-full w-full"
      />
      <view class="absolute left-0 top-0 h-full w-full flex items-center">
        <view class="w-184rpx flex flex-shrink-0 flex-col items-center justify-center py-36rpx">
          <view class="flex items-end leading-none" :class="[itemcoupon.useStatus == 2 || itemcoupon.isUsed == 2 ? 'text-[#FF4A39]' : 'text-[#AAAAAA]']">
            <text class="mb-6rpx text-24rpx font-semibold">
              ¥
            </text>
            <text class="text-48rpx font-bold">
              {{ itemcoupon.discountMoney ?? 0 }}
            </text>
          </view>
          <view class="mt-12rpx text-24rpx text-[#AAAAAA]">
            {{ Number(itemcoupon.amountMoney) > 0 ? `满${itemcoupon.amountMoney}可用` : '无门槛' }}
          </view>
        </view>
        <view class="flex flex-1 items-center px-24rpx py-28rpx">
          <view class="flex-1 pr-20rpx">
            <view class="text-28rpx text-[#333] font-semibold">
              {{ itemcoupon.activityName || itemcoupon.couponName || '优惠券' }}
            </view>
            <template v-if="[2, 5].includes(itemcoupon.useStatus || 2)">
              <view v-if="itemcoupon.expirationTime" class="mt-12rpx text-22rpx text-[#AAAAAA]">
                有效期：{{ dayjs(itemcoupon.expirationTime).format('YYYY-MM-DD') }}
              </view>
              <view v-if="itemcoupon.scopeDesc" class="mt-8rpx text-22rpx text-[#AAAAAA]">
                限：{{ itemcoupon.scopeDesc }}
              </view>
            </template>
            <view v-if="itemcoupon.orderCreateTime" class="mt-8rpx text-22rpx text-[#AAAAAA]">
              使用时间： {{ itemcoupon.orderCreateTime }}
            </view>
            <view v-if="itemcoupon.useStatus === 1" class="mt-8rpx text-22rpx text-[#AAAAAA]">
              说明：部分退款，优惠卷不退还
            </view>
            <view v-if="itemcoupon.useStatus === 7" class="mt-8rpx text-22rpx text-[#AAAAAA]">
              冻结原因：该券已被占用，取消可恢复，有效期内可用。
            </view>
          </view>
          <template v-if="!hideAllBtn">
            <view
              v-if="showUseBtn !== false"
              class="flex-shrink-0 rounded-full bg-[#FF4A39] px-28rpx py-16rpx text-26rpx text-white"
              @click="handleUseCoupon"
            >
              去使用
            </view>
            <wd-button v-if="itemcoupon.useStatus === 1" hairline plain size="small" type="info" @click="router.replace({ name: 'xsb-orderDetaile', params: { id: String(itemcoupon.lockOrderId) } })">
              查看订单
            </wd-button>
            <wd-button v-if="itemcoupon.useStatus === 7" plain hairline size="small" type="info" @click="router.replace({ name: 'xsb-orderDetaile', params: { id: String(itemcoupon.lockOrderId) } })">
              去取消订单
            </wd-button>
          </template>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>

</style>