nurseWeChatAppletUI/pages/Informationconfirmation/Informationconfirmation.vue

<template>
	<view class="app">
		<view class="user">
			<view class="item">
				<span>姓名：</span>
				<span class='addition'>111</span>
			</view>
			<view class="item">
				<span>电话：</span>
				<span class='addition'>111</span>
			</view>
			<view class="addressitem">
				<view class="leftaddress">地址：</view>
				<view class='addition'>111</view>
			</view>
			<view class="item" style="border: 0;">
				<span>时间：</span>
				<span class='addition'>请选择</span>
			</view>
			<view class="worditem">
				<view class="today">
					<span class="todaytime">今天
					</span>
					<span class="time">02-10</span>
				</view>
				<view class="today">
					<span class="todaytime">今天
					</span>
					<span class="time">02-10</span>
				</view>
				<view class="today">
					<span class="todaytime">今天
					</span>
					<span class="time">02-10</span>
				</view>
				<view class="today">
					<span class="todaytime">今天
					</span>
					<span class="time">02-10</span>
				</view>
			</view>
			<view class="worditem" style="margin-top: 3%;">
				<view class="today">
					<span class="todaytime">今天
					</span>
					<span class="time">02-10</span>
				</view>
				<view class="today">
					<span class="todaytime">今天
					</span>
					<span class="time">02-10</span>
				</view>
				<view class="today">
					<span class="todaytime">今天
					</span>
					<span class="time">02-10</span>
				</view>
				<view class="today">
					<span class="todaytime">今天
					</span>
					<span class="time">02-10</span>
				</view>
			</view>
		</view>
		<view class="remarks">
			<span>咨询内容：</span>
			<input placeholder="请在此输入">
			<!-- <input type="text" placeholder="请在此输入"> -->
		</view>
		<view class="bottomitem">
			<span>298￥</span>
			<view class="submit" @tap='show=true'>确认</view>
		</view>
		<!-- 弹框 -->
		<view class="frame">
			<u-popup v-model="show" mode="bottom" length="45%" border-radius="30">
				<view class="payment">
					<span>请选择支付方式</span>
					<view class="cencel" @tap="show = false">
						<image src="../../static/gb.png" mode=""></image>
					</view>
				</view>
				<view class="chat">
					<image src="/static/chat.png" mode=""></image>
					<span>微信支付</span>
				</view>
				<view class="submits" @tap='buy'>
					<span>确认支付</span><span>￥298</span>
				</view>
			</u-popup>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	export default {

		data() {
			return {
				show: false,
			}
		},

		methods: {

		}
	}
</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;
				justify-content: space-around;

				.today {

					width: 147rpx;
					height: 90rpx;
					text-align: center;
					font-size: 26rpx;
					background: #FEF9F8;
					border: 1rpx solid #F44B2F;
					border-radius: 5rpx;


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

					.todaytime {
						font-size: 26rpx;
						display: block;
						height: 30rpx;
						line-height: 55rpx;
					}
				}
			}
		}

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

			position: relative;
			padding: 3%;

			input {
				position: absolute;
				top: 25%;
				width: 77%;
				transform: translateY(-50%);
			}
		}

		.bottomitem {
			width: 750rpx;
			height: 132rpx;
			background: #FFFFFF;
			bottom: 0%;
			position: fixed;
			padding: 5%;

			span {
				// margin-left: 3%;
				// margin-top: 3%;
				font-size: 48rpx;
				color: #F44B2F;
				// line-height: 75rpx;
			}

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

		// 弹框支付
		.payment {
			width: 390px;
			height: 130rpx;
			font-size: 42rpx;
			color: #000000;
			line-height: 130rpx;
			text-align: center;
			// margin: 0 auto;

			border-bottom: 1rpx solid #D8D4D4;
			display: flex;

			span {
				margin-left: 30%;
			}

			.cencel {
				margin-left: 20%;

				image {
					width: 31rpx;
					height: 31rpx;
				}
			}


		}

		.chat {
			span {
				display: block;
				height: 68rpx;
				font-size: 42rpx;
				color: #000000;
				line-height: 68rpx;
				margin-left: 25%;
				margin-top: -10%;
			}

			image {
				width: 79rpx;
				height: 69rpx;
				margin-top: 7%;
				padding-left: 10%;
			}
		}

		.submits {
			background: #F44B2F;
			width: 501rpx;
			height: 71rpx;
			line-height: 71rpx;
			// background: #4C7BC9;
			border-radius: 36rpx;
			font-size: 34rpx;
			color: #FFFFFF;
			text-align: center;
			margin: 0 auto;
			margin-top: 25%;
		}
	}
</style>