fashion-ssr-vue3/components/business/account/notification.vue

<!-- @format -->

<script lang="ts" setup>
import dayjs from 'dayjs'
import { getNoticeListApi } from '@/api/model/notice'
import { PageSizeEnum } from '~/enums/sizeEnum'
import { useCommonStore } from '@/stores/modules/common'

const list = ref<any>([])
const commonStore = useCommonStore()

async function getNoticeList(
  pageNo = PageSizeEnum.PAGE,
  pageSize = 4,
) {
  try {
    const res: any = await getNoticeListApi({
      pageNo,
      pageSize,
    })
    list.value = res.records
    await commonStore.getNoticeRemind()
  }
  catch (e) {
    console.log(e)
  }
}
getNoticeList()
</script>

<template>
  <div class="bg-#FAFAFA b-rd-10px py-10px px-24px">
    <div
      class="py-18px text-#36363D fw-600 text-18px b-b-solid b-b-1px b-b-#eee"
    >
      Notification Board
    </div>
    <div v-if="list.length">
      <div
        v-for="(item, index) in list"
        :key="index"
        class="py-16px b-b-solid b-b-#eee b-b-1px"
      >
        <div class="text-16px mb-10px  text-#333 w-210px line-clamp-1">
          {{ item.title }}
        </div>
        <div class="flex justify-between items-center">
          <div class="text-#999 text-14px w-210px line-clamp-1">
            {{ item.msgContent }}
          </div>
          <div class="text-#999 text-14px">
            {{ dayjs(item.sendTime).format("YYYY-MM-DD") }}
          </div>
        </div>
      </div>
      <div class="text-center text-primary text-18px py-24px cursor-pointer hover:underline">
        <router-link to="/account/notice">
          View details
        </router-link>
      </div>
    </div>
    <common-empty v-else title="No data found ~" />
  </div>
</template>

<style lang="less" scoped></style>