cheflinkuser/src/pages-store/pages/store/components/coupon-popup.vue

<script setup lang="ts">
import {useConfigStore} from "@/store";
import {receiveCouponApi} from "@/pages-user/service";
import couponBg from '@img-store/coupon.png'
import couponBg2 from '@img-store/coupon-2.png'
import couponRightBg from '@img-store/coupon-right.png'
import couponRightBg2 from '@img-store/coupon-right-2.png'
const configStore = useConfigStore()

const { t, locale } = useI18n()
const emit = defineEmits(['confirm'])

const props = defineProps({
  couponList: {
    type: Array as unknown as PropType<any[]>,
    default: () => []
  }
})

const show = ref(false)
function init() {
  show.value = true
}

function handleClose() {
  show.value = false
}

function confirmCoupon(item: any) {
  receiveCouponApi(item.id).then(res => {
    if (res.code === 200) {
      uni.showToast({
        title: t('common.prompt.claimCouponSuccessfully'),
        icon: 'none'
      })
      emit('confirm')
    }
  })
}

defineExpose({
  init
});

function daySuffix(value: unknown) {
  const n = Number(value)
  const isEn = String(locale.value || '').toLowerCase().startsWith('en')
  if (isEn) {
    return n === 1 ? ` ${t('pages-store.store.day')}` : ` ${t('pages-store.store.days')}`
  }
  return t('pages-store.store.days')
}

function isEnLocale() {
  return String(locale.value || '').toLowerCase().startsWith('en')
}

function formatMoney(value: unknown) {
  const n = Number(value)
  if (!Number.isFinite(n)) return '0.00'
  return n.toFixed(2)
}

function couponAmountText(item: any) {
  const type = Number(item?.couponType)
  const discountValue = Number(item?.discountValue)

  if (type === 1) {
    const pct = Number.isFinite(discountValue) ? Number(discountValue * 100).toFixed(0) : '0'
    return `${pct}%`
  }

  return `$${formatMoney(discountValue)}`
}

function couponBenefitText(item: any) {
  const type = Number(item?.couponType)
  const discountValue = Number(item?.discountValue)
  const minAmount = Number(item?.minAmount)

  if (type === 2) {
    const discountText = `$${formatMoney(discountValue)}`
    const hasMin = Number.isFinite(minAmount) && minAmount > 0
    if (hasMin) {
      const minText = `$${formatMoney(minAmount)}`
      return isEnLocale() ? `Min ${minText} · Off ${discountText}` : `满${minText}减${discountText} 优惠`
    }
    return isEnLocale() ? `Off ${discountText}` : `立减${discountText}`
  }

  const pct = Number.isFinite(discountValue) ? Number(discountValue * 100).toFixed(0) : '0'
  return `${pct}%`
}
</script>

<template>
  <wd-popup v-model="show" custom-style="border-radius: 24rpx 24rpx 0 0;" position="bottom" @close="handleClose">
    <view class="coupon-popup-wrap">
      <view class="text-36rpx lh-36rpx text-#333 font-bold text-center pt-40rpx pb-36rpx">
        {{ t('pages-store.store.claimCoupon') }}
      </view>

      <scroll-view scroll-y class="coupon-popup-list">
        <view
          v-for="item in couponList"
          :key="item.id"
          class="coupon-card"
        >
          <image
            class="coupon-card-bg"
            :src="item.userCouponVo ? couponBg2 : couponBg"
            mode="scaleToFill"
          />
          <view class="coupon-card-body">
            <view class="coupon-card-info">
              <view class="coupon-card-amount">
                <text class="coupon-amount-value" :class="{ 'coupon-amount-value--disabled': item.userCouponVo }">{{ couponAmountText(item) }}</text>
                <text class="coupon-amount-label" :class="{ 'coupon-amount-label--disabled': item.userCouponVo }">{{ t('pages-store.store.couponOff') }}</text>
              </view>
              <view class="coupon-card-desc">
                {{ item.nameZh }}
                <text class="ml-16rpx">{{ t('pages-store.store.validDays') }}:{{ item.validDays }}{{ daySuffix(item.validDays) }}</text>
              </view>
              <view class="coupon-card-benefit">
                <image
                  class="coupon-benefit-icon"
                  src="@img/chef/106.png"
                ></image>
                <text>{{ t('pages-store.store.get') }} {{ couponBenefitText(item) }}</text>
              </view>
            </view>
          </view>
          <view
            v-if="item.userCouponVo"
            class="coupon-claim-wrap"
          >
            <image class="coupon-claim-bg" :src="couponRightBg2" mode="scaleToFill" />
            <text class="coupon-claim-text coupon-claim-text--disabled">{{ t('pages-store.store.claimed') }}</text>
          </view>
          <view
            v-else
            class="coupon-claim-wrap"
            @click="confirmCoupon(item)"
          >
            <image class="coupon-claim-bg" :src="couponRightBg" mode="scaleToFill" />
            <text class="coupon-claim-text">{{ t('pages-store.store.claimNow') }}</text>
          </view>
        </view>
      </scroll-view>

      <view :style="[configStore.iosSafeBottomPlaceholder]" />
    </view>
  </wd-popup>
</template>

<style scoped lang="scss">
.coupon-popup-wrap {
  background: #F5F5F5;
  padding: 0 32rpx;
}

.coupon-popup-list {
  max-height: 860rpx;
  padding-bottom: 30rpx;
}

.coupon-card {
  position: relative;
  margin-bottom: 24rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.coupon-card-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.coupon-card-body {
  position: relative;
  z-index: 1;
  padding: 32rpx 180rpx 32rpx 32rpx;
}

.coupon-card-info {
  min-width: 0;
}

.coupon-card-amount {
  display: flex;
  align-items: baseline;
  margin-bottom: 16rpx;
}

.coupon-amount-value {
  font-size: 48rpx;
  line-height: 56rpx;
  font-weight: bold;
  color: #CE7138;

  &--disabled {
    color: #BFBFBF;
  }
}

.coupon-amount-label {
  font-size: 26rpx;
  line-height: 26rpx;
  color: #CE7138;
  font-weight: 500;
  margin-left: 10rpx;

  &--disabled {
    color: #BFBFBF;
  }
}

.coupon-card-desc {
  font-size: 24rpx;
  line-height: 32rpx;
  color: #999;
  margin-bottom: 14rpx;
}

.coupon-card-benefit {
  font-size: 24rpx;
  line-height: 32rpx;
  color: #333;
  display: flex;
  align-items: center;
}

.coupon-benefit-icon {
  width: 32rpx;
  height: 32rpx;
  flex-shrink: 0;
  margin-right: 8rpx;
}

.coupon-claim-wrap {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 168rpx;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.coupon-claim-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.coupon-claim-text {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 26rpx;
  // font-weight: 600;
  text-align: center;

  &--disabled {
    opacity: 0.6;
  }
}
</style>