tiantian-care-wx/pages/find/index.vue

<template>
	<view class="container">
		<view class="popbox">
			<view class="popHeader">
				请确认患者的病床信息
			</view>
			<view class="popcontent">
				<view class="formitem" style="justify-content: space-around;">
					<view class="formitem-sex" style="display: flex;flex-direction: column;text-align: center;"
						@click="toChangeSex" :data-index="index" v-for="(mod,index) in sexArr" :key="index">
						<image :src="mod.img" style="width: 80rpx;height: 80rpx;" v-if="!mod.isChecked"></image>
						<image :src="mod.selectImg" style="width: 80rpx;height: 80rpx;" v-if="mod.isChecked"></image>
						<text>{{mod.text}}</text>
					</view>
				</view>
				<view class="formitem">
					<view class="formitem-left">
						<span style="color: red;padding-right: 10rpx;">*</span>病区/楼层
					</view>
					<view class="formitem-right">
						<picker @change="bindMultiPickerChange" style="width: 100%;" mode=multiSelector range-key="name"
							:range="multiArray" @columnchange="bindMultiPickerColumnChange">
							<view class="uni-input">{{selectArea?selectArea:"请选择病区/楼层 >"}}</view>
						</picker>
					</view>
				</view>
				<view class="formitem">
					<view class="formitem-left">
						<span style="color: red;padding-right: 10rpx;">*</span>病床
					</view>
					<view class="formitem-right">
						<picker @change="bindPickerChange" style="width: 100%;" :value="index" :range="array">
							<view class="uni-input">{{selectbed?selectbed:"请选择病床 >"}}</view>
						</picker>
					</view>
				</view>

				<view class="formitem" v-for="(item,index) in product.factors" :key="index">
					<view class="formitem-left">
						<span style="color: red;padding-right: 10rpx;">*</span>
						{{item.name}}
					</view>
					<view class="formitem-right">
						<block v-for="(m,i) in item.factor_items">
							<view :data-index="i" :data-pindex="index" @click="toSelectFactor" class="mformitem"
								:class="{ active: m.isChecked}">{{m.name}}</view>
						</block>
					</view>
				</view>
			</view>
			<view class="popfooter">
				<view class="btn" @click="toStep">下一步</view>
			</view>
		</view>
		<tabbar :current-page="2"></tabbar>

	</view>
</template>

<script>
	import util from "../../utils/util.js";
	import tabbar from "../../components/tabbar/tabbar.vue"
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				array: [],
				objectArray: [],
				index: 0,
				selectbed: '',
				selectbedID: '',
				sexArr: [{
						sex: 0,
						isChecked: true,
						selectImg: '/static/resource/icon/icon_boy_on.png',
						img: '/static/resource/icon/icon_boy.png',
						text: '男'
					},
					{
						sex: 1,
						isChecked: false,
						selectImg: '/static/resource/icon/icon_girl_on.png',
						img: '/static/resource/icon/icon_girl.png',
						text: '女'
					}
				],
				multiArray: [],
				showMuti: [],
				objectMultiArray: [],
				multiIndex: [0, 0],
				selectProjectID: 1,
				selectArea: '',
				selectAreaID: '',
				buyinfo: null,
				selectProduct: {},
				product: [],
				loading: true
			}
		},
		onLoad: function(e) {},

		onShow: function() {

			var that = this;
			that.selectProjectID = getApp().globalData.selectedProject.id;
			console.log(getApp().globalData.selectedProject)
			if (!util.isNull(that.selectProjectID)) {

				that.loadAreas();
				that.loadProduct();
			} else {
				uni.reLaunch({
					url: "/pages/index/index?from=selectHospital"
				})
			}
			uni.removeStorageSync('buyinfo');
		},

		onReady: function() {},

		onHide: function() {
			this.selectProjectID = "";
			this.selectbed = "";
			this.selectbedID = "";
			this.selectArea = "";
			this.selectAreaID = "";
		},

		onUnload: function() {},
		onPullDownRefresh: function() {},
		onReachBottom: function() {},
		onShareAppMessage: function() {},
		methods: {

			onClickOK: function() {
				uni.navigateTo({
					url: '/packages/packagesPro/pages/proService/index'
				});
			},

			toChangeSex: function(t) {
				var that = this;
				var a;
				var i = t.currentTarget.dataset.index;
				var r = this.sexArr;
				var s = r[i];
				for (var a of r) {
					a.isChecked = false;
				}
				s.isChecked ? (s.isChecked = false) : (s.isChecked = true);
				that.sexArr = r;
			},

			bindMultiPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value);
				var t = e.detail.value;
				var that = this;
				that.multiIndex = e.detail.value;
				that.selectArea = that.showMuti[0][t[0]].name + ' ' + that.showMuti[1][t[1]].name;
				that.selectAreaID = that.showMuti[1][t[1]].id;
				that.selectbedID = '';
				that.selectbed = '';
				that.loadBeds(that.selectAreaID);
			},

			bindMultiPickerColumnChange: function(e) {
				console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
				var that = this;
				var a = {
					multiArray: this.multiArray,
					multiIndex: this.multiIndex
				};
				a.multiIndex[e.detail.column] = e.detail.value;
				console.log(a.multiIndex);
				var i = that.showMuti[e.detail.column][e.detail.value];
				console.log(that.showMuti);
				if (e.detail.column < 1) {
					a.multiArray[e.detail.column + 1] = [];
					a.multiArray[e.detail.column + 1] = that.toArr(i.id, e.detail.column + 1);
				}


				this.selectArea = that.showMuti[0][a.multiIndex[0]].name + ' ' + that.showMuti[1][a
					.multiIndex[1]
				].name;
				this.selectAreaID = that.showMuti[1][a.multiIndex[1]].id;
				this.selectbedID = '';
				this.selectbed = '';
				that.loadBeds(that.showMuti[1][a.multiIndex[1]].id);
			},

			toStep: function(a) {
				if ('' == this.selectArea) {
					util.alert('请选择病区/楼层');
					return false;
				}
				if ('' == this.selectbed) {
					util.alert('请选择病床');
					return false;
				}
				var i = [];
				var r = [];
				var s = this.product.factors;
				if (s.length > 0) {
					try {
						for (var o of s) {
							var l = {};
							l.title = o.name;
							l.items = [];
							try {
								for (var h of o.factor_items) {
									var f = {};
									if (h.isChecked) {
										f.id = h.factor_id;
										f.factor_item_id = h.id;
										l.items.push(f);
										i.push(f);
									}
								}
							} catch (e) {} finally {}
							r.push(l);
						}
					} catch (e) {} finally {}
				}
				for (var m = true, g = 0, p = r; g < p.length; g++) {
					if (0 == (h = p[g]).items.length) {
						util.alert('请选择' + h.title);
						m = false;
						break;
					}
				}
				if (0 == m) {
					return false;
				}
				uni.getUserInfo({
					success: function(e) {
						uni.setStorageSync('wxuserInfo', e.rawData);
					}
				});
				var v = this.sexArr.filter(function(e) {
					return 1 == e.isChecked;
				})[0];
				var y = {
					selectArea: this.selectArea,
					selectbed: this.selectbed,
					selectbedID: this.selectbedID,
					selectAreaID: this.selectAreaID,
					selectSex: v,
					selectFactors: i,
					selectProduct: this.selectProduct,
					selectProjectID: this.selectProjectID,
					selectedProject: getApp().globalData.selectedProject.name
				};
				uni.setStorageSync('buyinfo', y);
				uni.navigateTo({
					url: '/packages/packagesPro/pages/proService/index'
				});
			},

			loadAreas: function() {
				var that = this;
				util.request({
					api: 'customer/get-areas-by-project/' + that.selectProjectID,
					utilSuccess: function(t) {
						console.log(t);
						var a = [
							[],
							[]
						];
						var i = [
							[],
							[]
						];
						t.forEach(function(e, t) {
							a[0].push({
								name: e.name,
								id: e.id
							});
							i[0].push({
								id: e.id,
								name: e.name
							});
							e.areas.forEach(function(e, t) {
								a[1].push({
									id: e.id,
									name: e.name
								});
								i[1].push({
									id: e.id,
									name: e.name,
									pid: e.building_id
								});
							});
						});
						that.multiArray = a;
						that.objectMultiArray = i;
						that.showMuti = JSON.parse(JSON.stringify(i));
					},
					utilFail: function(e) {
						util.alert(e);
					}
				});
			},

			toArr: function(e, t) {
				var a = [];
				var i = [];
				var r = JSON.parse(JSON.stringify(this.objectMultiArray))[t];
				for (var s in r) {
					if (r[s].pid == e) {
						a.push(r[s]);
						i.push(r[s]);
					}
				}
				var n = {
					showMuti: this.showMuti
				};
				n.showMuti[t] = JSON.parse(JSON.stringify(i));
				this.showMuti = JSON.parse(JSON.stringify(n.showMuti));
				return JSON.parse(JSON.stringify(a));
			},

			loadBeds: function(e) {
				var that = this;
				util.request({
					api: 'customer/get-beds-by-area/' + e,
					utilSuccess: function(e) {
						var t = [];
						var i = [];
						e.forEach(function(e, a) {
							t.push(e.name);
							i.push({
								id: e.id,
								name: (null == e.room ? '' : e.room.name + '-') + e.name
							});
						});
						that.objectArray = i;
						that.array = t;
					},
					utilFail: function(e) {
						util.alert(e);
					}
				});
			},

			loadProduct: function() {
				var that = this;
				util.request({
					api: 'customer/get-product-by-project/' + that.selectProjectID,
					utilSuccess: function(r) {

						var u = {};
						u.id = r.id;
						u.name = r.name;
						u.minPrice = r.min_price;
						u.maxPrice = r.max_price;
						that.product = r;
						that.selectProduct = u;
					},
					utilFail: function(e) {
						util.alert(e);
					}
				});
			},

			bindPickerChange: function(e) {
				var t = e.detail.value;
				this.index = e.detail.value,
					this.selectbedID = this.objectArray[t].id,
					this.selectbed = this.objectArray[t].name + '床'
			},

			toSelectFactor: function(t) {
				console.log(t)
				var a;
				var i = t.currentTarget.dataset.pindex;
				var r = t.currentTarget.dataset.index;
				var s = this.product;
				var n = s.factors[i];
				for (var a of n.factor_items) {
					a.isChecked = false;
				}
				n.factor_items[r].isChecked = true;
				this.product = s
				this.$forceUpdate();
			},

		}
	}
</script>

<style>
	view {
		box-sizing: border-box;
	}

	.container {
		background-color: rgb(102, 102, 102);
		height: 100vh;
		overflow: hidden;
	}

	.popbox {
		width: 90%;
		height: 70vh;
		background-color: rgb(255, 255, 255);
		margin: 10vh auto;
		border-radius: 10rpx;
		padding: 131rpx 63rpx;


	}

	.popHeader {
		font-family: PingFangTC, PingFangTC;
		font-weight: 300;
		font-size: 32rpx;
		color: #303233;
	}

	.popcontent {

		height: 80%;
		overflow-y: auto;
	}

	.formitem {
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid rgba(48, 50, 51, 0.1);
		padding: 30rpx 10rpx;
	}

	.formitem-left {
		font-weight: 300;
		font-size: 26rpx;
		color: #303233;
	}

	.formitem-right {
		font-weight: 300;
		font-size: 24rpx;
		color: #303233;
		display: flex;
		flex-direction: row;
		width: 70%;
		flex-wrap: wrap;
		justify-content: flex-end;
		text-align: right;
	}

	.mformitem {
		border: 1rpx solid #303233;
		border-radius: 20rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		padding: 10rpx;
	}

	.active {
		border: 1rpx solid #0ee2ba;
		color: #0ee2ba;
	}

	.popfooter {
		display: flex;
		justify-content: center;
		margin-top: 40rpx;
	}

	.btn {

		background: linear-gradient(90deg, #0ee2ba, #67f7dc);
		border-radius: 36rpx 36rpx 36rpx 36rpx;
		height: 72rpx;
		width: 347rpx;
		font-weight: 300;
		font-size: 26rpx;
		line-height: 72rpx;
		text-align: center;
		position: relative;
		color: #fff;
	}

	.btnbg {
		width: 400rpx;
		height: 76rpx;
		position: absolute;
		bottom: -36rpx;
		left: -27rpx;
	}
</style>