fix: 提现

pages/earningsList/earningsList.vue

@@ -35,11 +35,15 @@
             </view>
           </view>
         </view>
-        <view class="flex-row justify-center">
+        <view class="flex-row justify-around">
           <view class="flex-row justify-center tixian" @click="navigateTo('/pages/withdraw/withdraw')">
             <text>去提现</text>
             <u-icon name="arrow-right" color="#000" size="14"></u-icon>
           </view>
+          <view class="flex-row justify-center tixian" @click="navigateTo('/pages/withdrawalRecord/withdrawalRecord')">
+            <text>提现记录</text>
+            <u-icon name="arrow-right" color="#000" size="14"></u-icon>
+          </view>
         </view>
 
       </view>

pages/index/index.vue

@@ -55,9 +55,7 @@
 			wechatPay() {
 				const that = this;
 				// 用户信息
-				this.$api.service.wechatPay({
-					orderNo: 'CZ20240223125943175'
-				}).then((res) => {
+				this.$api.service.wechatPay({ orderNo: 'CZ20240223125943175' }).then((res) => {
 					var param = res.data.data;
 					uni.requestPayment({
 						appId: param.appid,

pages/withdraw/index.rpx.css

@@ -44,3 +44,151 @@
     font-weight: bold;
 
 }
+
+/* 提现金额输入 */
+.amountSection {
+    margin-top: 60rpx;
+    background: #fff;
+    border-radius: 12rpx;
+    padding: 24rpx;
+}
+.amountInputWrap {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 100rpx;
+    border-bottom: 1rpx solid #f0f0f0;
+}
+.amountSymbol {
+    font-size: 40rpx;
+    color: #333;
+    font-weight: bold;
+    margin-right: 16rpx;
+}
+.amountInput {
+    flex: 1;
+    font-size: 40rpx;
+    color: #333;
+    height: 60rpx;
+    font-weight: bold;
+}
+.amountTip {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 16rpx;
+    font-size: 24rpx;
+    color: #999;
+}
+.allAmount {
+    color: #000000;
+}
+
+/* 提现方式选择 */
+.withdrawTypeSection {
+    margin-top: 60rpx;
+}
+.sectionTitle {
+    font-size: 28rpx;
+    color: #333;
+    font-weight: bold;
+    margin-bottom: 24rpx;
+}
+.typeOptionList {
+    display: flex;
+    flex-direction: row;
+    gap: 24rpx;
+}
+.typeOption {
+    flex: 1;
+    height: 120rpx;
+    background: #fff;
+    border: 2rpx solid #e0e0e0;
+    border-radius: 12rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.typeOption.active {
+    border-color: #FFE50C;
+    background: #FFFBE6;
+}
+.typeText {
+    font-size: 28rpx;
+    color: #333;
+}
+.typeOption.active .typeText {
+    color: #000;
+    font-weight: bold;
+}
+
+/* 表单区域 */
+.formSection {
+    margin-top: 40rpx;
+    background: #fff;
+    border-radius: 12rpx;
+    padding: 0 24rpx;
+}
+.formItem {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 100rpx;
+    border-bottom: 1rpx solid #f0f0f0;
+}
+.formItem:last-child {
+    border-bottom: none;
+}
+.formLabel {
+    font-size: 28rpx;
+    color: #333;
+    width: 160rpx;
+    flex-shrink: 0;
+}
+.formInput {
+    flex: 1;
+    font-size: 28rpx;
+    color: #333;
+    height: 60rpx;
+}
+.placeholder {
+    color: #bbb;
+    font-size: 28rpx;
+}
+
+/* 上传区域 */
+.uploadSection {
+    padding: 24rpx 0;
+}
+.uploadBox {
+    margin-top: 24rpx;
+    width: 300rpx;
+    height: 300rpx;
+    background: #f5f5f5;
+    border: 2rpx dashed #ccc;
+    border-radius: 12rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.uploadPlaceholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+.uploadIcon {
+    font-size: 60rpx;
+    color: #999;
+    line-height: 1;
+}
+.uploadText {
+    font-size: 24rpx;
+    color: #999;
+    margin-top: 12rpx;
+}
+.uploadImage {
+    width: 280rpx;
+    height: 280rpx;
+}

pages/withdraw/withdraw.vue

@@ -9,9 +9,9 @@
 				<text class="title1">收益提现</text>
 			</view>
 			<!--#endif-->
-			<text class="title2" @click="navigateTo('/pages/withdrawalRecord/withdrawalRecord')">提现记录</text>
+<!--			<text class="title2" @click="navigateTo('/pages/withdrawalRecord/withdrawalRecord')">提现记录</text>-->
 		</view>
-		<view class="flex-col justify-center" :style="{marginTop:'150rpx'}">
+		<view class="flex-col justify-center" :style="{marginTop:'100rpx'}">
 			<view class="flex-row justify-center">
 				<text class="priceTitle">可提现金额</text>
 			</view>
@@ -19,7 +19,100 @@
 				<text class="price">{{statistics.myEarning || '0.00'}}</text>
 			</view>
 		</view>
-		<view class="flex-row justify-start ":style="{marginTop:'150rpx'}">
+
+		<!-- 提现金额输入 -->
+		<view class="amountSection">
+			<view class="sectionTitle">提现金额</view>
+			<view class="amountInputWrap">
+				<text class="amountSymbol">¥</text>
+				<input
+					class="amountInput"
+					v-model="form.amount"
+					type="digit"
+					placeholder="请输入提现金额"
+					placeholder-class="placeholder"
+				/>
+			</view>
+			<view class="amountTip">
+				<text>最小提现金额 1 元</text>
+				<text class="allAmount" @click="form.amount = statistics.myEarning">全部提现</text>
+			</view>
+		</view>
+
+		<!-- 提现方式选择 -->
+		<view class="withdrawTypeSection">
+			<view class="sectionTitle">选择提现方式</view>
+			<view class="typeOptionList">
+				<view
+					class="typeOption"
+					:class="{ active: form.channel === '4' }"
+					@click="selectChannel('4')"
+				>
+					<text class="typeText">银行卡</text>
+				</view>
+				<view
+					class="typeOption"
+					:class="{ active: form.channel === '2' }"
+					@click="selectChannel('2')"
+				>
+					<text class="typeText">微信</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 银行卡表单 -->
+		<view v-if="form.channel === '4'" class="formSection">
+			<view class="formItem">
+				<text class="formLabel">姓名</text>
+				<input
+					class="formInput"
+					v-model="form.realName"
+					placeholder="请输入真实姓名"
+					placeholder-class="placeholder"
+				/>
+			</view>
+			<view class="formItem">
+				<text class="formLabel">身份证号</text>
+				<input
+					class="formInput"
+					v-model="form.idCard"
+					placeholder="请输入身份证号"
+					placeholder-class="placeholder"
+					maxlength="18"
+				/>
+			</view>
+			<view class="formItem">
+				<text class="formLabel">银行卡号</text>
+				<input
+					class="formInput"
+					v-model="form.bankCardNumber"
+					placeholder="请输入银行卡号"
+					placeholder-class="placeholder"
+					type="number"
+				/>
+			</view>
+		</view>
+
+		<!-- 微信收款码上传 -->
+		<view v-if="form.channel === '2'" class="formSection">
+			<view class="uploadSection">
+				<text class="formLabel">微信收款码</text>
+				<view class="uploadBox" @click="uploadWxQrCode">
+					<image
+						v-if="form.wxQrCode"
+						class="uploadImage"
+						:src="form.wxQrCode"
+						mode="aspectFit"
+					/>
+					<view v-else class="uploadPlaceholder">
+						<text class="uploadIcon">+</text>
+						<text class="uploadText">点击上传收款码</text>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="flex-row justify-start ":style="{marginTop:'40rpx'}">
 			<checkbox-group @change="checkboxChange">
 				<checkbox :checked="checked"  color="#000000" :style="{'transform':'scale(0.7)'}"/>
 				<text class="read">请阅读并同意</text>
@@ -47,7 +140,14 @@
 			return {
 				checked:false,
 				statistics:{},
-
+				form: {
+					channel: '4',
+					amount: '',
+					realName: '',
+					idCard: '',
+					bankCardNumber: '',
+					wxQrCode: '',
+				}
 			}
 		},
 		onShow() {
@@ -62,6 +162,47 @@
 				})
 			},
 
+			selectChannel(channel) {
+				this.form.channel = channel
+				if (channel === '4') {
+					this.form.wxQrCode = ''
+				} else if (channel === '2') {
+					this.form.realName = ''
+					this.form.idCard = ''
+					this.form.bankCardNumber = ''
+				}
+			},
+
+			uploadWxQrCode() {
+				let that = this
+				uni.chooseImage({
+					count: 1,
+					sizeType: ['compressed'],
+					sourceType: ['album', 'camera'],
+					success: function (res) {
+						let tempUrl = res.tempFiles[0].path
+						uni.uploadFile({
+							url: that.$baseUrl + '/resource/oss/upload',
+							filePath: tempUrl,
+							name: 'file',
+							header: {
+								'Authorization': 'Bearer ' + uni.getStorageSync('accessToken'),
+							},
+							success: (uploadFileRes) => {
+								let res = JSON.parse(uploadFileRes.data)
+								that.form.wxQrCode = res.data.url.replace(/^http:/, "https:")
+							},
+							fail: (err) => {
+								uni.showToast({
+									icon: 'none',
+									title: '上传失败，请重试'
+								})
+							}
+						})
+					}
+				})
+			},
+
 			apply(){
 				if (!this.checked){
 					uni.showToast({
@@ -71,14 +212,67 @@
 					});
 					return
 				}
-				this.$api.service.apply({
-					amount:null
-				}).then(res=>{
+
+				const amount = parseFloat(this.form.amount)
+				if (!this.form.amount || isNaN(amount) || amount <= 0) {
+					uni.showToast({ icon: 'none', title: '请输入有效的提现金额' })
+					return
+				}
+				if (amount > parseFloat(this.statistics.myEarning || 0)) {
+					uni.showToast({ icon: 'none', title: '提现金额不能超过可提现金额' })
+					return
+				}
+
+				if (this.form.channel === '4') {
+					if (!this.form.realName.trim()) {
+						uni.showToast({ icon: 'none', title: '请输入姓名' })
+						return
+					}
+					if (!this.form.idCard.trim()) {
+						uni.showToast({ icon: 'none', title: '请输入身份证号' })
+						return
+					}
+					if (!this.form.bankCardNumber.trim()) {
+						uni.showToast({ icon: 'none', title: '请输入银行卡号' })
+						return
+					}
+				} else if (this.form.channel === '2') {
+					if (!this.form.wxQrCode) {
+						uni.showToast({ icon: 'none', title: '请上传微信收款码' })
+						return
+					}
+				}
+
+				let params = {
+					amount: amount,
+					channel: this.form.channel,
+				}
+
+				if (this.form.channel === '4') {
+					params.realName = this.form.realName.trim()
+					params.idCard = this.form.idCard.trim()
+					params.bankCardNumber = this.form.bankCardNumber.trim()
+				} else if (this.form.channel === '2') {
+					params.wxQrCode = this.form.wxQrCode
+				}
+
+				this.$api.service.apply(params).then(res=>{
 					uni.showToast({
 						icon: 'success',
-						duration: 3000,
+						duration: 2000,
 						title: '申请成功'
 					});
+					// 清空表单
+					this.form.amount = ''
+					this.form.realName = ''
+					this.form.idCard = ''
+					this.form.bankCardNumber = ''
+					this.form.wxQrCode = ''
+					setTimeout(() => {
+						uni.navigateTo({
+							url: '/pages/withdrawalRecord/withdrawalRecord'
+						})
+					}, 1500)
 				})
 			},