178 lines
3.8 KiB
Vue
178 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from 'vue'
|
|
import { ElRadio, ElButton } from 'element-plus'
|
|
import type { PayMethod } from '@/types/business/finance'
|
|
|
|
interface Props {
|
|
method: PayMethod
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const visible = defineModel<boolean>('visible', { default: false })
|
|
|
|
const emit = defineEmits<{ confirm: [method: PayMethod] }>()
|
|
|
|
const selected = ref<PayMethod>(props.method)
|
|
|
|
watch(
|
|
() => props.method,
|
|
(value) => {
|
|
selected.value = value
|
|
},
|
|
)
|
|
|
|
watch(visible, (open) => {
|
|
if (open) selected.value = props.method
|
|
})
|
|
|
|
function onConfirm(): void {
|
|
emit('confirm', selected.value)
|
|
visible.value = false
|
|
}
|
|
|
|
function onCancel(): void {
|
|
visible.value = false
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport to="body">
|
|
<div v-if="visible" class="pay-method-dialog" @click.self="onCancel">
|
|
<div class="pay-method-dialog__panel">
|
|
<h3 class="pay-method-dialog__title">
|
|
切换支付方式
|
|
</h3>
|
|
|
|
<label
|
|
class="pay-method-dialog__option"
|
|
:class="{ 'is-active': selected === 'wechat' }"
|
|
>
|
|
<el-radio
|
|
v-model="selected"
|
|
value="wechat"
|
|
class="pay-method-dialog__radio"
|
|
>
|
|
微信支付
|
|
</el-radio>
|
|
<span class="pay-method-dialog__tip text-secondary">推荐使用</span>
|
|
</label>
|
|
|
|
<label
|
|
class="pay-method-dialog__option"
|
|
:class="{ 'is-active': selected === 'alipay' }"
|
|
>
|
|
<el-radio
|
|
v-model="selected"
|
|
value="alipay"
|
|
class="pay-method-dialog__radio"
|
|
>
|
|
支付宝支付
|
|
</el-radio>
|
|
<span class="pay-method-dialog__tip text-secondary">其他用户选择</span>
|
|
</label>
|
|
|
|
<div class="pay-method-dialog__footer">
|
|
<el-button class="pay-method-dialog__btn" @click="onCancel">
|
|
取消
|
|
</el-button>
|
|
<el-button class="pay-method-dialog__btn pay-method-dialog__btn--confirm" @click="onConfirm">
|
|
确认
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.pay-method-dialog {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1000;
|
|
.flex(row, center);
|
|
background: rgba(0, 0, 0, 0.45);
|
|
|
|
&__panel {
|
|
width: 420px;
|
|
max-width: calc(100vw - 32px);
|
|
padding: @spacing-lg;
|
|
border-radius: @radius-lg;
|
|
background: @white;
|
|
box-shadow: @shadow-lg;
|
|
}
|
|
|
|
&__title {
|
|
margin-bottom: @spacing-base;
|
|
font-size: @font-size-lg;
|
|
font-weight: 600;
|
|
color: @heading-color;
|
|
}
|
|
|
|
&__option {
|
|
.flex(row, flex-start, center);
|
|
gap: @spacing-sm;
|
|
padding: @spacing-base;
|
|
margin-bottom: @spacing-sm;
|
|
border: 1px solid @border-color;
|
|
border-radius: @radius-base;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
|
|
&:hover {
|
|
border-color: @primary-color;
|
|
}
|
|
|
|
&.is-active {
|
|
border-color: @primary-color;
|
|
background: @primary-light;
|
|
}
|
|
}
|
|
|
|
&__radio {
|
|
.el-radio__label {
|
|
color: @heading-color;
|
|
font-size: @font-size-base;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
&__tip {
|
|
margin-left: auto;
|
|
font-size: @font-size-sm;
|
|
}
|
|
|
|
&__footer {
|
|
.flex(row, flex-end);
|
|
gap: @spacing-sm;
|
|
margin-top: @spacing-base;
|
|
}
|
|
|
|
&__btn {
|
|
height: 34px;
|
|
padding: 0 @spacing-base;
|
|
border: 1px solid @border-color-dark;
|
|
border-radius: @radius-base;
|
|
background: @white;
|
|
color: @text-color;
|
|
font-size: @font-size-base;
|
|
transition: all 0.2s;
|
|
&:hover {
|
|
border-color: @primary-color;
|
|
color: @primary-color;
|
|
}
|
|
|
|
&--confirm {
|
|
border-color: @primary-color;
|
|
background: @primary-color;
|
|
color: @white;
|
|
|
|
&:hover {
|
|
background: @primary-hover;
|
|
color: @white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|