jje_spread_uniapp/pages/withdraw/withdraw.vue

<template>
	<view class="page">
		<!-- #ifdef H5-->
		<uni-nav-bar  v-if="!$isWxBrowser()" :fixed="true" background-color="#FFE05C" :border="false" :statusBar="false"  left-icon="left" title="收益提现" @clickLeft="back" />
		<!-- #endif -->
		<view class="title flex-col">
			<!--#ifdef H5-->
			<view class="flex-row justify-center"  v-if="$isWxBrowser()">
				<text class="title1">收益提现</text>
			</view>
			<!--#endif-->
<!--			<text class="title2" @click="navigateTo('/pages/withdrawalRecord/withdrawalRecord')">提现记录</text>-->
		</view>
		<view class="flex-col justify-center" :style="{marginTop:'100rpx'}">
			<view class="flex-row justify-center">
				<text class="priceTitle">可提现金额</text>
			</view>
			<view class="flex-row justify-center marginTop">
				<text class="price">{{statistics.myEarning || '0.00'}}</text>
			</view>
		</view>

		<!-- 提现金额输入 -->
		<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>
				<text @click.stop="gotoTermOfService(8)" class="read">《娇骄儿拓客活动规则》</text>
			</checkbox-group>
		</view>


		<view  class="flex-row justify-center marginTop">
			<view class="withdrawButton" @click="apply">
				<text>立即提现</text>
			</view>
		</view>


		<!--#ifdef H5-->
		<liu-drag-button v-if="$isWxBrowser()" @clickBtn="back">返回</liu-drag-button>
		<!--#endif-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked:false,
				statistics:{},
				form: {
					channel: '4',
					amount: '',
					realName: '',
					idCard: '',
					bankCardNumber: '',
					wxQrCode: '',
				}
			}
		},
		onShow() {
			this.exStatistics()
		},
		methods: {

			// 查看储值协议
			gotoTermOfService(type){
				uni.navigateTo({
					url: '/pages/agreement/agreement?name='+'娇骄儿拓客活动规则'+'&type=' + 10,
				})
			},

			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({
						icon: 'none',
						duration: 3000,
						title: '请同意《娇骄儿拓客活动规则》'
					});
					return
				}

				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: 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)
				})
			},

			exStatistics(){
				this.$api.service.exStatistics().then(res=>{
					this.statistics = res.data.data
				})
			},
			navigateTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			back() {
				let pages = getCurrentPages()
				if (pages.length > 1){
					uni.navigateBack({
						delta: 1,
						fail:err=>{
							console.log(err)
						}
					})
				}else {
					uni.switchTab({
						url: '/pages/my/my'
					});
				}
			},
			checkboxChange(){
				this.checked = !this.checked
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.rpx.css';
</style>