front/pages/score/withdraw.vue

<template>
	<view class="pos-r padding-lr-sm" v-if="fetch && fetch.info" @click="Dever.close()">
		<use-tabbar :tabbar="false" />
		<view class="border-radius bg-main padding margin-top-sm">
			
			<u-popover position="right" width="200px">
				<view class="fwbd fs">{{fetch.info.name}}提现
					<view style="margin-left:5px;display: inline-block;">
						<u-icon name="question-circle"></u-icon>
					</view>
				</view>
			
				<template v-slot:content>
					<view style="color: white;">
						<u-parse :content="fetch.info.exp_tip"></u-parse>
					</view>
			
				</template>
			</u-popover>

			<text class="link cur_color" style="float:right" @click="open">修改账户</text>
			
			<!-- 金额选项 -->
			<view class="dflex money-area flex-wrap">
				<view class="item dflex-c dflex-flow-c" :class="{ active: config === index }"
					v-for="(item, index) in fetch.config" :key="index" @click="setConfig(index)">
					<view class="price">{{ item.name }}</view>
					<text class="fs-xs">{{ item.tip }}</text>
				</view>
			</view>

			<!-- 输入其他金额 -->
			<input class="w-full padding border-radius-sm bg-drak" type="number" placeholder="请输入提现数值" v-model="number" @input="setValue"
				maxlength="140"/>
			<text class="margin-left-xs tip padding-tb">余额：{{fetch.user.yue_text}}</text>
			<text class="margin-left-xs tip padding-tb">手续费：{{fetch.info.withdraw_fee}}%</text>
			<text class="margin-left-xs tip padding-tb">到账金额：{{value}}</text>

			<!-- 马上充值按钮 -->
			<view class="dflex-c w-full margin-tb" @click="act">
				<view class="dflex-c dflex-flow-c border-radius-lg padding-tb-sm fwb line-height-1 cur_bgcolor"
					style="width: 70vw;">
					<text>马上提现</text>
					<text class="fs-xxs margin-top-xs ft-dark-4">并同意积分服务协议</text>
				</view>
			</view>

			<!-- 协议提示 -->
			<view class="margin-top dflex-c" @click="Dever.location('tool/page?title=积分服务协议')">
				<text class="cur_color margin-left-xs fs-xs padding-tb">积分服务协议</text>
			</view>
		</view>

		<!-- 记录列表 -->

		<view class="record-list margin-top-sm" v-if="fetch">
			<view class="record-title fs fwbd ft-black margin-bottom-sm">提现记录</view>
			<view v-if="fetch['list_' + current] && fetch['list_' + current].length > 0">
				<view class="record-item" v-for="(item, index) in fetch['list_' + current]" :key="index">
					<view class="record-left">
						<view class="record-name">{{ item.action_name }}</view>
						<view class="record-desc" v-if="item.desc">{{ item.desc }}</view>
						<view class="record-time">{{ item.cdate }}</view>
					</view>
					<view class="record-amount" :class="{ income: item.amount > 0, expense: item.amount < 0 }">
						{{ item.amount > 0 ? '+' : '' }}{{ item.amount }}
					</view>
				</view>
			</view>
			<view v-else class="empty-record">
				<u-empty mode="data"></u-empty>
			</view>
		</view>
		
		<u-popup mode="center" @close="close" :show="show" round="14" :closeable="true">
			<view class="alert-area border-radius bg-main pos-r">
				<view class="dflex-b ft-dark margin-bottom-sm margin-lr-xs">
					<view>绑定{{fetch.config[config].name}}提现账户：</view>
				</view>
		
				<view class="dflex border-radius-sm field set-input">
					<u--input placeholder="请输入真实姓名" v-model="fetch.config[config].realname"
						class="fwb fs-sm" border="none" :focus="true" clearable
						style="max-height: 76px; min-height: 19px; height: auto; font: initial;"></u--input>
				</view>
				<view class="dflex border-radius-sm field set-input">
					<u--input :placeholder="`请输入`+fetch.config[config].name+`账号`" v-model="fetch.config[config].account"
						class="fwb fs-sm" border="none" clearable
						style="max-height: 76px; min-height: 19px; height: auto; font: initial;"></u--input>
				</view>
				<view class="dflex border-radius-sm field set-input" v-if="fetch.config[config].id == 3">
					<u--input :placeholder="`请输入`+fetch.config[config].name+`开户行`" v-model="fetch.config[config].bank"
						class="fwb fs-sm" border="none" clearable
						style="max-height: 76px; min-height: 19px; height: auto; font: initial;"></u--input>
				</view>
				
				<view class="dflex-b ft-base margin-bottom-sm margin-lr-xs">
					<view>*请输入真实信息</view>
				</view>
		
				<!-- 提交按钮 -->
				<view class="cur_bgcolor margin-top-xl tac w-full border-radius-lg padding-tb-sm" @click="bind">
					提交
				</view>
			</view>
		</u-popup>

		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: 0, // 默认选中第一个
				fetch: {},
				id: 0,
				current: 0,
				number: '',
				value: 0,
				show:false,
				name:'',
				account:'',
			};
		},
		onLoad(options) {
			if (options && options.id) {
				this.id = options.id;
			} else {
				this.Dever.location('source/home');
				return;
			}
		},
		onShow() {
			this.loadData();
			this.loadList(1);
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadList(1);
		},
		//加载更多
		onReachBottom() {
			this.loadList(2);
		},
		methods: {
			open() {
				this.show = true;
			},
			close() {
				this.show = false;
			},
			setConfig(index) {
				this.config = index;
				this.loadValue()
			},
			loadData() {
				this.DeverApi.get(this, 'score.withdraw', {
					id: this.id
				}, res => {
					this.loadValue()
				});
			},
			loadList(page) {
				this.DeverApi.page([page, 'list_' + this.current], this, 'score.withdrawLog', {
					id: this.id
				});
			},
			setValue() {
				this.loadValue()
			},
			loadValue() {
				if (!this.number) {
					var number = this.fetch.user.yue
				} else {
					var number = this.number
				}
				number = parseFloat(number)
				var exp = parseFloat(this.fetch.info.exp);
				var fee = number * parseFloat(this.fetch.info.withdraw_fee)/100
				this.value = ((number - fee)*exp).toFixed(2).toString()
				this.value = this.value + this.fetch.money.unit;
			},
			bind() {
				if (this.config < 0) {
					return this.Dever.alert('请选择账户');
				}
				var config = this.fetch.config[this.config];
				this.DeverApi.post('score.withdrawBind', {id: this.id, config:config.id, realname:config.realname,account:config.account,bank:config.bank}, r => {
					this.loadData();
					this.loadList(1);
					this.close();
					this.Dever.success('绑定账户成功');
				});
			},
			act() {
				var number = this.number;
				if (number) {
					number = parseFloat(number);
				} else {
					number = 0;
				}
				if (this.config < 0) {
					return this.Dever.alert('请选择要提现的账户');
				}
				
				var config = this.fetch.config[this.config];
				if (config.status == 2) {
					// 展示绑定窗口
					//this.Dever.alert('您还未开通提现账户，请先开通');
					this.open()
					return
				}
				if (number <= 0) {
					return this.Dever.alert('请输入要提现的数值');
				}
				var yue = parseFloat(this.fetch.user.yue);
				if (yue <= number) {
					return this.Dever.alert('余额不足');
				}
				this.Dever.confirm('确认申请提现吗？申请后工作人员审核通过，提现的金额将转入您的账户', () => {
					this.DeverApi.post('score.withdrawAct', {id: this.id, config:config.id, number:number}, r => {
						this.number = '';
						this.loadData();
						this.loadList(1);
						this.Dever.success('提现申请成功');
					});
				})
				
			},
		},
	};
</script>


<style lang="scss">
	.money-area {
		margin-top: 28rpx;
		margin-bottom: 18rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 18rpx;
		/* 加这个 */

		.item {
			width: calc((100% - 2 * 18rpx) / 3);
			/* 3个元素，间隔2个gap */
			height: 152rpx;
			background: #f5f5f5;
			border-radius: 12rpx;
			box-sizing: border-box;
			padding: 20rpx;
			text-align: center;

			.price {
				color: #333;
				margin-bottom: 8rpx;
			}

			text {
				color: #9a9a9a;
			}
		}

		.active {
			background: #6f96f1;
			color: #fff;

			.price,
			text {
				color: #fff !important;
			}
		}
	}

	.record-list {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;

		.record-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
		}

		.record-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1px solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.record-left {
				display: flex;
				flex-direction: column;

				.record-name {
					font-size: 28rpx;
					color: #333;
				}

				.record-desc {
					font-size: 28rpx;
					color: #999;
				}

				.record-time {
					font-size: 24rpx;
					color: #999;
					margin-top: 6rpx;
				}
			}

			.record-amount {
				font-size: 28rpx;
				font-weight: bold;

				&.income {
					color: #4caf50;
				}

				&.expense {
					color: #f44336;
				}
			}
		}
	}

	.empty-record {
		text-align: center;
		padding: 60rpx 0;

		.empty-icon {
			width: 160rpx;
			height: 160rpx;
			margin-bottom: 20rpx;
			opacity: 0.6;
		}

		.empty-text {
			font-size: 28rpx;
			color: #999;
		}
	}
	
	.cur_bgcolor {
		background: #6f96f1;
		color: #fff;
	}
	
	.cur_color {
		color: #6f96f1;
	}
	
	.tip {
		font-size: 24rpx;
		color: #6f96f1;
		margin-top: 6rpx;
	}
	
	.set-input {
		padding: 20rpx;
		margin-bottom: 10rpx;
	}
	
	.u-popover {
		width: 180rpx !important;
	}
</style>