xinelu-applet-ui/pagesB/imagetextConsultation/imagetextConsultation.vue

<template>
	<view class="app">
		<image src="../../static/pagesB/xinjianwenzhen.png" mode="" @tap='gocreatenewconsultation'></image>
		<view class="title">
			<view class="text" v-for='(item,index) in titlelist' :key='index'
				:class="formdata.status==item.status?'Selectedtext':''" @tap='selecttitltext(item)'>
				<!-- 		<view class="topright" v-if="index==0">
					{{listinfo?listinfo.length:''}}
				</view> -->
				<view class="">
					{{item.text}}
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for='item in listinfo' :key="item.id" @tap='goseekadvicefrom(item)'>
				<view class="time">
					{{item.createTime?item.createTime:''}}
				</view>
				<image src="../../static/docHead.png" mode=""></image>
				<view class="name">
					{{item.doctorName?item.doctorName+' ':'  '}} (
					{{item.problemDescription?item.problemDescription:''}} )
				</view>
				<view class="text">
					{{Number(item.messageType)==1?item.content?item.content:'':''}}
					{{Number(item.messageType)==2?'[图片]':''}}
				</view>
				<view class="messageCount" v-if="item.messageCount>0">
					{{item.messageCount}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		consultationInfolist
	} from '@/api/pagesB/imagetextConsultation/imagetextConsultation.js'
	export default {
		data() {
			return {
				titlelist: [{
						text: '本周全部',
						status: ''
					},
					{
						text: '已解答',
						status: 2
					},
					{
						text: '未解答',
						status: 1
					},
				],
				formdata: {
					pageNum: 1,
					pageSize: 10,
					patientId: '',
					consultationType: 'IMAGE_TEXT_CONSULTATION',
					status: '',
				},
				listtotal: 0,
				listinfo: [],
			};
		},
		onShow() {
			this.formdata.patientId = uni.getStorageSync('patientId')
			this.info();
		},
		methods: {
			//选择
			selecttitltext(item) {
				this.formdata.status = item.status
				this.info();
			},
			info() {
				consultationInfolist(this.formdata).then(res => {
					this.listinfo = res.rows
					this.listtotal = res.rows
				})
			},
			//新建图文咨询
			gocreatenewconsultation() {
				uni.navigateTo({
					url: "/pagesB/createnewconsultation/createnewconsultation"
				})
			},
			//前往聊天
			goseekadvicefrom(item) {
				uni.navigateTo({
					url: `/pagesC/seekadvicefrom/seekadvicefrom?item=${JSON.stringify(item)}`
				})
			},
		},
		onReachBottom() { //下滑加载
			if (this.listinfo.length >= this.listtotal) {} else {
				this.formdata.pageNum++;
				consultationInfolist(this.formdata).then(res => {
					if (res.code == 200) {
						res.rows.forEach(e => {
							this.listinfo.push(e)
						})
					}
				})
			}
		},
		onPullDownRefresh() { //上拉刷新
			this.formdata.pageNum = 1;
			this.info();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style lang="scss">
	.app {
		width: 96%;
		margin: 20rpx auto;
		padding: 20rpx 0;
		background: #FFFFFF;
		box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
		border-radius: 5rpx;

		.list {
			width: 94%;
			margin: 0 auto;

			.item {
				width: 100%;
				position: relative;
				height: 300rpx;
				background: #F6F6F6;
				border-radius: 5rpx;

				.messageCount {
					position: absolute;
					top: 50%;
					right: 5%;
					width: 33rpx;
					height: 33rpx;
					background: #F44B2F;
					border-radius: 50%;
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 33rpx;
					text-align: center;
				}

				.text {
					position: absolute;
					left: 190rpx;
					top: 190rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #5F5F5F;
					padding-right: 20rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					white-space: normal;
					word-break: break-all;
				}

				.name {
					position: absolute;
					left: 190rpx;
					top: 125rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #000000;
				}

				.time {
					width: 100%;
					padding-left: 20rpx;
					height: 80rpx;
					line-height: 80rpx;
					border-bottom: 2rpx solid #DADADA;
					font-size: 26rpx;
					font-weight: 400;
					color: #5F5F5F;
				}

				image {
					position: absolute;
					left: 20rpx;
					top: 110rpx;
					width: 150rpx;
					height: 150rpx;
				}
			}
		}

		.title {
			text-align: center;
			width: 94%;
			margin: 30rpx auto;
			display: flex;

			.text {
				margin-right: 20rpx;
				height: 70rpx;
				line-height: 70rpx;
				background: #FFFFFF;
				border: 1px solid #26A888;
				border-radius: 5rpx;
				width: 25%;
				color: #26A888;
				position: relative;

				.topright {
					width: 33rpx;
					height: 33rpx;
					background: #FFA115;
					border-radius: 50%;
					text-align: center;
					line-height: 33rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
					position: absolute;
					right: 0;
					top: 0;
					transform: translate(50%, -50%);
				}
			}

			.Selectedtext {
				color: #fff;
				background: #26A888 !important;
			}
		}

		image {
			width: 94%;
			display: block;
			margin: 0 auto;
			height: 130rpx;
		}
	}
</style>