tourGuide/pages/dialogue/index.vue

<template>
	<view class="content">
		
		<view class="common-types">
			<uni-badge class="uni-badge-left-margin" :text="6" absolute="rightTop" :offset="[5, 5]" size="small"
			:custom-style="{background:'#E5131B',color:'#FFFFFF',border:'none'}">
				<view @click="setType(0)" :class="['common-type',type==0?'active':'']">会话中</view>
			</uni-badge>
			
			<view @click="setType(1)" :class="['common-type',type==1?'active':'']">会话结束</view>
			<view @click="setType(2)" :class="['common-type',type==2?'active':'']">用户离线</view>
		</view>

		
		<view class="content-area flex-1 h-1rpx">
			
			<view class="dialogue-item">
				<image src="https://static.ticket.sz-trip.com/uploads/20241107/3480f83dd4b5346e04ad184f61cc848a.png">
				<view class="dialogue-info">
					<view class="name">游客1505</view>
					<view class="message text-overflow">游客您好，导游，我想去寒山寺和拙政园路线，你您好，导游，我想去寒山寺和拙政园路线，你...</view>
				</view>
			</view>
		
		</view>
		

	</view>
</template>

<script>

	export default {
		data() {
			return {
				type: 0,
				
			};
		},
		onShow() {
		},
		onLoad() {},
		methods: {
			setType (type) {
				this.type = type
			},

			getInfo() {
				this.Post({
					scenic_id: this.scenicId,
					goods_id: this.goodsId,
					offset: this.list.length,
					limit: 10
				}, '/api/scenic/getGoodsCommentByScenicId').then(res => {
					if (res) {
						this.list = [...this.list, ...res.data]
						this.list.forEach(item => {
							item.close = false
							item.needShowExpande = false
						})
						console.log('添加close的list',this.list);
						if (res.data.length < 10) {
							this.finished = true
						}
					}
				})
			},
			
		},
		
	}
</script>

<style lang="scss" scoped>
	*{
		box-sizing: border-box;
	}
	.content {
		height: calc(100vh - 44px - 50px);
		overflow-x: hidden;
		position: relative;
		display: flex;
		flex-direction: column;
	}
	

	.common-types {
		padding: 34rpx 26rpx;
		width: 100%;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		.common-type {
			width: 201rpx;
			height: 66rpx;
			border-radius: 33rpx;
			flex-shrink: 0;
			line-height: 66rpx;
			text-align: center;
			color: #000000;
			font-weight: 500;
			font-size: 32rpx;
			border: 1px solid #000000;
		}
		
		.common-type.active {
			background: #96684F;
			border: none;
			color: white;
		}
	}
		
		
	
	
	.content-area{
		overflow-y: auto;
		overflow-x: hidden;
		padding: 26rpx
	}
	
	.dialogue-item{
		height: 90rpx;
		display: flex;
		align-items: center;
		margin-bottom:28rpx;
		
		image{
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			flex-shrink: 0;
			margin-right: 8rpx;
		}
		.dialogue-info{
			height: 90rpx;
			padding: 0 50rpx 5rpx 5rpx;
			width: 1px;
			flex: 1;
			border-bottom: 1px solid #BDBDBD;;
			
			.name{
				font-weight: 500;
				font-size: 24rpx;
				color: #4F4F4F;
			}
			.message{
				font-weight: 400;
				font-size: 27rpx;
				color: #000000;
			}
		}
	}
	
</style>