NurseStationApp/pages/appointmenttime/appointmenttime.vue

<template>
	<view class="app">
		<view class="message">请填写下面的信息</view>
		<view class="user">
			<view class="item">
				<span>姓名：</span>
				<span>{{personInfo.patientName}}</span>
			</view>
			<view class="item">
				<span>电话：</span>
				<span>{{personInfo.phone}}</span>
			</view>

			<view class="item">
				<span>地址：</span>
				<span>{{personInfo.address}}</span>
			</view>
			<view class="selecttime" @tap='timeshow2=true'>
				<span>时间：</span>
				<text v-if="usertime==''">请选择时间</text>
				<text v-else>{{usertime}}</text>
				<image src="../../static/jiantou.png"></image>
			</view>
		</view>
		<view class="remarks">
			服务时长:{{orderlist.serveDurationUnit}}
		</view>

		<view class="Package">套餐信息：
			<text class="money">￥{{orderlist.nurseItemPrice}}</text>
			<text class="detail">
				·{{orderlist.nurseItemName}}
			</text>
		</view>
		<view class="Consumablespackage">耗材包详情：
			<text class="money">￥{{orderlist.consumableTotalPrice}}</text>
			<text class="detail">
				{{orderlist.itemConsumableList}}
			</text>
		</view>
		<view class="remarks">
			<span>备注：</span>
			<input placeholder="">
		</view>
		<view class="radio-content">
			<view class="radio-right">
				<view class="radio" :class="radio1 == 2 ? 'radio-default':''" @tap="changeRadio2">
					<view :class="radio1 == 2 ? 'radio-active':''"></view>
				</view>
			</view>
			<text class="agreement" @tap="changeRadio2">我已阅读并同意</text>
			<text @tap='maskshow=true;showRegectAgreeButton=false'>《用户协议》</text>
		</view>
		<view class="priceback">
			<view class="prices">￥{{orderlist.totalPrice}}</view>
			<view class="xiugai">修改信息</view>
			<view class="queren" @tap='updata'>确认预约</view>
		</view>
		<u-toast ref="uToast" />
		<u-picker @confirm='confirm2()' mode="time" v-model="timeshow2" start-year='2022' :params="params2">
		</u-picker>
		<u-picker @confirm='confirm3()' mode="time" v-model="timeshow3" start-year='2022' :params="params3">
		</u-picker>
		<u-picker @confirm='confirm4()' mode="time" v-model="timeshow4" start-year='2022' :params="params4">
		</u-picker>
	</view>
</template>
<script>
	import {
		getAppStationItemInfo,
		getAppPatientList,
		submitAppointment
	} from '@/api/appointmenttime/appointmenttime.js'
	import baseurl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				params2: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				timeshow2: false,
				timeshow3: false,
				timeshow4: false,
				maskshow: false,
				orderlist: {
					"patientId": '',
					"stationId": 2,
					"stationItemId": 2,
					"stationItemPriceId": 3,
					"serviceAddress": "",
					"serviceDate": "",
					"serviceStartTime": "",
					"serviceEndTime": "",
					"nurseItemName": "",
					"nurseItemPrice": '',
					"serveDurationUnit": "",
					"consumableTotalPrice": '',
					"totalPrice": '',
					"remark": "",
					"orderCount": 1,
					"orderConsumableList": []
				},
				maskshow: false,
				userlist: [],
				userid: '',
				patientId: 46,
				phone: '',
				patientName: '',
				address: '',
				usertime: '',
				maskshow: false,
				radio1: 1,
				stationId: 2,
				stationItemId: 2,
				stationItemPriceId: 3,
				getinfolist: {}, //服务时长
				listInfo: [],
				username: "",
				userAddress: "",
				userphoneList: [],
				useraddressList: [],
				personInfo: [],
			}
		},
		onLoad(options) {
			console.log(options)
			//获取护理站id等信息
			this.orderlist.stationId = options.stationId
			this.orderlist.stationItemId = options.stationItemId
			this.orderlist.stationItemPriceId = options.stationItemPriceId
			//耗材包详情方法调用
			this.getPatientInfo(options.stationId, options.stationItemId, options.stationItemPriceId)
		},
		methods: {
			getInfo() { //被护理人信息
				getAppPatientList(this.patientId).then(res => {
					this.personInfo = res.data[0]
					console.log("this.personInfo", this.personInfo);
					this.orderlist.patientId = res.data[0].patientId
					this.orderlist.serviceAddress = res.data[0].address

				})
			},

			//获取耗材包详情
			getPatientInfo(stationId, stationItemId, stationItemPriceId) {
				getAppStationItemInfo(stationId, stationItemId, stationItemPriceId).then(res => {
					console.log(res)
					this.orderlist = res.data
					//被护理人信息
					this.getInfo()
				})
			},
			//确认预约
			updata() {
				this.orderlist.orderCount = 1;
				// console.log(this.orderlist)
				submitAppointment(this.orderlist).then(res => {

					}

				)
			},
			confirm2(e) {
				console.log(e);
				this.timeshow3 = true;
				this.orderlist.serviceDate = e.year + '-' + e.month + '-' + e.day
				this.usertime = e.year + '年' + e.month + '月' + e.day + '日'
			},
			confirm4(e) {
				console.log(e)
				this.usertime = this.usertime + e.hour + ":" + e.minute
				this.orderlist.serviceEndTime = e.hour + ":" + e.minute
			},
			confirm3(e) {
				console.log(e)
				var sep = '\xa0  \xa0';
				this.usertime = this.usertime + sep + e.hour + ":" + e.minute + '至'
				console.log(this.orderlist)
				this.orderlist.serviceStartTime = e.hour + ":" + e.minute
				console.log(this.orderlist)
				this.timeshow4 = true;
			},



			changeRadio2() {
				this.radio1 = 2;
				// console.log("个人")
			},
			// changeRadio2() {
			// 	this.radio1 = 2;
			// 	// console.log("个人")
			// 	this.maskshow = true;
			// },

			timeconfirm(e) {
				console.log(e);
				// this.orderlist.serviceDate = e.year + '-' + e.month + '-' + e.day
				// this.usertime = e.year + '年' + e.month + '月' + e.day + '日'
			},
		}
	}
</script>
<style lang="scss">
	.app {
		.money {
			font-size: 32rpx;
			color: #D43953;
			margin-left: 90%;
		}

		font-size: 36rpx;
		padding-top: 10rpx;

		.user {
			background: #FFFFFF;
			width: 94%;
			margin: 10rpx auto;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 20rpx;
			line-height: 93rpx;

			.selecttime {
				height: 93rpx;
				margin-left: 3%;

				text {
					font-size: 34rpx;
					color: #878987;
				}

				image {
					width: 18rpx;
					height: 27rpx;
					margin-left: 50%;
				}
			}

			.item {
				width: 97%;
				height: 93rpx;
				border-bottom: 1rpx solid #D8D4D4;
				margin-left: 3%;

			}
		}

		.remarks {
			width: 94%;
			height: 382rpx;
			margin: 10rpx auto;
			padding: 3%;
			font-size: 35rpx;
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 3%;
		}

		.priceback {

			width: 99%;
			height: 141rpx;
			background: #FFFFFF;
			margin-top: 10%;
			display: flex;

			.prices {
				font-size: 54rpx;
				color: #D43953;
				line-height: 73rpx;
				margin-top: 5%;
			}

			.xiugai {
				width: 205rpx;
				height: 71rpx;
				background: #E1AE3C;
				border-radius: 26rpx;
				margin-left: 35%;
				margin-top: 5%;
				line-height: 71rpx;
				text-align: center;
				color: #ffffff;
			}

			.queren {
				width: 227rpx;
				height: 71rpx;
				background: #4C7BC9;
				border-radius: 26rpx;
				margin-top: 5%;
				line-height: 71rpx;
				text-align: center;
				color: #ffffff;

			}
		}

		// 同意协议
		.radio-content {
			height: 80rpx;
			line-height: 2rpx;
			font-size: 34rpx;

			.radio {
				width: 34rpx;
				height: 34rpx;
				border-radius: 70%;
				border: 2rpx solid #178ffb;
			    margin: 6px 25px -10px -10px;
			}

			.agreement {
				font-size: 34rpx;
				color: #878987;
				    margin-left: 14%;
			}

			.radio-right {
				margin-left: 66rpx;

				/* 同意协议 */
				.radio-active {
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background-color: #178ffb;
				}

				.radio-default {
					border: 2rpx solid #0fbda6;
				}
			}
		}

		/* 耗材包 */
		.Consumablespackage {
			width: 94%;
			height: 188rpx;
			;
			margin: 10rpx auto;
			padding: 3%;
			font-size: 35rpx;
			height: 188rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 3%;

			.detail {
				width: 301rpx;
				height: 31rpx;
				line-height: 31rpx;
				font-size: 33rpx;
				color: #666666;
				line-height: 31rpx;
				margin-left: 20%;
			}



		}

		/* 套餐 */
		.Package {
			width: 94%;
			height: 243rpx;
			;
			margin: 10rpx auto;
			padding: 3%;
			font-size: 35rpx;
			height: 243rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 3%;

			.detail {
				width: 301rpx;
				height: 31rpx;
				line-height: 31rpx;
				font-size: 33rpx;
				color: #666666;
				line-height: 31rpx;
				margin-left: 20%;
			}


		}

		.message {
			width: 94%;
			height: 96rpx;
			background: white;
			border-radius: 20rpx;
			margin: 0 auto;
			text-align: center;
			line-height: 96rpx;
		}
	}
</style>