snapshot-wx/pagesCare/Employ/Index.vue

<template>
	<view class="container">
		<view class="headerBox">
			<image class="headerImg" src="/pagesCare/static/img/Employ/areaIcon.png"></image>
			<view class="headerTxt">
				<text>所属区域：</text>
				<text style="color: #000;">{{areaName}}</text>
			</view>
		</view>
		<view class="contentBox">
			<view class="userBox">
				<view class="userItemBox" v-for="(item, index) in areaUserData" :key="index">
					<view class="userItem" @tap="toChoose(item)">
						<image :src="objChoose.id == item.id ? '/pagesCare/static/img/Employ/userBg_sel.png' : '/pagesCare/static/img/Employ/userBg.png'" class="userItemBGImg" mode="widthFix"></image>
						<text class="userItemText" :class="objChoose.id == item.id ? 'userItemTextActive' : ''">{{item.name}}</text>
					</view>
				</view>
				<view class="noneTips" v-show="areaUserData.length == 0">暂无数据</view>
			</view>
		</view>
		<view class="fway-btnBox" v-show="areaUserData.length > 0">
			<button class="fway-btn" @tap="onConfirm">确定</button>
		</view>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				areaID: '',
				areaName: '',
				areaUserData: [],
				objChoose: null,
			}
		},
		onLoad(options) {
			that = this;
			that.areaID = decodeURIComponent(options.areaID);
			that.areaName = decodeURIComponent(options.areaName);
			that.onGetAreaUserData()
		},
		methods: {
			onGetAreaUserData(fun) {
				that.$admin.reqDirect({
					method: 'GET',
					url: '/api/v1/Snapshot/practitioner?AreaId=' + that.areaID
				}).then(res => {
					if (res && res.length > 0) {
						that.areaUserData = res;
					}
					typeof fun === 'function' && fun();
				}, err => {
					that.$util.msg(err);
				})
			},
			toChoose(obj){
				that.objChoose = obj;
			},
			onConfirm(){
				if (that.objChoose){
					that.$admin.reqDirect({
						method: 'GET',
						url: '/api/v1/Snapshot/practitioner/' + that.objChoose.id
					}).then(res => {
						if (res) {
							let str = JSON.stringify(res);
							that.objChoose = null;
							uni.navigateTo({
								url: '/pagesCare/Employ/View?obj=' + encodeURIComponent(str)
							})
						}
						typeof fun === 'function' && fun();
					}, err => {
						that.$util.msg(err);
					})
					
				}else {
					that.$util.msg("请选择您要查看的人员");
				}
			}
		}
	}
</script>

<style>
	.container {
		background-color: #f3f3f3;
	}
	
	.headerBox{
		margin: 30rpx;
		display: flex;
		justify-content: left;
		align-items: center;
	}
	
	.headerImg{
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	
	.headerTxt{
		font-size: 40rpx;
		color: #555;
	}
	
	.contentBox{
		height: calc(100% - 260rpx);
		overflow-y: auto;
	}
	
	.userBox{
		padding: 20rpx 0;
		margin: 0 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		border-top: 2rpx #3e6ffd solid;
	}
	
	.userItemBox{
		display: inline-block;
		vertical-align: middle;
		width: calc(50% - 60rpx);
		margin: 20rpx 30rpx;
	}
	
	.userItem{
		position: relative;
	}
	
	.userItemBGImg{
		width: 100%;
		height: 100%;
	}
	
	.userItemText{
		position: absolute;
		bottom: 35%;
		left: 0rpx;
		width: calc(100% - 40rpx);
		padding: 0 20rpx;
		text-align: center;
		font-size: 40rpx;
		line-height: 42rpx;
		color: #000;
	}
	
	.userItemTextActive{
		color: #fff;
	}
	
	.fway-btnBox{
		padding: 40rpx 0 20rpx;
	}
	
	.fway-btn{
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 30rpx;
		width: calc(100% - 60rpx);
		font-size: 40rpx;
	}
	
	.noneTips{
		text-align: center;
		color: #555;
		font-size: 36rpx;
		padding: 50rpx 0;
	}
</style>