初始化仓库
This commit is contained in:
wangxiaowei
363
bundle/pages/user_withdraw/user_withdraw.vue
Normal file
363
bundle/pages/user_withdraw/user_withdraw.vue
Normal file
@ -0,0 +1,363 @@
|
||||
<!-- 提现 -->
|
||||
|
||||
<template>
|
||||
<view class="user-withdraw">
|
||||
<!-- Tabs -->
|
||||
<view class="withdraw-tabs">
|
||||
<u-tabs
|
||||
:list="tabsList"
|
||||
:is-scroll="true"
|
||||
:current="currentTab"
|
||||
:bold="true"
|
||||
height="100"
|
||||
font-size="30rpx"
|
||||
active-color="#333333"
|
||||
inactive-color="#666666"
|
||||
:bar-style="styleTabsBarStyle"
|
||||
@change="changeTab"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 微信钱包 -->
|
||||
<view v-if="currentValue == 3" class="withdraw-wechat m-t-20 bg-white">
|
||||
<!-- Account -->
|
||||
<u-field
|
||||
label-width="160"
|
||||
label="微信账号"
|
||||
v-model="form.account"
|
||||
placeholder="请输入微信账号"
|
||||
/>
|
||||
<!-- Name -->
|
||||
<u-field
|
||||
label-width="160"
|
||||
label="真实姓名"
|
||||
v-model="form.real_name"
|
||||
placeholder="请输入真实姓名"
|
||||
/>
|
||||
<!-- Remark -->
|
||||
<u-field label-width="160" label="备注" v-model="form.remark" placeholder="(选填)" />
|
||||
|
||||
<!-- 上传图片 -->
|
||||
<view class="flex-col m-t-20">
|
||||
<u-upload
|
||||
ref="uUpload"
|
||||
:header="{ token: $store.getters.token }"
|
||||
:auto-upload="true"
|
||||
:show-progress="false"
|
||||
max-count="1"
|
||||
width="142"
|
||||
height="142"
|
||||
:custom-btn="true"
|
||||
:action="action"
|
||||
@on-success="onSuccess"
|
||||
@on-remove="onRemove"
|
||||
>
|
||||
<view slot="addBtn" class="flex-col col-center row-center">
|
||||
<view class="upload-image flex-col col-center row-center">
|
||||
<u-icon name="/bundle/static/icon_camera_line.png" width="54" />
|
||||
</view>
|
||||
|
||||
<view class="xs m-t-10">微信收款码</view>
|
||||
</view>
|
||||
</u-upload>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 支付宝 -->
|
||||
<view v-else-if="currentValue == 4" class="withdraw-alipay m-t-20 bg-white">
|
||||
<!-- Account -->
|
||||
<u-field
|
||||
label-width="160"
|
||||
label="支付宝账号"
|
||||
v-model="form.account"
|
||||
placeholder="请输入支付宝账号"
|
||||
/>
|
||||
<!-- Name -->
|
||||
<u-field
|
||||
label-width="160"
|
||||
label="真实姓名"
|
||||
v-model="form.real_name"
|
||||
placeholder="请输入真实姓名"
|
||||
/>
|
||||
<!-- Remark -->
|
||||
<u-field label-width="160" label="备注" v-model="form.remark" placeholder="(选填)" />
|
||||
|
||||
<!-- 上传图片 -->
|
||||
<view class="flex-col m-t-20">
|
||||
<u-upload
|
||||
ref="uUpload"
|
||||
:header="{ token: $store.getters.token }"
|
||||
:auto-upload="true"
|
||||
:show-progress="false"
|
||||
max-count="1"
|
||||
width="142"
|
||||
height="142"
|
||||
:custom-btn="true"
|
||||
:action="action"
|
||||
@on-success="onSuccess"
|
||||
@on-remove="onRemove"
|
||||
>
|
||||
<view slot="addBtn" class="flex-col col-center row-center">
|
||||
<view class="upload-image flex-col col-center row-center">
|
||||
<u-icon name="/bundle/static/icon_camera_line.png" width="54" />
|
||||
</view>
|
||||
|
||||
<view class="xs m-t-10">支付宝收款码</view>
|
||||
</view>
|
||||
</u-upload>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 银行卡 -->
|
||||
<view v-else-if="currentValue == 5" class="withdraw-alipay m-t-20 bg-white">
|
||||
<!-- Account -->
|
||||
<u-field
|
||||
label-width="160"
|
||||
label="银行卡账号"
|
||||
v-model="form.account"
|
||||
placeholder="请输入银行卡账号"
|
||||
/>
|
||||
<!-- Name -->
|
||||
<u-field
|
||||
label-width="160"
|
||||
label="持卡人姓名"
|
||||
v-model="form.real_name"
|
||||
placeholder="请输入持卡人姓名"
|
||||
/>
|
||||
<!-- Name -->
|
||||
<u-field
|
||||
label-width="160"
|
||||
label="提现银行"
|
||||
v-model="form.bank"
|
||||
placeholder="请输入银行名称"
|
||||
/>
|
||||
<!-- Remark -->
|
||||
<u-field
|
||||
label-width="160"
|
||||
label="银行支行"
|
||||
v-model="form.subbank"
|
||||
placeholder="如：金湾支行"
|
||||
/>
|
||||
<!-- Remark -->
|
||||
<u-field label-width="160" label="备注" v-model="form.remark" placeholder="(选填)" />
|
||||
</view>
|
||||
|
||||
<!-- 提现金额 -->
|
||||
<view class="withdraw-money-wrap m-t-20 bg-white">
|
||||
<view class="flex withdraw-money p-b-20">
|
||||
<view class="flex flex-1">
|
||||
<text class="font-size-46 m-r-10 normal">¥</text>
|
||||
<u-input
|
||||
v-model="form.money"
|
||||
placeholder="0.00"
|
||||
:custom-style="{
|
||||
'font-size': '66rpx'
|
||||
}"
|
||||
/>
|
||||
</view>
|
||||
<view class="flex-col flex-1 text-right">
|
||||
<text class="xs primary" @tap="form.money = widthDrawConfig.able_withdraw"
|
||||
>全部提现</text
|
||||
>
|
||||
<text class="xs muted m-t-10"
|
||||
>可提现金额 ¥ {{ widthDrawConfig.able_withdraw }}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="muted xs m-t-30"
|
||||
v-if="widthDrawConfig.poundage_percent && currentValue != 1"
|
||||
>提示：提现需扣除服务费{{ widthDrawConfig.poundage_percent }}%</view
|
||||
>
|
||||
</view>
|
||||
|
||||
<!-- 确认提交 -->
|
||||
<button class="withdraw-submit m-t-30 white br60" @tap="onSubmit" size="lg">
|
||||
确认提交
|
||||
</button>
|
||||
|
||||
<!-- 提现记录 -->
|
||||
<router-link to="/bundle/pages/user_withdraw_code/user_withdraw_code">
|
||||
<view class="withdraw-log m-t-40 text-center muted">提现记录</view>
|
||||
</router-link>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { applyWithdraw, getWithdrawConfig } from '@/api/user'
|
||||
import { trottle } from '@/utils/tools'
|
||||
import { getMnpNotice } from '@/api/app'
|
||||
|
||||
import { baseURL } from '@/config/app'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
action: baseURL + '/api/file/formimage',
|
||||
currentTab: 0, // Tabs当前位置
|
||||
// Tabs 列表
|
||||
tabsList: [],
|
||||
// Tabs滑块样式
|
||||
styleTabsBarStyle: {
|
||||
bottom: '12rpx',
|
||||
width: '50rpx',
|
||||
height: '6rpx',
|
||||
background: 'green',
|
||||
borderRadius: '50px',
|
||||
backgroundImage: 'linear-gradient(to right, \#F79C0C, \#FF2C3C)'
|
||||
},
|
||||
// 表单数据
|
||||
form: {
|
||||
money: '', // 提现金额
|
||||
account: '', // 账户名称
|
||||
real_name: '', // 真实姓名
|
||||
money_qr_code: '', // 收款二维码
|
||||
bank: '', // 银行
|
||||
subbank: '', // 支行
|
||||
remark: '' // 备注
|
||||
},
|
||||
widthDrawConfig: {}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getWithdrawConfigFun()
|
||||
this.onSubmit = trottle(this.onSubmit, 1000, this)
|
||||
},
|
||||
methods: {
|
||||
// 获取微信授权
|
||||
authWechatMessage() {
|
||||
return new Promise((resolve, reject) => {
|
||||
getMnpNotice({
|
||||
scene: 113
|
||||
})
|
||||
.then(({ code, data, msg }) => {
|
||||
if (code != 1) throw new Error(msg)
|
||||
return data
|
||||
})
|
||||
.then((data) => {
|
||||
if (!data.length) return reject()
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds: data,
|
||||
success(res) {
|
||||
resolve(res)
|
||||
},
|
||||
fail(err) {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch((err) => {
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 改变当前的Tabs位置
|
||||
changeTab(index) {
|
||||
this.currentTab = index
|
||||
this.form = {
|
||||
money: '',
|
||||
account: '',
|
||||
real_name: '',
|
||||
money_qr_code: '',
|
||||
remark: '',
|
||||
bank: '',
|
||||
subbank: ''
|
||||
}
|
||||
},
|
||||
async getWithdrawConfigFun() {
|
||||
const { code, data } = await getWithdrawConfig()
|
||||
|
||||
if (code == 1) {
|
||||
this.widthDrawConfig = data
|
||||
this.tabsList = data.type
|
||||
}
|
||||
},
|
||||
// 提交表单
|
||||
onSubmit() {
|
||||
const data = {
|
||||
...this.form
|
||||
}
|
||||
data.type = this.currentValue
|
||||
|
||||
if (!data.money) {
|
||||
this.$toast({
|
||||
title: '请输入提现金额'
|
||||
})
|
||||
return
|
||||
}
|
||||
// #ifdef MP
|
||||
if (data.type == 2) {
|
||||
this.authWechatMessage().catch((err) => {
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
applyWithdraw(data).then((res) => {
|
||||
if (res.code == 1) {
|
||||
this.$toast(
|
||||
{
|
||||
title: '提交成功'
|
||||
},
|
||||
{
|
||||
tab: 2,
|
||||
url: '/bundle/pages/widthdraw_result/widthdraw_result?id=' + res.data.id
|
||||
}
|
||||
)
|
||||
}
|
||||
})
|
||||
},
|
||||
onSuccess(e) {
|
||||
console.log(e)
|
||||
this.form.money_qr_code = e.data.base_uri
|
||||
},
|
||||
onRemove(index) {
|
||||
this.form.money_qr_code = ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentValue(val) {
|
||||
const { currentTab, tabsList } = this
|
||||
return tabsList[currentTab] ? tabsList[currentTab].value : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-withdraw {
|
||||
padding: 20rpx 30rpx;
|
||||
|
||||
.withdraw-tabs {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.withdraw-money-wrap {
|
||||
padding: 50rpx 66rpx;
|
||||
border-radius: 10px;
|
||||
|
||||
.withdraw-money {
|
||||
border-bottom: $-solid-border;
|
||||
}
|
||||
}
|
||||
|
||||
.withdraw-wechat,
|
||||
.withdraw-alipay {
|
||||
padding: 0 36rpx 20rpx;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.upload-image {
|
||||
width: 142rpx;
|
||||
height: 142rpx;
|
||||
border: 2rpx dashed #cccccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.withdraw-submit {
|
||||
background: linear-gradient(11deg, #f95f2f, #ff2c3c);
|
||||
}
|
||||
::v-deep .u-field {
|
||||
padding: 26rpx 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user