desc 只在table-texts 使用

package-lock.json

@@ -12801,6 +12801,27 @@
       "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
       "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw=="
     },
+    "vuex-persist": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmmirror.com/vuex-persist/-/vuex-persist-3.1.3.tgz",
+      "integrity": "sha512-QWOpP4SxmJDC5Y1+0+Yl/F4n7z27syd1St/oP+IYCGe0X0GFio0Zan6kngZFufdIhJm+5dFGDo3VG5kdkCGeRQ==",
+      "requires": {
+        "deepmerge": "^4.2.2",
+        "flatted": "^3.0.5"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-4.2.2.tgz",
+          "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+        },
+        "flatted": {
+          "version": "3.2.5",
+          "resolved": "https://registry.npmmirror.com/flatted/-/flatted-3.2.5.tgz",
+          "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg=="
+        }
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-1.7.5.tgz",

package.json

@@ -19,7 +19,8 @@
     "vue-preview-image-mobile": "^0.1.1",
     "vue-router": "3.5.3",
     "vue-swiper-component": "^2.1.3",
-    "vuex": "3.6.2"
+    "vuex": "3.6.2",
+    "vuex-persist": "^3.1.3"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.4.5",

src/App.vue

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

src/components/base.js

@@ -6,16 +6,14 @@ 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;
-        if(link) {
-          event.stopPropagation();
-        }
+      let isLink = ['string', 'number'].indexOf(typeof link) == -1;
+      if(!isLink || !link || link=="0" ) return;
+      const event = link;
+      link = this.options.link;
+      if(link) {
+        event.stopPropagation();
       }
-      if(link === undefined) return;
+      if(!link || link =="0") return;
       this.$router.push({
         name: 'page',
         params: {

src/components/image.vue

@@ -19,12 +19,13 @@ export default {
   extends: Base,
   computed: {
     descOptions(){
-      const { desc } = this.options;
-      if(!desc) return;
+      const { desc, text} = this.options;
+      let title = desc||text;
+      if(!title) return;
       return {
         color: '#333',
         size: 0.9,
-        ...(typeof desc === 'string' ? { text: desc } : desc),
+        ...(typeof title === 'string' ? { text: title } : title),
       }
     }
   },

src/components/tableTexts.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="table-texts mb-4 last:mb-0" :style="styles">
-    <div class="flex justify-start" v-for="(texts, index) in options.texts" :key="index">
+  <div class="table-texts mb-4 last:mb-0" :style="options.style">
+    <div class="flex justify-start" v-for="(texts, index) in getDesc(options.desc)" :key="index">
       <td class="px-2 py-1" :style="getCellStyle(key)" v-for="(text, key) in texts" :key="key">{{ text }}</td>
     </div>
   </div>
@@ -13,15 +13,6 @@ export default {
   name: 'v-table-texts',
   extends: Base,
   computed: {
-    styles() {
-      const { color, size, bold, align = 'left', style } = this.options;
-      return mixinStyle({
-        'font-size': size && `${size}rem`,
-        color,
-        'text-align': align,
-        'font-weight': bold ? 'bold' : undefined,
-      }, style);
-    },
     cellStyle() {
       const { vertical = 'top', cellStyle } = this.options;
       return mixinStyle({
@@ -30,8 +21,14 @@ export default {
     },
   },
   methods: {
+    getDesc( desc="" ){
+      let table =  desc.split(";").map( (item)=> {return item.split("|")} );
+      console.log("table", table);
+      return table;
+    },
     getCellStyle(index){
-      const { widths, cellStyle } = this.options;
+      let  widths = ["0 0 60px", ""];
+      let cellStyle = "";
       return mixinStyle({
         flex: widths[index],
       }, cellStyle);

src/components/tabs.vue

@@ -9,11 +9,11 @@
         @click="handleActive(index)"
         :style="tabStyle"
       >
-        {{ tab.title }}
+        {{ tab.text }}
       </div>
     </div>
     <div>
-      <v-view inner :key="active" :options="{ nodes: options.children[active].nodes }"></v-view>
+      <v-view inner :key="active" :options="{nodes: [options.children[active]]}"></v-view>
     </div>
   </div>
 </template>

src/main.js

@@ -1,7 +1,7 @@
 import './tailwind.css';
 import Vue from 'vue';
-import router from './router';
-import store from './store';
+import router from '@/router/index'
+import store from './store'
 import components from './components';
 import PreviewImage from 'vue-preview-image-mobile';
 import 'vue-preview-image-mobile/packages/preview-image/index.less'

src/router/index.js

@@ -10,10 +10,10 @@ export default new VueRouter({
   routes: [
     {
       path: '/',
-      redirect: '/page/main',
+      redirect: '/page/679773f089e7bbf1b50a43e2c83645be/main',
     },
     {
-      path: '/page/:id', 
+      path: '/page/:uuid/:id', 
       component: Page,
       name: 'page',
     },

src/store/pages.js

@@ -1,8 +1,4 @@
-import request from '@/api/request';
-import PAGE from '@/api/page';
-
 const SET_PAGES = 'SET_PAGES';
-
 const state = {
   loaded: false,
   data: undefined,
@@ -15,19 +11,9 @@ const getters = {
 };
 
 const actions = {
-  fetch({ commit }, data) {
-    const { url, method } = PAGE.fetch;
-    return request({
-      // ...PAGE.fetch,
-      method,
-      url: url.replace('{id}', data.id),
-    }).then(res => {
-      commit(SET_PAGES, res);
-    })
-  },
-  setPage({ commit }, page) {
-    console.log("setPage", page);
-    commit( SET_PAGES, page );
+  setPage({ commit }, pages) {
+    console.log("setPage", pages);
+    commit( SET_PAGES, pages );
   }
 };
 

src/views/page.vue

@@ -19,7 +19,6 @@
 import EventBus from '@/utils/eventBus.js';
 import QR from '../plugins/qr';
 import {fetch} from '@/api/page.js'
-import {mapActions} from 'vuex'
 
 export default {
   data(){
@@ -51,14 +50,15 @@ export default {
       EventBus.$emit('loading', val);
     },
     $route(){
+      this.getPageInfo();
     }
   },
   created(){
-    let {id } = this.$route.params;
-    if(id=="main") id = '679773f089e7bbf1b50a43e2c83645be';
-    this.uuid = id
-    console.log("uuid", id)
-    this.init()
+    if(!this.loaded) {
+      this.init();
+    } else {
+      this.getPageInfo();
+    }
   },
   mounted(){
     if(!this.isMobile) {
@@ -68,19 +68,29 @@ export default {
     }
   },
   methods: {
-    ...mapActions('pages', ['setPage']),
+    getPageInfo() {
+      const { data } = this.$store.state.pages;
+      console.log("getinfo", data)
+      const { pages, main } = data;
+      const { id = 'main'} = this.$route.params;
+      let page = pages[id]||{};
+      this.isMain = (id == 'main');
+      this.page = { ...main, ...page };
+      const { title } = this.page;
+      title && (document.title = title);
+    },
     init(){
-      let uuid = this.uuid;
+      let {uuid} = this.$route.params;
+      console.log("loadData", uuid);
       if(this.loading) return;
       this.loading = true;
       fetch("paper.getpaper", {uuid}).then((res) => {
         this.loading = false;
-        this.isMain = true
-        console.log( res, res)
-        this.page = res;
-        this.setPage(this.page);
+        this.$store.dispatch('setPage', res);
         res.title && (document.title = res.title);
-      }).catch(() => {
+        this.getPageInfo()
+      }).catch((err) => {
+        console.log("err", err)
         this.loading = false;
         this.error = true;
       })