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="showPicker('region')">
					<text class="info-left">陪诊地区</text>
					<!-- <view class="info-right"><input class="list-input" @focus="outFocus" v-model="addr"
							placeholder="请选择省市区" /></view> -->
					<view class="info-right">{{addr?addr:'请选择省市区'}}</view>
				</view>
				<w-picker mode="region" :value="defaultRegion" default-type="value"
					@confirm="onConfirm($event, 'region')" @cancel="handleCancel" ref="region"></w-picker>
				<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 flex">
						<view class="">
							服务项目
							<text class="info-type-tip">(可多选)</text>
						</view>
						<view class="info-type-title-right" @click="navto('/pages/index/info?id=5')">
							<view class="info-type-title-right-font">查看详情</view>

							<image class="info-type-title-right-icon" src="../../static/icon/jt.png" mode=""></image>
						</view>
					</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.toFixed(2) * 1 }})</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 wPicker from '@/components/w-picker/w-picker.vue';
	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,
			wPicker,
			zhilinPicker,
			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: [], //医院列表
				addr: '', //省市区
				code: '', //省市区行政编码
				province: '',
				province_id: '',
				city: '',
				city_id: '',
				district: '',
				district_id: '',
				region: '',
				defaultRegion: [],
				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
					};
				}
				console.log(data, 'info');
				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;
				}
			},
			outFocus(e) {
				console.log(event.target);
				event.target.blur();
			},
			//省市区弹窗
			showPicker(type) {
				this.$refs[type].show();
			},
			// 省市区选择确定
			onConfirm(res, type) {
				let obj = this;
				obj.result = res;
				obj.addr = res.result;
				if (res.name) {
					obj.province = res.name[0];
					obj.city = res.name[1];
					obj.district = res.name[2];
				} else {
					obj.province = '北京市';
					obj.city = '北京市';
					obj.district = '东城区';
				}
				obj.province_id = res.value[0];
				obj.city_id = res.value[1];
				obj.district_id = res.value[2];
				obj.hospital = ''; //重置医院
				obj.list = []; //重置医院列表
				obj.ListDate();
			},
			onChange(val) {
				let obj = this;
				console.log(val, 'onChange');
				let arr = val.split(',');
				obj.hospital = arr[1];
				obj.hospital_id = arr[0];
				obj.city = arr[2];
				obj.city_id = arr[3];
				obj.district = arr[4];
				obj.district_id = arr[5];
				obj.province = arr[6];
				obj.province_id = arr[7];
				obj.addr = obj.province + obj.city + obj.district;
				console.log(obj.hospital, obj.hospital_id);
				console.log(obj.city, obj.city_id);
				console.log(obj.district, obj.district_id);
				console.log(obj.province, obj.province_id);
			},
			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('');
			},
			navto(url) {
				uni.navigateTo({
					url
				});
			},
			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-title-right {
			display: flex;
			align-items: center;

			.info-type-title-right-font {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #d0cece;
				margin-right: 10rpx;
			}

			.info-type-title-right-icon {
				width: 18rpx;
				height: 22rpx;
			}
		}

		.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: absolute;
		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>