pz/pages/index/yydb.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 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">
						<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" disabled="" @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-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=4')">
							<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">
					<view class="info-left">基础费用</view>
					<view class="info-right">￥{{ jcprice }}</view>
				</view>
				<view class="info-item flex" v-if="cardList != ''">
					<view class="info-left">优惠卡优惠</view>
					<view class="info-right">{{ cardList }}</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>
	</view>
</template>

<script>
	import {
		cate,
		service,
		getHospitalList,
		basics,
		equity
	} from '@/api/index.js';
	import wPicker from '@/components/w-picker/w-picker.vue';
	import zhilinPicker from '@/components/zhilin-picker/zhilin-picker.vue';
	import {
		Diagnosisconfirm
	} from '@/api/order.js';
	export default {
		components: {
			wPicker,
			zhilinPicker
		},
		data() {
			return {
				jcprice: 0,
				price: 0,
				height: '0px',
				id: '',
				index: '',
				date: '请选择预约日期',
				time: '请选择预约时间',
				name: '',
				array: ['男', '女'],
				sex: '请选择你的性别',
				phone: '',
				show: false,
				initSelected: [],
				title: '选择医院',
				hospital: '', //医院
				addr: '',
				list: [], //医院列表
				addr: '', //省市区
				code: '', //省市区行政编码
				province: '',
				province_id: '',
				city: '',
				city_id: '',
				district: '',
				district_id: '',
				region: '',
				defaultRegion: [],
				typelist: [],
				remarks: '',
				province: '',
				city: '',
				hospital_id: '',
				searchVal: '',
				page: 1,
				cardList: [],
				type: 1,
				cardprice: 0
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},

		onLoad(opt) {
			if (opt.type) {
				this.id = opt.type;
			}
			this.loadData();
			this.ListDate();
		},
		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 => {}
			});
		},
		watch: {
			searchVal() {
				console.log(222);
				this.ListDate();
			}
		},
		onShow() {},
		methods: {
			// 选择预约时间
			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];
			},
			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, '地址');
			},
			onConfirm1(val) {},
			onSearchInput(val) {
				this.page = 1;
				this.list = [];
				console.log('val223', this.list);
				this.searchVal = val;
				this.ListDate();
			},
			Toshow() {
				this.show = true;
			},
			shua() {
				this.page += 1;
				this.ListDate();
			},
			outFocus(e) {
				console.log(event.target);
				event.target.blur();
			},
			//省市区弹窗
			showPicker(type) {
				this.$refs[type].show();
			},
			navto(url) {
				uni.navigateTo({
					url
				});
			},
			// 省市区选择确定
			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);
			},
			//加载医院列表
			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, '信息');
				getHospitalList(data)
					.then(e => {
						obj.list = obj.list.concat(e.data.list);
						console.log(obj.list);
					})
					.catch(e => {
						console.log(e);
					});
			},
			loadData() {
				const obj = this;
				equity({}).then(({
					data
				}) => {
					let clist = data.map(e => {
						return e.name;
					});
					cate({
						type: 2
					}).then(({
						data
					}) => {
						this.pzTypelist = data;
						data.forEach(e => {
							console.log(clist, '123456');
							if (clist.indexOf(e.name) != -1) {
								e.price = 0;
								obj.type = 2;
								obj.cardList.push(e.name);
							}
							if (e.id == obj.id) {
								e.chose = 2;
								this.price += e.price * 1;
							} else {
								e.chose = 1;
							}
						});
						obj.cardList = obj.cardList.join('/');
						console.log(data, '123456');
						obj.typelist = data;
						basics({}).then(({
							data
						}) => {
							this.jcprice = data.price;
							if (obj.type != 2) {
								this.price += data.price * 1;
							} else {
								this.cardprice = data.price * 1;
							}
						});
					});
				});
			},
			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) {
					opt.chose = 2;
					this.price += opt.price * 1;
				} else {
					opt.chose = 1;
					this.price -= opt.price * 1;
				}
				console.log(this.typelist);
			},
			buy() {
				const obj = this;
				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.phone == '') {
					return this.$api.msg('请填写你的联系电话');
				}
				if (this.phone.length != 11) {
					this.$api.msg('请输入正确的联系方式');
					return;
				}
				if (obj.hospital == '') {
					return this.$api.msg('请选择代办医院');
				}
				Diagnosisconfirm({
						type: 2,
						cate: service_id,
						time: time,
						name: obj.name,
						sex: obj.sex == '男' ? 1 : 2,
						phone: obj.phone,
						province: obj.province,
						city: obj.city,
						hospital_id: obj.hospital_id,
						hospital: obj.addr + ':' + obj.hospital,
						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 => {});
			}
		}
	};
</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 {
		background: #ffffff;
	}

	.info-item {
		padding: 40rpx 0 38rpx;
		margin: 0 24rpx;
		border-bottom: 1px solid #ececec;

		.info-left {
			width: 300rpx;
			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 {
		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;
	}

	.scrollList {
		padding-bottom: 150rpx;
	}
</style>