mkm
/
shop-applet
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
shop-applet/pages/withdrawal/add.vue

653 lines
17 KiB
Vue
Raw Normal View History

提现修改
2024-03-30 11:05:34 +08:00
<!-- 银行卡添加 -->
1
2024-03-29 17:09:20 +08:00
<template>
<view class="shop_type">
<view class="shop_type-head">
<view style="height: var(--status-bar-height);"></view>
<view class="shop-type-navbar">
<u-icon name="arrow-left" size="18" color="#fff" @click="handleBack" />
1
2024-04-01 11:36:40 +08:00
<text class="shop-type-navbar-title">{{bindForm.id?'修改账户':'添加账户'}}</text>
1
2024-03-29 17:09:20 +08:00
<text></text>
</view>
</view>
<!-- 表单部分 -->
<view class="withdrawal-con">
<view class="withdrawal">
<view class="withdrawal-left">
<text class="withdrawal-left-to">提现至</text>
<text
class="withdrawal-left-empty">{{bindForm.is_own === 0 ? '法人账户' : bindForm.is_own === 1 ? '对公账户':'请选择账户类型'}}</text>
</view>
<view class="withdrawal-right" @click="show = true">
<text class="withdrawal-right-add">{{bindForm.is_own === ''?'选择':'更换'}}账户</text>
<u-icon name="arrow-right" size="14" color="#40AE36"></u-icon>
</view>
</view>
<!-- 提现信息 法人账户-->
<view class="withdrawal-info" v-if="bindForm.is_own === 0">
<view class="withdrawal-form">
<view class="withdrawal-form-item">
<view class="withdrawal-form-item-label">开户银行</view>
1
2024-04-01 11:36:40 +08:00
<view class="withdrawal-form-item-val">
<image :src="bindForm.icon" v-if="bindForm.icon"></image>
<text> {{bindForm.bank?bindForm.bank:'请选择开户银行'}}</text>
</view>
1
2024-03-29 17:09:20 +08:00
<view class="withdrawal-change" @click="changeBank">
<text class="withdrawal-right-add">{{bindForm.bank?'更换':'选择'}}银行</text>
<u-icon name="arrow-right" size="14" color="#40AE36"></u-icon>
</view>
</view>
<view class="withdrawal-form-item">
<view class="withdrawal-form-item-label">持卡人</view>
<view class="withdrawal-form-item-val">
1
2024-04-02 14:46:49 +08:00
<input v-model="bindForm.name" type="text" placeholder="请输入持卡人姓名" :disabled="true"
1
2024-03-29 17:09:20 +08:00
placeholder-class="placeholderClass">
</view>
</view>
<view class="withdrawal-form-item">
<view class="withdrawal-form-item-label">身份证</view>
<view class="withdrawal-form-item-val">
1
2024-04-01 11:36:40 +08:00
<input v-model="bindForm.id_card" type="text" placeholder="请输入持卡人身份证号"
1
2024-03-29 17:09:20 +08:00
placeholder-class="placeholderClass">
</view>
</view>
<view class="withdrawal-form-item">
1
2024-04-01 11:36:40 +08:00
<view class="withdrawal-form-item-label">银行帐号</view>
1
2024-03-29 17:09:20 +08:00
<view class="withdrawal-form-item-val">
1
2024-04-01 11:36:40 +08:00
<input v-model="bindForm.bank_code" type="text" placeholder="请输入银行账号"
1
2024-03-29 17:09:20 +08:00
placeholder-class="placeholderClass">
</view>
</view>
<view class="withdrawal-form-item">
<view class="withdrawal-form-item-label">开户网点</view>
<view class="withdrawal-form-item-val">
1
2024-04-01 11:36:40 +08:00
<input v-model="bindForm.bank_branch" type="text" placeholder="请输入开户网点"
1
2024-03-29 17:09:20 +08:00
placeholder-class="placeholderClass">
</view>
</view>
<view class="withdrawal-form-item">
<view class="withdrawal-form-item-label">手机号码</view>
<view class="withdrawal-form-item-val">
<input v-model="bindForm.phone" type="text" placeholder="请输入手机号码"
placeholder-class="placeholderClass">
</view>
</view>
</view>
<!-- 相关凭证 -->
1
2024-04-03 17:41:28 +08:00
<!-- <view class="withdrawal-envidence">
1
2024-03-29 17:09:20 +08:00
<view class="withdrawal-envidence">
<text class="withdrawal-envidence-main">请上传相关凭证</text>
<text class="withdrawal-envidence-sub">(图片格式支持JPG、PNG、JPEG)</text>
</view>
<view class="withdrawal-envience-img">
<view class="image-wrap" v-for="(item,indx) in bindForm.temp" :key="indx">
<view class="icon" @click="delImg(indx)">
<u-icon name="close-circle-fill" size="24" color="#909399" />
</view>
<image :src="item"></image>
</view>
<view class="image-wrap placeholder-img" @click="handleUpload">
<u-icon name="camera" size="40"></u-icon>
<text>上传凭证</text>
</view>
</view>
1
2024-04-03 17:41:28 +08:00
</view> -->
1
2024-04-01 11:36:40 +08:00
<view style="color: #FE2121;font-size:24rpx;margin-top: 20rpx;">
1
2024-04-03 17:41:28 +08:00
锁定规则：错误输入超 3 次后锁定。<br>
恢复规则：12 时后或次日 0 时恢复。<br>
温馨提示：锁定期间勿重复提交绑定，否则锁定时间延长。
1
2024-04-01 11:36:40 +08:00
</view>
1
2024-03-29 17:09:20 +08:00
</view>
<!-- 提现信息 对公账户-->
<view class="withdrawal-info" v-if="bindForm.is_own === 1">
<view class="withdrawal-form">
<view class="withdrawal-form-item">
<view class="withdrawal-form-item-label">开户银行</view>
1
2024-04-01 11:36:40 +08:00
<view class="withdrawal-form-item-val">
<image :src="bindForm.icon" v-if="bindForm.icon"></image>
<text> {{bindForm.bank?bindForm.bank:'请选择开户银行'}}</text>
</view>
1
2024-03-29 17:09:20 +08:00
<view class="withdrawal-change" @click="changeBank">
<text class="withdrawal-right-add">{{bindForm.bank?'更换':'选择'}}银行</text>
<u-icon name="arrow-right" size="14" color="#40AE36"></u-icon>
</view>
</view>
<view class="withdrawal-form-item">
<view class="withdrawal-form-item-label">账户名称</view>
<view class="withdrawal-form-item-val">
1
2024-04-02 14:46:49 +08:00
<input v-model="bindForm.name" type="text" placeholder="请输入账户名称" :disabled="true"
1
2024-03-29 17:09:20 +08:00
placeholder-class="placeholderClass">
</view>
</view>
<view class="withdrawal-form-item">
1
2024-04-01 11:36:40 +08:00
<view class="withdrawal-form-item-label">银行账号</view>
1
2024-03-29 17:09:20 +08:00
<view class="withdrawal-form-item-val">
1
2024-04-01 11:36:40 +08:00
<input v-model="bindForm.bank_code" type="text" placeholder="请输入银行账号"
1
2024-03-29 17:09:20 +08:00
placeholder-class="placeholderClass">
</view>
</view>
<view class="withdrawal-form-item">
<view class="withdrawal-form-item-label">开户网点</view>
<view class="withdrawal-form-item-val">
<input v-model="bindForm.bank_branch" type="text" placeholder="请输入开户网点"
placeholder-class="placeholderClass">
</view>
</view>
</view>
1
2024-04-01 11:36:40 +08:00
<view style="color: #FE2121;font-size:24rpx;margin-top: 20rpx;">
1
2024-04-03 17:41:28 +08:00
锁定规则：错误输入超 3 次后锁定。<br>
恢复规则：12 时后或次日 0 时恢复。<br>
温馨提示：锁定期间勿重复提交绑定，否则锁定时间延长。
1
2024-04-01 11:36:40 +08:00
</view>
1
2024-03-29 17:09:20 +08:00
</view>
</view>
<!-- 提现btn -->
<view class="withdrawal-btn tapActive" v-if="bindForm.is_own !== ''" @click="handleBind">
<view class="withdrawal-btn-wrap">
提现修改
2024-03-30 11:05:34 +08:00
<text>{{bindForm.id?'重新':''}}提交绑定</text>
1
2024-03-29 17:09:20 +08:00
</view>
</view>
<!-- 提现账户 -->
<u-action-sheet title="请选择提现账户" :actions="list" :show="show" round="15" @select="handleSelected"
@close="show = false"></u-action-sheet>
<!-- 银行 -->
1
2024-04-01 11:36:40 +08:00
<u-action-sheet title="请选择银行" :show="bankShow" round="15" @close="bankShow = false">
<view class="actions">
<view class="actions-wrap">
<block v-for="(item ,indx) in bankList" :key="indx">
<view class="actions-item" @click="handleSelectedBank(item)">
<image :src="item.img"></image>
<text :class="{'textactive':bindForm.bank == item.name}">{{item.name}}</text>
</view>
</block>
</view>
<view class="actions-btn" @click="bankShow = false">
<text>确认</text>
</view>
</view>
</u-action-sheet>
1
2024-03-29 17:09:20 +08:00
</view>
</template>
<script>
import {
extractBank,
addBank,
提现修改
2024-03-30 11:05:34 +08:00
searchBank,
1
2024-04-02 14:46:49 +08:00
getById,
getUserInfo
1
2024-03-29 17:09:20 +08:00
} from "@/api/user.js";
export default {
data() {
return {
提现修改
2024-03-30 11:05:34 +08:00
list: [],
1
2024-03-29 17:09:20 +08:00
show: false,
bankList: [], //银行列表
bankShow: false,
bindForm: {
name: '', //姓名
bank: '', //银行
bank_code: '', //银行卡号
bank_branch: '', //开户行信息
financial_img: '', //凭证
id_card: '', //身份证号码
phone: '', //手机号
is_own: '', //转账类型(0个人，1对公)
提现修改
2024-03-30 11:05:34 +08:00
temp: [],
1
2024-04-01 11:36:40 +08:00
id: 0,
icon: ''
1
2024-03-29 17:09:20 +08:00
},
提现修改
2024-03-30 11:05:34 +08:00
mer_id: ''
}
},
onLoad(opt) {
if (opt.id) {
this.bindForm.id = opt.id;
this.getBankById();
}
if (opt.mer_id) {
this.mer_id = opt.mer_id;
1
2024-04-01 11:36:40 +08:00
if (opt.hasOwnProperty('isOwn') && (opt.isOwn === 0 || opt.isOwn == '0')) {
提现修改
2024-03-30 11:05:34 +08:00
this.list = [{
name: '对公账户'
1
2024-04-01 11:36:40 +08:00
}];
this.bindForm.is_own = 1;
1
2024-04-02 14:46:49 +08:00
//获取法人真实姓名
this.bindForm.name = JSON.parse(this.$Cache.get("USER_INFO")).mer_info.company_name;
1
2024-04-01 11:36:40 +08:00
} else if (opt.hasOwnProperty('isOwn') && opt.isOwn == 1) {
提现修改
2024-03-30 11:05:34 +08:00
this.list = [{
name: '法人账户'
1
2024-04-01 11:36:40 +08:00
}];
this.bindForm.is_own = 0;
1
2024-04-02 14:46:49 +08:00
//获取法人真实姓名
1
2024-04-02 16:37:16 +08:00
this.bindForm.name = JSON.parse(this.$Cache.get("USER_INFO")).mer_info.real_name;
提现修改
2024-03-30 11:05:34 +08:00
} else {
1
2024-04-01 11:36:40 +08:00
this.bindForm.is_own = 0;
1
2024-04-02 14:46:49 +08:00
//获取法人真实姓名
1
2024-04-02 16:37:16 +08:00
this.bindForm.name = JSON.parse(this.$Cache.get("USER_INFO")).mer_info.real_name;
提现修改
2024-03-30 11:05:34 +08:00
this.list = [{
name: '对公账户'
}, {
name: '法人账户'
}]
}
1
2024-04-02 14:46:49 +08:00
//如果绑定银行卡用户为个体户 则不能添加对公账户,只能添加法人账户 is_company =0 个体户
const isCompany = JSON.parse(this.$Cache.get("USER_INFO")).mer_info.is_company;
if (isCompany != 1) {
this.list = [{
name: '法人账户'
}];
}
1
2024-03-29 17:09:20 +08:00
}
},
methods: {
提现修改
2024-03-30 11:05:34 +08:00
// 获取单条信息
getBankById() {
getById(this.bindForm.id).then(res => {
if (res.data && res.data.financial_account) {
Object.assign(this.bindForm, res.data.financial_account);
this.bindForm.id = res.data.id;
this.mer_id = this.bindForm.mer_id;
1
2024-04-03 17:41:28 +08:00
// if (this.bindForm.is_own === 0 && this.bindForm.financial_img) {
// this.$set(this.bindForm, 'temp', this.bindForm.financial_img.split(","));
// }
提现修改
2024-03-30 11:05:34 +08:00
}
})
},
1
2024-03-29 17:09:20 +08:00
// 账户类型
handleSelected(e) {
this.show = false;
1
2024-04-02 14:46:49 +08:00
if (e.name == '法人账户') {
this.bindForm.is_own = 0;
1
2024-04-02 16:37:16 +08:00
this.bindForm.name = JSON.parse(this.$Cache.get("USER_INFO")).mer_info.real_name;
1
2024-04-02 14:46:49 +08:00
}
if (e.name == '对公账户') {
//获取法人真实姓名
this.bindForm.is_own = 1;
this.bindForm.name = JSON.parse(this.$Cache.get("USER_INFO")).mer_info.company_name;
}
1
2024-03-29 17:09:20 +08:00
},
// 上传图片
handleUpload() {
this.$util.uploadImageOne('upload/image', res => {
this.bindForm.temp.push(res.data.path);
});
},
// 删除图片
delImg(index) {
this.bindForm.temp.splice(index, 1);
},
// 选择银行卡
handleSelectedBank(e) {
this.bindForm.bank = e.name;
1
2024-04-01 11:36:40 +08:00
this.bindForm.icon = e.img;
1
2024-03-29 17:09:20 +08:00
},
// 获取银行卡
changeBank() {
if (this.bankList.length > 0) {
this.bankShow = true;
} else {
extractBank().then(res => {
this.bankList = res.data;
this.bankShow = true;
})
}
},
// 绑定账号
handleBind() {
if (!this.bindForm.name) return this.$util.Tips({
1
2024-04-01 11:36:40 +08:00
title: this.bindForm.is_own === 0 ? '请输入法人姓名！' : '请输入账户名称！'
1
2024-03-29 17:09:20 +08:00
});
if (!this.bindForm.bank) return this.$util.Tips({
提现修改
2024-03-30 11:05:34 +08:00
title: '请选择开户银行！'
1
2024-03-29 17:09:20 +08:00
});
1
2024-04-01 11:36:40 +08:00
if (!this.bindForm.bank_code) return this.$util.Tips({
title: this.bindForm.is_own === 0 ? '请输入银行帐号！' : '请输入银行账号！'
1
2024-03-29 17:09:20 +08:00
});
if (!this.bindForm.bank_branch) return this.$util.Tips({
提现修改
2024-03-30 11:05:34 +08:00
title: '请输入开户网点！'
1
2024-03-29 17:09:20 +08:00
});
// 法人账号验证
if (this.bindForm.is_own === 0) {
1
2024-04-03 17:41:28 +08:00
// if (!this.bindForm.temp.length > 0) return this.$util.Tips({
// title: '请上传凭证！'
// });
// this.bindForm.financial_img = this.bindForm.temp.join(",");
1
2024-03-29 17:09:20 +08:00
if (!uni.$u.test.idCard(this.bindForm.id_card)) return this.$util.Tips({
提现修改
2024-03-30 11:05:34 +08:00
title: '请输入正确的身份证号！'
1
2024-03-29 17:09:20 +08:00
});
if (!uni.$u.test.mobile(this.bindForm.phone)) return this.$util.Tips({
提现修改
2024-03-30 11:05:34 +08:00
title: '请输入正确的手机号！'
1
2024-03-29 17:09:20 +08:00
});
}
提现修改
2024-03-30 11:05:34 +08:00
1
2024-03-29 17:09:20 +08:00
addBank(this.mer_id, this.bindForm).then(res => {
this.$util.Tips({
title: '提交成功,请等待后台审核！'
}, () => {
1
2024-04-01 11:36:40 +08:00
uni.redirectTo({
url: "/pages/withdrawal/progress?mer_id=" + this.mer_id
})
1
2024-03-29 17:09:20 +08:00
});
}).catch(err => {
this.$util.Tips({
1
2024-04-01 11:36:40 +08:00
title: err
1
2024-03-29 17:09:20 +08:00
});
})
},
// 返回上一级
handleBack() {
uni.navigateBack()
}
}
}
</script>
<style lang="scss">
page {
background-color: #F8F9FA;
}
.shop_type {
padding-bottom: 184rpx;
.shop_type-head {
background-color: #40AE36;
margin-bottom: 30rpx;
.shop-type-navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx;
height: 88rpx;
.shop-type-navbar-title {
font-size: 32rpx;
color: #FFFFFF;
}
}
}
}
提现修改
2024-03-30 11:05:34 +08:00
.withdrawal-con {
height: calc(100vh - 88rpx - 184rpx - var(--status-bar-height) - 30rpx);
overflow: auto;
padding-bottom: 30rpx;
.withdrawal {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
height: 102rpx;
border-radius: 20rpx;
margin: 0 30rpx 26rpx;
padding: 0 26rpx 0 30rpx;
.withdrawal-left {
display: flex;
.withdrawal-left-to {
margin-right: 42rpx;
font-size: 30rpx;
color: #333333;
}
.withdrawal-left-empty {
font-weight: bold;
font-size: 28rpx;
color: #333333;
}
}
.withdrawal-right {
display: flex;
align-items: center;
.withdrawal-right-add {
font-size: 28rpx;
color: #40AE36;
}
}
}
.withdrawal-info {
margin: 0 30rpx;
.withdrawal-form {
padding: 0 30rpx;
margin-bottom: 30rpx;
background-color: #fff;
border-radius: 20rpx;
.withdrawal-form-item {
position: relative;
display: flex;
align-items: center;
height: 102rpx;
border-bottom: 2rpx solid #FBFCFC;
.withdrawal-form-item-label {
width: 120rpx;
margin-right: 42rpx;
font-size: 30rpx;
color: #333333;
text-align: left;
}
.withdrawal-form-item-val {
1
2024-04-01 11:36:40 +08:00
display: flex;
align-items: center;
color: #333;
提现修改
2024-03-30 11:05:34 +08:00
font-size: 30rpx;
1
2024-04-01 11:36:40 +08:00
image {
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
}
提现修改
2024-03-30 11:05:34 +08:00
/deep/.uni-input-placeholder,
.placeholderClass {
1
2024-04-01 11:36:40 +08:00
font-size: 30rpx;
提现修改
2024-03-30 11:05:34 +08:00
color: #999;
}
input {
font-size: 30rpx;
}
}
.withdrawal-change {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
color: #40AE36;
align-items: center;
}
}
}
.withdrawal-envidence {
border-radius: 20rpx;
.withdrawal-envidence {
margin-bottom: 30rpx;
.withdrawal-envidence-main {
font-size: 30rpx;
color: #333333;
}
.withdrawal-envidence-sub {
font-size: 22rpx;
color: #666666;
}
}
.withdrawal-envience-img {
display: flex;
flex-wrap: wrap;
background-color: #fff;
padding: 24rpx 20rpx 16rpx;
border-radius: 20rpx;
.image-wrap {
position: relative;
width: 152rpx;
height: 152rpx;
background: #ccc;
margin: 0 12rpx 8rpx 0;
border-radius: 8rpx;
&:nth-child(4n) {
margin-right: 0;
}
.icon {
position: absolute;
right: -24rpx;
top: -24rpx;
z-index: 10;
}
image {
width: 152rpx;
height: 152rpx;
}
}
.placeholder-img {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border: 2rpx dashed #9E9E9E;
border-radius: 8rpx;
background-color: #F5F5F5;
text {
font-size: 22rpx;
color: #666666;
}
}
}
}
}
}
.withdrawal-btn {
position: fixed;
bottom: 0;
left: 0;
height: 184rpx;
width: 100%;
padding-top: 32rpx;
box-sizing: border-box;
background-color: #f7f8f9;
z-index: 10;
.withdrawal-btn-wrap {
height: 88rpx;
background: linear-gradient(359deg, #72BE53 0%, #46B03A 100%);
border-radius: 88rpx;
margin: 0 30rpx;
line-height: 88rpx;
text-align: center;
text {
font-weight: bold;
font-size: 30rpx;
color: #F5F5F5;
}
}
}
1
2024-04-01 11:36:40 +08:00
.actions {
padding-bottom: 30rpx;
.actions-btn {
width: 650rpx;
height: 88rpx;
line-height: 88rpx;
background: linear-gradient(359deg, #72BE53 0%, #46B03A 100%);
border-radius: 88rpx;
margin: 0 auto;
text-align: center;
text {
font-weight: 600;
font-size: 30rpx;
color: #FFFFFF;
}
}
.actions-wrap {
max-height: 50vh;
overflow: auto;
margin-bottom: 30rpx;
.actions-item {
display: flex;
align-items: center;
justify-content: center;
height: 104rpx;
border-bottom: 2rpx solid #eeefef;
image {
width: 40rpx;
height: 40rpx;
margin-right: 12rpx;
}
text {
font-size: 32rpx;
color: #333;
}
}
.textactive {
font-weight: 600;
color: #40AE36 !important;
}
}
}
1
2024-03-29 17:09:20 +08:00
</style>