shop-pc/pages/account/index/message.vue

<!--
 * @Author: ch
 * @Date: 2022-05-04 17:48:12
 * @LastEditors: ch
 * @LastEditTime: 2022-05-26 10:38:16
 * @Description: file content
-->

<template>
  <div>
    <main class="main">
      <h3 class="title">消息通知</h3>
      <section class="section">
        <div
          class="section__item flex"
          v-for="item in msgData"
          :key="item.id"
          @click="handleDetail(item)"
        >
          <img
            class="section__item-img"
            :src="item.payload.productImageUrls ? item.payload.productImageUrls[0] : require('@/assets/img/account/im/system.png')"
            alt="消息通知"
          />
          <div class="section__item-content flex flex-column">
            <div class="section__item-content--title flex">
              <span>{{ item.payload.title || `` }}</span>
              <span class="section__item-content--time">{{item.createTimeStamp}}</span>
            </div>
            <div class="section__item-content--txt">
              {{ item.payload.content || `` }}
            </div>
          </div>
        </div>
        <UiEmpty
          v-if="!msgData.length"
          desc="暂无消息通知"
          :icon="require('@/assets/img/account/order/empty.png')"
        >
        </UiEmpty>
      </section>
    </main>
  </div>
</template>
<script>
// import { mapState } from "vuex";
import UiEmpty from "@/components/UiEmpty.vue";
import {FormatDate} from '@/plugins/utils'
export default {
  components: { UiEmpty },
  data() {
    return {};
  },
  computed: {
    msgData(){
      return this.$store.state.socketMsgData.map(i => {
        i.payload = JSON.parse(i.payload);
        i.createTimeStamp = FormatDate(i.createTimeStamp, 'mm-dd hh:ii:ss')
        return i;
      }).reverse();
    },
    // ...mapState(["token", "socketMsgData"]),
  },
  mounted() {
    console.log(`socketMsgData`, this.$store.state);
  },
  methods: {
    
		/**
		 * 点击详情跳转
		 */
		handleDetail(item){
			if(['orderPay','orderDelivery','orderCancel'].includes(item.payload.customType)){
				this.$router.push(`/account/order/detail?id=${item.payload.primaryId}`)
			}else if(['refundFail','refundSuccess'].includes(item.payload.customType)){
				this.$message.warning('请在移动端查看售后详情~');
			}else if(item.payload.linkJump){
					window.location.href = item.payload.linkJump;
			}
		}
  },
};
</script>
<style lang="scss" scoped>
.main {
  width: 1000px;
  .title {
    width: 100%;
    height: 42px;
    background: #f8f8f8;
    border: 1px solid #dddddd;
    padding: 0 24px;
    font-size: 14px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    line-height: 42px;
  }

  .section {
    padding: 22px 20px 0;
    border: 1px solid #ddd;
    margin-top: -1px;
    max-height: 600px;
    overflow-y: auto;

    &__item {
      margin-bottom: 20px;

      &-img {
        width: 50px;
        height: 50px;
        margin-right: 20px;
      }

      &-content {
        width: 840px;
        &--title {
          margin-top: 8px;
          font-size: 16px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #333333;
        }
        &--time {
          font-size: 12px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #999999;
          margin-left: auto;
        }
        &--txt {
          margin-top: auto;
          margin-bottom: 8px;
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #999999;
        }
      }
    }
  }
}
</style>