Merge branch 'dev' of http://39.101.143.165:8090/haiyang/couponCenter_mpapp into dev

src/App.ku.vue

@@ -28,9 +28,9 @@ defineExpose({
 <template>
     <view>
         <!-- 这个先隐藏了，知道这样用就行 -->
-        <view class="hidden text-center">
+        <!-- <view class="hidden text-center">
             {{ helloKuRoot }}，这里可以配置全局的东西
-        </view>
+        </view> -->
 
         <KuRootView />
 

src/components/CustomNavigationBar.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+const props = withDefaults(defineProps<Props>(), {
+    title: '页面标题',
+    showBack: true,
+    backgroundColor: '#ffffff',
+    textColor: '#ffffff',
+})
+
+// Props
+interface Props {
+  title?: string
+  showBack?: boolean
+  backgroundColor?: string
+  textColor?: string
+}
+
+// 导航栏高度
+const navBarHeight = ref('44px')
+const navBarTop = ref('44px')
+
+// 返回按钮点击事件
+function handleBack() {
+    uni.navigateBack({
+        delta: 1, // 返回层数，1表示返回上一页
+    })
+}
+
+// 计算导航栏高度
+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`
+        }
+    })
+    // #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>
+</template>
+
+<style scoped>
+.custom-navigation-bar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  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/bank/index.vue

@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+import { ref } from 'vue'
+import { useUserStore } from '@/store'
+import { useTokenStore } from '@/store/token'
+
+definePage({
+    style: {
+        navigationBarTitleText: '绑定银行卡',
+    },
+})
+
+const list = ref([{
+    bankName: '建设银行',
+}, {
+    bankName: '中国银行',
+}, {
+    bankName: '农业银行',
+}, {
+    bankName: '工商银行',
+}])
+</script>
+
+<template>
+    <view class="profile-container">
+        <view class="bank-list">
+            <view v-for="item in list" :key="item.bankName" class="bank-list-item">
+                <view class="bank-list-item-left">
+                    <view class="bank-list-item-left-hanke">
+                        <image src="/static/images/income/y-1.png" />
+                        <view class="bank-list-item-left-hanke-text">
+                            {{ item.bankName }}
+                        </view>
+                    </view>
+                </view>
+                <view class="bank-list-item-right">
+                    <u-icon name="arrow-right" size="13" color="#666" />
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.profile-container {
+  font-family: Alibaba PuHuiTi;
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  line-height: 1;
+  padding: 20rpx;
+}
+.bank-list {
+  padding: 0 20rpx;
+  background: #ffff;
+  border-radius: 10rpx;
+  .bank-list-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    // padding: 0 24rpx;
+    background: #fff;
+    border-radius: 10rpx;
+    margin-bottom: 20rpx;
+    border-bottom: 1rpx solid #eeeeee;
+    &:last-child {
+      border-bottom: none;
+    }
+    .bank-list-item-left {
+      display: flex;
+      align-items: center;
+      gap: 14rpx;
+      padding: 28rpx 0 28rpx 4rpx;
+      .bank-list-item-left-hanke {
+        display: flex;
+        align-items: center;
+        gap: 14rpx;
+        font-weight: 400;
+        font-size: 26rpx;
+        color: #333333;
+        image {
+          width: 30rpx;
+          height: 30rpx;
+        }
+        .bank-list-item-left-hanke-text {
+          font-weight: 400;
+          font-size: 26rpx;
+          color: #333333;
+        }
+      }
+    }
+    .bank-list-item-right {
+      display: flex;
+      align-items: center;
+      gap: 10rpx;
+      padding: 28rpx 4rpx 28rpx 0;
+    }
+  }
+}
+</style>

src/pages-A/myBankList/index.vue

@@ -0,0 +1,196 @@
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+import { ref } from 'vue'
+import { useUserStore } from '@/store'
+import { useTokenStore } from '@/store/token'
+
+definePage({
+  style: {
+    navigationBarTitleText: '绑定银行卡',
+  },
+})
+
+const list = ref([{
+  bankName: '建设银行',
+  bankLogo: '/static/images/income/y-1.png',
+  bankNumber: '6228 **** **** *** 000',
+  bankShortName: 'jh',
+}, {
+  bankName: '中国银行',
+  bankLogo: '/static/images/income/y-1.png',
+  bankNumber: '6228 **** **** *** 000',
+  bankShortName: 'zh',
+}, {
+  bankName: '农业银行',
+  bankLogo: '/static/images/income/y-1.png',
+  bankNumber: '6228 **** **** *** 000',
+  bankShortName: 'nh',
+}, {
+  bankName: '工商银行',
+  bankLogo: '/static/images/income/y-1.png',
+  bankNumber: '6228 **** **** *** 000',
+  bankShortName: 'gh',
+}])
+</script>
+
+<template>
+    <view class="profile-container">
+        <view class="bank-list">
+            <template v-if="list.length">
+                <view
+                    v-for="item in list"
+                    :key="item.bankName"
+                    class="bank-list-item-container"
+                    :class="item.bankShortName"
+                >
+                    <view class="bank-list-item">
+                        <view class="bank-list-item-left">
+                            <view class="bank-list-item-left-hanke">
+                                <image :src="`/static/images/income/logo-${item.bankShortName}.png`" class="bank-list-item-left-hanke-logo" />
+                                <view class="bank-list-item-left-hanke-text">
+                                    {{ item.bankName }}
+                                </view>
+                            </view>
+                            <view class="bank-list-item-left-number">
+                                {{ item.bankNumber }}
+                            </view>
+                        </view>
+                        <view class="bank-list-item-right">
+                            <view style="margin-top: 9rpx;">
+                                储蓄卡 4427
+                            </view>
+                            <text class="bank-list-item-right-full-number">
+                                完整卡号
+                            </text>
+                        </view>
+                    </view>
+                    <image :src="`/static/images/income/logo${item.bankShortName}.png`" class="bank-list-item-right-logo" />
+                </view>
+            </template>
+            <view v-else class="bank-list-empty-container">
+                <image src="/static/images/income/emptyBank.png" class="bank-list-empty" />
+                <view class="bank-list-empty-text">
+                    暂无银行卡~
+                </view>
+            </view>
+        </view>
+        <view class="submit-btn">
+            添加银行卡
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.profile-container {
+  font-family: Alibaba PuHuiTi;
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  line-height: 1;
+  padding: 20rpx;
+}
+.bank-list {
+  padding: 0 20rpx;
+  border-radius: 10rpx;
+  .bank-list-item-container {
+    position: relative;
+    &.jh {
+      background: linear-gradient(270deg, #3571fe 0%, #5386ff 100%);
+    }
+    &.gh {
+      background: linear-gradient(270deg, #ff3137 0%, #ff7278 100%);
+    }
+    &.zh {
+      background: linear-gradient(270deg, #c80c31 0%, #bd445c 100%);
+    }
+    &.nh {
+      background: linear-gradient(270deg, #009981 0%, #00b699 100%);
+    }
+    .bank-list-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 30rpx 27rpx 40rpx 30rpx;
+      border-radius: 10rpx;
+      margin-bottom: 20rpx;
+      color: #fff;
+      position: relative;
+      z-index: 1;
+
+      .bank-list-item-left {
+        display: flex;
+        flex-direction: column;
+        gap: 38rpx;
+        .bank-list-item-left-hanke {
+          display: flex;
+          align-items: center;
+          gap: 14rpx;
+          font-weight: 400;
+          font-size: 30rpx;
+          image.bank-list-item-left-hanke-logo {
+            width: 40rpx;
+            height: 40rpx;
+          }
+          .bank-list-item-left-hanke-text {
+            font-weight: 400;
+            font-size: 30rpx;
+          }
+        }
+      }
+      .bank-list-item-right {
+        display: flex;
+        flex-direction: column;
+        gap: 41rpx;
+        font-size: 24rpx;
+        position: relative;
+        .bank-list-item-right-full-number {
+          font-weight: 400;
+          color: #ffffff;
+          text-align: center;
+          background: rgba(#001649, 0.21);
+          border-radius: 10rpx;
+          padding: 7rpx 15rpx;
+        }
+      }
+    }
+    .bank-list-item-right-logo {
+      width: 115rpx;
+      height: 122rpx;
+      position: absolute;
+      bottom: 11rpx;
+      right: 53rpx;
+    }
+  }
+  .bank-list-empty-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 57rpx;
+    .bank-list-empty {
+      width: 358rpx;
+      height: 246rpx;
+      margin-top: 181rpx;
+    }
+    .bank-list-empty-text {
+      font-weight: 400;
+      font-size: 30rpx;
+      color: #888888;
+    }
+  }
+}
+.submit-btn {
+  width: 600rpx;
+  height: 80rpx;
+  background: linear-gradient(90deg, #ee6b67 0%, #ff7d78 100%);
+  border-radius: 10rpx;
+  font-weight: 400;
+  font-size: 30rpx;
+  color: #ffffff;
+  text-align: center;
+  line-height: 80rpx;
+  position: fixed;
+  bottom: 52rpx;
+  left: 50%;
+  transform: translateX(-50%);
+}
+</style>

src/pages-A/unlockRewards/index.vue

@@ -0,0 +1,242 @@
+<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>

src/pages-A/withdraw/index.vue

@@ -0,0 +1,188 @@
+<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: '提现',
+  },
+})
+
+const userStore = useUserStore()
+const tokenStore = useTokenStore()
+// 使用storeToRefs解构userInfo
+const { userInfo } = storeToRefs(userStore)
+
+const unlockAmount = ref('')
+
+function goPage(page: string) {
+  uni.navigateTo({
+    url: `/pages-A/${page}/index`,
+  })
+}
+</script>
+
+<template>
+    <view class="profile-container">
+        <view class="widthdraw-select-card">
+            <view class="widthdraw-select-card-left" @click.stop="goPage('myBankList')">
+                <view class="widthdraw-select-card-left-title">
+                    提现至
+                </view>
+                <view class="widthdraw-select-card-left-hanke">
+                    <image src="/static/images/income/y-1.png" />
+                    <view class="widthdraw-select-card-left-hanke-text">
+                        建设银行(8463)
+                    </view>
+                </view>
+            </view>
+            <view class="widthdraw-select-card-right">
+                <view class="widthdraw-select-card-right-title" @click.stop="goPage('bank')">
+                    去绑卡
+                </view>
+                <u-icon name="arrow-right" size="13" color="#666" />
+            </view>
+        </view>
+        <view class="income-header-menu">
+            <view class="income-header-menu-title">
+                提现金额
+            </view>
+            <view class="income-header-menu-input-box">
+                <view class="income-header-menu-input">
+                    <text class="income-header-menu-input-symbol">￥</text>
+                    <u-input
+                        v-model="unlockAmount"
+                        type="number"
+                        border="none"
+                    />
+                </view>
+                <view class="income-header-menu-input-text">
+                    全部提现
+                </view>
+            </view>
+            <view class="income-header-menu-input-tips">
+                可提现金额：￥1000000
+            </view>
+        </view>
+        <view class="income-header-menu-btn">
+            申请提现
+        </view>
+        <view class="income-header-menu-btn-cancle">
+            提现记录
+        </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: calc(100vh - 20rpx);
+  background-color: #f5f5f5;
+  line-height: 1;
+  padding: 20rpx 0 0 0;
+  //   padding-top: 44px; /* 为固定导航栏留出空间 */
+  .widthdraw-select-card {
+    height: 88rpx;
+    background: #ffffff;
+    border-radius: 10rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 400;
+    font-size: 26rpx;
+    color: #333333;
+    padding: 0 20rpx;
+    margin: 0 20rpx;
+    .widthdraw-select-card-left {
+      display: flex;
+      align-items: center;
+      gap: 38rpx;
+      .widthdraw-select-card-left-hanke {
+        display: flex;
+        align-items: center;
+        gap: 15rpx;
+        image {
+          width: 30rpx;
+          height: 30rpx;
+        }
+      }
+    }
+    .widthdraw-select-card-right {
+      display: flex;
+      align-items: center;
+      gap: 20rpx;
+    }
+  }
+
+  .income-header-menu {
+    background: #ffffff;
+    border-radius: 10rpx;
+    margin: 24rpx 24rpx 0;
+    .income-header-menu-title {
+      font-weight: 400;
+      font-size: 26rpx;
+      color: #333333;
+      padding: 34rpx 20rpx;
+      //   border-bottom: 2rpx solid #eeeeee;
+    }
+    .income-header-menu-input-box {
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+      .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-input-text {
+        width: 200rpx;
+        font-weight: 400;
+        font-size: 26rpx;
+        color: #1777ff;
+        padding: 66rpx 20rpx;
+      }
+    }
+    .income-header-menu-input-tips {
+      font-weight: 400;
+      font-size: 28rpx;
+      color: #888888;
+      padding: 30rpx 0;
+      margin: 0 20rpx;
+      border-top: 2rpx solid #eeeeee;
+    }
+  }
+  .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;
+  }
+  .income-header-menu-btn-cancle {
+    width: 600rpx;
+    line-height: 80rpx;
+    margin: 10rpx auto 0;
+    font-weight: 400;
+    font-size: 30rpx;
+    color: #333;
+    text-align: center;
+  }
+}
+</style>

src/pages/income/income.vue

@@ -4,13 +4,13 @@ import { ref } from 'vue'
 import { LOGIN_PAGE } from '@/router/config'
 import { useUserStore } from '@/store'
 import { useTokenStore } from '@/store/token'
-import { changtime } from '@/utils'
+import { changtime, menuButtonInfo, safeAreaInsets, systemInfo } from '@/utils'
 
 definePage({
-    style: {
-        navigationBarTitleText: '收益',
-        navigationStyle: 'custom',
-    },
+  style: {
+    navigationBarTitleText: '收益',
+    navigationStyle: 'custom',
+  },
 })
 
 const userStore = useUserStore()
@@ -20,85 +20,116 @@ const { userInfo } = storeToRefs(userStore)
 
 // 微信小程序下登录
 async function handleLogin() {
-    // #ifdef MP-WEIXIN
-    // 微信登录
-    await tokenStore.wxLogin()
+  // #ifdef MP-WEIXIN
+  // 微信登录
+  await tokenStore.wxLogin()
 
-    // #endif
-    // #ifndef MP-WEIXIN
-    uni.navigateTo({
-        url: `${LOGIN_PAGE}`,
-    })
-    // #endif
+  // #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
-        },
-    })
+  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
+      }
+    },
+  })
 }
-getNavigationBarHeight()
-// #endif
 
 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 wjsList = ref([
+  {
+    id: 1,
+    nickName: '昵称1',
+    name: '优惠券1',
+    price: 1000,
+    date: '2023-08-01 10:00:00',
+  },
+  {
+    id: 2,
+    nickName: '昵称2',
+    name: '优惠券2',
+    price: 1300,
+    date: '2023-10-01 10:00:00',
+  },
+])
+const yjsList = ref([
+  {
+    id: 1,
+    nickName: '昵称3',
+    name: '优惠券3',
+    price: 2300,
+    date: '2023-10-01 10:00:00',
+  },
+  {
+    id: 2,
+    nickName: '昵称4',
+    name: '优惠券4',
+    price: 300,
+    date: '2023-10-01 10:00:00',
+  },
+])
+const list = ref([])
+onLoad(() => {
+  list.value = [...wjsList.value]
+})
 const activeTab = ref('pending')
 function changeTab(tab: string) {
     activeTab.value = tab
+    if (tab === 'pending') {
+        list.value = [...wjsList.value]
+    }
+    else {
+        list.value = [...yjsList.value]
+    }
+}
+
+function goPage(page: string) {
+  uni.navigateTo({
+    url: `/pages-A/${page}/index`,
+  })
 }
 </script>
 
@@ -106,7 +137,7 @@ function changeTab(tab: string) {
     <view class="profile-container">
         <!-- 顶部区域 -->
         <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: `${navigationBarHeight}px` }">
+            <view class="income-header-avatar-info" :style="{ paddingTop: `${safeAreaInsets.top + menuButtonInfo.height + 12}px` }">
                 <view class="income-header-balance">
                     当前账户余额（元）
                 </view>
@@ -115,10 +146,10 @@ function changeTab(tab: string) {
                         7297491.08
                     </view>
                     <view class="income-header-balance-num-btns">
-                        <view class="income-header-balance-num-btn js">
+                        <view class="income-header-balance-num-btn js" @click="goPage('unlockRewards')">
                             解锁
                         </view>
-                        <view class="income-header-balance-num-btn tx">
+                        <view class="income-header-balance-num-btn tx" @click="goPage('withdraw')">
                             提现
                         </view>
                     </view>
@@ -173,41 +204,23 @@ function changeTab(tab: string) {
             </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 v-for="item in list" :key="item.id" class="income-header-menu-item">
                     <view class="income-header-menu-icon">
-                        <image src="@/static/images/me/coupon-need.png" mode="aspectFit" />
+                        <image v-if="activeTab === 'settled'" src="@/static/images/income/hb.png" mode="aspectFit" />
+                        <image v-else src="@/static/images/income/djs.png" mode="aspectFit" />
                         <view class="income-header-menu-text">
                             <view class="income-header-menu-text-nickname">
-                                昵称
+                                {{ item.nickName }}
                             </view>
-                            <view>优惠券名称</view>
+                            <view>{{ item.name }}</view>
                         </view>
                     </view>
                     <view class="income-header-menu-left">
                         <view class="income-header-menu-left-amount">
-                            ￥628.00
+                            ￥{{ item.price }}
                         </view>
                         <view class="income-header-menu-left-time">
-                            2023/08/01 10:00:00
+                            {{ item.date }}
                         </view>
                     </view>
                 </view>

src/utils/index.ts

@@ -2,6 +2,7 @@ import type { PageMetaDatum, SubPackages } from '@uni-helper/vite-plugin-uni-pag
 import { isMpWeixin } from '@uni-helper/uni-env'
 import { pages, subPackages } from '@/pages.json'
 import { changtime } from './directive'
+import { menuButtonInfo, safeAreaInsets, systemInfo } from './systemInfo'
 
 export type PageInstance = Page.PageInstance<AnyObject, object> & { $page: Page.PageInstance<AnyObject, object> & { fullPath: string } }
 
@@ -159,5 +160,5 @@ export const isDoubleTokenMode = import.meta.env.VITE_AUTH_MODE === 'double'
  */
 export const HOME_PAGE = `/${(pages as PageMetaDatum[]).find(page => page.type === 'home')?.path || (pages as PageMetaDatum[])[0].path}`
 
-// 导出时间格式化函数
-export { changtime }
+// 导出时间格式化函数和系统信息
+export { changtime, menuButtonInfo, safeAreaInsets, systemInfo }

src/utils/systemInfo.ts

@@ -2,18 +2,20 @@
 // 获取屏幕边界到安全区域距离
 let systemInfo
 let safeAreaInsets
+const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
 
 // #ifdef MP-WEIXIN
 // 微信小程序使用新的API
 systemInfo = uni.getWindowInfo()
+console.log(9990, systemInfo)
 safeAreaInsets = systemInfo.safeArea
-  ? {
-      top: systemInfo.safeArea.top,
-      right: systemInfo.windowWidth - systemInfo.safeArea.right,
-      bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
-      left: systemInfo.safeArea.left,
+    ? {
+        top: systemInfo.safeArea.top,
+        right: systemInfo.windowWidth - systemInfo.safeArea.right,
+        bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
+        left: systemInfo.safeArea.left,
     }
-  : null
+    : null
 // #endif
 
 // #ifndef MP-WEIXIN
@@ -35,4 +37,4 @@ console.log('systemInfo', systemInfo)
 // windowHeight: 753
 // windowTop: 0
 // windowWidth: 390
-export { safeAreaInsets, systemInfo }
+export { menuButtonInfo, safeAreaInsets, systemInfo }