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

<template>
  <div style="min-width: 1184px;" class="white-bgc">
    <!-- 导航栏 -->
    <Navbar @login="handleLogin" />

    <div id="contentBox" ref="scrollBox">
      <!-- 轮播图 -->
      <Carousel :templateData="template" class="mb-10" style="max-height: 594.5px;" />

      <div class="default-width pb-10">
        <!-- 热门商品 -->
        <HotGoods :templateData="template" class="mb-10" />

        <!-- 积分兑换 -->
        <PointExchange :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 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'
import { useMallStore } from '@/store/mall'
import { useUserStore } from '@/store/user'
import Snackbar from '@/plugins/snackbar'
import { useRouter } from 'vue-router'

const router = useRouter()

// 获取装修模版
onMounted(async () => {
  await useMallStore().getMallDiyTemplate()
})

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 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)
  }
}

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

<style scoped lang="scss">
</style>