high-mini/pages/user/bindingCard/bindingCard.vue

<template>
	<view>
		<view class="form re" style="top: 100rpx;">

			<view class="username paddtop10">
				<picker mode="selector" style="width: 90%;" :range="cardList" range-key="codeName"
					@change="changeUserCard">
					<view class="date text1" style="padding: 0 25rpx;">{{typeName}}</view>
				</picker>
				<image class="flright" style="width: 15px;height: 15px;" src="../../../static/img/downj.png"></image>
			</view>

				<view class="username paddtop10" v-if="UserCard">
				<picker mode="selector" style="width: 90%;" :range="UserCard" range-key="cardNo" @change="bindUserCard">
					<view class="date text1" style="padding: 0 25rpx;">{{cardNoNumber}}</view>
				</picker>
				<image class="flright" style="width: 15px;height: 15px;" src="../../../static/img/downj.png"></image>
			</view>


			<view class="username" v-if="!UserCard">
				<input style="width: 100%;" :disabled="disStute" maxlength="19" placeholder="请输入卡号"
					v-model="cardNoNumber" placeholder-style="color: #333333;" />
			</view>
			<view class="username" v-if="phoneNumber">
				<view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">{{getCodeText}}</view>
				<input disabled="true" v-model="phoneNumber" placeholder-style="color: #333333;" />
			</view>
			<view class="code" v-if="phoneNumber">
				<input placeholder="请输入验证码" v-model="code" placeholder-style="color: #333333;" />
			</view>
			<view class="btn mart50" @tap="bindHuiLianTongCard" v-if="phoneNumber">绑定卡号</view>
			<view class="btn mart50" @tap="doCardNonum" v-else>获取预留手机号</view>
		</view>
		<!-- 	<view class="width90 mart20 height120 backcorfff fotct" style="position: absolute;top: 70%;" v-if="type == 1">
			<view class="fontlet  font20 fcor666 fontwig6 height45l " style="border-bottom: 1px solid #F4F4F4;">【温馨提示】
			</view>
			<view class="fontlet  font20 fcor666 fontwig6 height45l paddtop10">1元可抵扣100积分</view>
		</view> -->
	</view>
</template>

<script>
	import md5 from "@/common/SDK/md5.min.js";
	import {
		sendSmsCodeByHw,
		getHuiLianTongCardByCardNo,
		getDetailByCardNo,
		bindHuiLianTongCard,
		getUserCardList,
		getHuiLianTongCardByPhone,
		getDictionaryByCodeType
	} from '../../../Utils/Api.js';
	let app = getApp();
	export default {
		data() {
			return {
				cardNoNumber: "",
				phoneNumber: "",
				code: '',
				getCodeText: '获取验证码',
				getCodeBtnColor: "#0083f5",
				getCodeisWaiting: false,
				disStute: false,
				UserCard: '',
				cardList: [], // 卡列表
				typeName: '', // 卡名称
				type: '' //区分类型
			}
		},
		onLoad(options) {
			this.user = app.globalData.userInfo;
			this.getDictionaryByCodeType();
		},

		methods: {
			Timer() {},
			getDictionaryByCodeType() {
				let datas = {
					codeType: 'USER_CARD_TYPE'
				}
				getDictionaryByCodeType(datas).then(res => {
					if (res.return_code == '000000') {
						this.cardList = res.return_data;
						this.type = res.return_data[0].codeValue;
						if (this.type == 1) {
							this.getHuiLianTongCardByPhone();
						}
						this.typeName = res.return_data[0].codeName;
					}
				})
			},
			//查询我的卡号列表
			getHuiLianTongCardByPhone() {
				let params = {
					phone: this.user.phone
				}
				uni.showLoading();
				getHuiLianTongCardByPhone(params).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000' && res.return_data != '') {
						this.UserCard = res.return_data;
						this.cardNoNumber = res.return_data[0].cardNo;
						let params = {
							cardNo: this.cardNoNumber
						}
						this.getHuiLianTongCardByCardNo(params);
						return;
					}
					this.UserCard = '';
				});
			},
			//选择卡类型
			changeUserCard(e) {
				this.type = this.cardList[e.target.value].codeValue;
				if(this.type == 1){
					this.getHuiLianTongCardByPhone();
				}
				this.typeName = this.cardList[e.target.value].codeName;
				this.cardNoNumber = '';
				this.phoneNumber = '';
				this.disStute = false;
			},
			//选择卡号
			bindUserCard(e) {
				this.cardNoNumber = this.UserCard[e.target.value].cardNo;
				let params = {
					cardNo: this.cardNoNumber
				}
				this.getHuiLianTongCardByCardNo(params);
			},
			getCode() {
				uni.hideKeyboard()
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				uni.showLoading({
					title: '发送中...'
				})
				let params = {
					phone: this.phoneNumber,
					HWMSG: 1
				}
				sendSmsCodeByHw(params).then(res => {
					if (res.return_code == '000000') {
						this.getCodeisWaiting = true;
						this.getCodeBtnColor = "#999999"
						uni.showToast({
							title: '验证码已发送',
							icon: "none"
						});
						this.setTimer();
					} else {
						uni.hideLoading()
					}
				})
			},
			setTimer() {
				let holdTime = 60;
				this.getCodeText = "重新获取(60)"
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#333333";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer);
						return;
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;

				}, 1000)
			},
			//获取预留手机号
			doCardNonum() {
				if (!this.cardNoNumber) {
					uni.showToast({
						title: '请填写卡号',
						icon: "none"
					});
					return;
				}
				if (this.cardNoNumber.length != 19 && this.type == 1) {
					uni.showToast({
						title: '请填写正确的19位工会卡号',
						icon: "none"
					});
					return;
				}
				if (this.cardNoNumber.length != 16 && this.type == 2) {
					uni.showToast({
						title: '请填写正确的16位油卡号',
						icon: "none"
					});
					return;
				}

				let params = {
					cardNo: this.cardNoNumber
				}
				if (this.type == 1) {
					this.getHuiLianTongCardByCardNo(params);
				}
				if (this.type == 2) {
					this.getDetailByCardNo(params);
				}

			},
			//查询工会卡
			getHuiLianTongCardByCardNo(items) {
				uni.showLoading({
					title: '查询中...'
				})
				getHuiLianTongCardByCardNo(items).then(res => {
					uni.hideLoading()
					if (res.return_code == '000000') {
						this.phoneNumber = res.return_data.userMobile;
						// this.phoneNumber = 15583658692;
						this.disStute = true
					} else {
						uni.showToast({
							title: res.return_msg,
							icon: "none"
						});
					}
				})
			},
			//查询油卡
			getDetailByCardNo(items) {
				uni.showLoading({
					title: '查询中...'
				})
				getDetailByCardNo(items).then(res => {
					uni.hideLoading()
					if (res.return_code == '000000') {
						this.phoneNumber = res.return_data.contactPhone;
						// this.phoneNumber = 15583658692;
						this.disStute = true
					} else {
						uni.showToast({
							title: res.return_msg,
							icon: "none"
						});
					}
				})
			},
			//绑定卡号
			bindHuiLianTongCard() {
				uni.hideKeyboard()
				//模板示例部分验证规则
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				if (!this.code) {
					uni.showToast({
						title: '请填写验证码',
						icon: "none"
					});
					return false;
				}
				uni.showLoading({
					title: '提交中...'
				})
				let params = {
					type: this.type,
					cardNo: this.cardNoNumber,
					phone: this.phoneNumber,
					smsCode: this.code
				}
				bindHuiLianTongCard(params).then(res => {
					uni.hideLoading()
					if (res.return_code == '000000') {
						app.globalData.userInfo = res.return_data
							.object
							.highUser;
						app.globalData.token = res.return_data.uniqueCode;
						uni.setStorage({
							key: "user",
							data: res.return_data
								.object
								.highUser
						})
						uni.showToast({
							title: '绑定成功',
							icon: "success",
							duration: 2000,
							success() {
								setTimeout(() => {
									uni.navigateBack({})
								}, 1000)
							}
						});
					} else {
						uni.showToast({
							title: res.return_msg,
							icon: "none"
						});
					}
				})

			},
		}
	}
</script>

<style lang="scss">
	@import "../../../static/css/login.scss";

	.wximg {
		width: 50px;
		height: 50px;
		margin-left: 40%;
		margin-top: 250upx;
	}

	.flex1 {
		flex: 1;
		text-align: right;
		width: 70%;
		padding-right: 25rpx;
		color: #999999;
		font-size: 32rpx;
	}
</style>