115 lines
4.4 KiB
Vue
115 lines
4.4 KiB
Vue
<template>
|
|
<div>
|
|
<CheckoutBtn @showShoppingCart="handleShowShoppingCart" @handleCheckoutBtn="handleShowCheckoutCart" />
|
|
<nut-action-sheet v-model:visible="show">
|
|
<div class="flex flex-col pb-safe max-h-[60vh] min-h-[60vh]">
|
|
<div class="bg-[#F5F5F5] px-[30rpx] py-[18rpx] flex items-center">
|
|
<span class="text-[#666666] text-[30rpx] font-400">已选菜品</span>
|
|
<div class="text-[#333] font-400 text-[30rpx]">
|
|
(含运费
|
|
<span class="text-[#F03B25] text-[30rpx] font-400">¥{{ shippingFee }}</span>
|
|
打包费 ¥<span class="text-[#F03B25] text-[30rpx] font-400">{{ packingFee }}</span>)
|
|
</div>
|
|
<div class="flex items-center ml-auto">
|
|
<Trash2 :stroke-width="1.5" class="w-[32rpx] h-[32rpx] text-[#ccc]"/>
|
|
<span class="text-[#666] font-400 text-[32rpx]" @click="handleClearCart">清空</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Carte :carte="shoppingCartList" />
|
|
<div class="bg-white px-[30rpx] pb-[16rpx]">
|
|
<CheckoutBtn />
|
|
</div>
|
|
</div>
|
|
</nut-action-sheet>
|
|
<nut-action-sheet v-model:visible="showCheckoutCart">
|
|
<div class="flex flex-col pb-safe max-h-[80vh] min-h-[60vh]">
|
|
<div class="flex items-center w-full px-[30rpx] py-[30rpx] bg-[#F5F5F5]" @click="handleShowChooseLocation">
|
|
<img src="/images/checkout/location.png" alt="location" class="w-[92rpx] h-[92rpx]">
|
|
|
|
<div class="flex flex-col ml-[20rpx] flex-auto">
|
|
<p class="text-[36rpx] font-600">{{ defaultAddr?.fullAddress }}</p>
|
|
<div class="flex items-center text-[32rpx] text-[#333] mt-[14rpx]">
|
|
<span class="mr-[20rpx]">{{ defaultAddr?.name }}</span>
|
|
<span>{{ defaultAddr?.phone }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<ChevronRight :stroke-width="1.5" class="w-[60rpx] h-[60rpx] ml-auto"/>
|
|
</div>
|
|
|
|
<Carte :carte="shoppingCartList" class="px-[30rpx]"/>
|
|
<div class="mx-[30rpx] border-b-dashed border-b-[#D8D8D8] border-b-[2rpx] mb-[40rpx] mt-[20rpx]"></div>
|
|
<div class="flex flex-col items-center px-[30rpx]">
|
|
<div class="flex items-center justify-between w-full">
|
|
<div class="text-[#3d3d3d] text-[30rpx] font-400">打包费</div>
|
|
<div class="text-[#F03B25] text-[30rpx] font-400">¥{{ packingFee }}</div>
|
|
</div>
|
|
<div class="flex items-center justify-between w-full mt-[20rpx] mb-[40rpx]">
|
|
<div class="text-[#3d3d3d] text-[30rpx] font-400">运费</div>
|
|
<div class="text-[#F03B25] text-[30rpx] font-400">¥{{ shippingFee }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white px-[30rpx] pb-[16rpx]">
|
|
<CheckoutBtn @handleCheckoutBtn="toCheckout"/>
|
|
</div>
|
|
</div>
|
|
</nut-action-sheet>
|
|
<ChooseLocation v-model:show="showChooseLocation" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { packingFee, shippingFee } from "@/composables/useRestaurant";
|
|
import { Trash2, ChevronRight } from "lucide-vue-next";
|
|
import CheckoutBtn from "./checkout-btn.vue";
|
|
import { useShoppingCartStore } from "@/store/shoppingCart";
|
|
import Carte from "./carte.vue";
|
|
import { useUserStore } from "@/store/user";
|
|
import ChooseLocation from "@/components/checkout/chooseLocation.vue";
|
|
import { useRouter } from "vue-router";
|
|
import { CartTypeEnum } from "@/types/cart";
|
|
|
|
const router = useRouter();
|
|
const userStore = useUserStore();
|
|
const { recvAddrList } = storeToRefs(userStore);
|
|
|
|
const defaultAddr = computed(() => {
|
|
return recvAddrList.value.find((item:any) => item.isDefault);
|
|
});
|
|
|
|
const shoppingCartStore = useShoppingCartStore();
|
|
const shoppingCartList = computed(() => {
|
|
return shoppingCartStore.getShoppingCartByRestaurant;
|
|
});
|
|
|
|
const show = ref(false);
|
|
const showCheckoutCart = ref(false);
|
|
const handleShowShoppingCart = () => {
|
|
show.value = true;
|
|
};
|
|
|
|
const handleShowCheckoutCart = () => {
|
|
showCheckoutCart.value = true;
|
|
};
|
|
|
|
const showChooseLocation = ref(false);
|
|
const handleShowChooseLocation = () => {
|
|
showChooseLocation.value = true;
|
|
};
|
|
|
|
const toCheckout = () => {
|
|
router.push({ path: "/checkout/payment", query: { type: CartTypeEnum.Restaurant } });
|
|
};
|
|
|
|
const handleClearCart = () => {
|
|
shoppingCartStore.clearShoppingCartByType(CartTypeEnum.Restaurant);
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style>
|