Selaa lähdekoodia

1.完成充值记录页面及逻辑
2.完成查询套餐页面及逻辑

306132416@qq.com 6 vuotta sitten
vanhempi
commit
e8d1d981a3

+ 5 - 0
App.vue

@@ -1,5 +1,10 @@
 <script>
 	export default {
+		globalData: {
+			// shareUrl: 'https://mini.98mp.com/api/api.php', //开发环境全局接口域名
+			glbalHeight:'',
+			globalTimestamp: (Date.now()).toString(),
+		},
 		onLaunch: function() {
 			console.log('App Launch')
 		},

+ 11 - 3
pages.json

@@ -22,9 +22,17 @@
 			}
 		}
         ,{
-            "path" : "pages/selfInfo/selfDetail/selfDetail",
-            "style" : {}
-        }
+            "path" : "pages/selfInfo/rechargeRecord/rechargeRecord",
+            "style" : {
+				"navigationBarTitleText": "充值记录"
+			}
+        },
+		{
+		    "path" : "pages/selfInfo/payList/payList",
+		    "style" : {
+				"navigationBarTitleText": "套餐"
+			}
+		}
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

+ 1 - 0
pages/index/index.vue

@@ -102,6 +102,7 @@
 			getEquipmentHeight() {
 				let height = uni.getSystemInfoSync().windowHeight;
 				this.nowHeight = height  + 'px';
+				getApp().globalData.glbalHeight = this.nowHeight;
 			},
 			customConduct(){
 					uni.navigateTo({

+ 122 - 0
pages/selfInfo/payList/payList.vue

@@ -0,0 +1,122 @@
+<template>
+	<view class="content" :style="{height:nowHeight}">
+		
+		<view class="pay-list-box">
+			<view class="pay-title">
+				<image src="../../../static/icon/moneyIcon.png" mode=""></image>
+				<text>购买查询次数</text>
+			</view>
+			
+			<view class="pay-content" :class="{'border-select':selectId === search.searchId}"
+			 v-for="search in searchList" :key='search.searchId' @click="selectPackage(search)">
+				 <view style="margin-left: 3%;">可查询次数 {{search.searchCount}}</view>
+				 <view style="margin-right: 5%;">¥ {{search.searchMoney}}</view>
+			</view>						
+		</view>
+		
+		<view class="pay-box">
+			<view style="margin-left: 5%;">{{packageMoney}}</view>
+			<button type="primary" class="submit-message" @click="payPackage()">购买</button>
+		</view>
+	
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return { 
+				nowHeight:getApp().globalData.glbalHeight,
+				selectId:'',
+				packageMoney:'',
+				searchList:[
+					{
+						searchCount:'100',
+						searchMoney:'10',
+						searchId:'A1',	
+					},
+					{
+						searchCount:'200',
+						searchMoney:'20',
+						searchId:'A2',	
+					},{
+						searchCount:'300',
+						searchMoney:'30',
+						searchId:'A3',	
+					},
+				],
+			}
+		},
+		methods: {
+			selectPackage(param){
+				this.selectId  = param.searchId;
+				this.packageMoney = param.searchMoney + '元';
+			}
+		}
+	}
+	
+</script>
+
+<style>
+     .content {
+     	display: flex;
+     	flex-direction: column;
+     	align-items: center;
+     	justify-content: flex-start;
+     	background: #f4f5f7;
+     }
+	 
+	 .pay-list-box {
+		 width: 95%;
+		 min-height:400upx;
+		 background: #fff;
+		 margin-top: 3%;
+		 border-radius: 10rpx;
+	 }
+	 .pay-title {
+		 width: 95%;
+		 height: 80rpx;
+		 font-size: 30rpx;
+		 margin: 0 auto;
+		 border-bottom: 1px solid #d9d9d9;
+		 display: flex;
+		 align-items: center;
+
+	 }
+	 .pay-title image {
+		 width: 50upx;
+		 height: 50upx;
+		 margin-right: 2%;
+	 }
+	 .pay-content {
+		 width: 95%;
+		 height: 90rpx;
+		 font-size: 30rpx;
+		 margin: 3% auto;
+		 border: 1px solid #d9d9d9;
+		 display: flex;
+		 align-items: center;
+		 justify-content: space-between;
+		 border-radius: 10rpx;
+	 }
+	 .pay-box {
+	 	width: 100%;
+	 	height: 100rpx;
+	 	position: fixed;
+	 	bottom: 0;
+	 	background: #fff;
+	 	display: flex;
+	 	align-items: center;
+	 }
+	 
+	 .pay-box button {
+		 margin-right: 5%;
+		 height: 55rpx;
+		 line-height: 55rpx;
+		 font-size: 28rpx;
+         background: #27BCEF;
+	 }
+	 .border-select {
+		 border:2px solid #27BCEF !important;
+	 }
+</style>

+ 88 - 0
pages/selfInfo/rechargeRecord/rechargeRecord.vue

@@ -0,0 +1,88 @@
+<template>
+	<view class="content" :style="{height:nowHeight}">
+		
+		<view class="recharge-box" v-for="pay in payList" :key='pay.payId'>
+			 <view class="recharge-time-box">
+				 <view class="recharge-font">智能投顾</view>
+				 <view class="recharge-time">{{pay.payTime}}</view>
+			 </view>
+			 <view class="recharge-money"> 
+				 <text>{{pay.payMoney}}</text>
+			 </view>
+		</view>
+	
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return { 
+				nowHeight:getApp().globalData.glbalHeight,
+				payList:[
+					{
+						payTime:'8-28 17:27',
+						payMoney:'¥ 14',
+						payId:'A1',	
+					},
+					{
+						payTime:'8-27 18:27',
+						payMoney:'¥ 6',
+						payId:'A2',
+					},{
+						payTime:'8-29 19:27',
+						payMoney:'¥ 10'	,
+						payId:'A3',
+					},
+				],
+			}
+		},
+		methods: {
+			
+		}
+	}
+	
+</script>
+
+<style>
+     .content {
+     	display: flex;
+     	flex-direction: column;
+     	align-items: center;
+     	justify-content: flex-start;
+     	background: #f4f5f7;
+     }
+	 
+	 .recharge-box {
+		 display: flex;
+		 align-items: center;
+		 justify-content: space-between;
+		 background: #fff;
+		 width:100%;
+		 height: 150upx;
+		 border-bottom: 1upx solid #D8D8D8;
+	 }
+	 
+	 .recharge-time-box {
+		 display: flex;
+		 flex-direction: column;
+		 align-items: center;
+		 justify-content: space-between;
+		 margin-left: 5%;
+		 height: 110upx;
+	 }
+	 .recharge-font {
+		 font-size: 30upx;
+		 margin-left: -10%;
+	 }
+	 .recharge-time {
+		 color:#D9D9D9;
+		 font-size: 26upx;
+	 }
+	 .recharge-money {
+		 margin-right: 5%;
+	 }
+	 .recharge-money text {
+		 font-size: 28upx;
+	 }
+</style>

+ 0 - 22
pages/selfInfo/selfDetail/selfDetail.vue

@@ -1,22 +0,0 @@
-<template>
-	<view>
-		
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			
-		}
-	}
-</script>
-
-<style>
-
-</style>

+ 19 - 8
pages/selfInfo/selfInfo.vue

@@ -23,13 +23,13 @@
 				<view class="search-content-value" style="color:#000;font-size: 38upx;margin-left: -11%;">查询套餐</view>
 				<view class="search-content-text">限时优惠进行中</view>
 			</view>
-			<view class="search-content" style="width: 33%;height: 180rpx;">
+			<view class="search-content" style="width: 33%;height: 180rpx;" @click.stop="goPayPage()">
 				<image src="../../static/payIcon.png" mode=""></image>
 				<button type="primary">去购买</button>
 			</view>
 		</view>
 		
-		<view class="self-setting-box">
+		<view class="self-setting-box" @click.stop="goRechargePage()">
 			<view class="setting-content-box" style="border-bottom: 1upx solid #d9d9d9">
 				<view class="setting-content-text">
 					<image src="../../static/icon/moneyIcon.png" mode=""></image>
@@ -58,17 +58,12 @@
 		data() {
 			return {
 				title: '个人中心页面',
-				nowHeight:'',
+				nowHeight:getApp().globalData.glbalHeight,
 			}
 		},
 		onLoad() {
-          this.getEquipmentHeight();
 		},
 		methods: {
-			getEquipmentHeight() {
-				let height = uni.getSystemInfoSync().windowHeight;
-				this.nowHeight = height  + 'px';
-			},
 			goMyAskPage(){
 				uni.navigateTo({
 					url: '../index/index',
@@ -76,6 +71,22 @@
 					fail: () => {},
 					complete: () => {}
 				});
+			},
+			goRechargePage(){
+				uni.navigateTo({
+					url: './rechargeRecord/rechargeRecord',
+					success: res => {},
+					fail: () => {},
+					complete: () => {}
+				});
+			},
+			goPayPage(){
+				uni.navigateTo({
+					url: './payList/payList',
+					success: res => {},
+					fail: () => {},
+					complete: () => {}
+				});
 			}
 		}
 	}