xiaokuaisong-paotui/distribution/pages/purse/purse.vue

<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 &gt;</text>
          <text class="transaction-label">可提现：0.00 &gt;</text>
        </view>
        <view class="transaction-item">
          <text class="transaction-label">已冻结：0.00 &gt;</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>