307 lines
8.9 KiB
Vue
307 lines
8.9 KiB
Vue
<template>
|
||
<view class="content column">
|
||
<view class="row" style="width: 90%; margin: 100rpx auto 0; justify-content: space-between;">
|
||
<image src="/static/back.png" style="width: 40rpx; height: 40rpx;" @click="goBack()" mode=""></image>
|
||
<text style="font-size: 30rpx;">我的收益</text>
|
||
<view style="width: 40rpx;"></view>
|
||
</view>
|
||
|
||
|
||
<view class="" style="width: 728rpx; height: 2rpx; background-color: #EBEBEB; margin: 40rpx auto 0;"></view>
|
||
|
||
|
||
<view class="column"
|
||
style="width: 686rpx; height: 282rpx; box-shadow: 0 0 18rpx rgba(0, 0, 0, 0.08); margin: 20rpx auto 0; background-color: white; border-radius: 10rpx;">
|
||
|
||
<view class="row">
|
||
<view class="column" style="margin-top: 20rpx; margin-left: 24rpx;">
|
||
<text style="font-size: 28rpx;">待提取收益（元）</text>
|
||
<text style="font-size: 48rpx;">{{ pendingAmount.toFixed(2) }}</text>
|
||
</view>
|
||
<view class="column" style="margin-top: 20rpx; margin-left: auto; margin-right: 22rpx;">
|
||
<text style="font-size: 28rpx;">已提取收益（元）</text>
|
||
<text style="font-size: 48rpx;">{{ extractedAmount.toFixed(2) }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="center" @click="openWithdrawPopup"
|
||
style="width: 640rpx; height: 76rpx; background-color: #00AC4E; border-radius: 48rpx; margin: 44rpx auto 0; font-size: 30rpx; color: #FFFFFF;">
|
||
去提现
|
||
</view>
|
||
|
||
</view>
|
||
|
||
|
||
<view class="center" style="color: #00A2FF; font-size: 24rpx; margin: 20rpx;" @click="openRulePopup">
|
||
<text>点击查看收益规则＞＞</text>
|
||
</view>
|
||
|
||
<view class="column"
|
||
style="width: 686rpx; height: 744rpx; background-color: #FFFFFF; box-shadow: 0 0 18rpx rgba(0, 0, 0, 0.08); margin: 0 auto 0;">
|
||
|
||
<view class="row" style="width: 100%; height: 96rpx; background-color: #00AC4E;">
|
||
<view class="center" style="flex: 1;" :style="setColor(0)" @click="clickTab(0)">
|
||
收益记录
|
||
</view>
|
||
<view class="center" style="flex: 1;" :style="setColor(1)" @click="clickTab(1)">
|
||
提现记录
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view v-if="currentIndex == 0" class="row" style="font-size: 28rpx; margin-top: 20rpx;">
|
||
<view class="center" style="flex: 1;">时间</view>
|
||
<view class="center" style="flex: 1;">房号/房名</view>
|
||
<view class="center" style="flex: 1;">房费</view>
|
||
<view class="center" style="flex: 1;">收益</view>
|
||
</view>
|
||
|
||
<view v-else class="row" style="font-size: 28rpx; margin-top: 20rpx;">
|
||
<view class="center" style="flex: 1;">时间</view>
|
||
<view class="center" style="flex: 1;">提现金额</view>
|
||
<view class="center" style="flex: 1;">状态</view>
|
||
</view>
|
||
|
||
<view class="" v-if="currentIndex == 0" style="width: 100%; flex: 1; margin-top: 16rpx;">
|
||
<view v-if="dataList.length === 0" class="center" style="margin-top: 100rpx; color: #999999; font-size: 28rpx;">
|
||
暂无收益记录
|
||
</view>
|
||
<view class="row" v-for="item in dataList" :key="item.id"
|
||
style="font-size: 28rpx; color: #555555; margin-bottom: 20rpx;">
|
||
<view class="center" style="flex: 1;">{{ item.date }}</view>
|
||
<view class="center" style="flex: 1;">{{ item.roomName }}</view>
|
||
<view class="center" style="flex: 1;">￥{{ item.roomFee.toFixed(2) }}</view>
|
||
<view class="center" style="flex: 1;">￥{{ item.earnings.toFixed(2) }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="" v-else style="width: 100%; flex: 1; margin-top: 16rpx;">
|
||
<view v-if="dataList.length === 0" class="center" style="margin-top: 100rpx; color: #999999; font-size: 28rpx;">
|
||
暂无提现记录
|
||
</view>
|
||
<view class="row" v-for="item in dataList" :key="item.id"
|
||
style="font-size: 28rpx; color: #555555; margin-bottom: 20rpx;">
|
||
<view class="center" style="flex: 1;">{{ item.date }}</view>
|
||
<view class="center" style="flex: 1;">￥{{ item.amount.toFixed(2) }}</view>
|
||
<view class="center" style="flex: 1;">{{ item.status }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
|
||
<up-popup v-model:show="show" @close="close" @open="openRulePopup" :round="10" mode="center" :closeable="true">
|
||
<view style="width: 656rpx;">
|
||
<view class="center" style="margin-top: 28rpx;">规则说明</view>
|
||
<view class="center" style="width: 80%; margin: 44rpx auto 20rpx; white-space: pre-wrap; text-align: left;">
|
||
{{ ruleContent || '加载中...' }}
|
||
</view>
|
||
|
||
</view>
|
||
</up-popup>
|
||
|
||
<up-popup v-model:show="reflectShow" @close="close" @open="openWithdrawPopup" :round="10" mode="center" :closeable="true">
|
||
<view style="width: 656rpx;">
|
||
<view class="center" style="margin-top: 28rpx;">提现申请</view>
|
||
<view class="center"
|
||
style="width: 90%; height: 114rpx; margin: 26rpx auto 20rpx; background-color: rgba(0,172,78,0.37); border-radius: 30rpx;">
|
||
<up-input placeholder="请输入要提现的金额" placeholderStyle="color:'#818181'" border="none"
|
||
inputAlign="center" fontSize="32rpx" v-model="value" type="digit"></up-input>
|
||
</view>
|
||
|
||
<view class="row" style="width: 90%; margin: 0 auto 0;">
|
||
<text style="font-size: 28rpx; color: #818181;">最高可提现{{ maxWithdrawAmount.toFixed(2) }}元</text>
|
||
<text style="font-size: 28rpx; color: #00A2FF; margin-left: auto;" @click="allWithdraw">全部提现</text>
|
||
</view>
|
||
|
||
<view class="center"
|
||
style="width: 304rpx; height: 90rpx; background-color: #00AC4E; color: #FFFFFF; margin: 30rpx auto 0; font-size: 32rpx;"
|
||
@click="submitWithdraw">
|
||
申请提现
|
||
</view>
|
||
|
||
</view>
|
||
</up-popup>
|
||
|
||
</view>
|
||
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getEarningsSummary,
|
||
getEarningsRule,
|
||
getEarningsRecordList,
|
||
getWithdrawRecordList,
|
||
applyWithdraw
|
||
} from '@/common/server/interface/earnings.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
currentIndex: 0,
|
||
show: false,
|
||
reflectShow: false,
|
||
dataList: [],
|
||
value: '',
|
||
pendingAmount: 0.00,
|
||
extractedAmount: 0.00,
|
||
maxWithdrawAmount: 0.00,
|
||
ruleContent: ''
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.loadEarningsSummary();
|
||
this.loadDataList();
|
||
},
|
||
methods: {
|
||
// 返回上一页
|
||
goBack() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
},
|
||
|
||
setColor(index) {
|
||
if (this.currentIndex == index) {
|
||
return {
|
||
color: '#FFFFFF',
|
||
}
|
||
} else {
|
||
return {
|
||
color: '#686868',
|
||
}
|
||
}
|
||
},
|
||
|
||
clickTab(index) {
|
||
this.currentIndex = index;
|
||
this.loadDataList();
|
||
},
|
||
|
||
// 加载收益统计
|
||
async loadEarningsSummary() {
|
||
try {
|
||
const data = await getEarningsSummary();
|
||
if (data) {
|
||
this.pendingAmount = data.pendingAmount || 0.00;
|
||
this.extractedAmount = data.extractedAmount || 0.00;
|
||
this.maxWithdrawAmount = data.pendingAmount || 0.00;
|
||
}
|
||
} catch (error) {
|
||
console.error('加载收益统计失败:', error);
|
||
}
|
||
},
|
||
|
||
// 加载规则内容
|
||
async loadRuleContent() {
|
||
try {
|
||
this.ruleContent = await getEarningsRule();
|
||
} catch (error) {
|
||
console.error('加载规则内容失败:', error);
|
||
this.ruleContent = '加载失败，请稍后重试';
|
||
}
|
||
},
|
||
|
||
// 加载列表数据
|
||
async loadDataList() {
|
||
try {
|
||
if (this.currentIndex === 0) {
|
||
// 收益记录
|
||
this.dataList = await getEarningsRecordList(1, 20);
|
||
} else {
|
||
// 提现记录
|
||
this.dataList = await getWithdrawRecordList(1, 20);
|
||
}
|
||
} catch (error) {
|
||
console.error('加载列表数据失败:', error);
|
||
this.dataList = [];
|
||
}
|
||
},
|
||
|
||
// 打开规则弹窗
|
||
async openRulePopup() {
|
||
this.show = true;
|
||
if (!this.ruleContent) {
|
||
await this.loadRuleContent();
|
||
}
|
||
},
|
||
|
||
// 打开提现弹窗
|
||
async openWithdrawPopup() {
|
||
this.reflectShow = true;
|
||
// 刷新最高可提现金额
|
||
await this.loadEarningsSummary();
|
||
},
|
||
|
||
// 全部提现
|
||
allWithdraw() {
|
||
this.value = this.maxWithdrawAmount.toFixed(2);
|
||
},
|
||
|
||
// 申请提现
|
||
async submitWithdraw() {
|
||
const amount = parseFloat(this.value);
|
||
if (!amount || amount <= 0) {
|
||
uni.showToast({
|
||
title: '请输入正确的提现金额',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (amount > this.maxWithdrawAmount) {
|
||
uni.showToast({
|
||
title: '提现金额不能超过待提取收益',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const result = await applyWithdraw(amount);
|
||
if (result.success) {
|
||
uni.showToast({
|
||
title: result.msg || '提现申请已提交',
|
||
icon: 'success'
|
||
});
|
||
this.reflectShow = false;
|
||
this.value = '';
|
||
// 刷新数据
|
||
await this.loadEarningsSummary();
|
||
if (this.currentIndex === 1) {
|
||
await this.loadDataList();
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: result.msg || '提现申请失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error('提现申请失败:', error);
|
||
uni.showToast({
|
||
title: '提现申请失败，请稍后重试',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
|
||
open() {
|
||
|
||
},
|
||
close() {
|
||
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
width: 100%;
|
||
height: 100vh;
|
||
background: #F7F7F7;
|
||
}
|
||
</style> |