|
@@ -1,22 +1,294 @@
|
|
|
-<template>
|
|
|
- <view>
|
|
|
-
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style>
|
|
|
-
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <view class="purse">
|
|
|
+ <view class="wallet-page">
|
|
|
+ <view class="wallet-header">
|
|
|
+ <view class="left">
|
|
|
+ <text class="username">{{ userName }}的钱包</text>
|
|
|
+ <text>
|
|
|
+ <text>我的资产(</text>
|
|
|
+ <text v-if="isAssetVisible" class="asset">{{ asset }}</text>
|
|
|
+ <text v-else class="asset">**</text>
|
|
|
+ <text>元)</text>
|
|
|
+ <text @click="toggleAssetVisibility" class="eye-icon">👁️</text>
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <image src="@/static/QR57a.jpg" class="security-icon"></image>
|
|
|
+ <text>安全保障中</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="wallet-summary">
|
|
|
+ <view class="summary-item">
|
|
|
+ <view>总收益</view>
|
|
|
+ <view>{{ totalIncome }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="summary-item">
|
|
|
+ <view>今日收益</view>
|
|
|
+ <view>{{ todayIncome }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="summary-item">
|
|
|
+ <view>昨日收益</view>
|
|
|
+ <view>{{ yesterdayIncome }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="summary-item">
|
|
|
+ <view>可提现</view>
|
|
|
+ <view>{{ withdrawable }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="withdraw-button">
|
|
|
+ <u-button type="primary" text="立即提现"></u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 账单 -->
|
|
|
+ <view class="bill" @click="toDetail">
|
|
|
+ <view>
|
|
|
+ <text class="bill-t">账单</text>
|
|
|
+ <text class="bill-center">到账10000000元</text>
|
|
|
+ </view>
|
|
|
+ <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
|
|
|
+ </view>
|
|
|
+ <!-- 订单管理 -->
|
|
|
+ <view class="container">
|
|
|
+ <view class="title">
|
|
|
+ <view class="title-line"></view>
|
|
|
+ <text class="title-text">订单管理</text>
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="column">
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">已确认订单数(笔)</view>
|
|
|
+ <view class="value">100</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">待确认订单数(笔)</view>
|
|
|
+ <view class="value">80</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="separator"></view>
|
|
|
+ <view class="column">
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">已确认收益(元)</view>
|
|
|
+ <view class="value">20</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">待确认收益(元)</view>
|
|
|
+ <view class="value">5</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 我的团队 -->
|
|
|
+ <view class="container">
|
|
|
+ <view class="title">
|
|
|
+ <view class="title-line"></view>
|
|
|
+ <text class="title-text">我的团队</text>
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="column">
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">已推广订单数(笔)</view>
|
|
|
+ <view class="value">100</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">待确认订单数(笔)</view>
|
|
|
+ <view class="value">80</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="separator"></view>
|
|
|
+ <view class="column">
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">已确认收益(元)</view>
|
|
|
+ <view class="value">20</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">待确认收益(元)</view>
|
|
|
+ <view class="value">5</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ userName: 'User123',
|
|
|
+ isAssetVisible: true,
|
|
|
+ asset: '1000',
|
|
|
+ totalIncome: '5000',
|
|
|
+ todayIncome: '100',
|
|
|
+ yesterdayIncome: '200',
|
|
|
+ withdrawable: '3000'
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ toggleAssetVisibility() {
|
|
|
+ this.isAssetVisible = !this.isAssetVisible;
|
|
|
+ },
|
|
|
+ toDetail(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'/pageMerchant/mineModule/myPurse/detail'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .purse {
|
|
|
+ margin-top: 10px;
|
|
|
+ padding: 10rpx 20rpx 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wallet-page {
|
|
|
+ font-size: 34rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ box-shadow: 0 8rpx 15rpx 0 rgba(0, 0, 0, 0.08);
|
|
|
+
|
|
|
+ .wallet-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+
|
|
|
+
|
|
|
+ .username {
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .asset {
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .eye-icon {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .security-icon {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .wallet-summary {
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ margin-top: 20px;
|
|
|
+ padding: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .summary-item {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ &:not(:last-child) {
|
|
|
+ border-right: 1px solid #ccc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .withdraw-button {
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ text {
|
|
|
+ background-color: #007aff;
|
|
|
+ color: #fff;
|
|
|
+ padding: 10px 20px;
|
|
|
+ border-radius: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bill {
|
|
|
+ font-size: 40rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ box-shadow: 0 8rpx 15rpx 0 rgba(0, 0, 0, 0.08);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .bill-t {
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bill-center {
|
|
|
+ color: #A9A9A9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .container {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ box-shadow: 0 8rpx 15rpx 0 rgba(0, 0, 0, 0.08);
|
|
|
+
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+
|
|
|
+ .title-line {
|
|
|
+ width: 5px;
|
|
|
+ height: 20px;
|
|
|
+ background-color: blue;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-text {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .column {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ &:not(:last-child) {
|
|
|
+ border-right: 1px solid #ccc;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row {
|
|
|
+ .label {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #A9A9A9;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ font-size: 34rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|