修改编辑页面ui

src/views/tempaltes/editMenu.vue

@@ -284,11 +284,11 @@ export default {
   }
 }
 input {
-  margin-top: 17px;
+  margin-top: 15px;
   display: block;
   width: 50vw;
-  height: 39px;
-  padding-left: 8px;
+  height: 42px;
+  padding-left: 10px;
   border: none;
 }
 .checkbox {
@@ -308,8 +308,10 @@ input {
 }
 .edit-input {
   width: 97%;
-  border: 1px solid #d0d0d0;
-  color: #333333;
+  background: #f5f5f5;
+  border-radius: 6px;
+  font-size: 14px;
+  color:rgba(51,51,51,1);
   margin-top: 0;
 }
 </style>

src/views/tempaltes/editMore.vue

@@ -129,19 +129,26 @@
       </g>
     </svg>
     <div class="content" v-show="gifloaded">
-      <div class="content-left">
+      <div class="content-left" :class="{'content-left-v': templateData.templateShow === 'VERTICAL' }">
         <div class="content-left-top">
-          <van-button size="mini" @click="createPage(currentPage)">新增此页</van-button>
-          <van-button size="mini" @click="deletePage(currentPage)">删除此页</van-button>
-          <van-button size="mini" @click="pageShow">页面排序</van-button>
-          <van-button size="mini" @click="preview">预览</van-button>
+          <div class="page-manager" @click="showSheet = true">
+            <img src="../../assets/img//manager.png" alt />
+            页面管理
+          </div>
+          <div class="page-count">
+            <div class="count">{{ currentPage + 1 + '/' + templateData.listData.length}}</div>
+          </div>
+          <div class="page-preview" @click="preview">预览 <img src="../../assets/img/right-arrow.png" alt=""></div>
+          <!-- <van-button size="mini" @click="createPage(currentPage)">新增此页</van-button>
+          <van-button size="mini" @click="deletePage(currentPage)">删除此页</van-button>-->
+          <!-- <van-button size="mini" @click="pageShow">页面排序</van-button> -->
+          <!-- <van-button size="mini" @click="preview">预览</van-button> -->
         </div>
         <iframe
           class="iframe"
           v-if="loaded"
           scrolling="no"
-          style="height:70vw;width: 100vw;"
-          :style="templateData.templateShow === 'VERTICAL' ? 'height:100vw;' : 'height:60vw;'"
+          :class="{'viframe': templateData.templateShow === 'VERTICAL' }"
           v-show="!isPreview"
           @load="iframeLoad"
           :src="templateData.frameUrl+'?isEdit=1&filmId='+templateData.filmId + '&now=' + time"
@@ -169,12 +176,8 @@
             @click="goPage(scope.index)"
           >
             <img :src="scope.slider.thumb" alt />
-            <div class="page-name">{{scope.slider.name}}</div>
           </div>
         </slider>
-        <div class="page-manage-right">
-          <div>共{{templateData.listData.length}}页</div>
-        </div>
       </div>
       <div class="content-right">
         <div class="title">编辑栏</div>
@@ -192,42 +195,9 @@
       </div>
     </div>
     <div class="createBtn" v-show="gifloaded">
-      <van-button
-        type="info"
-        @click="enterSubmit"
-        v-show="!templateData.filmId"
-        style="width: 100%"
-      >下一步</van-button>
-      <van-button type="info" @click="enterSubmit" v-show="templateData.filmId">保存作品</van-button>
-      <van-button type="info" @click="navToWx" v-show="templateData.filmId">选择设备</van-button>
+      <van-button type="info" @click="enterSubmit" style="width: 100%">发布</van-button>
     </div>
-    <van-popup v-model="show" position="bottom">
-      <div class="pub-container">
-        <div class="top">
-          <van-icon name="arrow-left" @click="closeEdit"></van-icon>
-        </div>
-        <div class="edit-input">
-          <div>{{editObj.name}}:</div>
-          <input
-            type="text"
-            :disabled="editObj.type !== 'text'"
-            v-model="editObj.value"
-            @keyup="valueChange"
-            @change="valueChange"
-          />
-          <br />
-          <div class="upload-btn">
-            <van-uploader
-              result-type="dataUrl"
-              v-if="editObj.type == 'image'"
-              :after-read="uploadAfter"
-            >
-              <van-button icon="photo" type="info">上传图片</van-button>
-            </van-uploader>
-          </div>
-        </div>
-      </div>
-    </van-popup>
+    <van-action-sheet v-model="showSheet" :round="true" :actions="actions" @select="onSheetSelect" />
     <van-popup v-model="isPreview" style="width:100%">
       <preview v-if="isPreview" :myonClickLeft="colsePreview"></preview>
     </van-popup>
@@ -286,6 +256,12 @@ export default {
       gifloaded: false,
       is_mini_token: false,
       time: new Date().getTime(),
+      showSheet: false,
+      actions: [
+        { name: "新增此页", action: "createPage" },
+        { name: "删除此页", action: "deletePage" },
+        { name: "页面排序", action: "pageShow" }
+      ],
       templateData: {
         height: 450,
         width: 800,
@@ -415,6 +391,17 @@ export default {
           document.body.appendChild(newImg);
         });
     },
+    onSheetSelect(item) {
+      this.showSheet = false;
+      if (item.action === "createPage") {
+        this.createPage(this.currentPage);
+      } else if (item.action === "deletePage") {
+        this.deletePage(this.currentPage);
+      } else if (item.action === "pageShow") {
+        this.pageShow();
+      }
+      console.log(item);
+    },
     dragChange(value) {
       console.log("dragChange", value);
       this.message({
@@ -556,7 +543,7 @@ export default {
           this.templateData.templateInfo = JSON.parse(
             res.data.filmData
           ).templateInfo;
-          this.templateData = JSON.parse(JSON.stringify(this.templateData))
+          this.templateData = JSON.parse(JSON.stringify(this.templateData));
           // this.setList()
           axios
             .get(
@@ -571,7 +558,7 @@ export default {
               this.templateData.defaultData = pagesData;
             });
           this.loaded = true;
-          this.$toast('数据加载完成')
+          this.$toast("数据加载完成");
           // console.log()
           // this.setList()
         });
@@ -587,7 +574,7 @@ export default {
         this.templateData.filmDescribe = res.data.templateDescribe;
         this.templateData.templateShow = res.data.templateShow;
         this.loaded = true;
-        this.$toast('数据加载完成')
+        this.$toast("数据加载完成");
         axios
           .get(
             res.data.resourceUrl.replace(
@@ -626,7 +613,7 @@ export default {
           this.show = false;
           this.$toast.success("更新成功");
           // window.sessionStorage.setItem("filmId");
-          // this.navToWx(filmId);
+          this.navToWx(filmId);
           // this.$router.back();
         });
       } else {
@@ -728,7 +715,8 @@ export default {
 <style lang="scss" scoped>
 .edit-container {
   overflow-x: hidden;
-  min-height: 100%;
+  min-height: 100vh;
+  box-sizing: border-box;
   .page-content-tips {
     text-align: center;
     font-size: 13px;
@@ -742,14 +730,14 @@ export default {
   }
   .content {
     // display: flex;
-    justify-content: space-between;
+    // justify-content: space-between;
 
     .content-menu {
       display: flex;
       // height: calc(100vh - 96px);
       background: #fff;
-      padding: 20px;
-      padding-right: 0;
+      padding: 10px;
+      padding-right: 10px;
       width: 100%;
       box-sizing: border-box;
       overflow: auto;
@@ -769,16 +757,13 @@ export default {
           text-decoration: underline;
         }
       }
-      .swiper-container {
-        width: calc(100% - 60px);
-      }
       .swiper-slide {
         width: auto;
       }
       .menu-item {
         position: relative;
         width: 80px;
-        min-height: 70px;
+        min-height: 50px;
         img {
           border: 1px dashed #666;
           width: 100%;
@@ -795,7 +780,7 @@ export default {
       }
       .activePage {
         img {
-          border: 1px solid red;
+          border: 2px solid red;
         }
       }
       .sortable-chosen {
@@ -806,17 +791,61 @@ export default {
       // padding-top: 10px;
       flex: 1;
       // padding: 40px 40px 0 30px;
-      background: #eeeeee;
+      background: #f5f5f5;
       // height: calc(100vh - 96px);
       box-sizing: border-box;
       text-align: left;
+      padding-bottom: 25px;
       .content-left-top {
-        background-color: #fff;
+        // background-color: #fff;
         display: flex;
-        font-size: 21px;
         color: #333333;
-        justify-content: center;
-        padding: 5px 10px;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20px 16px;
+        font-size: 14px;
+        .page-manager {
+          display: flex;
+          flex: 1;
+          align-items: center;
+          img {
+            width: 16px;
+            height: 15px;
+            margin-right: 7px;
+          }
+          font-size: 14px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: bold;
+          color: rgba(0, 0, 0, 1);
+        }
+        .page-count {
+          .count {
+            font-size: 12px;
+            background: rgba(216, 216, 216, 1);
+            color: rgba(0, 0, 0, 1);
+            border-radius: 8px;
+            padding: 2px 10px;
+            display: inline-block;
+          }
+          flex: 1;
+          text-align: center;
+        }
+        .page-preview {
+          flex: 1;
+          font-size: 14px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: bold;
+          color: rgba(255, 145, 16, 1);
+          text-align: right;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          img {
+            margin-left: 5px;
+            width: 7px;
+            height: 10px;
+          }
+        }
         .van-button {
           margin: 0 15px;
           background-color: #ff9110;
@@ -860,8 +889,22 @@ export default {
         }
       }
       .iframe {
-        width: 10rem !important;
-        height: 70vw;
+        width: 343px !important;
+        margin: 0 auto;
+        height: 193px;
+        display: block;
+        box-shadow: 0px 14px 27px 0px rgba(0, 0, 0, 0.16);
+      }
+      .viframe {
+        width: 193 !important;
+        margin: 0 auto;
+        height: 343px;
+      }
+    }
+    .content-left-v {
+      padding-bottom: 13px;
+      .content-left-top {
+        padding: 15px;
       }
     }
     .content-right {
@@ -947,7 +990,7 @@ export default {
       input {
         margin-top: 20px;
         width: 80vw;
-        border-top: 1px solid;
+        background: #f5f5f5;
         font-size: 17px;
       }
       .upload-btn {
@@ -1115,10 +1158,13 @@ export default {
   }
   padding-bottom: 50px;
   .createBtn {
-    position: fixed;
+    // position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
+    padding-bottom: 30px;
+    padding: 40px;
+    padding-top: 0;
     display: flex;
     z-index: 100;
     justify-content: space-between;
@@ -1129,6 +1175,11 @@ export default {
       border: none;
       outline: none;
       background-color: #ff9110;
+      border-radius: 30px;
+      font-size: 18px;
+      letter-spacing: 1px;
+      font-family: PingFangSC-Medium, PingFang;
+      font-weight: 500;
     }
   }
 }