dingdong-master/pages/index/msg-home.vue

<template>
	<view class="margin-bottom-lg">
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'">
			<block slot="content">消息大厅</block>
		</cu-custom>
		<!-- 消息分类 -->
		<view class="solid-bottom">
			<view class='bg-white grid grid-square col-4 padding-sm'>
				<view class="text-center shadow-warp" :class="curMsgType === 0 ? 'bg-main-color light' : 'bg-gray'"
					@click="changeCurMsgType(0)">
					<view class='cu-tag badge round bg-red' v-if="msgAmount.customerQuestion > 0">
						{{msgAmount.customerQuestion}}
					</view>
					<view class="text-sl center-icon"><text class='cuIcon-people'></text></view>
					<view>客户咨询</view>
				</view>
				<view class="text-center shadow-warp" :class="curMsgType === 1 ? 'bg-main-color light' : 'bg-gray'"
					@click="changeCurMsgType(1)">
					<view class='cu-tag badge round bg-red' v-if="msgAmount.statusChange > 0">{{msgAmount.statusChange}}
					</view>
					<view class="text-sl center-icon"><text class='cuIcon-emoji'></text></view>
					<view>状态变动</view>
				</view>
				<view class="text-center shadow-warp" :class="curMsgType === 2 ? 'bg-main-color light' : 'bg-gray'"
					@click="changeCurMsgType(2)">
					<view class='cu-tag badge round bg-red' v-if="msgAmount.hurryMsg > 0">{{msgAmount.hurryMsg}}</view>
					<view class="text-sl center-icon"><text class='cuIcon-mail'></text></view>
					<view>急报信息</view>
				</view>
				<view class="text-center shadow-warp" :class="curMsgType === 3 ? 'bg-main-color light' : 'bg-gray'"
					@click="changeCurMsgType(3)">
					<view class='cu-tag badge round bg-red' v-if="msgAmount.sysNotice > 0">{{msgAmount.sysNotice}}
					</view>
					<view class="text-sl center-icon"><text class='cuIcon-notice'></text></view>
					<view>系统通知</view>
				</view>
			</view>
		</view>
		<!-- 消息列表 -->
		<view class="cu-list menu-avatar">
			<view class="cu-item bottom-border" v-for="(item,index) in msgList" @click="showMsgDetail(item)">
				<view class="cu-avatar radius lg"
					style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
				<view class="content">
					<view class="text-black">
						<view class="text-cut">{{item.name}}</view>
					</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">{{item.lastMsg}}</view>
					</view>
				</view>
				<view class="action padding-right-xs">
					<view class="text-grey text-sm">{{item.recvTime}}</view>
					<view class="cu-tag round bg-red sm">{{item.amount}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'msg-home',
		data() {
			return {
				curMsgType: 0,
				msgAmount: {
					customerQuestion: 10,
					statusChange: 2,
					hurryMsg: 4,
					sysNotice: 0
				},
				msgList: [{
					name: 'vvv',
					lastMsg: '消息内容xxxxxxx',
					recvTime: '2022-05-20',
					amount: 5
				}, {
					name: 'vvv',
					lastMsg: '消息内容xxxxxxx',
					recvTime: '2022-05-20',
					amount: 5
				}, {
					name: 'vvv',
					lastMsg: '消息内容xxxxxxx',
					recvTime: '2022-05-20',
					amount: 5
				}, {
					name: 'vvv',
					lastMsg: '消息内容xxxxxxx',
					recvTime: '2022-05-20',
					amount: 5
				}, {
					name: 'vvv',
					lastMsg: '消息内容xxxxxxx',
					recvTime: '2022-05-20',
					amount: 5
				}]
			}
		},
		onReady() {
			this.loadData();
		},
		methods: {
			async loadData() {

			},
			changeCurMsgType(type) {
				this.curMsgType = type
			},
			showMsgDetail(msgObj) {
				uni.navigateTo({
					url: '/pages/index/msg-dialog'
				})
			}
		}
	}
</script>

<style scoped>
	.center-icon {
		padding-top: calc((100% - 108rpx)/3);
	}

	.grid.grid-square .cu-tag.bg-red {
		background-color: #e54d42;
		color: #ffffff;
	}

	.cu-list.menu-avatar>.cu-item .content {
		position: absolute;
		left: 146rpx;
		width: calc(100% - 96rpx - 60rpx - 120rpx - 20rpx - 50rpx);
		line-height: 1.6em;
	}

	.cu-list.menu-avatar>.cu-item .action {
		width: 200rpx;
		text-align: right;
	}

	.grid.grid-square>view {
		transition: all 0.2s ease-in-out 0s;
	}

	.cu-list.menu-avatar>.cu-item:after,
	.cu-list.menu>.cu-item:after {
		border: none;
	}

	.cu-list>.cu-item:last-child:after,
	.cu-list.menu>.cu-item:last-child:after {
		border: none;
	}

	.bottom-border {
		border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
	}

	.bottom-border:last-child {
		border-bottom: none;
	}

	.text-sl {
		font-size: 60rpx;
	}

	.grid.col-4.grid-square>view {
		padding-bottom: calc((100% - 60rpx)/4);
		height: 0;
		width: calc((100% - 60rpx)/4);
		border-radius: 50%;
		overflow: visible;
	}
</style>