mabao/pages/vaccines/vaccines_info.vue

<template>
	<view class="">
		<view class="cu-list menu">
			<view class="cu-item arrow" @click="showpeople=true">
				<view class="content">
					<text class="text-grey">接种用户</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{value}}</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="xuanzefuwu">
				<view class="content">
					<text class="text-grey">服务机构</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{servicejigou}}</text>
				</view>
			</view>
			<view class="padding-sm bg-white" v-if="doctor!=''">
				<scroll-view scroll-x="true" enable-flex="true" style="display: flex;height: 145rpx;">
					<view class="flex flex-direction align-center justify-center margin-right-xs"
						@click="gotodoctorinfo(item.id)" style="width: 168rpx;height: 130rpx;"
						v-for="(item,index) in doctor.docter" :key="index">
						<u-avatar :src="item.avatar" mode="circle"></u-avatar>
						<view class="">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
				<view class="">
					<rich-text :nodes="doctor.vaccine_notice"></rich-text>
				</view>
			</view>
			<view class="cu-item arrow" @click="vaccinesList">
				<view class="content">
					<text class="text-grey">接种疫苗</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{yimiao}}</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="yuyuetime">
				<view class="content">
					<text class="text-grey">预约时间</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{yuyuevalue}}</text>
				</view>
			</view>
			<view class="text-gray text-sm" style="margin: 25rpx 37rpx;line-height: 38rpx;">
				<rich-text :nodes="vaccine_notice"></rich-text>
			</view>
		</view>
		<!-- <u-picker mode="multiSelector" @confirm="callbacktime" v-model="show" :default-selector='[0, 1]' range-key="start_time_period"
		 :range="multiSelector"></u-picker> -->
		<u-popup v-model="showpeople" mode="bottom" border-radius="14" length="50%">
			<view class="popup_title">
				<view class="popup_title_text">选择就诊人</view>
			</view>
			<scroll-view style="height: 70%;" scroll-y="true">
				<view class="popup_list" v-for="(item, index) in patientList" :key="index" :data-index="index"
					@click="xuanzehuanzhe(item)">
					<view class="popup_list_title">
						<view class="title">{{item.name}}</view>
						<view class="body">
							{{item.sex==1?'男':'女'}}
						</view>
					</view>
					<view class="popup_list_button flex align-center">
						<u-radio-group v-model="value">
							<u-radio @change="peopleRadioChange" :key="index" :name="item.name">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</scroll-view>
			<u-gap height="10" bg-color="#f9f9f9"></u-gap>
			<view class="popup_button">
				<image style="width: 32rpx;height: 32rpx;margin-right: 15rpx;"
					src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/img/addjiu.png" mode=""></image>
				<view class="" @click="addPeople">
					添加就诊人档案
				</view>
			</view>
		</u-popup>
		<view class="cu-bar bg-white tabbar" style="position: fixed;bottom: 0;width: 100%;">
			<view class="submit" style="background-color: #0B73B9;color: white;" @click="submitpay">
				提交申请
			</view>
		</view>
		<u-popup v-model="dateshow" mode="bottom" :safe-area-inset-bottom="true" border-radius="14" length="50%"
			height="700rpx">
			<datepicker :date="multiSelector" @callbacktime="callbacktime" ref="date"></datepicker>
		</u-popup>
		<view class="cu-tabbar-height"></view>
		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
	import datepicker from '../../components/datepicker/datepicker'
	var user = require('../../common/user.js');
	export default {
		onLoad() {
			this.$util.getAgreement().then(res => {
				this.vaccine_notice = res.data.vaccine_notice
			}).catch(err => {

			})
		},
		components: {
			datepicker
		},
		onShow() {
			if (this.doctor != null) {
				this.servicejigou = this.doctor.name
				this.jigouID = this.doctor.id
			}
			if (this.yimiaoInfo != null) {
				this.yimiao = this.yimiaoInfo.name
				this.multiSelector = []
				this.gettime()
			}
			this.getarchives()
		},
		data() {
			return {
				showpeople: false,
				huanzheID: "",
				value: "请选择接种用户",
				patientList: [],
				show: false,
				yuyuevalue: "请选择预约时间",
				multiSelector: [],
				timehour: "",
				doctor: "",
				servicejigou: "请选择服务机构",
				jigouID: "",
				yimiao: "请选择接种疫苗",
				yimiaoInfo: "",
				time: "",
				dateshow: false,
				is_Scheduling: true,
				vaccine_notice: ""
			}
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			peopleRadioChange(e) {
				console.log(e);
			},
			xuanzehuanzhe(item) {
				this.huanzheID = item.id
				this.value = item.name
				this.showpeople = false
			},
			getarchives: async function() {
				let res = await this.$request.post("/api/v1/patient/patientList")
				if (res.status == 0) {
					this.patientList = res.data.data
				}
			},
			gettime: async function() {
				if (this.doctor == '') {
					return false
				}
				if (this.yimiaoInfo == "") {
					return false
				}
				let res = await this.$request.post("/api/v1/docter/timePeriodList", {
					organization_id: this.doctor.id,
					schedule_type: 2,
					vaccine_id:this.yimiaoInfo.id
				})
				console.log(res)
				if (res.status == 0) {
					let times = []
					// res.data.list.forEach(item => {
					// 	item.start_time_period = item.start_time_period + '-' + item.end_time_period
					// })
					// this.multiSelector.push(res.data.dates)
					// this.multiSelector.push(res.data.list)
					if (res.data.data.length == 0) {
						this.is_Scheduling = false
						return false
					}
					// let nian = res.data.data.map(item => {
					// 	return item.schedule_date
					// })
					// let time = res.data.data.map(item => {
					// 	return item.schedule_period.map(itm => {
					// 		itm.organization.org_id = itm.organization['id']
					// 		return {
					// 			can_appoint_num: itm.can_appoint_num,
					// 			...itm.organization,
					// 			...itm.time_period
					// 		}
					// 	})
					// })
					// time[0].forEach(item => {
					// 	item.start_time_period = item.start_time_period + '-' + item.end_time_period
					// })
					// this.multiSelector.push(nian)
					// // time[0].sort((a,b)=> {return a.end_time_period>b.end_time_period?1:-1})
					// this.multiSelector.push(time[0])
					// console.log(this.multiSelector)
					let nian = res.data.data.map(item => {
						if (item.schedule_period.length != 0) {
							return {
								date: item.schedule_date,
								id: item.id,
								week: item.week
							}
						}

					})
					res.data.data.forEach(item => {
						if (item.schedule_period.length != 0) {
							let time = item.schedule_period.map(itm => {
								if (item.id == itm.schedule_id) {
									if (itm.time_period != null) {
										itm.organization.org_id = itm.organization['id']
										return {
											yeardate: itm.schedule_date,
											schedule_id: itm.schedule_id,
											can_appoint_num: itm.can_appoint_num,
											can_appoint:itm.can_appoint,
											...itm.organization,
											...itm.time_period
										}
									}
								}
							})
							time = time.filter(item => item !== undefined)
							times.push(time)
						}

					})
					// time[0].forEach(item => {
					// 	item.start_time_period = item.start_time_period + '-' + item.end_time_period
					// })
					nian = nian.filter(item => item !== undefined)
					this.multiSelector.push(nian)
					// time[0].sort((a,b)=> {return a.end_time_period>b.end_time_period?1:-1})
					times.forEach(item => {
						item.sort((a, b) => {
							return a.end_time_period > b.end_time_period ? 1 : -1
						})
						// for (let i = item.length - 1; i >= 0; i--) {
						// 	let arr = item[i].yeardate + " " + item[i].end_time_period;
						// 	arr = arr.split(/[- :]/)
						// 	let nndate = Date.parse(new Date(arr[0], arr[1] - 1, arr[2], arr[3], arr[4]));
						// 	let currentTime = Date.parse(new Date())
						// 	// console.log(nndate<currentTime,index)
						// 	if (nndate < currentTime) {
						// 		item.splice(i, 1)
						// 	}
						// }
					})
					this.multiSelector.push(times)
					console.log(this.multiSelector)
					let arr = this.multiSelector[1][0]
					if (arr != undefined) {
						arr.forEach(item => {
							item.year = nian[0].date
						})
						this.$refs.date.rightday = arr
					} else {
						arr = []
						this.$refs.date.rightday = arr
					}

				}
			},
			callbacktime(item) {
				// this.timehour = this.multiSelector[1][arr[1]].id
				// this.yuyuevalue = this.multiSelector[0][arr[0]] + " " + this.multiSelector[1][arr[1]].start_time_period
				// this.time = this.multiSelector[0][arr[0]]

				let arr = item.year.split(/[- :]/)
				let nndate = new Date(arr[0], arr[1] - 1, arr[2]);
				nndate = Date.parse(nndate)
				let currentTime = Date.parse(new Date())
				if ((nndate - currentTime) / (1000 * 60 * 60 * 24) > this.doctor.can_vaccine_days) {
					uni.showToast({
						title: "尚未到可预约时间",
						icon: "none"
					})
					return false
				}
				this.timehour = item.id
				this.yuyuevalue = item.year + " " + item.start_time_period + "-" + item.end_time_period
				this.time = item.year
				this.dateshow = false
			},
			//添加就诊人
			addPeople(e) {
				uni.navigateTo({
					url: "../archives/add_archives"
				})
			},
			xuanzefuwu() {
				this.multiSelector = []
				this.yimiao = "请选择接种疫苗"
				this.yimiaoInfo = ""
				uni.navigateTo({
					url: "mechanism?type=" + 2
				})
			},
			vaccinesList() {
				if (this.doctor == '') {
					uni.showToast({
						title: "请先选择机构",
						icon: "none"
					})
					return false
				}
				if (this.huanzheID == "") {
					uni.showToast({
						title: "请先选择患者",
						icon: "none"
					})
					return false
				}
				uni.navigateTo({
					url: "vaccinesList?id=" + this.doctor.id + "&patient_id=" + this.huanzheID
				})
			},
			yuyuetime() {
				if (this.doctor == '') {
					uni.showToast({
						title: "请先选择机构",
						icon: "none"
					})
					return false
				}
				if (this.yimiaoInfo == "") {
					uni.showToast({
						title: "请先选择疫苗",
						icon: "none"
					})
					return false
				}
				if (this.multiSelector[0] == undefined || this.multiSelector[1] == undefined) {
					uni.showToast({
						title: "尚未排班",
						icon: "none"
					})
					return false
				}
				if (this.multiSelector[0].length == 0 && this.multiSelector[1].length == 0) {
					uni.showToast({
						title: "尚未排班",
						icon: "none"
					})
					return false
				}
				// if (!this.is_Scheduling) {
				// 	uni.showToast({
				// 		title: "尚未排班",
				// 		icon: "none"
				// 	})
				// 	return false
				// }
				this.dateshow = true
			},
			submitpay() {
				if (this.huanzheID == "") {
					uni.showToast({
						title: "请先选择接种用户",
						icon: "none"
					})
					return false
				}
				if (this.doctor == "") {
					uni.showToast({
						title: "请先选择机构",
						icon: "none"
					})
					return false
				}
				if (this.yimiaoInfo == "") {
					uni.showToast({
						title: "请先选择疫苗",
						icon: "none"
					})
					return false
				}
				if (this.timehour == "") {
					uni.showToast({
						title: "请先选择预约时间",
						icon: "none"
					})
					return false
				}
				uni.requestSubscribeMessage({
					tmplIds: ['M9b6PPKtD7PEqLsSnQ453iTIHtIZZpixOBjUjax8YXU',
						'Sg0lKmOexTnxxDzy39E26aNvmc3w4qKUnxl21A9dWns',
						'phcsQ7ZbsJapfmx3NMChaxepR9tJFiqbO25P9tujErI'
					],
					success: (res) => {
						this.gotopay()
					},
					fail: (err) => {
						this.gotopay()
					}
				})
			},
			gotopay: async function() {

				let obj = {
					product_type: 4,
					patient_id: this.huanzheID,
					total_amount: 0,
					organization_id: this.doctor.id,
					schedule_date: this.time,
					time_period_id: this.timehour,
					vaccine_id: this.yimiaoInfo.id,
					payment_type: 2
				}
				// if ((this.yimiaoInfo.price / 100) == 0) {
				let res = await this.$request.post("/api/v1/order/appointPlaceOrder", {
					product_type: obj.product_type,
					patient_id: obj.patient_id,
					total_amount: 0,
					organization_id: obj.organization_id,
					schedule_date: obj.schedule_date,
					time_period_id: obj.time_period_id,
					vaccine_id: obj.vaccine_id,
					payment_type: obj.payment_type,
				})
				if (res.status == 0) {
					uni.showToast({
						title: "提交成功!",
						icon: "none",
						duration: 1000
					})
					setTimeout(() => {
						uni.redirectTo({
							url: "../order/order?type=" + obj.product_type
						})
					}, 1000)
				} else {
					uni.showModal({
						title: "提示",
						content: res.message,
						confirmText: "查看预约",
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "../common_tools/my_consulting/my_appointment"
								})
							}
						}
					})
				}
				// } else {
				// 	uni.navigateTo({
				// 		url: "../order/payment?data=" + JSON.stringify(obj)
				// 	})
				// }
			},
			gotodoctorinfo(id) {
				uni.navigateTo({
					url: "../doctor_related/doctor_info?id=" + id + "&index=2"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {}

	.popup_title {
		height: 15%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1rpx solid #f9f9f9;
	}

	.textareasty {
		background-color: white;
		border: 1px solid #efefef;
		border-radius: 16rpx;
		padding: 15rpx;
		margin: 15rpx auto;
	}

	.popup_title_text {
		width: auto;
		height: auto;
		font-size: 34rpx;
		font-weight: 540;
	}

	.popup_list {
		display: flex;
		height: 10vh;
		width: auto;
		border-bottom: 1rpx solid #f9f9f9;
	}

	.popup_list_title {
		height: 100%;
		width: 90%;
		display: inline-block;
		padding: 0 0 0 30rpx;

		.title {
			height: 50%;
			width: auto;
			font-size: 32rpx;
			font-weight: 500;
			padding: 20rpx 0 0 0;
		}

		.body {
			height: 50%;
			color: #a1a1a1;
			height: auto;
			width: auto;
			font-size: 30rpx;
			padding: 10rpx 0 0 0;
		}
	}

	.popup_button {
		height: 80rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		view {
			color: #0b73ba;
			font-weight: 500;
		}
	}

	/**选择号码的样式和选择患者不同
	需要更改样式*/
	.phone {
		height: 20%;
		width: 100%;

		.list {
			height: 100%;
			width: 100%;
			display: flex;
			padding: 0 10rpx 0 30rpx;


			.title {
				height: 100%;
				width: 65%;
				font-size: 32rpx;
				color: #7d7d7d;
				display: flex;

				align-items: center;
			}

			.phone {
				height: 100%;
				width: 30%;
				font-size: 32rpx;
				font-weight: 500;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.button {
				height: 100%;
				width: 5%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

		}
	}
</style>