93 lines
2.7 KiB
Plaintext
93 lines
2.7 KiB
Plaintext
<template>
|
|
<modal-popup
|
|
ref="modalRef"
|
|
:title="t('Mobile.MySubscriptions.purchaseTitle')"
|
|
>
|
|
<view class="purchase-modal">
|
|
<text class="purchase-subtitle">{{
|
|
t("Mobile.MySubscriptions.purchaseSubtitle")
|
|
}}</text>
|
|
|
|
<view v-if="loading" class="loading-state">
|
|
<text class="loading-text">...</text>
|
|
</view>
|
|
|
|
<view v-else class="package-list">
|
|
<view
|
|
v-for="pkg in packages"
|
|
:key="pkg.id"
|
|
class="package-card"
|
|
:class="{ 'package-processing': processingId === pkg.id }"
|
|
@tap="handlePurchase(pkg)"
|
|
>
|
|
<view class="package-header">
|
|
<text class="package-name">{{ pkg.packageName }}</text>
|
|
<view v-if="pkg.remark" class="package-remark">
|
|
<text class="remark-text">{{ pkg.remark }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="package-footer">
|
|
<text class="package-credit">{{
|
|
`${formatNumber(pkg.creditAmount, 0)} ${t("Mobile.MySubscriptions.creditPackageCredit")}`
|
|
}}</text>
|
|
<text class="package-price">{{
|
|
`¥ ${formatNumber(pkg.price, 2)}`
|
|
}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</modal-popup>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import type { CreditPackageInfo } from "@/subpackages/types/interfaces/subscription";
|
|
import { SUCCESS_CODE } from "@/constants/codes.constants.uts";
|
|
import { apiListCreditPackages } from "@/subpackages/servers/subscription";
|
|
import { useI18n } from "@/utils/i18n";
|
|
import { formatNumber } from "@/utils/system";
|
|
import ModalPopup from "@/components/modal-popup/modal-popup.uvue";
|
|
import { useSubscriptionPurchase } from "../../hooks/useSubscriptionPurchase";
|
|
|
|
const { t } = useI18n();
|
|
const { processingId, handlePayCredits } = useSubscriptionPurchase();
|
|
|
|
const modalRef = ref<any>(null);
|
|
const packages = ref<CreditPackageInfo[]>([]);
|
|
const loading = ref(false);
|
|
|
|
const open = async () => {
|
|
modalRef.value?.open();
|
|
await fetchPackages();
|
|
};
|
|
|
|
const close = () => {
|
|
modalRef.value?.close();
|
|
};
|
|
|
|
const fetchPackages = async () => {
|
|
loading.value = true;
|
|
try {
|
|
const res = await apiListCreditPackages();
|
|
if (res.code === SUCCESS_CODE && res.data) {
|
|
const data = res.data as any;
|
|
packages.value = Array.isArray(data) ? data : data.data || [];
|
|
}
|
|
} catch (e) {
|
|
// ignore
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
const handlePurchase = async (pkg: CreditPackageInfo) => {
|
|
await handlePayCredits(pkg.id);
|
|
};
|
|
|
|
defineExpose({ open, close });
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "./purchase-modal.scss";
|
|
</style>
|