解锁收益

src/components/CustomNavigationBar.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
 
 const props = withDefaults(defineProps<Props>(), {
     title: '页面标题',
@@ -9,8 +8,6 @@ const props = withDefaults(defineProps<Props>(), {
     textColor: '#ffffff',
 })
 
-const router = useRouter()
-
 // Props
 interface Props {
   title?: string
@@ -22,11 +19,12 @@ interface Props {
 // 导航栏高度
 const navBarHeight = ref('44px')
 const navBarTop = ref('44px')
-// const navigationBarEmptyHeight = ref('0px')
 
 // 返回按钮点击事件
 function handleBack() {
-    router.back()
+    uni.navigateBack({
+        delta: 1, // 返回层数，1表示返回上一页
+    })
 }
 
 // 计算导航栏高度
@@ -40,7 +38,6 @@ onMounted(() => {
             // 顶部导航栏高度 = 状态栏高度 + 胶囊的高度
             navBarHeight.value = `${menuButtonInfo.height}px`
             navBarTop.value = `${menuButtonInfo.top}px`
-            // navigationBarEmptyHeight.value = `${menuButtonInfo.top + menuButtonInfo.height}px`
         }
     })
     // #endif
@@ -70,8 +67,6 @@ onMounted(() => {
         <!-- 占位元素，保持标题居中 -->
         <view v-if="props.showBack" class="nav-placeholder" />
     </view>
-    <!-- 预留空间 用于导航栏占位 -->
-    <!-- <view :style="{ height: navigationBarEmptyHeight }" /> -->
 </template>
 
 <style scoped>
@@ -82,7 +77,6 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  /* padding: 0 16px; */
   box-sizing: border-box;
   z-index: 999;
 }

src/pages-A/unlockRewards/index.vue

@@ -8,10 +8,10 @@ import { useTokenStore } from '@/store/token'
 import { changtime, menuButtonInfo, safeAreaInsets, systemInfo } from '@/utils'
 
 definePage({
-  style: {
-    navigationBarTitleText: '解锁收益',
-    navigationStyle: 'custom',
-  },
+    style: {
+        navigationBarTitleText: '解锁收益',
+        navigationStyle: 'custom',
+    },
 })
 
 const userStore = useUserStore()
@@ -20,31 +20,33 @@ const tokenStore = useTokenStore()
 const { userInfo } = storeToRefs(userStore)
 
 function menuClick(page: string) {
-    uni.navigateTo({
-        url: `/pages-A/${page}/index`,
-    })
+  uni.navigateTo({
+    url: `/pages-A/${page}/index`,
+  })
 }
 
 const show = ref(false)
 const filterValue = ref(Number(new Date()))
 function confirm() {
-  // 函数实现
-  show.value = false
+    // 函数实现
+    show.value = false
 }
 function cancel() {
-  show.value = false
+    show.value = false
 }
 function close() {
-  show.value = false
+    show.value = false
 }
 function showTimeFilter() {
-  show.value = true
+    show.value = true
 }
 
 const activeTab = ref('pending')
 function changeTab(tab: string) {
-  activeTab.value = tab
+    activeTab.value = tab
 }
+
+const unlockAmount = ref('')
 </script>
 
 <template>
@@ -56,7 +58,7 @@ function changeTab(tab: string) {
         <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">
@@ -64,10 +66,7 @@ function changeTab(tab: string) {
                     </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>
@@ -78,7 +77,7 @@ function changeTab(tab: string) {
                         729000.00
                     </view>
                     <view class="income-header-tips-item-des">
-                        可提现金额
+                        锁定金额
                     </view>
                 </view>
                 <view class="income-header-tips-item">
@@ -91,88 +90,32 @@ function changeTab(tab: string) {
                 </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 class="income-header-menu-title">
+                充值解锁金额
             </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 class="income-header-menu-input">
+                <text class="income-header-menu-input-symbol">￥</text>
+                <u-input
+                    v-model="unlockAmount"
+                    type="number"
+                    border="none"
+                    placeholder="请输入解锁金额"
+                />
             </view>
         </view>
-        <up-datetime-picker
-            v-model="filterValue"
-            :show="show"
-            mode="year-month"
-            close-on-click-overlay
-            @confirm="confirm"
-            @cancel="cancel"
-        />
+        <view class="income-header-menu-btn">
+            立即充值
+        </view>
     </view>
 </template>
 
 <style lang="scss" scoped>
+::v-deep .u-input__content__field-wrapper__field {
+  height: 80rpx !important;
+  font-size: 80rpx !important;
+}
 .profile-container {
   font-family: Alibaba PuHuiTi;
   min-height: 100vh;
@@ -234,7 +177,7 @@ function changeTab(tab: string) {
         align-items: center;
         gap: 15rpx;
         font-weight: 500;
-        font-size: 34rpx;
+        font-size: 30rpx;
         color: #ffffff;
         line-height: 1;
         position: relative;
@@ -260,134 +203,40 @@ function changeTab(tab: string) {
     }
   }
 
-  .income-header-notice {
-    margin: -50rpx 24rpx 24rpx 24rpx;
+  .income-header-menu {
     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;
+    margin-top: -30rpx;
+    .income-header-menu-title {
+      font-weight: 400;
+      font-size: 26rpx;
       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;
-          }
-        }
-      }
+      padding: 34rpx 20rpx;
+      border-bottom: 2rpx solid #eeeeee;
     }
-    .income-menu-time-filter {
+    .income-header-menu-input {
       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 {
+      align-items: flex-end;
+      gap: 17rpx;
+      padding: 66rpx 20rpx;
+      .income-header-menu-input-symbol {
         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;
-          }
-        }
+        font-size: 60rpx;
+        color: #333333;
       }
     }
   }
+  .income-header-menu-btn {
+    width: 600rpx;
+    line-height: 80rpx;
+    background: linear-gradient(90deg, #ee6b67 0%, #ff7d78 100%);
+    border-radius: 10rpx;
+    margin: 100rpx auto 0;
+    font-weight: 400;
+    font-size: 30rpx;
+    color: #ffffff;
+    text-align: center;
+  }
 }
 </style>