From 6647bacdfb6ccf9b3420c07197af7882d3bd8a2f Mon Sep 17 00:00:00 2001
From: shidongli <shidongli>
Date: Fri, 28 Oct 2022 10:05:28 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BE=85=E4=BB=98=E6=AC=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/tobePaid/tobePaid.vue | 199 ++++++++++++++++++++++++++++++++++++
 1 file changed, 199 insertions(+)
 create mode 100644 pages/tobePaid/tobePaid.vue

diff --git a/pages/tobePaid/tobePaid.vue b/pages/tobePaid/tobePaid.vue
new file mode 100644
index 0000000..a9277c7
--- /dev/null
+++ b/pages/tobePaid/tobePaid.vue
@@ -0,0 +1,199 @@
+<template>
+	<view class="app">
+		<view class="content">
+			<view class="name">
+				2022-10-11 15:44
+				<span>待付款</span>
+			</view>
+			<view class="details">
+				<view class="detailslist">
+					<image src="../../static/shangpingdingdan.png" mode=""></image>
+					<view class="model">
+						<view class="top">
+							<span>酒精棉片 200片</span>
+							<span>￥36.0</span>
+						</view>
+						<view class="bottom">
+							<span>型号：酒精棉片 8盒</span>
+							<span>×1</span>
+						</view>
+						<view class="price">
+							实付款：<span>￥36.0</span>
+						</view>
+						
+					</view>
+					
+				</view>
+				<view class="submit" @tap='show=true'>
+					去支付
+				</view>
+			</view>
+		</view>	
+		<!-- 弹框 -->
+			<u-popup v-model="show" mode="bottom" length="50%" 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='show=true'>
+					<span>确认支付</span><span>￥36元</span>
+				</view>
+			</u-popup>
+		</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				show:false
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss">
+	.app {
+		height: 100vh;
+		.content {
+			width: 95%;
+			height: 494rpx;
+			background: #FFFFFF;
+			box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
+			border-radius: 20px;
+			margin: 0 auto;
+			.name {
+				width: 95%;
+				height: 90rpx;
+				font-size: 30rpx;
+				color: #969394;
+				line-height: 90rpx;
+				border-bottom: 1rpx solid #D8D4D4;
+				margin: 0 auto;
+				span {
+					color: #4C7BC9;
+					float: right;
+				}
+				image {
+					width: 15rpx;
+					height: 23rpx;
+					padding-left: 25rpx;
+				}
+			}
+			.details {
+				height: 250rpx;
+				.detailslist {
+					display: flex;
+					image {
+						width: 182rpx;
+						height: 182rpx;
+						margin: 20rpx 0 0 20rpx;
+					}
+					.model {
+						width: 70%;
+						margin: 30rpx 0 0 20rpx;
+						span {
+							font-size: 38rpx;
+							color: #000000;
+						}
+						span:nth-child(2) {
+							color: #969394;
+							float: right;
+							margin-right: 30rpx;
+						}
+						.bottom {
+							margin-top: 20rpx;
+							span {
+								font-size: 35rpx;
+								color: #969394;
+							}
+						}
+						.price {
+							font-size: 30rpx;
+							color: #969394;
+							float: right;
+							margin: 35rpx 30rpx 60rpx 0;
+							span {
+								font-size: 41rpx;
+								color: #000000 ;
+							}
+						}
+						
+					}
+				}
+				.submit{
+					width: 175rpx;
+					height: 68rpx;
+					line-height: 68rpx;
+					background: #4C7BC9;
+					border-radius: 26rpx;
+					text-align: center;
+					font-size: 32rpx;
+					color: #FFFFFF;
+					float: right;
+					margin-right: 30rpx;
+				}
+
+			}
+		}
+		// 弹框支付
+		.payment {
+			width: 390px;
+			height: 130rpx;
+			font-size: 42rpx;
+			color: #000000;
+			line-height: 130rpx;
+			text-align: center;	
+			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 {
+			width: 501rpx;
+			height: 71rpx;
+			line-height: 71rpx;
+			background: #4C7BC9;
+			border-radius: 26rpx;
+			font-size: 34rpx;
+			color: #FFFFFF;
+			text-align: center;
+			margin: 0 auto;
+			margin-top: 25%;
+		}
+	}
+</style>