yb3.1

components/sharePoster/sharePoster.vue

@@ -1,17 +1,36 @@
 <template>
   <view class="share-poster-wrap">
-      <image :style="style" class="share-icon" src="@/static/share-poster-icon.png" mode="aspectFill"/>
+      <image @click="handleCreatePoster" :style="style" class="share-icon" src="@/static/share-poster-icon.png" mode="aspectFill"/>
+
+      <van-popup :show="show" @close="show=false" :close-on-click-overlay="false">
+        <view class="loading-box" v-if="!posterImg">
+            <image class="load-img" src="../../static/loading.png" mode="aspectFill" />
+            <view>加载中...</view>
+        </view>
+      </van-popup>
       
   </view>
 </template>
 
 <script>
 export default {
-    // shareData.type 分享页面; chartList(图列表), reportList(报告列表), specialColumnList(专栏列表), 
+    // shareData.type 分享页面: chartList(图列表), reportList(报告列表), specialColumnList(专栏列表),
     props:{
         style:null,
         shareData:null,
     },
+    data () {
+        return {
+            loading:false,
+            show:false,
+            posterImg:''
+        }
+    },
+    methods: {
+        handleCreatePoster(){
+            this.show=true
+        }
+    }
 
 }
 </script>
@@ -26,5 +45,26 @@ export default {
         width: 76rpx;
         height: 76rpx;
     }
+    .loading-box{
+        width: 417rpx;
+        height: 261rpx;
+        text-align: center;
+        padding-top: 80rpx;
+        font-size: 32rpx;
+        font-weight: bold;
+        .load-img{
+            width: 91rpx;
+            height: 91rpx;
+            animation: circle 1s linear infinite;
+        }
+        @keyframes circle {
+            0%{
+                transform: rotateZ(0);
+            }
+            100%{
+                transform: rotateZ(360deg);
+            }
+        }
+    }
 }
 </style>