12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788 |
- <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>
|