272 lines
11 KiB
Vue
272 lines
11 KiB
Vue
<template>
|
||
<BasePage>
|
||
<div class="cashoutaccount">
|
||
|
||
<div class="ca_content">
|
||
<van-cell-group class="list">
|
||
<van-swipe-cell v-for="i in data" :key="i.id">
|
||
<van-cell>
|
||
<template #title>
|
||
<div class="item">
|
||
<img :src="i.bankspname === '支付宝' ? '/img/aliicon.png' : '/img/bankcardicon.png'" alt="">
|
||
<div>
|
||
<span>
|
||
{{ i.bankspname === '支付宝' ? '支付宝账号' : i.bankspname }}（{{ i.bankcardnumber }}）
|
||
</span>
|
||
<p>
|
||
2小时内到账
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</van-cell>
|
||
<template #right>
|
||
<van-button style="height: 100%;" square text="删除" type="danger" class="delete-button"
|
||
@click="deleted(i)" />
|
||
</template>
|
||
</van-swipe-cell>
|
||
</van-cell-group>
|
||
</div>
|
||
|
||
|
||
<div class="ca_bottom">
|
||
<div class="tips">
|
||
<p>
|
||
<span>注意：</span>绑定添加银行卡必须保证银行卡号、银行预留手机号要同一个人信息才能添加成功，仅限 <span>“添加成功”</span> 状态的银行卡才可用于提现，添加不成功的银行卡无法用于提现！
|
||
</p>
|
||
</div>
|
||
|
||
<div class="btn_box">
|
||
<button class="alipay" @click="showAddAliPayPopup = true">
|
||
添加支付宝
|
||
</button>
|
||
<button class="bankcard" @click="showAddPopup = true">
|
||
添加银行卡
|
||
</button>
|
||
|
||
<div class="toCashout" @click="$navigate('Cashout')">
|
||
<b>去提现</b>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<van-action-sheet v-model:show="showAddAliPayPopup" :title="'新增支付宝账户'" style="min-height: 70vw;">
|
||
<div class="bankcard-edit">
|
||
<van-form @submit="save" label-align="top">
|
||
<van-cell-group inset>
|
||
<van-field v-model="tempData.realname" label="真实姓名" placeholder="请输入支付宝账号绑定真实姓名"
|
||
:rules="[{ required: true, message: '请填写真实姓名' }]" clearable required />
|
||
<van-field v-model="tempData.bankcellphone" label="支付宝账号" placeholder="请输入支付宝账号"
|
||
:rules="[{ required: true, message: '请填写支付宝账号' }]" clearable required />
|
||
<div class="w" style="position: fixed;left:0;bottom: 0;padding: 3.333vw;border-top:1px solid #f5f5f5">
|
||
<van-button color="#ea3e23" block round style="width: 100%" type="primary" native-type="save"
|
||
:loading="saving">保存</van-button>
|
||
</div>
|
||
</van-cell-group>
|
||
</van-form>
|
||
</div>
|
||
</van-action-sheet>
|
||
|
||
<van-action-sheet v-model:show="showAddPopup" :title="'新增银行卡'">
|
||
<div class="bankcard-edit">
|
||
<van-form @submit="saveBanks" label-align="top">
|
||
<van-cell-group inset>
|
||
<van-field v-model="tempData.realname" label="姓名" placeholder="请输入真实姓名"
|
||
:rules="[{ required: true, message: '请填写真实姓名' }]" clearable required />
|
||
<van-field v-model="tempData.idnumber" label="身份证" placeholder="请输入身份证号"
|
||
:rules="[{ required: true, message: '请输入身份证号' }]" clearable required :formatter="formatter" />
|
||
<van-field v-model="tempData.certbegindate" label="身份证起始日期" placeholder="请选择身份证起始日期"
|
||
:rules="[{ required: true, message: '请选择身份证起始日期' }]" clearable required is-link
|
||
@click="tempData.obj = 'certbegindate'; showDate = true;" readonly />
|
||
|
||
<van-field class="maxDate" name="radio" label="身份证截止日期" required>
|
||
<template #input>
|
||
<van-radio-group v-model="checked" direction="horizontal">
|
||
<van-radio :name="0">短期</van-radio>
|
||
<van-radio :name="1">长期</van-radio>
|
||
</van-radio-group>
|
||
</template>
|
||
</van-field>
|
||
<van-field v-model="tempData.certenddate" v-if="!checked" label=" " placeholder="请选择身份证截止日期"
|
||
:rules="[{ required: true, message: '请选择身份证起截止日期' }]" clearable is-link
|
||
@click="tempData.obj = 'certenddate'; showDate = true;" readonly />
|
||
<van-field v-model="tempData.bankcellphone" label="手机号" placeholder="请输入手机号"
|
||
:rules="[{ required: true, message: '请填写手机号' }]" type="phone" clearable required
|
||
:formatter="formatter" />
|
||
<van-field v-model="tempData.bankcardnumber" label="银行卡号" placeholder="请输入银行卡号"
|
||
:rules="[{ required: true, message: '请填写银行卡号' }]" clearable required :formatter="formatter" />
|
||
<van-field v-model="tempData.bankname" label="银行名称" placeholder="请输入银行名称"
|
||
:rules="[{ required: true, message: '请填写银行名称' }]" clearable required />
|
||
<van-field v-model="regionName" label="开户地区" placeholder="请选择开户地区"
|
||
:rules="[{ required: true, message: '请选择开户地区' }]" clearable required is-link @click="showRegion = true;"
|
||
readonly />
|
||
<van-cell>
|
||
<template #title>
|
||
<van-button color="#ea3e23" style="width: 100%" round type="primary" native-type="saveBanks"
|
||
:loading="saving">保存</van-button>
|
||
</template>
|
||
</van-cell>
|
||
</van-cell-group>
|
||
</van-form>
|
||
</div>
|
||
</van-action-sheet>
|
||
|
||
<van-popup v-model:show="showDate" position="bottom">
|
||
<van-date-picker v-model="currentDate" title="选择年月日" :columns-type="['year', 'month', 'day']"
|
||
:min-date="minDate" :max-date="maxDate" @confirm="onconfirm" @cancel="showDate = false" />
|
||
</van-popup>
|
||
|
||
<van-popup v-model:show="showRegion" round position="bottom">
|
||
<van-cascader v-model="region" title="请选择地区" :options="areaList" :field-names="defaultProps" @change="onChange"
|
||
@finish="onFinish" @close="showRegion = false" />
|
||
</van-popup>
|
||
</div>
|
||
</BasePage>
|
||
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import { useCascaderAreaData } from '@vant/area-data'
|
||
export default {
|
||
name: 'CashoutAccount',
|
||
mounted() {
|
||
this.init();
|
||
this.getBankId()
|
||
},
|
||
watch: {
|
||
'tempData.bankname': function (newVal) {
|
||
if (newVal && this.bankidGroup.length) {
|
||
const bank = this.bankidGroup.find(item => item.name.includes(newVal) || newVal.includes(item.name))
|
||
if (bank) {
|
||
this.tempData.bankid = bank.id
|
||
}
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
showAddAliPayPopup: false,
|
||
showAddPopup: false,
|
||
tempData: {},
|
||
saving: false,
|
||
checked: 0,
|
||
data: {},
|
||
showDate: false,
|
||
showRegion: false,
|
||
currentDate: [`${new Date().getFullYear()}`, `${new Date().getMonth() + 1}`],
|
||
minDate: new Date('1900/01/01'),
|
||
maxDate: new Date('2099/12/31'),
|
||
regionName: '',
|
||
region: '',
|
||
bankidGroup: {},
|
||
areaList: useCascaderAreaData(),
|
||
defaultProps: {
|
||
text: 'text',
|
||
value: 'value',
|
||
children: 'children',
|
||
},
|
||
}
|
||
},
|
||
methods: {
|
||
init() {
|
||
this.$get('/v1/client/DUserbankcardsClient').then(data => {
|
||
this.data = data.data;
|
||
}).catch(err => {
|
||
this.$showFailToast(err.message);
|
||
});
|
||
},
|
||
formatter(value) {
|
||
return value.replace(/\s/g, '');
|
||
},
|
||
getBankId() {
|
||
this.$get('/v1/client/DBanksClient').then(res => {
|
||
this.bankidGroup = res.data;
|
||
})
|
||
},
|
||
onChange({ selectedOptions }) {
|
||
this.tempData.provid = selectedOptions[0]?.value || '';
|
||
},
|
||
onFinish({ selectedOptions }) {
|
||
this.showRegion = false;
|
||
this.regionName = selectedOptions.map(item => item.text).join('/');
|
||
this.tempData.provid = selectedOptions[0]?.value || '';
|
||
this.tempData.areaid = selectedOptions[1]?.value || selectedOptions[0]?.value || '';
|
||
},
|
||
onconfirm({ selectedValues }) {
|
||
const date = selectedValues.join('-');
|
||
if (this.tempData.obj === 'certbegindate') {
|
||
this.tempData.certbegindate = date;
|
||
} else if (this.tempData.obj === 'certenddate') {
|
||
this.tempData.certenddate = date;
|
||
}
|
||
this.showDate = false;
|
||
},
|
||
save() {
|
||
this.saving = true;
|
||
this.$post('/v1/client/DUserbankcardsClient', { ...this.tempData, bankid: 91 }).then(data => {
|
||
this.$showSuccessToast('添加成功');
|
||
this.tempData = {};
|
||
// this.$refs.BaseList.refresh();
|
||
this.showAddAliPayPopup = false;
|
||
this.init();
|
||
}).catch(err => {
|
||
this.$showFailToast(err.message);
|
||
}).finally(() => {
|
||
this.saving = false;
|
||
});
|
||
},
|
||
saveBanks() {
|
||
if (!this.$validPhone(this.tempData.bankcellphone)) {
|
||
this.$showFailToast('手机号格式错误');
|
||
return;
|
||
}
|
||
if (!this.$validIdCard(this.tempData.idnumber)) {
|
||
this.$showFailToast('身份证格式错误');
|
||
return;
|
||
}
|
||
|
||
this.saving = true;
|
||
const params = {
|
||
"realname": this.tempData.realname,
|
||
"idnumber": this.tempData.idnumber,
|
||
"bankid": this.tempData.bankid || 0,
|
||
"bankname": this.tempData.bankname || '',
|
||
"bankcardnumber": this.tempData.bankcardnumber,
|
||
"bankcellphone": this.tempData.bankcellphone,
|
||
"sort": 0,
|
||
"certtype": '00',
|
||
"certvaliditytype": this.checked === 1 ? "1" : "0",
|
||
"certbegindate": this.tempData.certbegindate ? this.tempData.certbegindate.replaceAll('-', '') : '',
|
||
"certenddate": this.checked === 1 ? '' : (this.tempData.certenddate ? this.tempData.certenddate.replaceAll('-', '') : ''),
|
||
"cardtype": "1",
|
||
"provid": this.tempData.provid || '',
|
||
"areaid": this.tempData.areaid || '',
|
||
"isshopreceive": Boolean(this.$ls.get('isshop'))
|
||
// "isshopreceive": false
|
||
|
||
};
|
||
|
||
this.$post('/v1/client/DUserbankcardsClient', params).then(res => {
|
||
this.$showSuccessToast('添加成功');
|
||
this.tempData = {};
|
||
this.init();
|
||
this.showAddPopup = false;
|
||
}).catch(err => {
|
||
this.$showFailToast(err.message);
|
||
}).finally(() => {
|
||
this.saving = false;
|
||
});
|
||
},
|
||
deleted(e) {
|
||
this.$del(`/v1/client/DUserbankcardsClient/${e.id}`).then(data => {
|
||
this.$showSuccessToast('删除成功');
|
||
this.init();
|
||
}).catch(err => {
|
||
this.$showFailToast(err.message);
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script> |