|
|
@@ -14,6 +14,7 @@ import { shoppingBag } from '@designer-hub/assets/src/assets/svgs/index'
|
|
|
import { useRouter } from '../../../core/utils/router'
|
|
|
import {
|
|
|
getBanners,
|
|
|
+ getFavourableProducts,
|
|
|
getProductCategories,
|
|
|
getProductItemBuy,
|
|
|
getProducts,
|
|
|
@@ -24,6 +25,9 @@ import Banner from '../components/banner.vue'
|
|
|
import BottomAppBar from '@/components/bottom-app-bar.vue'
|
|
|
import { useUserStore } from '../../../store'
|
|
|
import { storeToRefs } from 'pinia'
|
|
|
+import lightning from '@designer-hub/assets/src/libs/assets/lightning'
|
|
|
+import textGreatMoney from '@designer-hub/assets/src/libs/assets/textGreatMoney'
|
|
|
+import grabNow from '@designer-hub/assets/src/libs/assets/grabNow'
|
|
|
|
|
|
const router = useRouter()
|
|
|
const userStore = useUserStore()
|
|
|
@@ -39,6 +43,10 @@ const { data: carts, run: setCarts } = useRequest(
|
|
|
() => getProductItemBuy({ userId: userInfo.value.userId }),
|
|
|
{ initialData: { list: [], total: 0 } },
|
|
|
)
|
|
|
+const { data: favourableProducts, run: setFavourableProducts } = useRequest(
|
|
|
+ () => getFavourableProducts(),
|
|
|
+ { initialData: [] },
|
|
|
+)
|
|
|
const current = ref<number>(0)
|
|
|
const swiperList = computed(() => banners.value.map((it) => it.bannerImgUrl))
|
|
|
const categories = computed(() => productCategories.value.find(({ id }) => id === 1)?.children)
|
|
|
@@ -51,9 +59,10 @@ const handleChange = async () => {
|
|
|
setCarts()
|
|
|
}
|
|
|
onMounted(async () => {
|
|
|
- await setProductCategories()
|
|
|
- await setBanners()
|
|
|
- await setCarts()
|
|
|
+ await Promise.all([setProductCategories(), setBanners(), setCarts(), setFavourableProducts()])
|
|
|
+ // await setProductCategories()
|
|
|
+ // await setBanners()
|
|
|
+ // await setCarts()
|
|
|
category.value = categories.value[0]
|
|
|
})
|
|
|
</script>
|
|
|
@@ -61,8 +70,84 @@ onMounted(async () => {
|
|
|
<template>
|
|
|
<view class="bg-white flex-grow flex flex-col px-3.5 py-5.5 gap-5.5">
|
|
|
<Banner :mode="BannerMode.Mall"></Banner>
|
|
|
+ <div v-if="favourableProducts.length" class="relative aspect-[1.47/1]">
|
|
|
+ <div class="aspect-[2.99/1] bg-black rounded-2xl">
|
|
|
+ <div class="px-3 h-11 flex items-center">
|
|
|
+ <wd-img width="22" height="22" :src="lightning"></wd-img>
|
|
|
+ <wd-img width="95" height="25" :src="textGreatMoney"></wd-img>
|
|
|
+ <div class="flex-1"></div>
|
|
|
+ <div
|
|
|
+ class="text-center text-white text-base font-normal font-['PingFang_SC'] leading-relaxed"
|
|
|
+ >
|
|
|
+ 17:02:18 结束
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="absolute top-11 left-0 right-0 bottom-0 bg-white rounded-2xl shadow">
|
|
|
+ <swiper class="w-full h-full" v-model:value="current">
|
|
|
+ <template v-for="(it, i) in favourableProducts" :key="i">
|
|
|
+ <swiper-item>
|
|
|
+ <div class="w-full h-full px-4 flex items-center gap-3">
|
|
|
+ <wd-img
|
|
|
+ width="114"
|
|
|
+ height="114"
|
|
|
+ custom-class="rounded-2xl overflow-hidden"
|
|
|
+ :src="it.productCoverImgUrl"
|
|
|
+ />
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ class="w-[178px] text-black/90 text-base font-normal font-['PingFang SC'] leading-normal"
|
|
|
+ >
|
|
|
+ <!-- 海蓝之谜精华面霜60ml -->
|
|
|
+ {{ it.prodcutName }}
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center gap-2.5">
|
|
|
+ <div class="flex-1">
|
|
|
+ <wd-progress
|
|
|
+ :percentage="(it.exchangeCount || 0 / it.productRepertory || 0) * 100"
|
|
|
+ hide-text
|
|
|
+ color="black"
|
|
|
+ ></wd-progress>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="text-black/40 text-[10px] font-normal font-['PingFang_SC'] leading-normal"
|
|
|
+ >
|
|
|
+ 还剩{{ it.productRepertory - it.exchangeCount }}件
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-end gap-1 mt-5">
|
|
|
+ <div class="text-[#ef4343] text-[22px] font-normal font-['D-DIN_Exp'] pb-3">
|
|
|
+ <!-- 1600 -->
|
|
|
+ {{ it.favourablePoints }}
|
|
|
+ </div>
|
|
|
+ <div class="text-black/60 text-sm font-normal font-['PingFang_SC'] pb-3">
|
|
|
+ 积分
|
|
|
+ </div>
|
|
|
+ <div class="flex-1"></div>
|
|
|
+ <div @click="router.push(`/pages/home/mall/detail/index?id=${it.productId}`)">
|
|
|
+ <wd-img width="106" height="40" :src="grabNow"></wd-img>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex gap-4">
|
|
|
+ <div
|
|
|
+ class="text-black/30 text-[10px] font-normal font-['PingFang SC'] line-through leading-normal"
|
|
|
+ >
|
|
|
+ {{ it.points }}积分
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="text-black/30 text-[10px] font-normal font-['PingFang SC'] line-through leading-normal"
|
|
|
+ >
|
|
|
+ ¥{{ it.productPrice }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </swiper-item>
|
|
|
+ </template>
|
|
|
+ </swiper>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="w-full inline-flex gap-2">
|
|
|
- <!-- <div><wd-button type="primary" size="small">GELATO专区</wd-button></div> -->
|
|
|
<template v-for="(it, i) in categories" :key="i">
|
|
|
<div>
|
|
|
<wd-button
|
