designer-hub/packages/merchant/src/components/coupon-record.vue

<script setup lang="ts">
import Card from '@/components/card.vue'
import dayjs from 'dayjs'
import used from '@designer-hub/assets/src/libs/assets/used'


const props = withDefaults(
  defineProps<{
    option?: {
      materialId: number
      couponImgUrl: any
      materialsName: string
      validityStartDate: number
      validityEndDate: number
      brandPoints: number
    }
    canSelect?: boolean
    selected?: boolean
  }>(),
  {
    canSelect: false,
    selected: false,
  },
)
</script>
<template>
  <div
    class="mx-3.5 p-4 bg-[rgba(255,255,255,0.7)] rounded-2xl shadow-[0px_5px_8px_0px_rgba(21,3,3,0.03)]"
  >
    <div class="relative">
      <div class="flex gap-3">
        <div class="w-[68px] h-[68px] bg-[#f6f6f6] rounded-2.5 overflow-hidden">
          <!--          <template v-if="option.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="option.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 shrink-0"
            >
              <div
                class="text-[#ff3e3e] text-[10px] font-normal font-['PingFang_SC'] leading-normal "
              >
                {{ option.materialsName }}
              </div>
            </div>
            <div class="text-black text-sm font-normal font-['PingFang_SC'] leading-normal overflow-hidden whitespace-nowrap text-ellipsis">
              <!-- GELATO咖啡兑换券 -->
              {{ option.couponName }}
            </div>
          </div>
          <div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal">
            <!--            有效期：-->
            <!-- 2024/04/01-2024/05/30 -->
            {{ dayjs(option.validityStartDate).format('YYYY/MM/DD') }}-{{
              dayjs(option.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 class="absolute top--4 right--4">
        <wd-img width="58" height="58" :src="used"></wd-img>
      </div>
    </div>
  </div>
</template>