搜索功能优化

src/components/carditem/card.vue

@@ -1,8 +1,18 @@
 <template>
   <div class="Card">
-    <div v-for="(item,index) in poicefilelist" :key="index">
+    <div v-for="(item, index) in poicefilelist" :key="index">
       <carditem :card-item-list="item"> </carditem>
     </div>
+
+    <div class="empty" v-show="poicefilelist < 1">
+      <img src="../../assets/image/search/file-empty.svg" alt="" />
+      <span>哎呀 未找到您搜索的内容 </span>
+      <span>建议换个关键词再试试</span>
+      <div class="back">
+      <van-button @click="backurl" type="info">返回</van-button>
+      </div>
+
+    </div>
   </div>
 </template>
 
@@ -13,33 +23,53 @@ export default {
   components: {
     Carditem,
   },
-  data(){
-    return{
-      // newpoicefilelist:[]
-    }
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    backurl() {
+      this.$router.back(-1);
+    },
   },
-  created(){
-    // let copypoicefilelist=poicefilelist.map(ele=>{
-    //   newpoicefilelist.push({...poicefilelist})
-    // })
 
+  data() {
+    return {};
   },
   props: {
-      
     poicefilelist: {
       type: Array,
       default() {
-        return [
-
-        ];
+        return [];
       },
     },
-
   },
 };
 </script>
 
 
 <style scoped>
-
+.back{
+  width: 60%;
+  margin: 0 auto;
+}
+.empty {
+  display: grid;
+  margin: 0 auto;
+  text-align: center;
+}
+.empty img {
+  margin: 0 auto;
+  margin-bottom: 5vw;
+  margin-top: 5vw;
+}
+.empty span {
+  line-height: 10vw;
+  height: 10vw;
+  font-weight: bold;
+  font-size: 5vw;
+}
+/deep/.van-button--normal{
+  width: 100%;
+}
 </style>

src/components/carditem/carditem.vue

@@ -56,7 +56,7 @@ export default {
   computed: {
         // 发布日期转换
     datanew(){
-      return this.CardItemList.createOn.slice(0,10)
+      return this.CardItemList.publishOn.slice(0,10)
     }
     
   },

src/components/header/header.vue

@@ -35,28 +35,36 @@
 </template>
 
 <script>
-import { Toast } from 'vant';
+import { Toast } from "vant";
 
 export default {
   name: "HeaderTop",
   components: {},
   data() {
     return {
-      kw: '',
+      kw: "",
+      isCard: false,
     };
   },
   methods: {
     // 搜索方法
     OnSearch(val) {
-       Toast("正在检索中");
-      // 点击跳转
-      if (this.$route.path.indexOf("Search") !== 1) {
-        this.$router.push("/Search/" + this.kw);
-        console.log("跳转");
-        console.log(this.kw);
+      if (this.kw == "") {
+        Toast("请输入关键词");
       } else {
-        return false;
+        Toast("正在检索中");
+        if (this.$route.path.indexOf("Search") !== 1) {
+          setTimeout(() => {
+            //需要延迟跳转  可以后续优化速度 =。=
+            this.$router.push("/Search/" + this.kw);
+            //延迟时间：2秒
+          }, 2000);
+        } else {
+          return false;
+        }
       }
+
+      // 点击跳转
     },
 
     backurl() {
@@ -79,10 +87,7 @@ export default {
       // window.close();
     },
   },
-  props: {
-
-  },
-
+  props: {},
 };
 </script>
 

src/router/index.js

@@ -77,12 +77,14 @@ const router = new VueRouter({
   routes,
   
 })
+
+
 // 登录验证
 router.beforeEach((to, from, next) => {
   if (to.matched.some(m => m.meta.auth)) {
     // 对路由进行验证
     if (store.state.islogin == '100') { // 已经登陆
-      next() // 正常跳转到你设置好的页面
+      next() // 正常跳转到页面
     } else {
       // 未登录则跳转到登陆界面，query:{ Rurl: to.fullPath}表示把当前路由信息传递过去方便登录后跳转回来；
       next({

src/views/article/children/articlemain.vue

@@ -31,7 +31,7 @@ export default {
     computed: {
         // 发布日期转换
     datanew(){
-      return this.onefilelist[0].createOn.slice(0,10)
+      return this.onefilelist[0].publishOn.slice(0,10)
     }
     
   },