<template>
<view class="cash-content" :style="{'--status-bar-': statusBarHeight}">
<view class="cash-content-info">
<!-- 头部主要内容 开始 -->
<view class="cash-content-header">
<customNavbar title="余额提现" bgColor="rgba(0,0,0,0)" :customNavbarInfo="{}" :contentStyle="{}"
:leftStyle="{color: '#fff'}"></customNavbar>
<!-- 余额 开始 -->
<view class="cash-content-money">
<text>可提现余额（元）</text>
<view class="cash-content-money-num">
<text>
<text class="inspage-userinfo-util">￥</text>
<u-count-to :decimals="2" :startVal="0" :endVal="monry" color="#fff" />
<text class="balance-userinfo-util">元</text>
</text>
</view>
</view>
<!-- 余额 结束 -->
<!-- 提现 开始 -->
<view class="cash-content-cash">
<view class="cash-content-cash-box">
<text>提现金额</text>
<view class="cash-content-cash-money">
<text class="cash-content-cash-money-icon">￥</text>
<view class="cash-content-cash-input">
<u--input placeholder="请输入内容" border="none" clearable type="number" v-model="moneyValue"
@change="moneyAccountFun"></u--input>
</view>
<!-- <text class="cash-content-cash-money-all" @click="cashAll()">全部提现</text> -->
</view>
<view class="cash-content-cash-service">
<view>
<text>服务费</text>
<text>{{ setServiceType(withdrawInfo)}}</text>
</view>
<view>
<text>到账金额</text>
<text>￥ {{ moneyAccount }}</text>
</view>
</view>
<view class="cash-content-cash-card">
<u-cell-group :border="false">
<u-cell :border="false" title="提现至" :isLink="false" :value="'微信钱包'"
@click="openPopup()"></u-cell>
</u-cell-group>
</view>
<view class="cash-content-cash-submit">
<view @click="openModal">提现</view>
</view>
</view>
</view>
<!-- 提现 结束 -->
<!-- 选择银行卡 -->
<u-picker :show="show" keyName="label" :columns="columns" @cancel="cancelPicker"
@confirm="confirmPicker"></u-picker>
</view>
<!-- 头部主要内容 结束 -->
<!-- 输入密码 -->
<u-overlay :show="showModal">
<view class="password-model">
<view>
<view>请输入支付密码</view>
<view>提现</view>
<view>￥{{ moneyValue }}</view>
<view>
<u-code-input @finish="marketPersons" v-model="password" :focus="true"></u-code-input>
</view>
<text @click="clearOverlay"><u-icon name="close-circle" size="30"></u-icon></text>
</view>
</view>
</u-overlay>
</view>
</view>
</template>
<script>
import {
navigateTo
} from "@/utils/util.js"
export default {
data() {
return {
title: '这是我的',
statusBarHeight: 0, // 状态栏安全距离
monry: 0,
moneyValue: null,
moneyAccount: '',
tool: [ // 我的工具
{
title: "支付设置",
icon: this.$commonConfig.staticUrl + 'balance/zhifu.png',
url: '/pages/invitationStatistics/index'
},
{
title: "余额提现",
icon: this.$commonConfig.staticUrl + 'balance/mingxi.png',
url: '/pages/balance/index'
},
],
show: false,
columns: [
[{
label: '雪月夜',
// 其他属性值
id: 2021
// ...
}, {
label: '冷夜雨',
id: 804
}]
],
withdrawInfo: {},
showModal: false,
password: '',
personList:[]
}
},
onLoad(page) {
this.moneyValue = Number(page.withdrawTotal);
this.personList = JSON.parse(page.personList);
// #ifdef H5
//window.addEventListener('popstate', this.browserBack)
// #endif
},
onUnload() {
// #ifdef H5
//window.removeEventListener("popstate", this.browserBack);
// #endif
},
onShow() {
//this.statusBarHeight = getApp().globalData.statusBarHeight
this.getWithdrawInfo()
},
methods: {
/**
* @author ygh
* @data 2023-12-20
*/
navigateToFun() {
navigateTo('/pages/cash/index')
},
/**
* 数字显示格式化
*
*/
numFormat(num = 0) {
if (num < 100000) {
return num
} else if (num > 100000) {
return (num / 10000).toFixed(2)
}
},
/** 全部提现 */
cashAll() {
this.moneyValue = this.monry
},
/**
* 打开选择器
*/
openPopup() {
return
this.show = true
},
/** 取消选择器 */
cancelPicker() {
this.show = false
},
/** 确认选择器 */
confirmPicker() {
this.show = false
},
/**
* 获取数据
*/
async getWithdrawInfo() {
try {
let res = await this.$u.api.withdrawInfo({
noSign: 1,
userid: this.distribution_user_info.userId
})
if (res && res.code === 200) {
this.withdrawInfo = res.data
// this.withdrawInfo.serviceType = 1
// this.withdrawInfo.serviceCharge = 0
this.monry = res.data.withdrawTotal;
this.moneyAccountFun();
}
} catch (e) {
//TODO handle the exception
console.error("e===", e)
}
},
openModal() {
if (!this.moneyValue || this.moneyValue < this.withdrawInfo.minAmount) {
uni.showToast({
title: '最小提现金额' + this.withdrawInfo.minAmount,
icon: 'none'
});
return
}
if(this.moneyValue > this.monry) {
uni.showToast({
title: '总金额不能大于用户可提现金额',
icon: 'none'
});
return
}
// uni.showModal({
// title: '提示',
// content: '确定提现余额吗?',
// success: res => {
// this.orderWithdraw()
// },
// complete() {
// }
// })
this.showModal = true
// #ifdef H5
window.history.replaceState(null, null, document.URL)
// #endif
},
/** 关闭 */
clearOverlay() {
this.showModal = false
},
/**
* 密码校验
*/
async marketPersons() {
try {
let res = await this.$u.api.marketPersons({
noSign: 1,
userid: this.distribution_user_info.userId,
oldPassword: this.password
})
if (res && res.code === 200) {
this.orderWithdraw()
} else {
this.password = ''
}
} catch (e) {
//TODO handle the exception
console.error("e===", e)
this.password = ''
}
},
/**
* 提交申请
*/
async orderWithdraw() {
try {
let res = await this.$u.api.orderWithdraw({
noSign: 1,
userid: this.distribution_user_info.userId,
"withdrawType": "wechat",
"withdrawTotal": this.moneyAccount,
"serviceAmount": this.withdrawInfo.serviceCharge,
"bankId": null,
personList:this.personList
})
if (res && res.code === 200) {
navigateTo('/pages/cashPrompt/index',{
id: res.data.orderId,
// ...res.data.bankInfo,
// moneyValue: this.moneyValue,
// withdrawType: 'wechat',
// serviceType: this.withdrawInfo.serviceType,
// serviceCharge: this.withdrawInfo.serviceCharge
})
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
this.showModal = false
} catch (e) {
//TODO handle the exception
console.error("e===", e)
this.showModal = false
uni.showToast({
title: "提交失败",
icon: 'none'
})
}
},
/**
* 设置服务费显示
*/
setServiceType(data) {
if (data && data.serviceType) {
return data.serviceType == 1 ? ('￥' + data.serviceCharge) : data.serviceCharge
}
},
/**
* 设置到账金额
*/
moneyAccountFun() {
let money = ''
if (this.withdrawInfo.serviceType == 1) {
money = this.moneyValue - (isNaN(this.withdrawInfo.serviceCharge) ? 0 : this.withdrawInfo
.serviceCharge)
} else if (this.withdrawInfo.serviceType == 2) {
let num1 = this.withdrawInfo.serviceCharge.replace("%", '')
let num = isNaN(num1) ? 0 : (Number(num1) / 100)
money = num ? this.moneyValue * num : Number(this.moneyValue)
}
this.moneyAccount = money < 0 ? '金额过小于零' : money.toFixed(2)
},
browserBack() {
console.log(1);
// 在这里写弹框
uni.showModal({
title: '提示',
content: '返回后此页面的操作将不作保留！',
cancelText: '确定返回',
confirmText: '留在此页',
success: (res) => {
if (res.confirm) {
// 用户选择留在此页，不进行任何操作
} else if (res.cancel) {
//window.history.back(); // 使用window.history.back()返回上一页
}
}
});
//window.history.replaceState(null, null, document.URL); // 保留此行代码
},
}
}
</script>
<style lang="scss" scoped>
.cash-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
--header-h: 620rpx;
.cash-content-info {
width: 100%;
box-sizing: border-box;
}
}
/** 头部主要内容 开始 */
.cash-content-header {
width: 100%;
height: var(--header-h);
box-sizing: border-box;
background: var(--gd-bgm-lg-color);
position: relative;
::v-deep .u-search {
padding: 0 30rpx !important;
}
::v-deep .u-search__action {
color: #fff !important;
}
/** 余额 开始 */
.cash-content-money {
width: 100%;
box-sizing: border-box;
margin-top: 50rpx;
padding-left: 66rpx;
color: #fff;
>text {
font-size: 24rpx;
}
.cash-content-money-num {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
margin-top: 24rpx;
>text:nth-child(1) {
.balance-userinfo-util {
font-size: 24rpx;
margin-left: 5rpx;
}
::v-deep .u-count-num {
font-weight: bold !important;
font-size: 48rpx !important;
}
}
>text:nth-child(2) {
margin-top: 20rpx;
font-size: 24rpx;
}
}
}
/** 余额 结束 */
/** 提现 开始 */
.cash-content-cash {
width: 100%;
box-sizing: border-box;
position: absolute;
top: 100%;
transform: translateY(-50%);
padding: 0 12rpx;
.cash-content-cash-box {
width: 100%;
height: 100%;
background-color: #fff;
box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(221, 221, 221, 0.5);
border-radius: 20rpx;
box-sizing: border-box;
padding: 34rpx 30rpx 38rpx;
>text {
font-size: 28rpx;
color: #363636;
}
.cash-content-cash-money {
width: 100%;
display: flex;
align-items: center;
padding: 40rpx 0 20rpx;
border-bottom: 2rpx solid #EEEEEE;
::v-deep .u-cell__body {
padding: 20rpx 0 !important;
}
.cash-content-cash-input {
width: 100%;
padding: 0 10rpx;
}
>text {
flex-shrink: 0;
flex-wrap: nowrap;
white-space: nowrap;
}
.cash-content-cash-money-icon {
font-size: 32rpx;
}
.cash-content-cash-money-all {
color: var(--gd-but-color);
font-size: 24rpx;
cursor: pointer;
}
}
.cash-content-cash-service {
width: 100%;
box-sizing: border-box;
padding: 20rpx 0;
border-bottom: 2rpx solid #EEEEEE;
>view {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
color: #606060;
padding: 5rpx 0 10rpx;
font-size: 24rpx;
}
}
.cash-content-cash-card {
width: 100%;
::v-deep .u-cell__body {
padding: 20rpx 0 !important;
}
}
.cash-content-cash-submit {
width: 100%;
height: 92rpx;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 0 80rpx 0;
margin-top: 70rpx;
>view {
width: 100%;
height: 100%;
border-radius: 46rpx;
color: #fff;
background-color: var(--gd-but-color);
font-size: 28rpx;
font-family: SourceHanSansCN, SourceHanSansCN;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
/** 提现 结束 */
}
/** 头部主要内容 结束 **/
/** 密码弹窗 */
.password-model {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 0 40rpx;
>view {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #fff;
color: #000;
padding: 50rpx 10rpx;
box-sizing: border-box;
position: relative;
border-radius: 20rpx;
>view {
font-size: 32rpx;
padding: 10rpx 0;
box-sizing: border-box;
}
>view:nth-child(3) {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 52rpx;
border-bottom: 2rpx solid #ccc;
padding: 10rpx 0 20rpx;
color: var(--gd-bgm-color);
}
>view:nth-child(4) {
margin-top: 30rpx;
}
>text {
position: absolute;
top: 0;
right: 0;
}
}
}
</style>