You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
yanzong_qianduan/pages/news/user/withdrawal.vue

644 lines
14 KiB

5 months ago
<template>
<view class="invoice">
<view class="invoice-goods">
<view class="a">
可提现金额
</view>
<view class="b">
<text>{{balance}}</text>
</view>
</view>
<view class="invoice-company">
<view class="a">
<view class="l">提现金</view>
<view class="r">
<view class="p"><input type="digit" @blur="onCheck" v-model="obj.money" placeholder="请输入金额" />
</view>
<view class="w" @click="allMoeny" style="color:#FF3126 ;width: 140rpx;text-align: right;">全部提现
</view>
</view>
</view>
<view class="b">
<view class="item">
<view class="l">姓名</view>
<view class="r">
<input type="text" v-model="obj.bank_name" placeholder="请输入姓名" />
</view>
</view>
<view class="item">
<view class="l">银行卡号</view>
<view class="r">
<input type="number" v-model="obj.bank_card" placeholder="请输入银行卡号" />
</view>
</view>
<view class="item">
<view class="l">开户行名称</view>
<view class="r">
<input type="text" v-model="obj.bank_account" placeholder="请输入开户行名称" />
</view>
</view>
<view class="item">
<view class="l">银行预留手机号</view>
<view class="r">
<input type="number" v-model="obj.bank_phone" placeholder="请输入银行预留手机号" />
</view>
</view>
<view class="item">
<view class="l">验证码</view>
<view class="r">
<input type="number" v-model="obj.smsCode" placeholder="请输入验证码" />
<view class="code" @click="getCode" v-if="!showCountDown">获取验证码</view>
<text class="code" v-if="showCountDown">{{countdown}}</text>
</view>
</view>
</view>
</view>
<view class="invoice-info" v-if="false">
<view class="b">
<view class="item">
<view class="l">是否开发票</view>
<view class="r">
<view class="lis" @click="toggleItem(1)">
<image v-if="obj.is_invoice == 1" src="@/static/invoice/select-on.png"></image>
<image v-else src="@/static/invoice/select.png"></image>
</view>
<view class="lis" @click="toggleItem(2)">
<image v-if="obj.is_invoice == 2" src="@/static/invoice/select-on.png"></image>
<image v-else src="@/static/invoice/select.png"></image>
</view>
</view>
</view>
<view class="items" v-if="obj.is_invoice == 2">
您当前未选择开票平台将收取20%的手续费
</view>
<template v-if="obj.is_invoice == 1">
<view class="item">
<view class="l">发票类型</view>
<view class="r">
<view class="li" :class="obj.source == 1?'li-on':''" @click="tabItem(1)">个人</view>
<view class="li" :class="obj.source == 2?'li-on':''" @click="tabItem(2)">单位</view>
</view>
</view>
<view class="item" v-if="obj.source == 1">
<view class="l">发票抬头</view>
<view class="r">
<input type="text" placeholder="请输入个人姓名" />
</view>
</view>
<view class="item" v-if="obj.source == 2">
<view class="l">发票抬头</view>
<view class="r">
<input type="text" v-model="obj.header" placeholder="请输入单位名称" />
<picker :value="index1" :range="invoicList" :range-key="'header'" mode="selector"
@change="bindPickerChange1">
<view class="tt">更改抬头</view>
</picker>
</view>
</view>
<view class="item" v-if="obj.source == 2">
<view class="l">单位税号</view>
<view class="r">
<input type="text" v-model="obj.duty_no" placeholder="请输入纳税人识别号" />
</view>
</view>
</template>
</view>
</view>
<u-modal v-model="show" :content="content" :show-cancel-button="true" :show-title="false"
confirm-color="#F55349"></u-modal>
<view class="invoice-fd" @click="submit">
提交
</view>
<addShuiyin />
</view>
</template>
<script>
import * as InvoiceApi from '@/api/invoice'
import * as wallet from '@/api/wallet'
import * as CaptchaApi from '@/api/captcha';
export default {
data() {
return {
content: "确认您的发票信息无误后再提交",
show: false,
index: -1,
array: ['普通增值税发票', '普通发票'],
index1: -1,
invoicList: [],
countdown: 60,
countDownFun: null,
obj: {
money: '', //提现金额
bank_name: '', //开户姓名(仅提现方式为银行卡)
bank_card: '', //银行卡号(仅提现方式为银行卡)
bank_phone: '',
is_invoice: 2,
smsCode: '',
header: '',
duty_no: '',
source: 1
},
balance: '',
isClick: true
};
},
onLoad(op) {
this.balance = op.balance
this.getMyInvoicing()
},
methods: {
validatePhoneNumber(phone) {
// 定义手机号码的正则表达式
var regExp = /^1[3456789]\d{9}$/;
if (regExp.test(phone)) {
return true; // 符合手机号码格式要求
} else {
return false; // 不符合手机号码格式要求
}
},
submit() {
let that = this;
if (!that.obj.money) {
uni.showToast({
title: '请输入提现金额',
icon: 'none',
duration: 2000
})
return
}
if (that.obj.money == 0) {
uni.showToast({
title: '提现金额不能为0',
icon: 'none',
duration: 2000
})
return
}
if (!that.obj.bank_name) {
uni.showToast({
title: '请输入开户行姓名',
icon: 'none',
duration: 2000
})
return
}
if (!that.obj.bank_card) {
uni.showToast({
title: '请输入银行卡号',
icon: 'none',
duration: 2000
})
return
}
if (that.obj.is_invoice == 1 && !that.obj.header) {
uni.showToast({
title: '请输入发票抬头',
icon: 'none',
duration: 2000
})
return
}
if (that.obj.is_invoice == 1 && !that.obj.duty_no) {
uni.showToast({
title: '请输入发票抬头',
icon: 'none',
duration: 2000
})
return
}
if (!that.validatePhoneNumber(that.obj.bank_phone)) {
uni.showToast({
title: '请输入正确的手机号',
icon: 'none',
duration: 2000
})
return
}
if (!that.obj.smsCode) {
uni.showToast({
title: '请输入验证码',
icon: 'none',
duration: 2000
})
return
}
console.log(that.obj)
wallet.submit(that.obj)
.then(res => {
if (res.status == 20) {
uni.$emit('updateDataEvent');
// 返回上一页
uni.navigateBack();
}
})
.finally()
},
getCode() {
// 获取验证码
const that = this
if (that.isClick == false) {
return;
}
if (!that.validatePhoneNumber(that.obj.bank_phone)) {
uni.showToast({
icon: "none",
title: '请输入正确的手机号'
})
return
}
that.isClick = false
CaptchaApi.sendSmsCaptcha({
mobile: that.obj.bank_phone
}).then(res => {
if (res.status == 200) {
that.showCountDown = !that.showCountDown
that.countDownFun = setInterval(() => {
if (that.countdown >= 1) {
that.countdown = that.countdown - 1
that.isClick = false
} else {
that.showCountDown = false
that.countdown = 60
clearInterval(that.countDownFun)
that.isClick = true
}
}, 1000)
uni.showToast({
title: res.message
})
} else {
uni.showToast({
title: res.message
})
}
})
},
getMyInvoicing() {
let app = this;
InvoiceApi.myInvoicing()
.then(result => {
app.invoicList = result.data.list
})
},
onCheck(e) {
let that = this
let amount = e.detail.value
let num = null
num = amount.replace(new RegExp('^(\\d+\\.\\d{2}).+'), '$1')
const startPoint = /^\./g
if (startPoint.test(num)) {
num = amount.replace(startPoint, '0.')
}
if (num && !num.includes('.') && num !== '0') {
num = +num
}
const morePoint = /\.+(\d*|\.+)\./g
if (morePoint.test(num)) {
num = amount
.replace(/\.{2,}/g, ".")
.replace(".", "$#$")
.replace(/\./g, "")
.replace("$#$", ".")
}
if (num > Number(that.balance)) {
uni.showToast({
title: that.balance > 0 ? `最多可用${Number(that.balance)}元, 请重新输入` : '暂无可提现金额',
icon: 'none',
duration: 2000
})
that.obj.money = ''
that.$set(that.obj, 'money', '')
} else {
if (!num) {
that.obj.money = ''
that.$set(that.obj, 'money', '')
} else {
that.$set(that.obj, 'money', num)
that.obj.money = num
}
}
},
allMoeny() { //全部体现
if (this.balance > 0) {
this.obj.money = this.balance
} else {
uni.showToast({
title: '暂无可提现金额',
icon: 'none',
duration: 2000
})
}
},
tabItem(i) {
this.obj.source = i;
},
toggleItem(i) {
this.obj.is_invoice = i;
if (i == 1) {
this.show = true;
}
},
bindPickerChange1(e) {
this.index1 = e.detail.value;
this.obj.duty_no = this.invoicList[e.detail.value].duty_no;
this.obj.header = this.invoicList[e.detail.value].header
}
}
}
</script>
<style lang="scss" scoped>
page {
min-height: 100%;
}
.invoice {
overflow: hidden;
padding-bottom: 60rpx;
&-goods {
padding: 0 60rpx;
overflow: hidden;
height: 482rpx;
background: #F55349;
box-sizing: border-box;
.a {
font-size: 28rpx;
font-weight: 400;
color: #FFFFFF;
padding: 30rpx 0;
margin-top: 30rpx;
}
.b {
font-size: 36rpx;
font-weight: 500;
color: #FFFFFF;
text {
font-size: 63rpx;
}
}
}
&-info {
width: 710rpx;
margin: 0 auto;
margin-top: 20rpx;
overflow: hidden;
position: relative;
background-color: #fff;
top: -230rpx;
.b {
padding: 0 30rpx 0 45rpx;
box-sizing: border-box;
overflow: hidden;
.items {
padding-top: 20rpx;
padding-bottom: 30rpx;
font-size: 28rpx;
color: #FF3126;
}
.item {
padding: 30rpx 0;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
border-top: 1px solid #F3F3F3;
font-size: 28rpx;
font-weight: 500;
color: #414141;
overflow: hidden;
&:first-child {
border-top-color: #fff;
}
.l {
width: 180rpx;
font-size: 28rpx;
font-weight: 400;
color: #414141;
}
.r {
flex: 1;
display: flex;
align-items: center;
font-size: 28rpx;
font-weight: 400;
color: #414141;
.lis {
font-size: 28rpx;
font-weight: 500;
color: #414141;
display: flex;
align-items: center;
width: 120rpx;
justify-content: center;
image {
width: 30rpx;
height: 30rpx;
display: block;
margin-right: 10rpx;
}
}
.li {
width: 150rpx;
height: 78rpx;
background: #F3F3F3;
border-radius: 8rpx;
text-align: center;
line-height: 78rpx;
font-size: 28rpx;
font-weight: 400;
color: #262626;
margin-right: 12rpx;
&-on {
background: #FDF4F4;
background: url(https://www.royaum.com.cn/static/invoice/select-active.png) center top no-repeat;
background-size: contain;
}
}
input {
flex: 1;
font-size: 28rpx;
}
picker {
flex: 1;
.tt {
width: 180rpx;
position: relative;
color: #4894FF;
text-align: right;
&::after {
content: "";
width: 16rpx;
height: 16rpx;
border-top: 1px solid #4894FF;
border-left: 1px solid #4894FF;
position: absolute;
right: -20rpx;
top: 14rpx;
z-index: 1;
transform: rotate(135deg);
}
}
.lx {
width: 100%;
position: relative;
&::after {
content: "";
width: 16rpx;
height: 16rpx;
border-top: 1px solid #B8B8B8;
border-left: 1px solid #B8B8B8;
position: absolute;
right: 20rpx;
top: 14rpx;
z-index: 1;
transform: rotate(135deg);
}
}
}
}
}
}
}
&-company {
width: 710rpx;
background: #F55349;
border-radius: 8rpx;
position: relative;
background-color: #fff;
top: -230rpx;
overflow: hidden;
z-index: 1;
margin: 0 auto;
.a {
padding: 35rpx 50rpx 0;
font-size: 28rpx;
font-weight: 500;
color: #414141;
.r {
display: flex;
align-items: baseline;
padding: 30rpx 0;
border-bottom: 1px solid #F3F3F3;
.p {
display: flex;
align-items: baseline;
font-size: 56rpx;
font-weight: 500;
color: #414141;
input {
flex: 1;
font-size: 36rpx;
margin-left: 20rpx;
color: #212121;
}
}
}
}
.b {
padding: 0 30rpx 0 45rpx;
box-sizing: border-box;
background-color: #fff;
overflow: hidden;
.item {
padding: 30rpx 0;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
border-top: 1px solid #F3F3F3;
font-size: 32rpx;
font-weight: 500;
color: #262626;
overflow: hidden;
&:first-child {
border-top-color: #fff;
}
.l {
width: 250rpx;
font-size: 28rpx;
font-weight: 400;
color: #414141;
}
.r {
flex: 1;
display: flex;
align-items: center;
font-size: 28rpx;
font-weight: 400;
color: #414141;
input {
font-size: 28rpx;
flex: 1;
}
.code {
color: #F55349;
}
}
}
}
}
}
.invoice-fd {
width: 664rpx;
height: 104rpx;
background: #F55349;
border-radius: 8rpx;
text-align: center;
margin: 0 auto;
margin-top: -150rpx;
font-size: 32rpx;
font-weight: 500;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
}
</style>