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

<template>
  <div style="min-width: 1184px;" class="white-bgc">
    <!-- 搜索框 -->
    <div class="py-5 stickyBox">
      <div class="default-width d-flex align-center justify-space-between">
        <div class="header-link">
          <span class="cursor-pointer" :class="{'active-route' : isActive('/mall')}" @click="router.push('/mall')">首页</span>
          <span class="mx-8 cursor-pointer">积分兑换</span>
          <span class="cursor-pointer">订单中心</span>
          <span class="mx-8 cursor-pointer">
            <v-icon size="20">mdi-cart-outline</v-icon>
            购物车
          </span>
        </div>
        <div class="search d-flex align-center">
          <v-text-field
            v-model="inputVal"
            placeholder="请输入关键词"
            color="primary"
            variant="plain"
            density="compact"
            clearable
            :hide-details="true"
            class="ml-3 px-2"
            style="height: 100%; line-height: 100%;"
            @keyup.enter="handleSearch"
          ></v-text-field>
          <v-btn class="searchBtn" prepend-icon="mdi-shopping-search-outline" @click="handleSearch">搜索</v-btn>
        </div>
      </div>
    </div>

    <!-- 轮播图 -->
    <Carousel :templateData="template" class="mb-10" />

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

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

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

<script setup>
defineOptions({ name: 'mall-home-index'})
import { ref, computed } from 'vue'
import Carousel from './components/carousel.vue'
import HotGoods from './components/hotGoods.vue'
import PointExchange from './components/pointExchange'
import loginPage from '@/views/common/loginDialog.vue'
import { useMallStore } from '@/store/mall'
import { useUserStore } from '@/store/user'
import { useRouter } from 'vue-router'

// 获取装修模版
useMallStore().getMallDiyTemplate()

const router = useRouter()
const isActive = computed(() => (path) => {
  const currentPath = router.currentRoute.value.path
  return currentPath.includes(path)
})

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

// 快速登录
const loginSuccess = () => {
  showLogin.value = false
  Snackbar.success('登录成功')
}

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


const inputVal = ref('')
const handleSearch = () => {}
</script>

<style scoped lang="scss">
.active-route {
  position: relative;
  color: var(--v-primary-base);
  &::before {
    content: '';
    width: 100%;
    height: 3px;
    position: absolute;
    bottom: -8px;
    left: 0;
    background-color: var(--v-primary-base);
  }
}
.header-link span:hover {
  color: var(--v-primary-base);
}
.stickyBox {
  position: sticky;
  top: 48px;
  z-index: 999;
  background-color: #fff;
  // border-bottom: 1px solid #00897B;
}
.search {
  height: 50px;
  width: 350px;
  border: 2px solid var(--v-primary-base);
  border-radius: 5px;
  .searchBtn {
    width: 100px;
    height: 49px;
    line-height: 48px;
    text-align: center;
    font-size: 18px;
    color: #fff;
    background-color: var(--v-primary-base);
    cursor: pointer;
  }
}
</style>