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'
import { getMessageType } from '../../../core/libs/message-types'
import { useRouter } from '../../../core/utils/router'
import ButtonEvo from '@/components/button-evo.vue'
import { messages } from '../../../core/libs/messages'

const props = withDefaults(defineProps<{ options?: Message }>(), {})
const emits = defineEmits<{
  submit: [message: Message]
  cancel: [message: Message]
  selectCoupon: [message: Message, coupons: any[]]
}>()
const router = useRouter()
const { data: coupons, run: setCoupons } = useRequest(
  () =>
    getPointsCoupons({
      userId: props.options.designerId,
      businessId: props.options.businessId,
      available: true,
    }),
  { 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]">
          <!-- {{ options.detailBody }} -->
          <div
            v-if="[MessageType.Integral, MessageType.System].includes(options.messageType)"
            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 h-full overflow-hidden"
                @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 flex items-center overflow-hidden">
                  <wd-icon
                    name="chevron-right"
                    :custom-class="`${coupons.length > 0 ? 'text-[#ef4343]' : 'text-black/60'}`"
                    size="16"
                  ></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.pointsDetail?.pointsStauts === PointStatus.PendingConfirmation
            "
          >
            <span class="text-black/40">
              {{ messages.messages.pointNotice }}
            </span>
          </template>
          <template
            v-else-if="
              [MessageType.Integral].includes(Number(options.messageType)) &&
              options.messageSubType === 31
            "
          >
            <template v-if="options.pointsDetail?.pointsStauts === PointStatus.Rejected">
              <span class="text-[#EF4343]">
                <!-- 确认积分后，即刻到账，如有问题请驳回，联系材料商修改积分后再次确认 -->
                驳回原因：{{ options.pointsDetail?.cancelReason }}
              </span>
            </template>
          </template>
          <template
            v-else-if="
              [MessageType.Integral].includes(Number(options.messageType)) &&
              [21, 22].includes(options.messageSubType)
            "
          >
            如有问题请您联系官方客服！
          </template>
          <template v-if="getMessageType(options.messageSubType)?.path">
            <div
              @click="router.push(getMessageType(options.messageSubType)?.path)"
              class="flex items-center text-[rgba(0,0,0,0.85)] text-xs font-normal font-['PingFang_SC'] leading-[25px]"
            >
              查看详情
              <wd-icon name="arrow-right" size="12" color="rgba(0,0,0,0.85)"></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.pointsDetail?.pointsStauts === PointStatus.PendingConfirmation
        "
      >
        <div class="flex gap-4 mt-4">
          <div class="flex-1">
            <!-- <wd-button block :round="false" plain @click="emits('cancel', options)">驳回</wd-button> -->
            <ButtonEvo block color="white" location="right" @click="emits('cancel', options)">
              <span class="text-black/80">驳回</span>
            </ButtonEvo>
          </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> -->
            <ButtonEvo block @click="emits('submit', options)">确认</ButtonEvo>
          </div>
        </div>
      </div>
    </div>
  </Card>
</template>