You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
high-mini/pages/user/bindingCard/bindingCard.vue

322 lines
8.4 KiB

<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 && type == 2">
<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">
<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 {
sendSmsCode,
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.getHuiLianTongCardByPhone();
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;
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;
return;
}
this.UserCard = '';
});
},
//选择卡类型
changeUserCard(e) {
this.type = this.cardList[e.target.value].codeValue;
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;
},
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;
}
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>