海报

src/main/vue/src/components/PackageEdit3.vue

@@ -21,7 +21,10 @@
                 >
                     <div slot="tips" class="tips">尺寸120x240px</div>
                 </poster-upload> -->
-                <single-upload v-model="formData.poster"></single-upload>
+                <div class="share">
+                    <single-upload v-model="formData.poster"></single-upload>
+                    <el-image class="shareImg" :src="shareImg" :preview-src-list="[shareImg]"> </el-image>
+                </div>
             </el-form-item>
             <el-form-item label="小程序分享封面" prop="maCover">
                 <single-upload v-model="formData.maCover"></single-upload>
@@ -168,6 +171,26 @@ export default {
                     };
                 });
             return JSON.stringify(stockList);
+        },
+        shareImg() {
+            let str = 'https://jiashanxia.oss-cn-hangzhou.aliyuncs.com/image/2021-03-11-14-44-39KqRGXCYl.png';
+
+            if (this.formData.poster) {
+                str = this.formData.poster;
+            }
+
+            str += '?x-oss-process=image/resize,m_fixed,h_1080,w_1921';
+            str += '/watermark,image_aW1hZ2UvMjAyMS0wMy0xMS0xMS0wOC0xOGZ4cnFTZ2RiLnBuZw,g_south,x_0,y_46';
+            str += '/watermark,image_aW1hZ2UvMjAyMS0wMy0xMS0xMS0wOS00MlJ0YmZvT0dtLnBuZw,g_se,x_66,y_46';
+
+            str +=
+                '/watermark,image_aW1hZ2UvYXZhdGFyLzIwMjEtMDMtMDQtMTctMjYtMjVoZ3VBY21Mby5qcGc_eC1vc3MtcHJvY2Vzcz1pbWFnZS9jaXJjbGUscl80MC9mb3JtYXQscG5n,g_sw,x_92,y_210';
+            str += '/watermark,text_5bCx54ix5ZCD6aaS5aS0,color_303133,size_40,g_sw,x_180,y_230';
+            str += '/watermark,text_5ZGo6L655ri45YiG5Lqr6LWa6ZKx5paw5bmz5Y-w77yB,color_000000,size_40,g_sw,x_92,y_150';
+            str +=
+                '/watermark,text_5omr56CB5Y2z5Y-v5oiQ5Li64oCc5aSp5ri45L2z5aSE4oCd5YiG5Lqr5L2z5Lq6,color_000000,size_40,g_sw,x_92,y_92';
+
+            return str;
         }
     },
     methods: {
@@ -278,6 +301,11 @@ export default {
         },
         delItem(i) {
             this.list.splice(i, 1);
+        },
+        encode(str) {
+            var encode = encodeURI(str);
+            var base64 = btoa(encode);
+            return base64;
         }
     }
 };
@@ -371,4 +399,17 @@ export default {
     border: 1px solid #eee;
     margin-bottom: 20px;
 }
+.share {
+    display: flex;
+}
+.shareImg {
+    width: 200px;
+    margin-left: 50px;
+}
+
+.share {
+    .upload-image {
+        height: 180px;
+    }
+}
 </style>

src/main/vue/src/views/PackageEdit.vue

@@ -33,7 +33,7 @@
 <script>
 import PackageEdit from '../components/PackageEdit';
 import PackageEdit2 from '../components/PackageEdit2';
-import PackageEdit3 from '../components/PackageEdit3';
+import PackageEdit3 from '../components/PackageEdit3.vue';
 // import PackageGoodsTable from '../components/PackageGoodsTable';
 
 export default {