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="Toshow">
					<view class="info-left">代办医院</view>
					<view class="info-right">
						{{ hospital || '请选择医院名称' }}
						<!-- <input class="list-input" type="text" @focus="outFocus" v-model="hospital" placeholder="" placeholder-class="placeholder" /> -->
					</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">
						代办类型
						<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">
					<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 }})</view>
	</view>
</template>

<script>
import { cate, service, getHospitalList, basics, equity } from '@/api/index.js';
import { Diagnosisconfirm } from '@/api/order.js';
export default {
	data() {
		return {
			jcprice: 0,
			price: 0,
			height: '0px',
			id: '',
			index: '',
			date: '请选择预约日期',
			time: '请选择预约时间',
			name: '',
			array: ['男', '女'],
			sex: '请选择你的性别',
			phone: '',
			show: false,
			initSelected: [],
			title: '选择医院',
			hospital: '', //医院
			addr: '',
			list: [], //医院列表
			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 => {}
		});
	},
	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();
		},
		//加载医院列表
		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);
				});
		},
		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-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: 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;
}
.scrollList {
	padding-bottom: 150rpx;
}
</style>