designer-hub/packages/app/src/pages/messages/components/message-card.vue

<script setup lang="ts">
import { Message } from '../../../core/libs/models'
import Card from '@/components/card.vue'
import { integral, interact, message, system } from '../../../core/libs/svgs'
import { beforeNow } from '../../../utils/date-util'
import dayjs from 'dayjs'
import { MessageType, PointStatus } from '../../../core/libs/enums'
import { getPointsCoupons } from '../../../core/libs/requests'

const props = withDefaults(defineProps<{ options?: Message }>(), {})
const emits = defineEmits<{
  submit: [message: Message]
  cancel: [message: Message]
  selectCoupon: [message: Message, coupons: any[]]
}>()
const { data: coupons, run: setCoupons } = useRequest(
  () =>
    getPointsCoupons({ userId: props.options.designerId, businessId: props.options.businessId }),
  { initialData: [] },
)
onMounted(async () => {
  if (
    props.options.messageType === MessageType.Integral &&
    props.options.messageSubType === 31 &&
    props.options.isRead !== '1'
  ) {
    await setCoupons()
    // console.log(coupons.value)
  }
})
</script>
<template>
  <Card>
    <div class="grid items-center grid-cols-[38px_auto_100px]">
      <div class="row-start-1 col-start-1">
        <div
          class="w-[30px] h-[30px] bg-neutral-100 rounded-full mr-2 flex items-center justify-center"
        >
          <wd-img
            width="18"
            height="18"
            :src="
              {
                [MessageType.Integral]: integral,
                [MessageType.System]: system,
                [MessageType.Interact]: interact,
              }[options.messageType]
            "
          ></wd-img>
        </div>
      </div>
      <div class="row-start-1 col-start-2 text-start">
        <div class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-[30px]">
          {{ options.title }}
        </div>
      </div>
      <div class="row-start-1 col-start-3 text-end">
        <div class="text-black/30 text-sm font-normal font-['PingFang_SC'] leading-[10.18px]">
          {{ beforeNow(dayjs(options.createTime).toDate()) }}
        </div>
      </div>
      <div class="row-start-2 col-start-2 col-end-4">
        <div class="my-3 text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[25px]">
          <div
            v-if="options.messageType === MessageType.Integral"
            v-html="options.detailBody"
          ></div>
          <div class="grid grid-cols-[auto_1fr] gap-x-5 gap-y-4.5">
            <template v-if="options.messageSubType === 31 && options.isRead !== '1'">
              <div
                class="text-black/40 text-sm font-normal font-['PingFang_SC'] h-5.5 flex items-center"
              >
                积分券
              </div>
              <div
                class="flex items-center"
                @click="coupons.length && emits('selectCoupon', options, coupons)"
              >
                <div
                  class="text-sm font-normal font-['PingFang_SC']"
                  :class="`${coupons.length > 0 ? 'text-[#ef4343]' : 'text-black/60'}`"
                >
                  {{ `${coupons.length > 0 ? `${coupons.length}张可用` : '无可用'}` }}
                </div>
                <div class="h-5.5 overflow-hidden">
                  <wd-icon
                    name="chevron-right"
                    :custom-class="`${coupons.length > 0 ? 'text-[#ef4343]' : 'text-black/60'}`"
                    size="20"
                  ></wd-icon>
                </div>
              </div>
            </template>
          </div>
          <!-- {{ options.detailBody }} -->
        </div>
      </div>
      <div v-if="options.coverUrl" class="row-start-3 col-start-2 col-end-4">
        <img class="w-[279px] h-[164px] rounded-md" :src="options.coverUrl" />
      </div>
      <div class="row-start-4 col-start-1 col-end-4 my-2">
        <div v-if="!options.coverUrl" class="bg-[#dadada] w-full h-[1px]"></div>
      </div>
      <div class="row-start-5 col-start-2 col-end-4">
        <div class="text-black/40 text-xs font-normal font-['PingFang_SC']">
          <template
            v-if="
              [MessageType.Integral].includes(Number(options.messageType)) &&
              options.messageSubType === 31 &&
              options.isRead !== '1' &&
              options.pointsDetail?.pointsStauts === PointStatus.PendingConfirmation
            "
          >
            <span class="text-black/40">
              确认积分后，即刻到账，如有问题请驳回，联系材料商修改积分后再次确认
            </span>
          </template>
          <template
            v-else-if="
              [MessageType.Integral].includes(Number(options.messageType)) &&
              options.messageSubType === 31 &&
              options.isRead === '1'
            "
          >
            <template v-if="options.pointsDetail?.pointsStauts === PointStatus.Rejected">
              <span class="text-black/40">
                <!-- 确认积分后，即刻到账，如有问题请驳回，联系材料商修改积分后再次确认 -->
                驳回原因：{{ options.pointsDetail?.cancelReason }}
              </span>
            </template>
          </template>
          <template
            v-else-if="
              [MessageType.Integral].includes(Number(options.messageType)) &&
              [21, 22].includes(options.messageSubType)
            "
          >
            如有问题请您联系官方客服！
          </template>
          <template v-else>
            <div class="flex items-center text-black">
              查看详情
              <wd-icon name="arrow-right" size="16"></wd-icon>
            </div>
          </template>
        </div>
      </div>
      <div
        class="row-start-6 col-start-1 col-end-4 my-1"
        v-if="
          [MessageType.Integral].includes(Number(options.messageType)) &&
          options.messageSubType === 31 &&
          options.isRead !== '1' &&
          options.pointsDetail?.pointsStauts === PointStatus.PendingConfirmation
        "
      >
        <div class="flex gap-4">
          <div class="flex-1">
            <wd-button block :round="false" plain @click="emits('cancel', options)">驳回</wd-button>
          </div>
          <!-- <div class="flex-1">
            <wd-button block :round="false" @click="handleQ(it)">积分券</wd-button>
          </div> -->
          <div class="flex-1">
            <wd-button block :round="false" @click="emits('submit', options)">确认</wd-button>
          </div>
        </div>
      </div>
    </div>
  </Card>
</template>