374 lines
8.3 KiB
Vue
374 lines
8.3 KiB
Vue
<template>
|
||
<view class="min-h-100vh bg-gray">
|
||
<up-navbar
|
||
bg-color="transparent"
|
||
title="提现"
|
||
@leftClick="back"
|
||
:fixed="true"
|
||
></up-navbar>
|
||
<view class="top">
|
||
<image class="top_bg" src="/distribution/static/top_bg.png"></image>
|
||
<view class="top_content">
|
||
<view class="color-333 font-16"> 提现金额 </view>
|
||
<view class="u-m-t-32 u-flex input-number-box">
|
||
<text class="fuhao">¥</text>
|
||
<input
|
||
v-model="money"
|
||
type="digit"
|
||
class="input-number"
|
||
placeholder="最小提现金额为30"
|
||
/>
|
||
<text class="all-in" @click="allin">全部提现</text>
|
||
</view>
|
||
<view class="color-666 font-12 u-m-t-16">
|
||
<text>可提现金额：￥{{ state.cashOutAmount || 0 }}</text>
|
||
<text class="u-m-l-20">手续费为8%</text>
|
||
</view>
|
||
|
||
<view class="btn-group">
|
||
<view class="btn shiming" @click="toShiming">实名认证</view>
|
||
<view class="btn tixian u-m-t-32" @click="tixian">立即提现</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bottom">
|
||
<view class="u-flex">
|
||
<view class="title">提现记录</view>
|
||
</view>
|
||
<view class="list">
|
||
<view v-for="(item, index) in list" :key="index" class="shop-item">
|
||
<view class="u-flex-1">
|
||
<view class="u-flex justify-between">
|
||
<view>
|
||
<view class="name">提现</view>
|
||
<view class="shouxufei u-m-t-16"
|
||
>手续费{{ item.serviceFee }}元</view
|
||
>
|
||
<view class="font-12 color-999 u-m-t-10">
|
||
时间：{{ item.createTime }}
|
||
</view>
|
||
</view>
|
||
<view class="u-flex u-flex-col justify-center">
|
||
<template v-if="item.status == 'pending'">
|
||
<view class="lingqu" @click="lingqu(item)">点击领取</view>
|
||
<view class="price reduce"
|
||
>-{{
|
||
BigNumber(item.serviceFee).plus(item.amount).toFixed(2)
|
||
}}</view
|
||
>
|
||
</template>
|
||
<template v-if="item.status == 'finish'">
|
||
<view class="status">提现成功</view>
|
||
<view class="price reduce"
|
||
>-{{
|
||
BigNumber(item.serviceFee).plus(item.amount).toFixed(2)
|
||
}}</view
|
||
>
|
||
</template>
|
||
<template v-if="item.status == 'fail'">
|
||
<view class="status fail">提现失败</view>
|
||
<view class="price"
|
||
>+{{
|
||
BigNumber(item.serviceFee).plus(item.amount).toFixed(2)
|
||
}}</view
|
||
>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="" style="padding-bottom: 60rpx;">
|
||
<up-loadmore
|
||
:status="isEnd?'no-more':'loadmore'"
|
||
></up-loadmore>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import * as distributionApi from "@/common/api/market/distribution.js";
|
||
import { productStore } from "@/stores/user.js";
|
||
const storeuser = productStore();
|
||
import { ref, onMounted, reactive } from "vue";
|
||
import { onLoad, onReachBottom, onShow } from "@dcloudio/uni-app";
|
||
import BigNumber from "bignumber.js";
|
||
function back() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
}
|
||
async function lingqu(item) {
|
||
const res = await distributionApi.withdrawDetail({ id: item.id });
|
||
if (res) {
|
||
uni.requestMerchantTransfer({
|
||
...res,
|
||
success: (res) => {
|
||
uni.showToast({
|
||
title: "领取成功",
|
||
icon: "none",
|
||
});
|
||
refesh();
|
||
},
|
||
fail: (res) => {
|
||
uni.showToast({
|
||
title: "领取失败",
|
||
icon: "none",
|
||
});
|
||
refesh();
|
||
},
|
||
});
|
||
}
|
||
}
|
||
function toShiming() {
|
||
uni.navigateTo({
|
||
url: "/distribution/shiming/index",
|
||
});
|
||
}
|
||
const userinfo = ref(uni.cache.get("userinfo") || {});
|
||
const query = reactive({
|
||
page: 1,
|
||
size: 10,
|
||
});
|
||
const list = ref([]);
|
||
const isEnd = ref(false);
|
||
async function withdrawFlow() {
|
||
const res = await distributionApi.withdrawFlow(query);
|
||
if (res) {
|
||
if (query.page == 1) {
|
||
list.value = res.records;
|
||
} else {
|
||
list.value.push(...res.records);
|
||
}
|
||
isEnd.value = query.page >= res.totalPage * 1;
|
||
}
|
||
}
|
||
|
||
const state = reactive({
|
||
cashOutAmount: 0,
|
||
pendingIncome: 0,
|
||
totalIncome: 0,
|
||
});
|
||
async function centerUser() {
|
||
const res = await distributionApi.centerUser();
|
||
if (res) {
|
||
Object.assign(state, res);
|
||
}
|
||
}
|
||
|
||
const money = ref(0);
|
||
|
||
function allin() {
|
||
money.value = state.cashOutAmount;
|
||
}
|
||
async function tixian() {
|
||
if (!userinfo.value.idCard) {
|
||
uni.showToast({
|
||
title: "请先实名认证",
|
||
icon: "none",
|
||
});
|
||
setTimeout(() => {
|
||
toShiming();
|
||
}, 1500);
|
||
return;
|
||
}
|
||
if (money.value <= 0) {
|
||
uni.showToast({
|
||
title: "请输入提现金额",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
if (money.value > state.cashOutAmount) {
|
||
uni.showToast({
|
||
title: "提现金额不能大于可提现金额",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
const res = await distributionApi.withdraw({
|
||
amount: money.value,
|
||
});
|
||
if (res) {
|
||
uni.showToast({
|
||
title: "提现成功",
|
||
icon: "none",
|
||
});
|
||
}
|
||
|
||
refesh();
|
||
}
|
||
function refesh() {
|
||
setTimeout(() => {
|
||
query.page = 1;
|
||
init();
|
||
}, 3000);
|
||
}
|
||
async function init() {
|
||
await centerUser();
|
||
await withdrawFlow();
|
||
}
|
||
onReachBottom(async () => {
|
||
console.log('onReachBottom', isEnd.value);
|
||
if (!isEnd.value) {
|
||
query.page++;
|
||
await withdrawFlow();
|
||
}
|
||
});
|
||
onLoad(() => {
|
||
init();
|
||
});
|
||
|
||
onShow(() => {
|
||
storeuser.actionsAPIuser().then((res) => {
|
||
userinfo.value = res;
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.input-number-box {
|
||
width: 428rpx;
|
||
padding-bottom: 10rpx;
|
||
border-bottom: 1px solid #999;
|
||
font-size: 28rpx;
|
||
align-items: baseline;
|
||
.fuhao {
|
||
font-size: 64rpx;
|
||
color: #333;
|
||
}
|
||
.input-number {
|
||
flex: 1;
|
||
height: 100%;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
padding-left: 24rpx;
|
||
padding-right: 10rpx;
|
||
}
|
||
.all-in {
|
||
font-size: 28rpx;
|
||
color: #fe7e00;
|
||
}
|
||
}
|
||
.list {
|
||
.shop-item {
|
||
padding: 32rpx 28rpx;
|
||
border-bottom: 2rpx solid #ededed;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
display: flex;
|
||
align-items: center;
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.fufei {
|
||
color: #e8ad7b;
|
||
}
|
||
.tag {
|
||
font-size: 24rpx;
|
||
color: #ff1c1c;
|
||
background-color: #ffe4e4;
|
||
padding: 8rpx 20rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
.name {
|
||
color: #333;
|
||
font-weight: 700;
|
||
}
|
||
.shouxufei {
|
||
}
|
||
.shouyi {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
.status {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
text-align: right;
|
||
color: #333333;
|
||
&.fail {
|
||
color: #ff1c1c;
|
||
}
|
||
}
|
||
.lingqu {
|
||
font-size: 28rpx;
|
||
border-radius: 8rpx;
|
||
background: #fe6d11;
|
||
padding: 8rpx 16rpx;
|
||
color: #ffffff;
|
||
}
|
||
.price {
|
||
font-weight: 700;
|
||
font-size: 48rpx;
|
||
margin-top: 16rpx;
|
||
color: #fe7e00;
|
||
text-align: right;
|
||
&.reduce {
|
||
color: #666;
|
||
}
|
||
}
|
||
.top {
|
||
position: relative;
|
||
.top_content {
|
||
border: 1px solid rgba(255, 255, 255, 0.8);
|
||
position: absolute;
|
||
left: 28rpx;
|
||
right: 28rpx;
|
||
bottom: 52rpx;
|
||
padding: 28rpx 28rpx 52rpx 28rpx;
|
||
border-radius: 16rpx;
|
||
|
||
flex-shrink: 0;
|
||
fill: #ffffff3b;
|
||
stroke-width: 2rpx;
|
||
stroke: #fff;
|
||
filter: drop-shadow(2rpx -4rpx 13.4rpx #ff6f0124);
|
||
backdrop-filter: blur(5.1rpx);
|
||
.btn-group {
|
||
position: absolute;
|
||
right: 28rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
.btn {
|
||
padding: 8rpx 16rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 24rpx;
|
||
border: 2rpx solid #fe6d11;
|
||
&.shiming {
|
||
color: #fe6d11;
|
||
}
|
||
&.tixian {
|
||
color: #fff;
|
||
background-color: #fe6d11;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.top_bg {
|
||
width: 100%;
|
||
height: 580rpx;
|
||
}
|
||
.bottom {
|
||
margin: 0 28rpx;
|
||
border-radius: 16rpx 16rpx 0 0;
|
||
background-color: #fff;
|
||
transform: translateY(-20rpx);
|
||
}
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #333;
|
||
padding: 28rpx;
|
||
}
|
||
.small-title {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #333;
|
||
}
|
||
</style> |