nurseWeChatAppletUI/pages/appointmenttime/appointmenttime.vue

<template>
	<view class="app">
		<view class="user">
			<view class="item">
				<span>姓名：</span>
				<span class='addition'>{{personInfo.patientName}}</span>
			</view>
			<view class="item">
				<span>电话：</span>
				<span class='addition'>{{personInfo.phone}}</span>
			</view>
			<view class="addressitem">
				<view class="leftaddress">地址：</view>
				<view class='addition'>{{personInfo.address}}</view>
			</view>
			<view class="item" style="border: 0;">
				<span>上门时间：</span>
				<span class='addition'>请您选择希望护理员到达的时间</span>
			</view>
			<tabs :list="orderlist.appointmentTimeList" :current="timecurrent" @change="timechange">
			</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 orderlist.appointmentTimeList[timecurrent].morningList"
							:class="timeindex==index?'timeitemtap':'timeitem'">
							{{item}}
						</view>
					</view>
					<view class="items" v-if="Soonerorlater=='after'">
						<view @tap='taptime(item,index)'
							v-for="(item ,index) in orderlist.appointmentTimeList[timecurrent].afternoonList"
							:class="timeindex==index?'timeitemtap':'timeitem'">
							{{item}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="remarks">
			服务时长:
			<span style='padding-left: 30rpx;' class='addition'>{{orderlist.serveDurationUnit}}</span>
		</view>
		<view class="Package">套餐信息：
			<text class="money">￥{{orderlist.nurseItemPrice}}</text>
			<text class="detail">
				{{orderlist.nurseItemName}}
			</text>
		</view>
		<view class="Consumablespackage">耗材包详情：
			<text class="money">￥{{consumableTotalPrice}}</text>
			<view class="detail">
				<u-checkbox-group @change="checkboxGroupChange" :wrap='true'>
					<u-checkbox @change="checkboxChange(item)" v-model="item.radio"
						v-for="(item, index) in orderlist.itemConsumableList" :key="index"
						:name="item.consumableDetail">
						<view class='itemConsumabletitle'> {{item.consumableDetail}}</view>
						<span>{{item.consumableCount}}{{item.consumableUnit}}/￥{{item.consumablePrice}}</span>
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		<view class="Package" style="height: 170rpx;">
			是否失能
			<span style='color:#F44B2F;padding-left: 10rpx;'>*</span>
			<span style='color:#C5C3C3;padding-left: 10rpx;font-size: 30rpx;'>(请选择)</span>
			<view class="checkboxs">
				<u-checkbox-group @change="checkboxGroupChangetwo">
					<u-checkbox @change="checkboxChangetwo(item)" v-model="item.checked" size='40' shape="circle"
						v-for="(item, index) in checkboxlist" :key="index" :name="item.name">{{item.name}}</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		<view class="remarks" v-if="disablingCondition == 'DISABLED'">
			<span class='span' style='width: 25%;'>失能情况
				<span style='color:#F44B2F;padding-left: 10rpx;'>*</span></span>
			<input style="left:27%;width: 73%;" placeholder="请输入" v-model="personInfo.disablingReason">
		</view>
		<view class="remarks">
			<span class='span'>备注：</span>
			<input placeholder="请输入" v-model="orderlist.remark">
		</view>
		<view class="radio-content">
			<view class="radio-right" @tap="changeRadio">
				<view class="radio" :class="radio == 2 ? 'radio-default':''">
					<view :class="radio == 2 ? 'radio-active':''"></view>
				</view>
			</view>
			<view class="agreement">我已阅读并同意<text @tap='maskshow=true'
					style="color: #000000;border-bottom: 1rpx solid #000000;">《用户协议》</text></view>
		</view>
		<view class="priceback">
			<view class="prices">￥{{orderlist.totalPrice}}</view>
			<view class="xiugai" @tap='goaddress'>修改信息</view>
			<view class="queren" @tap='updata'>确认预约</view>
		</view>
		<u-toast ref="uToast" />
		<!-- //用户协议 -->
		<u-mask :show="maskshow" class='mask' @click='maskshow=false'>
			<view class="Agreement">
				<view class="title">
					护理站上门服务知情同意书
				</view>
				<scroll-view scroll-y="true" class="scroll-Y" style="">
					<appointmenttext></appointmenttext>
				</scroll-view>
				<view class="cancel" @tap='maskshow=false'>
					取消
				</view>
				<view class="determine" @tap='tapradio'>
					确定并同意
				</view>
			</view>
		</u-mask>
	</view>
</template>
<script>
	import {
		getAppStationItemInfo,
		getAppPatientList,
		submitAppointment,
		appletAppointmentOrderPay
	} from '@/api/appointmenttime/appointmenttime.js'
	import baseurl from '@/api/baseurl.js'
	import appointmenttext from '../../components/appointmenttimetext.vue'
	import tabs from '../utabs/u-tabs.vue'
	export default {
		components: {
			appointmenttext,
			tabs
		},
		data() {
			return {
				Soonerorlater: 'morning',
				timecurrent: 0, //时间下标
				openid: '',
				maskshow: false, //用户协议开关
				radio: 1, //用户协议
				personInfo: {}, //用户信息
				patientId: null,
				useritem: null, //optionsuser信息
				consumableTotalPrice: 0, //耗材包总价格
				disablingCondition: undefined, //是否失能
				orderlist: {
					disablingCondition: undefined,
					orderCount: 1,
					patientId: '',
					stationId: '',
					stationItemId: '',
					stationItemPriceId: '',
					serviceAddress: "",
					serviceDate: "",
					serviceStartTime: null,
					serviceEndTime: "",
					nurseItemName: "",
					nurseItemPrice: '',
					serveDurationUnit: "",
					consumableTotalPrice: '',
					totalPrice: '',
					remark: "",
					disablingReason: '',
					orderConsumableList: [],
					orderChannel: '',
				},
				timeindex: 0,
				checkboxlist: [{
						name: '是',
						checked: false,
					},
					{
						name: '否',
						checked: false,
					}
				]
			}
		},
		onShow() {
			let that = this
			uni.$on('updata', function(data) {
				if (data.updata) {
					that.orderlist = JSON.parse(data.updata)
				}
				if (data.useritem) {
					that.useritem = JSON.parse(data.useritem)
					that.orderlist.serviceAddress = that.useritem.address
					that.personInfo.patientName = that.useritem.receiveName
					that.personInfo.phone = that.useritem.receivePhone
					that.personInfo.address = that.useritem.address
				} else {}
				uni.$off('updata')
			})
		},
		onLoad(options) {
			var that = this
			const value = uni.getStorageSync('openid');
			if (value) {
				that.openid = value
			}
			this.userinfo();
			//耗材包详情方法调用
			this.getPatientInfo(options.stationId, options.stationItemId, options.stationItemPriceId)
		},
		methods: {
			//切换上下午
			tapSoonerorlater(item) {
				this.Soonerorlater = item
				this.timeindex = 0
				if (item == 'morning') {
					this.orderlist.serviceStartTime = this.orderlist.appointmentTimeList[this.timecurrent].morningList[0]
				} else if (item == 'after') {
					this.orderlist.serviceStartTime = this.orderlist.appointmentTimeList[this.timecurrent].afternoonList[0]
				}
			},
			//选择时间
			taptime(item, index) {
				this.orderlist.serviceStartTime = item
				this.timeindex = index
			},
			userinfo() {
				//取出patientId
				var that = this
				const value = uni.getStorageSync('patientId');
				if (value) {
					that.patientId = value
					//被护理人信息
					getAppPatientList(that.patientId).then(response => {
						if (response.data.disablingCondition == 'DISABLED') {
							that.checkboxlist[0].checked = true
							that.disablingCondition = 'DISABLED'
						} else {
							that.checkboxlist[1].checked = true
							that.disablingCondition = 'NOT_DISABLED'
						}
						that.personInfo = response.data
						that.personInfo.address = response.data.areaName + response.data.address
					})
				}
			},
			timechange(index) {
				this.orderlist.serviceDate = this.orderlist.appointmentTimeList[index].date
				this.timecurrent = index
			},
			//获取耗材包详情
			getPatientInfo(stationId, stationItemId, stationItemPriceId) {
				getAppStationItemInfo(stationId, stationItemId, stationItemPriceId).then(res => {
					res.data.nurseItemContent = ''
					if (res.code == 200) {
						if (res.data.itemConsumableList) {
							res.data.itemConsumableList.forEach(e => {
								e.radio = true
							})
						}
						res.data.appointmentTimeList.forEach(e => {
							e.dates = e.date.slice(5, 10)
							e.name = e.week
						})
						this.orderlist = res.data
						this.orderlist.serviceStartTime = res.data.appointmentTimeList[0].morningList[0]
						this.orderlist.serviceDate = res.data.appointmentTimeList[0].date
						this.consumableTotalPrice = res.data.consumableTotalPrice
						this.orderlist.orderCommissionAmount = res.data.commissionAmount
						this.orderlist.disablingCondition = this.personInfo.disablingCondition
					}
				})
			},
			//确认预约
			updata() {
				var that = this
				if (this.radio == 1) {
					this.$refs.uToast.show({
						title: '请阅读用户协议并同意',
						type: 'error',
					})
					this.maskshow = true
				} else {
					this.orderlist.orderCount = 1;
					this.orderlist.orderConsumableList = []
					if (this.orderlist.itemConsumableList) {
						this.orderlist.itemConsumableList.forEach(e => {
							if (e.radio) {
								this.orderlist.orderConsumableList.push(e)
							}
						})
					}
					this.orderlist.consumableTotalPrice = null
					this.orderlist.orderChannel = 'WECHAT_APPLET'
					this.orderlist.disablingReason = this.personInfo.disablingReason
					this.orderlist.afternoonOpenEndTime = this.orderlist.afternoonOpenEndTime.slice(0, 5)
					this.orderlist.afternoonOpenStartTime = this.orderlist.afternoonOpenStartTime.slice(0, 5)
					this.orderlist.morningOpenEndTime = this.orderlist.morningOpenEndTime.slice(0, 5)
					this.orderlist.morningOpenStartTime = this.orderlist.morningOpenStartTime.slice(0, 5)
					this.orderlist.patientId = this.patientId
					this.orderlist.serviceAddress = this.personInfo.address
					this.orderlist.disablingCondition = this.disablingCondition
					if (this.orderlist.disablingCondition == 'NOT_DISABLED') {
						this.orderlist.disablingReason = null
					}
					submitAppointment(this.orderlist).then(res => {
						if (res.code == 500) {
							that.$refs.uToast.show({
								title: res.msg,
								type: 'error',
							})
						} else if (res.code == 200) {
							let obj = {
								patientId: res.data.patientId,
								openid: that.openid,
								orderNo: res.data.orderNo,
								orderChannel: res.data.orderChannel,
								paymentPrice: res.data.totalPrice,
								payType: "WECHAT_PAY",
								buySource: "NURSE_STATION",
							}
							appletAppointmentOrderPay(obj).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) {
											that.$refs.uToast.show({
												title: '预约成功',
												type: 'success',
												duration: 1500,
												url: `/pages/paysuccess/paysuccess`
											})
										},
										fail: function(err) {
											that.$refs.uToast.show({
												title: '取消预约',
												type: 'error',
												duration: 1500,
												url: `/pages/menttimeorder/menttimeorder?list=${JSON.stringify(obj)}`
											})
										}
									});
								} else {
									that.$refs.uToast.show({
										title: response.msg,
										type: 'error',
										duration: 2000
									})
								}
							})
						}
					})
				}
			},
			changeRadio() {
				if (this.radio == 1) {
					this.radio = 2;
				} else {
					this.radio = 1;
				}
			},
			tapradio() {
				this.radio = 2;
				this.maskshow = false
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				if (e.radio) {
					this.orderlist.totalPrice = this.argSubtr(this.orderlist.totalPrice, e.consumablePrice)
				} else {
					this.orderlist.totalPrice = this.argAdd(this.orderlist.totalPrice, e.consumablePrice)
				}
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChangetwo(e) {
				this.checkboxlist.forEach(e => {
					e.checked = false
				})
				e.checked = true
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChangetwo(e) {
				if (e[0] == '是') {
					this.disablingCondition = 'DISABLED'
				} else {
					this.disablingCondition = 'NOT_DISABLED'
				}
				this.orderlist.disablingCondition = this.disablingCondition
			},
			argAdd(arg1, arg2) {
				// 加法函数
				var _this = this,
					r1 = 0,
					r2 = 0,
					m = 0;
				try {
					r1 = arg1.toString().split(".")[1].length
				} catch (e) {}
				try {
					r2 = arg2.toString().split(".")[1].length
				} catch (e) {}
				m = Math.pow(10, Math.max(r1, r2))
				return _this.argDiv((_this.argMul(arg1, m) + _this.argMul(arg2, m)), m)
			},
			argSubtr(arg1, arg2) {
				// 减法函数
				var _this = this,
					r1 = 0,
					r2 = 0,
					m = 0;
				try {
					r1 = arg1.toString().split(".")[1].length
				} catch (e) {}
				try {
					r2 = arg2.toString().split(".")[1].length
				} catch (e) {}
				m = Math.pow(10, Math.max(r1, r2));
				return _this.argDiv((_this.argMul(arg1, m) - _this.argMul(arg2, m)), m)
			},
			argMul(arg1, arg2) {
				// 乘法函数
				var _this = this,
					m = 0,
					s1 = arg1.toString(),
					s2 = arg2.toString();
				try {
					m += s1.split(".")[1].length
				} catch (e) {}
				try {
					m += s2.split(".")[1].length
				} catch (e) {}
				return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
			},
			argDiv(arg1, arg2) {
				// 除法函数
				var _this = this,
					t1 = 0,
					t2 = 0,
					r1, r2;
				try {
					t1 = arg1.toString().split(".")[1].length
				} catch (e) {}
				try {
					t2 = arg2.toString().split(".")[1].length
				} catch (e) {}
				r1 = Number(arg1.toString().replace(".", ""))
				r2 = Number(arg2.toString().replace(".", ""))
				return _this.argMul((r1 / r2), Math.pow(10, t2 - t1));
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {},
			goaddress() {
				uni.navigateTo({
					url: `/pages/modifyAddress/modifyAddress?updata=${JSON.stringify(this.orderlist)}`
				})
			},
		}
	}
</script>
<style lang="scss">
	@import './appointmenttime.scss'
</style>