frontend-app/pages/rwa_package/account/withdraw.vue

<template>
	<view class="content">
		<TopSafe bgColor="rgba(0,0,0,0)"></TopSafe>
		<Header :title="topText" bgColor="rgba(0,0,0,0)" />
		<view class="setting-view">
			<view class="top-view">
				<view class="top-left">
					<text class="text-bold text-52 text-white">
						{{ amount }}
					</text>
					<text class="text-20 text-white" style="font-weight: 100;">可用余额</text>
				</view>
				<view class="top-right">
					<text class="text-bold text-36 text-white">
						{{ noAmount }}
					</text>
					<text class="text-20 text-white" style="font-weight: 100;">不可用余额</text>
				</view>
			</view>
			<view class="mid-view">
				<text class="text-gray text-32">{{ type == 0 ? '提现' : '充值' }}方式</text>

				<!-- #ifdef MP-WEIXIN -->
				<view class="item-view" @click="onSelect('0')" style="border-bottom: 0;">
					<image src="https://static.tbmall.xin/static/new/wx.png"></image>
					<text class="text-gray text-32 " style="margin-left:20rpx;">微信</text>
					<view class="right-icon-view" v-if="type == 1">
						<u-radio-group v-model="curSelect">
							<u-radio name="0" activeColor="#7934F6"></u-radio>
						</u-radio-group>
					</view>
					<view class="right-icon-view" v-else>
						<text class="text-32 text-gray" style="margin-right:12rpx"
							v-if="selectVal && curSelect == '0'">{{ selectVal.name + '/' + selectVal.account }}</text>
						<u-icon size="14" name="arrow-right" color="#333"></u-icon>
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<view class="item-view" @click="onSelect('0')" v-if="!isWeb || type != 0">
					<image src="https://static.tbmall.xin/static/new/wx.png"></image>
					<text class="text-gray text-32 " style="margin-left:20rpx;">微信</text>
					<view class="right-icon-view" v-if="type == 1">
						<u-radio-group v-model="curSelect">
							<u-radio name="0" activeColor="#7934F6"></u-radio>
						</u-radio-group>
					</view>
					<view class="right-icon-view" v-else>
						<text class="text-32 text-gray" style="margin-right:12rpx"
							v-if="selectVal && curSelect == '0'">{{ selectVal.name + '/' + selectVal.account }}</text>
						<u-icon size="14" name="arrow-right" color="#333"></u-icon>
					</view>
				</view>
				<view class="item-view" @click="onSelect('1')" style="border-width: 0;">
					<image src="https://static.tbmall.xin/static/new/zfb.png"></image>
					<text class="text-gray text-32 " style="margin-left:20rpx;">支付宝</text>
					<view class="right-icon-view" v-if="type == 1">
						<u-radio-group v-model="curSelect">
							<u-radio name="1" activeColor="#7934F6"></u-radio>
						</u-radio-group>
					</view>
					<view class="right-icon-view" v-else>
						<text class="text-32 text-gray" style="margin-right:12rpx"
							v-if="selectVal && curSelect == '1'">{{ selectVal.name + '/' + selectVal.account }}</text>
						<u-icon size="14" name="arrow-right" color="#333"></u-icon>
					</view>
				</view>
				<!-- #endif -->
			</view>
			<view class="mid-view">
				<view class="flex-r-lr">
					<text class="text-gray text-32">{{ type == 0 ? '提现' : '充值' }}金额</text>
					<text class="text-fu1 text-28" v-if="type == 0" style="font-weight:400">每日仅限提现1次</text>
				</view>

				<view class="input-view">
					<text class="text-52 text-zu text-bold">￥</text>
					<input style="background: #fff;margin-top:10rpx;width: 400rpx;"
						:placeholder="type == 0 ? '请输入提现金额(0.3-2000)' : '输入充值金额'"
						placeholder-style="color:#999;font-weight:400" @input="onInput" border="0" v-model="money"
						:customStyle="inputCss"></input>
				</view>
			</view>


			<view class="mid-view">
				<view class="flex-r-lr" style="border-bottom: 2rpx solid #F6F6F6; padding-bottom: 20rpx;">
					<text class="text-gray text-32 text-bold">提现说明</text>
				</view>
				<view class="instructions-container">
					<view class="instruction-item">
						<view class="instruction-title">
							<view class="title-dot"></view>
							<text>一、可提现额度说明</text>
						</view>
						<view class="instruction-content">
							<view class="sub-item">1. 单笔提现最低限额为<text class="text-highlight">0.3元</text>，单笔最高限额为<text
									class="text-highlight">200元</text>；</view>
							<view class="sub-item">2. 单个账户单日累计提现最高限额为<text class="text-highlight">2000元</text>。</view>
						</view>
					</view>

					<view class="instruction-item">
						<view class="instruction-title">
							<view class="title-dot"></view>
							<text>二、提现次数限制</text>
						</view>
						<view class="instruction-content">
							<text>每个自然日，单个用户账户最多可发起<text class="text-highlight">10次</text>提现申请；</text>
						</view>
					</view>

					<view class="instruction-item">
						<view class="instruction-title">
							<view class="title-dot"></view>
							<text>三、提现受理与处理时间</text>
						</view>
						<view class="instruction-content">
							<text>本平台提现功能支持<text class="text-highlight">7×24小时</text>全天候提交申请，无工作日 /
								节假日限制，提交时间以系统记录为准。</text>
						</view>
					</view>

					<view class="instruction-item">
						<view class="instruction-title">
							<view class="title-dot"></view>
							<text>四、到账时间说明</text>
						</view>
						<view class="instruction-content">
							<text>1. 提现申请提交后，资金将在<text
									class="text-highlight">3～5天</text>内直接划转至您绑定的账户；（正常情况下资金实时到账，您理解并同意如遇支付渠道维护、网络延迟或系统异常，到账时间可能顺延）</text>
						</view>
					</view>

					<view class="instruction-item">
						<view class="instruction-title">
							<view class="title-dot"></view>
							<text>五、提现渠道说明</text>
						</view>
						<view class="instruction-content">
							<text>仅支持提现至绑定的零钱账户，暂不支持提现至银行卡或其他账户。</text>
						</view>
					</view>

					<view class="instruction-item">
						<view class="instruction-title">
							<view class="title-dot"></view>
							<text>六、提现手续费说明</text>
						</view>
						<view class="instruction-content">
							<text>本平台每笔提现将按提现金额的<text class="text-highlight">0.6%</text>收取手续费，手续费直接从提现金额中扣除，实际到账金额 =
								申请提现金额 - 提现手续费。</text>
						</view>
					</view>

					<view class="instruction-item">
						<view class="instruction-title">
							<view class="title-dot"></view>
							<text>七、提现失败说明</text>
						</view>
						<view class="instruction-content">
							<view class="sub-item" style="margin-bottom: 8rpx; color: #333; font-weight: 500;">
								出现以下情形时，提现将失败，资金将原路退回至您的账户余额：</view>
							<view class="sub-item">1. 绑定的收款账户信息有误、账户已注销或处于异常状态；</view>
							<view class="sub-item">2. 提现金额未达到最低限额，或超出当日 / 当月累计提现额度；</view>
							<view class="sub-item">3. 账户未完成实名认证，或存在异常交易、违规操作被系统限制提现。</view>
						</view>
					</view>

					<view class="instruction-item">
						<view class="instruction-title">
							<view class="title-dot"></view>
							<text>八、其他注意事项</text>
						</view>
						<view class="instruction-content">
							<view class="sub-item">1. 发起提现前请确保账户已完成实名认证，未实名账户无法发起提现；</view>
							<view class="sub-item">2. 请绑定本人实名的微信零钱 / 银行卡账户，否则可能导致提现失败或资金风险；</view>
							<view class="sub-item">3. 如有疑问，可通过小程序内「联系客服」入口咨询在线客服。</view>
						</view>
					</view>
				</view>
			</view>


			<view class="zhu-view" v-if="selectVal">
				<u-icon size="12" style="margin-top:5rpx;margin-right:12rpx" name="error-circle"
					color="#7934F6"></u-icon>
				<text class="text-24 text-zi" style="font-weight: 400;">通过支付宝或微信提现时，将由微信官方收取0.6%的费用，本平台不收取任何费用。</text>
			</view>
		</view>
		<view class="bottom-btn">
			<MyBtn :text="bottomText" @ok="onAdd"></MyBtn>
		</view>
		<SelectItem :itemData="dataList" @close="onClose" @ok="onOk" @add="onAddBack" :type="curSelect"
			:itemShow="selectShow"></SelectItem>
		<CodeItem @ti="onTi" @close="onClose" :codeShow="codeShow" :phone="userInfo ? userInfo.mobile : ''"></CodeItem>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
import { getWithdraw, sendWithdraw } from '@/api/common.js';
import { getUserInfo, updateName, deleteAccount } from '@/api/auth.js';
import Header from '@/components/common/header.vue';
import TopSafe from '@/components/common/top-safe.nvue'
import MyBtn from '@/components/common/my-btn.vue'
import func from '@/utils/func.js';
import SelectItem from './components/select-item.vue'
import CodeItem from './components/code-item.vue'
import { uniPlatform } from '@/components/common/global.js'
import { recharge, getAcctBalance } from '@/api/finance.js';
import { appWxpayFun, zfbPayFun } from '@/utils/payUtils.js'
// #ifdef APP-PLUS
import { requestMerchantTransfer } from "@/uni_modules/uni-requestMerchantTransfer"
// #endif 

export default {
	components: { Header, TopSafe, MyBtn, SelectItem, CodeItem },
	data() {
		return {
			isWeb: false,
			topText: '',
			type: 0,
			amount: '',
			money: '',
			noAmount: '',
			account: '',
			bottomText: '',
			curSelect: '0',
			selectShow: false,
			codeShow: false,
			name: '',
			inputCss: {
				"height": '80rpx',
				"background": "#F3F3F3FF",
				"border-radius": "30rpx",
				"border": "0rpx",
				"padding-left": "12rpx",
				"width": "320rpx"
			},
			dataList: [

			],
			selectVal: null,
			userInfo: null,
		};
	},
	onShow() {
		if (uniPlatform == 'web') {
			this.isWeb = true;
		} else {
			this.isWeb = false;
		}
	},
	onLoad(option) {
		if (option && option.type) {
			this.type = Number(option.type);
			this.init();
		}
	},
	methods: {
		userinfo() {
			getUserInfo().then(res => {
				if (res.bizcode == 100) {
					this.userInfo = res.data;
				}
			})
		},
		onInput(e) {
			this.$nextTick(() => {
				this.money = func.checkInputPrice(e.detail.value);
			})
		},
		onOk(val) {
			this.selectVal = this.dataList.filter(i => i.id == val)[0];
			this.onClose();
		},
		onAddBack() {
			this.onClose();
			uni.navigateTo({
				url: '/pages/rwa_package/account/index?id=' + this.curSelect
			})
		},
		onClose() {
			this.selectShow = false;
			this.codeShow = false;
		},
		getList(val) {
			let params = {
				platform: this.curSelect == '0' ? 2 : 1
			}
			getWithdraw(params).then(res => {
				if (res.bizcode === 100) {
					this.dataList = res.data;
					this.dataList.forEach(item => {
						item.name = item.accountName;
						item.account = item.accountNumber;
					})
					this.selectShow = true;
				} else {
					this.$refs.uToastRef.show({
						type: 'error',
						message: res.msg,
					});
					return null;
				}
			})
		},
		onSelect(val) {
			this.curSelect = val;
			if (this.type == 0) {
				this.selectVal = null;
				this.getList();
			}
		},
		async getAcctBalance() {
			this.balanceLoading = true;
			const resp = await getAcctBalance();
			let data = [];
			if (resp && resp.bizcode === 100) {
				data = resp.data || [];
				data.forEach(item => {
					if ("balance" == item.categoty) {
						this.noAmount = item.lockAmount;
						this.amount = item.curAmount;
					}
				})
			}
			this.balanceList = data;
			this.balanceLoading = false;
		},
		init() {
			if (this.type == 0) {
				this.topText = '现金余额提现';
				this.bottomText = '提现';
			} else if (this.type == 1) {
				this.topText = '现金余额充值';
				this.bottomText = '充值';
			}
			this.userinfo();
			this.getAcctBalance();
		},
		onAdd() {
			if (this.type == 0) {
				if (!this.money) {
					this.$refs.uToastRef.show({
						type: "error",
						message: "请输入金额",
					});
					return;
				}
				if (Number(this.money) < 0.3) {
					this.$refs.uToastRef.show({
						type: "error",
						message: "提现金额不能低于0.3元",
					});
					return;
				}
				if (Number(this.money) > 2000) {
					this.$refs.uToastRef.show({
						type: "error",
						message: "提现金额不能大于2000元",
					});
					return;
				}
				if (Number(this.money) > Number(this.amount)) {
					this.$refs.uToastRef.show({
						type: "error",
						message: "输入金额大于可用余额",
					});
					return;
				}
				if (this.type == 0 && !this.selectVal) {
					this.$refs.uToastRef.show({
						type: "error",
						message: "请选择提现方式",
					});
					return;
				}
				console.log('onAdd', this.curSelect)
				this.codeShow = true;
			} else {
				if (!this.money) {
					this.$refs.uToastRef.show({
						type: "error",
						message: "请输入金额",
					});
					return;
				}
				let params = {
					amount: this.money,
					category: 'balance',
					payway: this.curSelect == '0' ? 'wechat' : 'alipay'
				}
				recharge(params).then(result => {
					if (result && result.bizcode === 100) {
						const item = result.data;
						if (item.wechat && Object.keys(item.wechat).length !== 0) {
							this.appWxpay(item.wechat, item.orderId, item.orderNum);
						} else if (item.alipay && Object.keys(item.alipay).length !== 0 && item.alipay) {
							this.zfbPay(item.alipay, item.orderId, item.orderNum);
						} else {
							this.$refs.uToastRef.show({
								type: 'error',
								message: "充值失败",
							});

						}
					}
				})
			}

		},
		async appWxpay(alipay, orderId, orderNum) {
			try {
				const result = await appWxpayFun(alipay, orderId, orderNum);
				console.log('支付成功', result);
				// 处理支付成功后的逻辑，如更新订单状态等
			} catch (error) {
				console.error('支付失败', error);
				// 处理支付失败后的逻辑，如提示用户等
			}
		},
		// 支付宝支付
		async zfbPay(alipay, orderId, orderNum) {
			try {
				const result = await zfbPayFun(alipay, orderId, orderNum);
				console.log('支付成功', result);
				// 处理支付成功后的逻辑，如更新订单状态等
			} catch (error) {
				console.error('支付失败', error);
				// 处理支付失败后的逻辑，如提示用户等
			}

		},
		onTi(code) {
			let params = {
				verificationCode: code,
				bindId: this.selectVal.id,
				amount: Number(this.money),
				accountType: this.curSelect == '0' ? 1 : 2
			}
			let _this = this;
			sendWithdraw(params).then(res => {
				console.log('absc', res)
				if (res && res.bizcode == 100) {
					console.log('absc1111111111', res, this.curSelect)
					// data = resp.data || [];
					if (this.curSelect == '1') {

						this.qing();
						if (res.data.alResponse.msg == 'Success') {
							uni.navigateTo({
								url: '/pages/rwa_package/account/success?money=' + params.amount
							})
						} else {
							setTimeout(() => {
								_this.$refs.uToastRef.show({
									type: 'error',
									message: res.data.alResponse.subMsg,
								});
							}, 400)

						}

					} else {
						console.log('开始提现', res, this.curSelect)
						// #ifdef APP-PLUS
						requestMerchantTransfer({
							// uni.requestMerchantTransfer({
							"mchId": "1725999656",
							"appId": "wx7a5902cd556d9396",
							"package": res.data.wxResponse.packageInfo,
							success: (res) => {
								this.qing();
								uni.navigateTo({
									url: '/pages/rwa_package/account/success?money=' + params.amount
								})

							},
							fail: (res) => {
								_this.$refs.uToastRef.show({
									type: 'error',
									message: '提现失败',
								});
							},

						})
						// #endif
						// #ifdef MP-WEIXIN
						wx.requestMerchantTransfer({
							"mchId": "1725999656",
							"appId": "wx7a5902cd556d9396",
							"package": res.data.wxResponse.packageInfo,
							success: (res) => {
								this.qing();
								uni.navigateTo({
									url: '/pages/rwa_package/account/success?money=' + params.amount
								})

							},
							fail: (res) => {
								_this.$refs.uToastRef.show({
									type: 'error',
									message: '提现失败',
								});
							},

						})
						// #endif
					}

				}

			})

		},
		qing() {
			this.money = '';
			this.curSelect = '0';
			this.selectVal = null;
			this.onClose();
		}
	}
}
</script>

<style lang="scss" scoped>
.bottom-btn {
	width: 100%;
	margin-bottom: 92rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 32rpx;
	box-sizing: border-box;
	position: relative;

}

.setting-view {
	width: 100%;
	height: calc(100% - 88rpx - 92rpx - 88rpx - var(--status-bar-height));
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-y: auto;
	padding: 0 32rpx;
	box-sizing: border-box;
	position: relative;

	.top-view {
		width: 100%;
		margin-top: 40rpx;
		height: 188rpx;
		min-height: 188rpx;
		display: flex;
		background: linear-gradient(270deg, #B164FB 0%, #7934F6 100%);
		padding: 36rpx 32rpx;
		box-sizing: border-box;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-radius: 16rpx;

		.top-left {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 108rpx;


		}

		.top-right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-end;
			height: 108rpx;
		}
	}

	.zhu-view {
		width: 100%;
		display: flex;
		margin-top: 32rpx;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 16rpx;
		box-sizing: border-box;
		background: rgba(121, 52, 246, 0.05);
		border-radius: 8rpx;
	}

	.mid-view {
		width: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		padding-bottom: 0;
		margin-top: 24rpx;

		.item-view {
			width: 100%;
			height: 110rpx;
			min-height: 110rpx;
			display: flex;
			flex-direction: row;
			position: relative;
			align-items: center;
			border-bottom: 2rpx solid #ececec;

			.right-icon-view {
				position: absolute;
				right: 0;
				display: flex;


			}

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.input-view {
			width: 100%;
			height: 100rpx;
			border-radius: 20rpx;
			margin: 32rpx 0;
			display: flex;
			flex-direction: row;
			align-items: center;

		}

		.instructions-container {
			margin-top: 16rpx;
			padding-bottom: 32rpx;

			.instruction-item {
				margin-top: 28rpx;

				.instruction-title {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-bottom: 12rpx;

					.title-dot {
						width: 6rpx;
						height: 24rpx;
						background: linear-gradient(180deg, #B164FB 0%, #7934F6 100%);
						border-radius: 4rpx;
						margin-right: 12rpx;
					}

					text {
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
					}
				}

				.instruction-content {
					font-size: 24rpx;
					color: #666666;
					line-height: 1.6;
					padding-left: 18rpx;

					.text-highlight {
						color: #7934F6;
						font-weight: bold;
						margin: 0 4rpx;
					}

					.sub-item {
						margin-bottom: 8rpx;

						&:last-child {
							margin-bottom: 0;
						}
					}
				}
			}
		}
	}


}
</style>