|
@@ -4,15 +4,31 @@
|
|
|
<Navbar />
|
|
|
|
|
|
<div id="contentBox" ref="scrollBox">
|
|
|
- <!-- 轮播图 -->
|
|
|
- <Carousel :templateData="template" class="mb-10" style="max-height: 594.5px;" />
|
|
|
-
|
|
|
<div class="default-width pb-10">
|
|
|
+ <!-- 轮播图 -->
|
|
|
+ <div v-if="carouselList.length" style="height: 400px;">
|
|
|
+ <v-carousel cycle hide-delimiter-background show-arrows="hover" style="height: 100%;">
|
|
|
+ <v-carousel-item v-for="(item, i) in carouselList" :key="i">
|
|
|
+ <v-img :src="item.imgUrl" :lazy-src="item.imgUrl" cover>
|
|
|
+ <template v-slot:placeholder>
|
|
|
+ <v-row align="center" class="fill-height ma-0" justify="center">
|
|
|
+ <v-progress-circular color="grey-lighten-5" indeterminate></v-progress-circular>
|
|
|
+ </v-row>
|
|
|
+ </template>
|
|
|
+ </v-img>
|
|
|
+ </v-carousel-item>
|
|
|
+ </v-carousel>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <v-tabs class="mt-10" v-model="tab" align-tabs="start" color="primary" bg-color="#f7f8fa">
|
|
|
+ <v-tab v-for="(val, i) in tabList" :key="i" :value="val.value">{{ val.title }}</v-tab>
|
|
|
+ </v-tabs>
|
|
|
+
|
|
|
<!-- 热门商品 -->
|
|
|
- <HotGoods :templateData="template" class="mb-10" />
|
|
|
+ <HotGoods v-if="tab === 0" :templateData="template" />
|
|
|
|
|
|
<!-- 积分兑换 -->
|
|
|
- <PointExchange :point="accountData.point" @login="handleLogin" />
|
|
|
+ <PointExchange v-if="tab === 1" :point="accountData.point" @login="handleLogin" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -25,7 +41,6 @@
|
|
|
defineOptions({ name: 'mall-home-index'})
|
|
|
import { ref, onMounted } from 'vue'
|
|
|
import Navbar from '../components/navbar.vue'
|
|
|
-import Carousel from './components/carousel.vue'
|
|
|
import HotGoods from './components/hotGoods.vue'
|
|
|
import PointExchange from './pointExchange'
|
|
|
import loginPage from '@/views/common/loginDialog.vue'
|
|
@@ -41,6 +56,12 @@ onMounted(async () => {
|
|
|
await useMallStore().getMallDiyTemplate()
|
|
|
})
|
|
|
|
|
|
+const tab = ref(0)
|
|
|
+const tabList = [
|
|
|
+ { title: '热门商品', value: 0 },
|
|
|
+ { title: '积分兑换', value: 1 }
|
|
|
+]
|
|
|
+
|
|
|
let template = ref(JSON.parse(localStorage.getItem('mallTemplate')) || {})
|
|
|
useMallStore().$subscribe((mutation, state) => {
|
|
|
if (state.template && Object.keys(state.template).length) template.value = state?.template
|
|
@@ -53,6 +74,10 @@ userStore.$subscribe((mutation, state) => {
|
|
|
if (Object.keys(state.userAccount).length) accountData.value = state.userAccount
|
|
|
})
|
|
|
|
|
|
+const carouselList = ref([])
|
|
|
+const Carousel = template.value?.home?.components.find(item => item.id === 'Carousel')
|
|
|
+carouselList.value = Carousel?.property?.items || []
|
|
|
+
|
|
|
const showLogin = ref(false)
|
|
|
const returnUrl = ref('')
|
|
|
const handleLogin = (path) => {
|
|
@@ -76,11 +101,7 @@ const loginClose = () => {
|
|
|
showLogin.value = false
|
|
|
Snackbar.warning('您已取消登录')
|
|
|
}
|
|
|
-
|
|
|
-const handleSearch = (val) => {
|
|
|
-
|
|
|
-}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-</style>
|
|
|
+</style>
|