Onlife/pages/mymoney/mymoney.vue
2025-04-19 15:38:48 +08:00

755 lines
19 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="container">
<view style="
height: 40px;
color: #fff;
text-align: right;
display: flex;
">
<view style="display: flex;align-items: center;height: 40px;flex: 1;">
<view style="height: 40px;line-height: 40px;margin-right: 5px;">
<image style="height: 25px;border-radius: 50%;margin-top: 6px;" src="/static/logo.png"
mode="heightFix">
</image>
</view>
<view style="display: flex;flex-direction: column;height: 40px;align-items: center;">
<view style="height: 18px;font-size: 13px;margin-top: 2px;">元算力</view>
<view style="font-size: 8px;height: 18px;">--Onlife--</view>
</view>
</view>
<view class="top-rig">
<view style="color: black;font-weight: bold;font-size: 15px;">
{{userMoneyAdressOptions(userMoneyAdress)}}
</view>
<view class="">
<u-icon @tap="showMoney" size="20" style="margin-left: 10rpx;"
:name="isShowMoney ? 'eye-fill' : 'eye-off'"></u-icon>
</view>
</view>
</view>
<view class="card" style="margin-top: 20px;">
<view class="info-row">
<text class="info-label">我的認購USDT:</text>
<text v-if="isShowMoney" class="info-value">{{ computingPower.my_miner_fee || 0 }}</text>
<text v-else class="info-value">****</text>
</view>
</view>
<view class="card">
<view class="card-header">
<text>我的算力 (G)</text>
<!-- <button @tap="getMinerlist" class="small-button">查看訂單</button> -->
<view class="todel" @click="getMinerlist">
查看訂單<u-icon name="arrow-right" color="#A0A0FF" size="16" style="margin-left: 10rpx;"></u-icon>
</view>
</view>
<view class="info-row">
<text class="info-label">認購的算力G:</text>
<text v-if="isShowMoney" class="info-value">{{ computingPower.my_miner || 0 }}</text>
<text v-else class="info-value">****</text>
</view>
<view class="info-row">
<text class="info-label">服務中的算力G:</text>
<text v-if="isShowMoney" class="info-value">{{ computingPower.valid_miner || 0 }}</text>
<text v-else class="info-value">****</text>
</view>
<!-- 剩餘 -->
<view class="info-row">
<text class="info-label">算力總花費USDT:</text>
<text v-if="isShowMoney" class="info-value"> {{ computingPower.my_miner_fee }}</text>
<text v-else class="info-value">****</text>
</view>
</view>
<view class="card">
<view class="card-header">
<text>資產收益</text>
<!-- <button class="small-button" @tap="socreGet('資產收益領取')">立即領取</button> -->
<view class="todel" @click="socreGet('資產收益領取')">
立即領取<u-icon name="arrow-right" color="#A0A0FF" size="16" style="margin-left: 10rpx;"></u-icon>
</view>
</view>
<view class="info-row">
<text class="info-label">我的總收益USDT:</text>
<text v-if="isShowMoney" class="info-value">{{ zichanshouyi.all }}</text>
<text v-else class="info-value">****</text>
</view>
<view class="info-row">
<text class="info-label">待領取收益USDT:</text>
<text v-if="isShowMoney" class="info-value">{{ zichanshouyi.await }}</text>
<text v-else class="info-value">****</text>
</view>
<view class="info-row">
<text class="info-label">已領取收益USDT:</text>
<text v-if="isShowMoney" class="info-value">{{ zichanshouyi.collected }}</text>
<text v-else class="info-value">****</text>
</view>
</view>
<view class="card">
<view class="card-header">
<text>市場佣金</text>
<!-- <button class="small-button" @tap="socreGet('佣金收益領取')">立即領取</button> -->
<view class="todel" @click="socreGet('佣金收益領取')">
立即領取<u-icon name="arrow-right" color="#A0A0FF" size="16" style="margin-left: 10rpx;"></u-icon>
</view>
</view>
<view class="info-row">
<text class="info-label">我的總收益USDT:</text>
<text v-if="isShowMoney" class="info-value">{{ shicyongj.all }}</text>
<text v-else class="info-value">****</text>
</view>
<view class="info-row">
<text class="info-label">待領取收益USDT:</text>
<text v-if="isShowMoney" class="info-value">{{ shicyongj.await }}</text>
<text v-else class="info-value">****</text>
</view>
<view class="info-row">
<text class="info-label">已領取收益USDT:</text>
<text v-if="isShowMoney" class="info-value">{{ shicyongj.collected }}</text>
<text v-else class="info-value">****</text>
</view>
</view>
<view class="card">
<view class="card-header">
<text>領取記錄</text>
</view>
<view class="withdrawal-container">
<view class="table-header">
<view class="th">提現金額</view>
<view class="th">狀態</view>
<view class="th">操作</view>
</view>
<scroll-view class="table-body" scroll-y @scrolltolower="loadMore" :style="{height: 250 + 'px'}">
<view class="no-data" v-if="list.length === 0">暫無數據</view>
<view class="tr" v-for="(item, index) in list" :key="index">
<view v-if="isShowMoney" class="td">{{ item.amount }}</view>
<view v-else class="td">****</view>
<view v-if="isShowMoney" class="td">
<text v-if="item.status == 0" style="color: orange;">審核中</text>
<text v-if="item.status == 1" style="color: green;">已完成</text>
<text v-if="item.status == -1" style="color: red;">已拒絕</text>
</view>
<view v-else class="td">****</view>
<view v-if="isShowMoney" class="td">
<button class="btn-detail" @click="viewDetail(item)">詳細</button>
</view>
<view v-else class="td">****</view>
</view>
<view class="loading" v-if="loading">加載中...</view>
<view class="no-more" v-if="noMore">沒有更多數據了</view>
</scroll-view>
</view>
</view>
<!-- 查看訂單 -->
<view class="modal" v-if="showModal">
<view class="modal-content">
<view class="modal-header">
<text class="modal-title">訂單詳細</text>
<text class="modal-close" @click="showModal = false">×</text>
</view>
<view class="modal-body" v-for="item in suanliList" :key="item.id">
<view class="modal-item" style="display: flex;border-bottom: 1px solid darkgrey;">
<text class="modal-label">訂單號</text>
<text class="modal-value">{{item.order_no}}</text>
</view>
<view class="modal-item">
<text class="modal-label">訂單算力G</text>
<text class="modal-value">{{item.value}}</text>
</view>
<view class="modal-item">
<text class="modal-label">收益天數</text>
<view class="modal-value">{{item.reward_day}}</view>
</view>
<view class="modal-item">
<text class="modal-label">服務期限</text>
<view class="modal-value">{{item.timeline}}</view>
</view>
<view class="modal-item">
<text class="modal-label">累計收益</text>
<text class="modal-value">{{item.reward_all}}</text>
</view>
</view>
</view>
</view>
<!-- 顯示資產信息 -->
<view class="modal" v-if="moneyModal">
<view class="modal-content" style="height: 32vh;">
<view class="modal-header">
<view class="zz_content">請輸入支付密碼</view>
</view>
<view class="modal-body" style="border:none;">
<view class="modal-item">
<text class="modal-label">支付密碼:</text>
<u--input color="#fff" style="width: 70%;" :value="zhifuMima" :password="showPassword"
border="none" @input="handleInput"></u--input>
<img :src="!showPassword ? showpwdImg : hidepwdImg" @tap="changePassword()"
style="width: 50rpx;height: 50rpx;"></img>
</view>
</view>
<view class="modal-footer">
<button class="modal-button cancel" @tap="moneyModal = false">取消</button>
<button class="modal-button confirm" @tap="modalBtn">確定</button>
</view>
</view>
</view>
<view class="modal" v-if="detailDialog">
<view class="modal-content" style="height: 50vh;">
<view class="modal-header">
<text class="modal-title">領取詳細</text>
<text class="modal-close" @click="detailDialog = false">×</text>
</view>
<view class="modal-body">
<view class="modal-item" style="display: flex;border-bottom: 1px solid darkgrey;">
<text class="modal-label">申請金額</text>
<text class="modal-value">{{detailrowinfos.amount}}</text>
</view>
<view class="modal-item">
<text class="modal-label">到賬金額</text>
<text class="modal-value">{{detailrowinfos.paid_fee}}</text>
</view>
<view class="modal-item">
<text class="modal-label">手續費</text>
<view class="modal-value">{{detailrowinfos.charge_fee}}</view>
</view>
<view class="modal-item">
<text class="modal-label">手續費率</text>
<view class="modal-value">{{detailrowinfos.charge_rate}}</view>
</view>
<view class="modal-item">
<text class="modal-label">交易hash</text>
<text class="modal-value">{{detailrowinfos.tx}}</text>
</view>
<view class="modal-item">
<text class="modal-label">申請時間</text>
<view class="modal-value">{{formatDate(detailrowinfos.createtime * 1000)}}</view>
</view>
<view class="modal-item">
<text class="modal-label">到賬時間</text>
<text class="modal-value"
v-if="detailrowinfos.updatetime">{{formatDate(detailrowinfos.updatetime * 1000)}}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import {
_miners,
_cashoutscore,
_taxinfo,
_minerordlist,
_rewardstatic,
_userInfos,
_walletinfo,
_getwithdrawlogs
} from "@/request/api.js"
import MD5 from "blueimp-md5";
export default {
data() {
return {
emailCode:"",
googleCode:"",
emaiTip:"發送",
googleTip:"發送",
detailrowinfos: {},
detailDialog: false,
list: [],
page: 1,
pageSize: 10,
loading: false,
noMore: false,
scrollHeight: 500,
showpwdImg: "static/icon/eye_on.png",
hidepwdImg: "static/icon/eye_off.png",
showPassword: true,
zhifuMima: "",
moneyModal: false,
userMoneyAdress: "",
showModal: false,
computingPower: {}, //我的算力
taxinfoNum: {}, //領取相關
suanliList: [], //算力訂單詳細
zichanshouyi: {}, //資產收益
shicyongj: {}, //市場佣金
userInfos: {},
isShowMoney: false,
}
},
onShow() {
// 計算滾動區域高度
const sysInfo = uni.getSystemInfoSync();
this.scrollHeight = sysInfo.windowHeight - 100; // 減去表頭和其他元素高度
this.list = [];
this.page = 1;
this.pageSize = 10;
this.getUserInfos();
},
methods: {
async tosendemail(){
if (this.emaiTip == "發送") {
let num = 60;
let emaiTimer = setInterval(() => {
this.emaiTip = num + 's';
num--;
if (num < 0) {
this.emaiTip = "發送";
clearInterval(emaiTimer)
}
}, 1000)
let res = await _emailSend({
email: this.userInfos.email,
event: "check"
});
if (res.code === 1) {
uni.showToast({
title: '發送成功',
icon: 'none'
});
}else{
uni.showToast({
title: res.msg,
icon: 'none'
});
}
} else {
return
}
},
googleemail() {
let num = 60;
let googleTimer = setInterval(() => {
this.googleTip = num + 's';
num--;
if (num < 0) {
this.googleTip = "發送";
clearInterval(googleTimer)
}
}, 1000)
},
viewDetail(item) {
this.detailrowinfos = {};
this.detailDialog = true;
this.detailrowinfos = {
...item
};
},
formatDate(timestamp) {
const date = new Date(timestamp);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hour = String(date.getHours()).padStart(2, '0');
const minute = String(date.getMinutes()).padStart(2, '0');
const miao = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hour}:${minute}:${miao}`;
},
loadMore(){
this.page++;
this.getrawLogs();
},
handleData(newData) {
if (newData.length < this.pageSize) {
this.noMore = true;
}
this.list = [...this.list, ...newData];
this.page++;
this.loading = false;
},
async getrawLogs() {
let res = await _getwithdrawlogs({page:this.page,listrow:this.pageSize});
if (res.code === 1) {
const newData = res.data.data;
this.handleData(newData);
}
console.log(res, '領取記錄')
},
async modalBtn() {
let _that = this;
if (!_that.zhifuMima) return uni.showToast({
title: '請輸入您的支付密碼',
icon: 'none'
})
const params = {
paykey: MD5(_that.zhifuMima + (Math.floor(Date.now() / 1000))),
timestamp: Math.floor(Date.now() / 1000),
event: "seepanel"
}
let res = await _walletinfo(params);
if (res.code === 1) {
_that.isShowMoney = true;
_that.moneyModal = false;
_that.zhifuMima = "";
} else {
uni.showToast({
title: res.msg,
icon: 'none',
})
}
},
changePassword() {
this.showPassword = !this.showPassword;
},
handleInput(event) {
this.zhifuMima = event;
},
showMoney() {
if (this.isShowMoney) {
this.isShowMoney = false;
} else {
this.moneyModal = true;
}
},
async getUserInfos() {
let res = await _userInfos();
if (res.code === 1) {
this.userInfos = res.data.userinfo;
this.userMoneyAdress = this.userInfos.wallet.address;
this.getMiners();
this.getrawLogs();
this.getTaxinfo();
this.getRewardstatic();
}
},
userMoneyAdressOptions(data) {
let start = data.substring(0, 6);
let end = data.substring(data.length - 4);
let middle = "……";
let finalString = start + middle + end;
return finalString
},
//算力訂單
async getMinerlist() {
let res = await _minerordlist();
if (res.code === 1) {
this.suanliList = res.data;
if (this.suanliList.length > 0) {
this.showModal = true;
} else {
uni.showToast({
title: "暫無訂單",
icon: "none"
})
}
}
},
//算力列表
async getMiners() {
let res = await _miners();
if (res.code === 1) {
this.computingPower = res.data;
this.getTaxinfo();
this.getRewardstatic();
}
},
async getRewardstatic() {
let res = await _rewardstatic();
if (res.code === 1) {
this.zichanshouyi = res.data.prop; //資產收益
this.shicyongj = res.data.commission; //市場佣金
}
},
//領取收益相關
async getTaxinfo() {
let res = await _taxinfo();
if (res.code === 1) {
this.taxinfoNum = res.data;
}
},
//領取收益
async socreGet(type) {
let score = null;
let a = Number(this.zichanshouyi.await);
let b = Number(this.shicyongj.await);
let c = Number(this.taxinfoNum.cashoutmin);
type == "資產收益領取" ? score = a : score = b;
if (score < c) {
uni.showToast({
title: `待領取收益大於等於${this.taxinfoNum.cashoutmin}可領取`,
icon: "none",
duration: 1000
})
return
}
const params = {
score,
type
};
let res = await _cashoutscore(params);
if (res.code === 1) {
uni.showToast({
title: `領取成功!`,
icon: "none",
duration: 1000
})
this.getRewardstatic();
} else {
uni.showToast({
title: `領取失敗!`,
icon: "none",
duration: 1000
})
}
}
}
}
</script>
<style lang="scss">
.container {
border-top: 1px solid dimgrey;
width: 100vw;
min-height: 100vh;
padding: 20px;
box-sizing: border-box;
background: linear-gradient(to bottom, #000033, #51599b);
}
.card {
background: linear-gradient(to bottom, #393C84, #9193C6);
border-radius: 30rpx;
padding: 30rpx;
box-sizing: border-box;
margin-bottom: 40rpx;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
color: white;
border-bottom: 1.5px solid #A8AAE0;
height: 40px;
line-height: 40px;
}
.small-button {
background-color: #4caf50;
height: 25px;
line-height: 25px;
color: white;
border-radius: 15px;
font-size: 12px;
margin-right: 2%;
}
.info-row {
display: flex;
justify-content: space-between;
margin-bottom: 13px;
}
.info-label {
color: #e0e0e0;
width: 55%;
}
.info-value {
color: white;
font-weight: bold;
border: 1px solid #A8AADD;
flex: 1;
border-radius: 10px;
height: 60rpx;
display: flex;
justify-content: center;
align-items: center;
}
// 彈窗
.modal {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
align-items: flex-end;
z-index: 999;
}
.modal-content {
background-color: #b6b5c8;
border-radius: 20px 20px 0 0;
padding: 20px;
box-sizing: border-box;
width: 100%;
animation: slideUp 0.3s ease-out;
box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
height: 37vh;
overflow: auto;
}
@keyframes slideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.modal-title {
font-size: 20px;
font-weight: bold;
color: #333;
}
.modal-close {
font-size: 24px;
color: #999;
cursor: pointer;
}
.modal-body {
margin-bottom: 20px;
}
.modal-item {
display: flex;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #f0f0f0;
}
.modal-label {
color: #666;
font-size: 14px;
margin-right: 20rpx;
}
.modal-value {
flex: 1;
font-weight: bold;
color: #333;
font-size: 14px;
word-break: break-all;
text-align: right;
overflow: hidden;
/* 超出部分隱藏 */
text-overflow: ellipsis;
/* 超出部分顯示省略號 */
white-space: nowrap;
/* 不換行 */
}
.modal-footer {
display: flex;
justify-content: space-between;
}
.modal-button {
width: 48%;
height: 44px;
border-radius: 22px;
font-size: 16px;
font-weight: bold;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.modal-button.cancel {
background-color: #f0f0f0;
color: #333;
}
.modal-button.cancel:hover {
background-color: #e0e0e0;
}
.modal-button.confirm {
background-color: #4CAF50;
color: white;
}
.modal-button.confirm:hover {
background-color: #45a049;
}
.todel {
display: flex;
font-size: 24rpx;
color: #A0A0FF;
}
.top-rig {
padding: 10rpx 20rpx;
display: flex;
background-color: #DADBF1;
justify-content: center;
align-items: center;
border-radius: 30rpx;
box-sizing: border-box;
}
.withdrawal-container {
width: 100%;
}
.table-header {
display: flex;
font-weight: bold;
border-bottom: 1rpx solid #f0f0f0;
}
.th {
flex: 1;
padding: 20rpx 0rpx;
text-align: center;
font-size: 28rpx;
color: #fff;
}
.table-body {
width: 100%;
}
.tr {
display: flex;
border-bottom: 1rpx solid #f0f0f0;
}
.td {
flex: 1;
padding: 20rpx 10rpx;
text-align: center;
font-size: 26rpx;
color: #fff;
}
.btn-detail {
font-size: 24rpx;
padding: 4rpx 16rpx;
background-color: #45a049;
color: white;
border-radius: 6rpx;
border: none;
line-height: 1.5;
}
.loading,
.no-more,
.no-data {
text-align: center;
padding: 20rpx;
color: #999;
font-size: 26rpx;
}
.no-data {
padding: 100rpx 0;
}
</style>