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

175 lines
4.6 KiB

<!--
* @Author: ch
* @Date: 2022-05-04 17:48:12
* @LastEditors: ch
* @LastEditTime: 2022-05-27 11:09:52
* @Description: file content
-->
<template>
<div>
<main class="main">
<h3 class="title">消息通知</h3>
<section class="section">
<div
class="section__item flex"
:class="item.payload.customType !== 'orderAutoDelivery' && 'section__pointer'"
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 class="section__item-content--txt" v-if="item.payload.customType === 'orderAutoDelivery'">
<template v-for="i in item.payload.virtualProductContentList" @click="openLink(i)">
<a v-if="i.shipType === 1" :key="i.shipContent" :href="i.shipContent" target="_blank">[]</a>
<span v-else :key="i.shipContent" >{{i.shipContent}}</span>
</template>
</div>
</div>
</div>
<UiEmpty
v-if="!msgData.length"
desc="暂无消息通知"
:icon="require('@/assets/img/account/order/empty.png')"
>
</UiEmpty>
</section>
</main>
</div>
</template>
<script>
import UiEmpty from "@/components/UiEmpty.vue";
import {FormatDate, CreatUuid} from '@/plugins/utils'
export default {
components: { UiEmpty },
data() {
return {};
},
computed: {
msgData(){
return [...this.$store.state.socketMsgData].map(i => {
let item = {...i}
item.payload = JSON.parse(i.payload);
item.createTimeStamp = FormatDate(i.createTimeStamp, 'mm-dd hh:ii:ss')
return item;
}).reverse();
},
},
mounted() {
// console.log(`socketMsgData`, this.$store.state);
setTimeout(()=>{
this.readMsg();
},5000)
},
methods: {
/**
* 把当前会话消息置为已读
*/
readMsg(){
this.Socket.send(JSON.stringify({
traceId : CreatUuid(),
traceType : "6",
content: {
sessionId : this.msgData[0].sessionId
}
}));
this.$store.commit("setUnreadCount", 0);
},
/**
* 点击详情跳转
*/
handleDetail(item){
if(item.payload.customType === 'orderAutoDelivery'){
return false;
}else 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;
&__pointer{
cursor: pointer;
}
&__item {
margin-bottom: 20px;
&-img {
width: 50px;
height: 50px;
margin-right: 20px;
}
&-content {
width: 840px;
&--title {
margin: 8px 0;
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;
a{
color: #FF875B;
}
}
}
}
}
}
</style>