couponCenter_mpapp/src/pages-A/unlockRewards/index.vue

<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
}

const unlockAmount = ref('')
</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>
                </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-menu">
            <view class="income-header-menu-title">
                充值解锁金额
            </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>
        <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;
  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: 30rpx;
        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-menu {
    background: #ffffff;
    border-radius: 10rpx;
    margin: 24rpx 24rpx 0;
    margin-top: -30rpx;
    .income-header-menu-title {
      font-weight: 400;
      font-size: 26rpx;
      color: #333333;
      padding: 34rpx 20rpx;
      border-bottom: 2rpx solid #eeeeee;
    }
    .income-header-menu-input {
      display: flex;
      align-items: flex-end;
      gap: 17rpx;
      padding: 66rpx 20rpx;
      .income-header-menu-input-symbol {
        font-weight: 400;
        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>