NurseStationApp/pages/appointmenttime/appointmenttime.vue

<template>
	<view class="content">
		<view class="message">请填写下面的信息</view>
		<view class="xinxi">
			<view class="user">
				<view class="item" @click='showNamePick'>
					<span class="texts">姓名：</span>
					<text v-if="patientName==''">请选择姓名</text>
					<text v-else>{{patientName}}</text>
					<!-- <text>某某某</text> -->
					<!-- <input type="text"> -->
					<!-- <u-input  /> -->
				</view>
				<view class="item" @tap='maskshow=true'>
					<span class="texts">电话：</span>
					<text v-if="phone==''">请选择电话</text>
					<text v-else>{{list.phone}}</text>
					<!-- <text>18888888888</text> -->
					<!-- <u-input  /> -->
				</view>

				<view class="item" @tap='maskshow=true'>
					<span class="texts">地址：</span>
					<text v-if="address==''">请填写地址</text>
					<text v-else>{{list.address}}</text>
					<!-- <u-input  /> -->
				</view>
				<view class="item1" @tap='timeshow2=true'>
					<span class="texts">时间：</span>
					<text v-if="usertime==''">请选择时间</text>

					<text v-else>{{list.usertime}}</text>
					<image src="../../static/jiantou.png"></image>
					<!-- <u-input  /> -->
				</view>
			</view>
		</view>



		<view>
			<view class="beizhu">
				服务时长:{{getinfolist.serveDurationUnit}}
			</view>
		</view>

		<view class="taocan">套餐信息：
			<text class="price">￥60</text>
			<view>
				<text class="qiguan">
					111
				</text>
			</view>
		</view>
		<view class="haocaibao">耗材包详情：
			<text class="price2">￥60</text>
			<view class="">
				<text class="qiguan">
					·一次性换药包X1，一次性注射器X1
				</text>
			</view>
		</view>
		<view class="beizhu">
			<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="price3">￥</view> -->
			<!-- <view class="Apayment"> -->
			<!-- <view class="zf"> -->
			<view class="prices">￥60</view>
			<!-- </view> -->
			<view class="xiugai">修改信息</view>
			<view class="queren" @tap='updata'>确认预约</view>
		</view>
		<u-toast ref="uToast" />
		<u-select v-model="showName" :list="listInfo" @confirm="confirm"></u-select>
		<u-picker @confirm='confirm2()' mode="time" v-model="timeshow2" start-year='2022' :params="params2">
			<!-- <view style="z-index:999;color:red" v-if="timeshow2">应付:{{orderlist.totalPrice}}元</view> -->
		</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,
		appointment
	} from '@/api/appointmenttime/appointmenttime.js'
	import baseurl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				params4: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false
				},
				params3: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false
				},
				params2: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					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: '',
				timeshow2: false,
				timeshow2: false,
				maskshow: false,
				radio1: 1,
				showName: false,
				stationId: 2,
				stationItemId: 2,
				stationItemPriceId: 3,
				getinfolist: {}, //服务时长
				listInfo: [],
			}
		},
		onLoad() {
			this.getInfo()
			this.getPatientInfo()

		},
		methods: {
			confirm(e) {
				// console.log(e);
				// this.username = e[0].label
				this.listInfo.patientName = e[0].patientName
			},
			getInfo() {
				getAppPatientList(this.patientId).then(res => {
					// this.list = res.data
					console.log(res.data);
					// this.listInfo = res.data
					this.listInfo = res.data.map((v, i) => {
						return {
							value: i,
							label: v.patientName
						}
					})
					// console.log(this.listInfo);
				})
			},
			getPatientInfo() {
				getAppStationItemInfo(this.stationId, this.stationItemId, this.stationItemPriceId).then(res => {
					this.getinfolist = res.data
					console.log("this.getinfolist", this.getinfolist);
				})
			},
			showNamePick() {
				this.showName = true
				// console.log(11);
			},
			// changeRadio2() {
			// 	this.radio1 = 2;
			// 	// console.log("个人")
			// 	this.maskshow = true;
			// },
			updata() {
				this.orderlist.orderCount = 1;
				// console.log(this.orderlist)
				appointment(this.orderlist).then(res => {
					if (res.code == 500) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
						})
					} else if (res.code == 200) {
						this.$refs.uToast.show({
							title: '预约成功',
							type: 'success',
							toast: 1000
						})
						setTimeout(() => {
							uni.reLaunch({
								url: `/pages/user/user`
							})
						}, 1000)
					}

				})
			},
			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;
			},
			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 + '日'
			},
			// confirm(e) {
			// 	console.log(e[0]);
			// 	var obj = this.userlist.map(el => {
			// 		if (el.patientId == e[0].value) {
			// 			return el
			// 		}
			// 	})
			// 	this.userAddress = obj[0].address
			// 	this.username = obj[0].patientName
			// 	this.orderlist.patientId = obj[0].patientId
			// 	this.orderlist.serviceAddress = obj[0].address
			// 	console.log(this.orderlist)
			// }
			// tapuser(item) {
			// 	console.log(item)
			// 	// this.userlist
			// 	this.userid = item.patientId
			// 	this.username = item.patientName
			// 	this.userAddress = item.address
			// 	this.maskshow = false
			// }
		}

	}
</script>

<style>
	.item1 image {
		width: 18rpx;
		height: 27rpx;
		/* float: right; */
		margin-left: 50%;
	}

	.radio-active {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #178ffb;

	}

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

	.radio {
		width: 34rpx;
		height: 34rpx;
		border-radius: 70%;
		border: 2rpx solid #178ffb;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 0rpx 26rpx 0rpx 15rpx;

	}

	.radio-content {
		height: 80rpx;
		display: flex;
		align-items: center;
		font-size: 34rpx;
		margin-bottom: 60rpx;

	}

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

	.text {
		color: #000000;
		margin-left: 1%;
		line-height: 100rpx;

	}

	.priceback {
		/* position: relative; */
		width: 99%;
		height: 141rpx;
		background: #FFFFFF;
		margin-top: 10%;
		display: flex;


	}

	.texts {
		/* margin-left: 5%; */
		/* padding: 3%; */

	}

	.item {
		width: 97%;
		height: 93rpx;
		/* line-height: 93rpx; */
		border-bottom: 1rpx solid #D8D4D4;
		/* margin-left: 10rpx; */
		margin-left: 3%;
		display: flex;
		align-items: center;
		font-size: 36rpx;
	}

	.item1 {
		width: 97%;
		height: 93rpx;
		/* line-height: 93rpx; */
		margin-left: 3%;
		display: flex;
		align-items: center;
		font-size: 36rpx;

	}

	.content {
		/* width: 100%; */
		height: 100%;
		background-color: #F4F5F7;
		padding: 3%;
	}

	.message {
		width: 99%;
		height: 96rpx;
		background: white;
		/* box-shadow: 0px 9px 31px 9px rgba(0,0,0,0.03); */
		border-radius: 20rpx;
		margin: 0 auto;
		text-align: center;
		line-height: 96rpx;
		/* margin-top: 5rpx; */
		font-size: 36rpx;
	}

	.xinxi {
		width: 99%;
		height: 400rpx;
		background: #FFFFFF;
		/* box-shadow: 0px 9px 31px 9px rgba(0,0,0,0.03); */
		border-radius: 20rpx;
		margin-top: 3%;
	}

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

	.name {
		width: 70%;
		/* height: 33rpx; */
		font-size: 36rpx;

		color: #666666;


	}

	.title {
		width: 90%;
		margin: 0 auto;
		font-size: 28rpx;
		padding-top: 20rpx;
		line-height: 34rpx;
		color: #000000;
		position: relative;
	}

	.taocan {
		padding: 3%;
		line-height: 12rpx;
		font-size: 35rpx;
		line-height: 70rpx;
		width: 702rpx;
		height: 243rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 3%;
	}

	.haocaibao {
		padding: 3%;
		line-height: 12rpx;
		font-size: 35rpx;
		line-height: 65rpx;
		width: 702rpx;
		height: 188rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 3%;
	}

	.beizhu {
		padding: 3%;
		line-height: 12rpx;
		font-size: 35rpx;
		line-height: 65rpx;
		width: 701rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 3%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

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

	.zf {
		/* margin-left: 10%; */
		/* margin-bottom: 5%; */
	}

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

	}

	.price {
		/* float: right; */

		font-size: 32rpx;
		color: #D43953;
		margin-left: 60%;
		/* line-height: 77px; */
	}

	.price2 {

		font-size: 32rpx;
		color: #D43953;
		margin-left: 56%;

	}


	.qiguan {
		width: 301rpx;
		height: 31rpx;
		line-height: 31rpx;
		font-size: 33rpx;
		/* font-family: Adobe Heiti Std; */
		/* font-weight: normal; */
		color: #666666;
		/* text-align: center; */
		line-height: 31rpx;
		margin-left: 20%;
	}
</style>