You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
shop-pc/pages/account/index/message.vue

124 lines
2.9 KiB

<!--
* @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>
<UiEmpty
v-if="!socketMsgData.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";
export default {
components: { UiEmpty },
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;
max-height: 600px;
overflow-y: auto;
&__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>