<template> <view> <view class="form re" style="top: 100rpx;"> <view class="username paddtop10" v-if="UserCard"> <picker mode="selector" style="width: 90%;" :range="UserCard" range-key="cardNo" @change="bindUserCard"> <view class="date text1">{{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: 390px;"> <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 { sendSmsCode, getHuiLianTongCardByCardNo, bindHuiLianTongCard, getUserCardList, getHuiLianTongCardByPhone } from '../../../Utils/Api.js'; let app = getApp(); export default { data() { return { cardNoNumber: "", phoneNumber: "", code: '', getCodeText: '获取验证码', getCodeBtnColor: "#0083f5", getCodeisWaiting: false, disStute: false, UserCard:'' } }, onLoad(options) { this.user = app.globalData.userInfo; this.getHuiLianTongCardByPhone(); }, methods: { Timer() {}, //查询我的卡号列表 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; return; } this.UserCard = ''; }); }, //选择卡号 bindUserCard(e) { this.cardNoNumber = this.UserCard[e.target.value].cardNo; }, 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 } sendSmsCode(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 false; } if (this.cardNoNumber.length != 19) { uni.showToast({ title: '请填写正确的19位卡号', icon: "none" }); return false; } uni.showLoading({ title: '查询中...' }) let params = { cardNo: this.cardNoNumber } getHuiLianTongCardByCardNo(params).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" }); } }) }, //绑定卡号 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 = { 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({ delta: 2 }) }, 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>