chore: update

95cb09aa · 王鹏飞 · f690956f · 95cb09aa · 95cb09aa · 95cb09aa
--- a/index.html
+++ b/index.html
@@ -8,6 +8,11 @@
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
    <title>清控紫荆金保</title>
+    <script type="module">
+      ;(async () => {
+        window.SHOP = await import('https://webapp-pub.ezijing.com/project_online/fi/shop.js')
+      })()
+    </script>
  </head>
  <body>
    <div id="app"></div>

--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue'
 import { useWindowScroll } from '@vueuse/core'
 import { useUserStore } from '@/stores/user'
 import { useRoute } from 'vue-router'
 import AppNav from './Nav.vue'
+interface Props {
+  fixed?: boolean
+}
+const props = defineProps<Props>()
 const route = useRoute()
 const user = useUserStore()
 const LOGIN_URL = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(location.href)}`
@@ -22,6 +26,7 @@ watch(route, () => {
 const classNames = computed(() => {
  return {
    'has-menu': menuVisible.value,
+    'is-fixed': props.fixed,
    'is-scrolled': isScrolled.value
  }
 })
@@ -45,7 +50,7 @@ const isScrolled = computed(() => {
      <div class="app-header-left">
        <div class="logo">
          <router-link to="/">
-            <img src="@/assets/images/logo.png" v-if="isScrolled" />
+            <img src="@/assets/images/logo.png" v-if="isScrolled || !fixed" />
            <img src="@/assets/images/logo_white.png" v-else />
          </router-link>
        </div>
@@ -74,22 +79,22 @@ const isScrolled = computed(() => {
 <style lang="scss">
 .app-header {
-  position: fixed;
+  position: sticky;
+  top: 0;
  left: 0;
  right: 0;
-  color: #aa1941;
-  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  z-index: 1000;
-  .cell {
+  &.is-fixed {
-    color: #fff !important;
+    position: fixed;
+    left: 0;
+    right: 0;
+    color: #fff;
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  }
  &.is-scrolled {
-    color: #fff;
+    color: #333;
    background: #fff;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
-    .cell {
-      color: #333 !important;
-    }
    .button-default {
      color: #333;
    }
@@ -115,7 +120,6 @@ const isScrolled = computed(() => {
 }
 .app-header-right {
  display: flex;
-  color: #333;
  .app-header-logout {
    // background: url('https://webapp-pub.ezijing.com/project/saas/logout.png') no-repeat left center;

--- a/src/components/layout/Index.vue
+++ b/src/components/layout/Index.vue
+<script setup lang="ts">
+import AppHeader from './Header.vue'
+import AppFooter from './Footer.vue'
+const attrs = useAttrs()
+</script>
 <template>
  <div class="app-layout">
-    <AppHeader></AppHeader>
+    <AppHeader v-bind="attrs"></AppHeader>
    <section class="app-layout-container">
      <router-view></router-view>
    </section>
    <AppFooter></AppFooter>
  </div>
 </template>
-<script setup lang="ts">
-import AppHeader from './Header.vue'
-import AppFooter from './Footer.vue'
-</script>
--- a/src/components/layout/Nav.vue
+++ b/src/components/layout/Nav.vue
@@ -32,7 +32,7 @@ const navList = [
    > .cell {
      font-size: 18px;
      line-height: 50px;
-      color: #333;
+      // color: #333;
    }
    > .tree-item-group {
      margin-top: -4px;

--- a/src/modules/home/index.ts
+++ b/src/modules/home/index.ts
@@ -5,6 +5,7 @@ export const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    component: AppLayout,
+    props: { fixed: true },
    children: [{ path: '', component: () => import('./views/Index.vue') }]
  }
 ]
--- a/src/modules/shop/index.ts
+++ b/src/modules/shop/index.ts
+import type { RouteRecordRaw } from 'vue-router'
+import AppLayout from '@/components/layout/Index.vue'
+export const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/shop',
+    component: AppLayout,
+    children: [
+      { path: '', component: () => import('./views/Index.vue') },
+      { path: ':id', component: () => import('./views/View.vue'), props: true }
+    ]
+  }
+]
--- a/src/modules/shop/views/Index.vue
+++ b/src/modules/shop/views/Index.vue
+<script setup>
+import { useShopStore } from '@/stores/shop'
+const { filters, list } = useShopStore()
+console.log(filters, list)
+</script>
+<template>
+  <div></div>
+</template>
--- a/src/modules/shop/views/View.vue
+++ b/src/modules/shop/views/View.vue
+<script setup>
+import { useShopStore } from '@/stores/shop'
+const { shopItem } = useShopStore()
+console.log(shopItem)
+</script>
+<template>
+  <div></div>
+</template>
--- a/src/stores/shop.ts
+++ b/src/stores/shop.ts
+import { defineStore } from 'pinia'
+interface ShopFilter {
+  label: string
+  value: string
+}
+type ShopListItem = Record<string, any>
+interface State {
+  filters: ShopFilter[]
+  list: ShopListItem[]
+}
+export const useShopStore = defineStore({
+  id: 'shop',
+  state: (): State => ({
+    filters: (window as any).SHOP.SHOP_FILTERS, // 筛选列表
+    list: (window as any).SHOP.SHOP_LIST // 商品列表
+  }),
+  getters: {
+    shopItem: ({ list }) => {
+      const route = useRoute()
+      console.log(list)
+      return list.find(item => item.id === route.params.id)
+    }
+  },
+  actions: {
+    // async getShopList() {
+    //   const shop = await import('https://webapp-pub.ezijing.com/project_online/fi/shop.js')
+    //   console.log(shop)
+    // }
+  }
+})