jp-charge/pages/user/rechargeSubmit.vue

<template>
	<view>
		<ujp-navbar title="绑定充电卡" :isBack="isBack">

		</ujp-navbar>
		<view class="recharge" v-show="!queryInfo">
			<view class="recharge-text">
				<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>

				</view>

			</view>
				<view class="recharge-text" style="margin: 16rpx 0;">
						<view class="recharge-title">充电卡状态</view>
						<view class="recharge-value FF7B00 ">
								{{cardText}}
						</view>
			
				</view>

		
			<view class="recharge-text">
				<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">验证码
				<span style="color: red;">*</span>
				</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>
				<span style="color: red;    font-size: 36rpx;margin-right: 12rpx;">* 为必填项</span>
			</view>
			<view class="foot-btn">

				<u-button type="primary" @click="submit" shape="square">发卡</u-button>
			</view>
		</view>
		<view class="recharge" v-show="queryInfo">
			<view class="recharge-text">
				<view class="recharge-title">绑定卡号</view>
				<view class="recharge-value">
					{{cardNo}}
				</view>
		
			</view>
		
			<view class="recharge-text">
				<view class="recharge-title">手机号码</view>
				<view class="recharge-value">
					{{phone}}
				</view>
		
			</view>
			<view class="recharge-text">
				<view class="recharge-title">用户姓名</view>
				<view class="recharge-value">
					{{name}}
				</view>
			
			</view>
			<view class="recharge-text">
				<view class="recharge-title">绑定状态</view>
				<view class="recharge-value color3a7cf6 ">
					已绑定
				</view>
		
			</view>
			<view class="foot-btn">
		
				<u-button type="primary" @click="gotoUrl('pages/user/rechargeByPhone?phone='+phone)" shape="square">前往充值</u-button>
			</view>
		</view>

	<u-verification-code  change-text="已发送(Xs)" :seconds="sendMsgSecond" ref="uCode" @change="codeChange" @end="end" @start="start">
	</u-verification-code>
	</view>
</template>

<script>
	
	import {
		checkPhone
	} from '@/utils'
	import * as API from '@/apis/otherRecharge.js'

	export default {
		data() {
			return {
				isReady: true,
				height: 82,
				customStyle: {
					'font-size': '42rpx',
					'line-height': '42rpx',
				},
				placeholderStyle: {
					'font-size': '42rpx',
					'line-height': '42rpx',
					'color': ' rgba(204, 204, 204, 1)',
				},
				cardNo:"",
				name:"",
				phone:"",
				code: '',
				queryCard:{},
				queryInfo:false,
				cardText:"请输入",
				codeTips: '',
				isSendMsgIng: false,
				sendMsgSecond: 60 * 1,
			}
		},
		onLoad(op) {
		//cardText
			
		},
		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 < 1* 60) {
					this.sendMsgSecond = 1* 60 - parseInt(differ)
					this.isSendMsgIng = true;
					this.$refs.uCode.start();
				}
			}
		},
		watch:{
			cardNo(old){
				if(old){
					this.findByCard()
				}else{
					this.cardText="请输入";
				}
			}
		},
		methods: {
			codeChange(text) {
				this.codeTips = text;
			},
			end() {
				this.sendMsgSecond = 1* 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: "加载中",
					mask: true,
				})
				API.bindCard({
					cardNo: this.cardNo,
					phone: this.phone,
					name: this.name,
					verifyCode: this.code,
				}).then((response) => {
					
					var data = response.data
					uni.hideLoading()
					this.queryInfo=true
				
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			findByCard(){
				
				API.findByCard({
					cardNo: this.cardNo,
				
				}).then((response) => {
					
					var data = response.data
					
					if(data.regUser){
						
						this.cardText="当前卡号已被其他用户绑定";
					}else{
						this.cardText="未绑定";
					}
					
				
				}).catch(error => {
				
					this.cardText=error;
				})
			},
			submit() {
				if (!this.cardNo) {
					uni.showToast({
						title: "请填写绑定卡号",
					})
					return;
				}
				
				if (!this.phone) {
					uni.showToast({
						title: "请填写绑定手机号",
					})
					return;
				}
				if (!this.code) {
					uni.showToast({
						title: "请填写验证码"
					})
					return
				}
				
				var checkPhoneResult = checkPhone(this.phone);

				if (checkPhoneResult !== true) {
					uni.showToast({
						title: checkPhoneResult,

					})
					return;
				}

				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.findByCard({
					cardNo: this.cardNo,
				
				}).then((response) => {
					
					var data = response.data
					uni.hideLoading()
					if(data.regUser){
						uni.showModal({
							title:"提示",
							content:"当前卡号已被其他用户绑定",
							showCancel:false,
						})
					}else{
						this.submitApi()
					}
					
				
				}).catch(error => {
					uni.hideLoading()
					uni.showModal({
						title:"提示",
						content:error,
						showCancel:false,
					})
				})
			},


		},
		onShow() {
			if (this.isReady) {

			}
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.FF7B00 {
		color: #FF7B00;
	}
	.color3a7cf6{
		color: #58ba73;
	}
	
	.foot-btn{
		margin-top: 80rpx;
	}
	.recharge {
		padding:0 30rpx 30rpx 30rpx;
		//background-color: #1677FF;
		background-color: #fff;
		margin-bottom: 20rpx;

		.recharge-text {
			font-size: 36rpx;
			padding:12rpx;
			width: 100%;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #eeeeee;

			.recharge-title {
				    min-width: 30%;
				    color: rgb(96, 98, 102);
			}
		}

	}
	.login-code {
		color: #1677ff;
		    white-space: pre;
	}
</style>