forked from angelo/web-retail-h5
279 lines
7.1 KiB
Vue
279 lines
7.1 KiB
Vue
|
<!--
|
|||
|
|
* @Descripttion:
|
|||
|
|
* @version:
|
|||
|
|
* @Author: kBank
|
|||
|
|
* @Date: 2022-11-21 15:11:22
|
|||
|
|
-->
|
|||
|
|
<template>
|
|||
|
|
<view class="content">
|
|||
|
|
<view class="index_header">
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="contxt">
|
|||
|
|
<view class="kuang">
|
|||
|
|
<u-form :model="form"
|
|||
|
|
labelWidth="auto"
|
|||
|
|
:rules="rules"
|
|||
|
|
ref="uForm">
|
|||
|
|
<u-form-item :label="$t('MY_WAL_24')"
|
|||
|
|
required
|
|||
|
|
prop="bankNo">
|
|||
|
|
<u-input v-model="form.bankNo"
|
|||
|
|
:placeholder="$t('w_0188')" />
|
|||
|
|
</u-form-item>
|
|||
|
|
<u-form-item :label="$t('PER_DA_14')"
|
|||
|
|
required
|
|||
|
|
prop="name">
|
|||
|
|
<u-input v-model="form.name"
|
|||
|
|
:placeholder="$t('w_0300')" />
|
|||
|
|
</u-form-item>
|
|||
|
|
<u-form-item :label="$t('ENU_I_T_1')"
|
|||
|
|
required
|
|||
|
|
prop="idCard">
|
|||
|
|
<u-input v-model="form.idCard"
|
|||
|
|
:placeholder="$t('w_0190')" />
|
|||
|
|
</u-form-item>
|
|||
|
|
<u-form-item :label="$t('w_0180')"
|
|||
|
|
required
|
|||
|
|
prop="phone">
|
|||
|
|
<u-input v-model="form.phone"
|
|||
|
|
maxlength="20"
|
|||
|
|
type="number"
|
|||
|
|
:placeholder="$t('w_0341')" />
|
|||
|
|
</u-form-item>
|
|||
|
|
<u-form-item label="有效期">
|
|||
|
|
<u-input v-model="form.validdate"
|
|||
|
|
:placeholder="$t('S_C_70')" />
|
|||
|
|
</u-form-item>
|
|||
|
|
<u-form-item label="安全码">
|
|||
|
|
<u-input v-model="form.cvv2"
|
|||
|
|
:placeholder="$t('S_C_70')" />
|
|||
|
|
</u-form-item>
|
|||
|
|
<u-form-item :label="$t('w_0043')"
|
|||
|
|
required
|
|||
|
|
prop="smsCode">
|
|||
|
|
<u-input v-model="form.smsCode"
|
|||
|
|
:placeholder="$t('w_0057')">
|
|||
|
|
<template slot="suffix">
|
|||
|
|
<view class="getCode"
|
|||
|
|
@tap="submitForm">{{ getCode }}</view>
|
|||
|
|
</template>
|
|||
|
|
</u-input>
|
|||
|
|
</u-form-item>
|
|||
|
|
</u-form>
|
|||
|
|
<div class="tips" v-if="bank=='hf'">
|
|||
|
|
<p>1、目前汇付支付支持绑定信用卡、储蓄卡</p>
|
|||
|
|
<p>2、当绑定信用卡时，“安全码”、“有效期”两栏为必填项</p>
|
|||
|
|
<p>3、安全码为信用卡背面签名栏后3位数字；</p>
|
|||
|
|
<p>4、信用卡有效期格式不加/，例信用卡有效期10/24，请输入：1024</p>
|
|||
|
|
</div>
|
|||
|
|
<u-button type="success"
|
|||
|
|
class="uBtn"
|
|||
|
|
shape="circle"
|
|||
|
|
color="linear-gradient(to right, #fb3024, #fb3024 )"
|
|||
|
|
:loading="isLoading"
|
|||
|
|
:loadingText="$t('w_0342')"
|
|||
|
|
@click="toBind">{{ $t('w_0343') }}</u-button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import * as pay from '@/config/pay.js'
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
form: {
|
|||
|
|
bankNo: '',
|
|||
|
|
},
|
|||
|
|
isLoading: false,
|
|||
|
|
getCode: this.$t('w_0055'),
|
|||
|
|
isSend: false,
|
|||
|
|
beginTime: 60,
|
|||
|
|
bankCode: '',
|
|||
|
|
timer: '',
|
|||
|
|
bank: '',
|
|||
|
|
rules: {
|
|||
|
|
bankNo: [
|
|||
|
|
{
|
|||
|
|
required: true,
|
|||
|
|
message: this.$t('w_0188'),
|
|||
|
|
trigger: ['change', 'blur'],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
idCard: [
|
|||
|
|
{
|
|||
|
|
required: true,
|
|||
|
|
message: this.$t('w_0190'),
|
|||
|
|
trigger: ['change', 'blur'],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
phone: [
|
|||
|
|
{
|
|||
|
|
required: true,
|
|||
|
|
message: this.$t('w_0053'),
|
|||
|
|
trigger: ['change', 'blur'],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
name: [
|
|||
|
|
{
|
|||
|
|
required: true,
|
|||
|
|
message: this.$t('w_0300'),
|
|||
|
|
trigger: ['change', 'blur'],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
this.bank = options.bank
|
|||
|
|
// this.getInfo()
|
|||
|
|
},
|
|||
|
|
onShow() {},
|
|||
|
|
methods: {
|
|||
|
|
toBind() {
|
|||
|
|
if (!this.bankCode) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$t('w_0057'),
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 1500,
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
let url = ''
|
|||
|
|
if (this.bank == 'tl') {
|
|||
|
|
url = pay.bindTlConfirm
|
|||
|
|
} else if (this.bank == 'jd') {
|
|||
|
|
url = pay.bindJdConfirm
|
|||
|
|
} else if (this.bank == 'hf') {
|
|||
|
|
url = pay.bindHfConfirm
|
|||
|
|
}
|
|||
|
|
url({
|
|||
|
|
bindCode: this.bankCode,
|
|||
|
|
smsCode: this.form.smsCode,
|
|||
|
|
}).then((res) => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$t('w_0344'),
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 1500,
|
|||
|
|
})
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}, 1500)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
areBothValuesSet(val1, val2) {
|
|||
|
|
return (
|
|||
|
|
((val1 === null || val1 === undefined || val1 === '') &&
|
|||
|
|
(val2 === null || val2 === undefined || val2 === '')) ||
|
|||
|
|
(val1 !== null &&
|
|||
|
|
val1 !== undefined &&
|
|||
|
|
val1 !== '' &&
|
|||
|
|
val2 !== null &&
|
|||
|
|
val2 !== undefined &&
|
|||
|
|
val2 !== '')
|
|||
|
|
)
|
|||
|
|
},
|
|||
|
|
// 绑卡获取验证码
|
|||
|
|
submitForm() {
|
|||
|
|
this.$refs.uForm.validate().then((res) => {
|
|||
|
|
if (!this.areBothValuesSet(this.form.validdate, this.form.cvv2)) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请输入安全码及有效期',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 1500,
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
for (let key in this.form) {
|
|||
|
|
if (this.form[key] == '') {
|
|||
|
|
delete this.form[key]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.startTime()
|
|||
|
|
let url = ''
|
|||
|
|
if (this.bank == 'tl') {
|
|||
|
|
url = pay.bindTl
|
|||
|
|
} else if (this.bank == 'jd') {
|
|||
|
|
url = pay.bindJd
|
|||
|
|
} else if (this.bank == 'hf') {
|
|||
|
|
url = pay.bindHf
|
|||
|
|
}
|
|||
|
|
url(this.form)
|
|||
|
|
.then((res) => {
|
|||
|
|
if(res.code == 200){
|
|||
|
|
this.bankCode = res.data
|
|||
|
|
}else{
|
|||
|
|
this.beginTime = 0
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 倒计时
|
|||
|
|
startTime() {
|
|||
|
|
if (this.isSend) return
|
|||
|
|
this.isSend = true
|
|||
|
|
this.getCode = this.beginTime + ' s'
|
|||
|
|
let that = this
|
|||
|
|
this.timer = setInterval(() => {
|
|||
|
|
this.beginTime--
|
|||
|
|
this.getCode = this.beginTime + ' s'
|
|||
|
|
if (this.beginTime < 0) {
|
|||
|
|
clearInterval(this.timer)
|
|||
|
|
this.getCode = this.$t('w_0055')
|
|||
|
|
this.beginTime = 60
|
|||
|
|
this.isSend = false
|
|||
|
|
}
|
|||
|
|
}, 1000)
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.content {
|
|||
|
|
background: #f9f9f9;
|
|||
|
|
}
|
|||
|
|
.index_header {
|
|||
|
|
background: #f9f9f9;
|
|||
|
|
height: 330rpx;
|
|||
|
|
}
|
|||
|
|
.contxt {
|
|||
|
|
margin-top: -320rpx;
|
|||
|
|
padding: 0 26rpx;
|
|||
|
|
}
|
|||
|
|
.kuang {
|
|||
|
|
// margin-top: 20rpx;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
height: 90vh;
|
|||
|
|
background: #fff;
|
|||
|
|
box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.5);
|
|||
|
|
border-radius: 10px 10px 10px 10px;
|
|||
|
|
}
|
|||
|
|
.getCode {
|
|||
|
|
font-size: 10px;
|
|||
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #18acff;
|
|||
|
|
}
|
|||
|
|
::v-deep .u-form-item__body__left {
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
::v-deep .u-form-item__body__right__message {
|
|||
|
|
margin-left: 80px !important;
|
|||
|
|
}
|
|||
|
|
.uBtn {
|
|||
|
|
margin-top: 120rpx;
|
|||
|
|
}
|
|||
|
|
.tips{
|
|||
|
|
font-size: 12px;
|
|||
|
|
p{
|
|||
|
|
// line-height: 10px;
|
|||
|
|
}
|
|||
|
|
color: #d5251d;
|
|||
|
|
}
|
|||
|
|
</style>
|