详情页面内容闪现优化

src/assets/js/conmmon.js

@@ -11,6 +11,16 @@ function getParams(url) {
     });
     return params;
 }
+
+function getQueryParamFromUrl(url, param) {
+    console.log('url', url, 'param', param)
+    // 创建一个URL对象
+    var urlObj = new URL(url);
+    // 使用URL对象的searchParams属性获取参数值
+    var result = urlObj.searchParams.get(param);
+    return result;
+}
 export {
     getParams,
+    getQueryParamFromUrl,
 }

src/components/layout/footer.vue

@@ -2,13 +2,9 @@
 import { ref } from 'vue'
 import { useStore } from 'vuex'
 const store = useStore()
-const pageStatus = ref(false)
-setTimeout(()=>{
-    pageStatus.value = true
-},400)
 </script>
 <template>
-    <footer v-show="pageStatus">
+    <footer v-show="store.state.footerStatus">
         <div class="footer-widget-area" style="position: relative;clear: both;">
             <div class="container">
                 <div class="row footerOne">

src/store/index.ts

@@ -24,7 +24,8 @@ export const store = createStore({
         meta:{
             title:undefined,keywords:undefined,description:undefined
         },
-        dialogPersonalStatus:false//弹框状态
+        dialogPersonalStatus:false,//弹框状态
+        footerStatus:false,//底部状态
     },
     mutations:{
         //菜单列表
@@ -74,7 +75,11 @@ export const store = createStore({
             state.meta = data
             return state.meta
         },
-        
+        //设置footerStatus
+        setFooterStatus(state:any,data:string){
+            state.footerStatus = data
+            return state.footerStatus
+        },
     },
     actions:{
         getMenuList({ commit } :any,params:any){
@@ -203,6 +208,9 @@ export const store = createStore({
                         resolve(true)
                     })
                 }
+                setTimeout(()=>{
+                    commit("setFooterStatus",true)
+                },1000)
             })
         },
     }

src/views/services/index.vue

@@ -11,6 +11,7 @@ export default defineComponent({
         const router = useRouter()
         const requestParams = ref({})//active类型
         const pageStatus = ref(false)
+        store.state.footerStatus = false
         let paramsData = reactive({
             params:{
                 categoryid: 0,

src/views/services/read.vue

@@ -2,6 +2,7 @@
 import { ref, reactive, defineComponent } from 'vue'
 import { useStore  } from 'vuex'
 import { useRoute } from "vue-router"
+import { getQueryParamFromUrl } from '@/assets/js/conmmon'
 import banner from '@/components/layout/banner.vue'
 import recomMendation from '@/components/layout/recomMendation.vue'
 export default defineComponent({
@@ -20,9 +21,9 @@ export default defineComponent({
             }
             return array
         }
-        setTimeout(()=>{
-            pageStatus.value = true
-        })
+        store.state.pageContent = []
+        store.state.footerStatus = false
+        pageStatus.value = true
         return { store, recomMendationList,pageStatus }
     },
     components:{
@@ -52,22 +53,25 @@ export default defineComponent({
                     }
                 }
             }
-            if(params.query?.categoryid  && !params.query.dup){
-                paramsData = {
-                    params:{
-                        categoryid: params.query?.categoryid,
-                        pageNum:1,
-                        pageSize:1,
-                        order:"sortindex",
-                        articleid: params.query?.id,
-                        id: params.query?.id,
-                        details:true
-                    },
-                    index:params.path,
-                    sub:sub.value
+            setTimeout(()=>{
+                params.query = route.value.query
+                if(params.query?.categoryid  && !params.query.dup){
+                    paramsData = {
+                        params:{
+                            categoryid: params.query?.categoryid,
+                            pageNum:1,
+                            pageSize:1,
+                            order:"sortindex",
+                            articleid: params.query?.id,
+                            id: params.query?.id,
+                            details:true
+                        },
+                        index:params.path,
+                        sub:sub.value
+                    }
                 }
-            }
-            return store.dispatch('getPageData',paramsData)
+                return store.dispatch('getPageData',paramsData)
+            },1)
         })
     }
 })
@@ -77,7 +81,7 @@ export default defineComponent({
                 <section class="common-bradcrumb-section" >
                     <banner />
                 </section>
-                <section class="product-content-section pt-60" v-show="pageStatus">
+                <section class="product-content-section pt-60" v-if="pageStatus">
                     <div class="container" v-if="store.state.pageContent.length>0">
                         <div class="row">
                             <div class="col-lg-12 col-md-12 content">