提现

src/pages-A/withdraw/index.vue

@@ -0,0 +1,182 @@
+<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'
+import { changtime, menuButtonInfo, safeAreaInsets, systemInfo } from '@/utils'
+
+definePage({
+  style: {
+    navigationBarTitleText: '提现',
+  },
+})
+
+const userStore = useUserStore()
+const tokenStore = useTokenStore()
+// 使用storeToRefs解构userInfo
+const { userInfo } = storeToRefs(userStore)
+
+const unlockAmount = ref('')
+</script>
+
+<template>
+    <view class="profile-container">
+        <view class="widthdraw-select-card">
+            <view class="widthdraw-select-card-left">
+                <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">
+                    去绑卡
+                </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: 100vh;
+  background-color: #f5f5f5;
+  line-height: 1;
+  //   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: 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

@@ -149,7 +149,7 @@ function goPage(page: string) {
                         <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>