h5 兼容小程序修改

e80445bf · hank · 3941d1cb · e80445bf · e80445bf · e80445bf
Commit e80445bf authored Sep 29, 2019 by hank
Hide whitespace changes
Inline Side-by-side

Showing with 117 additions and 78 deletions

src/api/api.js
+8 -0

src/router/index.js
+2 -2

src/views/tempaltes/editMore.vue
+20 -63

src/views/tempaltes/filmDetail.vue
+79 -11

src/views/tempaltes/filmDevice.vue
+8 -2

No files found.
--- a/src/api/api.js
+++ b/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}`)

--- a/src/router/index.js
+++ b/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: '/' })

--- a/src/views/tempaltes/editMore.vue
+++ b/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="top-right">
-            <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">
            <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"
@@ -50,7 +44,7 @@
            slot-scope="scope"
            @click="goPage(scope.index)"
          >
-            <img :src="scope.slider.thumb" alt />
+            <img :src="scope.slider.thumb"  alt />
            <div class="page-name">{{scope.slider.name}}</div>
          </div>
        </slider>
@@ -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;

--- a/src/views/tempaltes/filmDetail.vue
+++ b/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第三季度展示",
+        filmName: "",
-        templateName: "企业文化",
+        templateName: "",
-        filmDescribe: "该模板可用于展示企业文化，包括企业简介，照片墙等",
+        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",
@@ -146,7 +205,7 @@ export default {
 <style lang="scss" scoped>
 .edit-container {
-   padding-bottom: 50px;
+  padding-bottom: 50px;
  .bgeee {
    width: 100%;
    background: #eee;
@@ -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 {
@@ -197,7 +265,7 @@ export default {
      // display: flex;
      justify-content: space-between;
      padding: 20px;
      .device-item {
        background: white;
        display: flex;

--- a/src/views/tempaltes/filmDevice.vue
+++ b/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)