帮助中心修改

1

src/components/MSearch.vue

@@ -10,12 +10,17 @@
     </div>
 </template>
 <script>
+
 export default {
+    props:['background'],
     data() {
         return {
-        searchValue: ""
+        searchValue: "",
+        color:'#fff'
         };
     },
+    mounted(){
+    },
     methods: {
         onSearch() {
             this.$emit("onSearch", this.searchValue);

src/router/appRouter.js

@@ -111,5 +111,15 @@ let teacherRouter = [{
     descrition: "用户协议",
     weight: 2 // 页面权重
   }
+},
+{
+  path: "/HelpCenterDetail",
+  name: 'HelpCenterDetail',
+  component: () =>
+    import( /* webpackChunkName:'UserProtocol'*/ "@/views/app/HelpCenterDetail.vue"),
+  meta: {
+    descrition: "帮助详情",
+    weight: 2 // 页面权重
+  }
 }];
 export default teacherRouter;

src/views/app/HelpCenter.vue

@@ -1,110 +1,176 @@
 <template>
-    <div class="help">
-        <m-header v-if="headerStatus" />
-        <van-collapse v-if="dataStatus" v-model="activeNames" accordion>
-            <van-collapse-item v-for="(item, index) in dataList" :key="index" title-class="van-ellipsis" :title="item.title" :name="index"><div v-html="item.content"></div></van-collapse-item>
-        </van-collapse>
-        <m-empty class="empty" v-else key="data" />
+  <div class="help">
+    <m-header v-if="headerStatus" />
+    <m-search
+      @onSearch="onSearch"
+      placeholder="搜索"
+      background="#F3F0F8"
+      class="search"
+    />
+    <!-- <van-collapse  v-model="activeNames" accordion>
+      <van-collapse-item
+        v-for="(item, index) in dataList"
+        :key="index"
+        title-class="van-ellipsis"
+        :title="item.title"
+        :name="index"
+        ><div class="quillWrap" v-html="item.content"></div
+      ></van-collapse-item>
+    </van-collapse> -->
+    <div v-if="dataStatus">
+      <van-cell
+        v-for="(item, index) in dataList"
+        :key="index"
+        :title="item.title"
+        is-link
+        @click="gotoDetali(item)"
+      />
     </div>
+    <m-empty class="empty" v-else key="data" />
+    <van-image-preview
+      v-model="show"
+      :images="images"
+      :showIndex="false"
+    ></van-image-preview>
+  </div>
 </template>
 <script>
 /* eslint-disable */
-import MHeader from '@/components/MHeader'
-import MEmpty from '@/components/MEmpty'
-import { browser, calcMinute }  from '@/common/common'
-import { helpCenterCatalogList, helpCenterContentList } from '@/api/app'
+import MHeader from "@/components/MHeader";
+import MEmpty from "@/components/MEmpty";
+import { browser, calcMinute } from "@/common/common";
+import { helpCenterCatalogList, helpCenterContentList } from "@/api/app";
+import MSearch from "@/components/MSearch";
 export default {
-    name: 'courseApply',
-    components: { MHeader, MEmpty },
-    data() {
-        return {
-            headerStatus: true,
-            activeNames: [0],
-            dataStatus: true,
-            dataList: []
-        }
-    },
-    mounted() {
-        let params = this.$route.query
-        if(params.Authorization) {
-            localStorage.setItem('Authorization', decodeURI(params.Authorization))
-            localStorage.setItem('userInfo', decodeURI(params.Authorization))
-        }
-        
-        document.title = '帮助中心'
-        if(browser().android || browser().iPhone) {
-            this.headerStatus = false
-        }
+  name: "courseApply",
+  components: { MHeader, MEmpty, MSearch },
+  data() {
+    return {
+      headerStatus: true,
+      activeNames: [0],
+      dataStatus: true,
+      dataList: [],
+      show: false,
+      images: [],
+      params: { title: null },
+    };
+  },
+  mounted() {
+    let params = this.$route.query;
+    if (params.Authorization) {
+      localStorage.setItem("Authorization", decodeURI(params.Authorization));
+      localStorage.setItem("userInfo", decodeURI(params.Authorization));
+    }
 
-        this.__init()
-    },
-    methods: {
-        async __init() {
-            let loadingStatus = true
-            this.$toast.loading({
-                duration: 0,
-                message: '加载中...',
-                forbidClick: true,
-                loadingType: 'spinner'
-            })
-            let catalogResult = []
-            await helpCenterCatalogList().then(res => {
-                let result = res.data
-                if(result.code == 200) {
-                    catalogResult = result.data
-                } else {
-                    this.$toast(result.msg)
-                    loadingStatus = false
-                }
-            })
-            if(catalogResult.length > 0) {
-                await helpCenterContentList({
-                    catalogIds: catalogResult[0].id,
-                    page: 1,
-                    rows: 100
-                }).then(res => {
-                    let result = res.data
-                    loadingStatus = false
-                    if(result.code == 200) {
-                        this.dataList = result.data.rows ? result.data.rows : []
-                        if(this.dataList.length > 0) {
-                            this.dataStatus = true
-                        } else {
-                            this.dataStatus = false
-                        }
-                    } else {
-                        this.$toast(result.msg)
-                    }
-                })
+    document.title = "帮助中心";
+    if (browser().android || browser().iPhone) {
+      this.headerStatus = false;
+    }
+
+    this.__init();
+    window.showImg = (e) => {
+      if (e.src) {
+        this.images = [e.src];
+        this.show = true;
+      }
+    };
+    // document.querySelectorAll(".quillWrap").addEventListerner('click',this.showImg)
+  },
+  methods: {
+    async __init() {
+      let loadingStatus = true;
+      this.$toast.loading({
+        duration: 0,
+        message: "加载中...",
+        forbidClick: true,
+        loadingType: "spinner",
+      });
+      let catalogResult = [];
+      await helpCenterCatalogList().then((res) => {
+        let result = res.data;
+        if (result.code == 200) {
+          catalogResult = result.data;
+        } else {
+          this.$toast(result.msg);
+          loadingStatus = false;
+        }
+      });
+      if (catalogResult.length > 0) {
+        await helpCenterContentList({
+          catalogIds: catalogResult[0].id,
+          title: this.params.title,
+          page: 1,
+          rows: 100,
+        }).then((res) => {
+          let result = res.data;
+          loadingStatus = false;
+          if (result.code == 200) {
+            this.dataList = result.data.rows ? result.data.rows : [];
+            this.dataList = this.dataList.map((item) => {
+              item.content = item.content.replace(
+                /<img/gi,
+                '<img onClick="showImg(this)" style="width: 100% !important;"'
+              );
+              return item;
+            });
+            if (this.dataList.length > 0) {
+              this.dataStatus = true;
             } else {
-                loadingStatus = false
-            }
-            
-            if(!loadingStatus) {
-                this.$toast.clear()
+              this.dataStatus = false;
             }
-        }
+          } else {
+            this.$toast(result.msg);
+          }
+        });
+      } else {
+        loadingStatus = false;
+      }
+
+      if (!loadingStatus) {
+        this.$toast.clear();
+      }
     },
-    destroyed() {
-        this.$toast.clear()
-    }
-}
+    onSearch(val) {
+      this.params.title = val;
+      this.params.page = 1;
+      this.dataList = [];
+      this.dataShow = true;
+      this.loading = true;
+      this.finished = false;
+      this.__init();
+    },
+    gotoDetali(item) {
+        this.$router.push({path:'/HelpCenterDetail', query:{item:JSON.stringify(item)} })
+    },
+  },
+  destroyed() {
+    this.$toast.clear();
+  },
+};
 </script>
 <style lang='less' scoped>
 @import url("../../assets/commonLess/variable.less");
 .help {
-    min-height: 100vh;
+  min-height: 100vh;
 }
 /deep/.van-collapse {
-    margin: .15rem 0;
-    /deep/.van-cell {
-        color: #1A1A1A;
-        font-size: .17rem;
-        padding: .15rem .16rem;
-    }
-    /deep/.van-collapse-item__content {
-        font-size: .14rem;
-        color: #808080;
-    }
+  margin: 0.15rem 0;
+  /deep/.van-cell {
+    color: #1a1a1a;
+    font-size: 0.17rem;
+    padding: 0.15rem 0.16rem;
+  }
+  /deep/.van-collapse-item__content {
+    font-size: 0.14rem;
+    color: #808080;
+  }
+}
+/deep/.quillWrap {
+  img {
+    width: 100%;
+  }
+}
+.search {
+  border-top: 1px solid #f7f8fa;
 }
 </style>

src/views/app/HelpCenterDetail.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="KeepRepaireDetail">
+    <m-header background="white" v-if="headerStatus"> </m-header>
+    <h4 v-if="item && item.title">{{ item.title }}</h4>
+    <div class="concat" v-if="item && item.content" v-html="item.content"></div>
+    <van-image-preview
+      v-model="show"
+      :images="images"
+      :showIndex="false"
+    ></van-image-preview>
+  </div>
+</template>
+<script>
+import MHeader from "@/components/MHeader";
+import { browser } from "@/common/common";
+export default {
+  components: { MHeader },
+  data() {
+    return {
+      headerStatus: true,
+      item: null,
+      backUrl: {
+        callBack: () => {
+          if (browser().android) {
+            // eslint-disable-next-line
+            DAYA.postMessage(JSON.stringify({ api: "back" }));
+          } else if (browser().iPhone) {
+            window.webkit.messageHandlers.DAYA.postMessage(
+              JSON.stringify({ api: "back" })
+            );
+          }
+        },
+      },
+      images: [],
+      show: false,
+    };
+  },
+
+  mounted() {
+    document.title = "帮助中心";
+    if (browser().android || browser().iPhone) {
+      this.headerStatus = true;
+    }
+    let params = this.$route.query;
+    if (params.Authorization) {
+      localStorage.setItem("Authorization", decodeURI(params.Authorization));
+      localStorage.setItem("userInfo", decodeURI(params.Authorization));
+    }
+    this.item = JSON.parse(this.$route.query.item);
+    console.log(this.item);
+    window.showImg = (e) => {
+      if (e.src) {
+        this.images = [e.src];
+        this.show = true;
+      }
+    };
+  },
+};
+</script>
+<style lang="less">
+.KeepRepaireDetail {
+  background-color: #fff;
+  padding: 0.1rem;
+  h4 {
+    font-size: 0.18rem;
+    margin-bottom: 0.1rem;
+    font-weight: 500;
+  }
+  .concat {
+    font-size: 0.14rem;
+    color: #808080;
+    p {
+      margin-bottom: 0.1rem;
+    }
+    img {
+      vertical-align: middle;
+    }
+  }
+}
+</style>