增加loading

src/views/tempaltes/editMore.vue

@@ -4,7 +4,131 @@
     <NavBar title="编辑视片" v-if="!is_mini_token" left-arrow>
       <div @click="pageShow">页面管理</div>
     </NavBar>
-    <div class="content">
+    <svg
+      v-show="!gifloaded"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      style="margin:auto;background:#fff;display:block; margin-top: 30vh"
+      width="100px"
+      height="100px"
+      s
+      viewBox="0 0 100 100"
+      preserveAspectRatio="xMidYMid"
+    >
+      <g transform="translate(50,50)">
+        <circle
+          cx="0"
+          cy="0"
+          r="8.333333333333334"
+          fill="none"
+          stroke="#e15b64"
+          stroke-width="4"
+          stroke-dasharray="26.179938779914945 26.179938779914945"
+          transform="rotate(241.469)"
+        >
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            values="0 0 0;360 0 0"
+            times="0;1"
+            dur="1s"
+            calcMode="spline"
+            keySplines="0.2 0 0.8 1"
+            begin="0"
+            repeatCount="indefinite"
+          />
+        </circle>
+        <circle
+          cx="0"
+          cy="0"
+          r="16.666666666666668"
+          fill="none"
+          stroke="#f47e60"
+          stroke-width="4"
+          stroke-dasharray="52.35987755982989 52.35987755982989"
+          transform="rotate(322.365)"
+        >
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            values="0 0 0;360 0 0"
+            times="0;1"
+            dur="1s"
+            calcMode="spline"
+            keySplines="0.2 0 0.8 1"
+            begin="-0.2"
+            repeatCount="indefinite"
+          />
+        </circle>
+        <circle
+          cx="0"
+          cy="0"
+          r="25"
+          fill="none"
+          stroke="#f8b26a"
+          stroke-width="4"
+          stroke-dasharray="78.53981633974483 78.53981633974483"
+          transform="rotate(3.35861)"
+        >
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            values="0 0 0;360 0 0"
+            times="0;1"
+            dur="1s"
+            calcMode="spline"
+            keySplines="0.2 0 0.8 1"
+            begin="-0.4"
+            repeatCount="indefinite"
+          />
+        </circle>
+        <circle
+          cx="0"
+          cy="0"
+          r="33.333333333333336"
+          fill="none"
+          stroke="#abbd81"
+          stroke-width="4"
+          stroke-dasharray="104.71975511965978 104.71975511965978"
+          transform="rotate(66.1951)"
+        >
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            values="0 0 0;360 0 0"
+            times="0;1"
+            dur="1s"
+            calcMode="spline"
+            keySplines="0.2 0 0.8 1"
+            begin="-0.6"
+            repeatCount="indefinite"
+          />
+        </circle>
+        <circle
+          cx="0"
+          cy="0"
+          r="41.666666666666664"
+          fill="none"
+          stroke="#849b87"
+          stroke-width="4"
+          stroke-dasharray="130.89969389957471 130.89969389957471"
+          transform="rotate(152.08)"
+        >
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            values="0 0 0;360 0 0"
+            times="0;1"
+            dur="1s"
+            calcMode="spline"
+            keySplines="0.2 0 0.8 1"
+            begin="-0.8"
+            repeatCount="indefinite"
+          />
+        </circle>
+      </g>
+    </svg>
+    <div class="content" v-show="gifloaded">
       <div class="content-left">
         <div class="content-left-top">
           <van-button size="mini" @click="createPage(currentPage)">新增此页</van-button>
@@ -29,7 +153,7 @@
           scrolling="no"
           style="height:70vw;width: 100vw;"
           :style="
-            templateData.templateShow === 'VERTICAL' ? 'height:130vw;' : 'height:60vw;'
+            templateData.templateShow === 'VERTICAL' ? 'height:100vw;' : 'height:60vw;'
           "
           v-show="!isPreview"
           @load="setList"
@@ -74,8 +198,13 @@
         </div>
       </div>
     </div>
-    <div class="createBtn">
-      <van-button type="info" @click="enterSubmit" v-show="!templateData.filmId" style="width: 100%">下一步</van-button>
+    <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>
     </div>
@@ -185,6 +314,7 @@ export default {
     return {
       activeName: "0",
       canvasImg: "",
+      gifloaded: false,
       is_mini_token: false,
       templateData: {
         height: 450,
@@ -287,6 +417,10 @@ export default {
   },
   mounted() {
     document.title = "编辑视片";
+    var timer = setTimeout(() => {
+      this.gifloaded = true
+      clearTimeout(timer)
+    }, 1000)
   },
   methods: {
     message(data) {
@@ -373,7 +507,7 @@ export default {
         this.$toast.success("删除成功");
         if (this.templateData.listData.length <= this.currentPage) {
           this.goPage(this.templateData.listData.length - 1);
-          alert(this.templateData.listData.length)
+          alert(this.templateData.listData.length);
         }
       }, 1000);
     },
@@ -638,7 +772,7 @@ export default {
     .content-menu {
       display: flex;
       // height: calc(100vh - 96px);
-      background: #ddd;
+      background: #fff;
       padding: 20px;
       padding-right: 0;
       width: 100%;
@@ -751,7 +885,7 @@ export default {
       text-align: left;
 
       font-size: 20px;
-      background: #d0d0d0;
+      background: #fff;
       // height: calc(100vh - 96px);
       box-sizing: border-box;
       overflow: auto;
@@ -934,7 +1068,7 @@ export default {
       width: 50%;
       border: none;
       outline: none;
-      background-color: #FF9110;
+      background-color: #ff9110;
     }
   }
 }