up

sanmu
1 parent 41fc147c
Showing 6 changed files with 42 additions and 22 deletions
public/about_img/bg.png
src/components/Header.vue
src/stores/category.ts
src/stores/product_list.ts
src/views/About.vue
src/views/ProductList.vue
@@ -30,13 +30,15 @@
         tab-slider-size="6px"
         selected-class="active"
       >
-        <v-tab :value="1" to="/"><span class="text-grey-lighten-3 tw-font-bold">Home</span> </v-tab>
-        <v-tab :value="2" to="/products"
-          ><span class="text-grey-lighten-3 tw-font-bold">Products</span></v-tab
-        >
+        <v-tab :value="1" to="/"
+          ><span @click="handleTabClick" class="text-grey-lighten-3 tw-font-bold">Home</span>
+        </v-tab>
+        <v-tab :value="2" to="/products">
+          <span @click="handleTabClick" class="text-grey-lighten-3 tw-font-bold">Products</span>
+        </v-tab>
         <v-tab :value="3" to="/about"
-          ><span class="text-grey-lighten-3 tw-font-bold">About</span></v-tab
-        >
+          ><span @click="handleTabClick" class="text-grey-lighten-3 tw-font-bold">About</span>
+        </v-tab>
         <!-- <v-tab :value="4" to="/contact"
           ><span class="text-grey-lighten-3 tw-font-bold">Contact</span></v-tab
         > -->
@@ -47,7 +49,7 @@
 </template>
  
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watchEffect } from 'vue'
 import ContactDialog from '@/components/ContactDialog.vue'
 import { useProductListStore } from '@/stores/product_list'
 import { useRouter } from 'vue-router'
@@ -69,13 +71,22 @@ const handleKeyDown = (e: any) =&gt; {
 }
  
 const handleClick = () => {
-  // categoryStore.updateDisplay()
+  categoryStore.updateDisplay(!input.value)
   productStore.updateKeyword(input.value)
   productStore.updatePageNo(1)
   router.push('/products')
 }
  
 const tab = ref(1)
+
+const handleTabClick = () => {
+  categoryStore.updateDisplay(true)
+  productStore.updateKeyword('')
+}
+
+watchEffect(() => {
+  input.value = productStore.keyword
+})
 </script>
  
 <style lang="scss" scoped>
@@ -8,7 +8,7 @@ export const useCategoryStore = defineStore(&#39;category&#39;, () =&gt; {
   const selectedCategory = ref('') // 选中的一级类别
   const selectedSubCategory = ref('') // 选中的二级类别
   const selectedFuncCategory = ref('')
-  const categoryVisible = ref(false)
+  const categoryVisible = ref(true)
   let resetFuncValue = ''
   let resetCategoryValue = ''
  
@@ -45,6 +45,7 @@ export const useCategoryStore = defineStore(&#39;category&#39;, () =&gt; {
     selectedSubCategory,
     selectedFuncCategory,
     resetCategoryValue,
+    categoryVisible,
     getList,
     updateCategory,
     updateSubCategory,
@@ -13,7 +13,7 @@ export const useProductListStore = defineStore(&#39;productList&#39;, () =&gt; {
   const params = ref()
  
   const getList = async (params: ProductListQuery) => {
-    if (params.productCategoryId) {
+    if (params.productCategoryId || params.keyword) {
       const res = await getProductList(params)
       const data = res.data?.data || {}
       list.value =
@@ -76,7 +76,10 @@
       </v-sheet>
     </v-container>
   </v-sheet>
-  <v-sheet class="tw-py-[64px]">
+  <v-sheet
+    class="tw-py-[64px]"
+    style="background: url('/about_img/bg.png') no-repeat; background-size: 100% 100%"
+  >
     <v-container>
       <MainTitle title="Milestone" />
       <v-timeline direction="horizontal">
 <template>
   <div class="tw-m-auto tw-pb-[64px]">
-    <CategoryList />
+    <CategoryList v-if="categoryStore.categoryVisible" />
     <v-container class="">
       <div class="tw-text-center" v-if="loading">
         <v-progress-circular
@@ -76,27 +76,32 @@ const categoryStore = useCategoryStore()
 const loading = ref(false)
  
 watchEffect(async () => {
-  let params = {
-    // productCategoryId: '78b86c6e917841cf9a292234f2805e24',
-    productCategoryId: categoryStore.selectedSubCategory,
+  let params: any = {
     pageNo: productStore.pageNo,
     pageSize: 20
-  } as any
-
-  if (categoryStore.selectedFuncCategory) {
-    params.productFunctionId = categoryStore.selectedFuncCategory
   }
  
-  if (productStore.keyword) {
+  loading.value = true
+  if (productStore.keyword && !isEqual(productStore.params, params)) {
     params.keyword = productStore.keyword
+    productStore.updateParams(params)
+    await productStore.getList(params)
+    loading.value = false
+    return
+  }
+
+  params.productCategoryId = categoryStore.selectedSubCategory
+  // productCategoryId: '78b86c6e917841cf9a292234f2805e24',
+
+  if (categoryStore.selectedFuncCategory) {
+    params.productFunctionId = categoryStore.selectedFuncCategory
   }
  
   if (categoryStore.selectedSubCategory && !isEqual(productStore.params, params)) {
-    loading.value = true
     productStore.updateParams(params)
     await productStore.getList(params)
-    loading.value = false
   }
+  loading.value = false
 })
  
 const length = computed(() =>