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="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="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>
		<view class="padding-sm bg-white" v-if="doctor.docter.length!=0">
			<scroll-view scroll-x="true">
				<view class="flex flex-direction align-center justify-center" @click="gotodoctorinfo(item.id)" style="width: 120rpx;" 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>
		<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="gotopay">
				提交申请
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.getarchives()
			this.gettime()
		},
		onShow() {
			if (this.doctor != null) {
				this.servicejigou = this.doctor.name
				this.jigouID = this.doctor.id
			}
			if (this.yimiaoInfo != null) {
				this.yimiao = this.yimiaoInfo.name
			}
		},
		data() {
			return {
				showpeople: false,
				huanzheID: "",
				value: "请选择接种用户",
				patientList: [],
				show: false,
				yuyuevalue: "请选择预约时间",
				multiSelector: [],
				timehour: "",
				doctor: {},
				servicejigou: "请选择服务机构",
				jigouID: "",
				yimiao: "请选择接种疫苗",
				yimiaoInfo: {},
				time: ""
			}
		},
		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() {
				let res = await this.$request.post("/api/v1/docter/timePeriodList")
				console.log(res)
				if (res.status == 0) {
					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)
				}
			},
			callbacktime(arr) {
				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 = new Date().getFullYear() + "-" + this.multiSelector[0][arr[0]]
			},
			//添加就诊人
			addPeople(e) {
				uni.navigateTo({
					url: "../archives/add_archives"
				})
			},
			xuanzefuwu() {
				uni.navigateTo({
					url: "mechanism"
				})
			},
			vaccinesList() {
				uni.navigateTo({
					url: "vaccinesList"
				})
			},
			yuyuetime() {
				this.show = true
			},
			gotopay() {
				if (this.yimiaoInfo != null && this.doctor != null && this.huanzheID != "" && this.timehour != "") {
					let obj = {
						product_type: 4,
						patient_id: this.huanzheID,
						total_amount: this.yimiaoInfo.price / 100,
						organization_id: this.doctor.id,
						schedule_date: this.time,
						time_period_id: this.timehour,
						vaccine_id: this.yimiaoInfo.id,
						payment_type: 2
					}
					uni.navigateTo({
						url: "../order/payment?data=" + JSON.stringify(obj)
					})
				} else {
					uni.showToast({
						title: "请填写完整",
						icon: "none"
					})
				}
			},
			gotodoctorinfo(id){
				uni.navigateTo({
					url: "../doctor_related/doctor_info?id=" + id
				})
			}
		}
	}
</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>