city-gather/src/subPack-xsb/commonTab/components/couponArrivalPopup.vue

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

const emit = defineEmits<{
  use: [coupon: Api.AppMemberCouponVO]
}>()
const show = ref(false)

const couponList = ref<Api.AppMemberCouponVO[]>([])

function getCouponTitle(coupon: Api.AppMemberCouponVO) {
  return coupon.activityName || coupon.couponName || '星闪豹优惠券'
}

function getCouponThreshold(coupon: Api.AppMemberCouponVO) {
  return Number(coupon.amountMoney || 0) > 0 ? `满${coupon.amountMoney}可用` : '无门槛'
}

function getCouponExpireTime(coupon: Api.AppMemberCouponVO) {
  if (!coupon.expirationTime) {
    return '长期有效'
  }
  return dayjs(coupon.expirationTime).format('YYYY-MM-DD HH:mm:ss')
}

function handleUse(coupon: Api.AppMemberCouponVO) {
  show.value = false
  emit('use', coupon)
}
async function tryShowCouponArrivalPopup() {
  try {
    const res = await Apis.xsb.newCouponPopup({})
    couponList.value = res.data ?? []
    show.value = couponList.value.length > 0
  }
  catch (error) {
    console.error('get coupon arrival popup failed', error)
  }
}
tryShowCouponArrivalPopup()
</script>

<template>
  <wd-overlay :show="show" :z-index="100001">
    <view class="h-full w-full flex items-center justify-center">
      <view :style="{ backgroundImage: `url(${StaticUrl}/xsb-coupon-idx-popup-bg.png)` }" class="relative h1078rpx w702rpx bg-contain bg-no-repeat" @click.stop>
        <view class="absolute left-0 top-180rpx box-border h-full w-full flex justify-center px-66rpx pb-60rpx pt-184rpx">
          <scroll-view scroll-y class="mt-110rpx box-border h-362rpx w500rpx flex justify-center px-20rpx pb-20rpx">
            <view v-for="coupon in couponList" :key="coupon.id || coupon.allowanceId" :style="{ backgroundImage: `url(${StaticUrl}/xsb-coupon-idx-bg-popup.png)` }" class="relative mb-20rpx h-164rpx w450rpx bg-contain bg-no-repeat">
              <view class="absolute left-0 top-0 box-border h-full w-full flex items-center px12rpx py24rpx">
                <view class="h-full w-full flex items-center">
                  <view class="box-border w115rpx flex-shrink-0 text-center">
                    <view class="absolute left-0 top-0 inline-flex rounded-br-10rpx rounded-tl-10rpx bg-[#FF5A36] px-16rpx py-6rpx text-20rpx text-white">
                      {{ Number(coupon.amountMoney) > 0 ? '满减券' : '无门槛' }}
                    </view>
                    <view class="mt-18rpx text-[#FF5331] font-bold">
                      <text class="text-20rpx">
                        ￥
                      </text>
                      <text class="text-40rpx leading-none">
                        {{ coupon.discountMoney ?? 0 }}
                      </text>
                    </view>
                    <view class="mt-10rpx text-24rpx text-[#666666]">
                      {{ getCouponThreshold(coupon) }}
                    </view>
                  </view>
                  <view class="box-border min-w-0 flex-1 pl30rpx">
                    <view class="text-28rpx text-[#333333] font-semibold">
                      {{ getCouponTitle(coupon) }}
                    </view>
                    <view class="mt-20rpx text-24rpx text-[#9A9A9A]">
                      有效期：
                    </view>
                    <view class="mt-6rpx text-24rpx text-[#A8A8A8]">
                      {{ getCouponExpireTime(coupon) }}
                    </view>
                    <view class="coupon-arrival-card__action absolute right-22rpx top-50% rounded-full bg-[#FF5736] px-24rpx py-12rpx text-24rpx text-white -translate-y-50%" @click.stop="handleUse(coupon)">
                      去使用
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        <image :src="`${StaticUrl}/xsb-coupon-idx-kaixing-btn.png`" class="absolute bottom-90rpx left-50% h112rpx w384rpx transform -translate-x-50%" @click.stop="show = false" />
      </view>
    </view>
  </wd-overlay>
</template>

<style scoped lang="scss">

</style>