Browse Source

新增【包月卡购买】页面;

常志远 2 years ago
parent
commit
47a1d15f38

+ 28 - 0
pages.json

@@ -620,8 +620,36 @@
                 "enablePullDownRefresh": false
                 "enablePullDownRefresh": false
             }
             }
             
             
+        },{ "name":"月卡购买",
+            "path" : "pages/monthlyCardActivity/monthlyCardBuy",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
         }
         }
         
         
+        
+        
+        ,{"name":"开通结果",
+            "path" : "pages/monthlyCardActivity/openResult",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/monthlyCardActivity/openResult",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
     ],
 	"globalStyle": {
 	"globalStyle": {
 		"navigationStyle": "custom", // 隐藏系统导航栏
 		"navigationStyle": "custom", // 隐藏系统导航栏

+ 125 - 0
pages/monthlyCardActivity/monthlyCardBuy.vue

@@ -0,0 +1,125 @@
+<template>
+	<view >
+		<ujp-navbar title="包月卡购买" ></ujp-navbar>
+		<!-- 卡片 -->
+		<view class="monthly-card">
+		<view class="main">
+			<view class="title-1">
+			充电服务费包月卡	
+			</view>
+			<view class="title-2">
+			有效期内,合约充电站使用度数无上限	
+			</view>
+		</view>
+			<img class="cover" src="../../assets/img/cover@3.png" alt="">
+		</view>
+		<view class="slogan-1">
+			充电服务费包月卡
+		</view>
+		<view class="slogan-2">
+			单次购买、整月受益!
+		</view>
+		<view class="slogan-3">
+			仅限车主购买,适用于平台对外开放充电站
+		</view>
+		
+		<!-- 立即开通 -->
+		<view class="bottom">
+			<button class="dredge">立即开通 ¥59.90/月</button>
+			<p>开通表示阅读并同意
+			<text class="agreement">《服务费折扣协议》</text>
+			</p>
+		</view>
+	</view>
+</template>
+
+<script>
+</script>
+
+<style lang="scss" scoped>
+	page{
+		background-color: #2a2c31;
+	}
+	
+	// 卡片
+	.monthly-card{
+		margin: 20px;
+		border-radius: 16px;
+		height: 150px;
+		background:linear-gradient(#F2E6CA,#C9A87B);
+		position: relative;
+		.main{
+			padding: 24px 0 24px 24px ;
+			height: 100%;
+			background: url(@/assets/img/card@3.png) ;
+			background-repeat:  no-repeat;
+			background-position: 30% 10%;      
+            background-size: cover;
+			color: rgba(255, 255, 255, 100);
+			.title-1{
+				line-height: 28px;
+				
+				font-size: 28px;
+				margin-bottom: 8px;
+			}
+			.title-2{
+				line-height: 24px;
+				
+				font-size: 17px;
+			}
+		}
+		
+		.cover{
+			width: 102%;
+			position: absolute;
+			bottom: -10px;
+			left: -2px;
+			right: 0;
+		}
+	}
+	
+	.slogan-1{
+		height: 36px;
+		color: rgba(234, 217, 180, 100);
+		font-size: 24px;
+		text-align: center;
+		margin-bottom: 4px;
+	}
+	.slogan-2{
+		height: 36px;
+		color: rgba(234, 217, 180, 100);
+		font-size: 28px;
+		text-align: center;
+		margin-bottom: 12px;
+	}
+	.slogan-3{
+		height: 20px;
+		color: rgba(255, 255, 255, 100);
+		font-size: 14px;
+		text-align: center;
+	}
+	// 立即开通
+	.bottom{
+		
+		position: fixed;
+		bottom: 40px;
+		left: 0;
+		right: 0;
+		.dredge{
+			width: 72.2%;
+			border-radius: 50px;
+			font-size: 18px;
+			background:linear-gradient(to right,#C9A87B,#F2E6CA);
+			margin-bottom: 12px;
+		}
+		p{
+			height: 20px;
+			color: rgba(226, 222, 217, 100);
+			font-size: 14px;
+			text-align: center;
+		}
+		.agreement{
+			color: #897a69;
+		}
+	}
+</style>

+ 53 - 0
pages/monthlyCardActivity/openResult.vue

@@ -0,0 +1,53 @@
+<template>
+	<view>
+		<ujp-navbar title="开通会员"></ujp-navbar>
+		<view class="success">
+			<u-icon name="chenggong" custom-prefix="custom-icon" size="180" color="#00B962"></u-icon>
+			<view class="text">
+			  开通成功	
+			</view>
+		</view>
+		<u-button class="to-charge" type="success">前往充电</u-button>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page{
+		background-color: #fff;
+	}
+	
+	.success{
+		padding-top: 45px;
+		text-align: center;
+		.text{
+			margin-top: 20px;
+			height: 27px;
+			color: #101010;
+			font-size: 20px;
+			font-weight: 600;
+		}
+		
+	}
+.to-charge{
+	margin-top: 52px;
+	width: 79.2%;
+	height: 44px;
+	line-height: 44px;
+	border-radius: 50px;
+	font-size: 18px;
+	
+}
+</style>

+ 1 - 1
pages/user/index.vue

@@ -696,7 +696,7 @@
 	   padding: 16px;
 	   padding: 16px;
 	   margin: 16px;
 	   margin: 16px;
 	   border-radius: 8px;
 	   border-radius: 8px;
-	   background: linear-gradient(#f5eedf,#d3bd9e);
+	   background: linear-gradient(to right,#d3bd9e,#f5eedf);
 	   display: flex;
 	   display: flex;
 	  .flex{
 	  .flex{
 		  display: flex;
 		  display: flex;