前端升级

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "axios": "^0.26.1",
     "core-js": "^3.6.5",
+    "js-md5": "^0.7.3",
     "less": "^4.1.2",
     "less-loader": "7.3.0",
     "tailwindcss": "^3.0.23",

public/data/1.json

@@ -8,17 +8,16 @@
     },
     "main": {
       "title": "考察手册",
-      "nodes": [
-        {
+      "nodes": {
+        "logo": {
           "type": "image",
           "image": "https://ndzx.hqedust.com/file/image/logo.png",
           "style": "position: absolute; z-index: 111; top: 80px; width: 50vw; left: 50%;margin-left: -25vw;pointer-events:none;"
         },
-        {
+        "slider": {
           "type": "slider",
           "style": "height: 200px;",
-          "children": [
-            {
+          "children": [{
               "image": "https://ndzx.hqedust.com/file/image/slider1.jpg"
             },
             {
@@ -32,10 +31,9 @@
             }
           ]
         },
-        {
+        "matrix": {
           "type": "matrix",
-          "children": [
-            {
+          "children": [{
               "image": "https://ndzx.hqedust.com/file/image/matrix/1.jpg",
               "marks": "精彩宁德</br>视频",
               "link": "1"
@@ -57,13 +55,12 @@
             }
           ]
         }
-      ]
+      }
     },
-    "pages": [
-      {
+    "pages": {
+      "video": {
         "id": "1",
-        "nodes": [
-          {
+        "nodes": [{
             "type": "image",
             "image": "https://ndzx.hqedust.com/file/image/logo.png",
             "style": "width: 50%; margin: 3rem auto;"
@@ -88,10 +85,9 @@
           }
         ]
       },
-      {
+      "image": {
         "id": "2",
-        "nodes": [
-          {
+        "nodes": [{
             "type": "image",
             "image": "https://ndzx.hqedust.com/file/image/logo.png",
             "style": "width: 50%; margin: 3rem auto;"
@@ -134,41 +130,40 @@
           },
           {
             "type": "image",
-            "image":"https://ndzx.hqedust.com/file/image/20220319/7.jpg",
+            "image": "https://ndzx.hqedust.com/file/image/20220319/7.jpg",
             "desc": "宁德时代",
             "preview": true
           },
           {
             "type": "image",
-            "image":"https://ndzx.hqedust.com/file/image/20220319/11.jpg",
+            "image": "https://ndzx.hqedust.com/file/image/20220319/11.jpg",
             "desc": "山哈婚事-吴宁俊",
             "preview": true
           },
           {
             "type": "image",
-            "image":"https://ndzx.hqedust.com/file/image/20220319/13.jpg",
+            "image": "https://ndzx.hqedust.com/file/image/20220319/13.jpg",
             "desc": "太姥山岳-九鲤朝天",
             "preview": true
           },
           {
             "type": "image",
-            "image":"https://ndzx.hqedust.com/file/image/20220319/18.jpg",
+            "image": "https://ndzx.hqedust.com/file/image/20220319/18.jpg",
             "desc": "下党全景栾树花-龚健",
             "preview": true
           },
           {
             "type": "image",
-            "image":"https://ndzx.hqedust.com/file/image/20220319/19.jpg",
+            "image": "https://ndzx.hqedust.com/file/image/20220319/19.jpg",
             "desc": "郑戈航拍滩涂",
             "preview": true
           }
 
         ]
       },
-      {
+      "brief": {
         "id": "3",
-        "nodes": [
-          {
+        "nodes": [{
             "type": "image",
             "image": "https://ndzx.hqedust.com/file/image/logo.png",
             "style": "width: 50%; margin: 3rem auto;"
@@ -242,10 +237,9 @@
           }
         ]
       },
-      {
+      "trip": {
         "id": "4",
-        "nodes": [
-          {
+        "nodes": [{
             "type": "image",
             "image": "https://ndzx.hqedust.com/file/image/logo.png",
             "style": "width: 50%; margin: 3rem auto;"
@@ -262,10 +256,9 @@
           }
         ]
       },
-      {
+      "3-1": {
         "id": "3-1",
-        "nodes": [
-          {
+        "nodes": [{
             "type": "image",
             "image": "https://ndzx.hqedust.com/file/image/logo.png",
             "style": "width: 50%; margin: 3rem auto;"
@@ -286,10 +279,9 @@
           }
         ]
       },
-      {
+      "3-2": {
         "id": "3-2",
-        "nodes": [
-          {
+        "nodes": [{
             "type": "image",
             "image": "https://ndzx.hqedust.com/file/image/logo.png",
             "style": "width: 50%; margin: 3rem auto;"
@@ -315,10 +307,9 @@
           }
         ]
       },
-      {
+      "3-3": {
         "id": "3-3",
-        "nodes": [
-          {
+        "nodes": [{
             "type": "image",
             "image": "https://ndzx.hqedust.com/file/image/logo.png",
             "style": "width: 50%; margin: 3rem auto;"
@@ -349,10 +340,9 @@
           }
         ]
       },
-      {
+      "3-4": {
         "id": "3-4",
-        "nodes": [
-          {
+        "nodes": [{
             "type": "image",
             "image": "https://ndzx.hqedust.com/file/image/logo.png",
             "style": "width: 50%; margin: 3rem auto;"
@@ -378,10 +368,9 @@
           }
         ]
       },
-      {
+      "6": {
         "id": "6",
-        "nodes": [
-          {
+        "nodes": [{
             "type": "image",
             "image": "https://ndzx.hqedust.com/file/image/logo.png",
             "style": "width: 50%; margin: 3rem auto;"
@@ -396,10 +385,9 @@
           }
         ]
       },
-      {
+      "7": {
         "id": "7",
-        "nodes": [
-          {
+        "nodes": [{
             "type": "image",
             "image": "https://ndzx.hqedust.com/file/image/logo.png",
             "style": "width: 50%; margin: 3rem auto;"
@@ -414,10 +402,9 @@
           }
         ]
       },
-      {
+      "8": {
         "id": "8",
-        "nodes": [
-          {
+        "nodes": [{
             "type": "image",
             "image": "https://ndzx.hqedust.com/file/image/logo.png",
             "style": "width: 50%; margin: 3rem auto;"
@@ -432,10 +419,9 @@
           }
         ]
       },
-      {
+      "9": {
         "id": "9",
-        "nodes": [
-          {
+        "nodes": [{
             "type": "image",
             "image": "https://ndzx.hqedust.com/file/image/logo.png",
             "style": "width: 50%; margin: 3rem auto;"
@@ -446,51 +432,45 @@
           },
           {
             "type": "tabs",
-            "children": [
-              {
+            "children": [{
                 "title": "考察人员名单",
-                "nodes": [
-                  {
-                    "type": "table-texts",
-                    "texts": [
-                      ["李xx", "xx负责人 xxx负责人 xx负责人 xxx负责人 xx负责人 xxx负责人"],
-                      ["李xx", "xx负责人 xxx负责人"],
-                      ["李xx", "xx负责人 xxx负责人"],
-                      ["李xx", "xx负责人 xxx负责人"],
-                      ["李xx", "xx负责人 xxx负责人"],
-                      ["李xx", "xx负责人 xxx负责人"]
-                    ],
-                    "widths": ["0 0 60px", ""],
-                    "color": "#333"
-                  }
-                ]
+                "nodes": [{
+                  "type": "table-texts",
+                  "texts": [
+                    ["李xx", "xx负责人 xxx负责人 xx负责人 xxx负责人 xx负责人 xxx负责人"],
+                    ["李xx", "xx负责人 xxx负责人"],
+                    ["李xx", "xx负责人 xxx负责人"],
+                    ["李xx", "xx负责人 xxx负责人"],
+                    ["李xx", "xx负责人 xxx负责人"],
+                    ["李xx", "xx负责人 xxx负责人"]
+                  ],
+                  "widths": ["0 0 60px", ""],
+                  "color": "#333"
+                }]
               },
               {
                 "title": "陪同名单",
-                "nodes": [
-                  {
-                    "type": "table-texts",
-                    "texts": [
-                      ["李xx", "xx负责人 xxx负责人"],
-                      ["李xx", "xx负责人 xxx负责人"],
-                      ["李xx", "xx负责人 xxx负责人"],
-                      ["李xx", "xx负责人 xxx负责人"],
-                      ["李xx", "xx负责人 xxx负责人"],
-                      ["李xx", "xx负责人 xxx负责人 xx负责人 xxx负责人 xx负责人 xxx负责人"]
-                    ],
-                    "widths": ["0 0 60px", ""],
-                    "color": "#333"
-                  }
-                ]
+                "nodes": [{
+                  "type": "table-texts",
+                  "texts": [
+                    ["李xx", "xx负责人 xxx负责人"],
+                    ["李xx", "xx负责人 xxx负责人"],
+                    ["李xx", "xx负责人 xxx负责人"],
+                    ["李xx", "xx负责人 xxx负责人"],
+                    ["李xx", "xx负责人 xxx负责人"],
+                    ["李xx", "xx负责人 xxx负责人 xx负责人 xxx负责人 xx负责人 xxx负责人"]
+                  ],
+                  "widths": ["0 0 60px", ""],
+                  "color": "#333"
+                }]
               }
             ]
           }
         ]
       },
-      {
+      "10": {
         "id": "10",
-        "nodes": [
-          {
+        "nodes": [{
             "type": "image",
             "image": "https://ndzx.hqedust.com/file/image/logo.png",
             "style": "width: 50%; margin: 3rem auto;"
@@ -501,7 +481,7 @@
           },
           {
             "type": "bold-text",
-            "text": "10月27日(星期三)",
+            "text": "3月23日(星期三)",
             "align": "left",
             "style": "padding-left: 0.5rem"
           },
@@ -514,14 +494,14 @@
           {
             "type": "table-texts",
             "texts": [
-              ["08:45", "出发余杭区"],
-              ["09:30", "考察梦想小镇"],
-              ["08:45", "出发余杭区"],
-              ["09:30", "考察梦想小镇"],
-              ["08:45", "出发余杭区"],
-              ["09:30", "考察梦想小镇"],
-              ["08:45", "出发余杭区"],
-              ["09:30", "考察梦想小镇"]
+              ["08:45", "***"],
+              ["09:30", "***"],
+              ["08:45", "****"],
+              ["09:30", "****"],
+              ["08:45", "****"],
+              ["09:30", "*****"],
+              ["08:45", "*****"],
+              ["09:30", "*****"]
             ],
             "widths": ["0 0 60px", ""]
           },
@@ -533,7 +513,9 @@
           },
           {
             "type": "table-texts",
-            "texts": [["12:00", "午餐"]],
+            "texts": [
+              ["12:00", "午餐"]
+            ],
             "widths": ["0 0 60px", ""]
           }
         ]

src/App.vue

@@ -12,7 +12,7 @@
 <script>
 import Loading from '@/components/loading.vue';
 import EventBus from '@/utils/eventBus.js';
-
+import { mapGetters } from "vuex";
 export default {
   name: 'App',
   components: {
@@ -22,6 +22,9 @@ export default {
     EventBus.$on('preview', this.handlePreview);
     EventBus.$on('playVideo', this.handleVideoPlay);
   },
+  computed: {
+    ...mapGetters("pages", ["pages"])
+  },
   methods: {
     handleVideoPlay(e){
       document.querySelectorAll('video').forEach(video => {
@@ -29,16 +32,19 @@ export default {
       })
     },
     handlePreview(url){
-      const { data } = this.$store.state.pages;
-      const { pages, main } = data;
-      const { id = 'main' } = this.$route.params;
-      const page = pages.find(page => {
-        return page.id === id
-      }) || main;
-      if(!page) return;
-      let images = this.findPreviewImage(page);
-      if(!images || !images.length) return;
-      console.log('images', images);
+      console.log( "data", this.pages)
+      const { data } = this.pages;
+      
+      // const { pages, main } = data;
+      // const { id = 'main' } = this.$route.params;
+      // const page = pages.find(page => {
+      //   return page.id === id
+      // }) || main;
+      // if(!page) return;
+      let images = this.findPreviewImage(data);
+      // if(!images || !images.length) return;
+      // console.log('images', images);
+      // let images = [url];
       this.$previewImage({
         urls: images,
         startPosition: images.indexOf(url),

src/api/page.js

@@ -1,6 +1,23 @@
-export default {
-  fetch: {
-    url: '/data/{id}.json',
-    method: 'get',
-  }
+import request from './request.js'
+import md5 from 'js-md5'
+const secret = '117c0743819088468e590246464cc75e';
+const baseUrl ="https://ndzx.hqedust.com"
+
+export function fetch(action, data) {
+  let token = ''
+  let timestamp = Date.now()
+  action = action.toLowerCase()
+  let signstr = `weixin_${token}_${action}_${timestamp}_${secret}`
+  let signsure = md5( signstr )
+  let url = `${baseUrl}/weixin/${action}`
+  return request({
+    url: url,
+    method: 'post',
+    header:{
+        'Content-Type': 'application/json',
+        'x-signsure': signsure,
+        'x-timestamp': timestamp
+    },
+    data: data
+  })
 }

src/components/base.js

@@ -1,3 +1,4 @@
+// import { mapGetters } from "vuex";
 export default {
   name: 'v-base',
   props: {
@@ -5,6 +6,8 @@ export default {
   },
   methods: {
     click(link) {
+      console.log("link", link)
+      if( !link || link=="0" ) return;
       if(['string', 'number'].indexOf(typeof link) === -1) {
         const event = link;
         link = this.options.link;
@@ -12,7 +15,6 @@ export default {
           event.stopPropagation();
         }
       }
-
       if(link === undefined) return;
       this.$router.push({
         name: 'page',

src/components/video.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="video-wrapper mb-4 last:mb-0">
     <component v-if="options.title" :is="getComponent(options.title)" :options="options.title"></component>
+    <div class="mb-6 mx-auto" v-else-if="options.image">
+      <img class="mb-1" :src="options.image" />
+    </div>
     <video @play="handlePlay" webkit-playsinline playsinline x-webkit-airplay x5-playsinline preload="preload" :poster="options.poster" controls :src="options.video"></video>
   </div>
 </template>

src/router/index.js

@@ -13,7 +13,8 @@ export default new VueRouter({
       redirect: '/page/main',
     },
     {
-      path: '/page/:id', component: Page,
+      path: '/page/:id', 
+      component: Page,
       name: 'page',
     },
     {

src/store/pages.js

@@ -8,7 +8,11 @@ const state = {
   data: undefined,
 };
 
-const getters = {};
+const getters = {
+  pages(state) {
+    return state.data
+  }
+};
 
 const actions = {
   fetch({ commit }, data) {
@@ -20,11 +24,16 @@ const actions = {
     }).then(res => {
       commit(SET_PAGES, res);
     })
+  },
+  setPage({ commit }, page) {
+    console.log("setPage", page);
+    commit( SET_PAGES, page );
   }
 };
 
 const mutations = {
   [SET_PAGES](state, payload) {
+    console.log("SET_PAGES", payload);
     state.loaded = true;
     state.data = payload;
   }

src/views/page.vue

@@ -18,14 +18,25 @@
 <script>
 import EventBus from '@/utils/eventBus.js';
 import QR from '../plugins/qr';
+import {fetch} from '@/api/page.js'
+import {mapActions} from 'vuex'
 
 export default {
   data(){
     return {
-      id: 1,
       loading: false,
       page: undefined,
       isMain: false,
+      background:"",
+      interval: 3000,
+      logo: "",
+      uuid:'',
+      nodeList: [],
+      itemList: [],
+      paperId: 1,
+      nodeId: 0,
+      slider: [],
+      title: "",
       isMobile: /mobile/i.test(navigator.userAgent),
       error: false,
     }
@@ -38,14 +49,13 @@ export default {
   watch: {
     loading(val) {
       EventBus.$emit('loading', val);
+    },
+    $route(){
+      this.dispath()
     }
   },
   created(){
-    if(!this.loaded) {
-      this.init();
-    } else {
-      this.getPageInfo();
-    }
+    this.dispath()
   },
   mounted(){
     if(!this.isMobile) {
@@ -55,37 +65,70 @@ export default {
     }
   },
   methods: {
+    ...mapActions('pages', ['setPage']),
+    dispath(){
+      const { id } = this.$route.params;
+      if( id == "main"){
+        this.uuid = ""
+        this.paperId = 0
+        this.init()
+      }else if( id.length == 32 ){
+        this.uuid = id
+        this.paperId = 0
+        this.init()
+      }else{
+        this.nodeId = +id;
+        this.getPageInfo();
+      }
+    },
     init(){
-      this.id = this.$route.query.id||1;
-      // const match = location.search.match(/id=(\w+)(?:&|$)/);
-      // if(!match) {
-      //   this.error = true;
-      //   return;
-      // }
+      let {paperId,uuid} = this.uuid;
       if(this.loading) return;
       this.loading = true;
-      this.$store.dispatch('fetch', { id: this.id }).then(() => {
+      fetch("paper.getpaperinfo", {paperId,uuid}).then((res) => {
         this.loading = false;
-        this.getPageInfo();
+        this.isMain = true
+        let {nodes, slider} = res;
+        this.page = res;
+        this.page.nodes = {
+          logo: {
+            type: "image",
+            image: res.logo,
+            style: "position: absolute; z-index: 111; top: 80px; width: 50vw; left: 50%;margin-left: -25vw;pointer-events:none;"
+          },
+          slider:{
+            type: "slider",
+            style: "height: 200px;",
+            children: slider.split(",").map((url)=>{
+              return {image: url}
+            })
+          },
+          matrix: {
+            type: "matrix",
+            style: "height: 200px;",
+            children: nodes
+          }
+        }
+        this.setPage(this.page);
+        res.title && (document.title = res.title);
       }).catch(() => {
         this.loading = false;
         this.error = true;
       })
     },
     getPageInfo() {
-      const { data } = this.$store.state.pages;
-      const { pages, main, config = {} } = data;
-      const { id = 'main' } = this.$route.params;
-      let page = pages.find(page => {
-        return page.id === id
-      });
-      if(!page) {
-        page = main;
-        this.isMain = true;
-      }
-      this.page = { ...config, ...page };
-      const { title } = this.page;
-      title && (document.title = title);
+      let nodeId = this.nodeId;
+      if( !nodeId ) return;
+      fetch("paper.getnodeinfo", {nodeId}).then((res) => {
+        this.isMain = false
+        this.page = res
+        this.setPage(res);
+        res.title && (document.title = res.title);
+      }).catch((res) => {
+        console.log("catch", res);
+        this.loading = false;
+        this.error = true;
+      })
     },
     back(){
       this.$router.back();

vue.config.js

@@ -1,3 +1,4 @@
+const TARGET = "https://ndzx.hqedust.com/"
 module.exports = {
-  publicPath: '/',
+  publicPath: '/'
 }