Case_Collection_System/code/h5/pages/phone/index.vue

<template>
	<view class="mine-container">
		<!-- 面包屑 -->
		<custom-breadcrumb separator=">">
			<custom-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to" :switch="true">
				{{route.name}}
			</custom-breadcrumb-item>
		</custom-breadcrumb>
		<!-- 面包屑 -->

		<view class="content u-page">
			<view class="caseList">
				<view class="caseList_top">
					<view class="caseList_top_title">{{selectUser.length == 0 ? '所有课件' : '筛选课件'}}</view>
					<!-- 筛选 志愿者、医生 -->
					<!-- 无选择 -->
					<view class="caseList_top_search" v-if="selectUser.length == 0">
						<view class="caseList_top_search_con" @click="openSelectPopup">
							<view class="caseList_top_search_con_text">筛选</view>
							<image mode="heightFix" src="@/static/images/down.png"></image>
						</view>
					</view>
					<!-- 无选择 -->
					<!-- 有选择 -->
					<view class="caseList_top_selected bg-custom" v-else>
						<view class="caseList_top_selected_item" v-for="(item,index) in selectUser" :key="index">
							<view class="caseList_top_selected_item_name">{{item[isDoctor ? 'volunteerUserName' : 'doctorUserName']}}</view>
							<uni-icons type="closeempty" color="#fff" @click="delPerson(index)"></uni-icons>
						</view>
					</view>
					<!-- 有选择 -->
					<!-- 筛选志愿者、医生 -->
				</view>

				<!-- 数据信息 -->
				<view class="caseList_middle">
					<view class="caseList_middle_item">
						<view class="caseList_middle_item_text">{{info.total}}</view>
						<view class="caseList_middle_item_title">已上传课件</view>
					</view>
					<view class="caseList_middle_item">
						<view class="caseList_middle_item_text">{{info.passTotal}}</view>
						<view class="caseList_middle_item_title">符合标准课件</view>
					</view>
					<view class="caseList_middle_item">
						<view class="caseList_middle_item_text">{{info.noPassTotal}}</view>
						<view class="caseList_middle_item_title">不符合标准课件</view>
					</view>
				</view>
				<!-- 数据信息 -->

				<view class="caseList_bottom">
					<view class="bottom_item" v-for="(item,index) in info.caseList" :key="item.id" @click="toDetail(index)">
						<view class="bottom_item_top">
							<!-- 内容头部信息 -->
							<view class="bottom_item_top_con">
								<view class="bottom_item_top_con_name">{{item.caseName}}</view>
								<view class="bottom_item_top_con_status">
									<image mode="heightFix" v-if="item.caseAnalysisStatus !== null" :src="getCaseAnalysisData(item.caseAnalysisStatus).img"></image>
									<image mode="heightFix" v-else-if="item.beautifyStatus == '1'" src="@/static/images/status/check-circle.png"></image>
									<image mode="heightFix" v-else-if="item.checkStatus == '2'" src="@/static/images/status/exclamation-circle.png"></image>
									<image mode="heightFix" v-else-if="item.checkStatus == '0'" src="@/static/images/status/clock-circle.png"></image>
									<image mode="heightFix" v-else-if="item.checkStatus == '1'" src="@/static/images/status/pass.png"></image>
                  <view v-if="item.caseAnalysisStatus !== null" class="bottom_item_top_con_status_text" :class="getCaseAnalysisData(item.caseAnalysisStatus).type">{{getCaseAnalysisData(item.caseAnalysisStatus).text}}</view>
									<view v-else class="bottom_item_top_con_status_text" :class="[item.beautifyStatus == '1' ? 'blue' : item.checkStatus ? getDictValue(statusArr,item.checkStatus).type : '']">
										{{ item.beautifyStatus == '1' ? '已美化' : item.checkStatus ? getDictValue(statusArr,item.checkStatus).text : ''}}
									</view>
								</view>
							</view>
							<!-- 内容头部信息 -->

							<!-- 医生 -->
							<view class="bottom_item_top_con2" v-if="isDoctor">
								<view class="bottom_item_top_con2_item" v-if="item.sex">
									性别：
									<view class="bottom_item_top_con2_item_text">
										{{item.sex}}
									</view>
								</view>
								<view class="bottom_item_top_con2_item" v-if="item.age">
									年龄：
									<view class="bottom_item_top_con2_item_text">
										{{item.age}}
									</view>
								</view>
								<view class="bottom_item_top_con2_item" v-if="item.result">
									诊断：
									<view class="bottom_item_top_con2_item_text">
										{{item.result}}
									</view>
								</view>
								<view class="bottom_item_top_con2_tags" v-if="item.tags&&item.tags.length > 0">
									<view class="bottom_item_top_con2_tags_item" v-for="(item2,index2) in item.tags.slice(0,3)" :key="index2">{{item2}}</view>
								</view>
							</view>
							<!-- 医生 -->

							<!-- 志愿者 -->
							<view class="bottom_item_top_con2" v-if="!isDoctor">
								<view class="bottom_item_top_con2_item">所属医生：
									<view class="bottom_item_top_con2_item_text">
										{{item.userName}}
									</view>
								</view>
							</view>
							<view class="bottom_item_top_con2">
								<view class="bottom_item_top_con2_item">所属项目：
									<view class="bottom_item_top_con2_item_text">
										{{item.projectName}}
									</view>
								</view>
							</view>
							
							<!-- 志愿者 -->
						</view>
						<view class="bottom_item_file" v-if="item.caseFileList&&item.caseFileList.length > 0">
							<!-- 医生 -->
							<template v-if="isDoctor">
								<view class="bottom_item_file_item" v-for="(item2,index2) in item.caseFileList.slice(0,1)" :key="index2">
									<view class="bottom_item_file_item_left">
										<image mode="scaleToFill" v-if="item2.type == 'ppt'" src="@/static/images/file/pptIcon.png"></image>
										<image mode="scaleToFill" v-if="item2.type == 'png'" src="@/static/images/file/imgIcon.png"></image>
										<image mode="scaleToFill" v-if="item2.type == 'doc'" src="@/static/images/file/docIcon.png"></image>
										<image mode="scaleToFill" v-if="item2.type == 'mp3'" src="@/static/images/file/mp3Icon.png"></image>
										<image mode="scaleToFill" v-if="item2.type == 'pdf'" src="@/static/images/file/pdfIcon.png"></image>
										<image mode="scaleToFill" v-if="item2.type == 'txt'" src="@/static/images/file/txtIcon.png"></image>
										<image mode="scaleToFill" v-if="item2.type == 'video'" src="@/static/images/file/videoIcon.png"></image>
										<view class="bottom_item_file_item_left_name">{{item2.name}}</view>
									</view>
									<view class="bottom_item_file_item_right">
										<image mode="heightFix" src="@/static/images/right.png"></image>
									</view>
								</view>
							</template>
							<!-- 医生 -->

							<!-- 志愿者 -->
							<template v-else>
								<view class="bottom_item_file_item" v-for="(item2,index2) in item.caseFileList.slice(0,2)" :key="index2">
									<view class="bottom_item_file_item_left">
										<image mode="scaleToFill" v-if="item2.type == 'ppt'" src="@/static/images/file/pptIcon.png"></image>
										<image mode="scaleToFill" v-if="item2.type == 'png'" src="@/static/images/file/imgIcon.png"></image>
										<image mode="scaleToFill" v-if="item2.type == 'doc'" src="@/static/images/file/docIcon.png"></image>
										<image mode="scaleToFill" v-if="item2.type == 'mp3'" src="@/static/images/file/mp3Icon.png"></image>
										<image mode="scaleToFill" v-if="item2.type == 'pdf'" src="@/static/images/file/pdfIcon.png"></image>
										<image mode="scaleToFill" v-if="item2.type == 'txt'" src="@/static/images/file/txtIcon.png"></image>
										<image mode="scaleToFill" v-if="item2.type == 'video'" src="@/static/images/file/videoIcon.png"></image>
										<view class="bottom_item_file_item_left_name">{{item2.name}}</view>
									</view>
									<view class="bottom_item_file_item_right">
										<image mode="heightFix" src="@/static/images/right.png"></image>
									</view>
								</view>
							</template>
							<!-- 志愿者 -->
						</view>
					</view>
				</view>

			</view>

			<!-- 新增课件 -->
			<uni-popup ref="popupCase" :mask-click="false" type="bottom" background-color="#fff">
				<add-case :person="selectPersonList" @close="closePopupCase" @showLoad="showPopupCase = true" @closeLoad="showPopupCase = false"></add-case>
			</uni-popup>
			<!-- 新增课件 -->

			<!-- 筛选志愿者、医生弹窗 -->
			<uni-popup ref="popupSelectPerson" :mask-click="true" type="top" background-color="#fff">
				<select-doctor :person="selectPersonList" @selectPerson="selectPerson" :isDoctor='isDoctor'></select-doctor>
			</uni-popup>
			<!-- 筛选志愿者、医生弹窗 -->

		</view>
		<u-loading-page :loading="showPopupCase" loading-mode="spinner" style="z-index: 999999;" :bg-color="'rgba(0, 0, 0, 0.3)'" :loading-color="'#fff'" :color="'#fff'"></u-loading-page>
	</view>
</template>

<script>
	import storage from '@/utils/storage'
	import addCase from '@/components/phone/case/addCase.vue'
	import selectDoctor from '@/components/selectDoctor/selectDoctor.vue'
	import { getUserCaseList, volunteerSelectList, doctorSelectList } from "@/api/case/case"
	import { getTypeName } from '@/utils/common'
	var elementIcon = document.getElementsByClassName('uni-tabbar__icon')
	var elementMid = document.getElementsByClassName('uni-tabbar__mid')
	export default {
		components: {addCase,selectDoctor},
		data() {
			return {
				showPopupCase: false,
				routes: [{
					to: "/pages/phone/index",
					name: "课件管理",
				}, ],
				messageList: ["", ""],
				selectPersonList: [], // 人员列表
				searchValue: undefined,
				// showShadow: false,
				statusArr: [{key: '2',text: '未通过',type: 'fail'},{key: '0',text: '审核中',type: 'in'},{key: '1',text: '审核通过',type: 'pass'}], // 状态类型
				selectUser: [], // 选择的人员
				info: {
					total: 0,
					passTotal: 0,
					noPassTotal:0,
					caseList: [],
				}, // 课件列表+头部课件数据信息
				isDoctor:true,	//是否医生
			}
		},
		onLoad() {
			this.isDoctor = this.$store.state.user.loginIdentity == 0
			// tabbar中间按钮点击事件
			uni.onTabBarMidButtonTap(e =>{
				uni.switchTab({
					url:'/pages/phone/index',
				})
				this.$nextTick(() =>{
					this.$refs.popupCase.open()
				})

			})

			//点击全部跳转课件列表
			uni.$on('clickAll', data => {
				this.selectUser = []
				this.selectUser.push(data)
				uni.switchTab({
					url:'/pages/phone/index'
				})
			})

			//点击跳转课件详情
			uni.$on('clickItem', data => {
				uni.navigateTo({
					url: '/pages/phone/detail/index?id='+data.id+'&name='+data.caseName
				})
			})
		},
		onShow() {
			elementIcon[0].className = 'uni-tabbar__icon icons-tabbar-custom'
			elementIcon[2].className = 'uni-tabbar__icon'
			
			elementMid[0].className = 'uni-tabbar__mid icons-tabbar-custom icons-tabbar-mid'

			this.getList()
			this.getSelectPerson()
		},
		onUnload() {
			uni.$off('clickAll')
			uni.$off('clickItem')
		},
		methods: {
      // 列表解读状态数据
      getCaseAnalysisData(status){
        let stateObj = {
          img:"/static/images/status/clock-circle.png",
          text:"审核中",
          type:"in"
        }
        if(status == 1){
          stateObj = {
            img:"/static/images/status/exclamation-circle.png",
            text:"无法解读",
            type:"fail"
          }
        }else if(status == 2){
          stateObj = {
            img:"/static/images/status/pass.png",
            text:"审核通过",
            type:"pass"
          }
        }else if(status == 3){
          stateObj = {
            img:"/static/images/status/pass.png",
            text:"解读完成",
            type:"pass"
          }
        }
        return stateObj
      },
			// 获取用户课件信息
			getList(){
				let that = this
				let userId = that.$store.state.user.userId
				let param = {
					doctorUserId:'',
					volunteerUserId:''
				}

				if(that.isDoctor){
					param.doctorUserId = userId
					param.volunteerUserId = this.selectUser && this.selectUser.length > 0 ?  this.selectUser[0].volunteerUserId : ''
				}else{
					param.volunteerUserId = userId
					param.doctorUserId = this.selectUser && this.selectUser.length > 0 ?  this.selectUser[0].doctorUserId : ''
				}
				getUserCaseList(param).then(res => {
					let data = res.data
					data.caseList.forEach(item => {
						item.caseFileList.forEach(item2 => {
							item2.type = getTypeName(item2.name)
						})
					})
					this.info = data
				})
			},
			//获取已绑定的志愿者、医生列表数据
			getSelectPerson(){
				if(this.isDoctor){
					volunteerSelectList().then(res => {
						if(res.code == 200){
							this.selectPersonList = res.data
						}
					})
				}else{
					doctorSelectList().then(res => {
						if(res.code == 200){
							this.selectPersonList = res.data
						}
					})
				}
			},
			// 前往详情
			toDetail(idx){
				let info = this.info.caseList[idx]
				uni.navigateTo({
					url: '/pages/phone/detail/index?id='+info.id+'&name='+info.caseName
				})
			},
			// 删除选择的人员
			delPerson(idx){
				this.selectUser.splice(idx,1)
				this.getList()
			},
			getDictValue(data,value){
				let str = data.filter(item => item.key == value)[0]
				return str
			},
			// 志愿者筛选医生
			selectPerson(info){
				this.selectUser = []
				this.selectUser.push(info)
				this.$refs.popupSelectPerson.close()
				this.getList()
			},
			// 关闭新增弹窗
			closePopupCase(){
				this.$refs.popupCase.close()
				this.getList()
			},
			// 打开筛选志愿者、医生的弹窗
			openSelectPopup(){
				this.$refs.popupSelectPerson.open()
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F7F8FA;
	}

	.mine-container {
		width: 100%;
		height: 100%;

		.content {
			width: 100%;
			height: calc(100% - 88rpx);
			box-sizing: border-box;
			padding: 40rpx 32rpx 0px;
			overflow: hidden;
			.caseList{
				width: 100%;
				height: 100%;
				overflow: auto;
				&_top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					&_title{
						color: #1D2129;
						font-size: 40rpx;
						font-weight: 500;
						line-height: 56rpx;
					}
					&_search{
						position: relative;
						&_con{
							background-color: #fff;
							height: 50rpx;
							// width: 30.21rpx;
							line-height: 50rpx;
							padding: 0 16rpx;
							display: flex;
							align-items: center;
							border-radius: 4rpx;
							overflow: hidden;
							cursor: pointer;
							&_text{
								color: #1D2129;
								font-size: 26rpx;
								font-weight: 400;
								line-height: 50rpx;
								margin-right: 4rpx;
							}
							uni-image{
								width: 28rpx;
								height: 28rpx;
							}
						}
						.downCon{

						}
					}
					&_selected{
						&_item{
							display: flex;
							align-content: center;
							border-radius: 4rpx;
							padding: 0 16rpx;
							height: 50rpx;
							line-height: 50rpx;
							cursor: pointer;
							&_name{
								height: 50rpx;
								line-height: 50rpx;
								color: #FFF;
								font-size: 26rpx;
								font-weight: 400;
								margin-right: 4rpx;
							}
							uni-image{
								width: 28rpx;
								height: 28rpx;
								cursor: pointer;
							}
						}
					}
				}

				&_middle{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 32rpx;
					margin-bottom: 32rpx;
					&_item{
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: center;
						width: 33.33%;
						&_title{
							color: #86909C;
							font-size: 24rpx;
							font-weight: 400;
							line-height: 40rpx;
						}
						&_text{
							color: #1D2129;
							font-size: 32rpx;
							font-weight: 500;
							line-height: 48rpx;
						}
					}
				}

				&_bottom{
					display: flex;
					// align-items: center;
					flex-wrap: wrap;
					overflow: auto;
					// height: calc(100% - 39.84rpx);
					width: 100%;
					.bottom_item{
						padding: 24rpx;
						width: 100%;
						margin-bottom: 24rpx;
						background-color: #fff;
						border-radius: 16rpx;
						overflow: hidden;
						// height: 272rpx;
						cursor: pointer;
						&_top{
							&_con{
								width: 100%;
								display: flex;
								align-items: center;
								justify-content: space-between;

								&_name{
									color: #1D2129;
									font-size: 32rpx;
									font-weight: 500;
									line-height: 48rpx;
									width: calc(100% - 160rpx);
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}
								&_status{
									display: flex;
									align-items: center;
									justify-content: flex-end;
									uni-image{
										width: 32rpx;
										height: 32rpx;
									}
									&_text{
										font-size: 24rpx;
										font-weight: 400;
										line-height: 40rpx;
										color: #86909C;
										margin-left: 4rpx;
									}
								}
							}
							&_con2{
								width: 100%;
								display: flex;
								flex-direction: column;
								&_item{
									width: 100%;
									color: #86909C;
									font-size: 28rpx;
									font-weight: 400;
									line-height: 44rpx;
									display: flex;
									align-items: center;
									margin-top: 4rpx;
									&_text{
										margin-left: 8rpx;
									}
								}
								&_tags{
									width: 100%;
									display: flex;
									align-items: center;
									height: 44rpx;
									overflow: hidden;
									flex-wrap: wrap;
									&_item{
										width: auto;
										margin-right: 8rpx;
										padding: 0 16rpx;
										border-radius: 40rpx;
										background: rgba(22, 93, 255, 0.08);

										color: rgba(22, 93, 255, 0.80);
										text-align: center;
										font-size: 26rpx;
										font-weight: 400;
										line-height: 44rpx; /* 169.231% */
									}
								}
							}
						}
						&_file{
							margin-top: 24rpx;
							padding: 20rpx;
							border-radius: 12rpx;
							overflow: hidden;
							background: #F7F8FA;
							&_item{
								width: 100%;
								cursor: pointer;
								display: flex;
								align-items: center;
								justify-content: space-between;
								&_left{
									display: flex;
									align-items: center;
									width: calc(100% - 30rpx);
									&_name{
										color: #4E5969;
										font-size: 26rpx;
										font-weight: 400;
										line-height: 44rpx;
										white-space: nowrap;
										width: 100%;
										overflow: hidden;
										text-overflow: ellipsis;
										margin-left: 8rpx;
									}
									uni-image{
										width: 48rpx;
										height: 48rpx;
									}
								}
								&_right{
									width: 28rpx;
									height: 28rpx;
									display: flex;
									align-items: center;
									justify-content: center;
									cursor: pointer;
									uni-image{
										width: 28rpx;
										height: 28rpx;
									}
								}
							}
							&_item:nth-child(2){
								margin-top: 16rpx;
							}
						}
					}
				}


			}

		}
		.mask{
			position: fixed;
			width: 100%;
			left: 0;
			top: 0;
			height: 100%;
			z-index: 999;
			// background-color: rgba(0, 0, 0, 0.4);
			background: rgba(2, 7, 20, 0.60);
			transition: opacity 300ms ease 0ms, -webkit-transform 300ms ease 0ms, transform 300ms ease 0ms;
			transform-origin: 50% 50%;
		}
		.popBox{
			position: fixed;
			bottom: 0;
			left: 0;
			height: 860rpx;
			width: 100%;
			z-index: 1000;
		}

		.blue{
			color: #165DFF!important;
		}
		.in{
			color: #FF7D00!important;
		}
		.fail{
			color: #F53F3F!important;
		}
		.pass{
			color: #00B42A!important;
		}
		/deep/ .uni-popup{
			z-index: 1000;
		}
	}
</style>