nurseWeChatAppletUI/pages/Informationconfirmation/Informationconfirmation.vue

<template>
	<view class="app">
		<view class="user">
			<view class="item">
				<span>姓名：</span>
				<span class='addition' v-if="userlist.patientName">{{userlist.patientName}}</span>
			</view>
			<view class="item">
				<span>电话：</span>
				<span class='addition' v-if="userlist.phone">{{userlist.phone}}</span>
			</view>
			<view class="item" style="border: 0;">
				<span>时间：</span>
				<span class='addition'>请选择</span>
			</view>
			<view class="worditem">
				<view class="today" @tap='todayindex=index'
					:style="todayindex==index?'background: #FEF9F8;border: 1px solid #F44B2F;color: #F44B2F;':''"
					v-for="(item,index) in userlist.appointmentTimeList" :key="index">
					<span class="todaytime">
						{{item.week}}
					</span>
					<span class="time">{{item.healthConsultationDate}}</span>
				</view>
			</view>
		</view>
		<view class="remarks">
			<span>咨询内容：</span>
			<u-input v-model="updata.healthConsultationContent" type="textarea" :clearable='false' />
		</view>
		<view class="bottomitem">
			<span>￥{{updata.totalPrice}}</span>
			<view class="submit" @tap='buyshow=true'>确认</view>
		</view>
		<!-- 弹框 -->
		<u-popup v-model="buyshow" mode="bottom" length="45%" border-radius="30" :closeable='true'>
			<view class="payment">
				请选择支付方式
			</view>
			<view class="chat">
				<image src="/static/chat.png" mode=""></image>
				<span>微信支付</span>
			</view>
			<view class="submits" @tap='buy'>
				确认支付￥{{updata.totalPrice}}
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	import {
		informationConfirmation,
		addHealthConsultationOrder
	} from '@/api/Informationconfirmation/index.js'
	export default {
		data() {
			return {
				buyshow: false,
				price: 0,
				userlist: {},
				todayindex: 0,
				updata: {
					"orderChannel": "WECHAT_APPLET",
					"patientId": null,
					"phone": null,
					"receiver": null,
					"healthAppointDate": null,
					"totalPrice": null,
					"hospitalPersonId": null,
					"healthConsultationContent": '',
				},
			}
		},
		methods: {
			buy() {
				addHealthConsultationOrder(this.updata).then(res => {
					console.log(res)
				})
			},
		},
		onShow() {},
		onLoad(options) {
			var that = this
			this.updata.totalPrice = Number(options.price)
			this.updata.hospitalPersonId = Number(options.hospitalPersonId)
			const value = uni.getStorageSync('patientId');
			if (value) {
				that.updata.patientId = value
				informationConfirmation(value).then(res => {
					that.userlist = res.data
					that.updata.phone = res.data.phone
					that.updata.receiver = res.data.patientName
					that.updata.healthAppointDate = res.data.appointmentTimeList[0].date
				})
			}
		}
	}
</script>
<style lang="scss">
	.app {
		font-size: 34rpx;
		padding-top: 10rpx;
		height: 100%;
		-webkit-overflow-scrolling: touch;

		.determine {
			height: 70rpx;
			line-height: 70rpx;
			font-size: 32rpx;
			width: 50%;
			color: #F4F5F7;
			background: #4C7BC9;
			position: absolute;
			bottom: 0;
			left: 0;
		}

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

			.addressitem {
				width: 97%;
				border-bottom: 1rpx solid #D8D4D4;
				margin-left: 3%;
				// height: 100%;

				.leftaddress {
					width: 15%;
					height: 100%;
					display: flex;
					display: inline-block;
				}

				.addition {
					color: #666666;
					display: inline-block;
					line-height: 50rpx;
					font-size: 28rpx;
				}
			}

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

				.addition {
					color: #666666;
					line-height: 30rpx;
					font-size: 28rpx;
				}
			}

			.worditem {
				display: flex;
				width: 100%;
				justify-content: flex-start;
				flex-wrap: wrap;

				.today {
					width: 20%;
					margin: 0 2.5% 0 2.5%;
					margin-top: 20rpx;
					height: 90rpx;
					text-align: center;
					font-size: 26rpx;
					border: 1px solid #DADADA;
					border-radius: 5rpx;

					.time {
						font-size: 26rpx;
						display: block;
						line-height: 40rpx;
					}

					.todaytime {
						padding-top: 5rpx;
						font-size: 26rpx;
						display: block;
						line-height: 40rpx;
					}
				}
			}
		}

		.remarks {
			width: 94%;
			margin: 10rpx auto;
			font-size: 34rpx;
			height: 440rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx 0 0 30rpx;
		}

		.bottomitem {
			width: 100%;
			height: 120rpx;
			background: #FFFFFF;
			bottom: 0;
			position: fixed;

			span {
				font-size: 48rpx;
				line-height: 120rpx;
				color: #F44B2F;
				margin: 0 0 0 30rpx;
			}

			.submit {
				width: 186rpx;
				height: 70rpx;
				background: #F44B2F;
				color: #FFFFFF;
				border-radius: 30rpx;
				line-height: 70rpx;
				text-align: center;
				font-size: 32rpx;
				float: right;
				margin: 25rpx 30rpx 0 0;
			}
		}

		// 弹框支付
		.payment {
			width: 100%;
			height: 130rpx;
			font-size: 42rpx;
			color: #000000;
			line-height: 130rpx;
			text-align: center;
			border-bottom: 1rpx solid #D8D4D4;
		}

		.chat {
			position: relative;
			height: 200rpx;

			span {
				position: absolute;
				top: 50rpx;
				left: 180rpx;
				line-height: 70rpx;
				font-size: 42rpx;
				color: #000000;
			}

			image {
				position: absolute;
				top: 50rpx;
				left: 70rpx;
				width: 80rpx;
				height: 70rpx;
			}
		}

		.submits {
			background: #F44B2F;
			width: 501rpx;
			height: 71rpx;
			line-height: 71rpx;
			border-radius: 36rpx;
			font-size: 34rpx;
			color: #FFFFFF;
			text-align: center;
			position: fixed;
			bottom: 50rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>