h5 兼容小程序修改

src/api/api.js

@@ -119,6 +119,14 @@ export function updateFilmInfo(filmId, filmData, filmName, filmDescribe) {
     filmDescribe
   })
 }
+export function updateBaseFilmInfo(filmId, filmName, filmDescribe) {
+  // 更新视片基本信息
+  return post('/template/update/film/base/info', {
+    filmId,
+    filmName,
+    filmDescribe
+  })
+}
 export function deleteFilm(filmId) {
   // 删除视片
   return get(`/template/del/film/info/${filmId}`)

src/router/index.js

 import Vue from 'vue'
 import Router from 'vue-router'
-import { setToken } from '@/utils/auth'
+import { setToken, getToken } from '@/utils/auth'
 // import Home from '@/views/Home.vue'
 import Login from '@/views/login/index.vue'
 import User from '@/views/user/index.vue'
@@ -103,7 +103,7 @@ router.beforeEach((from, to , next) => {
     setToken(from.query.token)
   }
   console.log('路由拦截', to.query, from.query)
-  if(window.localStorage.getItem('login') ) {
+  if(window.localStorage.getItem('login') || getToken()) {
     if(from.path === '/login' ) {
       // console.log('login from.path')
       next({ path: '/' })

src/views/tempaltes/editMore.vue

 
 <template>
   <div class="edit-container">
-    <NavBar title="编辑视片" left-arrow>
+    <NavBar title="编辑视片" v-if="!is_mini_token" left-arrow>
       <div @click="pageShow">页面管理</div>
     </NavBar>
     <div class="content">
       <div class="content-left">
         <div class="content-left-top">
-          <!-- <div class="top-left">
-
-            <div class="left-item" @click="preview">
-              <van-icon name="eye-o" />预览
-            </div>
-            <div class="left-item" @click="pub">
-              <svg-icon icon-class="guide" />发布
-            </div>
-          </div>-->
-          <div class="top-right">
+          <!-- <div class="top-right">
             <span class="im">*</span>
             视片名称：
             <input type="text" v-model="templateData.filmName" />
@@ -24,7 +15,7 @@
               视片描述：
               <input type="text" v-model="templateData.filmDescribe" />
             </div>
-          </div>
+          </div> -->
         </div>
         <iframe
           class="iframe"
@@ -33,6 +24,9 @@
           @click.prevent
           scrolling="no"
           style="height:70vw;"
+          :style="
+            templateData.templateShow === 'VERTICAL' ? 'height:130vw;' : 'height:70vw;'
+          "
           v-show="!isPreview"
           @load="setList"
           :src="templateData.frameUrl+'?isEdit=1&filmId='+templateData.filmId + '&now=' + date"
@@ -64,53 +58,6 @@
       <div class="content-right">
         <div class="title">编辑栏</div>
         <div class="edit-area">
-          <div v-if="false">
-            <van-collapse v-model="activeName" accordion>
-              <van-collapse-item
-                v-for="(item, index) of templateData.listData[currentPage].itemList"
-                :key="index"
-                :title="item.name"
-                :name="index"
-              >
-                <div>
-                  <img
-                    v-if="item.type ===  'image'"
-                    class="image"
-                    :src="templateData.listData[currentPage].schemaData[item.dataKey].value"
-                    alt
-                  />
-                  <input
-                    v-if="item.type ===  'text'"
-                    class="edit-input"
-                    type="text"
-                    v-model="templateData.listData[currentPage].schemaData[item.dataKey].value"
-                    @keyup="valueChange2()"
-                  />
-                  <br />
-                  <div class="list-container" v-if="item.type === 'list'">
-                    {{item.itemList}}
-                    <div
-                      class="list-item"
-                      v-for="(item2, index2) in templateData.listData[currentPage].schemaData[item.dataKey]"
-                      :key="index2"
-                    >
-                      <div class="list-item-list" v-for="(item3, index3) in item2" :key="index3">
-                        <input
-                          v-if="index3 != 'index'"
-                          class="edit-input"
-                          type="text"
-                          v-model="item2[index3]"
-                          @keyup="valueChange2()"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                  <button v-if="item.type ===  'image'">上传</button>
-                  <button v-if="item.type ===  'video'">上传</button>
-                </div>
-              </van-collapse-item>
-            </van-collapse>
-          </div>
           <div v-if="templateData.listData[currentPage]">
             <editMenu
               v-if="loaded "
@@ -226,6 +173,7 @@ export default {
     return {
       activeName: "0",
       canvasImg: "",
+      is_mini_token: false,
       templateData: {
         height: 450,
         width: 800,
@@ -234,6 +182,7 @@ export default {
         filmName: "",
         filmDescribe: "",
         filmId: "",
+        templateShow: '',
         frameUrl: "",
         listData: [{}],
         defaultData: [],
@@ -269,6 +218,10 @@ export default {
   },
   created() {
     let vm = this;
+
+    if(sessionStorage.getItem('is_mini_token')) {
+      this.is_mini_token = true
+    }
     window.addEventListener(
       "message",
       function(e) {
@@ -308,7 +261,9 @@ export default {
      next();
     }
   },
-  mounted() {},
+  mounted() {
+    document.title = '编辑视片'
+  },
   methods: {
     message(data) {
       window.frames[0].postMessage(data, "https://visual-clouds.bdideal.com");
@@ -454,6 +409,7 @@ export default {
         this.templateData.resourceUrl = res.data.resourceUrl;
         this.templateData.frameUrl = res.data.frameUrl;
         this.templateData.filmDescribe = res.data.filmDescribe;
+        this.templateData.templateShow = res.data.templateShow;
         this.templateData.listData = JSON.parse(res.data.filmData).pageList;
         this.templateData.templateInfo = JSON.parse(res.data.filmData).templateInfo
         // this.setList()
@@ -613,10 +569,10 @@ export default {
       .menu-item {
         position: relative;
         width: 80px;
-        height: 70px;
+        min-height: 70px;
         img {
           border: 1px dashed #666;
-          height: 45px;
+          width: 100%;
           box-sizing: border-box;
         }
         // line-height: 65px;
@@ -869,6 +825,7 @@ export default {
     left: 0;
     right: 0;
     display: flex;
+    z-index: 100;
     justify-content: space-between;
     background: white;
     box-sizing: border-box;

src/views/tempaltes/filmDetail.vue

 <template>
   <div class="edit-container">
-    <NavBar title="视片详情" left-arrow></NavBar>
+    <NavBar title="视片详情" v-if="!is_mini_token" left-arrow></NavBar>
     <div class="content">
       <div class="thumbs">
-        <van-swipe>
+        <van-swipe @change="onChange">
           <van-swipe-item
             class="thumb-item"
             v-for="(thumbs, index) in templateData.templateUrl"
@@ -17,7 +17,11 @@
             slot="indicator"
           >{{ current + 1 }}/{{templateData.templateUrl.length}}</div>
         </van-swipe>
-        <div class="temp-name pl15">{{templateData.filmName}}</div>
+
+        <div class="temp-name pl15">
+          {{templateData.filmName}}
+          <div class="temp-edit" @click="showEdit">编辑</div>
+        </div>
         <div class="temp-des pl15">
           {{
           templateData.filmDescribe}}
@@ -45,13 +49,28 @@
       <van-button type="info" style="width:45%" @click="goEdit">修改视片</van-button>
       <van-button type="info" @click="goDevices" style="width:45%">更新绑定设备</van-button>
     </div>
-   
+    <van-dialog :before-close="beforeClose" v-model="show" title="视片信息" show-cancel-button>
+      <div class="tips">*视片名称:</div>
+      <input placeholder="请输入视片名称" v-model="templateData.filmName" class="film-name" type="text" />
+      <br />
+      <div class="tips">视片描述:</div>
+      <input
+        placeholder="请输入视片描述"
+        v-model="templateData.filmDescribe"
+        class="film-name"
+        type="text"
+      />
+    </van-dialog>
   </div>
 </template>
 
 <script>
 import NavBar from "@/views/layout/navbar";
-import { getFilmDetail, getFilmDeviceList } from "@/api/api";
+import {
+  getFilmDetail,
+  getFilmDeviceList,
+  updateBaseFilmInfo
+} from "@/api/api";
 
 export default {
   data() {
@@ -60,6 +79,7 @@ export default {
       current: 0,
       page: 1,
       list: [],
+      is_mini_token: false,
       loading: false,
       finished: false,
       templateData: {
@@ -69,9 +89,9 @@ export default {
         frameId: "string",
         filmId: "",
         templateUrl: "",
-        filmName: "企业文化2019第三季度展示",
-        templateName: "企业文化",
-        filmDescribe: "该模板可用于展示企业文化，包括企业简介，照片墙等",
+        filmName: "",
+        templateName: "",
+        filmDescribe: "",
         frameUrl:
           "https://visual-clouds.bdideal.com/html/156050648981560a2f35feda34d66afe6765526670da2.html",
         listData: []
@@ -79,6 +99,10 @@ export default {
     };
   },
   created() {
+    if (this.$route.query.token) {
+      sessionStorage.setItem("is_mini_token", this.$route.query.token);
+      this.is_mini_token = true;
+    }
     if (this.$route.query.filmId) {
       this.mode = "film";
       this.getFilmDetail();
@@ -88,7 +112,9 @@ export default {
       this.getTempalteDetail();
     }
   },
-  mounted() {},
+  mounted() {
+    document.title = "视片详情";
+  },
   methods: {
     getFilmList() {
       getFilmDeviceList(this.$route.query.filmId, this.page)
@@ -117,10 +143,43 @@ export default {
         this.templateData.listData = JSON.parse(res.data.filmData);
       });
     },
+    onChange(index) {
+      console.log(index);
+      this.current = index + 1;
+    },
     onLoad() {
       this.getFilmList();
       this.page++;
     },
+    showEdit() {
+      this.show = true;
+    },
+    beforeClose(action, done) {
+      console.log(action);
+      if (action === "confirm") {
+        if (!this.templateData.filmName) {
+          this.$toast("请输入视片名称");
+          done(false);
+        } else {
+          updateBaseFilmInfo(
+            this.$route.query.filmId,
+            this.templateData.filmName,
+            this.templateData.filmDescribe
+          ).then(() => {
+            done();
+            this.$toast.success("更新成功");
+            this.show = false;
+            // updateFilmInfo(res.data.filmId, "数据").then(res => {
+            //   console.log(res, "更新视片成功");
+            //   this.$router.back();
+            // });
+            // this.$router.back();
+          });
+        }
+      } else {
+        done();
+      }
+    },
     goDevices() {
       this.$router.push({
         path: "/tempaltes/filmdevice",
@@ -155,6 +214,7 @@ export default {
     // display: flex;
     text-align: left;
     justify-content: space-between;
+    position: relative;
     .thumbs {
       padding-bottom: 10px;
       .pl15 {
@@ -179,12 +239,20 @@ export default {
       .temp-name {
         font-size: 18px;
         color: #333333;
+        position: relative;
       }
       .temp-des {
         font-size: 14px;
         color: #bbb;
         line-height: 28px;
       }
+      .temp-edit {
+        position: absolute;
+        font-size: 14px;
+        right: 20px;
+        top: 0;
+        color: #fe9110;
+      }
     }
     .myfilms {
       .title {

src/views/tempaltes/filmDevice.vue

 <template>
   <div class="edit-container">
-    <NavBar title="视片设备列表" left-arrow></NavBar>
+    <NavBar title="视片设备列表" v-if="!is_mini_token" left-arrow></NavBar>
     <div class="content">
       <div class="myfilms">
         <div class="title">
@@ -101,6 +101,7 @@ export default {
       current: 0,
       page: 1,
       isCheck: [],
+      is_mini_token: false,
       list: [],
       deviceList: [],
       deviceChecked: [],
@@ -109,6 +110,9 @@ export default {
     };
   },
   created() {
+    if(sessionStorage.getItem('is_mini_token')) {
+      this.is_mini_token = true;
+    }
     this.getFilmAddDeviceList();
   },
   computed: {
@@ -123,7 +127,9 @@ export default {
       });
     }
   },
-  mounted() {},
+  mounted() {
+    document.title = '视片设备列表'
+  },
   methods: {
     getFilmList() {
       getFilmDeviceList(this.$route.query.filmId, this.page)