youngee_b_api/pages/mycenter/myincome/applywithdraw.vue

<template>
	<view style="position: relative;">
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view style="margin-top: 160rpx;"></view>
		<view class="show-form">
			<view class="show-form-cell">
				<view class="show-form-cell-left">
					<p>到账方式</p>
				</view>
				<view style="display: flex;justify-content: center;">
					<radio-group @change="chan">
						<label v-for="item in radioGroup" :key="item">
							<view style="display: inline;margin: 0 20rpx;font-size: 32rpx;">
								<radio :value="item" :checked="item==activeRadio" color="#fdd544"
									style="transform:scale(0.7)" />{{item}}
							</view>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="show-form-cell" v-if="activeRadio == '支付宝'">
				<view class="show-form-cell-left">
					<p>支付宝号</p>
				</view>
				<view style="display: flex;justify-content: space-between;width: 550rpx;">
					<view>
						<p>{{formData.alipay_number}}</p>
					</view>
					<view style="display: flex;align-items: center;justify-content: center;"
						@click="toModifyZhifubao()">
						<p>前往修改/绑定</p>
						<image class="show-body1-icon" :src="picture.icon_right"></image>
					</view>
				</view>
			</view>
			<view class="show-form-cell" v-if="activeRadio == '银行卡'">
				<view class="show-form-cell-left">
					<p>银行卡号</p>
				</view>
				<view style="display: flex;justify-content: space-between;width: 550rpx;">
					<view>
						<p>{{formData.bank_card_number}}</p>
					</view>
					<view style="display: flex;align-items: center;justify-content: center;" @click="toModifyBank()">
						<p>前往修改/绑定</p>
						<image class="show-body1-icon" :src="picture.icon_right"></image>
					</view>
				</view>
			</view>
			<view class="show-form-cell">
				<view class="show-form-cell-left">
					<p>提现金额</p>
				</view>
				<p>{{showTotalAmount}}</p>
			</view>
			<view class="show-form-cell">
				<view class="show-form-cell-left">
					<p>实际金额</p>
				</view>
				<p>{{showRealAmount}}</p>
			</view>
		</view>
		<view class="tips">
			<p>根据国家法规，平台需代扣代缴5%个人所得税</p>
			<p>预计5个工作日到账，法定节假日顺延</p>
		</view>
		<view class="withdraw-btn">
			<button type="default" class="btn1" @click="withdraw()">
				确认提现</button>
		</view>
		<view style="margin: 30rpx;padding: 30rpx 10rpx;background-color: #eaeaea;border-radius: 5rpx;">
			<p style="color: #878994;">样叽严格按照《用户协议》及《隐私政策;</p>
			<p style="color: #878994;">用户输入的银行卡号和支付宝账号信息仅在用户提现时使用。</p>
		</view>
	</view>
</template>

<script>
	import mvBar from "@/components/mys_navBar/mysNavBar";
	import {
		money
	} from '@/components/utils.js';
	export default {
		components: {
			mvBar,
		},
		data() {
			return {
				picture: {
					icon_person: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/youngee/talent_upload/icon-person.png',
					icon_location: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/youngee/talent_upload/icon-location.png',
					icon_account: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/youngee/talent_upload/icon-account.png',
					icon_rmb: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/youngee/talent_upload/icon-rmb.png',
					icon_message: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/youngee/talent_upload/icon-message.png',
					icon_right: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent_upload/icon-arrow-right.png',
					defaultavatarUrl: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/logoxin01.png',
				},
				bankType: 1,
				taskIdList: [],
				totalAmount: 0,
				realAmount: 0,
				showRealAmount: 0,
				showTotalAmount: 0,
				activeRadio: "支付宝",
				radioGroup: ['支付宝', '银行卡'],
				formData: {},
				mysNavConfig: {
					/* 开启单页显示首页图标 */
					isHome: true,
					/* 固定导航  */
					navFixed: true,
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "申请提现",
						color: "",
						fontSize: "32rpx", // px upx rpx
						fontWeight: "normal", // 100 - 700
					},
					btnType: "type2",
					onLeftClick: "",
					/* type2 按钮 */
					type2Config: {
						// 左图标
						leftPath: "/static/img/png2.png",
						// 右图标
						rightPath: "/static/img/png4.png",
						// 圆角
						radius: "40rpx",
					},
				},
			}
		},
		onLoad(options) {
			let data = options.textObj.replace(/""/g, "");
			data = JSON.parse(decodeURIComponent(data))
			this.taskIdList = data.taskIdList
			this.totalAmount = data.totalAmount
			this.realAmount = data.totalAmount * 0.95
			this.showTotalAmount = money(this.totalAmount)
			this.showRealAmount = money(this.realAmount)
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			chan(e) {
				if (e.detail.value == "支付宝")
					this.bankType = 1
				else
					this.bankType = 2
				this.activeRadio = e.detail.value;
				console.log(this.activeRadio);
			},
			// 默认信息表，获取平台logo
			getInfo() {
				this.$https.get('/youngee/c/g/get-info-tables')
					.then(res => {
						this.array1 = res.data.data.Bank
					})
				this.getBankInfo()
			},
			getBankInfo() {
				this.$https.get('/youngee/c/t/g/get-talent-bank-info')
					.then(res => {
						console.log(res)
						if (res.data.data != null) {
							this.formData = res.data.data
						}
					})
			},
			withdraw() {
				this.$https.post('/youngee/c/t/p/withdraw', {
						task_id_list: this.taskIdList,
						total_amount: this.totalAmount,
						real_amount: this.realAmount,
						bank_type: this.bankType,
					})
					.then(res => {
						console.log(res)
						let pages = getCurrentPages(); // 当前页面
						let beforePage = pages[pages.length - 2]; // 上一页
						setTimeout(() => {
							uni.navigateBack({
								success: function() {
									beforePage
										.onLoad(); // 执行上一页的onLoad方法
								}
							})
							uni.navigateBack()
						})
					})
			},
			toModifyBank() {
				uni.navigateTo({
					url: '/pages/mycenter/myinformation/mybank'
				});
			},
			toModifyZhifubao() {
				uni.navigateTo({
					url: '/pages/mycenter/myinformation/myzhifubao'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	p {
		font-size: 32rpx;
	}

	.show-form {
		margin: 0 25rpx;
	}

	.show-form-cell {
		display: flex;
		margin: 30rpx 0;
	}

	.show-form-cell-left {
		width: 150rpx;
	}

	.tips {
		margin: 30rpx;
		padding: 30rpx 20rpx;
		background-color: #eaeaea;
		border-radius: 15rpx;
	}

	.tips p {
		font-size: 28rpx;
	}

	.withdraw-btn {
		display: flex;
		align-items: center;
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		height: 100rpx;
		padding-top: 2%;
	}

	.btn1 {
		width: 60%;
		background-color: #f2d22d;
		color: #000;
		border-color: #ffffff;
		border-radius: 10rpx;
		font-size: 36rpx;
		line-height: 240%;
		letter-spacing: 10rpx;
		font-weight: 500;
		height: 80%;
	}

	.show-body1-icon {
		width: 30rpx;
		height: 30rpx;
	}
</style>