pz/pages/index/yypz.vue

<template>
	<view class="content">
		<view class="top" v-if="!show"><image class="top-bg" src="../../static/img/dbbg.png" mode=""></image></view>
		<scroll-view scroll-y="true" class="scrollList" :style="{ height: height }">
			<view class="main">
				<view class="info-item flex">
					<view class="info-left">陪诊类型</view>
					<view class="info-right">
						<picker @change="bindPickerType" :value="index" :range="pzTypelist" range-key="name">
							<view>{{ pzType.name }}</view>
						</picker>
					</view>
				</view>
				<view class="info-item flex">
					<view class="info-left">基础费用</view>
					<view class="info-right">￥{{ pzType.price }}</view>
				</view>
				<view class="info-item flex" v-if="cardprice > 0">
					<view class="info-left">优惠卡优惠</view>
					<view class="info-right">-￥{{ cardprice }}</view>
				</view>
				<view class="info-item flex">
					<view class="info-left">预约日期</view>
					<view class="info-right">
						<picker mode="date" :start="startDate" :end="endDate" :value="date" @change="bindDateChange" class="box-right">
							<view>{{ date }}</view>
						</picker>
					</view>
				</view>
				<view class="info-item flex">
					<view class="info-left">预约时间</view>
					<view class="info-right">
						<picker mode="time" :value="time" @change="bindTimeChange" class="box-right">
							<view>{{ time }}</view>
						</picker>
					</view>
				</view>
				<view class="info-item flex">
					<view class="info-left">姓名</view>
					<view class="info-right"><input class="list-input" type="text" v-model="name" placeholder="请填写姓名" /></view>
				</view>
				<view class="info-item flex">
					<view class="info-left">年龄</view>
					<view class="info-right"><input class="list-input" type="number" v-model="age" placeholder="请填写年龄" /></view>
				</view>
				<view class="info-item flex">
					<view class="info-left">性别</view>
					<view class="info-right">
						<picker @change="bindPickerSex" :value="index" :range="array">
							<view>{{ sex }}</view>
						</picker>
					</view>
				</view>
				<view class="info-item flex">
					<view class="info-left">联系电话</view>
					<view class="info-right"><input class="list-input" type="number" v-model="phone" placeholder="请填写联系电话" /></view>
				</view>
				<view class="info-item flex" @tap="Toshow">
					<view class="info-left">陪诊医院</view>
					<view class="info-right">{{ hospital || '请选择医院名称' }}</view>
				</view>
				<zhilin-picker
					v-model="show"
					:title="title"
					:data="list"
					:initSelected="initSelected"
					:showSearch="true"
					@change="onChange"
					@searchInput="onSearchInput"
					@confirm="onConfirm1"
					@shua="shua"
				/>
				<view class="info-item flex">
					<view class="info-left">紧急联系人姓名</view>
					<view class="info-right"><input class="list-input" type="text" v-model="jjname" placeholder="请填写紧急联系人姓名" /></view>
				</view>
				<view class="info-item flex">
					<view class="info-left">紧急联系人电话</view>
					<view class="info-right"><input class="list-input" type="number" v-model="jjphone" placeholder="请填写紧急联系人电话" /></view>
				</view>
				<view class="info-type">
					<view class="info-type-title">
						服务项目
						<text class="info-type-tip">(可多选)</text>
					</view>
					<view class="info-type-main">
						<view class="info-type-main-item" :class="{ current: item.chose == 2 }" v-for="(item, index) in typelist" :key="index" @click="choose(item)">
							{{ item.name }}
							<text>￥{{ item.price }}</text>
						</view>
					</view>
				</view>
				<view class="info-item flex" v-if="type == 2">
					<text class="info-left">上门接送地址</text>
					<view class="info-right">
						<pickerAddress class="input" @change="onCityClick">{{ addressDetail || '请选择地址' }}</pickerAddress>
					</view>
				</view>
				<view class="info-item flex" v-if="type == 2">
					<view class="info-left">详细地址</view>
					<view class="info-right"><input class="list-input" type="text" v-model="addressD" placeholder="请填写详细地址" /></view>
				</view>
			</view>

			<view class="info-bz">
				<view class="info-type-title">
					备注说明
					<text class="info-type-tip">(选填)</text>
				</view>
				<textarea v-model="remarks" class="text-box" name="" id="" cols="30" rows="10"></textarea>
			</view>
		</scroll-view>
		<view class="btn" @click="buy()">立即下单(￥{{ price }})</view>
		<uni-popup ref="popup" type="center">
			<view class="popup-box">
				<view class="img"><image src="../../static/img/popup.png" mode=""></image></view>
				<view class="mian">
					<view class="title">暂不提供跨区域接送服务</view>
					<view class="nocancel">您所在的地区与医院所在地区不符合请重新填写</view>
					<view class="comfirm-box" @click="cancel">知道了</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { cate, service, getHospitalList, equity } from '@/api/index.js';
import { Diagnosisconfirm } from '@/api/order.js';
import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
import zhilinPicker from '@/components/zhilin-picker/zhilin-picker.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	components: {
		pickerAddress,
		uniPopup
	},
	data() {
		return {
			type: 1,
			price: 0,
			height: '0px',
			id: '',
			cardprice: '',
			index: '',
			pzType: '', //陪诊类型
			pzTypelist: [],
			date: '请选择预约日期',
			time: '请选择预约时间',
			name: '',
			age: '',
			array: ['男', '女'],
			sex: '请选择你的性别',
			phone: '',
			jjname: '',
			jjphone: '',
			show: false,
			initSelected: [],
			title: '选择医院',
			hospital: '', //医院
			list: [], //医院列表
			typelist: [],
			addressD: '',
			addressDetail: '',
			addr: '',
			address: {
				province: '',
				city: '',
				district: ''
			},
			remarks: '',
			province: '',
			city: '',
			hospital_id: '',
			searchVal: '',
			page: 1,
			cardList: []
		};
	},
	onReady(res) {
		var _this = this;
		uni.getSystemInfo({
			success: resu => {
				const query = uni.createSelectorQuery();
				query.select('.scrollList').boundingClientRect();
				query.exec(function(res) {
					_this.height = resu.windowHeight - res[0].top + 'px';
					console.log('打印页面的剩余高度', _this.height);
				});
			},
			fail: res => {}
		});
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	onLoad(opt) {
		if (opt.type) {
			this.id = opt.type;
		}
		this.loadData();
		this.ListDate();
	},
	methods: {
		Toshow() {
			this.show = true;
		},
		//加载医院列表
		ListDate() {
			let obj = this;
			let data = '';
			console.log(obj.searchVal);
			if (!obj.searchVal) {
				data = {
					keyword: '',
					// province_id: obj.province_id,
					// city_id: obj.city_id,
					// district_id: obj.district_id,
					sort: 'id desc',
					page: obj.page,
					limit: 10
				};
			} else {
				data = {
					keyword: obj.searchVal,
					sort: 'id desc',
					page: obj.page,
					limit: 10
				};
			}
			getHospitalList(data)
				.then(e => {
					obj.list = obj.list.concat(e.data.list);
					console.log(obj.list);
				})
				.catch(e => {
					console.log(e);
				});
		},
		// 选择预约时间
		bindDateChange: function(e) {
			this.date = e.target.value;
		},
		// 选择预约时间
		bindTimeChange: function(e) {
			this.time = e.target.value;
		},
		// 选择性别
		bindPickerSex: function(e) {
			console.log(this.array[e.target.value]);
			this.sex = this.array[e.target.value];
		},
		// 选择类型
		bindPickerType: function(e) {
			if (this.cardList.indexOf(this.pzType.name) == -1) {
				this.price -= this.pzType.price * 1;
			} else {
				this.cardprice -= this.pzType.price * 1;
			}
			this.pzType = this.pzTypelist[e.target.value];
			if (this.cardList.indexOf(this.pzType.name) == -1) {
				this.price += this.pzType.price * 1;
			} else {
				this.cardprice += this.pzType.price * 1;
			}
		},
		onChange(val) {
			let obj = this;
			console.log(val, 'onChange');
			let arr = val.split(',');
			obj.hospital = arr[1];
			let city = arr[2];
			let district = arr[4];
			let province = arr[6];
			obj.province = province;
			obj.city = city;
			obj.hospital_id = arr[0];
			obj.addr = province + city + district;
			console.log(obj.addr);
		},
		shua() {
			this.page += 1;
			this.ListDate();
		},
		onConfirm1(val) {},
		onSearchInput(val) {
			this.page = 1;
			this.list = [];
			console.log('val223', this.list);
			this.searchVal = val;
			this.ListDate();
		},
		loadData() {
			const obj = this;
			equity({}).then(({ data }) => {
				obj.cardList = data.map(e => {
					return e.name;
				});
				console.log(obj.cardList, '123456');
				cate({ type: 1 }).then(({ data }) => {
					this.pzTypelist = data;
					data.forEach(e => {
						if (e.id == obj.id) {
							console.log(obj.cardList.indexOf(e.id));
							if (obj.cardList.indexOf(e.name) == -1) {
								obj.price += e.price * 1;
							} else {
								obj.cardprice = e.price * 1;
							}
							obj.pzType = e;
						}
					});
				});
				service({}).then(({ data }) => {
					data.forEach(e => {
						e.chose = 1;
					});
					obj.typelist = data;
				});
			});
		},
		outFocus(e) {
			console.log(event.target);
			event.target.blur();
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		choose(opt) {
			if (opt.chose == 1) {
				if (opt.name == '上门接送') {
					this.type = 2;
				}
				opt.chose = 2;
				this.price += opt.price * 1;
			} else {
				if (opt.name == '上门接送') {
					this.type = 1;
				}
				opt.chose = 1;
				this.price -= opt.price * 1;
			}
			console.log(this.typelist);
		},
		openPopup() {
			this.$refs.popup.open();
		},
		cancel() {
			this.$refs.popup.close();
		},
		// 选中城市切换
		onCityClick({ data }) {
			let address = this.address;
			address.province = data[0];
			address.city = data[1];
			address.district = data[2];
			this.addressDetail = data.join('');
		},
		buy() {
			const obj = this;
			let cate = '';
			console.log(typeof cate);
			cate = obj.pzType.id + '';
			let service_id = '';
			obj.typelist.forEach(e => {
				if (e.chose == 2) {
					if (service_id != '') {
						service_id = service_id + ',' + e.id;
					} else {
						service_id = e.id;
					}
				}
			});
			if (obj.date == '请选择预约日期') {
				return this.$api.msg('请选择预约日期');
			}
			if (obj.time == '请选择预约时间') {
				return this.$api.msg('请选择预约时间');
			}
			let time = obj.date + ' ' + obj.time + ':00';
			if (obj.name == '') {
				return this.$api.msg('请填写你的姓名');
			}
			if (obj.sex == '请选择你的性别') {
				return this.$api.msg('请选择你的性别');
			}
			if (obj.age == '') {
				return this.$api.msg('请填写你的年龄');
			}
			if (obj.phone == '') {
				return this.$api.msg('请填写你的联系电话');
			}
			if (this.phone.length != 11) {
				this.$api.msg('请输入正确的联系方式');
				return;
			}
			if (obj.hospital == '') {
				return this.$api.msg('请选择医院');
			}
			if (obj.jjname == '') {
				return this.$api.msg('请填写紧急联系人姓名');
			}
			if (obj.jjphone == '') {
				return this.$api.msg('请填写紧急联系人电话');
			}
			if (obj.jjphone.length != 11) {
				this.$api.msg('请输入正确的紧急联系人电话');
				return;
			}
			// if (obj.addressDetail == '') {
			// 	return this.$api.msg('请选择上门接送地址');
			// }
			// if (obj.addressD == '') {
			// 	return this.$api.msg('请填写详细地址');
			// }
			console.log(cate, service_id, '1111');
			console.log(typeof cate, typeof service_id, '2222');
			Diagnosisconfirm({
				type: 1,
				cate: cate,
				service_id: service_id,
				time: time,
				name: obj.name,
				sex: obj.sex == '男' ? 1 : 2,
				age: obj.age,
				phone: obj.phone,
				province: obj.province,
				city: obj.city,
				hospital_id: obj.hospital_id,
				hospital: obj.addr + ':' + obj.hospital,
				urgent_name: obj.jjname,
				urgent_phone: obj.jjphone,
				transfer_address: obj.addressDetail + obj.addressD,
				remarks: obj.remarks
			})
				.then(e => {
					console.log(e, '1111');
					uni.navigateTo({
						url: '/pages/money/pay?orderId=' + e.data.cache + '&money=' + e.data.pay_price
					});
				})
				.catch(e => {
					this.openPopup();
				});
		}
	}
};
</script>

<style lang="scss">
.content,
page {
	min-height: 100%;
	height: auto;
	background: #f8f8f8;
}
.top {
	position: relative;
	z-index: 0;
	width: 750rpx;
	height: 287rpx;
	.top-bg {
		width: 750rpx;
		height: 287rpx;
	}
}
.main {
	height: auto;
	background: #ffffff;
}
.info-item {
	padding: 40rpx 0 38rpx;
	margin: 0 24rpx;
	border-bottom: 1px solid #ececec;
	.info-left {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
	}
	.info-right {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
}
.list-input {
	text-align: right;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #999999;
}
.info-type-title {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #222222;
	.info-type-tip {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
	}
}
.info-type {
	border-bottom: 1px solid #ececec;
	padding: 38rpx 24rpx 50rpx;
	.info-type-main {
		display: flex;
		flex-wrap: wrap;
		.current {
			background: #24a17d !important;
			color: #ffffff !important;
			text {
				color: #ffffff !important;
			}
		}
		.info-type-main-item {
			margin: 30rpx 10rpx 0 0;
			padding: 10rpx 20rpx;
			background: #ffffff;
			border: 2rpx solid #e7e7e7;
			border-radius: 15rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			text {
				color: #ff6f0f;
			}
		}
	}
}
.info-bz {
	margin: 15rpx 0 0;
	padding: 40rpx 30rpx;
	background: #ffffff;
	.text-box {
		margin: 10rpx 0 0;
		width: 690rpx;
		height: 100rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
	}
}
.btn {
	position: fixed;
	bottom: 40rpx;
	left: 50%;
	margin-left: -311rpx;
	width: 622rpx;
	height: 85rpx;
	background: #24a17d;
	border-radius: 15rpx;
	text-align: center;
	line-height: 85rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ffffff;
}
.popup-box {
	width: 527rpx;
	height: 602rpx;
	background: #ffffff;
	border-radius: 28rpx;
	position: relative;
	.img {
		position: relative;
		top: -56rpx;
		left: 0;
		width: 527rpx;
		height: 280rpx;
		display: flex;
		justify-content: center;
		image {
			border-radius: 20rpx 20rpx 0 0;
			width: 477rpx;
			height: 280rpx;
		}
	}

	.mian {
		margin-top: -44rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		// padding: 32rpx 32rpx;
		background-color: #ffffff;
		border-radius: 0 0 20rpx 20rpx;
		padding: 0 42rpx;
		text-align: center;
		.title {
			font-size: 33rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #333333;
		}

		.nocancel {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #7b95a9;
		}

		.comfirm-box {
			margin: 52rpx auto;
			width: 403rpx;
			height: 83rpx;
			background: #24a17d;
			border-radius: 42rpx;
			text-align: center;
			line-height: 83rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
		}
	}
}
.scrollList {
	padding-bottom: 150rpx;
}
</style>