shop-app/src/pages/account/message/system.vue

<!--
 * @Author: ch
 * @Date: 2022-03-26 14:32:03
 * @LastEditors: ch
 * @LastEditTime: 2022-05-26 21:02:48
 * @Description: file content
-->
<template>
	<view class="main">
		<view class="msg-item" v-for="item in msgData" :key="item.id">
				<view class="msg-item--title">
					<text>{{item.payload.title }}</text>
					<text class="msg-item--time">{{FormatDate(item.createTimeStamp, 'mm-dd hh:ii:ss')}}</text>
				</view>
				<view class="msg-item--con" @click="handleDetail(item)">
					<image class="msg-item--img" :src="item.payload.productImageUrls ? item.payload.productImageUrls[0] : require('@/static/message/xt.png')" mode="widthFix"/>
					<view class="msg-item--desc" v-if="item.payload.customType === 'orderAutoDelivery'">
						<template v-for="i in item.payload.virtualProductContentList" @click="openLink(i)">
							<text class="msg-item--desc-link" v-if="i.shipType === 1"  :key="i.shipContent">[下载文件]</text>
							<text v-else :key="i.shipContent">{{i.shipContent}}</text>
						</template>
					</view>
					<view class="msg-item--desc" v-else>{{item.payload.content}}</view>
				</view>
		</view>
		<u-loadmore status="loading" v-if="!msgData || !msgData.length"/>
	</view>
</template>
<script>
import {Im, CreateUUID, ToAsyncAwait, FormatDate} from '@/common/utils';
export default {
	data(){
		return {}
	},
	computed:{
		curSessionData(){
			const data = this.$store.state.imData.find(i =>i.id == this.$Route.query.sessionId) || {}
			if(data.id){
				Im.setCurSessionId(data.id);
			}
			return data;
		},
		msgData (){
			let data = this.curSessionData ? this.curSessionData.messageList : [];
			return Object.assign([],data).reverse();
		}
	},
	watch:{
		curSessionData(){
			this.setTitle();
		}
	},
	
	onReachBottom(){
		this.getHistoryMsg();
	},
	onShow(){
		if(!this.$route.query.sessionId){
			this.$Router.back();
			return false
		}
		this.getHistoryMsg();
		this.readMsg();
		this.setTitle();
	},
	methods:{
		FormatDate : FormatDate,
		/**
		 * 获取历史消息
		 */
		setTitle(){
			uni.setNavigationBarTitle({
				title : this.curSessionData?.fromNickname || '系统消息'
			});
		},
		async getHistoryMsg(){
			this.loading = true;
			const lastMsg = this.msgData?.length ? this.msgData[this.msgData.length - 1] : {};
			await ToAsyncAwait(Im.getHistoryMsg({
				content : {
					sessionId : this.$route.query.sessionId,
					topMessageId : lastMsg.id || null
				}
			}));
		},
		/**
		 * 把当前会话消息置为已读
		 */
		async readMsg(){
			Im.setRead({
				content: { 
					sessionId : this.$route.query.sessionId
				}
			});
		},
		/**
		 * 点击详情跳转
		 */
		handleDetail(item){
			if(['orderPay','orderDelivery','orderCancel'].includes(item.payload.customType)){
				this.$Router.push(`/orderDetail?id=${item.payload.primaryId}`)
			}else if(['refundFail','refundSuccess'].includes(item.payload.customType)){
				this.$Router.push(`/saleAfterDetail?id=${item.payload.primaryId}`)
			}else if(item.payload.linkJump){
				// #ifdef H5
					window.location.href = item.payload.linkJump;
				// #endif
				// #ifdef APP-PLUS
					plus.runtime.openURL(item.payload.linkJump);
				// #endif
			}
		},
		openLink(item){
			if(item.shipType === 1){
				// #ifdef H5
					window.location.href = item.shipContent;
				// #endif
				// #ifdef APP-PLUS
					plus.runtime.openURL(item.shipContent);
				// #endif
			}
		}
	}
}
</script>
<style lang="scss" scoped>
.msg-item{
	padding: 40rpx 0 0 40rpx;
	&--title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 40rpx;
		font-size: $font-size-lg;
		color: $color-grey6;
	}
	&--time{
		font-size: $font-size-sm;
		color: $color-grey4;
	}
	&--con{
		display: flex;
		border-bottom: 1px solid $color-grey2;
		padding: 40rpx 0;
	}
	&--img{
		width: 140rpx;
		height: 140rpx;
		border-radius: 12rpx;
		margin-right: 40rpx;
	}
	&--desc{
		width: 455rpx;
		font-size: $font-size-base;
		line-height: 39rpx;
		color: $color-grey5;
		&-link{
			color: $color-yellow4;
			margin-right: 10rpx;
		}
	}
}
</style>