上传代码
This commit is contained in:
227
distribution/pages/purse/purse.vue
Normal file
227
distribution/pages/purse/purse.vue
Normal file
@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<view class="wallet-page">
|
||||
|
||||
<!-- Balance Section -->
|
||||
<view class="balance-section">
|
||||
<text class="balance-label">钱包余额(元)</text>
|
||||
<view class="balance-amount">
|
||||
<text class="amount">￥{{ totalIncome.toFixed(2) }}</text>
|
||||
<button class="view-detail" @click="viewDetail">去提现</button>
|
||||
</view>
|
||||
<view class="transactions-section">
|
||||
<view class="transaction-item">
|
||||
<text class="transaction-label">未到账：0.00 ></text>
|
||||
<text class="transaction-label">可提现：0.00 ></text>
|
||||
</view>
|
||||
<view class="transaction-item">
|
||||
<text class="transaction-label">已冻结：0.00 ></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Menu Section -->
|
||||
<view class="menu-section">
|
||||
<view class="menu-item">
|
||||
<view>
|
||||
<text class="menu-title">慧民贷款</text>
|
||||
<view class="subtitles-container">
|
||||
<text class="menu-subtitle">余额
|
||||
<text style="color: #3292bc;">0.00</text>
|
||||
</text>
|
||||
<text class="menu-subtitle">未到账
|
||||
<text style="color: #3292bc;">0.00</text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<uni-icons type="angle-right" size="24" class="menu-icon"></uni-icons>
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<text class="menu-title">保证金</text>
|
||||
<uni-icons type="angle-right" size="24" class="menu-icon"></uni-icons>
|
||||
</view>
|
||||
<view class="menu-item today-bill">
|
||||
<view>
|
||||
<text class="menu-title">今日账单</text>
|
||||
<view class="subtitles-container">
|
||||
<text class="menu-subtitle">收入
|
||||
<text style="color: #3292bc;">0.00</text>
|
||||
</text>
|
||||
<text class="menu-subtitle">支出
|
||||
<text style="color: #3292bc;">0.00</text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="menu-subtitle view-history">查看历史账单
|
||||
<uni-icons type="right" size="16"></uni-icons>
|
||||
</text>
|
||||
<uni-icons type="angle-right" size="24" class="menu-icon"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- No Bill Message -->
|
||||
<view class="no-bill-message">
|
||||
<text>今天还没有账单哦</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import {
|
||||
apiImageUrl
|
||||
} from '../../API/api';
|
||||
import {
|
||||
ref, onMounted,
|
||||
} from 'vue'
|
||||
// 定义响应式变量接收接口返回值
|
||||
const totalIncome = ref(0)
|
||||
|
||||
// 在页面挂载时获取数据
|
||||
onMounted(() => {
|
||||
getIncome()
|
||||
})
|
||||
|
||||
// 请求方法
|
||||
const getIncome = () =>{
|
||||
uni.request({
|
||||
url: apiImageUrl + '/api/errandIncome/count/money',
|
||||
method: 'POST',
|
||||
header: {
|
||||
'Content-Type': 'application/json',
|
||||
'cookie': uni.getStorageSync("cookie") || '' // 如果需要带上登录态
|
||||
},
|
||||
success: (res) => {
|
||||
console.log('接口返回:', res)
|
||||
if (res.data.code === 0 && res.data.data != null) {
|
||||
totalIncome.value = res.data.data // 例如：返回 1450.5
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.message || '获取数据失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('请求失败:', err)
|
||||
uni.showToast({
|
||||
title: '网络错误，请检查连接',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.wallet-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background-color: #f1f1f1;
|
||||
|
||||
|
||||
.balance-section {
|
||||
padding: 16px;
|
||||
background-color: #5e7dec;
|
||||
color: #fff;
|
||||
|
||||
.balance-label {
|
||||
margin-bottom: 8px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.balance-amount {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.amount {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.view-detail {
|
||||
margin: 0 20px;
|
||||
border-radius: 15px;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
line-height: inherit;
|
||||
padding: 8px 20px; /* 添加内边距 */
|
||||
}
|
||||
}
|
||||
|
||||
.transactions-section {
|
||||
padding: 16px;
|
||||
border-top: 1rpx solid #e0e0e0;
|
||||
|
||||
.transaction-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
|
||||
.transaction-label {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-section {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start; // Align items at the top for multi-line content
|
||||
padding: 16px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
margin-top: 10px;
|
||||
|
||||
.menu-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.menu-subtitle {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.subtitles-container {
|
||||
display: flex;
|
||||
gap: 16px; // Space between the subtitles
|
||||
margin-top: 8px; // Space from the menu title
|
||||
}
|
||||
|
||||
&.today-bill {
|
||||
.subtitles-container {
|
||||
margin-top: 16px; // More space from the menu title
|
||||
}
|
||||
|
||||
.view-history {
|
||||
margin-left: 16px; // Space from the menu icon
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-bill-message {
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
color: #999;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user