feat(wallet): 实现钱包流水页面功能并优化用户体验

refactor(withdraw): 重构提现页面使用组件和动态数据

perf(recycle): 优化回收页面价格计算和单位显示逻辑

fix(App): 调整全局请求数量配置

App.vue

@@ -24,7 +24,7 @@
 				globalDataLoaded: false,
 				loadingProgress: 0,
 				loadedCount: 0,
-				totalRequests: 4 // 总共需要加载的请求数量
+				totalRequests: 3 // 总共需要加载的请求数量
 			}
 		},
 		globalData: {
@@ -61,9 +61,8 @@
 						this.getBannerList(),
 						this.getPricePreviewList(),
 						this.getConfigData(),
-						this.getQrCode()
 					]
-					
+					this.getQrCode()
 					await Promise.all(promises)
 					
 					// 确保进度达到100%

api/model/recyclingDestination.js

@@ -18,6 +18,13 @@ const api = {
 		method: 'GET',
 		auth : false,
 	},
+	// 联系客服问题相关详情
+	withdraw: {
+		url: '/recycle-admin/applet/money/withdraw',
+		method: 'POST',
+		auth : true,
+	},
+    
 }
 
 export default api

pages/component/recycle.vue

@@ -73,7 +73,7 @@
                 <view class="price-info">
                   <text class="price-symbol">¥</text>
                   <text class="price-value">{{item.price}}</text>
-                  <text class="price-unit">/件</text>
+                  <text class="price-unit">/{{ item.unit || '件' }}</text>
                 </view>
                 <view class="quantity-control">
                   <button class="btn-minus" @click="updateQuantity(index, -1)">-</button>
@@ -111,7 +111,7 @@
       <view class="bottom-bar">
         <view class="bottom-left">
           <view class="summary-row">
-            <text class="summary-label">已选 <text class="summary-count">{{totalCount}}</text> 件 预计回收可得</text>
+            <text class="summary-label">已选 <text class="summary-count">{{totalCount}}</text> {{ totalUnitText }} 预计回收可得</text>
             <uni-icons type="help" size="18" color="#b2b2b2" style="margin: 0 8rpx;" @tap="showPriceInfoPopups" />
           </view>
           <view class="amount-row">
@@ -142,7 +142,7 @@
               <text class="panel-item-name">{{item.name}}</text>
               <text class="panel-item-desc" v-if="item.brandName">品牌：{{item.brandName}}</text>
               <text class="panel-item-desc" v-else>{{item.service}}</text>
-              <text class="panel-item-price">¥{{item.price}}/件</text>
+              <text class="panel-item-price">¥{{item.price}}/{{ item.unit || '件' }}</text>
             </view>
             <view class="panel-quantity-control">
               <button class="btn-minus" @click="updateQuantityByProduct(item, -1)">-</button>
@@ -154,7 +154,7 @@
         <view class="popup-bottom-bar">
           <view class="bottom-left">
             <view class="summary-row">
-              <text class="summary-label">已选 <text class="summary-count">{{totalCount}}</text> 件 预计回收可得</text>
+              <text class="summary-label">已选 <text class="summary-count">{{totalCount}}</text> {{ totalUnitText }} 预计回收可得</text>
               <uni-icons type="help" size="18" color="#b2b2b2" style="margin: 0 8rpx;" @tap="showPriceInfoPopups" />
             </view>
             <view class="amount-row">
@@ -172,7 +172,7 @@
       <view class="price-info-popup">
         <view class="price-info-popup-title">回收规则</view>
         <scroll-view class="price-info-popup-content" scroll-y>
-          <view class="price-info-section">
+          <!-- <view class="price-info-section">
             <view class="price-info-heading">关于旧衣质检</view>
             <view class="price-info-text">请确认本次回收旧衣是可以进行二次穿着的程度，如回收旧衣有破损磨损、开线变形、起球发黄、染色污渍、配饰脱落或款式老旧等问题，无法通过质检。</view>
           </view>
@@ -183,7 +183,8 @@
           <view class="price-info-section">
             <view class="price-info-heading">质检结果与回收价格</view>
             <view class="price-info-text">若回收旧衣质检通过，质检价格与用户提交订单时的预估价格一致，回收商将按照预估价打款至您的小程序账户余额。</view>
-          </view>
+          </view> -->
+          <uv-parse :content="huodong_text"></uv-parse>
         </scroll-view>
         <button class="price-info-popup-btn" @click="closePriceInfoPopup">我知道了</button>
       </view>
@@ -267,10 +268,11 @@
       <view class="pickup-confirm-popup">
         <view class="pickup-confirm-title">温馨提示</view>
         <view class="pickup-confirm-content">
-          <view class="confirm-item confirm-item-red">1.当前回收快递免费上门，由于快递成本较高，为避免不必要的成本及资源二次浪费不属于可回收品类或不符合回收标准的物品请勿寄出。</view>
+            <uv-parse :content="recycle_toast"></uv-parse>
+          <!-- <view class="confirm-item confirm-item-red">1.当前回收快递免费上门，由于快递成本较高，为避免不必要的成本及资源二次浪费不属于可回收品类或不符合回收标准的物品请勿寄出。</view>
           <view class="confirm-item">2.已通过的回收物品将正常结算。不符合回收要求的物品可选择快递取回，运费自付。请在订单结算后48小时内联系在线客服安排取回，逾期未联系将默认捐赠，无法再次取回。</view>
           <view class="confirm-item">3.若用户寄出大量不可回收的物品，平台有权限制下次回收权限，或取消下次包邮服务。</view>
-          <view class="confirm-item">4.对于合格率高的回收订单，平台将根据实际情况，给予额外回收奖励。</view>
+          <view class="confirm-item">4.对于合格率高的回收订单，平台将根据实际情况，给予额外回收奖励。</view> -->
         </view>
         <view class="pickup-confirm-btn-row">
           <button class="pickup-confirm-btn" @click="handlePickupCancel">取消回收</button>
@@ -364,6 +366,14 @@ export default {
       const item = getApp().globalData.configData.find(i => i.keyName === 'recycle_banner')
       return item ? item.keyContent : ''
     },
+    recycle_toast() {
+      const item = getApp().globalData.configData.find(i => i.keyName === 'recycle_toast')
+      return item ? item.keyContent : ''
+    },
+    huodong_text() {
+      const item = getApp().globalData.configData.find(i => i.keyName === 'huodong_text')
+      return item ? item.keyContent : ''
+    },
     // 当前分类的商品列表
     recycleList() {
       const currentCategoryId = this.categories[this.currentCategory]?.id
@@ -382,10 +392,34 @@ export default {
         }, 0)
       }, 0)
     },
-    // 计算总价格
-    totalPrice() {
-      const total = Object.values(this.allProducts).reduce((categoryTotal, categoryItems) => {
-        return categoryTotal + categoryItems.reduce((sum, item) => {
+    // 计算总单位文本
+    totalUnitText() {
+      // 获取所有已选商品的单位
+      const units = new Set()
+      Object.values(this.allProducts).forEach(categoryItems => {
+        categoryItems.forEach(item => {
+          let hasQuantity = false
+          if (item.brandQuantities && Object.keys(item.brandQuantities).length > 0) {
+            hasQuantity = Object.values(item.brandQuantities).some(qty => qty > 0)
+          } else {
+            hasQuantity = (item.quantity || 0) > 0
+          }
+          
+          if (hasQuantity) {
+            units.add(item.unit || '件')
+          }
+        })
+      })
+      
+      // 如果只有一种单位，显示单位；如果混合多种单位，显示"项"
+      if (units.size === 0) return '件'
+      if (units.size === 1) return Array.from(units)[0]
+      return '项'
+    },
+    // 计算总价格范围
+    totalPriceRange() {
+      const result = Object.values(this.allProducts).reduce((categoryTotal, categoryItems) => {
+        return categoryItems.reduce((sum, item) => {
           let itemQuantity = 0
           // 如果商品有品牌数量，汇总所有品牌的数量
           if (item.brandQuantities && Object.keys(item.brandQuantities).length > 0) {
@@ -393,10 +427,26 @@ export default {
           } else {
             itemQuantity = item.quantity || 0
           }
-          return sum + itemQuantity * Number(item.price)
-        }, 0)
-      }, 0)
-      return total.toFixed(1)
+          
+          if (itemQuantity > 0) {
+            const minPrice = Number(item.price) || 0
+            const maxPrice = Number(item.maxPrice) || Number(item.price) || 0
+            sum.min += itemQuantity * minPrice
+            sum.max += itemQuantity * maxPrice
+          }
+          
+          return sum
+        }, categoryTotal)
+      }, { min: 0, max: 0 })
+      
+      return {
+        min: result.min.toFixed(1),
+        max: result.max.toFixed(1)
+      }
+    },
+    // 计算总价格 (保持兼容性，使用最低价格)
+    totalPrice() {
+      return this.totalPriceRange.min
     },
     // 计算价格范围
     priceRange() {
@@ -406,10 +456,7 @@ export default {
           max: '0.0'
         }
       }
-      const total = Number(this.totalPrice)
-      const min = Math.max(0, (total - 2.2)).toFixed(1)
-      const max = (total + 2.2).toFixed(1)
-      return { min, max }
+      return this.totalPriceRange
     },
     selectedProducts() {
       // 返回所有分类下所有已选商品，按品牌分组
@@ -647,7 +694,7 @@ export default {
       
       if (this.totalCount < 3) {
         uni.showToast({
-          title: '各品类混合需要满3件才能回收哦',
+          title: `各品类混合需要满3${this.totalUnitText}才能回收哦`,
           icon: 'none'
         })
         return

pages/subcomponent/wallet.vue

@@ -1,314 +1,596 @@
 <template>
-  <view class="container">
-    <!-- 顶部导航栏 -->
-    <view class="nav-bar" :style="{height: (statusBarHeight + 88) + 'rpx', paddingTop: statusBarHeight + 'px'}">
-      <view class="back" @tap="goBack">
-        <uni-icons type="left" size="25" color="#fff"></uni-icons>
-      </view>
-      <text class="title">钱包流水</text>
-    </view>
-    <!-- banner -->
-    <view class="banner" :style="{marginTop: (statusBarHeight + 88) + 'rpx', height: (bannerBaseHeight + statusBarHeight + 88) + 'rpx'}">
-      <image class="banner-bg" :src="image" mode="aspectFill"></image>
-      <!-- <view class="banner-content">
+    <view class="container">
+        <!-- 顶部导航栏 -->
+        <view class="nav-bar" :style="{ height: (statusBarHeight + 88) + 'rpx', paddingTop: statusBarHeight + 'px' }">
+            <view class="back" @tap="goBack">
+                <uni-icons type="left" size="25" color="#fff"></uni-icons>
+            </view>
+            <text class="title">钱包流水</text>
+        </view>
+        <!-- banner -->
+        <view class="banner"
+            :style="{ marginTop: (statusBarHeight + 88) + 'rpx', height: (bannerBaseHeight + statusBarHeight + 88) + 'rpx' }">
+            <image class="banner-bg" :src="image" mode="aspectFill"></image>
+            <!-- <view class="banner-content">
         <image class="wallet-icon" src="/static/wallet/wallet-3d.png" mode="aspectFit"></image>
       </view> -->
-    </view>
+        </view>
 
-    <!-- 账户余额 -->
-    <view class="balance-card">
-      <view class="balance-info">
-        <text class="label">账户</text>
-        <view class="amount">
-          <text class="symbol">¥</text>
-          <text class="value">8848</text>
+        <!-- 账户余额 -->
+        <view class="balance-card">
+            <view class="balance-info">
+                <text class="label">账户</text>
+                <view class="amount">
+                    <text class="symbol">¥</text>
+                    <text class="value">{{ userInfo.money || '0.00' }}</text>
+                </view>
+            </view>
+            <button class="withdraw-btn" @tap="withdraw">提现</button>
         </view>
-      </view>
-      <button class="withdraw-btn" @tap="withdraw">提现</button>
-    </view>
 
-    <!-- 记录切换标签 -->
-    <view class="record-tabs">
-      <view 
-        class="tab-item" 
-        :class="{ active: currentTab === 'settlement' }"
-        @tap="switchTab('settlement')"
-      >
-        结算日志
-      </view>
-      <view 
-        class="tab-item" 
-        :class="{ active: currentTab === 'withdrawal' }"
-        @tap="switchTab('withdrawal')"
-      >
-        提现记录
-      </view>
-    </view>
+        <!-- 记录切换标签 -->
+        <view class="record-tabs">
+            <view class="tab-item" :class="{ active: currentTab === 'settlement' }" @tap="switchTab('settlement')">
+                结算日志
+            </view>
+            <view class="tab-item" :class="{ active: currentTab === 'withdrawal' }" @tap="switchTab('withdrawal')">
+                提现记录
+            </view>
+        </view>
 
-    <!-- 记录列表 -->
-    <scroll-view class="record-list" scroll-y>
-      <template v-if="currentTab === 'settlement'">
-        <view class="record-item" v-for="(item, index) in settlementRecords" :key="index">
-          <view class="record-info">
-            <text class="type">{{ item.type }}</text>
-            <text class="amount">¥{{ item.amount }}</text>
-          </view>
-          <text class="date">{{ item.date }}</text>
+        <!-- 记录列表 -->
+        <view class="record-item" v-for="(item, index) in recordList" :key="index">
+            <view class="record-info">
+                <view class="record-left">
+                    <text class="type">{{ item.title || (currentTab === 'settlement' ? '结算记录' : '提现记录') }}</text>
+                    <!-- 结算记录显示状态 -->
+                    <view class="status" v-if="currentTab === 'settlement' && item.state === 0">
+                        <text class="status-text">24小时后结算</text>
+                    </view>
+                    <!-- 提现记录显示时间 -->
+                    <text v-if="currentTab === 'withdrawal'" class="date">{{ formatDate(item.createTime) }}</text>
+                </view>
+                <view class="record-right">
+                    <text class="amount">¥{{ item.money || '0.00' }}</text>
+                    <!-- 结算记录显示时间 -->
+                    <text v-if="currentTab === 'settlement'" class="date">{{ formatDate(item.createTime) }}</text>
+                    <!-- 提现记录显示操作按钮 -->
+                    <template v-if="currentTab === 'withdrawal'">
+                                                    <button v-if="item.state === 0" class="withdraw-btn" @tap="receiveWithdrawal(item, index)">
+                                提现
+                            </button>
+                            <text v-else class="received-text">已到账</text>
+                    </template>
+                </view>
+            </view>
+        </view>
+        
+        <!-- 初始加载状态 -->
+        <view v-if="loading && !isInitialized" class="loading-more">
+            <text>数据加载中...</text>
+        </view>
+        
+        <!-- 空状态 -->
+        <view v-if="recordList.length === 0 && !loading && isInitialized" class="empty-state">
+            <text>{{ currentTab === 'settlement' ? '暂无结算记录' : '暂无提现记录' }}</text>
         </view>
-      </template>
-      <template v-else>
-        <view class="record-item" v-for="(item, index) in withdrawalRecords" :key="index">
-          <view class="record-info">
-            <text class="type">{{ item.type }}</text>
-            <text class="amount">¥{{ item.amount }}</text>
-          </view>
-          <text class="date">{{ item.date }}</text>
+        
+        <!-- 调试信息（临时启用查看状态） -->
+        <!-- <view class="debug-info" style="padding: 20rpx; background: #f0f0f0; margin: 20rpx; font-size: 24rpx; border-radius: 10rpx;">
+            <text>recordList.length: {{ recordList.length }}</text><br/>
+            <text>loading: {{ loading }}</text><br/>
+            <text>isInitialized: {{ isInitialized }}</text><br/>
+            <text>currentTab: {{ currentTab }}</text><br/>
+            <text>loadingMore: {{ loadingMore }}</text><br/>
+            <text>noMore: {{ noMore }}</text>
+        </view> -->
+        
+        <!-- 加载更多状态 -->
+        <view v-if="loadingMore" class="loading-more">
+            <text>加载更多中...</text>
         </view>
-      </template>
-    </scroll-view>
-  </view>
+        
+        <!-- 没有更多 -->
+        <view v-if="noMore && recordList.length > 0" class="no-more">
+            <text>没有更多了</text>
+        </view>
+    </view>
 </template>
 
 <script>
 import pullRefreshMixin from '@/pages/mixins/pullRefreshMixin.js'
+import api from '@/api/api.js'
 
 export default {
-  mixins: [pullRefreshMixin],
-  data() {
-    return {
-      statusBarHeight: 0,
-      bannerBaseHeight: 300,
-      currentTab: 'settlement',
-      settlementRecords: [
-        { type: '回收结算', date: '04-27', amount: '100.24' },
-        { type: '回收结算', date: '04-23', amount: '171.42' },
-        { type: '回收结算', date: '04-17', amount: '122.02' },
-        { type: '回收结算', date: '04-12', amount: '128.87' },
-        { type: '回收结算', date: '04-12', amount: '106.37' },
-        { type: '佣金结算', date: '04-09', amount: '119.90' },
-        { type: '佣金结算', date: '04-09', amount: '160.76' },
-        { type: '佣金结算', date: '04-07', amount: '132.02' },
-        { type: '佣金结算', date: '03-29', amount: '172.29' }
-      ],
-      withdrawalRecords: [
-        { type: '提现记录', date: '04-27', amount: '10' },
-        { type: '提现记录', date: '04-23', amount: '60' },
-        { type: '提现记录', date: '04-17', amount: '10' },
-        { type: '提现记录', date: '04-12', amount: '110' },
-        { type: '提现记录', date: '04-12', amount: '180' },
-        { type: '提现记录', date: '04-09', amount: '30' },
-        { type: '提现记录', date: '04-09', amount: '130' },
-        { type: '提现记录', date: '04-07', amount: '160' },
-        { type: '提现记录', date: '03-29', amount: '170' }
-      ]
-    }
-  },
-  computed: {
-    image() {
-			// console.log(getApp().globalData.bannerList,'getApp().globalData.bannerList')
-      const item =  getApp().globalData.bannerList.find(i => i.title === '我的-轮播图')
-      return item ? item.image : ''
-    },
-  },
-  onLoad() {
-    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
-  },
-  methods: {
-    async onRefresh() {
-      // 模拟刷新数据
-      await new Promise(resolve => setTimeout(resolve, 1000))
-      uni.stopPullRefresh()
+    mixins: [pullRefreshMixin],
+    data() {
+        return {
+            statusBarHeight: 0,
+            bannerBaseHeight: 300,
+            currentTab: 'settlement',
+            userInfo: {
+                money: '0.00'
+            },
+            recordList: [],
+            pageNum: 1,
+            pageSize: 20,
+            loading: false,
+            loadingMore: false,
+            noMore: false,
+            refreshing: false,
+            isInitialized: false
+        }
     },
-    goBack() {
-      uni.navigateBack()
+    computed: {
+        image() {
+            // console.log(getApp().globalData.bannerList,'getApp().globalData.bannerList')
+            const item = getApp().globalData.bannerList.find(i => i.title === '我的-轮播图')
+            return item ? item.image : ''
+        },
     },
-    switchTab(tab) {
-      this.currentTab = tab
+    onLoad() {
+        this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
+        this.initData()
     },
-    withdraw() {
-      uni.navigateTo({
-        url: '/pages/subcomponent/withdraw'
-      })
+	onPullDownRefresh() {
+		this.onRefresh()
+	},
+	onReachBottom(){
+		this.loadMore()
+	},
+    methods: {
+        async initData() {
+            await this.getUserInfo()
+            await this.loadRecords()
+        },
+
+        async getUserInfo() {
+            try {
+                const res = await api('getUserByToken')
+                if (res.code === 200 && res.data) {
+                    this.userInfo = res.data
+                }
+            } catch (error) {
+                console.error('获取用户信息失败:', error)
+            }
+        },
+
+        async loadRecords(isRefresh = false) {
+            if (this.loading) return
+            this.loading = true
+
+            // 如果是刷新，重置分页状态
+            if (isRefresh) {
+                this.pageNum = 1
+                this.noMore = false
+                this.recordList = []
+            }
+
+            try {
+                // 获取记录
+                const res = await api('getMyMoneyLogPage', {
+                    status: this.currentTab === 'settlement' ? 0 : 1,
+                    pageNum: this.pageNum,
+                    pageSize: this.pageSize
+                })
+                
+                if (res.code === 200 && res.data) {
+                    const records = res.data.records || []
+                    
+                    if (isRefresh) {
+                        this.recordList = records
+                    } else {
+                        this.recordList = [...this.recordList, ...records]
+                    }
+                    
+                    if (records.length < this.pageSize) {
+                        this.noMore = true
+                    }
+                } else {
+                    this.recordList = []
+                }
+            } catch (error) {
+                console.error('获取流水记录失败:', error)
+                uni.showToast({
+                    title: '获取数据失败',
+                    icon: 'none'
+                })
+            } finally {
+                this.loading = false
+                this.isInitialized = true
+            }
+        },
+
+        formatDate(timestamp) {
+            if (!timestamp) return ''
+            const date = new Date(timestamp)
+            const month = String(date.getMonth() + 1).padStart(2, '0')
+            const day = String(date.getDate()).padStart(2, '0')
+            return `${month}-${day}`
+        },
+
+        async onRefresh() {
+            this.refreshing = true
+            try {
+                await this.getUserInfo()
+                await this.loadRecords(true)
+            } finally {
+                this.refreshing = false
+                uni.stopPullRefresh()
+            }
+        },
+
+        goBack() {
+            uni.navigateBack()
+        },
+
+        async switchTab(tab) {
+            this.currentTab = tab
+            // 切换标签时重新加载数据
+            this.pageNum = 1
+            this.noMore = false
+            this.recordList = []
+            this.isInitialized = false
+            await this.loadRecords()
+        },
+
+        withdraw() {
+            uni.navigateTo({
+                url: '/pages/subcomponent/withdraw'
+            })
+        },
+
+        async receiveWithdrawal(item, index) {
+            try {
+                // 验证提现金额
+                if (!item.money || parseFloat(item.money) <= 0) {
+                    uni.showToast({
+                        title: '提现金额无效',
+                        icon: 'none'
+                    })
+                    return
+                }
+
+                // 获取用户名
+                const userName = this.userInfo.name || this.userInfo.nickName || this.userInfo.userName
+                if (!userName) {
+                    uni.showToast({
+                        title: '请先完善个人信息',
+                        icon: 'none'
+                    })
+                    return
+                }
+
+                // 显示确认弹窗
+                const [error, res] = await uni.showModal({
+                    title: '确认提现',
+                    content: `确认提现金额 ¥${item.money} 到您的账户？`,
+                    confirmText: '确认提现',
+                    cancelText: '取消'
+                })
+
+                if (error || !res.confirm) {
+                    return
+                }
+
+                // 显示加载状态
+                uni.showLoading({
+                    title: '正在提现...'
+                })
+
+                // 调用提现接口
+                const result = await api('withdraw', {
+                    userName: userName,
+                    money: parseFloat(item.money)
+                })
+
+                if (result.code === 200) {
+                    // 更新本地状态
+                    this.recordList[index].state = 1
+
+                    uni.hideLoading()
+                    uni.showToast({
+                        title: '提现成功',
+                        icon: 'success'
+                    })
+
+                    // 重新获取用户信息更新余额
+                    await this.getUserInfo()
+                } else {
+                    throw new Error(result.message || result.msg || '提现失败')
+                }
+
+            } catch (error) {
+                uni.hideLoading()
+                console.error('提现失败:', error)
+                uni.showToast({
+                    title: error.message || '提现失败，请重试',
+                    icon: 'none'
+                })
+            }
+        },
+
+        async loadMore() {
+            if (this.noMore || this.loadingMore) return
+            this.loadingMore = true
+            this.pageNum++
+            try {
+                const res = await api('getMyMoneyLogPage', {
+                    status: this.currentTab === 'settlement' ? 0 : 1,
+                    pageNum: this.pageNum,
+                    pageSize: this.pageSize
+                })
+                
+                if (res.code === 200 && res.data) {
+                    const records = res.data.records || []
+                    
+                    this.recordList = [...this.recordList, ...records]
+                    if (records.length < this.pageSize) {
+                        this.noMore = true
+                    }
+                }
+            } catch (error) {
+                console.error('加载更多记录失败:', error)
+                this.pageNum-- // 失败时回退页码
+                uni.showToast({
+                    title: '加载更多数据失败',
+                    icon: 'none'
+                })
+            } finally {
+                this.loadingMore = false
+            }
+        }
     }
-  }
 }
 </script>
 
 <style lang="scss" scoped>
 .container {
-  min-height: 100vh;
-  background: #fff;
+    min-height: 100vh;
+    background: #fff;
 }
 
 .nav-bar {
-  display: flex;
-  align-items: center;
-  background: linear-gradient(to right, #f68240 0%, #fc8940 10%);
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 999;
+    display: flex;
+    align-items: center;
+    background: linear-gradient(to right, #f68240 0%, #fc8940 10%);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 999;
 }
 
 .back {
-  padding: 20rpx;
-  margin-left: -20rpx;
+    padding: 20rpx;
+    margin-left: -20rpx;
 }
 
 .title {
-  flex: 1;
-  text-align: center;
-  font-size: 34rpx;
-  font-weight: 500;
-  color: #fff;
+    flex: 1;
+    text-align: center;
+    font-size: 34rpx;
+    font-weight: 500;
+    color: #fff;
 }
 
 .banner {
-  position: relative;
-  background: linear-gradient(to right, #f78b49, #fc8940);
-  overflow: hidden;
-  border-radius: 0 0 30rpx 30rpx;
-  margin-top: 0;
+    position: relative;
+    background: linear-gradient(to right, #f78b49, #fc8940);
+    overflow: hidden;
+    border-radius: 0 0 30rpx 30rpx;
+    margin-top: 0;
 }
 
 .banner-bg {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  // opacity: 0.8;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    // opacity: 0.8;
 }
 
 .banner-content {
-  position: relative;
-  z-index: 1;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .wallet-icon {
-    width: 240rpx;
-    height: 240rpx;
-  }
+    position: relative;
+    z-index: 1;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .wallet-icon {
+        width: 240rpx;
+        height: 240rpx;
+    }
 }
 
 .balance-card {
-  margin: -60rpx 30rpx 0;
-  padding: 30rpx;
-  background: #fff;
-  border-radius: 20rpx;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: relative;
-  z-index: 2;
-
-  .balance-info {
-    .label {
-      font-size: 28rpx;
-      color: #666;
-    }
+    margin: -60rpx 30rpx 0;
+    padding: 30rpx;
+    background: #fff;
+    border-radius: 20rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    z-index: 2;
+
+    .balance-info {
+        .label {
+            font-size: 28rpx;
+            color: #666;
+        }
+
+        .amount {
+            margin-top: 8rpx;
+            display: flex;
+            align-items: baseline;
+
+            .symbol {
+                font-size: 32rpx;
+                color: #333;
+            }
 
-    .amount {
-      margin-top: 8rpx;
-      display: flex;
-      align-items: baseline;
-
-      .symbol {
-        font-size: 32rpx;
-        color: #333;
-      }
-
-      .value {
-        font-size: 48rpx;
-        font-weight: bold;
-        color: #333;
-        margin-left: 4rpx;
-      }
+            .value {
+                font-size: 48rpx;
+                font-weight: bold;
+                color: #333;
+                margin-left: 4rpx;
+            }
+        }
     }
-  }
 
-  .withdraw-btn {
-    width: 160rpx;
-    height: 70rpx;
-    background: #FFB74D;
-    color: #fff;
-    font-size: 28rpx;
-    border-radius: 35rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-	
-    &::after {
-      border: none;
+    .withdraw-btn {
+        width: 160rpx;
+        height: 70rpx;
+        background: #FFB74D;
+        color: #fff;
+        font-size: 28rpx;
+        border-radius: 35rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: none;
+
+        &::after {
+            border: none;
+        }
     }
-  }
 }
 
 .record-tabs {
-  display: flex;
-  padding: 20rpx 0;
-  border-bottom: 1rpx solid #f5f5f5;
+    display: flex;
+    padding: 20rpx 0;
+    border-bottom: 1rpx solid #f5f5f5;
 
-  .tab-item {
-    position: relative;
-    padding: 16rpx 0;
-    font-size: 28rpx;
-    color: #666;
-    flex: 1;
-    text-align: center;
+    .tab-item {
+        position: relative;
+        padding: 16rpx 0;
+        font-size: 28rpx;
+        color: #666;
+        flex: 1;
+        text-align: center;
 
-    &.active {
-      color: #333;
-      font-weight: 500;
-
-      &::after {
-        content: '';
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-        bottom: -21rpx;
-        width: 48rpx;
-        height: 2rpx;
-        background: #FFB74D;
-      }
+        &.active {
+            color: #333;
+            font-weight: 500;
+
+            &::after {
+                content: '';
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: -21rpx;
+                width: 48rpx;
+                height: 2rpx;
+                background: #FFB74D;
+            }
+        }
     }
-  }
 }
 
-.record-list {
-  height: calc(100vh - 88rpx - 300rpx + 60rpx - 120rpx - 71rpx);
 
-  .record-item {
-    display: flex;
-    flex-direction: column;
-    padding: 30rpx;
-    border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
+    .record-item {
+        padding: 30rpx;
+        border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
+
+        .record-info {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+
+            .record-left {
+                flex: 1;
+
+                .type {
+                    font-size: 28rpx;
+                    color: #333;
+                    margin-bottom: 8rpx;
+                }
+
+                .status {
+                    display: inline-block;
+                    padding: 4rpx 8rpx;
+                    background: #FFB74D;
+                    border-radius: 8rpx;
+                    margin-top: 8rpx;
 
-    .record-info {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 12rpx;
+                    .status-text {
+                        font-size: 22rpx;
+                        color: #fff;
+                    }
+                }
 
-      .type {
+                .date {
+                    font-size: 24rpx;
+                    color: #999;
+                    margin-top: 8rpx;
+                }
+            }
+
+            .record-right {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-end;
+
+                .amount {
+                    font-size: 28rpx;
+                    color: #333;
+                    font-weight: 500;
+                    margin-bottom: 8rpx;
+                }
+
+                .date {
+                    font-size: 24rpx;
+                    color: #999;
+                }
+
+                        .withdraw-btn {
+          width: 100rpx;
+          height: 50rpx;
+          background: #FFB74D;
+          color: #fff;
+          font-size: 24rpx;
+          border-radius: 25rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border: none;
+          margin-top: 8rpx;
+          
+          &::after {
+            border: none;
+          }
+        }
+
+                .received-text {
+                    font-size: 22rpx;
+                    color: #52C41A;
+                    margin-top: 8rpx;
+                }
+            }
+        }
+    }
+
+    .empty-state {
+        width: 100%;
+        text-align: center;
+        padding: 100rpx 0;
+        color: #999;
         font-size: 28rpx;
-        color: #333;
-      }
+    }
 
-      .amount {
+    .loading-more {
+        text-align: center;
+        padding: 20rpx 0;
+        color: #999;
         font-size: 28rpx;
-        color: #333;
-      }
     }
 
-    .date {
-      font-size: 24rpx;
-      color: #999;
+    .no-more {
+        text-align: center;
+        padding: 20rpx 0;
+        color: #999;
+        font-size: 28rpx;
     }
-  }
-}
-</style> 
+</style>

pages/subcomponent/withdraw.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="withdraw-container">
     <!-- 顶部banner轮播图 -->
-    <view class="banner">
+    <!-- <view class="banner">
       <swiper
         :indicator-dots="false"
         :autoplay="true"
@@ -15,13 +15,14 @@
         </swiper-item>
       </swiper>
     </view>
-    <!-- 顶部自适应导航栏 -->
     <view class="nav-bar">
       <view class="back" @tap="goBack">
         <uni-icons type="left" size="20"></uni-icons>
       </view>
       <text class="title">提现</text>
-    </view>
+    </view> -->
+
+    <navbar title="提现" leftClick @leftClick="$utils.navigateBack" />
 
     <!-- 主内容卡片 -->
     <view
@@ -54,7 +55,7 @@
       <view class="popup-content">
         <view class="popup-title">提现须知</view>
         <scroll-view class="popup-body" scroll-y>
-          <view class="section">
+          <!-- <view class="section">
             <text class="section-title">1.适用范围:</text>
             <text class="section-content">(1)本规则仅适用于【可提现】账户</text>
           </view>
@@ -66,7 +67,8 @@
             <text class="section-content">(3)提现账号绑定:一个瀚海回收账号只可以绑定一个微信账号</text>
             <text class="section-content">(4)账号进行提现:需要确认您填写的微信账号信息是真实有效的，否则有可能会导致您提现失败。</text>
             <text class="section-content">(5)提现条件:您应满足瀚海回收提现的前置条件，并根据提现页面提示的流</text>
-          </view>
+          </view> -->
+          <uv-parse :content="withdrawal_instructions"></uv-parse>
         </scroll-view>
         <view class="popup-footer">
           <text class="confirm-btn" @tap="closeNotice">知道了</text>
@@ -83,9 +85,12 @@
 
 <script>
 import pullRefreshMixin from '@/pages/mixins/pullRefreshMixin.js'
-
+import navbar from '@/compoent/base/navbar.vue'
 export default {
   mixins: [pullRefreshMixin],
+  components : {
+    navbar
+  },
   data() {
     return {
       realName: '',
@@ -101,6 +106,12 @@ export default {
     }
     this.bannerList = getApp().globalData.bannerList || []
   },
+  computed: {
+    withdrawal_instructions() {
+      const item = getApp().globalData.configData.find(i => i.keyName === 'withdrawal_instructions')
+      return item ? item.keyContent : ''
+    },
+  },
   methods: {
     async onRefresh() {
       // 模拟刷新数据
@@ -138,53 +149,12 @@ export default {
   padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
 }
 
-.banner {
-  width: 100%;
-  height: 390rpx;
-  position: relative;
-  overflow: hidden;
-  border-radius: 0 0 30rpx 30rpx;
-  margin-bottom: 0;
-  image {
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-}
-
-.nav-bar {
-  display: flex;
-  align-items: center;
-  height: calc(150rpx + var(--status-bar-height));
-  padding: 0 32rpx;
-  padding-top: var(--status-bar-height);
-  background: #fff;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 999;
-  box-sizing: border-box;
-}
-.back {
-  padding: 20rpx;
-  margin-left: -20rpx;
-}
-.title {
-  flex: 1;
-  text-align: center;
-  font-size: 36rpx;
-  font-weight: 500;
-  color: #222;
-}
-
 .main-card {
   background: #fff;
   border-radius: 32rpx;
   box-shadow: 0 8rpx 32rpx rgba(60, 167, 250, 0.06);
   padding: 48rpx 36rpx 32rpx 36rpx;
   position: relative;
-  margin-top: calc(150rpx + var(--status-bar-height) + 32rpx);
 }
 .section-title {
   font-size: 34rpx;