78 lines
2.5 KiB
Vue
78 lines
2.5 KiB
Vue
<script lang="ts" setup>
|
|
import {useConfigStore} from "@/store";
|
|
import {formatOrderAmount, getPlatformServiceFee} from "@/utils/merchantOrder";
|
|
|
|
const {t} = useI18n();
|
|
|
|
const configStore = useConfigStore();
|
|
|
|
const show = ref(false);
|
|
const priceData = ref<Record<string, any>>({})
|
|
|
|
function onOpen(data: Record<string, any>) {
|
|
priceData.value = data
|
|
show.value = true;
|
|
}
|
|
|
|
function handleClose() {
|
|
show.value = false;
|
|
}
|
|
|
|
const platformFee = computed(() => getPlatformServiceFee(priceData.value))
|
|
|
|
defineExpose({
|
|
onOpen,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<wd-popup
|
|
v-model="show"
|
|
position="bottom"
|
|
@close="handleClose"
|
|
>
|
|
<view>
|
|
<view class="center h-102rpx bg-#F7F7F7 text-40rpx lh-40rpx font-bold text-#333">
|
|
{{ t('pages-user.order.checkout.priceDetail.title') }}
|
|
</view>
|
|
<view class="border-bottom text-32rpx lh-32rpx font-500 text-#333 py-36rpx px-30rpx">
|
|
<view class="flex-center-sb mb-20rpx">
|
|
<view>{{ t('pages-user.order.checkout.priceDetail.taxation') }}</view>
|
|
<view>${{ formatOrderAmount(priceData?.tax) }}</view>
|
|
</view>
|
|
<view v-if="priceData?.deliveryFeeCharged !== false && Number(priceData?.deliveryFee) > 0"
|
|
class="flex-center-sb mb-20rpx">
|
|
<view>{{ t('pages-user.order.checkout.priceDetail.deliveryFee') }}</view>
|
|
<view>${{ formatOrderAmount(priceData?.deliveryFee) }}</view>
|
|
</view>
|
|
<view v-if="priceData?.tipCharged !== false && Number(priceData?.tip) > 0"
|
|
class="flex-center-sb mb-20rpx">
|
|
<view>{{ t('pages-user.order.checkout.priceDetail.tip') }}</view>
|
|
<view>${{ formatOrderAmount(priceData?.tip) }}</view>
|
|
</view>
|
|
<view v-if="Number(platformFee) > 0" class="flex-center-sb mb-20rpx text-26rpx text-#999">
|
|
<view>{{ t('pages-user.order.platformServiceFee') }}</view>
|
|
<view>${{ platformFee }}</view>
|
|
</view>
|
|
<view class="text-24rpx lh-28rpx text-#9E9E9E">
|
|
{{ t('pages-user.order.checkout.priceDetail.platformFeeNote') }}
|
|
</view>
|
|
</view>
|
|
<view class="px-30rpx pt-40rpx">
|
|
<wd-button
|
|
block
|
|
custom-class="!h-108rpx !text-36rpx !rounded-16rpx !bg-#14181B"
|
|
@click="handleClose"
|
|
>
|
|
{{ t('common.gotIt') }}
|
|
</wd-button>
|
|
</view>
|
|
<view :style="[configStore.iosSafeBottomPlaceholder]"></view>
|
|
</view>
|
|
</wd-popup>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|