menduner/src/views/mall/home/index.vue

<template>
  <div style="min-width: 1184px;" class="white-bgc">
    <div id="contentBox" ref="scrollBox" class="pt-3">
      <div class="default-width pb-5">
        <!-- 轮播图 -->
        <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>

        <div class="tabs">
          <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>
          <v-btn class="cart" variant="text" prepend-icon="mdi-cart-outline" color="primary" @click="handleTo('/mall/cart')">购物车</v-btn>
        </div>

        <!-- 热门商品 -->
        <HotGoods v-if="tab === 0" :templateData="template" />

        <!-- 积分兑换 -->
        <PointExchange v-if="tab === 1" :point="accountData.point" @login="handleLogin" />
      </div>
    </div>
  </div>

  <!-- 快速登录 -->
  <loginPage v-if="showLogin" @loginSuccess="loginSuccess" @close="loginClose"></loginPage>
</template>

<script setup>
defineOptions({ name: 'mall-home-index'})
import { ref, onMounted } from 'vue'
import HotGoods from './components/hotGoods.vue'
import PointExchange from './pointExchange'
import loginPage from '@/views/common/loginDialog.vue'
import { useMallStore } from '@/store/mall'
import { useUserStore } from '@/store/user'
import Snackbar from '@/plugins/snackbar'
import { useRouter } from 'vue-router'
import { getToken } from '@/utils/auth'

const router = useRouter()

// 获取装修模版
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
})

const userStore = useUserStore()
let accountData = ref(JSON.parse(localStorage.getItem('userAccount')) || {})

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) => {
  showLogin.value = true // 打开快速登录弹窗
  returnUrl.value = path
}

// 快速登录
const loginSuccess = () => {
  showLogin.value = false
  Snackbar.success('登录成功')
  if (returnUrl.value) {
    router.push(returnUrl.value)
    setTimeout(() => {
      returnUrl.value = ''
    }, 1000)
  } else {
    window.location.reload()
  }
}

const loginClose = () => {
  showLogin.value = false
  Snackbar.warning('您已取消登录')
}

const handleTo = (path) => {
  if (!getToken()) {
    Snackbar.warning('请先登录')
    showLogin.value = true // 打开快速登录弹窗
    returnUrl.value = path
    return
  }
  router.push(path)
}
</script>

<style scoped lang="scss">
.tabs {
  position: relative;
  .cart {
    position: absolute;
    right: 0;
    top: 0;
    height: 48px;
    line-height: 48px;
    // color: var(--v-primary-base);
  }
}
</style>