收益

src/pages/income/income.vue

@@ -1,16 +1,351 @@
 <script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+import { ref } from 'vue'
+import { LOGIN_PAGE } from '@/router/config'
+import { useUserStore } from '@/store'
+import { useTokenStore } from '@/store/token'
+
 definePage({
   style: {
     navigationBarTitleText: '收益',
-
+    navigationStyle: 'custom',
   },
 })
+
+const userStore = useUserStore()
+const tokenStore = useTokenStore()
+// 使用storeToRefs解构userInfo
+const { userInfo } = storeToRefs(userStore)
+
+// 微信小程序下登录
+async function handleLogin() {
+  // #ifdef MP-WEIXIN
+  // 微信登录
+  await tokenStore.wxLogin()
+
+  // #endif
+  // #ifndef MP-WEIXIN
+  uni.navigateTo({
+    url: `${LOGIN_PAGE}`,
+  })
+  // #endif
+}
+
+function handleLogout() {
+  uni.showModal({
+    title: '提示',
+    content: '确定要退出登录吗？',
+    success: (res) => {
+      if (res.confirm) {
+        // 清空用户信息
+        useTokenStore().logout()
+        // 执行退出登录逻辑
+        uni.showToast({
+          title: '退出登录成功',
+          icon: 'success',
+        })
+        // #ifdef MP-WEIXIN
+        // 微信小程序，去首页
+        // uni.reLaunch({ url: '/pages/index/index' })
+        // #endif
+        // #ifndef MP-WEIXIN
+        // 非微信小程序，去登录页
+        // uni.navigateTo({ url: LOGIN_PAGE })
+        // #endif
+      }
+    },
+  })
+}
+
+// 顶部导航栏高度,设置banner位置
+const navigationBarHeight = ref(0)
+// #ifdef MP-WEIXIN
+function getNavigationBarHeight() {
+  uni.getSystemInfo({
+    success: (res) => {
+      const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+      console.log('顶部导航栏高度:', res.statusBarHeight, menuButtonInfo)
+      // 顶部导航栏高度 = 状态栏高度 + 胶囊的高度
+      navigationBarHeight.value = res.statusBarHeight + menuButtonInfo.height + 12
+    },
+  })
+}
+getNavigationBarHeight()
+// #endif
+
+function menuClick(page: string) {
+  uni.navigateTo({
+    url: `/pages-A/${page}/index`,
+  })
+}
 </script>
 
 <template>
-  <view class="pt-safe" />
+  <view class="profile-container">
+    <!-- 顶部区域 -->
+    <view class="income-header" style="background: url('../../static/images/me/me-bg.png') no-repeat center center; background-size: cover;">
+      <view class="income-header-avatar-info" :style="{ paddingTop: `${navigationBarHeight}px` }">
+        <view class="income-header-balance">
+          当前账户余额（元）
+        </view>
+        <view class="income-header-balance-num">
+          <view class="income-header-balance-num-amount">
+            7297491.08
+          </view>
+          <view class="income-header-balance-num-btns">
+            <view class="income-header-balance-num-btn js">
+              解锁
+            </view>
+            <view class="income-header-balance-num-btn tx">
+              提现
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="income-header-tips">
+        <view class="income-header-tips-item">
+          <view class="income-header-tips-item-num">
+            729000.00
+          </view>
+          <view class="income-header-tips-item-des">
+            可提现金额
+          </view>
+        </view>
+        <view class="income-header-tips-item">
+          <view class="income-header-tips-item-num">
+            1,125
+          </view>
+          <view class="income-header-tips-item-des">
+            未结算金额
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 公告 -->
+    <view class="income-header-notice">
+      <view class="income-header-notice-icon">
+        <image src="@/static/images/income/notice.png" mode="" />
+      </view>
+      <view class="income-header-notice-content">
+        在考核周期内未达标已锁定收益，<text>前往查看~</text>
+      </view>
+    </view>
+    <!-- 菜单 -->
+    <view class="income-header-menu">
+      <!-- 结算筛选 -->
+      <view class="income-header-menu-filter">
+        <view class="income-header-menu-filter-item active">
+          待结算
+        </view>
+        <view class="income-header-menu-filter-item">
+          已结算
+        </view>
+      </view>
+      <view class="income-header-menu-item" @click="menuClick('applyForm')">
+        <view class="income-header-menu-icon">
+          <image src="@/static/images/me/coupon-need.png" mode="" />
+          <view class="income-header-menu-text">
+            发券人申请
+          </view>
+        </view>
+        <view class="income-header-menu-left">
+          <u-icon name="arrow-right" color="#979797" size="12" />
+        </view>
+      </view>
+      <view class="income-header-menu-item" @click="handleLogout">
+        <view class="income-header-menu-icon">
+          <image src="@/static/images/me/loginOut.png" mode="" />
+          <view class="income-header-menu-text">
+            退出登录
+          </view>
+        </view>
+        <view class="income-header-menu-left">
+          <u-icon name="arrow-right" color="#979797" size="12" />
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <style lang="scss" scoped>
-//
+.profile-container {
+  font-family: Alibaba PuHuiTi;
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  .income-header {
+    height: 575rpx;
+    .income-header-avatar-info {
+      display: flex;
+      flex-direction: column;
+      gap: 39rpx;
+      padding: 0 24rpx;
+      .income-header-balance {
+        font-weight: 400;
+        font-size: 26rpx;
+        color: #ffffff;
+      }
+      .income-header-balance-num {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .income-header-balance-num-amount {
+          font-weight: 500;
+          font-size: 65rpx;
+          color: #ffffff;
+        }
+        .income-header-balance-num-btns {
+          display: flex;
+          gap: 15rpx;
+          .income-header-balance-num-btn {
+            padding: 20rpx 40rpx;
+            border-radius: 33rpx;
+            font-weight: 400;
+            font-size: 26rpx;
+            &.js {
+              background: #ed6b66;
+              color: #ffffff;
+            }
+            &.tx {
+              background: #bfbfbf;
+              color: #747474;
+            }
+          }
+        }
+      }
+    }
+    .income-header-tips {
+      height: 124rpx;
+      display: flex;
+      margin-top: 49rpx;
+      background: linear-gradient(114deg, #f67873, #fb847f, #f67873);
+      border-radius: 10rpx;
+      margin: 49rpx 24rpx 0 24rpx;
+      .income-header-tips-item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 15rpx;
+        font-weight: 500;
+        font-size: 34rpx;
+        color: #ffffff;
+        line-height: 1;
+        position: relative;
+        &:first-child:after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          right: 0;
+          transform: translateY(-50%);
+          width: 2px;
+          height: 40rpx;
+          background: #ffffff;
+        }
+        .income-header-tips-item-num {
+          font-weight: bold;
+        }
+        .income-header-tips-item-des {
+          font-weight: 400;
+          font-size: 24rpx;
+          color: #ffffff;
+        }
+      }
+    }
+  }
+
+  .income-header-notice {
+    margin: -50rpx 24rpx 24rpx 24rpx;
+    background: #ffffff;
+    border-radius: 10rpx;
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+    padding: 28rpx 20rpx;
+    .income-header-notice-icon {
+      width: 52rpx;
+      height: 35rpx;
+      image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .income-header-notice-content {
+      font-weight: 400;
+      font-size: 24rpx;
+      color: #333333;
+      text {
+        color: #c52d27;
+      }
+    }
+  }
+
+  .income-header-menu {
+    background: #ffffff;
+    border-radius: 10rpx 10rpx 0rpx 0rpx;
+    margin: 24rpx 24rpx 0;
+    .income-header-menu-filter {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-weight: 500;
+      font-size: 32rpx;
+      color: #333333;
+      height: 90rpx;
+      background: #ffffff;
+      box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(213, 213, 213, 0.29);
+      border-radius: 10rpx 10rpx 0rpx 0rpx;
+      .income-header-menu-filter-item {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        height: 100%;
+        &.active {
+          color: #ed6b66;
+          &:after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 67rpx;
+            height: 6rpx;
+            background: #ed6b66;
+            border-radius: 3rpx;
+          }
+        }
+      }
+    }
+    .income-header-menu-item {
+      height: 88rpx;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid #eeeeee;
+      padding: 0 20rpx;
+      &:last-child {
+        border-bottom: none;
+      }
+      .income-header-menu-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 13rpx;
+        image {
+          width: 40rpx;
+          height: 40rpx;
+        }
+        .income-header-menu-text {
+          font-weight: 400;
+          font-size: 26rpx;
+          color: #333333;
+        }
+      }
+      .income-header-menu-left {
+      }
+    }
+  }
+}
 </style>