mabao/pages/childcare/child_care.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.nurse_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" v-if="childcare.length==0">请选择儿保项目</text>
					<text class="text-orange text-sm" v-else>合计：￥{{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="nurse_notice"></rich-text>
			</view>
		</view>
		<!-- <u-picker mode="multiSelector" @confirm="callbacktime" v-model="show" 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="gotopay">
				提交申请
			</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'
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex';
	var user = require('../../common/user.js');
	export default {
		computed: {
			...mapState(['user']),
			...mapGetters({
				hasLogin: 'verifyJwt'
			})
		},
		components: {
			datepicker
		},
		onLoad() {
			this.$util.getAgreement().then(res => {
				this.nurse_notice = res.data.nurse_notice
			}).catch(err => {

			})
		},
		onShow() {
			let price = 0
			if (this.doctor != null) {
				this.servicejigou = this.doctor.name
				this.jigouID = this.doctor.id
			}
			if (this.childcare.length != 0) {
				this.childcare.forEach(item => {
					price += item.price / 100
				})
				this.yimiao = price.toFixed(2)
			}
			this.getarchives()
			this.multiSelector = []
			this.gettime()
		},
		onHide() {
			this.yimiao = ""
		},
		data() {
			return {
				showpeople: false,
				huanzheID: "",
				value: "请选择儿保用户",
				patientList: [],
				show: false,
				yuyuevalue: "请选择预约时间",
				multiSelector: [],
				timehour: "",
				doctor: "",
				servicejigou: "请选择服务机构",
				jigouID: "",
				yimiao: "",
				yimiaoInfo: "",
				time: "",
				childcare: [],
				dateshow: false,
				is_Scheduling: true,
				nurse_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
				}
				let res = await this.$request.post("/api/v1/docter/timePeriodList", {
					organization_id: this.doctor.id,
					schedule_type: 3
				})
				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, index) => {
						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,
											...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)
					times.forEach(item => {
						item.sort((a, b) => {
							return a.end_time_period > b.end_time_period ? 1 : -1
						})
					})
					this.multiSelector.push(times)
					let arr = this.multiSelector[1][0]
					arr.forEach(item => {
						item.year = nian[0].date
					})
					this.$refs.date.rightday = arr
					console.log(this.multiSelector)
				}
			},
			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.yimiao = ""
				this.yimiaoInfo = ""
				this.childcare = []
				uni.navigateTo({
					url: "../vaccines/mechanism?type=" + 3
				})
			},
			vaccinesList() {
				if (this.doctor == '') {
					uni.showToast({
						title: "请先选择机构",
						icon: "none"
					})
					return false
				}
				uni.navigateTo({
					url: "child_careList?id=" + this.doctor.id
				})
			},
			yuyuetime() {
				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
				// }
				if (this.doctor == '') {
					uni.showToast({
						title: "请先选择机构",
						icon: "none"
					})
					return false
				}
				this.dateshow = true
			},
			gotopay: async function() {
				if (this.huanzheID == "") {
					uni.showToast({
						title: "请先选择接种用户",
						icon: "none"
					})
					return false
				}
				if (this.doctor == "") {
					uni.showToast({
						title: "请先选择机构",
						icon: "none"
					})
					return false
				}
				if (this.yimiao == "") {
					uni.showToast({
						title: "请先选择儿保项目",
						icon: "none"
					})
					return false
				}
				if (this.timehour == "") {
					uni.showToast({
						title: "请先选择预约时间",
						icon: "none"
					})
					return false
				}
				let obj = {
					product_type: 5,
					patient_id: this.huanzheID,
					total_amount: this.yimiao,
					organization_id: this.doctor.id,
					schedule_date: this.time,
					time_period_id: this.timehour,
					nurse_ids: this.childcare.map(item => {
						return item.id
					}),
					payment_type: 2
				}
				console.log(this.yimiao)
				if (this.yimiao == 0) {
					let res = await this.$request.post("/api/v1/order/appointPlaceOrder", {
						product_type: obj.product_type,
						patient_id: obj.patient_id,
						total_amount: obj.total_amount * 100,
						organization_id: obj.organization_id,
						schedule_date: obj.schedule_date,
						time_period_id: obj.time_period_id,
						nurse_ids: JSON.stringify(obj.nurse_ids),
						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: "确定",
							showCancel: false,
							success: (rr) => {
								
							}
						})
					}
				} 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>