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.

161 lines
4.0 KiB

4 months ago
<template>
<!-- 消息中心 -->
<view class="main">
<view class="px-20">
<view class="w-full bg--w111-fff rd-24rpx mt-24 p-32 flex-between-center"
v-if="system.id" @tap="goDetail">
<view class="left-pic w-88 h-88 rd-50-p111- flex-center">
<text class="iconfont icon-ic_message1 fs-48 text--w111-fff"></text>
</view>
<view class="flex-1 pl-24">
<view class="flex-between-center">
<view class="fs-32 lh-44rpx w-200 line1">{{system.title}}</view>
<text class="fs-22 text--w111-999 lh-30rpx">{{ system.add_time }}</text>
</view>
<view class="flex-between-center mt-8">
<view class="fs-24 text--w111-999 lh-34rpx w-430 line1">{{system.content}}</view>
<view class="dot" v-if="system.message_num > 0"></view>
</view>
</view>
</view>
<view class="w-full bg--w111-fff rd-24rpx mt-24 p-32 flex-between-center"
v-for="(item, index) in list" :key="index" @tap="goChat(item.to_uid)">
<image :src="item.avatar" class="w-88 h-88 rd-50-p111-"></image>
<view class="flex-1 pl-24">
<view class="flex-between-center">
<view class="fs-32 lh-44rpx w-200 line1">{{ item.nickname }}</view>
<view class="fs-22 text--w111-999 lh-30rpx">{{ item._update_time }}</view>
</view>
<view class="flex-between-center mt-8">
<view class="fs-24 text--w111-999 lh-34rpx w-430 line1"
v-if="[1,2].includes(item.message_type)"
v-html="item.message"></view>
<view v-else>{{messageType | filterType}}</view>
<text class="badge" v-if="item.mssage_num > 0">{{ item.mssage_num > 99 ? '99+' : item.mssage_num}}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import {serviceRecord} from '@/api/user.js';
import colors from '@/mixins/color.js';
import {HTTP_REQUEST_URL} from '@/config/app';
export default {
data() {
return {
list: [], //客服消息
system:{}, //站内信
page: 1,
type: 0,
limit: 20,
loading: false,
finished: false,
imgHost:HTTP_REQUEST_URL
};
},
filters:{
messageType(val){
let obj = {
3: '[图片]',
4: '[语音]',
5: '[商品]',
6: '[订单]',
};
return obj[val]
}
},
onShow() {
this.page = 1
this.list = [];
this.finished = false;
this.getList();
},
onReachBottom() {
this.getList()
},
onPullDownRefresh() {
this.page = 1
this.list = [];
this.finished = false;
this.getList();
},
methods: {
// 站内信
getList() {
if (this.loading || this.finished) {
return;
}
this.loading = true;
uni.showLoading({
title: '加载中'
});
serviceRecord({
page: this.page,
limit: this.limit
}).then(res => {
uni.hideLoading();
uni.stopPullDownRefresh();
let data = res.data.service;
this.system = res.data.system;
this.loading = false;
data.forEach(item => {
if ([1,2].includes(item.message_type)) {
item.message = this.replace_em(item.message);
}
});
this.list = this.list.concat(data);
this.finished = data.length < this.limit;
this.page += 1;
})
.catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
})
})
},
replace_em(str) {
str = str.replace(/\[em-([a-z_]*)\]/g, "<span class='em em-$1'/></span>");
return str;
},
goChat(id) {
uni.navigateTo({
url: '/pages/extension/customer_list/chat?to_uid=' + id + '&type=1'
})
},
goDetail() {
uni.navigateTo({
url: '/pages/users/message_center/messageDetail'
})
},
},
}
</script>
<style lang="scss" scoped>
.left-pic{
background: linear-gradient(180deg, #FFC657 0%, #FE653B 100%);
}
.dot{
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: #e93323;
}
.badge{
min-width: 32rpx;
max-width: 56rpx;
height: 32rpx;
font-size: 22rpx;
line-height: 32rpx;
text-align: center;
padding: 0 8rpx;
border-radius: 20rpx;
color: #fff;
background-color: #e93323;
}
</style>