medical/pages/index/index.vue

<template>
	<view>
		<view>
			<view class="topTwo">
				<!-- 头部导航 -->
				<view class="tesx">
					<view :class="tobu == 1 ? 'con' : ''" @click="to(1)" style="margin-right: 20rpx;">需要观察</view>
					<view :class="tobu == 2 ? 'con' : ''" @click="to(2)">处置记录</view>
				</view>

				<!-- 搜索框 -->
				<view class="sou">
					<input class="inp" confirm-type="search" @confirm="search" @input="search" v-model="key"
						placeholder="学生姓名" />
					<u-icon class="inp-img" name="search" color="#8C8C8C" size="49rpx"></u-icon>
				</view>
			</view>
		</view>
		<view style="height: 256rpx;"></view>

		<!-- <view class="noData" v-if="listData.length == 0">
			暂无数据
		</view> -->

		<view v-if="tobu == 1">
			<u-swipe-action>
				<u-swipe-action-item :threshold="60" style="margin-bottom: 32rpx;" v-for="(item, index) in listData" :options="swipe"
					:disabled="swipeShow" @click="cancelT(item)" :key="index">

					<!-- 任务分块部分 -->
					<view class="chunking">
						<view @click="toDetails(item.id)">
							<view style="overflow: hidden;">
								<view class="img-no">
									<image :src="item.headUrl"></image>
								</view>
								<!-- 图片替代 -->

								<!-- 基本信息 -->
								<view class="chunking-text">
									<view class="top">
										<text
											style="font-size: 32rpx; font-weight: 600 ; margin-right: 10rpx;">{{item.studentName}}</text>
										·
										<!-- 这里有个点 -->
										<text style="margin-left: 10rpx;">{{item.sex == 1 ? '男' : '女'}}</text>
									</view>
									<view class="bottom">{{item.age}}岁 <text
											style="margin-left: 10rpx;">{{item.grade}}</text></view>
								</view>

								<!-- 时间 -->
								<view class="chunking-time">{{item.createTime}}</view>
							</view>

							<!-- 简略信息 -->
							<view class="brief">
								<view style="color: #6241D5; font-weight: 600; margin-bottom: 10rpx;">伤情：</view>
								{{item.symptom}}
							</view>

							<!-- 底部 -->
							<view class="block-end">
								<!-- 处理人信息 -->
								<view class="handle">
									处理人： {{item.disposeUserName}}
								</view>

								<!-- 跟踪处置 - 按钮 -->
								<!-- <view class="ann" style="float: right;" @click="track(1)">
								跟踪处置
							</view> -->
							</view>
						</view>
						<!-- 跟踪处置 - 按钮 -->
						<view class="ann" style="float: right;" @click="track(item)">
							跟踪处置
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>

		<view v-else>
			<!-- 任务分块部分 -->
			<view class="chunking" style="margin-bottom: 32rpx;" v-for="(item, id) in listData" :key="id">
				<view @click="toDetails(item.id)">
					<view style="overflow: hidden;">
						<view class="img-no">
							<image :src="item.headUrl"></image>
						</view>
						<!-- 图片替代 -->

						<!-- 基本信息 -->
						<view class="chunking-text">
							<view class="top">
								<text
									style="font-size: 32rpx; font-weight: 600 ; margin-right: 10rpx;">{{item.studentName}}</text>
								·
								<!-- 这里有个点 -->
								<text style="margin-left: 10rpx;">{{item.sex == 1 ? '男' : '女'}}</text>
							</view>
							<view class="bottom">{{item.age}}岁 <text style="margin-left: 10rpx;">{{item.grade}}</text>
							</view>
						</view>

						<!-- 时间 -->
						<view class="chunking-time">{{item.createTime}}</view>
					</view>

					<!-- 简略信息 -->
					<view class="brief">
						<view style="color: #6241D5; font-weight: 600; margin-bottom: 10rpx;">伤情：</view>
						{{item.symptom}}
					</view>

					<!-- 底部 -->
					<view class="block-end">
						<!-- 处理人信息 -->
						<view class="handle">
							处理人： {{item.disposeUserName}}
						</view>

						<!-- 跟踪处置 - 按钮 -->
						<!-- <view class="ann" style="float: right;" @click="track(1)">
							跟踪处置
						</view> -->
					</view>
				</view>
				<!-- 跟踪处置 - 按钮 -->
				<!-- <view class="ann" style="float: right;" @click="track(item)">
					跟踪处置
				</view> -->
			</view>
		</view>

		<!-- 功能不明确，暂时 -->
		<!-- <view @click="signIn">
			登录跳转
		</view> -->

		<!-- 悬浮按钮 -->
		<view class="suspension" @click="toFace">
			<image src="../../static/icon.svg"></image>
		</view>

		<!-- 跟踪处置 -->
		<u-action-sheet :closeOnClickOverlay="true" @close="cancel" @select="selectClick" :show="show">
			<template>
				<view style="padding: 32rpx; text-align: left;">
					<RedDot text="处理措施" :required="true"></RedDot>
					<u--textarea border="none" v-model="disposeText" style="margin: 32rpx 0 72rpx 0; padding: 0;"
						placeholder="请输入" autoHeight />
				</view>
				<view class="handle-time">
					处理时间：{{time}}
				</view>
				<view class="behavior" @click="addBehavior" style="color: #7B5DF0; border: 1rpx solid #F5F6F7;">确认
				</view>
				<view class="behavior" @click="cancel">取消</view>
			</template>
		</u-action-sheet>

		<u-loadmore :status="status" :loading-text="loadingText" :nomore-text="nomoreText" />
	</view>
</template>

<script>
	import RedDot from '../../conponents/red-dot.vue'
	export default {
		components: {
			RedDot,
		},

		data() {
			return {
				providerList: [],
				version: '',
				tobu: '1',
				swipe: [{
					text: '取消跟踪',
					style: {
						backgroundColor: '#FA541C',
					}
				}],
				swipeShow: false,
				listData: [], // 列表数据
				page: 1, // 分页
				tobel: '', // 总数
				key: '', // 学生姓名关键字

				id: '',
				show: false,
				disposeText: '',

				Record: '', // 添加应急处理数据
				time: '', // 跟踪处理时间

				status: 'loading',
				loadingText: '努力加载中',
				nomoreText: '实在没有了',
				
				setTime: null,
				img: '',

			}
		},
		onShow() {
			this.tobu = '1'
			this.listData = []
			this.getList()
		},
		watch:{
			listData(newName, oldName){
				let time = 1000
				
			},
		},
		methods: {

			// 跳转登录页面
			signIn() {
				uni.navigateTo({
					url: `/pages/signIn/signIn`
				})
			},

			// 列表数据请求
			getList() {
				let data = {
					pageNum: this.page,
					pageSize: 5,
					type: this.tobu,
				}
				if(this.key){
					data.search =  this.key
				}
				this.$request({
					url: this.$api.index.emergencyList,
					data: data
				}).then( res => {
					if (res.code == 200) {
						
						for (let item of res.data.list) {
							item.createTime = item.createTime.replace('T', ' ')
							item.createTime = item.createTime.slice(0, item.createTime.length - 3)
						}
						this.listData.push(...res.data.list)
						this.total = res.data.total
						if (res.data.total > 5) {
							this.status = 'loadmore'
						} else {
							this.status = 'nomore'
						}
						this.getChildHead()
					} else {
						this.$u.toast(err.message)
						this.status = 'nomore'
						this.listData = []
					}
				}).catch(err => {
					this.$u.toast(err.message)
					this.status = 'nomore'
					this.listData = []
				})
			},
			getChildHead(){
				for(let index = 0 ;index< this.listData.length ;index++){
					let item = this.listData[index]
					if(item.headUrl) continue;
					let existIndex = this.listData.findIndex(s=>s.studentId == item.studentId && s.headUrl)
					if(existIndex > -1) {
						item.headUrl = this.listData[existIndex].headUrl
						continue;
					}
					 this.$request({
						url: this.$api.index.getPortrait,
						data: {
							id: item.studentId,
							studentId: item.studentId,
						}
					}).then((headRes)=>{
						this.listData[index].headUrl = headRes.data
						this.$set(this.listData,index,this.listData[index])
					})
				}
			},
			// 请求头像
			getPortrait(id){
				this.$request({
					url: this.$api.index.getPortrait,
					data: {
						id: id,
						studentId: id,
					}
				}).then(res => {
					// var arr = res.data
					// this.img = res.data
					this.getImg(res.data)
					console.log(this.getImg(res.data), 'img')
				})
			},

			// 搜索
			search() {
				// 防抖
				if (this.setTime !== null) {
					clearTimeout(this.setTime);
				}
				this.setTime = setTimeout(() => {
					this.listData = []
					this.getList()
				}, 500)
			},

			// 点击改变是否观察或者处理记录
			to(data) {
				if(this.status = 'loading'){
					return
				}
				this.key = ''
				this.page = 1
				this.tobu = data
				this.listData = []
				this.status = 'loading'
				this.getList()
			},

			cancelT(data) {
				console.log(data)
				// return
				this.$request({
					url: this.$api.index.cancelWatch,
					header: {
						contentType: "application/json"
					},
					method: 'POST',
					data: {
						id: data.id
					}
				}).then(res => {
					this.$u.toast(res.msg)
					if (res.code == 200) {
						this.listData = []
						this.status = 'loading'
						this.getList()
					}
				})
			},

			// 跟踪处置
			track(data) {
				console.log(data)
				this.time = this.dateFormat("YYYY.mm.dd HH:MM", new Date())
				this.Record = data
				this.show = true
			},

			//跳转详情
			toDetails(id) {
				console.log(id)
				uni.navigateTo({
					url: `/pages/details/index?id=${id}`
				})
			},

			toFace() {
				uni.navigateTo({
					url: '/pages/face/index'
				})
			},

			addBehavior() {
				if (this.disposeText == '') {
					this.$u.toast('处理措施未填写')
					return
				}
				this.$request({
					url: this.$api.index.addDisposeRecord,
					header: {
						contentType: "application/json"
					},
					method: 'POST',
					data: {
						id: this.Record.id,
						disposeText: this.disposeText,
					}
				}).then(res => {
					this.$u.toast(res.msg)
					this.cancel()
				}).catch(err => {
					this.$u.toast(err.msg)
					this.cancel()
				})
			},

			cancel() {
				this.show = false
				this.disposeText = ''
			},

			// 获取时间
			dateFormat(fmt, date) {
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString() // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
					};
				};
				return fmt;
			},

			onReachBottom() {
				// console.log(this.page, this.total)
				if (this.total - this.page * 5 <= 0) {
					this.status = 'nomore'
					// console.log('ww')
				} else {
					// console.log('w')
					this.status = 'loading';
					this.page++
					this.getList()
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding: 0 32rpx;
		/* background-color: #D9D9D9; */
		background-color: #F5F5F5 !important;
	}

	.topTwo {
		position: fixed;
		top: -2rpx;
		background-color: #f5f5f5;
		padding-bottom: 10rpx;
		z-index: 999;
		width: 100%;
		box-sizing: border-box;
		padding-right: 65rpx;
	}

	.tesx {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		color: rgba(0, 0, 0, 0.60);
		height: 128rpx;
		margin-bottom: 16rpx;
	}

	.con {
		font-size: 40rpx;
		font-weight: 600;
		color: #000;
	}

	.sou {
		margin-bottom: 30rpx;
		position: relative;
		overflow: hidden;
	}

	.inp {
		height: 72rpx;
		border: 2rpx solid #D9D9D9;
		border-radius: 50px;
		box-sizing: border-box;
		padding-left: 60rpx;
	}

	.inp-img {
		position: absolute;
		top: 10rpx;
		left: 10rpx;
	}

	.chunking {
		height: 400rpx;
		border-radius: 32rpx;
		background-color: #fff;
		box-sizing: border-box;
		padding: 32rpx;
		position: relative;
	}

	.img-no {
		width: 83rpx;
		height: 83rpx;
		background-color: #D9D9D9;
		border-radius: 50rpx;
		margin-right: 15rpx;
		float: left;
		overflow: hidden;
		
		image{
			width: 100%;
			height: 100%;
		}
	}

	.chunking-text {
		float: left;
		font-size: 25rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.chunking-text .top {
		margin: 5rpx 0;
	}

	.chunking-text .buttom {}

	.chunking-time {
		float: right;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.60);
		height: 83rpx;
		line-height: 83rpx;
	}

	.brief {
		width: 622rpx;
		height: 136rpx;
		background: #fafafa;
		border-radius: 16rpx;
		margin-top: 33rpx;
		box-sizing: border-box;
		padding: 16rpx 23rpx;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.60);
		font-weight: 500;
		
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
	}

	.block-end {
		height: 56rpx;
		font-size: 28rpx;
		color: #000;
		font-weight: 500;
		margin-top: 32rpx;
	}

	.handle {
		float: left;
		line-height: 58rpx;
	}

	.ann {
		float: right;
		border: 1px solid #fa8c16;
		box-sizing: border-box;
		padding: 9rpx 25rpx;
		color: #FA8C16;
		border-radius: 40rpx;
		position: relative;
		bottom: 56rpx;
		z-index: 9;
		font-size: 28rpx;
	}

	.suspension {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50px;
		background-color: #7b5df0;
		position: fixed;
		right: 32rpx;
		bottom: 168rpx;
		z-index: 999;
	}

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

	/* 滑块单元格样式 */
	.u-swipe-action-item {
		border-radius: 32rpx;
	}

	.swipe-action {
		&__content {
			padding: 25rpx 0;

			&__text {
				font-size: 28rpx;
				color: #fff;
				padding-left: 30rpx;
			}
		}
	}

	.handle-time {
		height: 80rpx;
		line-height: 80rpx;
		background: #f5f6f7;
		margin-top: 18rpx;
		box-sizing: border-box;
		padding-left: 32rpx;
		color: rgba(0, 0, 0, 0.60);
		font-size: 23rpx;
		text-align: left;
	}

	.behavior {
		height: 112rpx;
		line-height: 112rpx;
		font-size: 33rpx;
		color: #000;
	}

	// 暂无数据
	.noData {
		text-align: center;
	}
</style>