wushenglu/bee-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改问题 代码优化

Browse Source
This commit is contained in:
贺洪顺
2025-06-13 16:57:29 +08:00
parent 528f73aebd
commit 8d0d3370af
40 changed files with 1319 additions and 1974 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
pages/withdraw/withdraw.vue
View File

@@ -1,140 +1,80 @@
<template>
<view>
<TransNavVue title="我的钱包"/>
<view class="container">
<!-- 修改顶部黑色区域显示现金余额 -->
<view class="top-card black-bg">
<text class="amount">{{ walletData.balance || 0 }}</text>
<TransNavVue title="我的钱包" />
<view class="container">
<view class="top-card black-bg">
<text class="amount">{{ commissionData.currentEarnings || 0 }}</text>
<view class="card-content">
<text class="label">账号余额</text>
<view class="right-content" @click="showCashWithdraw">
<image src="/static/images/myPage/crownIcon.png" class="arrow-icon"></image>
<text class="withdraw-text">余额提现</text>
<image src="/static/images/rightBtn.png" class="arrow-icon"></image>
<image src="/static/images/myPage/crownIcon.png" class="arrow-icon"></image>
<text class="withdraw-text">余额提现</text>
<image src="/static/images/rightBtn.png" class="arrow-icon"></image>
</view>
</view>
</view>
<view class="bottom-card orange-bg">
<view class="card-content">
<view class="left-content">
<text class="amount">{{ commissionData.coin || 0 }}</text>
<view class="label">M币使用
<image style="width:24rpx;height:24rpx;display:inline-block" src="/static/images/rightBtn.png"></image>
</view>
</view>
<image style="width: 150rpx; height:150rpx" src="/static/images/myPage/Mbg.png" class="honey-icon"></image>
</view>
</view>
</view>
<!-- 修改下方橙色区域显示M币余额 -->
<view class="bottom-card orange-bg">
<view class="card-content">
<view class="left-content">
<text class="amount">{{ walletData.coin || 0 }}</text>
<view class="label">M币使用
<image style="width:24rpx;height:24rpx;display:inline-block" src="/static/images/rightBtn.png" ></image>
</view>
</view>
<image style="width: 150rpx; height:150rpx" src="/static/images/myPage/Mbg.png" class="honey-icon"></image>
</view>
</view>
<!-- 修改弹窗中的余额显示 -->
<uni-popup ref="popup" type="center">
<view class="popup-content center-popup">
<text class="title">现金提现</text>
<text class="balance">当前有<text class="amount-highlight">{{ walletData.balance || 0 }}</text>可提现</text>
<text class="notice">提现3-5分钟到账</text>
<button class="confirm-btn" @click="handleWithdraw">立即提现</button>
</view>
</uni-popup>
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ref } from 'vue'
import { request } from '@/utils/request'
import { useTokenStorage } from '../../utils/storage'
import TransNavVue from '../../components/TransNav.vue'
const { getAccessToken,getOpenId } = useTokenStorage()
import { onShow } from '@dcloudio/uni-app';
const popup = ref(null)
const walletData = ref({
balance: 0,
coin: 0
const commissionData = ref({})
onShow(() => {
getCommissionDetail()
})
onMounted(() => {
getWalletInfo()
})
const getWalletInfo = async () => {
try {
// 获取提现详情
const getCommissionDetail = async () => {
try {
const res = await request({
url: '/app-api/WeiXinMini/wallet/get/Info',
showLoading: true,
url: '/app-api/weixin/distribution/get/commission/info',
showLoading: true,
})
if (res.code === 0 || res.code === 200) {
walletData.value = res.data || {};
if (res.code === 0) {
commissionData.value = res.data || {};
} else {
throw new Error(res.msg || '数据异常')
}
} catch (err) {
console.error('获取用户信息失败:', err)
}
}
const handleWithdraw = async () => {
try {
if (walletData.value.balance === 0) {
throw new Error('账号余额不足')
} else {
const res = await request({
url: '/app-api/weixin/pay/initiate/payout',
method: 'POST',
data: { transferAmount: walletData.value.balance,
openid: getOpenId(),
transferRemark: '极蜜部落提现',
transferSceneId: '1000',
transferSceneReportInfos: [
{
infoType: '活动名称',
infoContent: '极蜜部落提现'
},
{
infoType: '奖励说明',
infoContent: '提现奖励'
}
]
},
showLoading: true,
})
if (res.code === 0 || res.code === 200) {
uni.showToast({
title: '提现申请已提交',
icon: 'success'
});
await getWalletInfo()
} else {
throw new Error(res.msg || '提现失败')
}
}
} catch (err) {
console.error('提现失败:', err)
uni.showToast({
title: err.message || '提现失败',
icon: 'error'
});
} finally {
popup.value.close()
}
};
// 跳转提现
const showCashWithdraw = () => {
popup.value.open();
uni.navigateTo({
url: '/pages/cashWithdrow/cashWithdrow',
success: (res) => {
res.eventChannel.emit('withdrawAmount', {
amount: commissionData.value.currentEarnings
})
}
})
};
</script>
@@ -150,66 +90,68 @@ const showCashWithdraw = () => {
<style lang="scss" scoped>
.container {
padding: 20rpx;
.top-card, .bottom-card {
.top-card,
.bottom-card {
border-radius: 16rpx;
padding: 50rpx;
margin-bottom: 20rpx;
height: 230rpx;
.amount {
font-size: 48rpx;
font-weight: bold;
color: #fff;
}
font-size: 48rpx;
font-weight: bold;
color: #fff;
}
.card-content {
display: flex;
justify-content: space-between;
align-items: center;
.label {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.8);
margin-top: 10rpx;
}
.label {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.8);
margin-top: 10rpx;
}
.right-content {
display: flex;
align-items: center;
.withdraw-text {
font-size: 28rpx;
color: #fff;
margin-left: 10rpx;
}
.arrow-icon {
width: 24rpx;
height: 24rpx;
margin-left: 10rpx;
}
}
.honey-icon {
width: 60rpx;
height: 60rpx;
}
}
}
.black-bg {
background: linear-gradient(to bottom, #3b3b3b, #060608);
}
.orange-bg {
background: #ff7f27;
}
.withdraw-btn {
background: #fff;
color: #000;
@@ -219,25 +161,25 @@ const showCashWithdraw = () => {
line-height: 60rpx;
font-size: 28rpx;
}
.popup-content {
background: #fff;
padding: 40rpx;
border-radius: 20rpx ;
border-radius: 20rpx;
.title {
font-size: 36rpx;
font-weight: bold;
display: block;
margin-bottom: 30rpx;
}
.balance {
font-size: 32rpx;
display: block;
margin-bottom: 40rpx;
}
.confirm-btn {
background: #ff6f0e;
color: #fff;
@@ -248,6 +190,7 @@ const showCashWithdraw = () => {
}
}
}
.center-popup {
width: 600rpx;
min-height: 400rpx;
@@ -255,29 +198,32 @@ const showCashWithdraw = () => {
border-radius: 30rpx;
padding: 50rpx;
background: linear-gradient(180deg #fff2da, #ffffff 57%);
.title {
font-size: 40rpx;
font-weight: bold;
display: block;
text-align: center;
margin-bottom: 40rpx;
color: #000; /* 标题保持黑色 */
color: #000;
/* 标题保持黑色 */
}
.balance {
font-size: 36rpx;
display: block;
text-align: center;
margin-bottom: 30rpx;
color: #000; /* 整体文字为黑色 */
color: #000;
/* 整体文字为黑色 */
}
.amount-highlight {
color: #ff6f0e; /* 仅金额数字为橙色 */
color: #ff6f0e;
/* 仅金额数字为橙色 */
}
.notice {
font-size: 28rpx;
color: #999;
@@ -285,7 +231,7 @@ const showCashWithdraw = () => {
text-align: center;
margin-bottom: 50rpx;
}
.confirm-btn {
width: 100%;
background: #ff6f0e;