shop-applet/pages/withdrawal/index.vue

553 lines
15 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- 提现管理 -->
<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" />
<text class="shop-type-navbar-title">提现</text>
<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">{{!bankInfo?'请绑定账户': bankInfo.is_own === 0 ? '法人账户' : '对公账户'}}</text>
</view>
<view class="withdrawal-right" @click.stop="handleToAdd" v-if="isShowAdd()">
<text class="withdrawal-right-add">添加账户</text>
<u-icon name="arrow-right" size="14" color="#40AE36"></u-icon>
</view>
<view class="withdrawal-right"
v-if="!isShowAdd() && userInfo.mer_info.is_company == 1 && bankList.length == 2"
@click="handleAddAccount">
<text class="withdrawal-right-add">切换账户</text>
<u-icon name="arrow-right" size="14" color="#40AE36"></u-icon>
</view>
</view>
<!-- 提现信息 法人账户-->
<view class="withdrawal-info" v-if="bankInfo && bankInfo.is_own === 0">
<view class="withdrawal-form">
<view class="withdrawal-form-item">
<view class="withdrawal-form-item-label">银行卡</view>
<view class="withdrawal-form-item-val">{{bankInfo.financial_account.bank}}</view>
</view>
<view class="withdrawal-form-item">
<view class="withdrawal-form-item-label">持卡人</view>
<view class="withdrawal-form-item-val">{{bankInfo.financial_account.name}}</view>
</view>
<view class="withdrawal-form-item">
<view class="withdrawal-form-item-label">银行账号</view>
<view class="withdrawal-form-item-val">{{bankInfo.financial_account.bank_code}}</view>
</view>
<view class="withdrawal-form-item">
<view class="withdrawal-form-item-label">开户网点</view>
<view class="withdrawal-form-item-val">{{bankInfo.financial_account.bank_branch}}</view>
</view>
<view class="withdrawal-form-item">
<view class="withdrawal-form-item-label">提现金额</view>
<view class="withdrawal-form-item-val">
<input type="number" v-model="payForm.extract_money" placeholder="请输入提现金额"
placeholder-class="placeholderClass">
</view>
</view>
</view>
<!-- 协议 -->
<view class="withdrawal-pro">
<text class="withdrawal-pro-progress" @click="viewProgress">账户开通审核进度</text>
<text class="withdrawal-pro-txt" @click="handlePreview">《企业授权法人提现书》</text>
</view>
<!-- 提示 -->
<view class="tips">
<view>当前可提现金额:¥{{extract_money || '0.00'}},暂存金额: ¥{{lock_money || '0.00'}}</view>
<view>当前商户押金:¥{{ot_margin || '0.00'}}</view>
<view>说明:用户下单后该订单金额存放在暂存金额中用户确认收货后次日18:00才可提现该笔订单金额
提货付款订单在完成后次日18:00才可提现</view>
</view>
</view>
<!-- 提现信息 对公账户-->
<view class="withdrawal-info" v-if="bankInfo && bankInfo.is_own === 1">
<view class="withdrawal-form">
<view class="withdrawal-form-item">
<view class="withdrawal-form-item-label">对公账户</view>
<view class="withdrawal-form-item-val">{{bankInfo.financial_account.name}}</view>
</view>
<view class="withdrawal-form-item">
<view class="withdrawal-form-item-label">银行账号</view>
<view class="withdrawal-form-item-val">{{bankInfo.financial_account.bank_code}}</view>
</view>
<view class="withdrawal-form-item">
<view class="withdrawal-form-item-label">开户银行</view>
<view class="withdrawal-form-item-val">{{bankInfo.financial_account.bank}}</view>
</view>
<view class="withdrawal-form-item">
<view class="withdrawal-form-item-label">开户网点</view>
<view class="withdrawal-form-item-val">{{bankInfo.financial_account.bank_branch}}</view>
</view>
<view class="withdrawal-form-item">
<view class="withdrawal-form-item-label">提现金额</view>
<view class="withdrawal-form-item-val">
<input type="number" v-model="payForm.extract_money" placeholder="请输入提现金额"
placeholder-class="placeholderClass">
</view>
</view>
</view>
<!-- 协议 -->
<view class="withdrawal-pro">
<text class="withdrawal-pro-progress" @click="viewProgress">账户开通审核进度</text>
</view>
<!-- 提示 -->
<view class="tips">
<view>当前可提现金额:¥{{extract_money || '0.00'}},暂存金额: ¥{{lock_money || '0.00'}}</view>
<view>当前商户押金:¥{{ot_margin || '0.00'}}</view>
<view>说明:用户下单后该订单金额存放在暂存金额中用户确认收货后次日18:00才可提现该笔订单金额
提货付款订单在完成后次日18:00才可提现</view>
</view>
</view>
<!-- 暂未添加银行卡 -->
<u-empty v-if="!bankInfo || (bankInfo.is_own !== 1 && bankInfo.is_own !== 0)" text='您尚未绑定提现账户,\n点击右上角"添加账户"'
mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
</u-empty>
</view>
<!-- 提现btn -->
<view class="withdrawal-btn tapActive" @click="handleSubmit" v-if="bankList.length !=0">
<view class="withdrawal-btn-wrap">
<text>点击提现</text>
</view>
</view>
<!-- 明细按钮 -->
<view class="saomaCode" @click="navigator(`/pages/users/gather_list/index?mer_id=${mer_id}`)"
v-if="bankList.length != 0">明细</view>
<!-- 提现提示 -->
<u-modal :show="tipShow" title="提示"
content='工作日当日10点前提现当日12点到账, 当日16点前提现当日18点到账, 当日18点后提现次日12点到账, 周末节假日提现, 下一工作日18点前到账'
@confirm="tipShow = false"></u-modal>
<!-- 支付密码 键盘 -->
<popups ref="popups" :isPay="true" @confirm="handleConfirm" @clear="handleClear" @change="handleChange" />
<!-- 密码错误事件处理 -->
<payPwd ref="payPwd" @left="handleLeft" @right="handleRight"></payPwd>
</view>
</template>
<script>
getAdminApplyAPI
import {
postCreateApplyAPI,
getAdminApplyAPI,
} from '@/api/user.js'
import {
searchBank
} from "@/api/user.js";
import payPwd from "@/components/payPwd/index.vue";
import popups from "@/components/popups/index.vue";
export default {
components: {
popups,
payPwd
},
data() {
return {
tipShow: false,
bankList: [],
bankInfo: undefined,
type: 0, //初始话类型 0 法人 1 对公账号
payForm: {
extract_money: "",
financial_bank_bank: "",
financial_bank_branch: "",
financial_bank_code: "",
financial_bank_name: "",
financial_type: 1,
withdrawal_pwd: "",
},
mer_id: '',
ot_margin: '', //押金
extract_money: '', //可提现金额
lock_money: '', //暂存金额
userInfo: {}
}
},
onLoad(opt) {
this.mer_id = opt.mer_id;
this.getBankInfo();
// 用户信息
this.userInfo = JSON.parse(this.$Cache.get("USER_INFO"));
console.log(this.userInfo.mer_info.is_company)
},
methods: {
//添加账户
isShowAdd() {
if (this.bankList.length == 0) return true;
if (this.bankList.length == 1 && this.userInfo.mer_info.is_company == 1) return true;
return false;
},
// 图片预览
handlePreview() {
let that = this;
if (this.bankInfo && this.bankInfo.financial_account.financial_img) {
uni.previewImage({
urls: that.bankInfo.financial_account.financial_img.split(','),
current: 0
})
}
},
// 添加账户
handleToAdd() {
//如果绑定银行卡用户为个体户 则不能添加对公账户,只能添加法人账户 is_company =0 个体户
const isCompany = JSON.parse(this.$Cache.get("USER_INFO")).mer_info.is_company;
if (isCompany != 1 && this.bankInfo && this.bankInfo.is_own === 0) return;
let strUrl = "?mer_id=" + this.mer_id;
if (this.bankInfo) strUrl += "&isOwn=" + this.bankInfo.is_own
uni.navigateTo({
url: "/pages/withdrawal/add" + strUrl
})
},
// 提现信息
getBankInfo() {
uni.showLoading({
title: "加载中...",
})
searchBank(this.mer_id).then(res => {
uni.hideLoading();
this.bankList = res.data.bank;
this.bankInfo = this.bankList[this.type];
this.ot_margin = res.data.ot_margin; //押金
this.extract_money = res.data.extract_money //可提现金额
this.lock_money = res.data.lock_money //暂存金额
}).catch(err => {
uni.hideLoading();
})
},
// 切换账号
handleAddAccount() {
if (this.bankList.length == 0) return this.$util.Tips({
title: "请先添加一个账户!"
});
if (this.type === 0)
this.type = 1;
else
this.type = 0;
this.bankInfo = this.bankList[this.type];
},
// 查看进度
viewProgress() {
uni.navigateTo({
url: "/pages/withdrawal/progress?mer_id=" + this.mer_id
})
},
// 提交
async handleSubmit() {
if (this.bankList.length == 0) {
this.viewProgress();
} else {
this.payForm.financial_bank_bank = this.bankInfo.financial_account.bank;
this.payForm.financial_bank_branch = this.bankInfo.financial_account.bank_branch;
this.payForm.financial_bank_code = this.bankInfo.financial_account.bank_code;
this.payForm.financial_bank_name = this.bankInfo.financial_account.name;
if (!this.payForm.extract_money) return this.$util.Tips({
title: '请输入提现金额'
});
if (Number(this.payForm.extract_money) < 0) return this.$util.Tips({
title: '请输入正确的提现金额'
});
// 是否输入密码
const result = await this.$util.checkPassword();
if (result.data.code == 101) { //未设置支付密码
return this.$util.Tips({
title: "您暂未设置支付密码,请前往设置!"
}, () => {
uni.navigateTo({
url: "/pages/users/user_modify_pwd/index?type=payPwd"
});
})
}
this.$refs.popups.handleOpen();
}
},
// 输入密码回调
async handleConfirm(e) {
const result = await this.$util.checkPassword(e);
// 验证密码正确
if (result.data.code == 100) {
this.$set(this.payForm, 'withdrawal_pwd', e);
this.submit();
} else {
this.$refs.payPwd.handleOpen(result.data.code);
}
},
// 弹框左边按钮 101 未设置密码 102 忘记密码 都去设置密码
handleLeft(code) {
uni.navigateTo({
url: "/pages/users/user_modify_pwd/index?type=payPwd"
});
this.$refs.payPwd.handleClose();
},
// 弹框右边按钮 取消 重试
handleRight(code) {
if (code == 101) { //取消
this.$refs.payPwd.handleClose(code);
} else {
this.$refs.payPwd.handleClose();
this.$refs.popups.handleOpen();
}
},
handleClear() {},
handleChange(val) {
if (!val)
this.load = false;
},
submit() {
uni.showLoading({
title: '申请提现中~',
mask: true
});
postCreateApplyAPI(this.mer_id, this.payForm).then(res => {
uni.hideLoading();
this.$util.Tips({
title: "提现申请成功,请等待审核!"
}, () => {
uni.navigateBack()
})
}).catch(err => {
uni.hideLoading();
this.$util.Tips({
title: err
})
})
},
//明细跳转
navigator(url, t) {
uni.navigateTo({
url: url
})
},
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;
}
}
}
}
.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-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;
}
}
}
.withdrawal-info {
margin: 0 30rpx;
background-color: #fff;
border-radius: 20rpx;
padding-bottom: 38rpx;
.withdrawal-form {
padding: 0 30rpx;
margin-bottom: 30rpx;
.withdrawal-form-item {
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;
white-space: nowrap;
}
.withdrawal-form-item-val {
font-size: 30rpx;
color: #333;
input {}
.placeholderClass {
font-size: 30rpx;
color: #666666;
}
}
}
}
.withdrawal-pro {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24rpx;
margin-bottom: 30rpx;
.withdrawal-pro-txt {
font-size: 24rpx;
color: #F66C42;
}
.withdrawal-pro-progress {
font-size: 24rpx;
color: #40AE36;
}
}
.tips {
margin: 0 30rpx;
view {
margin-bottom: 20rpx;
font-size: 24rpx;
color: #999999;
line-height: 36rpx;
text {
color: #F55726;
}
}
}
}
.saomaCode {
z-index: 1;
position: fixed;
bottom: 190rpx;
right: 28.07rpx;
width: 87.72rpx;
height: 87.72rpx;
border-radius: 175.44rpx;
background-image: linear-gradient(359deg, #72BE53 0%, #46B03A 100%);
color: #fff;
text-align: center;
line-height: 87.72rpx;
}
</style>