解锁

src/components/CustomNavigationBar.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const props = withDefaults(defineProps<Props>(), {
+    title: '页面标题',
+    showBack: true,
+    backgroundColor: '#ffffff',
+    textColor: '#ffffff',
+})
+
+const router = useRouter()
+
+// Props
+interface Props {
+  title?: string
+  showBack?: boolean
+  backgroundColor?: string
+  textColor?: string
+}
+
+// 导航栏高度
+const navBarHeight = ref('44px')
+const navBarTop = ref('44px')
+// const navigationBarEmptyHeight = ref('0px')
+
+// 返回按钮点击事件
+function handleBack() {
+    router.back()
+}
+
+// 计算导航栏高度
+onMounted(() => {
+    // #ifdef MP-WEIXIN
+    uni.getSystemInfo({
+        success: (res) => {
+            const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+            console.log('设备顶部信息：', res)
+            console.log('胶囊信息：', menuButtonInfo)
+            // 顶部导航栏高度 = 状态栏高度 + 胶囊的高度
+            navBarHeight.value = `${menuButtonInfo.height}px`
+            navBarTop.value = `${menuButtonInfo.top}px`
+            // navigationBarEmptyHeight.value = `${menuButtonInfo.top + menuButtonInfo.height}px`
+        }
+    })
+    // #endif
+})
+</script>
+
+<template>
+    <view
+        class="custom-navigation-bar"
+        :style="{
+            height: navBarHeight,
+            top: navBarTop,
+            backgroundColor: props.backgroundColor,
+            color: props.textColor,
+        }"
+    >
+        <!-- 返回按钮 -->
+        <view v-if="props.showBack" class="nav-back-btn" @click="handleBack">
+            <u-icon name="arrow-left" :color="props.textColor" size="18" class="back-icon" />
+        </view>
+
+        <!-- 标题 -->
+        <view class="nav-title">
+            {{ props.title }}
+        </view>
+
+        <!-- 占位元素，保持标题居中 -->
+        <view v-if="props.showBack" class="nav-placeholder" />
+    </view>
+    <!-- 预留空间 用于导航栏占位 -->
+    <!-- <view :style="{ height: navigationBarEmptyHeight }" /> -->
+</template>
+
+<style scoped>
+.custom-navigation-bar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* padding: 0 16px; */
+  box-sizing: border-box;
+  z-index: 999;
+}
+
+.nav-back-btn {
+  position: absolute;
+  left: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 100%;
+}
+
+.back-icon {
+  font-size: 24px;
+}
+
+.nav-title {
+  height: 100%;
+  font-size: 18px;
+  font-weight: 500;
+  text-align: center;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.nav-placeholder {
+  height: 100%;
+  position: absolute;
+  right: 16px;
+  width: 44px;
+}
+</style>

src/pages-A/unlockRewards/index.vue

@@ -0,0 +1,393 @@
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+import { ref } from 'vue'
+import CustomNavigationBar from '@/components/CustomNavigationBar.vue'
+import { LOGIN_PAGE } from '@/router/config'
+import { useUserStore } from '@/store'
+import { useTokenStore } from '@/store/token'
+import { changtime, menuButtonInfo, safeAreaInsets, systemInfo } from '@/utils'
+
+definePage({
+  style: {
+    navigationBarTitleText: '解锁收益',
+    navigationStyle: 'custom',
+  },
+})
+
+const userStore = useUserStore()
+const tokenStore = useTokenStore()
+// 使用storeToRefs解构userInfo
+const { userInfo } = storeToRefs(userStore)
+
+function menuClick(page: string) {
+    uni.navigateTo({
+        url: `/pages-A/${page}/index`,
+    })
+}
+
+const show = ref(false)
+const filterValue = ref(Number(new Date()))
+function confirm() {
+  // 函数实现
+  show.value = false
+}
+function cancel() {
+  show.value = false
+}
+function close() {
+  show.value = false
+}
+function showTimeFilter() {
+  show.value = true
+}
+
+const activeTab = ref('pending')
+function changeTab(tab: string) {
+  activeTab.value = tab
+}
+</script>
+
+<template>
+    <view class="profile-container">
+        <!-- 自定义导航栏 -->
+        <CustomNavigationBar title="解锁收益" background-color="transparent" />
+
+        <!-- 顶部区域 -->
+        <view class="income-header" style="background: url('../../static/images/income/income-bg.png') no-repeat center center; background-size: cover;">
+            <view class="income-header-avatar-info" :style="{ paddingTop: `${safeAreaInsets.top + menuButtonInfo.height + 12}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="aspectFit" />
+            </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" :class="[activeTab === 'pending' ? 'active' : '']" @click="changeTab('pending')">
+                    待结算
+                </view>
+                <view class="income-header-menu-filter-item" :class="[activeTab === 'settled' ? 'active' : '']" @click="changeTab('settled')">
+                    已结算
+                </view>
+            </view>
+            <!-- 时间筛选 -->
+            <view class="income-menu-time-filter">
+                <view class="income-menu-time-filter-text" @click="showTimeFilter">
+                    <text>{{ changtime(filterValue) }}</text>
+                    <up-icon name="arrow-down" color="#666666" size="14" />
+                </view>
+                <view>合计：￥4396.00</view>
+            </view>
+            <!-- 优惠券列表 -->
+            <view class="income-header-menu-list">
+                <view class="income-header-menu-item" @click="menuClick('applyForm')">
+                    <view class="income-header-menu-icon">
+                        <image src="@/static/images/me/coupon-need.png" mode="aspectFit" />
+                        <view class="income-header-menu-text">
+                            <view class="income-header-menu-text-nickname">
+                                昵称
+                            </view>
+                            <view>优惠券名称</view>
+                        </view>
+                    </view>
+                    <view class="income-header-menu-left">
+                        <view class="income-header-menu-left-amount">
+                            ￥628.00
+                        </view>
+                        <view class="income-header-menu-left-time">
+                            2023/08/01 10:00:00
+                        </view>
+                    </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="aspectFit" />
+                        <view class="income-header-menu-text">
+                            <view class="income-header-menu-text-nickname">
+                                昵称
+                            </view>
+                            <view>优惠券名称</view>
+                        </view>
+                    </view>
+                    <view class="income-header-menu-left">
+                        <view class="income-header-menu-left-amount">
+                            ￥628.00
+                        </view>
+                        <view class="income-header-menu-left-time">
+                            2023/08/01 10:00:00
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <up-datetime-picker
+            v-model="filterValue"
+            :show="show"
+            mode="year-month"
+            close-on-click-overlay
+            @confirm="confirm"
+            @cancel="cancel"
+        />
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.profile-container {
+  font-family: Alibaba PuHuiTi;
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  line-height: 1;
+  //   padding-top: 44px; /* 为固定导航栏留出空间 */
+  .income-header {
+    height: 525rpx;
+    .income-header-avatar-info {
+      display: flex;
+      flex-direction: column;
+      gap: 30rpx;
+      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: #da4c47;
+              color: #ffffff;
+            }
+            &.tx {
+              background: #bfbfbf;
+              color: #747474;
+            }
+          }
+        }
+      }
+    }
+    .income-header-tips {
+      height: 124rpx;
+      display: flex;
+      background: linear-gradient(114deg, #f67873, #fb847f, #f67873);
+      border-radius: 10rpx;
+      margin: 47rpx 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-menu-time-filter {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-weight: 400;
+      font-size: 24rpx;
+      color: #333333;
+      padding: 50rpx 20rpx 14rpx;
+      background: #ffffff;
+      margin-top: 4rpx;
+      .income-menu-time-filter-text {
+        font-weight: 400;
+        font-size: 26rpx;
+        color: #000000;
+        display: flex;
+        align-items: center;
+        gap: 12rpx;
+      }
+    }
+    .income-header-menu-list {
+      background: #ffffff;
+      .income-header-menu-item {
+        height: 88rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid #eeeeee;
+        padding: 32rpx 0 29rpx;
+        margin: 0 20rpx;
+        &:last-child {
+          border-bottom: none;
+        }
+        .income-header-menu-icon {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          gap: 19rpx;
+          image {
+            width: 60rpx;
+            height: 60rpx;
+          }
+          .income-header-menu-text {
+            font-weight: 400;
+            font-size: 24rpx;
+            color: #888888;
+            .income-header-menu-text-nickname {
+              font-size: 28rpx;
+              color: #222222;
+              margin-bottom: 18rpx;
+            }
+          }
+        }
+        .income-header-menu-left {
+          font-weight: 400;
+          font-size: 24rpx;
+          color: #888888;
+          .income-header-menu-left-amount {
+            font-size: 28rpx;
+            color: #222222;
+            margin-bottom: 18rpx;
+          }
+        }
+      }
+    }
+  }
+}
+</style>