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">绑定卡号</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">
				<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">
					<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 FF7B00 ">
					未绑定
				</view>

			</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">
					{{name}}
				</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 color3a7cf6 ">
					已绑定
				</view>
		
			</view>
			<view class="foot-btn">
		
				<u-button type="success" @click="gotoUrl('pages/user/rechargeByPhone?phone='+phone)" shape="square">前往充值</u-button>
			</view>
		</view>


	</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:"",
				queryCard:{},
				queryInfo:false,
			}
		},
		onLoad(op) {


		},
		onReady() {

		},
		methods: {
			submitApi() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.bindCard({
					cardNo: this.cardNo,
					phone: this.phone,
					name: this.name
				}).then((response) => {
					
					var data = response.data
					uni.hideLoading()
					this.queryInfo=true
				
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			submit() {
				if (!this.cardNo) {
					uni.showToast({
						title: "请填写绑定卡号",
					})
					return;
				}
				if (!this.name) {
					uni.showToast({
						title: "请填写用户姓名",
					})
					return;
				}
				if (!this.phone) {
					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,
						})
					}
					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 {
				width: 30%;
				    color: rgb(96, 98, 102);
			}
		}

	}
</style>