xinelu-applet-ui/pagesB/confirmation/confirmation.vue

<template>
	<view class="app">
		<view class="item">
			<view class="text">
				现住址所在区
			</view>
			<view class="input" @tap='showPicker'>
				<view class="inputtext"
					:style="address=='请选择所属地区'?'font-size:22rpx;font-weight: 400;color: #8E8E8E !important;':''">
					{{address}}
				</view>
				<image src="../../static/huijiantou.png" mode=""></image>
			</view>
			<view class="text">
				患者姓名
			</view>
			<view class="input">
				<input v-model="formdata.patientName" class="uinput noimageuinput" placeholder="请输入患者姓名" type="text"
					placeholder-class="phsy" />
			</view>
			<view class="text">
				患者身份证号
			</view>
			<view class="input">
				<input v-model="formdata.cardNo" class="uinput noimageuinput" placeholder="请输入患者身份证号" type="text"
					placeholder-class="phsy" />
			</view>
			<view class="text">
				患者联系电话
			</view>
			<view class="input">
				<input v-model="formdata.phone" class="uinput noimageuinput" placeholder="请输入患者联系电话" type="text"
					placeholder-class="phsy" />
			</view>
			<view class="text">
				预约时间
				<text>请选择时间</text>
			</view>
			<tabs :list="appointmentTimeList" :current="timecurrent" @change="timechange" active-color="#26A888">
			</tabs>
			<view class="timeyear">
				<view class="toptext">
					<view :class="Soonerorlater=='morning'?'Soonerorlaterclass':'Soonerorlater'"
						@tap="tapSoonerorlater('morning')">
						上午
					</view>
					<view class="">
					</view>
					<view :class="Soonerorlater=='after'?'Soonerorlaterclass':'Soonerorlater'"
						@tap="tapSoonerorlater('after')">
						下午
					</view>
				</view>
				<view class="bottomtext">
					<view class="items" v-if="Soonerorlater=='morning'">
						<view @tap='taptime(item,index)'
							v-for="(item ,index) in appointmentTimeList[timecurrent].morningList"
							:class="timeindex==index?'timeitemtap':'timeitem'"
							:style="item.status?'':'background: #FFFFFF;color: #AAABB0;'">
							<view class="itemstext">
								{{item.scheduleTimeSlot}}
							</view>
							<view class="itemstexttwo">
								{{item.status?'(可预约)':'(不可预约)'}}
							</view>
						</view>
					</view>
					<view class="items" v-if="Soonerorlater=='after'">
						<view @tap='taptime(item,index)'
							v-for="(item ,index) in appointmentTimeList[timecurrent].afternoonList"
							:class="timeindex==index?'timeitemtap':'timeitem'"
							:style="item.status?'':'background: #FFFFFF;color: #AAABB0;'">
							<view class="itemstext">
								{{item.scheduleTimeSlot}}
							</view>
							<view class="itemstexttwo">
								{{item.status?'(可预约)':'(不可预约)'}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="text">
				问题简述
			</view>
			<view class="input">
				<input v-model="formdata.problemDescription" class="uinput noimageuinput" placeholder="不多于五个字"
					type="text" placeholder-class="phsy" />
			</view>
			<view class="text">
				患者个体情况说明
			</view>
			<view class="input" style="height: 200rpx;overflow-Y: scroll;">
				<u-input v-model="formdata.situationDescription" class="uinput noimageuinput" placeholder=" "
					type="textarea" :maxlength="100" />
			</view>
			<view class="text">
				问题描述
			</view>
			<view class="input" style="height: 200rpx;overflow-Y: scroll;">
				<u-input v-model="formdata.problemStatement" class="uinput noimageuinput" placeholder=" "
					type="textarea" :maxlength="500" />
			</view>
			<view class="text">
				既往疾病史
			</view>
			<view class="input" style="height: 200rpx;overflow-Y: scroll;">
				<u-input v-model="formdata.medicalRecord" class="uinput noimageuinput" placeholder=" " type="textarea"
					:maxlength="100" />
			</view>
			<view class="text">
				上传检查单/患处照片
				<text>（最多8张）</text>
			</view>
			<u-upload ref="uUpload" :max-count='9' :action="uoloadaction" :auto-upload="false" upload-text=' '
				@on-choose-complete='onchoosecomplete' @on-success='onsuccess' @on-uploaded='onuploaded'></u-upload>
			<view class="textarea">
				<view class="title">
					温馨提示：
				</view>
				<view class="">
					1.下单后24h内我们会和您确认具体时间点
				</view>
				<view class="">
					2.请提前准备好健康资料，以备专家参考
				</view>
				<view class="">
					3.请提前下载“腾讯会议”APP
				</view>
			</view>
		</view>
		<view class="btns">
			<view class="btnleft">
				￥<text>{{formdata.price}}</text>
			</view>
			<view class="btnright" @tap='updata'>
				保存
			</view>
		</view>
		<view class="">
			<m-city style='z-index: 10076;' :provinceData="list" headTitle="请选择所属地区" ref="cityPicker"
				@funcValue="getpickerParentValue" pickerSize="4">
			</m-city>
		</view>
		<!-- 弹框 -->
		<u-popup v-model="buyshow" mode="bottom" length="45%" border-radius="30" :closeable='true'>
			<view class="payment">
				请选择支付方式
			</view>
			<view class="chat">
				<image src="/pagesB/static/chat.png" mode=""></image>
				<span>微信支付</span>
			</view>
			<view class="submits" @tap='buy'>
				确认支付￥{{formdata.price}}
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getSubordinateRegions,
	} from '@/api/pagesB/modifyAddress/modifyAddress.js';
	import gkcity from "../../components/m-city/m-city.vue";
	import baseurl from '@/api/baseurl.js'
	import {
		consultationInfo
	} from '@/api/pagesB/createnewconsultation/createnewconsultation.js'
	import {
		getListByDoctor,
		addHealthConsultationOrder,
		appletGoodsOrderPay
	} from '@/api/pagesB/confirmation/index.js'
	import tabs from '@/components/utabs/u-tabs.vue'
	export default {
		components: {
			"m-city": gkcity,
			tabs
		},
		data() {
			return {
				buyshow: false,
				uoloadaction: '', // 非真实地址
				list: [],
				addresslength: null,
				imglistlength: null,
				address: '请选择所属地区', //页面所属区域
				Soonerorlater: 'morning',
				timecurrent: 0, //时间下标
				timeindex: 0,
				appointmentTimeList: [],
				timer: null,
				formdata: {
					address: null,
					patientId: null,
					patientName: null,
					cardNo: null,
					phone: null,
					address: null,
					doctorId: null,
					doctorName: null,
					schedulePlanDetailId: null,
					consultationType: 'VIDEO_CONSULTATION',
					problemDescription: null,
					situationDescription: null,
					problemStatement: null,
					medicalRecord: null,
					fileUrls: [],
					appointmentDate: null,
					appointmentStartTime: null,
					appointmentEndTime: null,
					orderChannel: "WECHAT_APPLET",
				},
				updatalist: {
					consultationInfoId: '',
					totalPrice: null,
					receiver: null,
					hospitalPersonId: null,
					hospitalPersonName: '',
					orderChannel: "WECHAT_APPLET",
					patientId: null,
					phone: null,
					healthAppointDate: null,
					appointmentStartTime: null,
					appointmentEndTime: null,


					// "healthConsultationContent": '',

				},
				id: '',
			};
		},
		onLoad(options) {
			let userinfo = uni.getStorageSync('userinfo');
			this.formdata.patientId = userinfo.id
			this.formdata.patientName = userinfo.patientName
			this.formdata.cardNo = userinfo.cardNo
			this.formdata.phone = userinfo.phone
			this.formdata.doctorName = options.doctorName
			this.formdata.doctorId = options.doctorId
			this.formdata.price = options.price
			this.uoloadaction = baseurl + '/nurseApplet/consultationInfo/uploadConsultationFile'
			this.areaInfo();
			this.getListByDoctorinfo();
		},
		onShow() {},
		methods: {
			//切换上下午
			tapSoonerorlater(item) {
				this.Soonerorlater = item
				this.timeindex = 0
				if (item == 'morning') {
					this.formdata.appointmentStartTime = this.appointmentTimeList[this.timecurrent].morningList[0]
						.starttime
					if (this.appointmentTimeList[this.timecurrent].morningList[0].status == true) {
						this.formdata.schedulePlanDetailId = this.appointmentTimeList[this.timecurrent].morningList[0]
							.schedulePlanDetailId

					} else {
						this.formdata.schedulePlanDetailId = ''

					}
				} else if (item == 'after') {
					this.formdata.appointmentEndTime = this.appointmentTimeList[this.timecurrent].morningList[0]
						.endtime
					if (this.appointmentTimeList[this.timecurrent].morningList[0].status == true) {
						this.formdata.schedulePlanDetailId = this.appointmentTimeList[this.timecurrent].afternoonList[0]
							.schedulePlanDetailId

					} else {
						this.formdata.schedulePlanDetailId = ''

					}

				}
			},
			//选择时间
			taptime(item, index) {
				this.formdata.appointmentStartTime = item.starttime
				this.formdata.appointmentEndTime = item.endtime
				this.formdata.schedulePlanDetailId = item.schedulePlanDetailId
				this.timeindex = index
			},
			timechange(index) {
				this.formdata.appointmentDate = this.appointmentTimeList[index].scheduleDate
				if (this.timecurrent != index) {
					this.timecurrent = index
					this.timeindex = 0
					this.formdata.appointmentStartTime = this.appointmentTimeList[this.timecurrent].morningList[0]
						.starttime
					this.formdata.appointmentEndTime = this.appointmentTimeList[this.timecurrent].morningList[0]
						.endtime
					if (this.appointmentTimeList[this.timecurrent].morningList[0].status == true) {
						this.formdata.schedulePlanDetailId = this.appointmentTimeList[this.timecurrent].morningList[0]
							.schedulePlanDetailId

					} else {
						this.formdata.schedulePlanDetailId = ''

					}
				}
			},
			updata() {
				if (this.imglistlength > 0) {
					this.$refs.uUpload.upload()
				} else {
					this.info();
				}
			},
			onchoosecomplete(lists, name) {
				this.imglistlength = lists.length
			},
			onsuccess(data, index, lists, name) {
				if (data.code == 200) {
					this.formdata.fileUrls.push(data.fileUrl)
				}
			},
			onuploaded() {
				this.info();
			},
			// 支付
			buy() {
				var that = this
				that.updatalist.hospitalPersonId = that.formdata.doctorId
				that.updatalist.hospitalPersonName = that.formdata.doctorName
				that.updatalist.totalPrice = that.formdata.price
				that.updatalist.receiver = that.formdata.patientName
				that.updatalist.patientId = that.formdata.patientId
				that.updatalist.phone = that.formdata.phone
				that.updatalist.healthAppointDate = that.formdata.appointmentDate
				that.updatalist.appointmentStartTime = that.formdata.appointmentStartTime
				that.updatalist.appointmentEndTime = that.formdata.appointmentEndTime
				addHealthConsultationOrder(that.updatalist).then(res => {
					res.data.payType = "WECHAT_PAY"
					res.data.paymentPrice = res.data.totalPrice
					res.data.openid = uni.getStorageSync('openid');
					that.id = res.data.id
					appletGoodsOrderPay(res.data).then(response => {
						if (response.code == 200) {
							uni.requestPayment({
								timeStamp: response.data.timeStamp,
								nonceStr: response.data.nonceStr,
								package: response.data.prepayId,
								signType: response.data.signType,
								paySign: response.data.paySign,
								success: function(res) {
									pushMeg({
										orderId: item.goodsOrderId,
										patientId: item.patientId
									}).then(respp => {
										that.$refs.uToast.show({
											title: '支付成功',
											type: 'success',
											duration: 1500,
										})
										if (that.timer) {
											clearTimeout(that.timer)
										}
										that.timer = setTimeout(e => {
											uni.redirectTo({
												url: '/pagesB/paysuccess/paysuccess'
											})
										}, 1500)
									})
								},
								fail: function(err) {
									that.$refs.uToast.show({
										title: '取消支付',
										type: 'error',
										duration: 1500,
									})
									if (that.timer) {
										clearTimeout(that.timer)
									}
									that.timer = setTimeout(e => {
										uni.redirectTo({
											url: `/pagesB/orderDetails/orderDetails?goodsOrderId=${that.id}&delta=${2}`
										})
									}, 1500)
								}
							});
						} else {
							that.$refs.uToast.show({
								title: response.msg,
								type: 'error',
								duration: 2000
							})
						}
					})
				})
			},
			// 保存
			info() {
				consultationInfo(this.formdata).then(res => {
					if (res.code == 200) {
						this.buyshow = true
						this.updatalist.consultationInfoId = res.data.id
					} else if (res.code == 500) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
							duration: 1500,
						})
					}
				})
			},
			getListByDoctorinfo() {
				getListByDoctor(this.formdata.doctorId).then(res => {
					res.data.forEach(e => {
						e.dates = e.scheduleDate.slice(5, 10)
						e.name = e.week
						e.morningList.length > 0 ? e.morningList.forEach(el => {
							el.starttime = el.scheduleTimeSlot.split('~')[0]
							el.endtime = el.scheduleTimeSlot.split('~')[1]
						}) : ''
						e.afternoonList.length > 0 ? e.afternoonList.forEach(el => {
							el.starttime = el.scheduleTimeSlot.split('~')[0]
							el.endtime = el.scheduleTimeSlot.split('~')[1]
						}) : ''
					})
					this.formdata.appointmentDate = res.data[0].scheduleDate
					res.data[0]?.morningList[0]?.starttime ? this.formdata.appointmentStartTime = res.data[0]
						.morningList[0].starttime : ''
					res.data[0]?.morningList[0]?.endtime ? this.formdata.appointmentEndTime = res.data[0]
						.morningList[0].endtime : ''
					if (res.data[0]?.morningList[0]?.status == true) {
						res.data[0]?.morningList[0]?.scheduleDetailId ? this.formdata.scheduleDetailId = res.data[
								0]
							.morningList[0].scheduleDetailId : ''

					} else {
						this.formdata.scheduleDetailId = ''

					}


					this.appointmentTimeList = res.data
					console.log(this.appointmentTimeList, '0000')
				})
			},
			// 显示三级地址联动
			showPicker() {
				this.$refs.cityPicker.show();
			},
			//区街道
			areaInfo() {
				getSubordinateRegions().then(res => {
					this.list = res.data;
				})
			},
			// 三级地址联动回调
			getpickerParentValue(e) {
				e = e.filter(ele => ele.localName != '暂不选择')
				e = e.filter(ele => ele.localName != '暂无需选择')
				this.addresslength = e
				this.formdata.address = ''
				this.address = ''
				if (e && e.length >= 1) {
					e.forEach(el => {
						this.formdata.address = this.formdata.address + el.localName
						this.address = this.address + el.localName
					})
				} else {
					this.formdata.address = ''
					this.address = '请选择所属地区'
				}
			},
		}
	}
</script>

<style lang="scss">
	@import './confirmation.scss';
</style>