xionggeshop/xgsc.gynhc.com_wx/pages/user/wallet/withdraw-method.vue

<!-- 选择提现方式 -->
<template>
	<view class="withdraw-method-page brand-page">
		<view class="page-wrap">
			<shopro-navbar variant="gradient" backText="选择提现方式"></shopro-navbar>
			<view class="page-content">
				<view class="tip-card brand-card" v-if="availableMethods.length">
					<text class="tip-text">请选择您要使用的提现到账方式</text>
				</view>

				<view class="method-list" v-if="availableMethods.length">
					<view
						class="method-item brand-card u-flex u-row-between u-col-center"
						v-for="item in availableMethods"
						:key="item.value"
						:class="{ active: selectedType === item.value }"
						@tap="selectMethod(item.value)"
					>
						<view class="method-left u-flex u-col-center">
							<image class="method-icon" :src="item.icon" mode="aspectFit"></image>
							<view class="method-info">
								<view class="method-title">{{ item.title }}</view>
								<view class="method-desc">{{ item.desc }}</view>
							</view>
						</view>
						<view class="method-check">
							<text class="u-iconfont uicon-checkmark-circle-fill" v-if="selectedType === item.value"></text>
							<text class="u-iconfont uicon-arrow-right" v-else></text>
						</view>
					</view>
				</view>

				<shopro-empty
					v-if="!loading && !availableMethods.length"
					marginTop="200rpx"
					:image="$IMG_URL + '/imgs/empty/empty_goods_null.png'"
					tipText="暂无可用的提现方式，请联系客服"
				></shopro-empty>

				<view class="foot-box safe-area-inset-bottom" v-if="availableMethods.length">
					<button class="u-reset-button confirm-btn" :disabled="!selectedType" @tap="confirmSelect">确认选择</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const WITHDRAW_TYPES = {
	bank: {
		icon: '',
		title: '银行卡转账',
		desc: '提现至本人银行卡',
		value: 'bank'
	},
	wechat: {
		icon: '',
		title: '微信零钱',
		desc: '提现至微信零钱账户',
		value: 'wechat'
	},
	alipay: {
		icon: '',
		title: '支付宝账户',
		desc: '提现至支付宝账户',
		value: 'alipay'
	}
};

export default {
	data() {
		return {
			loading: true,
			selectedType: '',
			methods: [],
			withdrawList: {}
		};
	},
	computed: {
		availableMethods() {
			return this.methods
				.map(key => this.withdrawList[key])
				.filter(Boolean);
		}
	},
	onLoad(options) {
		this.initWithdrawList();
		this.selectedType = options.current || '';
		this.loadRules();
	},
	methods: {
		initWithdrawList() {
			const base = this.$IMG_URL + '/imgs/wallet/';
			this.withdrawList = {
				bank: { ...WITHDRAW_TYPES.bank, icon: base + 'bank_type.png' },
				wechat: { ...WITHDRAW_TYPES.wechat, icon: base + 'wx_type.png' },
				alipay: { ...WITHDRAW_TYPES.alipay, icon: base + 'ali_type.png' }
			};
		},
		loadRules() {
			this.loading = true;
			this.$http('money.walletRule').then(res => {
				this.loading = false;
				if (res.code === 1) {
					const methods = res.data && res.data.methods;
					this.methods = Array.isArray(methods) ? methods : [];
					if (!this.selectedType && this.methods.length) {
						this.selectedType = this.methods[0];
					}
				}
			}).catch(() => {
				this.loading = false;
			});
		},
		selectMethod(type) {
			this.selectedType = type;
		},
		confirmSelect() {
			if (!this.selectedType) {
				this.$u.toast('请选择提现方式');
				return;
			}
			uni.$emit('SELECT_WITHDRAW_TYPE', { type: this.selectedType });
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss" scoped>
.withdraw-method-page {
	height: 100vh;
}

.page-wrap {
	background: $brand-header-gradient;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.page-content {
	flex: 1;
	padding: 0 $brand-page-gutter 160rpx;
	box-sizing: border-box;
}

.tip-card {
	padding: 24rpx 28rpx;
	margin-bottom: 24rpx;

	.tip-text {
		font-size: 26rpx;
		color: $brand-text-muted;
		line-height: 1.5;
	}
}

.method-item {
	padding: 32rpx 28rpx;
	margin-bottom: 20rpx;
	transition: all 0.2s ease;

	&.active {
		border: 2rpx solid $brand-primary;
		box-shadow: 0 4rpx 16rpx rgba(22, 119, 255, 0.15);
	}

	.method-icon {
		width: 72rpx;
		height: 72rpx;
		flex-shrink: 0;
	}

	.method-info {
		margin-left: 24rpx;

		.method-title {
			font-size: 30rpx;
			font-weight: 600;
			color: $brand-text;
		}

		.method-desc {
			font-size: 24rpx;
			color: $brand-text-muted;
			margin-top: 8rpx;
		}
	}

	.method-check {
		.uicon-checkmark-circle-fill {
			font-size: 40rpx;
			color: $brand-primary;
		}

		.uicon-arrow-right {
			font-size: 28rpx;
			color: #C4C4C4;
		}
	}
}

.foot-box {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20rpx $brand-page-gutter;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.confirm-btn {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	background: $brand-primary-gradient;
	border-radius: 44rpx;
	font-size: 30rpx;
	font-weight: 500;
	color: #fff;

	&[disabled] {
		opacity: 0.5;
	}
}
</style>