我的优惠券

pages.json

@@ -369,6 +369,11 @@
 			"style": {
 				"navigationStyle": "custom"
 			}
+		},{ "name":"我的优惠券",
+			"path": "pages/user/coupon/myCoupon",
+			"style": {
+				"navigationStyle": "custom"
+			}
 		}
     ],
 	"globalStyle": {

pages/user/coupon/myCoupon.vue

@@ -0,0 +1,487 @@
+<template>
+	<view >
+		<u-navbar title="我的优惠券"><view class="exchange">兑换</view></u-navbar>
+		<view class="tab" >
+			<u-tabs :list="tabList" :current="current" @change="change" :show-bar="false" active-color="#333" inactive-color="#c4c0c0"></u-tabs>
+		</view>
+		<!-- 可以使用 -->
+		<view class="workable" v-show="current==0">
+			<view class="list-item">
+				<view class="voucher">抵扣券</view>
+				<view class="content">
+					<view class="content-left">
+						<view class="text">新客首充专享</view>
+						<view class="useful-life">
+							有效期至2022.05.22
+						</view>
+						
+						
+					</view>
+					<view class="content-right">
+						 <view class="price">
+						 	￥15
+						 </view>
+						 <view class="price-condition">
+						 	满100可用
+						 </view>
+					</view>
+				</view>
+				
+				<view class="limit">
+					<view class="limit-text">
+							
+							<view class="limit-text1">
+								限用户充电电费+服务费满100元使用。
+								<text class="arrows iconfont">
+									&#xe62c;
+								</text>
+							</view>
+							
+							
+					</view>
+					<view class="use-button">
+						去使用
+					</view>
+				</view>
+			</view>
+			<view class="list-item">
+				<view class="voucher">抵扣券</view>
+				<view class="content">
+					<view class="content-left">
+						<view class="text">新客首充专享</view>
+						<view class="useful-life">
+							有效期至2022.05.22
+						</view>
+						
+						
+					</view>
+					<view class="content-right">
+						 <view class="price">
+						 	￥15
+						 </view>
+						 <view class="price-condition">
+						 	满100可用
+						 </view>
+					</view>
+				</view>
+				
+				<view class="limit">
+					<view class="limit-text">
+							
+							<view class="limit-text1">
+								限用户充电电费+服务费满100元使用。<text class="iconfont arrows">&#xe607;</text>
+								限微信钱包、支付宝生活号APP端使用，
+								不支持找零，
+							</view>
+							
+							<view class="limit-text2">
+								限登录和充电帐号为155****1111使用。
+							</view>
+					</view>
+					<view class="use-button">
+						去使用
+					</view>
+				</view>
+			</view>
+			<view class="list-item">
+				<view class="voucher">抵扣券</view>
+				<view class="content">
+					<view class="content-left">
+						<view class="text">新客首充专享</view>
+						<view class="useful-life">
+							有效期至2022.05.22
+						</view>
+						
+						
+					</view>
+					<view class="content-right">
+						 <view class="price">
+						 	￥15
+						 </view>
+						 <view class="price-condition">
+						 	满100可用
+						 </view>
+					</view>
+				</view>
+				
+				<view class="limit">
+					<view class="limit-text">
+							
+							<view class="limit-text1">
+								限首次注册用户使用。
+								<text class="arrows iconfont">
+									&#xe62c;
+								</text>
+							</view>
+							
+							
+					</view>
+					<view class="use-button">
+						去使用
+					</view>
+				</view>
+			</view>
+			<view class="list-item">
+				<view class="voucher">抵扣券</view>
+				<view class="content">
+					<view class="content-left">
+						<view class="text">新客首充专享</view>
+						<view class="useful-life">
+							有效期至2022.05.22
+						</view>
+						
+						
+					</view>
+					<view class="content-right">
+						 <view class="price">
+						 	￥15
+						 </view>
+						 <view class="price-condition">
+						 	满100可用
+						 </view>
+					</view>
+				</view>
+				
+				<view class="limit">
+					<view class="limit-text">
+							
+							<view class="limit-text1">
+								限首次注册用户使用。
+								<text class="arrows iconfont">
+									&#xe62c;
+								</text>
+							</view>
+							
+							
+					</view>
+					<view  class="use-button" style="	width: 56px;
+				height: 24px;
+				line-height: 24px;
+				border-radius: 4px;
+				background-color: rgba(0, 185, 98, 100);
+				color: rgba(255, 255, 255, 100);
+				font-size: 12px;
+				text-align: center;">
+						去使用
+					</view>
+				</view>
+			</view>
+		</view>
+	
+	 <!-- 已使用 -->
+	  <view class="used" v-show="current==1">
+		  <view class="list-item">
+		  	<view class="voucher">充值券抵扣</view>
+		  	<view class="content">
+		  		<view class="content-left">
+		  			<view class="text">新客首充专享</view>
+		  			<view class="useful-life">
+		  				有效期至2022.05.22
+		  			</view>
+		  			
+		  			
+		  		</view>
+		  		<view class="content-right">
+		  			 <view class="price">
+		  			 	￥15
+		  			 </view>
+		  			 <view class="price-condition">
+		  			 	满100可用
+		  			 </view>
+		  		</view>
+		  	</view>
+		  	
+		  	<view class="limit">
+		  		<view class="limit-text">
+		  				
+		  				<view class="limit-text1">
+		  					限用户充电电费+服务费满100元使用。
+		  					<text class="arrows iconfont">
+		  						&#xe62c;
+		  					</text>
+		  				</view>
+		  				
+		  				
+		  		</view>
+		  		<view class="have-used">
+		  			 <img src="../../../static/img/haveused.png" alt="">
+		  		</view>
+		  	</view>
+		  </view>
+		  <view class="list-item">
+		  	<view class="voucher">充值券抵扣</view>
+		  	<view class="content">
+		  		<view class="content-left">
+		  			<view class="text">新客首充专享</view>
+		  			<view class="useful-life">
+		  				有效期至2022.05.22
+		  			</view>
+		  			
+		  			
+		  		</view>
+		  		<view class="content-right">
+		  			 <view class="price">
+		  			 	￥15
+		  			 </view>
+		  			 <view class="price-condition">
+		  			 	满100可用
+		  			 </view>
+		  		</view>
+		  	</view>
+		  	
+		  	<view class="limit">
+		  		<view class="limit-text">
+		  				
+		  				<view class="limit-text1">
+		  					限用户充电电费+服务费满100元使用。
+		  					<text class="arrows iconfont">
+		  						&#xe62c;
+		  					</text>
+		  				</view>
+		  				
+		  				
+		  		</view>
+		  		<view class="have-used">
+		  			 <img src="../../../static/img/haveused.png" alt="">
+		  		</view>
+		  	</view>
+		  </view>
+		  
+	  </view>
+	<!-- 已过期 -->
+	<view class="overdue" v-show="current==2">
+		<view class="list-item">
+			<view class="voucher">充值券抵扣</view>
+			<view class="content">
+				<view class="content-left">
+					<view class="text">新客首充专享</view>
+					<view class="useful-life">
+						有效期至2022.05.22
+					</view>
+					
+					
+				</view>
+				<view class="content-right">
+					 <view class="price">
+					 	￥15
+					 </view>
+					 <view class="price-condition">
+					 	满100可用
+					 </view>
+				</view>
+			</view>
+			
+			<view class="limit">
+				<view class="limit-text">
+						
+						<view class="limit-text1">
+							限用户充电电费+服务费满100元使用。
+							<text class="arrows iconfont">
+								&#xe62c;
+							</text>
+						</view>
+						
+						
+				</view>
+				<view class="have-used">
+					 <img src="../../../static/img/overdue.png" alt="">
+				</view>
+			</view>
+		</view>
+	<view class="list-item">
+		<view class="voucher">充值券抵扣</view>
+		<view class="content">
+			<view class="content-left">
+				<view class="text">新客首充专享</view>
+				<view class="useful-life">
+					有效期至2022.05.22
+				</view>
+				
+				
+			</view>
+			<view class="content-right">
+				 <view class="price">
+				 	￥15
+				 </view>
+				 <view class="price-condition">
+				 	满100可用
+				 </view>
+			</view>
+		</view>
+		
+		<view class="limit">
+			<view class="limit-text">
+					
+					<view class="limit-text1">
+						限用户充电电费+服务费满100元使用。
+						<text class="arrows iconfont">
+							&#xe62c;
+						</text>
+					</view>
+					
+					
+			</view>
+			<view class="have-used">
+				 <img src="../../../static/img/overdue.png" alt="">
+			</view>
+		</view>
+	</view>
+	</view>
+	</view>
+	
+</template>
+
+<script>
+	export default{
+		data(){
+			return{
+				tabList: [
+					{name: '可使用',type: '1'},
+					{name: '已使用',type: '2'},
+					{name: '已过期',type: '3'},
+				],
+				current: 0,
+			}
+		},
+		methods:{
+			change(index) {
+				this.current = index;
+				
+			},
+			           
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.exchange{
+		margin-left: 85.3%;
+		color: rgba(119, 119, 119, 100);
+		font-size: 12px
+	}
+	.tab{
+		
+		width: 100%;
+		
+	}
+	/deep/.u-scroll-box{
+		width: 80.8%;
+		margin: 0 auto;
+	    display: flex;
+		justify-content: space-between;
+	}
+	
+	.list-item{
+		width: 91.4%;
+		background-color: #fff;
+		margin: 12px auto 0;
+		position: relative;
+		border-radius:8px;
+		.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;
+		}
+		.content{
+			   display: flex;
+			   justify-content: space-between;
+			   padding: 24px 16px;
+		}
+			   .content-left{
+				   .text{
+					 
+					   height: 22px;
+					   line-height: 22px;
+					   color: rgba(16, 16, 16, 100);
+					   font-size: 16px;
+				   }
+				
+				   .useful-life{
+					   height: 17px;
+					   line-height: 17px;
+					   color: rgba(153, 153, 153, 100);
+					   font-size: 12px;
+					   margin-top: 4px;
+				   }
+			   };
+			   .content-right{
+				   margin-top: -8px;
+				   .price{
+					   height: 38px;
+					   color: rgba(0, 185, 98, 100);
+					   font-size: 32px;
+				   }
+				   .price-condition{
+					   height: 17px;
+					   color: rgba(102, 102, 102, 100);
+					   font-size: 12px;
+					   text-align: center;
+					   margin-top: 4px;
+				   }
+			   }
+		}
+		.limit{
+		
+			display: flex;
+			justify-content: space-between;
+			padding: 14px 16px;
+			border-top:  1px dotted rgba(227, 227, 227, 100);
+			position: relative;
+			
+			.limit-text{
+				color: rgba(153, 153, 153, 100);
+								font-size: 11px;
+								
+								
+				
+				.limit-text1{
+					width: 62vw;
+					.arrows{
+										   display: inline-block;
+									   width: 20px;
+									   height: 20px;
+							           padding-top: 6px;
+									   text-align: left;
+					
+				
+				}
+				
+			}
+			
+		}
+		
+		
+	}
+	
+  .use-button{
+  	width: 56px;
+  	height: 24px;
+  	line-height: 24px;
+  	border-radius: 4px;
+  	background-color: rgba(0, 185, 98, 100);
+  	color: rgba(255, 255, 255, 100);
+  	font-size: 12px;
+  	text-align: center;
+  }
+  .have-used{
+	  
+	  width: 64px;
+	  height: 64px;
+	  position: absolute;
+	  top: -12px;
+	 right: 0;
+	  img{
+		  width: 100%;
+		  height: 100%;
+	  }
+  }
+
+</style>