mabaoDoctor/pages/patient/patient.vue

<template>
	<view style="width: 100%;height: 100%;">
		<view style="height: 100rpx;width: 100%;display: flex;align-items: center;justify-content: center;background-color: #FFFFFF;">
			<u-search placeholder="搜索用户姓名" v-model="keyword" :show-action='false' style="width: 90%;" search-icon-color="red"
			 @change="change"></u-search>
		</view>
		<view style="padding: 20rpx 28rpx;" v-if="keyword == ''">
			<u-collapse  :item-style="itemStyle"  accordion ref="collapse">
				<view v-for="(item, index) in followList" :key="index">
					<u-collapse-item>
						<!-- 标题 -->
						<view slot="title" style="font-size: 30rpx;">
							<text style="font-weight: bold;margin-right: 20rpx;">{{item.title}}</text>
							<text style="color: #666666;">{{item.sum !=0?item.sum:''}}</text>
						</view>
						<!-- 面板内容 -->
						<view class="he" :style="item.sum!=0?(item.sum<5?'height:'+item.sum*100+'rpx;':'height:500rpx'):''">
							<view v-for="nitem,nindex in item.content" style="display: flex;align-items: center;padding: 10rpx 0;overflow:auto;height: auto;"
							 @click="xq" :id="nitem.user_id" :key='index'>
								<image :src="nitem.avatar" mode="aspectFit" style="height: 68rpx;width: 68rpx;border-radius: 50%;margin-right: 20rpx;"></image>
								<text style="font-size: 28rpx;margin: 28rpx;color: #000000;">{{nitem.nickname}}</text>
								<text style="font-size: 28rpx;">{{nitem.remark==null?'':nitem.remark}}</text>
							</view>
						</view>

					</u-collapse-item>
				</view>
			</u-collapse>
		</view>
		<view v-else>
			<view v-for="item, index in followList" :key="index">
				<view style="padding:30rpx 50rpx;font-weight: bold;font-size: 30rpx;background-color: #EEEEEF;">{{item.title}}</view>
				<view v-for="citem,cindex in item.content" @click="xq" :id="citem.user_id" :key='cindex' v-if="citem.nickname.indexOf(keywordSearch)>=0">
					<view  class="flex align-center" style="height: 150rpx;padding: 10rpx;margin: 0 30rpx;">
						<image :src="citem.avatar==null?'../../static/login/moren.png':citem.avatar" mode="aspectFit" style="height: 75rpx;width: 75rpx;border-radius: 50%;margin-right: 20rpx;"></image>
						<text style="font-size: 28rpx;margin: 28rpx;color: #000000;">{{citem.nickname==null?'未知':citem.nickname}}</text>
						<text style="font-size: 28rpx;">{{citem.remark==null?'未知':citem.remark}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//
				listHeight: {
					height: '600rpx',
					overflow: 'auto',
					overflowX: 'hidden',
				},
				//搜索
				keyword: '',
				keywordSearch: '',
				itemStyle: {
					marginBottom: '20rpx',
					background: '#FFFFFF',
					padding: '28rpx',
					boxshadow: '0px 2px 12px 0px rgba(0, 0, 0, 0.04)',
					borderRadius: '12px',
				},
				followList: [{
					title: '咨询患者',
					sum: '',
					content: []
				}, {
					title: '门诊患者',
					sum: '',
					content: []
				}, {
					title: '关注患者',
					sum: '',
					content: []
				}, {
					title: '服务包患者',
					sum: '',
					content: []
				}]
			}
		},
		methods: {
			//搜索
			change(e) {
				this.keywordSearch = e.trim()
				console.log(this.keywordSearch)
			},
			//详情
			xq(e) {
				let id = e.currentTarget.id
				uni.navigateTo({
					url: '/pages/patient/patientxq?id=' + id
				})
			},
			getLists: async function(e) {
				var that = this
				let res = await this.$request.post("doctor/userList", {})
				console.log('医生列表：', res)
				if (res.status == 0) {
					this.followList[0].content = res.data.user_pic.data
					this.followList[0].sum = res.data.user_pic.count

					this.followList[1].content = res.data.user_relation.data
					this.followList[1].sum = res.data.user_relation.count

					this.followList[2].content = res.data.user_collection.data
					this.followList[2].sum = res.data.user_collection.count

					this.followList[3].content = res.data.user_pack.data
					this.followList[3].sum = res.data.user_pack.count

					this.$nextTick(() => {
						that.$refs.collapse.init()
					})

				}

			},
			// collapse: async function() {
			// 	this.$nextTick(() => {
			// 		this.$refs.collapse.init()
			// 	})

			// }
		},
		onShow() {
			this.getLists();
			console.log(this.followList)
		},
		onLoad() {

		}

	}
</script>

<style>
	.list {
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
		padding: 28rpx;
		box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04);
		border-radius: 12px;
	}

	.he {
		overflow: auto;
		overflow-x: hidden;
	}
</style>