follow_applet/pages/home/index.vue

<template>
	<view class="main">
		<view class="one">
			<swiper class="swiper" circular :indicator-dots="true" indicator-color="#FFFFFF"
				indicator-active-color="#007AFF" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item class="list" v-for="(item,index) in advertList" :key="index">
					<image class="image" :src="item.image&&item.image.length>0?item.image[0].url:''" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="two" v-if="user.role!='Patient'">
			<uni-collapse accordion>
				<uni-collapse-item title="群组" :thumb="config.group_url[0].url">
					<view class="content" v-if="groupList.length>0">
						<view class="two_1">
							<input type="text" v-model="searchgroup.name" @input="toInputGroup" placeholder="搜索">
						</view>
						<view class="list" v-for="(item, index) in groupList" :key="index">
							<uni-list-chat :title="item.name||''"
								:avatar="item.doctor.icon[0].url||config.logo_url[0].url" :time="item.doctor.name||''"
								link="navigateTo" @click="toInfo(item,'group')">
							</uni-list-chat>
						</view>
					</view>
				</uni-collapse-item>
				<uni-collapse-item title="好友" :thumb="config.friend_url[0].url" :open="true">
					<view class="content" v-if="friendList.length>0">
						<view class="two_1">
							<input type="text" v-model="searchfriend.name" @input="toInputFriend" placeholder="搜索">
						</view>
						<view class="list" v-for="(item, index) in friendList" :key="index"
							@tap="toInfo(item,'friend')">
							<uni-list-chat v-if="item.notRead==0" :title="item.patientName||''"
								:avatar="item.patientIcon||config.user_url[0].url" :note="item.content||''"
								:time="item.time||''" link="navigateTo" @click="toInfo(item,'friend')">
							</uni-list-chat>
							<uni-list-chat v-else :title="item.patientName||''"
								:avatar="item.patientIcon||config.user_url[0].url" :note="item.content||''"
								:time="item.time||''" badge-positon="left" :badge-text="item.notRead||''"
								link="navigateTo" @click="toInfo(item,'friend')">
							</uni-list-chat>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
		<view class="two" v-else>
			<view class="content" v-if="groupList.length>0">
				<view class="two_1">
					<input type="text" v-model="searchgroup.name" @input="toInputGroup" placeholder="搜索">
				</view>
				<view class="list" v-for="(item, index) in groupList" :key="index">
					<uni-list-chat :title="item.name" :avatar="item.doctor.icon[0].url||config.logo_url[0].url"
						:time="item.doctor.name" link="navigateTo" @click="toInfo(item,'group')">
					</uni-list-chat>
					<!-- <uni-list-chat v-if="item.notRead==0" :title="item.name"
						:avatar="item.doctor.icon[0].url||config.logo_url[0].url" :time="item.doctor.name"
						link="navigateTo" @click="toInfo(item,'group')">
					</uni-list-chat>
					<uni-list-chat v-else :title="item.name" :avatar="item.doctor.icon[0].url||config.logo_url[0].url"
						:time="item.doctor.name" link="navigateTo" badge-positon="left" :badge-text="item.notRead"
						@click="toInfo(item,'group')">
					</uni-list-chat> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				config: {},
				searchgroup: {},
				searchfriend: {},
				// 广告
				advertList: [],
				// 群组
				groupList: [],
				// 好友
				friendList: [{
					id: '1'
				}]
			}
		},
		onShow: async function() {
			const that = this;
			await that.searchToken();
			await that.searchConfig();
			await that.search();
		},
		onPullDownRefresh: async function() {
			const that = this;
			await that.search();
			uni.stopPullDownRefresh();
		},
		methods: {
			// 用户信息
			searchToken() {
				const that = this;
				try {
					const res = uni.getStorageSync('token');
					if (res) {
						const user = that.$jwt(res);
						that.$set(that, `user`, user);
					}
				} catch (e) {}
			},
			searchConfig() {
				const that = this;
				try {
					const res = uni.getStorageSync('config');
					if (res) that.$set(that, `config`, res);
				} catch (e) {}
			},
			// 查询
			async search() {
				const that = this;
				let res;
				// 广告
				res = await that.$api(`/adv`, 'GET', {
					is_use: '0'
				})
				if (res.errcode == '0') {
					that.$set(that, `advertList`, res.data)
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none'
					});
				}
				let info = {}
				if (that.user.role == 'Doctor') info.doctor = that.user._id
				else if (that.user.role == 'Nurse') info.doctor = that.user.doctor
				else info.patients = that.user._id
				// 群组
				res = await that.$api(`/group`, 'GET', {
					...info,
					...that.searchgroup
				})
				if (res.errcode == '0') {
					that.$set(that, `groupList`, res.data)
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none'
					});
				}
				// 好友
				res = await that.$api(`/chat/lcl`, 'GET', {
					...info,
					...that.searchfriend
				})
				if (res.errcode == '0') {
					// 处理显示数据
					for (let val of res.data) {
						if (val.type == 'image') val.content = '[图片]'
						if (val.type == 'record') val.content = '[语音]'
						if (val.patientIcon.length > 0) val.patientIcon = val.patientIcon[0].url
						val.time = that.formatDate(val.time)
					}
					that.$set(that, `friendList`, res.data)
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none'
					});
				}
			},
			// 群组输入框
			toInputGroup(e) {
				const that = this;
				if (that.searchgroup.name) that.$set(that.searchgroup, `name`, e.detail.value)
				else that.$set(that, `searchgroup`, {})
				that.search();
			},
			// 好友输入框
			toInputFriend(e) {
				const that = this;
				if (that.searchfriend.name) that.$set(that.searchfriend, `name`, e.detail.value)
				else that.$set(that, `searchfriend`, {})
				that.search();
			},
			// 处理时间
			formatDate(value) {
				if (typeof(value) == 'undefined') {
					return ''
				} else {
					let date = new Date(value)
					let now = new Date()
					let y = date.getFullYear()
					let MM = date.getMonth() + 1
					MM = MM < 10 ? ('0' + MM) : MM
					let d = date.getDate()
					d = d < 10 ? ('0' + d) : d
					let h = date.getHours()
					h = h < 10 ? ('0' + h) : h
					let m = date.getMinutes()
					m = m < 10 ? ('0' + m) : m
					let s = date.getSeconds()
					s = s < 10 ? ('0' + s) : s
					if (now.getDate() - d == 1 && now - date < 172800000) {
						return '昨天' + h + ':' + m
					} else if (now - date < 86400000) {
						return h + ':' + m
					} else if (now - date >= 86400000 && now - date < 31536000000) {
						return MM + '-' + d + ' ' + h + ':' + m
					} else if (now - date >= 31536000000) {
						return y + '-' + MM + '-' + d + ' ' + h + ':' + m
					}
				}
			},
			// 详情
			toInfo(item, type) {
				if (type == 'group') {
					uni.navigateTo({
						url: `/pagesHome/group/index?id=${item.id||item._id}&title=${item.name}`
					})
				} else {
					uni.navigateTo({
						url: `/pagesHome/friend/index?patientId=${item.patient}&doctorId=${item.doctor}&groupId=${item.group}&title=${item.patientName}`
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		.one {
			padding: 0 0 2vw 0;

			.swiper {
				height: 70vw;

				.list {
					.image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.two {
			.content {
				.two_1 {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 2vw;
					background-color: var(--f3CColor);

					input {
						width: 100%;
						padding: 2vw;
						background-color: var(--mainColor);
						font-size: var(--font14Size);
						border-radius: 5px;
					}
				}
			}
		}
	}
</style>