<template>
|
<view>
|
<u-toast ref="uToast" /><u-no-network></u-no-network>
|
<u-navbar title="添加银行卡" safeAreaInsetTop fixed placeholder>
|
<view class="coreshop-navbar-left-slot" slot="left">
|
<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
|
<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
|
<u-icon name="home" size="22" @click="goHome"></u-icon>
|
</view>
|
<view slot="right">
|
</view>
|
</u-navbar>
|
<view class="coreshop-padding-10">
|
<u--form :model="form" :rules="rules" ref="uForm" errorType="message" labelPosition="top" labelWidth="80">
|
<u-form-item label="银行卡号" prop="cardNumber" borderBottom>
|
<u--input type="text" v-model="form.cardNumber" placeholder="请输入银行卡号" @blur="checkCard()"></u--input>
|
</u-form-item>
|
<u-form-item label="持卡人姓名" prop="name" borderBottom>
|
<u--input type="text" v-model="form.name" placeholder="请输入持卡人姓名"></u--input>
|
</u-form-item>
|
<u-form-item label="银行名称" borderBottom>
|
<u--input type="text" :disabled="true" v-model="form.bankName"></u--input>
|
</u-form-item>
|
<u-form-item label="银行卡类型" borderBottom>
|
<u--input type="text" :disabled="true" v-model="form.cardTypeName"></u--input>
|
</u-form-item>
|
<u-form-item label="开户行名" borderBottom>
|
<u--input type="text" v-model="form.accountBank" placeholder="请输入开户银行名"></u--input>
|
</u-form-item>
|
<u-form-item label="开户行地址" borderBottom>
|
<coreshop-select v-model="show" mode="mutil-column-auto" :list="pickerList" :default-value="pickerIndex" @confirm="onConfirm"></coreshop-select>
|
<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
|
<!-- #ifndef APP-NVUE -->
|
<u-input :value="pickerValue" type="select" placeholder="请选择省市区区域">
|
<template slot="suffix">
|
<u-button text="选择" type="success" size="mini" @click="show = true"></u-button>
|
</template>
|
</u-input>
|
<!-- #endif -->
|
<!-- #ifdef APP-NVUE -->
|
<u--input :value="pickerValue" type="select" placeholder="请选择省市区区域">
|
<template slot="suffix">
|
<u-button text="选择" type="success" size="mini" @click="show = true"></u-button>
|
</template>
|
</u--input>
|
<!-- #endif -->
|
</u-form-item>
|
<!--<u-form-item label="设为默认">
|
<u-checkbox v-model="checked" @change="defaultChange">勾选将设为默认提现账户</u-checkbox>
|
</u-form-item>-->
|
<view class="coreshop-padding-15 flex coreshop-flex-nowrap">
|
<u-checkbox-group>
|
<u-checkbox v-model="checked" @change="defaultChange" label="勾选将设为默认提现账户"></u-checkbox>
|
</u-checkbox-group>
|
</view>
|
</u--form>
|
</view>
|
<!--按钮-->
|
<view class="coreshop-bg-white coreshop-footer-fixed coreshop-foot-padding-bottom">
|
<u-button type="error" size="normal" @click="addCard" :disabled='submitStatus' :loading='submitStatus'>保存</u-button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
form: {
|
cardNumber: '', // 银行卡号
|
name: '', // 开户人姓名
|
bankName: '', // 银行名称
|
bankCode: '', // 银行缩写码
|
accountBank: '', // 开户行
|
cardType: 1, // 卡类型
|
cardTypeName: '', // 卡片类型
|
isDefault: 0,
|
},
|
region: ['湖南省', '怀化市', '鹤城区'],
|
areaId: 0,
|
checked: false,
|
pickerValue: '',
|
submitStatus: false,
|
show: false,
|
pickerList: this.$db.get("areaList"),
|
province: this.$db.get("areaList"),
|
pickerIndex: [0, 0, 0], // picker索引值
|
provinceKey: -1,//省份id
|
cityKey: -1,//市id
|
areaKey: -1,//区域id
|
rules: {
|
cardNumber: [
|
{
|
required: true,
|
message: '请输入密码',
|
trigger: ['change', 'blur'],
|
},
|
{
|
type: 'number',
|
message: '请输入数字银行卡号',
|
trigger: ['change', 'blur'],
|
}
|
],
|
name: [
|
{
|
required: true,
|
message: '请输入姓名',
|
trigger: 'blur',
|
},
|
{
|
min: 2,
|
max: 4,
|
message: '姓名长度在2到4个字符',
|
trigger: ['change', 'blur'],
|
},
|
{
|
validator: (rule, value, callback) => {
|
return this.$u.test.chinese(value);
|
},
|
message: '必须为中文',
|
trigger: ['change', 'blur'],
|
}
|
],
|
},
|
}
|
},
|
computed: {},
|
onReady() {
|
this.$refs.uForm.setRules(this.rules);
|
},
|
methods: {
|
checkboxChange(n) {
|
this.form.checked = n;
|
console.log('change', n);
|
},
|
// 省市区联动初始化
|
showThreePicker() {
|
this.show = true;
|
},
|
// 选择收货地址
|
onConfirm(e) {
|
console.log(e);
|
let provinceName = e[0].label;
|
let cityName = e[1].label;
|
let countyName = e[2].label;
|
this.pickerValue = e[0].label + " " + e[1].label + " " + e[2].label
|
let data = {
|
provinceName: provinceName,
|
cityName: cityName,
|
countyName: countyName
|
}
|
//let regionName = [provinceName, cityName, countyName];
|
this.$u.api.getAreaId(data).then(res => {
|
if (res.status) {
|
this.areaId = res.data;
|
this.init();
|
} else {
|
uni.showModal({
|
title: '提示',
|
content: '地区选择出现问题，请重新选择地区',
|
showCancel: false
|
});
|
}
|
});
|
},
|
// 选择/取消默认
|
defaultChange(e) {
|
this.form.isDefault = e.value ? 1 : 0;
|
console.log(this.form.isDefault);
|
},
|
// 判断获取银行卡类型
|
checkCard() {
|
let _this = this;
|
if (this.form.cardNumber) {
|
let data = {
|
id: this.form.cardNumber
|
}
|
this.$u.api.getBankCardOrganization(data).then(res => {
|
if (res.status) {
|
let data = res.data
|
_this.form.bankName = data.name
|
_this.form.cardType = data.type
|
_this.form.bankCode = data.bankCode
|
_this.form.cardTypeName = data.typeName
|
} else {
|
_this.$refs.uToast.show({
|
message: res.msg, type: 'error', complete: function () {
|
_this.form.bankCode = _this.form.bankName = _this.form.cardType = _this.form.cardTypeName = ''
|
}
|
})
|
|
}
|
})
|
} else {
|
this.form.bankCode = this.form.bankName = this.form.cardType = this.form.cardTypeName = ''
|
}
|
},
|
// 添加银行卡
|
addCard() {
|
this.$refs.uForm.validate().then(res => {
|
console.log('验证通过');
|
if (!this.form.cardNumber) {
|
this.$u.toast('请输入银行卡号')
|
} else if (!this.form.bankName || !this.form.cardType || !this.form.bankCode) {
|
this.$u.toast('请输入正确的银行卡号')
|
} else if (!/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,30}$/.test(this.form.name)) {
|
this.$u.toast('请输入正确的持卡人名称')
|
} else if (this.areaId <= 0) {
|
this.$u.toast('请选择开户行所在地区')
|
} else if (!this.form.accountBank) {
|
this.$u.toast('请输入开户银行信息')
|
} else {
|
this.submitStatus = true;
|
let data = {
|
bankName: this.form.bankName,
|
bankCode: this.form.bankCode,
|
bankAreaId: this.areaId,
|
accountBank: this.form.accountBank,
|
accountName: this.form.name,
|
cardNumber: this.form.cardNumber,
|
cardType: this.form.cardType,
|
isDefault: this.form.isDefault
|
}
|
this.$u.api.addBankCard(data).then(res => {
|
this.submitStatus = false;
|
if (res.status) {
|
this.$refs.uToast.show({
|
message: res.msg, type: 'success', complete: function () {
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
})
|
} else {
|
this.$u.toast(res.msg);
|
}
|
});
|
}
|
}).catch(errors => {
|
uni.$u.toast('提交的数据校验失败，请输入合法信息！')
|
})
|
},
|
//倒查城市信息
|
getFullPath(id, data) {
|
for (var i = 0; i < data.length; i++) {
|
if (id == data[i].value) {
|
if (!data[i].children) {
|
this.areaKey = i;
|
return true;
|
} else if (data[i].hasOwnProperty("children")) {
|
if (data[i].children[0] && !data[i].children[0].children) {
|
this.cityKey = i;
|
return true;
|
} else {
|
this.provinceKey = i;
|
return true;
|
}
|
}
|
} else {
|
if (data[i].hasOwnProperty("children")) {
|
if (data[i].children[0] !== undefined) {
|
if (data[i].children[0].hasOwnProperty("children")) {
|
this.provinceKey = i;
|
} else {
|
this.cityKey = i;
|
}
|
}
|
if (typeof data[i].children != 'undefined') {
|
var res = this.getFullPath(id, data[i].children);
|
if (res) {
|
return true;
|
}
|
}
|
}
|
}
|
}
|
},
|
//增加默认省市区选中
|
init() {
|
this.getFullPath(this.areaId, this.province);
|
this.pickerIndex = [this.provinceKey, this.cityKey, this.areaKey];
|
console.log(this.pickerIndex);
|
},
|
},
|
onLoad(e) {
|
if (e.ship_id) {
|
//编辑
|
this.id = e.ship_id;
|
this.getShipInfo();
|
} else {
|
//添加（取消初始化）
|
//this.pickerValue = this.region[0] + " " + this.region[1] + " " + this.region[2];
|
//this.init();
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss">
|
page { background: #fff; }
|
</style>
|
