feat(提现): 实现微信商户转账功能并优化提现流程

- 在config.js中添加mchId配置
- 重构提现相关页面，使用微信商户转账API
- 优化提现记录页面样式和交互
- 添加提现成功和失败状态显示
- 完善表单验证和错误处理
- 更新提现接口配置和状态处理

api/model/info.js

@@ -1,115 +1,107 @@
 // 个人相关接口
 
 const api = {
-	// 充值
-	recharge: {
-		url: '/info_common/withdraw',
-		method: 'GET',
-		auth: true,
-		limit: 1000,
-		showLoading: true,
-	},
-	// 提现
-	withdraw: {
-		url: '/info_common/withdraw',
-		method: 'GET',
-		auth: true,
-		limit: 1000,
-		showLoading: true,
-	},
-	// 获取地址列表带分页
-	getAddressPageList: {
-		url: '/info_common/getAddressPageList',
-		method: 'GET',
-		auth: true,
-	},
-	// 增加或修改地址信息
-	addOrUpdateAddress: {
-		url: '/info_common/addOrUpdateAddress',
-		method: 'POST',
-		limit: 500,
-		auth: true,
-		showLoading: true,
-	},
-	// 删除地址
-	deleteAddress: {
-		url: '/info_common/deleteAddress',
-		method: 'GET',
-		limit: 500,
-		auth: true,
-		showLoading: true,
-	},
-	// 修改默认地址
-	updateDefaultAddress: {
-		url: '/info_common/updateDefaultAddress',
-		method: 'GET',
-		auth: true,
-		limit: 1000,
-	},
-	// 获取粉丝列表带分页
-	getFansPageList: {
-		url: '/info_common/getFansPageList',
-		method: 'GET',
-		auth: true,
-	},
-	// 获取相关介绍
-	getInfoIntroduce: {
-		url: '/info_common/getInfoIntroduce',
-		method: 'GET',
-		auth: true,
-	},
-	// 获取个人邀请码
-	getInviteCode: {
-		url: '/info_common/getInviteCode',
-		method: 'GET',
-		auth: true,
-	},
-	// 获取订单列表带分页
-	getOrderPageList: {
-		url: '/info_common/getOrderPageList',
-		method: 'GET',
-		auth: true,
-	},
-	// 获取订单详情
-	getOrderDetail: {
-		url: '/info_common/getOrderDetail',
-		method: 'GET',
-		auth: true,
-	},
-	// 获取流水记录带分页
-	getWaterPageList: {
-		url: '/info_common/getWaterPageList',
-		method: 'GET',
-		auth: true,
-	},
-	// 获取相关介绍
-	getInfoIntroduce: {
-		url: '/info_common/getInfoIntroduce',
-		method: 'GET',
-	},
-	// 获取相关介绍详情
-	getInfoIntroduceDetail: {
-		url: '/info_common/getRiceNewsDetail',
-		method: 'GET',
-	},
-	// 查询个人信息相关
-	getRiceInfo: {
-		url: '/info_common/getRiceInfo',
-		method: 'GET',
-		limit: 500,
-	},
-	// 获取购物车信息列表带分页
-	getCartPageList: {
-		url: '/info_common/getCartPageList',
-		method: 'GET',
-	},
-	// 领取新人优惠券
-	getRiceCoupon: {
-		url: '/info_common/getRiceCoupon',
-		method: 'GET',
-		limit: 500,
-		auth: true,
-	},
+	// // 充值
+	// recharge: {
+	// 	url: '/recycle-admin/applet/money/withdraw',
+	// 	method: 'GET',
+	// 	auth: true,
+	// 	limit: 1000,
+	// 	showLoading: true,
+	// },
+	// // 获取地址列表带分页
+	// getAddressPageList: {
+	// 	url: '/info_common/getAddressPageList',
+	// 	method: 'GET',
+	// 	auth: true,
+	// },
+	// // 增加或修改地址信息
+	// addOrUpdateAddress: {
+	// 	url: '/info_common/addOrUpdateAddress',
+	// 	method: 'POST',
+	// 	limit: 500,
+	// 	auth: true,
+	// 	showLoading: true,
+	// },
+	// // 删除地址
+	// deleteAddress: {
+	// 	url: '/info_common/deleteAddress',
+	// 	method: 'GET',
+	// 	limit: 500,
+	// 	auth: true,
+	// 	showLoading: true,
+	// },
+	// // 修改默认地址
+	// updateDefaultAddress: {
+	// 	url: '/info_common/updateDefaultAddress',
+	// 	method: 'GET',
+	// 	auth: true,
+	// 	limit: 1000,
+	// },
+	// // 获取粉丝列表带分页
+	// getFansPageList: {
+	// 	url: '/info_common/getFansPageList',
+	// 	method: 'GET',
+	// 	auth: true,
+	// },
+	// // 获取相关介绍
+	// getInfoIntroduce: {
+	// 	url: '/info_common/getInfoIntroduce',
+	// 	method: 'GET',
+	// 	auth: true,
+	// },
+	// // 获取个人邀请码
+	// getInviteCode: {
+	// 	url: '/info_common/getInviteCode',
+	// 	method: 'GET',
+	// 	auth: true,
+	// },
+	// // 获取订单列表带分页
+	// getOrderPageList: {
+	// 	url: '/info_common/getOrderPageList',
+	// 	method: 'GET',
+	// 	auth: true,
+	// },
+	// // 获取订单详情
+	// getOrderDetail: {
+	// 	url: '/info_common/getOrderDetail',
+	// 	method: 'GET',
+	// 	auth: true,
+	// },
+	// // 获取流水记录带分页
+	// getWaterPageList: {
+	// 	url: '/info_common/getWaterPageList',
+	// 	method: 'GET',
+	// 	auth: true,
+	// },
+	// // 获取相关介绍
+	// getInfoIntroduce: {
+	// 	url: '/info_common/getInfoIntroduce',
+	// 	method: 'GET',
+	// },
+	// // 获取相关介绍详情
+	// getInfoIntroduceDetail: {
+	// 	url: '/info_common/getRiceNewsDetail',
+	// 	method: 'GET',
+	// },
+	// // 查询个人信息相关
+	// getRiceInfo: {
+	// 	url: '/info_common/getRiceInfo',
+	// 	method: 'GET',
+	// 	limit: 500,
+	// },
+	// // 获取购物车信息列表带分页
+	// getCartPageList: {
+	// 	url: '/info_common/getCartPageList',
+	// 	method: 'GET',
+	// },
+	// // 领取新人优惠券
+	// getRiceCoupon: {
+	// 	url: '/info_common/getRiceCoupon',
+	// 	method: 'GET',
+	// 	limit: 500,
+	// 	auth: true,
+	// },
 }
 
 export default api

api/model/recyclingDestination.js

@@ -18,13 +18,20 @@ const api = {
 		method: 'GET',
 		auth : false,
 	},
-	// 联系客服问题相关详情
+	// 提现
 	withdraw: {
 		url: '/recycle-admin/applet/money/withdraw',
 		method: 'POST',
 		auth : true,
+        limit: 2000,
+		showLoading: true,
+	},
+    // 提现领取成功
+    withdrawSUccess: {
+		url: '/recycle-admin/applet/money/withdrawSUccess',
+		method: 'POST',
+		auth : true,
 	},
-    
 }
 
 export default api

config.js

@@ -24,7 +24,8 @@ const defaultConfig = {
       bucket: 'ossddmhs',
       endpoint: 'oss-cn-hangzhou.aliyuncs.com',
     }
-  }
+  },
+  mchId: '1701841654',
 }
 
 import utils from './utils/utils.js'

manifest.json

@@ -55,9 +55,7 @@
             "urlCheck" : false
         },
         "usingComponents" : true,
-        "requiredPrivateInfos" : [
-            "chooseLocation"
-        ],
+        "requiredPrivateInfos" : [ "chooseLocation" ],
         "permission" : {
             "scope.userLocation" : {
                 "desc" : "您的位置信息将用于选择寄件地址"

pages/subcomponent/promotion-withdraw-record.vue

@@ -1,46 +1,253 @@
 <template>
   <view class="withdraw-record-container">
     <!-- 顶部导航栏 -->
-    <view class="nav-bar">
+    <view class="nav-bar" :style="{paddingTop: statusBarHeight + 'px'}">
       <view class="back" @tap="goBack">
         <uni-icons type="left" size="20"></uni-icons>
       </view>
       <text class="title">提现记录</text>
     </view>
+    
     <view class="main-content">
       <view class="record-list-card">
-        <view class="record-item" v-for="(item, idx) in records" :key="idx">
+        <!-- 记录列表 -->
+        <view class="record-item" v-for="(item, index) in recordList" :key="index">
           <view class="record-info">
-            <text class="record-title">提现记录</text>
-            <text class="record-date">{{ item.date }}</text>
+            <text class="record-title">{{ item.title || '提现记录' }}</text>
+            <text class="record-date">{{ formatDate(item.createTime) }}</text>
           </view>
-          <text class="record-amount">¥{{ item.amount }}</text>
+          <view class="record-right">
+            <text class="record-amount">¥{{ item.money || '0.00' }}</text>
+            <template v-if="item.state === 0">
+              <button class="withdraw-btn" @tap="requestWechatTransfer(item, index)">
+                提现
+              </button>
+            </template>
+            <template v-else-if="item.state === 1">
+              <text class="status-text received">已到账</text>
+            </template>
+            <template v-else>
+              <text class="status-text cancelled">已取消</text>
+            </template>
+          </view>
+        </view>
+        
+        <!-- 初始加载状态 -->
+        <view v-if="loading && !isInitialized" class="loading-state">
+          <text>数据加载中...</text>
         </view>
+        
+        <!-- 空状态 -->
+        <view v-if="recordList.length === 0 && !loading && isInitialized" class="empty-state">
+          <text>暂无提现记录</text>
+        </view>
+      </view>
+      
+      <!-- 加载更多状态 -->
+      <view v-if="loadingMore" class="loading-more">
+        <text>加载更多中...</text>
+      </view>
+      
+      <!-- 没有更多 -->
+      <view v-if="noMore && recordList.length > 0" class="no-more">
+        <text>没有更多了</text>
       </view>
     </view>
   </view>
 </template>
 
 <script>
+import pullRefreshMixin from '@/pages/mixins/pullRefreshMixin.js'
+import api from '@/api/api.js'
+import config from '@/config.js'
+
 export default {
+  mixins: [pullRefreshMixin],
   data() {
     return {
-      records: [
-        { date: '04-27', amount: 10 },
-        { date: '04-23', amount: 60 },
-        { date: '04-17', amount: 10 },
-        { date: '04-12', amount: 110 },
-        { date: '04-12', amount: 180 },
-        { date: '04-09', amount: 30 },
-        { date: '04-09', amount: 130 },
-        { date: '04-07', amount: 160 },
-        { date: '03-29', amount: 170 }
-      ]
+      statusBarHeight: 0,
+      recordList: [],
+      pageNum: 1,
+      pageSize: 20,
+      loading: false,
+      loadingMore: false,
+      noMore: false,
+      refreshing: false,
+      isInitialized: false
     }
   },
+  onLoad() {
+    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
+    this.initData()
+  },
+  onPullDownRefresh() {
+    this.onRefresh()
+  },
+  onReachBottom() {
+    this.loadMore()
+  },
   methods: {
+    async initData() {
+      await this.loadRecords()
+    },
+
+    async loadRecords(isRefresh = false) {
+      if (this.loading) return
+      this.loading = true
+
+      // 如果是刷新，重置分页状态
+      if (isRefresh) {
+        this.pageNum = 1
+        this.noMore = false
+        this.recordList = []
+      }
+
+      try {
+        // 获取提现记录 (status=1 表示提现记录)
+        const res = await api('getMyMoneyLogPage', {
+          status: 1,
+          pageNum: this.pageNum,
+          pageSize: this.pageSize
+        })
+        
+        if (res.code === 200 && res.result) {
+          const records = res.result.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
+      }
+    },
+
+    async loadMore() {
+      if (this.noMore || this.loadingMore) return
+      this.loadingMore = true
+      this.pageNum++
+      try {
+        const res = await api('getMyMoneyLogPage', {
+          status: 1,
+          pageNum: this.pageNum,
+          pageSize: this.pageSize
+        })
+        
+        if (res.code === 200 && res.result) {
+          const records = res.result.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
+      }
+    },
+
+    async onRefresh() {
+      this.refreshing = true
+      try {
+        await this.loadRecords(true)
+      } finally {
+        this.refreshing = false
+        uni.stopPullRefresh()
+      }
+    },
+
+    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}`
+    },
+
     goBack() {
-      uni.navigateBack();
+      uni.navigateBack()
+    },
+
+    // 微信商户转账
+    async requestWechatTransfer(payData, index) {
+      try {
+        uni.showLoading({
+          title: '处理中...'
+        })
+
+        // 调用微信商户转账API
+        const transferResult = await new Promise((resolve, reject) => {
+          // 拉起微信收款确认页面
+          if (!wx.canIUse('requestMerchantTransfer')) {
+            wx.showModal({
+              content: '你的微信版本过低，请更新至最新版本。',
+              showCancel: false,
+            })
+            return
+          }
+          
+          // 在真机环境中，调用API
+          wx.requestMerchantTransfer({
+            mchId: config.mchId,
+            appId: wx.getAccountInfoSync().miniProgram.appId,
+            package: payData.packageInfo,
+            success: (res) => {
+              resolve(res)
+            },
+            fail: (res) => {
+              reject(res)
+            },
+            complete: (res) => {
+            }
+          })
+        })
+
+        // 转账成功后调用成功接口
+        await api('withdrawSUccess', { id: payData.id }, '确认提现中...')
+        
+        // 刷新列表
+        this.pageNum = 1
+        this.noMore = false
+        this.recordList = []
+        this.isInitialized = false
+        await this.loadRecords()
+        
+        uni.showToast({
+          title: '提现成功',
+          icon: 'success'
+        })
+
+      } catch (error) {
+        console.error('微信转账失败:', error)
+        uni.showToast({
+          title: '提现失败，请重试',
+          icon: 'none'
+        })
+      } finally {
+        uni.hideLoading()
+      }
     }
   }
 }
@@ -51,12 +258,12 @@ export default {
   min-height: 100vh;
   background: #f7f7f7;
 }
+
 .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;
@@ -65,10 +272,12 @@ export default {
   z-index: 999;
   box-sizing: border-box;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
+  
   .back {
     padding: 20rpx;
     margin-left: -20rpx;
   }
+  
   .title {
     flex: 1;
     text-align: center;
@@ -77,46 +286,129 @@ export default {
     color: #222;
   }
 }
+
 .main-content {
   margin-top: calc(150rpx + var(--status-bar-height));
   margin-bottom: 40rpx;
 }
+
 .record-list-card {
   background: #fff;
   border-radius: 40rpx;
   margin: 0 32rpx 32rpx 32rpx;
-  padding: 0 0 0 0;
+  padding: 0;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
 }
+
 .record-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 38rpx 36rpx 38rpx 36rpx;
+  padding: 38rpx 36rpx;
   border-bottom: 2rpx solid #f3f3f3;
+  
   &:last-child {
     border-bottom: none;
   }
 }
+
 .record-info {
   display: flex;
   flex-direction: column;
+  flex: 1;
 }
+
 .record-title {
   font-size: 30rpx;
   color: #222;
   font-weight: 500;
   margin-bottom: 8rpx;
 }
+
 .record-date {
   font-size: 26rpx;
   color: #b3b3b3;
   font-weight: 400;
 }
+
+.record-right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8rpx;
+}
+
 .record-amount {
   font-size: 32rpx;
   color: #222;
   font-weight: 500;
 }
+
+.withdraw-btn {
+  width: 120rpx;
+  height: 50rpx;
+  background: #FFB74D;
+  color: #fff;
+  font-size: 24rpx;
+  border-radius: 25rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  padding: 0;
+  line-height: 1;
+  box-sizing: border-box;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  
+  &::after {
+    border: none;
+  }
+}
+
+.status-text {
+  font-size: 24rpx;
+  padding: 4rpx 8rpx;
+  border-radius: 8rpx;
+  
+  &.received {
+    color: #52C41A;
+    background: #f6ffed;
+  }
+  
+  &.cancelled {
+    color: #ff4d4f;
+    background: #fff2f0;
+  }
+}
+
+.loading-state {
+  text-align: center;
+  padding: 100rpx 0;
+  color: #999;
+  font-size: 28rpx;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 100rpx 0;
+  color: #999;
+  font-size: 28rpx;
+}
+
+.loading-more {
+  text-align: center;
+  padding: 20rpx 0;
+  color: #999;
+  font-size: 28rpx;
+}
+
+.no-more {
+  text-align: center;
+  padding: 20rpx 0;
+  color: #999;
+  font-size: 28rpx;
+}
 </style>
  

pages/subcomponent/wallet.vue

@@ -90,7 +90,7 @@
                     <text class="type">{{ item.title || (currentTab === 'settlement' ? '结算记录' : '提现记录') }}</text>
                     <!-- 结算记录显示状态 -->
                     <view class="status" v-if="currentTab === 'settlement' && item.state === 0">
-                        <text class="status-text">24小时后结算</text>
+                        <text class="status-text">48小时后结算</text>
                     </view>
                     <!-- 提现记录显示时间 -->
                     <text v-if="currentTab === 'withdrawal'" class="date">{{ formatDate(item.createTime) }}</text>
@@ -101,10 +101,11 @@
                     <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>
+                        <button v-if="item.state === 0" class="withdraw-btn" @tap="requestWechatTransfer(item, index)">
+                            提现
+                        </button>
+                        <text v-else-if="item.state === 1" class="received-text">已到账</text>
+                        <text v-else class="received-text">已取消</text>
                     </template>
                 </view>
             </view>
@@ -145,6 +146,7 @@
 <script>
 import pullRefreshMixin from '@/pages/mixins/pullRefreshMixin.js'
 import api from '@/api/api.js'
+import config from '@/config.js'
 
 export default {
     mixins: [pullRefreshMixin],
@@ -172,6 +174,8 @@ export default {
     },
     onLoad() {
         this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
+    },
+    onShow() {
         this.initData()
     },
 	onPullDownRefresh() {
@@ -203,8 +207,8 @@ export default {
         async getUserInfo() {
             try {
                 const res = await api('getUserByToken')
-                if (res.code === 200 && res.data) {
-                    this.userInfo = res.data
+                if (res.code === 200 && res.result) {
+                    this.userInfo = res.result
                 }
             } catch (error) {
                 console.error('获取用户信息失败:', error)
@@ -230,8 +234,8 @@ export default {
                     pageSize: this.pageSize
                 })
                 
-                if (res.code === 200 && res.data) {
-                    const records = res.data.records || []
+                if (res.code === 200 && res.result) {
+                    const records = res.result.records || []
                     
                     if (isRefresh) {
                         this.recordList = records
@@ -295,74 +299,49 @@ export default {
                 url: '/pages/subcomponent/withdraw'
             })
         },
-
-        async receiveWithdrawal(item, index) {
+        
+        // 微信商户转账
+        async requestWechatTransfer(payData) {
             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)
+                // 调用微信商户转账API
+                const transferResult = await new Promise((resolve, reject) => {
+                    // 拉起微信收款确认页面
+                    if (!wx.canIUse('requestMerchantTransfer')) {
+                        wx.showModal({
+                            content: '你的微信版本过低，请更新至最新版本。',
+                            showCancel: false,
+                        });
+                        return
+                    }
+                    
+                    // 在真机环境中，调用API
+                    wx.requestMerchantTransfer({
+                        mchId: config.mchId,
+                        appId: wx.getAccountInfoSync().miniProgram.appId,
+                        package: payData.packageInfo,
+                        success: (res) => {
+                            resolve(res)
+                        },
+                        fail: (res) => {
+                            reject(res)
+                        },
+                        complete: (res) => {
+                        }
+                    });
                 })
 
-                if (result.code === 200) {
-                    // 更新本地状态
-                    this.recordList[index].state = 1
+                // 转账成功后调用成功接口
+                await api('withdrawSUccess', { id: payData.id }, '确认提现中...')
 
-                    uni.hideLoading()
-                    uni.showToast({
-                        title: '提现成功',
-                        icon: 'success'
-                    })
-
-                    // 重新获取用户信息更新余额
-                    await this.getUserInfo()
-                } else {
-                    throw new Error(result.message || result.msg || '提现失败')
-                }
+                
+                this.pageNum = 1
+                this.noMore = false
+                this.recordList = []
+                this.isInitialized = false
+                await this.loadRecords()
 
             } catch (error) {
-                uni.hideLoading()
-                console.error('提现失败:', error)
-                uni.showToast({
-                    title: error.message || '提现失败，请重试',
-                    icon: 'none'
-                })
+                throw error
             }
         },
 
@@ -605,7 +584,7 @@ export default {
     }
 
     .withdraw-btn {
-        width: 160rpx;
+        width: 140rpx;
         height: 70rpx;
         background: #FFB74D;
         color: #fff;
@@ -615,6 +594,13 @@ export default {
         align-items: center;
         justify-content: center;
         border: none;
+        padding: 0;
+        margin: 0;
+        line-height: 1;
+        box-sizing: border-box;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
 
         &::after {
             border: none;
@@ -710,7 +696,7 @@ export default {
                 }
 
                         .withdraw-btn {
-          width: 100rpx;
+          width: 120rpx;
           height: 50rpx;
           background: #FFB74D;
           color: #fff;
@@ -721,6 +707,12 @@ export default {
           justify-content: center;
           border: none;
           margin-top: 8rpx;
+          padding: 0;
+          line-height: 1;
+          box-sizing: border-box;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
           
           &::after {
             border: none;

pages/subcomponent/withdraw.vue

@@ -1,7 +1,7 @@
 <template>
-  <view class="withdraw-container">
-    <!-- 顶部banner轮播图 -->
-    <!-- <view class="banner">
+    <view class="withdraw-container">
+        <!-- 顶部banner轮播图 -->
+        <!-- <view class="banner">
       <swiper
         :indicator-dots="false"
         :autoplay="true"
@@ -22,40 +22,37 @@
       <text class="title">提现</text>
     </view> -->
 
-    <navbar title="提现" leftClick @leftClick="$utils.navigateBack" />
-
-    <!-- 主内容卡片 -->
-    <view
-      class="main-card"
-      :style="{marginLeft: '24rpx', marginRight: '24rpx'}"
-    >
-      <view class="section-title">微信提现</view>
-      <view class="form-group">
-        <view class="form-label">真实姓名</view>
-        <input class="form-input" v-model="realName" placeholder="请输入" placeholder-class="input-placeholder" />
-      </view>
-      <view class="divider"></view>
-      <view class="form-group">
-        <view class="form-label">提现金额</view>
-        <input class="form-input" v-model="amount" placeholder="请输入" placeholder-class="input-placeholder" />
-      </view>
-    </view>
+        <navbar title="提现" leftClick @leftClick="$utils.navigateBack" />
 
-    <!-- 说明文字 -->
-    <view class="desc-area">
-      <text>
-        请仔细检查并确认相关信息，因用户个人疏忽导致的充值错误，需由用户自行承担。
-        <text class="desc-link" @tap="showNotice">《提现须知》</text>
-      </text>
-    </view>
+        <!-- 主内容卡片 -->
+        <view class="main-card" :style="{ marginLeft: '24rpx', marginRight: '24rpx' }">
+            <!-- <view class="section-title">微信提现</view> -->
+            <view class="form-group">
+                <view class="form-label">真实姓名</view>
+                <input class="form-input" v-model="realName" placeholder="请输入" placeholder-class="input-placeholder" />
+            </view>
+            <view class="divider"></view>
+            <view class="form-group">
+                <view class="form-label">提现金额</view>
+                <input class="form-input" v-model="amount" placeholder="请输入" placeholder-class="input-placeholder" />
+            </view>
+        </view>
 
-    <!-- 提现须知弹窗 -->
-    <view v-if="showNoticePopup" class="notice-popup">
-      <view class="popup-mask" @tap="closeNotice"></view>
-      <view class="popup-content">
-        <view class="popup-title">提现须知</view>
-        <scroll-view class="popup-body" scroll-y>
-          <!-- <view class="section">
+        <!-- 说明文字 -->
+        <view class="desc-area">
+            <text>
+                请仔细检查并确认相关信息，因用户个人疏忽导致的充值错误，需由用户自行承担。
+                <text class="desc-link" @tap="showNotice">《提现须知》</text>
+            </text>
+        </view>
+
+        <!-- 提现须知弹窗 -->
+        <view v-if="showNoticePopup" class="notice-popup">
+            <view class="popup-mask" @tap="closeNotice"></view>
+            <view class="popup-content">
+                <view class="popup-title">提现须知</view>
+                <scroll-view class="popup-body" scroll-y>
+                    <!-- <view class="section">
             <text class="section-title">1.适用范围:</text>
             <text class="section-content">(1)本规则仅适用于【可提现】账户</text>
           </view>
@@ -68,239 +65,375 @@
             <text class="section-content">(4)账号进行提现:需要确认您填写的微信账号信息是真实有效的，否则有可能会导致您提现失败。</text>
             <text class="section-content">(5)提现条件:您应满足瀚海回收提现的前置条件，并根据提现页面提示的流</text>
           </view> -->
-          <uv-parse :content="withdrawal_instructions"></uv-parse>
-        </scroll-view>
-        <view class="popup-footer">
-          <text class="confirm-btn" @tap="closeNotice">知道了</text>
+                    <uv-parse :content="withdrawal_instructions"></uv-parse>
+                </scroll-view>
+                <view class="popup-footer">
+                    <text class="confirm-btn" @tap="closeNotice">知道了</text>
+                </view>
+            </view>
         </view>
-      </view>
-    </view>
 
-    <!-- 底部按钮 -->
-    <view class="footer-btn-area">
-      <button :class="['main-btn', fromPromotion ? 'promotion' : '']" @tap="submitWithdraw">提现</button>
+        <!-- 底部按钮 -->
+        <view class="footer-btn-area">
+            <button :class="['main-btn', fromPromotion ? 'promotion' : '', loading ? 'loading' : '']" 
+                    :disabled="loading" 
+                    @tap="submitWithdraw">
+                {{ loading ? '提现中...' : '提现' }}
+            </button>
+        </view>
     </view>
-  </view>
 </template>
 
 <script>
 import pullRefreshMixin from '@/pages/mixins/pullRefreshMixin.js'
 import navbar from '@/compoent/base/navbar.vue'
+import api from '@/api/api.js'
+import config from '@/config.js'
 export default {
-  mixins: [pullRefreshMixin],
-  components : {
-    navbar
-  },
-  data() {
-    return {
-      realName: '',
-      amount: '',
-      showNoticePopup: false,
-      fromPromotion: false,
-      bannerList: []
-    }
-  },
-  onLoad(options) {
-    if (options && options.fromPromotion === 'true') {
-      this.fromPromotion = true
-    }
-    this.bannerList = getApp().globalData.bannerList || []
-  },
-  computed: {
-    withdrawal_instructions() {
-      const item = getApp().globalData.configData.find(i => i.keyName === 'withdrawal_instructions')
-      return item ? item.keyContent : ''
+    mixins: [pullRefreshMixin],
+    components: {
+        navbar
     },
-  },
-  methods: {
-    async onRefresh() {
-      // 模拟刷新数据
-      await new Promise(resolve => setTimeout(resolve, 1000))
-      uni.stopPullRefresh()
+    data() {
+        return {
+            realName: '',
+            amount: '',
+            showNoticePopup: false,
+            fromPromotion: false,
+            bannerList: [],
+            loading: false
+        }
     },
-    goBack() {
-      uni.navigateBack()
+    onLoad(options) {
+        if (options && options.fromPromotion === 'true') {
+            this.fromPromotion = true
+        }
+        this.bannerList = getApp().globalData.bannerList || []
     },
-    showNotice() {
-      this.showNoticePopup = true
+    computed: {
+        withdrawal_instructions() {
+            const item = getApp().globalData.configData.find(i => i.keyName === 'withdrawal_instructions')
+            return item ? item.keyContent : ''
+        },
     },
-    closeNotice() {
-      this.showNoticePopup = false
-    },
-    submitWithdraw() {
-      if (!this.realName) {
-        uni.showToast({ title: '请输入真实姓名', icon: 'none' })
-        return
-      }
-      if (!this.amount) {
-        uni.showToast({ title: '请输入提现金额', icon: 'none' })
-        return
-      }
-      uni.showToast({ title: '提现申请已提交', icon: 'success' })
+    methods: {
+        async onRefresh() {
+            // 模拟刷新数据
+            await new Promise(resolve => setTimeout(resolve, 1000))
+            uni.stopPullRefresh()
+        },
+        goBack() {
+            uni.navigateBack()
+        },
+        showNotice() {
+            this.showNoticePopup = true
+        },
+        closeNotice() {
+            this.showNoticePopup = false
+        },
+        async submitWithdraw() {
+            // 表单验证
+            if (!this.realName) {
+                uni.showToast({ title: '请输入真实姓名', icon: 'none' })
+                return
+            }
+            if (!this.amount) {
+                uni.showToast({ title: '请输入提现金额', icon: 'none' })
+                return
+            }
+            
+            // 验证金额格式
+            const amountNum = parseFloat(this.amount)
+            if (isNaN(amountNum) || amountNum <= 0) {
+                uni.showToast({ title: '请输入有效的提现金额', icon: 'none' })
+                return
+            }
+            
+            // 验证最小提现金额
+            if (amountNum < 1) {
+                uni.showToast({ title: '单笔提现不能低于1元', icon: 'none' })
+                return
+            }
+            
+            // 验证最大提现金额
+            if (amountNum > 50000) {
+                uni.showToast({ title: '单笔提现不能超过5万元', icon: 'none' })
+                return
+            }
+            
+            if (this.loading) {
+                return
+            }
+            
+            this.loading = true
+            
+            try {
+                // 调用提现接口
+                const withdrawData = {
+                    userName: this.realName,
+                    money: amountNum
+                }
+                
+                const result = await api('withdraw', withdrawData, '提现申请中...')
+                
+                if (result.code === 200) {
+                    // 提现申请成功，调用微信商户转账
+                    await this.requestWechatTransfer(result.result)
+                } else {
+                    uni.showToast({ 
+                        title: result.message || '提现申请失败', 
+                        icon: 'none' 
+                    })
+                }
+                
+            } catch (error) {
+                console.error('提现失败:', error)
+                uni.showToast({ 
+                    title: error.message || '提现申请失败', 
+                    icon: 'none' 
+                })
+            } finally {
+                this.loading = false
+            }
+        },
+        
+        // 微信商户转账
+        async requestWechatTransfer(withdrawData) {
+            try {
+                let payData = withdrawData.response
+                // 调用微信商户转账API
+                const transferResult = await new Promise((resolve, reject) => {
+                    // 拉起微信收款确认页面
+                    if (!wx.canIUse('requestMerchantTransfer')) {
+                        wx.showModal({
+                            content: '你的微信版本过低，请更新至最新版本。',
+                            showCancel: false,
+                        });
+                        return
+                    }
+                    
+                    // 在真机环境中，调用API
+                    wx.requestMerchantTransfer({
+                        mchId: config.mchId,
+                        appId: wx.getAccountInfoSync().miniProgram.appId,
+                        package: payData.packageInfo,
+                        success: (res) => {
+                            resolve(res)
+                        },
+                        fail: (res) => {
+                            reject(res)
+                        },
+                        complete: (res) => {
+                        }
+                    });
+                })
+
+                
+                // 转账成功后调用成功接口
+                await api('withdrawSUccess', { id: withdrawData.id }, '确认提现中...')
+
+                this.realName = ''
+                this.amount = ''
+            } catch (error) {
+                throw error
+            }
+        },
     }
-  }
 }
 </script>
 
 <style lang="scss" scoped>
 .withdraw-container {
-  min-height: 100vh;
-  background: #f8f8f8;
-  padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
+    min-height: 100vh;
+    background: #f8f8f8;
+    padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
 }
 
 .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;
+    background: #fff;
+    border-radius: 32rpx;
+    box-shadow: 0 8rpx 32rpx rgba(60, 167, 250, 0.06);
+    padding: 48rpx 36rpx 32rpx 36rpx;
+    position: relative;
 }
+
 .section-title {
-  font-size: 34rpx;
-  font-weight: bold;
-  color: #222;
-  margin-bottom: 40rpx;
+    font-size: 34rpx;
+    font-weight: bold;
+    color: #222;
+    margin-bottom: 40rpx;
 }
+
 .form-group {
-  margin-bottom: 0;
+    margin-bottom: 0;
 }
+
 .form-label {
-  font-size: 28rpx;
-  color: #222;
-  font-weight: 500;
-  margin-bottom: 16rpx;
+    font-size: 28rpx;
+    color: #222;
+    font-weight: 500;
+    margin-bottom: 16rpx;
 }
+
 .form-input {
-  width: 100%;
-  font-size: 28rpx;
-  color: #222;
-  background: none;
-  border: none;
-  outline: none;
-  padding: 16rpx 0 22rpx 0;
+    width: 100%;
+    font-size: 28rpx;
+    color: #222;
+    background: none;
+    border: none;
+    outline: none;
+    padding: 16rpx 0 22rpx 0;
 }
+
 .input-placeholder {
-  color: #ccc;
-  font-size: 28rpx;
+    color: #ccc;
+    font-size: 28rpx;
 }
+
 .divider {
-  border-bottom: 1rpx solid #eee;
-  margin: 0 0 24rpx 0;
+    border-bottom: 1rpx solid #eee;
+    margin: 0 0 24rpx 0;
 }
 
 .desc-area {
-  margin: 36rpx 40rpx 0 40rpx;
-  font-size: 24rpx;
-  color: #bbb;
-  line-height: 1.7;
-  text-align: left;
+    margin: 36rpx 40rpx 0 40rpx;
+    font-size: 24rpx;
+    color: #bbb;
+    line-height: 1.7;
+    text-align: left;
 }
+
 .desc-link {
-  color: #FFA800;
-  margin-left: 4rpx;
-  white-space: nowrap;
+    color: #FFA800;
+    margin-left: 4rpx;
+    white-space: nowrap;
 }
 
 .footer-btn-area {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 10;
-  background: #fff;
-  padding: 24rpx 0 env(safe-area-inset-bottom);
-  display: flex;
-  justify-content: center;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+    background: #fff;
+    padding: 24rpx 0 env(safe-area-inset-bottom);
+    display: flex;
+    justify-content: center;
 }
+
 .main-btn {
-  width: 92%;
-  height: 100rpx;
-  background: linear-gradient(90deg, #FFD36D 0%, #FFA800 100%);
-  color: #fff;
-  font-size: 36rpx;
-  border-radius: 50rpx;
-  font-weight: bold;
-  margin: 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 4rpx 16rpx rgba(255, 168, 0, 0.08);
-  border: none;
+    width: 92%;
+    height: 100rpx;
+    background: linear-gradient(90deg, #FFD36D 0%, #FFA800 100%);
+    color: #fff;
+    font-size: 36rpx;
+    border-radius: 50rpx;
+    font-weight: bold;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4rpx 16rpx rgba(255, 168, 0, 0.08);
+    border: none;
 }
+
 .main-btn.promotion {
-  background: linear-gradient(90deg, #c2fdab 0%, #08eae0 100%);
-  color: #222;
+    background: linear-gradient(90deg, #c2fdab 0%, #08eae0 100%);
+    color: #222;
+}
+
+.main-btn.loading {
+    opacity: 0.7;
+    pointer-events: none;
+}
+
+.main-btn:disabled {
+    opacity: 0.7;
+    pointer-events: none;
 }
 
 .notice-popup {
-  position: fixed;
-  left: 0; right: 0; top: 0; bottom: 0;
-  z-index: 2000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 2000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
+
 .popup-mask {
-  position: absolute;
-  left: 0; right: 0; top: 0; bottom: 0;
-  background: rgba(0,0,0,0.55);
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.55);
 }
+
 .popup-content {
-  position: relative;
-  width: 86vw;
-  max-width: 650rpx;
-  background: #fff;
-  border-radius: 40rpx;
-  overflow: hidden;
-  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.10);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+    position: relative;
+    width: 86vw;
+    max-width: 650rpx;
+    background: #fff;
+    border-radius: 40rpx;
+    overflow: hidden;
+    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.10);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
+
 .popup-title {
-  text-align: center;
-  font-size: 38rpx;
-  font-weight: bold;
-  color: #222;
-  margin: 48rpx 0 32rpx 0;
+    text-align: center;
+    font-size: 38rpx;
+    font-weight: bold;
+    color: #222;
+    margin: 48rpx 0 32rpx 0;
 }
+
 .popup-body {
-  max-height: 600rpx;
-  padding: 0 40rpx 0 40rpx !important;
-  font-size: 28rpx;
-  color: #888;
-  line-height: 1.9;
-  margin-bottom: 24rpx;
-  box-sizing: border-box;
-  width: 100%;
+    max-height: 600rpx;
+    padding: 0 40rpx 0 40rpx !important;
+    font-size: 28rpx;
+    color: #888;
+    line-height: 1.9;
+    margin-bottom: 24rpx;
+    box-sizing: border-box;
+    width: 100%;
 }
+
 .section-title {
-  font-size: 28rpx;
-  color: #888;
-  font-weight: bold;
-  margin-top: 0;
-  margin-bottom: 0;
-  display: block;
+    font-size: 28rpx;
+    color: #888;
+    font-weight: bold;
+    margin-top: 0;
+    margin-bottom: 0;
+    display: block;
 }
+
 .section-content {
-  font-size: 28rpx;
-  color: #888;
-  margin-bottom: 8rpx;
-  display: block;
-  word-break: break-all;
+    font-size: 28rpx;
+    color: #888;
+    margin-bottom: 8rpx;
+    display: block;
+    word-break: break-all;
 }
+
 .popup-footer {
-  border-top: 1rpx solid #f2f2f2;
-  width: 100%;
-  padding: 24rpx 0 32rpx 0;
-  display: flex;
-  justify-content: center;
+    border-top: 1rpx solid #f2f2f2;
+    width: 100%;
+    padding: 24rpx 0 32rpx 0;
+    display: flex;
+    justify-content: center;
 }
+
 .confirm-btn {
-  color: #FFA800;
-  font-size: 34rpx;
-  font-weight: bold;
-  text-align: center;
+    color: #FFA800;
+    font-size: 34rpx;
+    font-weight: bold;
+    text-align: center;
 }
-</style> 
+</style>