解锁

src/api/income.ts

@@ -38,3 +38,11 @@ export interface PageMapResponse {
 export function getCouponIssuerAccountByPageMap(couponIssuerAccountByPageMapForm: CouponIssuerAccountByPageMapForm) {
     return http.Post<PageMapResponse>('/couponCenter/APP/couponIssuerAccountDetail/pageMap', couponIssuerAccountByPageMapForm)
 }
+
+/**
+ *
+ * 发券人账户表-通过userId查询解锁收益
+ */
+export function getUnlockAmountByUserId() {
+    return http.Get<number>('/couponCenter/APP/couponIssuerAccount/queryUnlockAmountByUserId')
+}

src/api/types/coupon.ts

@@ -5,6 +5,9 @@ export interface CouponList {
 
 export interface AccountCount {
     balance: number
+    status: number
+    withdrawableAmount: number
+    unsettledAmount: number
 }
 
 export interface CouponSituation {

src/pages-A/unlockRewards/index.vue

@@ -1,6 +1,9 @@
 <script lang="ts" setup>
+import { useRequest } from 'alova/client'
 import { storeToRefs } from 'pinia'
 import { ref } from 'vue'
+import { getAccountCount } from '@/api/home'
+import { getUnlockAmountByUserId } from '@/api/income'
 import CustomNavigationBar from '@/components/CustomNavigationBar.vue'
 import { LOGIN_PAGE } from '@/router/config'
 import { useUserStore } from '@/store'
@@ -16,13 +19,15 @@ definePage({
 
 const userStore = useUserStore()
 const tokenStore = useTokenStore()
+const { hasLogin } = storeToRefs(tokenStore)
+
 // 使用storeToRefs解构userInfo
 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)
@@ -37,6 +42,26 @@ function cancel() {
 function close() {
     show.value = false
 }
+const unlockAmount = ref(0)
+
+// 发券人账户表-通过userId查询账户信息
+const { send: getAccountCountRequest, data: accountCountData } = useRequest(getAccountCount, {
+    immediate: false,
+})
+
+const { send: getUnlockAmountByUserIdRequest, data: unlockAmountData } = useRequest(getUnlockAmountByUserId, {
+    immediate: false,
+})
+// 移除重复声明，已在下方统一声明
+onShow(async () => {
+    // 登录后查询收益数据
+    if (hasLogin) {
+        await getAccountCountRequest()
+        await getUnlockAmountByUserIdRequest()
+        unlockAmount.value = unlockAmountData
+    }
+})
+
 function showTimeFilter() {
     show.value = true
 }
@@ -45,8 +70,13 @@ const activeTab = ref('pending')
 function changeTab(tab: string) {
     activeTab.value = tab
 }
-
-const unlockAmount = ref('')
+function submitPay() {
+    // 提示联系管理员
+    uni.showToast({
+        title: '联系管理员解锁收益！',
+        icon: 'none',
+    })
+}
 </script>
 
 <template>
@@ -55,14 +85,20 @@ const unlockAmount = ref('')
         <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"
+            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
+                        {{ accountCountData?.balance }}
                     </view>
                     <view class="income-header-balance-num-btns">
                         <view class="income-header-balance-num-btn js">
@@ -74,7 +110,7 @@ const unlockAmount = ref('')
             <view class="income-header-tips">
                 <view class="income-header-tips-item">
                     <view class="income-header-tips-item-num">
-                        729000.00
+                        {{ accountCountData?.withdrawableAmount }}
                     </view>
                     <view class="income-header-tips-item-des">
                         锁定金额
@@ -82,7 +118,7 @@ const unlockAmount = ref('')
                 </view>
                 <view class="income-header-tips-item">
                     <view class="income-header-tips-item-num">
-                        1,125
+                        {{ accountCountData?.unsettledAmount }}
                     </view>
                     <view class="income-header-tips-item-des">
                         未结算金额
@@ -97,15 +133,10 @@ const unlockAmount = ref('')
             </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="请输入解锁金额"
-                />
+                <u-input v-model="unlockAmount" type="number" border="none" />
             </view>
         </view>
-        <view class="income-header-menu-btn">
+        <view class="income-header-menu-btn" @click="submitPay">
             立即充值
         </view>
     </view>
@@ -116,45 +147,55 @@ const unlockAmount = ref('')
   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;
@@ -163,12 +204,14 @@ const unlockAmount = ref('')
         }
       }
     }
+
     .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;
@@ -181,6 +224,7 @@ const unlockAmount = ref('')
         color: #ffffff;
         line-height: 1;
         position: relative;
+
         &:first-child:after {
           content: '';
           position: absolute;
@@ -191,9 +235,11 @@ const unlockAmount = ref('')
           height: 40rpx;
           background: #ffffff;
         }
+
         .income-header-tips-item-num {
           font-weight: bold;
         }
+
         .income-header-tips-item-des {
           font-weight: 400;
           font-size: 24rpx;
@@ -208,6 +254,7 @@ const unlockAmount = ref('')
     border-radius: 10rpx;
     margin: 24rpx 24rpx 0;
     margin-top: -30rpx;
+
     .income-header-menu-title {
       font-weight: 400;
       font-size: 26rpx;
@@ -215,11 +262,13 @@ const unlockAmount = ref('')
       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;
@@ -227,6 +276,7 @@ const unlockAmount = ref('')
       }
     }
   }
+
   .income-header-menu-btn {
     width: 600rpx;
     line-height: 80rpx;

src/pages/income/income.vue

@@ -112,10 +112,14 @@ function goPage(page: string) {
 <template>
     <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: `${safeAreaInsets.top + menuButtonInfo.height + 12}px` }">
+        <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>
@@ -124,12 +128,16 @@ function goPage(page: string) {
                         {{ accountCountData?.balance }}
                     </view>
                     <view class="income-header-balance-num-btns">
-                        <view class="income-header-balance-num-btn js" @click="goPage('unlockRewards')">
+                        <view
+                            v-if="accountCountData?.status === 0"
+                            class="income-header-balance-num-btn js"
+                            @click="goPage('unlockRewards')"
+                        >
                             解锁
                         </view>
-                        <view class="income-header-balance-num-btn tx" @click="goPage('withdraw')">
+                        <!-- <view class="income-header-balance-num-btn tx" @click="goPage('withdraw')">
                             提现
-                        </view>
+                        </view> -->
                     </view>
                 </view>
             </view>
@@ -165,12 +173,16 @@ function goPage(page: string) {
         <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
+                    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
+                    class="income-header-menu-filter-item" :class="[activeTab === 'settled' ? 'active' : '']"
+                    @click="changeTab('settled')"
+                >
                     已结算
                 </view>
             </view>
@@ -206,260 +218,262 @@ function goPage(page: string) {
                 </view>
             </view>
         </view>
-        <up-datetime-picker v-model="filterValue" :show="show" mode="year-month" close-on-click-overlay
-            @confirm="confirm" @cancel="cancel" />
+        <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;
-
-    .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;
-            }
+  font-family: Alibaba PuHuiTi;
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  line-height: 1;
+
+  .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 {
-                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-balance-num-amount {
+          font-weight: 500;
+          font-size: 65rpx;
+          color: #ffffff;
         }
 
-        .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-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-notice {
-        margin: -50rpx 24rpx 24rpx 24rpx;
-        background: #ffffff;
-        border-radius: 10rpx;
+    .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: 20rpx;
-        padding: 28rpx 20rpx;
+        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-notice-icon {
-            width: 52rpx;
-            height: 35rpx;
+        .income-header-tips-item-num {
+          font-weight: bold;
+        }
 
-            image {
-                width: 100%;
-                height: 100%;
-            }
+        .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;
+    .income-header-notice-content {
+      font-weight: 400;
+      font-size: 24rpx;
+      color: #333333;
 
-            text {
-                color: #c52d27;
-            }
+      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 {
-        // 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-menu-time-filter {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
+        .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: #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;
+            color: #888888;
+
+            .income-header-menu-text-nickname {
+              font-size: 28rpx;
+              color: #222222;
+              margin-bottom: 18rpx;
             }
+          }
         }
 
-        .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;
-                        text-align: right;
-                    }
-                }
-            }
+        .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;
+            text-align: right;
+          }
         }
+      }
     }
+  }
 }
 </style>