chunwan/pages/xiaoxi/dashan.vue

<template>
	<view class="dashan">
		<view class="list">
			<u-swipe-action v-for="(a,i) in frindList" :index="i" :key="a.userid" @click="click" :options="options">
				<view class="item"  @click.stop="toChat(a)">
					<view class="pic"><image :src="a.faceImage"></image><view class="num" v-if="a.noReadCount">{{a.noReadCount<=99?a.noReadCount:"+99"}}</view></view>
					<view class="info">
						<view class="name">{{a.nickname}}<text>{{a.createTime}}</text></view>
						<view class="desc">{{a.message}}</view>
					</view>
				</view>
			</u-swipe-action>
			<view class="empty" v-if="isShow">
				<image src="@/static/empty.png"></image>
				<view class="txt">暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				isShow: false,
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				]
			};
		},
		onLoad() {
			this.getList();
		},
		methods: {
			async click(i){
				const { code, data, msg } = await this.$api.cleanOneMsg({
					msgId: this.frindList[i].msgId,otherUserStatus: this.frindList[i].otherUserStatus
				})
				if(code == 200){
					uni.showToast({
						title: "删除成功"
					})
					this.getList();
				}else{
					uni.showToast({
						title: msg,
						icon: "none",
						position: "bottom"
					})
				}
			},
			//去聊天
			async toChat(a) {
				const { code, data } = await this.$api.findZegoToken({
					userId: uni.getStorageSync("userInfo").id,
					sellerId: a.userid
				})
				if(code == 200){
					uni.setStorageSync("chatToken",data.token);
					uni.navigateTo({
						url: "/pages/users/chat/index?id="+this.id+"&roomId="+data.roomId
					})
				}
			},
			async getList() {
				const { code, data } = await this.$api.findFrindList({
					userId: uni.getStorageSync("userInfo").id,
					type: 6
				})
				if(code == 200){
					this.isShow = data.length == 0?true:false
					this.frindList = data
				}
			},
		}
	}
</script>

<style scoped lang="scss">
.dashan{
	background-color: #fff;
	min-height: 100vh;
	.empty{
		padding: 150rpx 0;
		text-align: center;
		font-weight: 500;
		font-size: 28rpx;
		color: #222222;
		image{
			display: block;
			width: 460rpx;
			height: 400rpx;
			margin: 0 auto;
		}
	}
	padding: 0 25rpx;
	overflow: hidden;
	.item{
		display: flex;
		align-items: center;
		.pic{
			width: 90rpx;
			height: 90rpx;
			margin-right: 20rpx;
			position: relative;
			.num{
				width: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				background: #FC2C2C;
				border-radius: 50%;
				font-weight: 500;
				font-size: 18rpx;
				color: #FFFFFF;
				text-align: center;
				position: absolute;
				right: 0;
				top: 0;
				z-index: 2;
			}
			image{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.info{
			padding: 30rpx 0;
			flex: 1;
			border-bottom: 1px solid #EAEAEA;
			.name{
				font-weight: 400;
				font-size: 30rpx;
				color: #222222;
				text{
					float: right;
					font-weight: 400;
					font-size: 24rpx;
					color: #AAAAAA;
				}
			}
			.desc{
				font-weight: 400;
				font-size: 24rpx;
				color: #AAAAAA;
				margin-top: 15rpx;
			}
		}
	}
}
</style>