message-card.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. <script setup lang="ts">
  2. import { Message } from '../../../core/libs/models'
  3. import Card from '@/components/card.vue'
  4. import { integral, interact, message, system } from '../../../core/libs/svgs'
  5. import { beforeNow } from '../../../utils/date-util'
  6. import dayjs from 'dayjs'
  7. import { MessageType, PointStatus } from '../../../core/libs/enums'
  8. import { getPointsCoupons } from '../../../core/libs/requests'
  9. import { getMessageType } from '../../../core/libs/message-types'
  10. import { useRouter } from '../../../core/utils/router'
  11. import ButtonEvo from '@/components/button-evo.vue'
  12. const props = withDefaults(defineProps<{ options?: Message }>(), {})
  13. const emits = defineEmits<{
  14. submit: [message: Message]
  15. cancel: [message: Message]
  16. selectCoupon: [message: Message, coupons: any[]]
  17. }>()
  18. const router = useRouter()
  19. const { data: coupons, run: setCoupons } = useRequest(
  20. () =>
  21. getPointsCoupons({
  22. userId: props.options.designerId,
  23. businessId: props.options.businessId,
  24. available: true,
  25. }),
  26. { initialData: [] },
  27. )
  28. onMounted(async () => {
  29. if (
  30. props.options.messageType === MessageType.Integral &&
  31. props.options.messageSubType === 31 &&
  32. props.options.isRead !== '1'
  33. ) {
  34. await setCoupons()
  35. // console.log(coupons.value)
  36. }
  37. })
  38. </script>
  39. <template>
  40. <Card>
  41. <div class="grid items-center grid-cols-[38px_auto_100px]">
  42. <div class="row-start-1 col-start-1">
  43. <div
  44. class="w-[30px] h-[30px] bg-neutral-100 rounded-full mr-2 flex items-center justify-center"
  45. >
  46. <wd-img
  47. width="18"
  48. height="18"
  49. :src="
  50. {
  51. [MessageType.Integral]: integral,
  52. [MessageType.System]: system,
  53. [MessageType.Interact]: interact,
  54. }[options.messageType]
  55. "
  56. ></wd-img>
  57. </div>
  58. </div>
  59. <div class="row-start-1 col-start-2 text-start">
  60. <div class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-[30px]">
  61. {{ options.title }}
  62. </div>
  63. </div>
  64. <div class="row-start-1 col-start-3 text-end">
  65. <div class="text-black/30 text-sm font-normal font-['PingFang_SC'] leading-[10.18px]">
  66. {{ beforeNow(dayjs(options.createTime).toDate()) }}
  67. </div>
  68. </div>
  69. <div class="row-start-2 col-start-2 col-end-4">
  70. <div class="my-3 text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[25px]">
  71. <div
  72. v-if="options.messageType === MessageType.Integral"
  73. v-html="options.detailBody"
  74. ></div>
  75. <div class="grid grid-cols-[auto_1fr] gap-x-5 gap-y-4.5">
  76. <template v-if="options.messageSubType === 31 && options.isRead !== '1'">
  77. <div
  78. class="text-black/40 text-sm font-normal font-['PingFang_SC'] h-5.5 flex items-center"
  79. >
  80. 积分券
  81. </div>
  82. <div
  83. class="flex items-center h-full overflow-hidden"
  84. @click="coupons.length && emits('selectCoupon', options, coupons)"
  85. >
  86. <div
  87. class="text-sm font-normal font-['PingFang_SC']"
  88. :class="`${coupons.length > 0 ? 'text-[#ef4343]' : 'text-black/60'}`"
  89. >
  90. {{ `${coupons.length > 0 ? `${coupons.length}张可用` : '无可用'}` }}
  91. </div>
  92. <div class="h-5.5 flex items-center overflow-hidden">
  93. <wd-icon
  94. name="chevron-right"
  95. :custom-class="`${coupons.length > 0 ? 'text-[#ef4343]' : 'text-black/60'}`"
  96. size="16"
  97. ></wd-icon>
  98. </div>
  99. </div>
  100. </template>
  101. </div>
  102. <!-- {{ options.detailBody }} -->
  103. </div>
  104. </div>
  105. <div v-if="options.coverUrl" class="row-start-3 col-start-2 col-end-4">
  106. <img class="w-[279px] h-[164px] rounded-md" :src="options.coverUrl" />
  107. </div>
  108. <div class="row-start-4 col-start-1 col-end-4 my-2">
  109. <div v-if="!options.coverUrl" class="bg-[#dadada] w-full h-[1px]"></div>
  110. </div>
  111. <div class="row-start-5 col-start-2 col-end-4">
  112. <div class="text-black/40 text-xs font-normal font-['PingFang_SC']">
  113. <template
  114. v-if="
  115. [MessageType.Integral].includes(Number(options.messageType)) &&
  116. options.messageSubType === 31 &&
  117. options.isRead !== '1' &&
  118. options.pointsDetail?.pointsStauts === PointStatus.PendingConfirmation
  119. "
  120. >
  121. <span class="text-black/40">
  122. 确认积分后,即刻到账,如有问题请驳回,联系材料商修改积分后再次确认
  123. </span>
  124. </template>
  125. <template
  126. v-else-if="
  127. [MessageType.Integral].includes(Number(options.messageType)) &&
  128. options.messageSubType === 31 &&
  129. options.isRead === '1'
  130. "
  131. >
  132. <template v-if="options.pointsDetail?.pointsStauts === PointStatus.Rejected">
  133. <span class="text-black/40">
  134. <!-- 确认积分后,即刻到账,如有问题请驳回,联系材料商修改积分后再次确认 -->
  135. 驳回原因:{{ options.pointsDetail?.cancelReason }}
  136. </span>
  137. </template>
  138. </template>
  139. <template
  140. v-else-if="
  141. [MessageType.Integral].includes(Number(options.messageType)) &&
  142. [21, 22].includes(options.messageSubType)
  143. "
  144. >
  145. 如有问题请您联系官方客服!
  146. </template>
  147. <template v-if="getMessageType(options.messageSubType)?.path">
  148. <div
  149. @click="router.push(getMessageType(options.messageSubType)?.path)"
  150. class="flex items-center text-[rgba(0,0,0,0.85)] text-xs font-normal font-['PingFang_SC'] leading-[25px]"
  151. >
  152. 查看详情
  153. <wd-icon name="arrow-right" size="12" color="rgba(0,0,0,0.85)"></wd-icon>
  154. </div>
  155. </template>
  156. </div>
  157. </div>
  158. <div
  159. class="row-start-6 col-start-1 col-end-4 my-1"
  160. v-if="
  161. [MessageType.Integral].includes(Number(options.messageType)) &&
  162. options.messageSubType === 31 &&
  163. options.isRead !== '1' &&
  164. options.pointsDetail?.pointsStauts === PointStatus.PendingConfirmation
  165. "
  166. >
  167. <div class="flex gap-4 mt-4">
  168. <div class="flex-1">
  169. <!-- <wd-button block :round="false" plain @click="emits('cancel', options)">驳回</wd-button> -->
  170. <ButtonEvo block color="white" location="right" @click="emits('cancel', options)">
  171. <span class="text-black/80">驳回</span>
  172. </ButtonEvo>
  173. </div>
  174. <!-- <div class="flex-1">
  175. <wd-button block :round="false" @click="handleQ(it)">积分券</wd-button>
  176. </div> -->
  177. <div class="flex-1">
  178. <!-- <wd-button block :round="false" @click="emits('submit', options)">确认</wd-button> -->
  179. <ButtonEvo block @click="emits('submit', options)">确认</ButtonEvo>
  180. </div>
  181. </div>
  182. </div>
  183. </div>
  184. </Card>
  185. </template>