coupon-card.vue 3.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <script setup lang="ts">
  2. import Card from '@/components/card.vue'
  3. import { Coupon, CouponStatus } from '../../../core/libs/models'
  4. import dayjs from 'dayjs'
  5. import used from '@designer-hub/assets/src/libs/assets/used'
  6. import expired from '@designer-hub/assets/src/libs/assets/expired'
  7. import invalid from '@designer-hub/assets/src/libs/assets/invalid'
  8. const props = withDefaults(
  9. defineProps<{ options?: Coupon; canSelect?: boolean; selected?: boolean }>(),
  10. {
  11. canSelect: false,
  12. selected: false,
  13. },
  14. )
  15. const emits = defineEmits<{ select: [coupon: Coupon]; clickInstruction: [coupon: Coupon] }>()
  16. </script>
  17. <template>
  18. <Card custom-class="mx-3.5">
  19. <div class="relative" @click="canSelect && emits('select', options)">
  20. <div class="flex gap-3">
  21. <div class="w-[94px] h-[94px] bg-[#f6f6f6] rounded-2.5 overflow-hidden">
  22. <template v-if="options.couponType === 1">
  23. <div class="bg-[#fff8f8] w-full h-full flex flex-col items-center justify-center">
  24. <div class="text-[#ff7878] text-[26px] font-normal font-['PingFang_SC']">
  25. {{ options.brandPoints }}
  26. </div>
  27. <div class="text-[#ff7878] text-base font-normal font-['PingFang_SC']">积分</div>
  28. </div>
  29. </template>
  30. <template v-else>
  31. <wd-img width="100%" height="100%" :src="options.couponImgUrl"></wd-img>
  32. </template>
  33. </div>
  34. <div class="flex-1 flex flex-col justify-around">
  35. <div class="flex items-center gap-1">
  36. <div
  37. class="px-[3px] rounded border border-solid border-[#ff3636] justify-center items-center gap-2.5 inline-flex"
  38. >
  39. <div
  40. class="text-[#ff3e3e] text-[10px] font-normal font-['PingFang_SC'] leading-normal"
  41. >
  42. {{ options.materialName }}
  43. </div>
  44. </div>
  45. <div class="text-black text-sm font-normal font-['PingFang_SC'] leading-normal">
  46. <!-- GELATO咖啡兑换券 -->
  47. {{ options.couponName }}
  48. </div>
  49. </div>
  50. <div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal">
  51. 有效期:
  52. <!-- 2024/04/01-2024/05/30 -->
  53. {{ dayjs(options.validityStartDate).format('YYYY/MM/DD') }}-{{
  54. dayjs(options.validityEndDate).format('YYYY/MM/DD')
  55. }}
  56. </div>
  57. <div
  58. class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal flex items-center"
  59. @click.stop="emits('clickInstruction', options)"
  60. >
  61. 使用说明
  62. <wd-icon name="arrow-right" size="14"></wd-icon>
  63. </div>
  64. </div>
  65. <div class="flex items-center" v-if="canSelect">
  66. <div
  67. class="w-4 h-4 rounded-full border border-black/60 border-solid"
  68. :class="`${selected ? 'bg-black' : ''}`"
  69. ></div>
  70. </div>
  71. </div>
  72. <div v-if="options.couponStatus !== CouponStatus.NOT_USE" class="absolute top--4 right--4">
  73. <wd-img
  74. width="58"
  75. height="58"
  76. :src="
  77. {
  78. [CouponStatus.HAVE_USE]: used,
  79. [CouponStatus.EXPIRED]: expired,
  80. [CouponStatus.BECAME_INVALID]: invalid,
  81. }[options.couponStatus]
  82. "
  83. ></wd-img>
  84. </div>
  85. </div>
  86. </Card>
  87. </template>