bjhedasx/webcode/uni-app/pages/expertCenter/withdraw.vue

<template>
	<!-- 20221104 -->
	<view class="distribution-withdraw-page">
		<!-- 页面内容 -->
		<view class="page-content">
			<!-- 提现表单 -->
			<view class="padding-top-30 bg-ff">
				<!-- 提现金额 -->
				<view class="padding-lr-30">
					<view class="flex align-center justify-between">
						<view class="text-32 text-33">提现金额</view>
						<view class="text-30 text-98" @click="go('/pages/expertCenter/withdrawList')">提现记录</view>
					</view>

					<view class="margin-top-50 padding-bottom-15 flex align-center border-bottom-ed">
						<view class="text-60">¥</view>
						<input class="flex-one margin-left-15 line-height-70 text-50" type="digit"
							v-model="withdrawMoney" placeholder="请输入金额" placeholder-class="text-50 text-e6">
					</view>

					<view class="line-height-100 flex align-center justify-between">
						<view class="flex align-center">
							<view class="text-28 text-4d">可提现佣金</view>
							<view class="margin-left-10 text-30">￥{{commission}}</view>
						</view>
						<view class="width-150 line-height-50 radius-25 bg-2f9 text-center text-24 text-ff"
							@click="all">全部提现</view>
					</view>
				</view>

				<!-- 提现方式 -->
				<view class="border-top-ed padding-bottom-20">
					<view class="line-height-100 padding-lr-30 flex align-center justify-between">
						<view class="flex align-center">
							<view class="text-32 text-33">提现到</view>
							<view class="margin-left-15 text-24" style="color: #F10101;" v-if="withdrawCost != 0">
								需支付手续费{{withdrawCost}}%
							</view>
						</view>
					</view>
					<!-- <ty-block-withdraw-type :type="type" :selected.sync="withdrawType">
					</ty-block-withdraw-type> -->
					<view class="line-height-100 padding-lr-30 flex align-center justify-between">
						<view class="flex align-center">
							<text class="icon tyIcon-weixinzhifu text-34 text-wechat"></text>
							<view class="margin-left-15 text-33 text-28">微信零钱</view>
						</view>
						<view class="tyIcon-xuanzhong1 text-40 text-2f9"></view>
					</view>
					<view class="line-height-100 flex padding-lr-30">
						<view class="text-28 text-33">姓名</view>
						<view class="flex-one margin-left-30">
							<input placeholder="请输入微信实名认证姓名" placeholder-class="text-99"
								class="text-28 text-right line-height-100 width-100p" v-model="userName" />
						</view>
					</view>
				</view>
			</view>

			<!-- 提现按钮 -->
			<view class="margin-top-50 margin-lr-30 line-height-90 radius-45 bg-2f9 text-center text-32 text-ff"
				@click="confirm">
				提现
			</view>

			<!-- 提现说明 -->
			<view class="margin-top-50 padding-lr-30 text-98">
				<view class="flex">
					<text class="tyIcon-zhuyidapx text-32"></text>
					<text class="margin-left-10 text-24">温馨提示</text>
				</view>
				<view class="margin-top-10 line-30">
					<text>{{withdrawNotice}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import distribution from "./api/distribution.js"
	export default {
		data() {
			return {
				// 我的可提现佣金
				commission: '',
				// 提现金额
				withdrawMoney: '',
				// 1--微信 2--支付宝
				withdrawType: 1,
				// 提现手续费
				withdrawCost: '',
				// 提现说明
				withdrawNotice: '',
				// 提现方式组件--提现方式
				type: ['weixin'],

				// 是否可以点击提现
				canClick: true,
				userName: '', //实名
			}
		},

		onShow() {
			// 获取我的佣金
			this.getMyCommission()
			// 是否绑定支付宝
			// this.isUserBindAliPay()
		},

		onReady() {
			// 获取提现配置
			this.getWithdrawInfo()
		},


		methods: {

			/**
			 * 获取提现配置
			 * @date 2022-11-04
			 */
			getWithdrawInfo() {
				distribution.getWithdrawInfo().then(res => {
					// 提现手续费
					this.withdrawCost = res.data.config.withdraw_cost
					// 提现说明
					this.withdrawNotice = res.data.config.withdraw_notice
				})
			},

			/**
			 * 获取我的佣金
			 * 2022-11-04
			 */
			getMyCommission() {
				distribution.getMyCommission().then(res => {
					if (res.code == 0) {
						// 可提现佣金
						this.commission = res.data.my.commission
					}
				})
			},

			/**
			 * 点击全部提现按钮
			 * @date 2022-11-04
			 */
			all() {
				this.withdrawMoney = this.commission
			},

			/**
			 * 点击提现
			 * @date 2022-11-04
			 */
			confirm() {
				if (!this.withdrawMoney) {
					this.cn.toast('请输入正确的提现金额')
					return false
				}

				if (!this.canClick) {
					return false
				}

				// 变更状态为不可点击
				this.canClick = false

				// 提交提现订单
				distribution.insertWithdrawOrder(this.withdrawMoney, this.withdrawType).then(res => {
					// 清空提现金额
					this.withdrawMoney = ''
					// 变更状态为可点击
					this.canClick = true

					if (res.code === 0) {
						this.cn.alert(res.msg).then(() => {
							// 跳转到提现列表页
							uni.redirectTo({
								url: '/pages/distribution/my/withdrawList'
							})
						})
					} else if (res.code == 2102) {
						// 跳转绑定支付宝页面
						uni.navigateTo({
							url: '/pages/user/config/alipay'
						})
					} else if (res.code == 2101) {
						// 跳转微信授权页面
						uni.navigateTo({
							url: '/pages/user/config/account'
						})
					}
				})
			}
		}
	}
</script>

<style scoped>

</style>