xc/pageExpert/chat/index.vue

<template>
	<view class="container">
		<view class="topBox">
			<view class="topTitle">在线咨询</view>
			<view class="search-box flex" @click="clickSearch()">
				<image class="search" src="/static/image/search01.png" mode=""></image>
				<view class="search-font">搜索</view>
			</view>
		</view>
		<view class="listBox">
			<view class="list flex_item" v-for="item,index in list" :key="index" @click="toChat(item)">
				<image class="avatar" src="https://cdn.uviewui.com/uview/album/1.jpg"></image>
				<view class="listInfo">
					<view class="infoTpl flex">
						<view class="nameBox flex_item">
							<view class="name">{{item.name || '张教授'}}</view>
							<view class="nameTip" v-if="item.tip">{{item.tip}}</view>
						</view>
						<view class="time">2023.12.09 12:00:00</view>
					</view>
					<view class="chat line1">现在过去方便吗</view>
				</view>
			</view>
		</view>
		<pageFooter @newDataStatus="newDataStatus"></pageFooter>
	</view>
</template>

<script>
	import pageFooter from "../components/pageFooter/index.vue";
	import { mapGetters } from "vuex";
	export default {
		components: {
			pageFooter,
		},
		computed: mapGetters(["isLogin", "uid"]),
		data() {
			return {
				isFooter: false,
				list:[{tip:'3T健康台州店',name:"李教授"},{},{},{},{},{}]
			};
		},
		onReachBottom: function () {},
		onLoad(options) {},
		onUnload() {},
		onReady() {},
		onShow() {},
		methods: {
			//搜索
			clickSearch(){},
			//跳转聊天页面
			toChat(item){
				uni.navigateTo({
					url:'/pageExpert/chat/details?name='+item.name
				})
			},
			newDataStatus(val) {
				this.isFooter = val;
			},
		},
	};
</script>
<style scoped lang="scss">
	.topBox{
		padding: 25rpx 25rpx;
		width: 100%;
		background: linear-gradient(90deg, #50EAD2, #08C4E6);
		.topTitle{
			text-align: center;
			font-size: 34rpx;
			font-weight: 500;
			color: #FFFFFF;
			padding-bottom: 33rpx;
		}
	}
	.search-box {
		justify-content: center;
		height: 70rpx;
		border-radius: 12rpx;
		background-color: #FFFFFF;
		.search {
			width: 34rpx;
			height: 34rpx;
		}
	
		.search-font {
			margin-left: 14rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #cbcbcb;
		}
	}
	.listBox{
		background-color: #FFFFFF;
		padding: 25rpx 28rpx;
		.list{
			border-bottom: 1rpx solid #F0F0F0;
			padding: 25rpx 0rpx;
			&:last-child{
				border-bottom: none;
			}
			.avatar{
				width: 133rpx;
				height: 133rpx;
				border-radius: 12rpx;
			}
			.listInfo{
				width: calc(100% - 80rpx);
				padding-left: 20rpx;
				.infoTpl{
					.nameBox{
						.name{
							font-size: 32rpx;
							font-weight: 500;
							color: #333333;
							padding-right: 12rpx;
						}
						.nameTip{
							border: 1px solid #54B8C8;
							border-radius: 5rpx;
							font-size: 22rpx;
							font-weight: 500;
							color: #0BC5E5;
							padding: 2rpx 10rpx;
						}
					}
					.time{
						font-size: 24rpx;
						font-weight: 500;
						color: #999999;
					}
				}
				.chat{
					font-size: 28rpx;
					font-weight: 500;
					color: #999999;
					padding-top: 18rpx;
				}
			}
		}
	}
</style>