shop-applet/pages/users/embody/embody.vue

819 lines
21 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 :style="viewColor">
<view class='cash-withdrawal' :hidden='!loading'>
<!-- <view class='nav acea-row row-between-wrapper'>
<view class='name'>提现至</view>
<view class='input'>
<view class="more-content" @click="goPay(currentTab)">
<view class="more-content-left">
<view class="type-icon" :style="[{backgroundColor: handlePayColor()}]">
<view class="iconfont bankicon" :class="navList[currentTab]['icon']"></view>
</view>
<text>{{navList[currentTab]["name"]}}</text>
</view>
<view class="moreicon">
<view class='iconfont icon-jiantou'></view>
</view>
</view>
</view>
</view> -->
<view class='wrapper'>
<view :hidden='currentTab != 0' class='list'>
<form @submit="subCash" report-submit='true'>
<block v-if="merInfo.is_company">
<view class='item acea-row row-between-wrapper'>
<view class='name'>公司名称</view>
<view class='input'>
<text class='Bank'>{{mode.mer_name}}</text>
<text class='iconfont icon-qiepian38'></text>
</view>
</view>
<view class='item acea-row row-between-wrapper'>
<view class='name'>对公账号</view>
<view class='input'><input v-model="mode.bank_code" type='number' placeholder='请填写对公账号'
placeholder-class='placeholder' name="bank_code"></input></view>
</view>
</block>
<block v-else>
<view class='item acea-row row-between-wrapper'>
<view class='name'>持卡人</view>
<view class='input'><input v-model="mode.mer_name" placeholder='请输入持卡人姓名'
placeholder-class='placeholder' name="mer_name"></input></view>
</view>
<view class='item acea-row row-between-wrapper'>
<view class='name'>银行卡号</view>
<view class='input'><input v-model="mode.bank_code" type='number' placeholder='请填写银行卡号'
placeholder-class='placeholder' name="bank_code"></input></view>
</view>
</block>
<view class='item acea-row row-between-wrapper' v-if="array.length>0">
<view class='name'>开户银行</view>
<view class='input'>
<input placeholder='请输入开户银行' v-model="mode.bank_name" placeholder-class='placeholder'
name="bank_address"></input>
<!-- <picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
<text class='Bank'>{{array[index]["name"]}}</text>
<text class='iconfont icon-qiepian38'></text>
</picker> -->
</view>
</view>
<view class='item acea-row row-between-wrapper'>
<view class='name'>开户网点</view>
<view class='input'><input placeholder='请输入开户网点' v-model="mode.bank_address"
placeholder-class='placeholder' name="bank_address"></input></view>
</view>
<view class='item acea-row row-between-wrapper'>
<view class='name'>提现金额</view>
<view class='input'><input :placeholder='"最低提现金额"+minPrice' placeholder-class='placeholder'
name="extract_price" type='digit' v-model="extract_price"></input></view>
</view>
<view class='tip mt25'>
当前可提现金额: <text class="price">¥{{extract_money}}</text>, 暂存金额: ¥{{lock_money}}
</view>
<view class='tip'>
当前押金: ¥{{ot_margin}}
</view>
<view class='tip'>
说明: 用户确认收货{{lock_time}}天后, 才可提现该订单金额<br />
提货付款订单完成后该笔订单金额暂存时间为20分钟<br />
</view>
<view class="btn-submit">
<button formType="submit" class='bnt b-color'>提现</button>
</view>
</form>
</view>
<view :hidden='currentTab != 1' class='list'>
<form @submit="subCash" report-submit='true'>
<view v-if="!sys_extension_type" class="">
<view class='item acea-row row-between-wrapper'>
<view class='name'>账号</view>
<view class='input'><input placeholder='请填写您的微信账号' placeholder-class='placeholder'
name="wechat"></input></view>
</view>
<view class='item acea-row row-between-wrapper'>
<view class='name'>提现</view>
<view class='input'><input :placeholder='"最低提现金额"+minPrice'
placeholder-class='placeholder' name="extract_price" type='digit'
v-model="extract_price"></input></view>
</view>
<view class='item acea-row row-between-wrapper uploadItem'>
<view class='name'>收款码</view>
<view class='input upload acea-row row-middle'>
<view class='picture' v-for="(item,index) in pics" :key="index">
<image :src='item'></image>
<text class='iconfont icon-guanbi1' @click='DelPic(index)'></text>
</view>
<view class='picture acea-row row-center-wrapper row-column' @click='uploadpic'
v-if="pics.length < 1">
<text class='iconfont icon-icon25201'></text>
<view>上传图片</view>
</view>
</view>
</view>
<view class='tip mt25'>
当前可提现金额: <text class="price">¥{{extract_money}},</text>暂存金额: ¥{{lock_money}}
</view>
<view class='tip'>
当前押金: ¥{{ot_margin}}
</view>
<view class='tip'>
说明: 用户确认收货{{lock_time}}天后, 才可提现该订单金额<br />
提货付款订单完成后该笔订单金额暂存时间为20分钟<br />
</view>
<button formType="submit" class='bnt b-color'>提现</button>
</view>
<view v-else class="auto_arrival">
<view class='tip'>当前可提现金额: <text class="price">¥{{extract_money}}</text>
</view>
<view class='input'><input placeholder-class='placeholder1' name="extract_price"
type='digit' :placeholder="placeholderValue" @focus="placeholderValue = ''"
v-model="extract_price"></input>
</view>
<view class="btn-submit">
<button formType="submit" class='bnt b-color'>提现</button>
</view>
</view>
</form>
</view>
<view :hidden='currentTab != 2' class='list'>
<form @submit="subCash" report-submit='true'>
<view class='item acea-row row-between-wrapper'>
<view class='name'>账号</view>
<view class='input'><input placeholder='请填写您的支付宝账号' placeholder-class='placeholder'
name="alipay_code"></input></view>
</view>
<view class='item acea-row row-between-wrapper'>
<view class='name'>提现</view>
<view class='input'><input :placeholder='"最低提现金额"+minPrice' placeholder-class='placeholder'
name="extract_price" type='digit' v-model="extract_price"></input></view>
</view>
<view class='item acea-row row-between-wrapper uploadItem'>
<view class='name'>收款码</view>
<view class='input upload acea-row row-middle'>
<view class='picture' v-for="(item,index) in pics" :key="index">
<image :src='item'></image>
<text class='iconfont icon-guanbi1' @click='DelPic(index)'></text>
</view>
<view class='picture acea-row row-center-wrapper row-column' @click='uploadpic'
v-if="pics.length < 1">
<text class='iconfont icon-icon25201'></text>
<view>上传图片</view>
</view>
</view>
</view>
<view class='tip mb25'>
当前可提现金额: <text class="price">¥{{extract_money}}</text>, 暂存金额: ¥{{lock_money}}
</view>
<view class='tip'>
当前押金: ¥{{ot_margin}}
</view>
<view class='tip'>
说明: 用户确认收货{{lock_time}}天后, 才可提现该订单金额<br />
提货付款订单完成后该笔订单金额暂存时间为20分钟<br />
</view>
<view class="btn-submit">
<button formType="submit" class='bnt b-color'>提现</button>
</view>
</form>
</view>
</view>
</view>
<view class="saomaCode" @click="navigator(`/pages/users/gather_list/index?mer_id=${merId}`)">明细</view>
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
<cash :payMode='pay_type' :pay_close="pay_close" @payClose="payClose" @onChangeFun="onChangeFun"
:order_id="currentTab"></cash>
</view>
</template>
<script>
import {
postCreateApplyAPI,
getAdminApplyAPI,
getLisApplyAPI,
getAccountApplyAPI,
postAccountApplyAPI,
} from '@/api/user.js'
import {
extractCash,
extractBank,
getUserInfo,
spreadInfo
} from '@/api/user.js';
import {
mapGetters
} from "vuex";
import authorize from '@/components/Authorize';
import cash from '.././components/cash';
import {
configMap
} from '@/utils';
import {
Toast
} from '../../../libs/uniApi';
export default {
components: {
cash,
authorize
},
data() {
return {
extract_money: "",
lock_money: "",
ot_margin: "",
lock_time: "",
mode: {
bank_address: "",
bank_code: "",
bank_name: "",
extract_price: "",
extract_type: "",
real_name: ""
},
navList: [{
'id': '0',
'ids': 1,
'name': '开户银行',
'icon': 'icon-yinhangqia',
'bg_color': '#FE960F'
},
{
'id': '1',
'ids': 2,
'name': '微信',
'icon': 'icon-weixin2',
'bg_color': '#41B035'
},
{
'id': '2',
'ids': 3,
'name': '支付宝',
'icon': 'icon-icon34',
'bg_color': '#00A9F2'
}
],
currentTab: '0',
extract_price: '',
index: 0,
array: [], //提现银行
minPrice: 0.00, //最低提现金额
userInfo: [],
merInfo: {}, //商户信息
isClone: false,
isAuto: false, //没有授权的不会自动授权
isShowAuth: false, //是否隐藏授权
loading: true,
load: false,
pics: [], //收款码
extract_pic: '',
placeholderValue: '0.00',
payColor: '',
pay_close: false,
pay_type: [],
source: '',
merId: ''
};
},
computed: {
...mapGetters(['isLogin', 'viewColor']),
...configMap(['sys_extension_type', 'withdraw_type'])
},
watch: {
withdraw_type: {
handler() {
this.loadType()
},
immediate: true
}
},
onLoad(options) {
this.merId = options.mer_id
this.source = options.source;
let data = this.$store.state.app.userInfo;
if (typeof data == 'string') data = JSON.parse(data);
this.merInfo = data.mer_info;
this.getApply()
if (this.isLogin) {
this.getUserInfo();
this.getUserExtractBank();
} else {
this.isAuto = true;
this.isShowAuth = true
}
},
methods: {
async getApply() {
try {
const res = await getAdminApplyAPI(this.merId)
// this.mode.real_name = res.data.financial_bank_name
this.mode.real_name = res.data.financial_bank_name
this.mode.bank_code = res.data.financial_bank_code
this.mode.bank_name = res.data.financial_bank_bank
this.mode.bank_address = res.data.financial_bank_branch
this.mode.mer_name = res.data.financial_bank_name
if (this.merInfo.is_company && !this.mode.mer_name) this.mode.mer_name = this.merInfo.company_name;
this.extract_money = res.data.extract_money
this.lock_money = res.data.lock_money
this.ot_margin = res.data.ot_margin
this.lock_time = res.data.lock_time
// console.log(this.extract_money)
} catch (err) {
//TODO handle the exception
Toast(err)
}
},
loadType() {
this.pay_type = []
let withdrawType = this.withdraw_type
if (withdrawType.length > 0) {
this.navList.map((value, index) => {
withdrawType.map(val => {
if (value.ids == val) {
this.pay_type.push(value)
}
})
})
}
this.currentTab = this.pay_type[0].id
},
onLoadFun: function() {
this.isShowAuth = false;
this.getUserInfo();
// this.getUserExtractBank();
},
// 授权关闭
authColse: function(e) {
this.isShowAuth = e
},
getUserExtractBank: function() {
let that = this;
extractBank().then(res => {
let array = res.data;
that.$set(that, 'array', array);
this.array.forEach((item, index) => {
if (item.name == this.mode.bank_name.toString()) {
that.index = index
}
})
});
},
/**
* 获取个人用户信息
*/
getUserInfo: function() {
let that = this;
spreadInfo({
source: that.source
}).then(res => {
console.log(res);
that.userInfo = res.data;
that.minPrice = res.data.user_extract_min;
});
},
swichNav: function(current) {
this.currentTab = current;
this.load = false;
},
bindPickerChange: function(e) {
console.log(e);
this.index = e.detail.value;
},
handlePayColor: function() {
let str = ''
if (this.currentTab == 1) {
str = '#41B035'
} else if (this.currentTab == 2) {
str = '#00A9F2'
} else {
str = '#FE960F '
}
return str
},
uploadpic: function() {
let that = this;
// console.log('地方');
that.$util.uploadImageOne('upload/image', function(res) {
// console.log(res);
that.pics.push(res.data.path);
that.$set(that, 'pics', that.pics);
that.$set(that, 'extract_pic', that.pics[0])
});
},
/**
* 删除图片
*
*/
DelPic: function(index) {
let that = this,
pic = this.pics[index];
that.pics.splice(index, 1);
that.$set(that, 'pics', that.pics);
},
subCash: async function(e) {
let that = this,
value = e.detail.value;
value.source = this.source
if (that.load) return;
if (that.currentTab == 0) { //银行卡
// if (value.real_name.length == 0) return this.$util.Tips({
// title: '请填写持卡人姓名'
// });
if (value.bank_code.length == 0) return this.$util.Tips({
title: '请填写对公账号'
});
if (!this.mode.bank_name) return this.$util.Tips({
title: '请填写开户银行'
});
if (!this.mode.bank_address) return this.$util.Tips({
title: '请填写开户网点'
});
// if (that.index == 0) return this.$util.Tips({
// title: "请选择银行"
// });
value.extract_type = 'bank';
value.bank_name = this.mode.bank_name;
// value.bank_name = (that.array && that.array.length) ? that.array[that.index].name : '';
} else if (that.currentTab == 1) { //微信
value.extract_type = 'weixin';
if (!this.sys_extension_type) {
value.extract_pic = that.extract_pic
if (value.wechat.length == 0) return this.$util.Tips({
title: '请填写微信号'
});
if (value.extract_pic.length == 0) return this.$util.Tips({
title: '请上传收款码'
});
}
} else if (that.currentTab == 2) { //支付宝
value.extract_type = 'alipay';
value.extract_pic = that.extract_pic
if (value.alipay_code.length == 0) return this.$util.Tips({
title: '请填写账号'
});
if (value.extract_pic.length == 0) return this.$util.Tips({
title: '请上传收款码'
});
}
if (value.extract_price.length == 0) return this.$util.Tips({
title: '请填写提现金额'
});
if (Number(value.extract_price) < that.minPrice) return this.$util.Tips({
title: '提现金额不能低于' + that.minPrice
});
value.extract_type = this.currentTab
that.load = true;
if (that.sys_extension_type && that.currentTab == 1)
value = {
extract_price: e.detail.value.extract_price,
extract_type: 3,
}
// console.log(value)
// 提交提现方式
const mode = {
financial_bank_name: this.mode.mer_name,
financial_bank_bank: this.mode.bank_name,
financial_bank_code: this.mode.bank_code,
extract_money: value.extract_price,
financial_bank_branch: this.mode.bank_address,
financial_type: 1
}
console.log(mode);
postCreateApplyAPI(this.merId, mode).then(res => {
// 提现申请
// that.postCreate(e.detail.value.extract_price)
Toast(res.message)
setTimeout(() => {
uni.navigateBack({
delta: 1
})
}, 1000)
console.log(res);
}).catch(err => {
Toast(err)
setTimeout(() => {
uni.navigateBack({
delta: 1
})
}, 1000)
})
},
async postCreate(price) {
const data = {
extract_money: price,
financial_type: 1
}
try {
const res = await postCreateApplyAPI(this.merId, data)
Toast(res.message)
setTimeout(() => {
uni.navigateBack({
delta: 1
});
}, 1000)
} catch (e) {
Toast(res)
}
},
/**
* 打开支付组件
*
*/
goPay: function(pay_price) {
this.$set(this, 'pay_close', true);
// this.$set(this, 'pay_order_id', );
},
/**
* 关闭支付组件
*
*/
payClose: function() {
this.pay_close = false;
},
onChangeFun: function(e) {
let opt = e;
let action = opt.action || null;
let value = opt.value != undefined ? opt.value : null;
(action && this[action]) && this[action](value);
this.currentTab = opt.type
},
//明细跳转
navigator(url, t) {
// if (this.userInfoData.is_wsxx === 0 && t != '商户设置') return Toast("请完善商户信息");
uni.navigateTo({
url: url
})
},
}
}
</script>
<style lang="scss">
page {
background-color: #F5F5F5 !important;
}
.mt25 {
margin-top: 25rpx;
}
.cash-withdrawal .nav {
height: 130rpx;
padding: 0 30rpx;
font-size: 30rpx;
margin-bottom: 20rpx;
background-color: #fff;
}
.b-color {
background-color: var(--view-theme);
}
.cash-withdrawal .nav .input {
width: 505rpx;
.more-content {
display: flex;
align-items: center;
.more-content-left {
width: 90%;
.type-icon {
display: inline-block;
width: 56rpx;
height: 56rpx;
text-align: center;
line-height: 56rpx;
background-color: #FE960F;
margin-right: 20rpx;
border-radius: 50%;
.bankicon {
font-size: 36rpx;
color: #FFFFFF;
}
}
}
.moreicon {
width: 10%;
text-align: right;
}
}
}
.cash-withdrawal .nav .item {
font-size: 26rpx;
flex: 1;
text-align: center;
}
.cash-withdrawal .nav .item~.item {
border-left: 1px solid #f0f0f0;
}
.cash-withdrawal .nav .item .iconfont {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
border: 2rpx solid #e93323;
text-align: center;
line-height: 37rpx;
margin: 0 auto 6rpx auto;
font-size: 22rpx;
box-sizing: border-box;
}
.cash-withdrawal .nav .item .iconfont.on {
background-color: #e93323;
color: #fff;
border-color: #e93323;
}
.cash-withdrawal .nav .item .line {
width: 2rpx;
height: 20rpx;
margin: 0 auto;
transition: height 0.3s;
}
.cash-withdrawal .nav .item .line.on {
height: 39rpx;
}
.cash-withdrawal .wrapper .list {
padding: 0 30rpx;
background-color: #fff;
}
.cash-withdrawal .wrapper .list .item {
border-bottom: 1px solid #eee;
height: 107rpx;
font-size: 30rpx;
color: #333;
&.uploadItem {
border-bottom: none;
height: auto;
.name {
height: 107rpx;
;
}
}
}
.picture {
width: 70px;
height: 70px;
margin: 0 0 17px 0;
position: relative;
font-size: 11px;
color: #bbb;
border: 0.5px solid #ddd;
box-sizing: border-box;
margin-top: 40rpx;
uni-image,
image {
width: 100%;
height: 100%;
border-radius: 1px;
}
.icon-guanbi1 {
font-size: 22px;
position: absolute;
top: -10px;
right: -10px;
color: #fc4141;
}
}
.cash-withdrawal .wrapper .list .item .name {
width: 180rpx;
}
.cash-withdrawal .wrapper .list .item .input {
width: 505rpx;
}
.cash-withdrawal .wrapper .list .item .input .placeholder {
color: #bbb;
}
.cash-withdrawal .placeholder1 {
font-size: 46rpx;
}
.cash-withdrawal .wrapper .list .tip {
font-size: 26rpx;
color: #999;
margin-bottom: 25rpx;
}
.cash-withdrawal .wrapper .list .btn-submit {
background-color: #F5F5F5;
margin: 0 -30rpx;
padding: 64rpx 30rpx;
}
.cash-withdrawal .wrapper .list .bnt {
font-size: 32rpx;
color: #fff;
width: 690rpx;
height: 90rpx;
text-align: center;
border-radius: 50rpx;
line-height: 90rpx;
/deep/ &.disabled {
background: #E3E3E3 !important;
pointer-events: none;
}
}
.cash-withdrawal .wrapper .list .tip2 {
font-size: 26rpx;
color: #999;
text-align: center;
margin: 44rpx 0 20rpx 0;
}
.cash-withdrawal .wrapper .list .value {
height: 135rpx;
line-height: 135rpx;
border-bottom: 1px solid #eee;
width: 690rpx;
margin: 0 auto;
}
.cash-withdrawal .wrapper .list .value input {
font-size: 80rpx;
color: #282828;
height: 135rpx;
text-align: center;
}
.cash-withdrawal .wrapper .list .value .placeholder2 {
color: #bbb;
}
.price {
color: var(--view-priceColor);
}
.Bank {
display: block;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.auto_arrival {
text-align: center;
padding: 20rpx 0 0 0;
.input {
width: 100%;
border-bottom: 1px solid #eee;
margin-top: 10rpx;
padding: 20rpx 0;
font-size: 60rpx;
color: #999;
height: 100rpx;
uni-input {
height: 100%;
}
}
}
uni-toast.uni-mask {
background-color: rgba(0, 0, 0, 0.5) !important;
}
.saomaCode {
z-index: 1;
position: fixed;
bottom: 175.44rpx;
right: 28.07rpx;
width: 87.72rpx;
height: 87.72rpx;
border-radius: 175.44rpx;
background-image: linear-gradient(90deg, #FA6514 0%, #E93323 100%);
color: #fff;
text-align: center;
line-height: 87.72rpx;
}
</style>