yudao-mall-uniapp/pages/pay/components/account-type-select.vue

<template>
	<su-popup :show="show" class="ss-checkout-counter-wrap" @close="hideModal">
		<view class="ss-modal-box bg-white ss-flex-col">
			<view class="modal-header ss-flex-col ss-col-left">
				<text class="modal-title ss-m-b-20">选择提现方式</text>
			</view>
			<view class="modal-content ss-flex-1 ss-p-b-100">
				<radio-group @change="onChange">
					<label class="container-list ss-p-l-34 ss-p-r-24 ss-flex ss-col-center ss-row-center"
						v-for="(item, index) in typeList" :key="index">
						<view class="container-icon ss-flex ss-m-r-20">
							<image :src="sheep.$url.static(item.icon)" />
						</view>
						<view class="ss-flex-1">{{ item.title }}</view>

						<radio :value="item.value" color="var(--ui-BG-Main)"
							:checked="item.value === state.currentValue" />
						<!-- :disabled="!methods.includes(item.value)" -->
					</label>
				</radio-group>
			</view>
			<view class="modal-footer ss-flex ss-row-center ss-col-center">
				<button class="ss-reset-button save-btn" @tap="onConfirm">确定</button>
			</view>
		</view>
	</su-popup>
</template>

<script setup>
	import {
		reactive,
		onBeforeMount,
		nextTick,
		ref
	} from 'vue';
	import sheep from '@/sheep';

	const props = defineProps({
		modelValue: {
			type: Object,
			default () {},
		},
		show: {
			type: Boolean,
			default: false,
		},
		methods: {
			type: Array,
			default: [],
		},
	});
	const emits = defineEmits(['update:modelValue', 'change', 'close']);
	const state = reactive({
		currentValue: '0',
	});
	const typeList = reactive([{
			// icon: '/static/img/shop/pay/wechat.png',
			title: '工商银行',
			value: '0',
		},
		{
			// icon: '/static/img/shop/pay/alipay.png',
			title: '建设银行',
			value: '1',
		},
		{
			// icon: '/static/img/shop/pay/bank.png',
			title: '农业',
			value: '2',
		},
	])
	const getWalletAccountInfo = async () => {
		return new Promise(async (resolve, reject) => {
			let res = await sheep.$api.user.account.info({
				type: state.currentValue,
			});
			if (res.error === 0) {
				if (!props.methods.includes(res.data.type)) {
					return;
				}
				state.currentValue = res.data.type;
				emits('update:modelValue', {
					type: res.data.type,
					account_header: res.data.account_header,
					account_name: res.data.account_name,
					account_no: res.data.account_no,
				});
			} else {
				emits('update:modelValue', {
					type: state.currentValue,
				});
			}
			resolve();
		});
	};

	function onChange(e) {
		state.currentValue = e.detail.value;
	}

	const onConfirm = async () => {
		if (state.currentValue === '') {
			sheep.$helper.toast('请选择提现方式');
			return;
		}
		await getWalletAccountInfo();
		emits('close');
	};

	const hideModal = () => {
		emits('close');
	};

	onBeforeMount(async () => {
		await getWalletAccountInfo();
	});
</script>

<style lang="scss" scoped>
	.ss-modal-box {
		border-radius: 30rpx 30rpx 0 0;
		max-height: 1000rpx;

		.modal-header {
			position: relative;
			padding: 60rpx 40rpx 40rpx;

			.modal-title {
				font-size: 32rpx;
				font-weight: bold;
			}

			.close-icon {
				position: absolute;
				top: 10rpx;
				right: 20rpx;
				font-size: 46rpx;
				opacity: 0.2;
			}
		}

		.modal-content {
			overflow-y: auto;

			.container-list {
				height: 96rpx;
				border-bottom: 2rpx solid rgba(#dfdfdf, 0.5);
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;

				.container-icon {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.modal-footer {
			height: 120rpx;

			.save-btn {
				width: 710rpx;
				height: 80rpx;
				border-radius: 40rpx;
				background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
				color: $white;
			}
		}
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>