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

<!--
 * @Author: ch
 * @Date: 2022-05-04 17:48:12
 * @LastEditors: ch
 * @LastEditTime: 2022-05-04 17:53:11
 * @Description: file content
-->

<template>
  <div>
    <main class="main">
      <h3 class="title">消息通知</h3>
      <section class="section">
        <div class="section__item flex" v-for="item in socketMsgData" :key="item.id">
          <img
            class="section__item-img"
            src="https://img1.baidu.com/it/u=3384796346,381674655&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
            alt="消息通知"
          />
          <div class="section__item-content flex flex-column">
            <div class="section__item-content--title flex">
              <span>{{ JSON.parse(item.payload).title || `` }}</span>
              <span class="section__item-content--time">{{
                item.createTimeStamp
              }}</span>
            </div>
            <div class="section__item-content--txt">
              {{
                JSON.parse(item.payload).content ||
                ``
              }}
            </div>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState(["token","socketMsgData"]),
  },
  mounted(){
    console.log(`socketMsgData`,this.$store.state)
  },
  methods: {},
};
</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;

    &__item {
      margin-bottom: 20px;

      &-img {
        width: 110px;
        height: 110px;
        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>