选择优惠券 优惠券组件修改

pages.json

@@ -380,6 +380,11 @@
 			"style": {
 				"navigationStyle": "custom"
 			}
+		},{ "name":"选择优惠券",
+			"path": "pages/user/coupon/chooseCoupons",
+			"style": {
+				"navigationStyle": "custom"
+			}
 		},
 		{ "name":"邀请好友",
 			"path": "pages/user/InviteFriends",

pages/searchPile/chargeProcess/charge.vue

@@ -56,7 +56,16 @@
 				</view>
 			</view>
 
-
+    <!-- 优惠券2 -->
+			 <view class="discounts2">
+			 	<view class="left">
+			 		优惠券
+			 	</view>
+				<view class="right">
+					未选优惠券，最高优惠30元
+					<view class="iconfont">&#xe600;</view>
+				</view>
+			 </view>
 		</view>
 		<view class="bottom">
 			<view class="botton"
@@ -518,6 +527,34 @@
 		}
 	}
 	
+	// 优惠券2
+	.discounts2{
+		margin-top: 20px;
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		.left{
+			// height: 20px;
+			color: rgba(16, 16, 16, 100);
+			font-size: 20px;
+		}
+		.right{
+			height: 16px;
+			line-height: 28px;
+			color: rgba(255, 61, 0, 100);
+			font-size: 16px;
+			text-align: right;
+			display: flex;
+		}
+		.iconfont{
+			line-height: 29px;
+			text-align: center;
+			color: #b3b3b3;
+			font-size: 24px;
+			
+			
+		}
+	}
 	// 尾部
 	.bottom {
 		background-color: #fff;

pages/user/coupon/chooseCoupons.vue

@@ -0,0 +1,177 @@
+<template>
+	<view >
+		<u-navbar title="我的优惠券"><view class="exchange" @click="toConversion">兑换</view></u-navbar>
+		<view class="list-item">
+			<view class="voucher">优惠券</view>
+			<view class="checked">
+				<img src="../../../static/img/选中.png" alt="">
+			</view>
+			<view class="item-left">
+				<view class="title">
+					新客首充专享
+				</view>
+				<view class="useful-life">
+					有效期至2022.05.22
+				</view>
+			</view>
+			<view class="item-right">
+				  <view class="price">
+				  	<text style="font-size: 14px;">￥</text>  15
+				  </view>
+				  <view class="contidion">
+				  	满100可用
+				  </view>
+			</view>
+			
+		</view>
+		
+		<view class="list-item">
+			<view class="voucher">优惠券</view>
+			<view class="checked">
+				<img src="../../../static/img/选中.png" alt="">
+			</view>
+			<view class="item-left">
+				<view class="title">
+					逢周五充电服务费折扣券
+				</view>
+				<view class="useful-life">
+					每周五可使用
+				</view>
+			</view>
+			<view class="item-right">
+				  <view class="price">
+				  	  5<text style="font-size: 14px;">折</text>
+				  </view>
+				  <view class="contidion">
+				  	满66可用
+				  </view>
+			</view>
+			
+		</view>
+	
+	<view class="bottom">
+		<view class="text">
+			已选1张，预计可减
+			<view class="num">
+				<text style="font-size: 14px;">￥</text><text>6</text>
+			</view>
+		</view>
+		<u-button class="confirm" >
+			<span>确定</span>
+		</u-button>
+	</view>
+	
+	
+	
+	</view>
+</template>
+
+<script>
+</script>
+
+<style lang="scss">
+	.exchange{
+		margin-left: 85.3%;
+		color: rgba(119, 119, 119, 100);
+		font-size: 12px
+	}
+	.list-item{
+		width: 91.4%;
+		display: flex;
+		justify-content: space-between;
+		background-color: #fff;
+		margin: 12px auto 0;
+		border-radius: 8px;
+		position: relative;
+		.voucher{
+			width: 60px;
+			height: 20px;
+			line-height: 20px;
+			border-radius: 8px 0px 8px 0px;
+			background-color: rgba(0, 185, 98, 100);
+			color: rgba(255, 255, 255, 100);
+			font-size: 12px;
+			text-align: center;
+			position: absolute;
+			top: 0;
+			left: 0;
+		}
+		.checked{
+			width: 28px;
+			height: 28px;
+			position: absolute;
+			top: 0;
+			right: 0;
+			img{
+				width: 100%;
+				height: 100%;
+			}
+		}
+		.item-left{
+			padding: 24px 0 20px 16px;
+			.title{
+				line-height: 25px;
+				color: rgba(16, 16, 16, 100);
+				font-size: 18px;
+				font-weight: 600;
+			}
+			.useful-life{
+				line-height: 22px;
+				color: rgba(51, 51, 51, 100);
+				font-size: 16px;
+				margin-top: 1px;
+			}
+		}
+		.item-right{
+			padding: 19px 20px 18px 0;
+			
+			.price{
+				height: 38px;
+				color: rgba(0, 185, 98, 100);
+				font-size: 32px;
+				text-align: right;
+			}
+			.contidion{
+				height: 22px;
+				color: rgba(51, 51, 51, 100);
+				font-size: 16px;
+				text-align: right;
+				margin-top: 4px;
+			}
+		}
+	}
+
+.bottom{
+	position: fixed;
+	bottom: 0;
+	right: 0;
+	width: 100%;
+	height: 64px;
+	line-height: 64px;
+	background-color: #fff;
+	padding: 0 16px;
+	display: flex;
+	justify-content: space-between;
+	.text{
+		height: 20px;
+		color: rgba(16, 16, 16, 100);
+		font-size: 18px;
+		display: flex;
+		.num{
+			color: orangered;
+			font-size: 18px
+		}
+	}
+	.confirm{
+		width: 100px;
+		height: 40px;
+		border-radius: 50px;
+		background-color: rgba(0, 185, 98, 100);
+		color: rgba(255, 255, 255, 100);
+		font-size: 18px;
+		text-align: center;
+		margin: auto 10px ;
+	}
+}
+
+</style>