366 lines
9.9 KiB
Vue
366 lines
9.9 KiB
Vue
|
|
<style lang="scss">
|
|
@import '@/static/scss/global.scss';
|
|
.form_wraper {
|
|
height: 100vh;
|
|
padding: 20rpx 30rpx;
|
|
}
|
|
</style>
|
|
<template>
|
|
<view class="form_wraper bg-w">
|
|
<u--form
|
|
labelPosition="left"
|
|
ref="form1"
|
|
labelWidth="100"
|
|
:model="formData"
|
|
:rules="rules"
|
|
>
|
|
<u-form-item
|
|
label="持卡人姓名"
|
|
borderBottom
|
|
prop="cardholderName"
|
|
>
|
|
<u--input
|
|
v-model="formData.cardholderName"
|
|
border="none"
|
|
placeholder="请输入持卡人姓名"
|
|
></u--input>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label="持卡人证件号"
|
|
borderBottom
|
|
prop="cardholderCode"
|
|
>
|
|
<u--input
|
|
v-model="formData.cardholderCode"
|
|
border="none"
|
|
placeholder="请输入持卡人身份证号"
|
|
></u--input>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label="手机号"
|
|
borderBottom
|
|
prop="cardholderPhone"
|
|
>
|
|
<u--input
|
|
v-model="formData.cardholderPhone"
|
|
border="none"
|
|
placeholder="请输入持卡人手机号"
|
|
></u--input>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label="银行卡号"
|
|
borderBottom
|
|
prop="bankCardNumber"
|
|
>
|
|
<u--input
|
|
v-model="formData.bankCardNumber"
|
|
border="none"
|
|
type="number"
|
|
placeholder="请输入银行卡号"
|
|
@input="handlerInput"
|
|
v-if="!isLook"
|
|
></u--input>
|
|
<text v-else>{{formData.bankCardNumber}}</text>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label="开户行"
|
|
borderBottom
|
|
@click="showBank = true"
|
|
prop="bankName"
|
|
>
|
|
<u--input
|
|
v-model="bankName"
|
|
border="none"
|
|
placeholder="请选择开户行"
|
|
disabled
|
|
disabledColor="#ffffff"
|
|
></u--input>
|
|
<u-icon
|
|
v-if="!isLook"
|
|
slot="right"
|
|
name="arrow-right"
|
|
></u-icon>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label="省/市/区"
|
|
borderBottom
|
|
prop="province"
|
|
@click="!isLook && (regionVisible = true)"
|
|
>
|
|
<u--input
|
|
v-model="regionText"
|
|
border="none"
|
|
placeholder="请选择省/市/区"
|
|
disabled
|
|
disabledColor="#ffffff"
|
|
></u--input>
|
|
<u-icon
|
|
v-if="!isLook"
|
|
slot="right"
|
|
name="arrow-right"
|
|
></u-icon>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label="乡/镇"
|
|
borderBottom
|
|
prop="town"
|
|
>
|
|
<u--input
|
|
v-model="formData.town"
|
|
border="none"
|
|
placeholder="请输入乡/镇"
|
|
></u--input>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label="支行"
|
|
borderBottom
|
|
prop="bankSubBranch"
|
|
>
|
|
<u--input
|
|
v-model="formData.bankSubBranch"
|
|
border="none"
|
|
placeholder="请输入支行名称"
|
|
></u--input>
|
|
</u-form-item>
|
|
</u--form>
|
|
<u-gap height="140rpx"></u-gap>
|
|
<u-button v-if="!pageType" @click="handlerBind" type="primary" :text="!isLook ? '绑定银行卡':''"></u-button>
|
|
<view class="flex" v-else>
|
|
<u-button @click="handlerBack" type="primary" text="返回列表"></u-button>
|
|
<u-button style="margin-left: 20rpx;" @click="handlerBind" type="primary" text="解绑"></u-button>
|
|
</view>
|
|
<u-action-sheet
|
|
:show="showBank"
|
|
:actions="bankList"
|
|
title="请选择开户行"
|
|
@close="showBank = false"
|
|
@select="handlerBank"
|
|
>
|
|
</u-action-sheet>
|
|
<w-picker
|
|
:visible.sync="regionVisible"
|
|
ref="regionPicker"
|
|
mode="region"
|
|
:value="positionValue"
|
|
@confirm="onRegionConfirm"
|
|
themeColor="#3a2397"
|
|
></w-picker>
|
|
<u-toast ref="uToast"></u-toast>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
let reg = /^([1-9]{1})(\d{15}|\d{16}|\d{18})$/;
|
|
import { getBankName, bindBank, getCardDetail, ubbindCard } from '@/api/system/user.js'
|
|
import { regIdCard, regPhone, regBank,regIdCardTaiWan,regIdCardAoMen,regIdCardHongKong } from '@/utils/regular.js';
|
|
import wPicker from "@/components/w-picker/w-picker.vue"
|
|
export default {
|
|
components: { wPicker },
|
|
data() {
|
|
return {
|
|
// formData: {
|
|
// cardholderName: '1',
|
|
// cardholderCode: '411425202202222666',
|
|
// cardholderPhone: '15666666666',
|
|
// bankCardNumber: '6227002500610735078',
|
|
// bankName: '5',
|
|
// bankSubBranch: '1',
|
|
// },
|
|
formData: {
|
|
cardholderName: '',
|
|
cardholderCode: '',
|
|
cardholderPhone: '',
|
|
bankCardNumber: '',
|
|
bankName: '',
|
|
province: '',
|
|
city: '',
|
|
district: '',
|
|
town: '',
|
|
bankSubBranch: '',
|
|
},
|
|
rules: {
|
|
cardholderName: [
|
|
{ required: true, message: '请输入持卡人姓名', trigger: ['blur','change'] }
|
|
],
|
|
cardholderCode: [
|
|
{ required: true, message: '请输入持卡人身份证号', trigger: ['blur','change'] },
|
|
{ validator: (rule, value, callback) => {
|
|
if (!value) return callback(new Error('请输入持卡人身份证号'))
|
|
if (regIdCard.test(value) || regIdCardTaiWan.test(value) || regIdCardAoMen.test(value) || regIdCardHongKong.test(value)) return callback()
|
|
return callback(new Error('请输入正确的身份证号'))
|
|
}, trigger: ['blur','change'] }
|
|
],
|
|
cardholderPhone: [
|
|
{ required: true, message: '请输入持卡手机号', trigger: ['blur','change'] },
|
|
{ pattern: regPhone, message: '请输入正确的手机号', trigger: ['blur','change'] }
|
|
],
|
|
bankCardNumber: [
|
|
{ required: true, message: '请输入银行卡号', trigger: ['blur','change'] },
|
|
{ pattern: /^([1-9]{1})(\d{15}|\d{16}|\d{18})$/, message: '请输入正确银行卡号', trigger: ['blur','change'] }
|
|
],
|
|
bankName: [
|
|
{ required: true, message: '请选择开户行', trigger: ['change'] }
|
|
],
|
|
province: [
|
|
{ required: true, message: '请输入省份', trigger: ['blur','change'] }
|
|
],
|
|
city: [
|
|
{ required: true, message: '请输入城市', trigger: ['blur','change'] }
|
|
],
|
|
district: [
|
|
{ required: true, message: '请输入区县', trigger: ['blur','change'] }
|
|
],
|
|
town: [
|
|
{ required: true, message: '请输入乡/镇', trigger: ['blur','change'] }
|
|
],
|
|
bankSubBranch: [
|
|
{ required: true, message: '请输入支行名称', trigger: ['blur','change'] }
|
|
]
|
|
},
|
|
bankList: [],
|
|
bankName: '',
|
|
showBank: false,
|
|
regionVisible: false,
|
|
regionText: "",
|
|
positionValue: [],
|
|
isLook: false,
|
|
detail: {},
|
|
pageType: ''
|
|
};
|
|
},
|
|
onLoad(e) {
|
|
if (e.use == '2') {
|
|
this.formData.use = e.use
|
|
}
|
|
this.pageType = e.type;
|
|
console.log('this.pagType', e);
|
|
if (e.type == 'detail') {
|
|
uni.setNavigationBarTitle({
|
|
title: '银行卡详情'
|
|
})
|
|
}
|
|
if (e.params) {
|
|
this.isLook = true
|
|
this.detail = JSON.parse(e.params)
|
|
this.detail.bankCardNumber = this.detail.bankCardNumber.replace(/\s/g,'').replace(/(\d{4})(?=\d)/g, "$1 ")
|
|
this.formData = this.detail;
|
|
this.formData.province = this.formData.province || ''
|
|
this.formData.city = this.formData.city || ''
|
|
this.formData.district = this.formData.district || ''
|
|
this.formData.town = this.formData.town || ''
|
|
this.regionText = `${this.formData.province}${this.formData.city}${this.formData.district}`.trim()
|
|
this.positionValue = (this.formData.province && this.formData.city && this.formData.district)
|
|
? [this.formData.province, this.formData.city, this.formData.district]
|
|
: []
|
|
this.bankName = this.detail.bankLabel
|
|
console.log('this.detail',this.detail.bankLabel)
|
|
}
|
|
this.getBankName();
|
|
},
|
|
onShow() {
|
|
this.formData.bankName = uni.getStorageSync('licaiBank') || '';
|
|
// this.bankName = uni.getStorageSync('licaiBank') || '';
|
|
uni.removeStorageSync('licaiBank')
|
|
},
|
|
methods: {
|
|
onRegionConfirm(e) {
|
|
this.regionText = e.result || ""
|
|
this.formData.province = e?.obj?.province?.label || ""
|
|
this.formData.city = e?.obj?.city?.label || ""
|
|
this.formData.district = e?.obj?.area?.label || ""
|
|
this.positionValue = (this.formData.province && this.formData.city && this.formData.district)
|
|
? [this.formData.province, this.formData.city, this.formData.district]
|
|
: []
|
|
|
|
if (this.$refs.form1 && this.$refs.form1.validateField) {
|
|
this.$refs.form1.validateField('province')
|
|
this.$refs.form1.validateField('city')
|
|
this.$refs.form1.validateField('district')
|
|
}
|
|
},
|
|
handlerBack () {
|
|
uni.navigateBack()
|
|
},
|
|
goPage () {
|
|
uni.navigateTo({
|
|
url: '/pages/user/bankList?enterType=licai'
|
|
})
|
|
},
|
|
getCardDetail () {
|
|
this.bankList.forEach((item) => {
|
|
console.log(this.detail.bankName)
|
|
if (this.detail.bankName == item.dictValue) {
|
|
console.log(this.detail.dictCode)
|
|
this.bankName = item.dictLabel
|
|
}
|
|
})
|
|
// getCardDetail(7)
|
|
},
|
|
async ubbindCard () {
|
|
console.log(this.detail.id);
|
|
uni.showLoading({
|
|
mask: true
|
|
})
|
|
let res = await ubbindCard(this.detail.id)
|
|
let { code } = res
|
|
uni.hideLoading()
|
|
if (code == 200) {
|
|
this.$toast('解绑成功', () => {
|
|
uni.navigateBack()
|
|
});
|
|
}
|
|
},
|
|
async handlerBind () {
|
|
if (this.pageType) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定解绑该银行卡吗？',
|
|
cancelColor: '取消',
|
|
confirmColor: '确定',
|
|
success: (res) => {
|
|
if (res.confirm) this.ubbindCard();
|
|
}
|
|
})
|
|
return;
|
|
}
|
|
this.$refs.form1.validate().then(async () => {
|
|
let res = await bindBank(this.formData);
|
|
if (res.code == 200) this.$toast('绑定成功', () => {
|
|
uni.navigateBack()
|
|
});
|
|
}).catch(() => {})
|
|
},
|
|
handlerInput (e) {
|
|
console.log(e)
|
|
// 6227002500610735078
|
|
if (!reg.test(e)) return;
|
|
},
|
|
handlerBank (e) {
|
|
console.log(e)
|
|
this.formData.bankName = e.dictValue;
|
|
this.bankName = e.dictLabel
|
|
if (this.$refs.form1 && this.$refs.form1.validateField) {
|
|
this.$refs.form1.validateField('bankName')
|
|
}
|
|
},
|
|
async getBankName () {
|
|
let res = await getBankName();
|
|
let { code, data } = res
|
|
if (code == 200) {
|
|
data.forEach((item) => {
|
|
item.name = item.dictLabel
|
|
})
|
|
this.bankList = data
|
|
if (this.isLook) {
|
|
this.getCardDetail();
|
|
}
|
|
}
|
|
console.log(res)
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|