371 lines
8.2 KiB
Vue
371 lines
8.2 KiB
Vue
<template>
|
||
<view class="ithui-content">
|
||
<view class="withdraw">
|
||
<view class="withdraw-head">
|
||
<view class="withdraw-head-to">到账渠道</view>
|
||
<view class="withdraw-head-way">
|
||
<view class="withdraw-head-way-1">
|
||
<image class="way-icon" src="/static/money.png"></image>
|
||
<text class="way-text">微信零钱</text>
|
||
</view>
|
||
<view class="withdraw-head-way-2">仅支持整数，72小时内到账</view>
|
||
</view>
|
||
</view>
|
||
<view class="withdraw-body">
|
||
<text>提现金额</text>
|
||
<view class="input-money">
|
||
<text class="rmb">￥</text>
|
||
<input v-model.number="extract" type="text" @focus.prevent="stopKeyborad" class="t-input" />
|
||
</view>
|
||
<view class="info-money">
|
||
<view v-if="is_out">
|
||
<text class="info-money-num" style="color: #ff1e0f;">输入金额超过可提现余额，账户余额{{ pool }}元</text>
|
||
</view>
|
||
<view v-else-if="is_lowest">
|
||
<text class="info-money-num" style="color: #ff1e0f;">最低{{ lowest }}元起提现，账户余额{{ pool }}元</text>
|
||
</view>
|
||
<view v-else>
|
||
<text class="info-money-num">当前可提现余额{{ pool }}元，</text>
|
||
<text class="info-money-all" @click="getAll">全部提现</text>
|
||
</view>
|
||
</view>
|
||
<view :class="'tx' + (is_post ? '-active' : '')"><button @click="handleShowModel">提现</button></view>
|
||
</view>
|
||
|
||
<view :class="['keyboard', keyboradShow ? '' : 'active', isIphoneX ? 'isIphone' : '']">
|
||
<block v-for="(item, index) in 9" :key="index">
|
||
<view class="keyboard-item" @tap="keyboradKey(index + 1)">{{ index + 1 }}</view>
|
||
</block>
|
||
<view class="keyboard-item hide"></view>
|
||
<view class="keyboard-item" @tap="keyboradKey(0)"><text>0</text></view>
|
||
<view class="keyboard-item delte" @tap="keyboradDel()">
|
||
<image class="img" src="/static/del.png" mode="aspectFill" :lazy-load="true"></image>
|
||
</view>
|
||
</view>
|
||
<u-modal :show="showModal" title="提现确认" showCancelButton cancelText="我再想想" confirmColor="#ff1e0f"
|
||
confirmText="确认提现" @confirm="getMoney" @cancel="showModal = false">
|
||
<view class="slot-content">
|
||
<rich-text :nodes="content"></rich-text>
|
||
</view>
|
||
</u-modal>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { ref, onMounted, onPullDownRefresh } from 'vue'
|
||
import { store } from '@/pages3/uni_modules/uni-id-pages/common/store.js'
|
||
|
||
export default {
|
||
setup() {
|
||
const pool = ref(0)
|
||
const extract = ref('')
|
||
const service_fee = ref(0.0)
|
||
const showModal = ref(false)
|
||
const is_out = ref(false)
|
||
const is_lowest = ref(false)
|
||
const is_post = ref(false)
|
||
const lowest = ref(1)
|
||
const fee = ref(0)
|
||
const money = ref('')
|
||
const real_money = ref('')
|
||
const keyboradShow = ref(true)
|
||
const isIphoneX = ref(false)
|
||
const isRefuse = ref(false)
|
||
const content = ref("")
|
||
|
||
onMounted(() => {
|
||
uni.showLoading({ title: '加载中' })
|
||
initData()
|
||
setTimeout(() => {
|
||
uni.hideLoading()
|
||
}, 500)
|
||
})
|
||
|
||
onPullDownRefresh(() => {
|
||
extract.value = ''
|
||
is_out.value = false
|
||
is_lowest.value = false
|
||
is_post.value = false
|
||
initData()
|
||
setTimeout(() => {
|
||
uni.stopPullDownRefresh()
|
||
}, 500)
|
||
})
|
||
|
||
function initData() {
|
||
const info = store.userInfo || {}
|
||
pool.value = Number(info.available) || 0
|
||
lowest.value = 1
|
||
fee.value = 0
|
||
keyboradShow.value = true
|
||
}
|
||
|
||
function stopKeyborad() {
|
||
uni.hideKeyboard()
|
||
}
|
||
|
||
function keyboradKey(key) {
|
||
extract.value = extract.value * 10 + key
|
||
checkMoney()
|
||
}
|
||
|
||
function keyboradDel() {
|
||
if (extract.value && extract.value > 0) {
|
||
let val = parseInt(extract.value / 10)
|
||
if (val === 0) val = ''
|
||
extract.value = val
|
||
checkMoney()
|
||
}
|
||
}
|
||
|
||
function getAll() {
|
||
extract.value = parseInt(pool.value)
|
||
checkMoney()
|
||
}
|
||
|
||
function checkMoney() {
|
||
if (!extract.value || extract.value < lowest.value) {
|
||
is_lowest.value = true
|
||
is_post.value = false
|
||
} else if (extract.value > pool.value) {
|
||
is_out.value = true
|
||
is_lowest.value = false
|
||
is_post.value = false
|
||
} else {
|
||
is_out.value = false
|
||
is_lowest.value = false
|
||
is_post.value = true
|
||
}
|
||
if (parseFloat(extract.value).toString() === 'NaN') {
|
||
is_post.value = false
|
||
}
|
||
}
|
||
|
||
function handleShowModel() {
|
||
if (isRefuse.value) return
|
||
checkMoney()
|
||
if (!is_post.value) return
|
||
money.value = extract.value
|
||
service_fee.value = Number((extract.value * (fee.value / 100)).toString().match(/^\d+(?:\.\d{0,2})?/))
|
||
real_money.value = Number((extract.value - service_fee.value).toString().match(/^\d+(?:\.\d{0,2})?/))
|
||
content.value = `<p>提现金额：<em style="font-style:normal;color:#ff1e0f">${money.value} 元</p>
|
||
<p>实际到账：<em style="font-style:normal;color:#ff1e0f">${real_money.value} 元</em></p>
|
||
<p>服务费用：<em style="font-style:normal;color:#ff1e0f">${service_fee.value} 元</em></p>
|
||
<p>服务费率：<em style="font-style:normal;color:#ff1e0f">${fee.value}%</em></p>
|
||
`
|
||
showModal.value = true
|
||
}
|
||
|
||
function getMoney() {
|
||
showModal.value = false
|
||
if (isRefuse.value) return
|
||
isRefuse.value = true
|
||
setTimeout(() => {
|
||
uni.showToast({
|
||
title: "提现申请已提交，等待审核",
|
||
mask: false,
|
||
icon: 'none'
|
||
})
|
||
}, 500)
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 1000)
|
||
}
|
||
|
||
return {
|
||
pool,
|
||
extract,
|
||
service_fee,
|
||
showModal,
|
||
is_out,
|
||
is_lowest,
|
||
is_post,
|
||
lowest,
|
||
fee,
|
||
money,
|
||
real_money,
|
||
keyboradShow,
|
||
isIphoneX,
|
||
isRefuse,
|
||
content,
|
||
initData,
|
||
stopKeyborad,
|
||
keyboradKey,
|
||
keyboradDel,
|
||
getAll,
|
||
checkMoney,
|
||
handleShowModel,
|
||
getMoney
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #ededed;
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
::v-deep .u-modal__content {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.ithui {
|
||
&-content {
|
||
.withdraw {
|
||
padding: 40rpx;
|
||
|
||
&-head {
|
||
background-color: #f7f7f7;
|
||
display: flex;
|
||
align-content: center;
|
||
padding: 40rpx 60rpx;
|
||
font-size: 28rpx;
|
||
|
||
&-to {}
|
||
|
||
&-way {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-content: center;
|
||
margin-left: 40rpx;
|
||
|
||
&-1 {
|
||
color: #576b95;
|
||
margin-bottom: 20rpx;
|
||
|
||
.way-icon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin-right: 10rpx;
|
||
top: 4rpx;
|
||
}
|
||
}
|
||
|
||
&-2 {
|
||
color: #acacac;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
&-body {
|
||
background-color: #fff;
|
||
padding: 40rpx 60rpx;
|
||
font-size: 28rpx;
|
||
|
||
.input-money {
|
||
display: flex;
|
||
align-content: center;
|
||
font-weight: 600;
|
||
border-bottom: 1rpx solid #eaeef1;
|
||
|
||
.rmb {
|
||
font-size: 2em;
|
||
top: 20rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.t-input {
|
||
height: 1.9em;
|
||
font-size: 2.5em;
|
||
border: none;
|
||
position: relative;
|
||
left: 3.5%;
|
||
outline: none;
|
||
}
|
||
}
|
||
|
||
.info-money {
|
||
margin-top: 20rpx;
|
||
font-size: 24rpx;
|
||
margin-bottom: 40rpx;
|
||
|
||
&-num {
|
||
color: #b2b2b2;
|
||
}
|
||
|
||
&-all {
|
||
color: #576b95;
|
||
}
|
||
}
|
||
|
||
.tx {
|
||
button {
|
||
color: #b2b2b2;
|
||
}
|
||
}
|
||
|
||
.tx-active {
|
||
button {
|
||
color: #fff;
|
||
background: #07c160;
|
||
}
|
||
}
|
||
}
|
||
|
||
.keyboard {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
background: #ebebeb;
|
||
display: flex;
|
||
justify-content: center;
|
||
z-index: 2;
|
||
flex-wrap: wrap;
|
||
transition: all 0.2s ease-in 0.2s;
|
||
}
|
||
|
||
.active {
|
||
bottom: -400rpx;
|
||
}
|
||
|
||
.keyboard-item {
|
||
box-sizing: border-box;
|
||
width: 250rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #fff;
|
||
font-size: 40rpx;
|
||
color: #333;
|
||
height: 99rpx;
|
||
border: 1rpx solid #ebebeb;
|
||
border-top: none;
|
||
border-left: none;
|
||
}
|
||
|
||
.hide {
|
||
opacity: 0;
|
||
}
|
||
|
||
.delte {
|
||
background: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.delte image {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
|
||
.isIphone {
|
||
padding-bottom: 68rpx !important;
|
||
}
|
||
|
||
.fee {
|
||
em {
|
||
font-size: 0.5rem;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|