调整

apis/otherRecharge.js

@@ -36,6 +36,18 @@ export function bindCard(data) {
 	})
 }
 
+
+export function getVerifyCode(tel) {
+	 
+	return requestWhite({
+		method: 'post',
+		data:{
+			telephone:tel
+		} ,
+		url: '/mobile/regUser/getVerifyCode'
+	})
+} 
+
 export function findByPhone(data) {
 	var url='/mobile/otherRecharge/findByPhone';
 	return requestWhite({

pages/user/rechargeByPhone.vue

@@ -11,7 +11,7 @@
 				<p v-show="!queryCard.query">充值手机号
 				
 				</p >
-				<p v-show="queryCard.query">
+				<p v-show="queryCard.query&&queryCard.name">
 					用户姓名：{{queryCard.name}}
 				</p>
 				<u-input v-model="phone" v-show="!queryCard.query"
@@ -43,23 +43,46 @@
 			
 			<u-button type="primary" @click="findByPhone" :custom-style="customStyle" shape="square">查询用户</u-button>
 		</view>
-		<view class="rechargeBk" v-show="queryCard.query">
+		<view class="rechargeBk" v-if="queryCard.query&&queryCard.chargingCardList&&queryCard.chargingCardList.length">
 			<view class="rechargeBkInfo" >
 				
-				
 				<view class="recharge-text">
 					<p>账户余额（元）</p>
 					<h1>{{queryCard.amount}}</h1>
 				</view>
 				<view class="recharge-text">
 					<p>充电卡号</p>
-					<h1>{{queryCard.cardNo}}</h1>
+					<h1>{{queryCard.chargingCardList[0].cardNo}}</h1>
+				</view>
+			</view>	
+		</view>
+		<view class="rechargeList" v-if="queryCard.query&&queryCard.chargingCardList&&queryCard.chargingCardList.length" >
+			<view  class="rechargeList1" @click="showCardBtn(queryCard.chargingCardList.length)">
+				<view>
+					您的手机号下共有<span class="span">{{queryCard.chargingCardList.length}}</span>张卡
+				</view>
+				<view v-if="queryCard.chargingCardList.length>5">
+					<span v-show="showCard"  >
+						<u-icon name="arrow-up"   ></u-icon>收起
+					</span>
+					<span v-show="!showCard"  >
+						<u-icon name="arrow-down"   ></u-icon>展开
+					</span>
+					
 				</view>
 			</view>
+			<view v-show="showCard"  class="rechargeList2">
+				充电卡号：
+				<template  v-for="(item,i) in queryCard.chargingCardList">
+					<template v-if="i!=0">
+						,
+					</template>
+					<span  class="rechargeList2Item" :key="i">
+						 {{item.cardNo}}
+					</span>
+				</template>
 				
-			
-			
-			
+			</view>
 		</view>
 		
 		
@@ -125,7 +148,7 @@
 		data() {
 			return {
 				queryCard:{},
-				
+				showCard:false,
 				isReady:false,
 				customStyle: {
 					background: '#1677ff'
@@ -149,6 +172,13 @@
 		
 		},
 		methods: {
+			showCardBtn(num){
+				if(num>5){
+					this.showCard=!this.showCard
+				}
+					
+			},
+			
 			findByPhone(){
 				var checkPhoneResult = checkPhone(this.phone);
 				
@@ -173,8 +203,13 @@
 					this.queryCard={
 						query:true,
 						amount:data.userAccount.availableBalance,
-						name:data.chargingCard.realName,
-						cardNo:data.chargingCard.cardNo
+						name:data.regUser.realName,
+						chargingCardList:data.chargingCardList
+					}
+					if(data.chargingCardList>5){
+						this.showCard=false
+					}else{
+						this.showCard=true
 					}
 				
 				}).catch(error => {
@@ -251,6 +286,27 @@
 	}
 </style>
 <style lang="scss" scoped>
+	.rechargeList{
+		    padding: 30rpx;
+		    background-color: #fff;
+			 margin-bottom: 20rpx;
+			 .rechargeList1{
+				     display: flex;
+				     justify-content: space-between;
+				     width: 100%;
+					 .span{
+						 color: #FF5722;
+						 margin: 0 6rpx;
+					 }
+			 }
+			 .rechargeList2{
+				 margin-top: 10rpx;
+			 }
+			 .rechargeList2Item{
+				     margin: 12rpx;
+				     font-size: 32rpx;
+			 }
+	}
 	.slot-wrap{
 		flex: 1;
 	}

pages/user/rechargeIndex.vue

@@ -5,11 +5,11 @@
 		</ujp-navbar>
 		<view class="item1 item" @click="gotoUrl('pages/user/rechargeSubmit')">
 			<img src="@/assets/img/byphone/iconPark-copy-link.svg">
-			绑定充电卡
+			发卡
 		</view>
 		<view class="item2 item"  @click="gotoUrl('pages/user/rechargeByPhone')" >
 			<img src="@/assets/img/byphone/iconPark-wallet.svg">
-			充电卡充值
+			充值
 		</view>
 		
 	</view>

pages/user/rechargeSubmit.vue

@@ -5,7 +5,9 @@
 		</ujp-navbar>
 		<view class="recharge" v-show="!queryInfo">
 			<view class="recharge-text">
-				<view class="recharge-title">绑定卡号</view>
+				<view class="recharge-title">绑定卡号
+				<span style="color: red;">*</span>
+				</view>
 				<view class="recharge-value">
 					<u-input v-model="cardNo" :custom-style="customStyle" :placeholder-style="placeholderStyle"
 						:height="height" placeholder="请填写绑定卡号"></u-input>
@@ -13,25 +15,42 @@
 				</view>
 
 			</view>
-			<view class="recharge-text">
-				<view class="recharge-title">用户姓名</view>
-				<view class="recharge-value">
-					<u-input v-model="name" :custom-style="customStyle" :placeholder-style="placeholderStyle"
-						:height="height" placeholder="请填写用户姓名"></u-input>
-			
-				</view>
-			
-			</view>
+		
 			<view class="recharge-text">
-				<view class="recharge-title">手机号码</view>
+				<view class="recharge-title">手机号码
+				<span style="color: red;">*</span>
+				</view>
 				<view class="recharge-value">
 					<u-input v-model="phone" :custom-style="customStyle" :placeholder-style="placeholderStyle"
 						:height="height" placeholder="请填写绑定手机号"></u-input>
 
 				</view>
 
+			</view>
+			
+			<view class="recharge-text">
+				<view class="recharge-title">验证码</view>
+				<view class="recharge-value">
+					<u-input v-model="code" :custom-style="customStyle" :placeholder-style="placeholderStyle"
+						:height="height" placeholder="请填写验证码"></u-input>
+						
+				</view>
+				<view class="login-code" @click="getCode">
+					{{codeTips}}
+				</view>
+			</view>
+			
+			
+			
+			
+			<view class="recharge-text">
+				<view class="recharge-title">用户姓名</view>
+				<view class="recharge-value">
+					<u-input v-model="name" :custom-style="customStyle" :placeholder-style="placeholderStyle"
+						:height="height" placeholder="请填写用户姓名"></u-input>
+				</view>
+			
 			</view>
-		
 			<view class="recharge-text">
 				<view class="recharge-title">绑定状态</view>
 				<view class="recharge-value FF7B00 ">
@@ -52,21 +71,21 @@
 				</view>
 		
 			</view>
+		
 			<view class="recharge-text">
-				<view class="recharge-title">用户姓名</view>
+				<view class="recharge-title">手机号码</view>
 				<view class="recharge-value">
-					{{name}}
+					{{phone}}
 				</view>
-			
+		
 			</view>
 			<view class="recharge-text">
-				<view class="recharge-title">手机号码</view>
+				<view class="recharge-title">用户姓名</view>
 				<view class="recharge-value">
-					{{phone}}
+					{{name}}
 				</view>
-		
+			
 			</view>
-		
 			<view class="recharge-text">
 				<view class="recharge-title">绑定状态</view>
 				<view class="recharge-value color3a7cf6 ">
@@ -80,7 +99,8 @@
 			</view>
 		</view>
 
-
+	<u-verification-code  change-text="已发送(Xs)" :seconds="sendMsgSecond" ref="uCode" @change="codeChange" @end="end" @start="start">
+	</u-verification-code>
 	</view>
 </template>
 
@@ -108,18 +128,98 @@
 				cardNo:"",
 				name:"",
 				phone:"",
+				code: '',
 				queryCard:{},
-				queryInfo:false,
+				queryInfo:false,
+				
+				codeTips: '',
+				isSendMsgIng: false,
+				sendMsgSecond: 60 * 5,
 			}
 		},
 		onLoad(op) {
 
-
+			
 		},
 		onReady() {
-
+			var time = this.carhelp.get("getvcodetime");
+			if (time) {
+				//this.$refs.uCode.start();
+				var nowtime = new Date().getTime()
+				var differ = (nowtime - time) / 1000
+				if (differ < 5 * 60) {
+					this.sendMsgSecond = 5 * 60 - parseInt(differ)
+					this.isSendMsgIng = true;
+					this.$refs.uCode.start();
+				}
+			}
 		},
-		methods: {
+		methods: {
+			codeChange(text) {
+				this.codeTips = text;
+			},
+			end() {
+				this.sendMsgSecond = 5 * 60;
+				this.isSendMsgIng = false;
+			},
+			start() {
+				if (!this.isSendMsgIng) {
+			
+			
+					uni.showLoading({
+						title: "加载中",
+						mask: true,
+					})
+					API.getVerifyCode(this.phone).then((response) => {
+			
+			
+						uni.hideLoading();
+			
+						if (response.data=!"") {
+							this.carhelp.set("getvcodetime", new Date().getTime());
+							
+							//倒计时
+							uni.showToast({
+								title: "发送成功"
+							})
+						} else {
+							uni.showToast({
+								title: "您的验证码已经发送[5分钟有效]，请勿重复点击"
+							})
+						}
+					}).catch(error => {
+						uni.showToast({
+							title: error,
+							icon: "none"
+						})
+					})
+			
+			
+				}
+			},
+			getCode() {
+				if (this.$refs.uCode.canGetCode) {
+			
+				} else {
+			
+					uni.showToast({
+						title: '您的验证码[5分钟有效]，请勿重复点击',
+						icon: "none"
+					})
+					return
+				}
+			
+				var checkPhoneResult = checkPhone(this.phone);
+			
+				if ( checkPhoneResult !== true) {
+					uni.showToast({
+						title: checkPhoneResult,
+			
+					})
+					return;
+				}
+				this.$refs.uCode.start();
+			},
 			submitApi() {
 				uni.showLoading({
 					title: "加载中",
@@ -128,7 +228,8 @@
 				API.bindCard({
 					cardNo: this.cardNo,
 					phone: this.phone,
-					name: this.name
+					name: this.name,
+					verifyCode: this.code,
 				}).then((response) => {
 					
 					var data = response.data
@@ -148,19 +249,19 @@
 					})
 					return;
 				}
-				if (!this.name) {
+				
+				if (!this.phone) {
 					uni.showToast({
-						title: "请填写用户姓名",
+						title: "请填写绑定手机号",
 					})
 					return;
 				}
-				if (!this.phone) {
+				if (!this.code) {
 					uni.showToast({
-						title: "请填写绑定手机号",
+						title: "请填写验证码"
 					})
-					return;
+					return
 				}
-				
 				
 				var checkPhoneResult = checkPhone(this.phone);
 
@@ -189,8 +290,10 @@
 							content:"当前卡号已被其他用户绑定",
 							showCancel:false,
 						})
+					}else{
+						this.submitApi()
 					}
-					this.submitApi()
+					
 				
 				}).catch(error => {
 					uni.hideLoading()
@@ -242,10 +345,14 @@
 			border-bottom: 1px solid #eeeeee;
 
 			.recharge-title {
-				width: 30%;
+				    min-width: 30%;
 				    color: rgb(96, 98, 102);
 			}
 		}
 
+	}
+	.login-code {
+		color: #1677ff;
+		    white-space: pre;
 	}
 </style>