138 lines
3.3 KiB
Vue
138 lines
3.3 KiB
Vue
<template>
|
|
<div>
|
|
<Dialog
|
|
v-model="show"
|
|
:options="{ title: '选择活动卡片' }"
|
|
:disableOutsideClickToClose="confirmDialogOpened"
|
|
>
|
|
<template #body-content>
|
|
<div v-if="cards.data?.length" class="flex flex-col gap-2.5">
|
|
<div
|
|
v-for="card in cards.data"
|
|
:key="card.name"
|
|
class="flex justify-between gap-2 rounded p-2.5 text-base text-gray-900 hover:bg-gray-100"
|
|
>
|
|
<div class="flex gap-2">
|
|
<component :is="cardBrandIcon(card.brand)" class="my-auto" />
|
|
<div>
|
|
<div class="flex h-7 items-center gap-1 font-medium">
|
|
<div>{{ card.name_on_card }}</div>
|
|
<div>·</div>
|
|
<div class="flex gap-1 text-gray-700">
|
|
<div>卡号以 •••• 结尾</div>
|
|
<div>{{ card.last_4 }}</div>
|
|
</div>
|
|
<Badge
|
|
v-if="card.is_default"
|
|
class="ml-1.5"
|
|
label="默认"
|
|
variant="outline"
|
|
theme="green"
|
|
/>
|
|
</div>
|
|
<div class="text-gray-600">
|
|
有效期
|
|
{{
|
|
card.expiry_month < 10
|
|
? `0${card.expiry_month}`
|
|
: card.expiry_month
|
|
}}/{{ card.expiry_year }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="cards.data.length > 1 && !card.is_default">
|
|
<Dropdown
|
|
:options="[
|
|
{
|
|
label: '设为默认',
|
|
onClick: () => setAsDefault(card.name),
|
|
condition: () => !card.is_default
|
|
},
|
|
{ label: '移除', onClick: () => removeCard(card.name) }
|
|
]"
|
|
>
|
|
<Button icon="more-horizontal" variant="ghost" />
|
|
</Dropdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template #actions>
|
|
<Button
|
|
label="添加新卡片"
|
|
class="w-full"
|
|
variant="solid"
|
|
@click="emit('addCard')"
|
|
>
|
|
<template #prefix>
|
|
<FeatherIcon name="plus" class="h-4" />
|
|
</template>
|
|
</Button>
|
|
</template>
|
|
</Dialog>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
// import { createDialog } from '../dialogs.js';
|
|
import {
|
|
Dropdown,
|
|
Badge,
|
|
Dialog,
|
|
Button,
|
|
FeatherIcon,
|
|
createResource
|
|
} from 'jingrow-ui';
|
|
import { cardBrandIcon, confirmDialog } from '../../utils/components';
|
|
import { ref } from 'vue';
|
|
|
|
const emit = defineEmits(['success', 'addCard']);
|
|
|
|
const show = defineModel();
|
|
|
|
const cards = createResource({
|
|
url: 'jcloud.api.billing.get_payment_methods',
|
|
cache: 'cards',
|
|
auto: true
|
|
});
|
|
|
|
const setAsDefault = card => {
|
|
createResource({
|
|
url: 'jcloud.api.billing.set_as_default',
|
|
params: { name: card },
|
|
auto: true,
|
|
onSuccess: () => {
|
|
cards.reload();
|
|
emit('success');
|
|
}
|
|
});
|
|
};
|
|
|
|
const confirmDialogOpened = ref(false);
|
|
const removeCard = card => {
|
|
confirmDialogOpened.value = true;
|
|
confirmDialog({
|
|
title: '移除卡片',
|
|
message: '确定要移除这张卡片吗？',
|
|
primaryAction: {
|
|
label: '移除',
|
|
variant: 'solid',
|
|
theme: 'red',
|
|
onClick: ({ hide }) => {
|
|
createResource({
|
|
url: 'jcloud.api.billing.remove_payment_method',
|
|
params: { name: card },
|
|
auto: true,
|
|
onSuccess: () => {
|
|
cards.reload();
|
|
confirmDialogOpened.value = false;
|
|
hide();
|
|
}
|
|
});
|
|
}
|
|
},
|
|
onSuccess: () => {
|
|
confirmDialogOpened.value = false;
|
|
}
|
|
});
|
|
};
|
|
</script> |