designer-hub/packages/app/src/pages/common/components/coupon-card.vue

<script setup lang="ts">
import Card from '@/components/card.vue'
import { Coupon, CouponStatus } from '../../../core/libs/models'
import dayjs from 'dayjs'
import used from '@designer-hub/assets/src/libs/assets/used'
import expired from '@designer-hub/assets/src/libs/assets/expired'
import invalid from '@designer-hub/assets/src/libs/assets/invalid'

const props = withDefaults(
  defineProps<{ options?: Coupon; canSelect?: boolean; selected?: boolean }>(),
  {
    canSelect: false,
    selected: false,
  },
)
const emits = defineEmits<{ select: [coupon: Coupon]; clickInstruction: [coupon: Coupon] }>()
</script>
<template>
  <Card custom-class="mx-3.5">
    <div class="relative" @click="canSelect && emits('select', options)">
      <div class="flex gap-3">
        <div class="w-[94px] h-[94px] bg-[#f6f6f6] rounded-2.5 overflow-hidden">
          <template v-if="options.couponType === 1">
            <div class="bg-[#fff8f8] w-full h-full flex flex-col items-center justify-center">
              <div class="text-[#ff7878] text-[26px] font-normal font-['PingFang_SC']">
                {{ options.brandPoints }}
              </div>
              <div class="text-[#ff7878] text-base font-normal font-['PingFang_SC']">积分</div>
            </div>
          </template>
          <template v-else>
            <wd-img width="100%" height="100%" :src="options.couponImgUrl"></wd-img>
          </template>
        </div>
        <div class="flex-1 flex flex-col justify-around">
          <div class="flex items-center gap-1">
            <div
              class="px-[3px] rounded border border-solid border-[#ff3636] justify-center items-center gap-2.5 inline-flex"
            >
              <div
                class="text-[#ff3e3e] text-[10px] font-normal font-['PingFang_SC'] leading-normal"
              >
                {{ options.materialName }}
              </div>
            </div>
            <div class="text-black text-sm font-normal font-['PingFang_SC'] leading-normal">
              <!-- GELATO咖啡兑换券 -->
              {{ options.couponName }}
            </div>
          </div>
          <div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal">
            有效期：
            <!-- 2024/04/01-2024/05/30 -->
            {{ dayjs(options.validityStartDate).format('YYYY/MM/DD') }}-{{
              dayjs(options.validityEndDate).format('YYYY/MM/DD')
            }}
          </div>
          <div
            class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal flex items-center"
            @click.stop="emits('clickInstruction', options)"
          >
            使用说明
            <wd-icon name="arrow-right" size="14"></wd-icon>
          </div>
        </div>
        <div class="flex items-center" v-if="canSelect">
          <div
            class="w-4 h-4 rounded-full border border-black/60 border-solid"
            :class="`${selected ? 'bg-black' : ''}`"
          ></div>
        </div>
      </div>
      <div v-if="options.couponStatus !== CouponStatus.NOT_USE" class="absolute top--4 right--4">
        <wd-img
          width="58"
          height="58"
          :src="
            {
              [CouponStatus.HAVE_USE]: used,
              [CouponStatus.EXPIRED]: expired,
              [CouponStatus.BECAME_INVALID]: invalid,
            }[options.couponStatus]
          "
        ></wd-img>
      </div>
    </div>
  </Card>
</template>