模板读取适配

purchase_H5/src/api/index.js

@@ -256,7 +256,13 @@ export const outFeed = data => request({
 
 // 测试ftp
 export const sftpGet = data => request({
-    url: '/ftp',
-    method: 'get',
-    params: data
+  url: '/ftp',
+  method: 'get',
+  params: data
 })
+
+// 获取新策略模板信息
+export const strategytemplate = id => request({
+  url: '/strategytemplate/' + id,
+  method: 'post'
+})

purchase_H5/src/views/indexMobile.vue

@@ -4,6 +4,7 @@
   </div>
 </template>
 <script>
+import { strategytemplate } from '../api'
 export default {
   name: "home",
   data () {
@@ -18,6 +19,7 @@ export default {
         const data = messageEvent.data
         if (data.template && data.template !== '') {
           this.pageData(data)
+
         }
       })
     })
@@ -26,15 +28,15 @@ export default {
 
   methods: {
     pageData (data) {
-      // this.$router.go(0)
-      // this.template = data.template
+      console.log(data)
+      // this.getStrategytemplate(data.item.recommendStrategyIds[0])
       this.$store.commit('setTempName', data.template)
       let mainProduct = {
         activeType: "69",
         bannerPics: [data.productJson.bannerImg, data.productJson.jsonImg, data.productJson.upImg, data.productJson.topImg,],
         bgColor: [data.productJson.pageBgcol, '', data.productJson.orderBgcol, data.productJson.orderBdcol],
         cacheSeatOne: [{
-          dongHua: "",
+          dongHua: data.productJson.drawVal,
           memberUrl: "",
           proC: {
             e: data.productJson.hideCol,
@@ -49,6 +51,7 @@ export default {
             e: data.productJson.tabVicecol,
             s: data.productJson.tabMaincol,
           },
+          btnUrl: "",
         }],
         cpid: "bilibl",
         createTime: "2022-02-23 15:23:34",
@@ -78,6 +81,13 @@ export default {
         spid: "979",
         themeColor: [data.productJson.btnTopcol, data.productJson.btnBotcol],
       }
+      let recommend = [];
+      if (data.item.recommendStrategyIds.length > 0) {
+        data.item.recommendStrategyIds.forEach(async val => {
+          let list = await strategytemplate(val)
+          recommend.push(list.data);
+        });
+      }
       let pageData = {
         mainProduct: mainProduct,
         channl: {
@@ -85,7 +95,7 @@ export default {
           channelName: "新策略H5整合测试",
           fullCode: "173966823233",
         },
-        recommend: data.item.recommendStrategyIds,
+        recommend: recommend,
         remarks: data.extJson, //策略信息
         viceJson: data.viceJson, //副产品json
         otherJson: data.otherJson, //备用json
@@ -115,6 +125,7 @@ export default {
           viceProductStrategyList: data.item.viceProductIds,
         }
       };
+      console.log(pageData)
       this.$store.commit("setPageData", pageData);
     }
   },

purchase_ao/src/views/strategy/add.vue

@@ -151,7 +151,7 @@
                   </el-popover>
                 </template>
                 <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'推广图')})">
-                  <img v-if="form.promotePhoto!==''" :src="imgUrl+form.promotePhoto" class="avatar" />
+                  <img v-if="form.promotePhoto!==''" :src="form.promotePhoto" class="avatar" />
                   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                 </el-upload>
                 <span v-if="form.promotePhoto!==''" style="color: #F56C6C; cursor: pointer" @click="form.promotePhoto=''">删除</span>
@@ -282,9 +282,11 @@
                         <span>动态文件</span>
                       </el-tooltip>
                     </template>
-                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'主jsonImg')})">
-                      <img v-if="productJson.jsonImg!==''" :src="imgUrl+productJson.jsonImg" class="avatar" />
-                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                    <div v-if="productJson.jsonImg!==''" class="svgImg">
+                      <div id="lottie_box"></div>
+                    </div>
+                    <el-upload v-if="productJson.jsonImg===''" class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'主jsonImg')})">
+                      <i class="el-icon-plus avatar-uploader-icon"></i>
                     </el-upload>
                     <span v-if="productJson.jsonImg!==''" @click="productJson.jsonImg=''" style="color: #F56C6C; cursor: pointer">删除</span>
                   </el-form-item>
@@ -408,9 +410,11 @@
                     <template slot="label">
                       <span>动态文件</span>
                     </template>
-                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'副jsonImg')})">
-                      <img v-if="viceJson.jsonImg" :src="imgUrl+viceJson.jsonImg" class="avatar" />
-                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                    <div v-if="viceJson.jsonImg!==''" class="svgImg">
+                      <div id="lottieVice"></div>
+                    </div>
+                    <el-upload v-if="viceJson.jsonImg===''" class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'副jsonImg')})">
+                      <i class="el-icon-plus avatar-uploader-icon"></i>
                     </el-upload>
                     <span v-if="viceJson.jsonImg!==''" @click="viceJson.jsonImg=''" style="color: #F56C6C; cursor: pointer">删除</span>
                   </el-form-item>
@@ -573,6 +577,16 @@
                   </el-col>
                 </el-row>
               </el-form-item>
+              <el-form-item v-if="form.viceProductIds.length>0" label="遮罩文案(副产品)">
+                <el-row :gutter="20">
+                  <el-col :span="10">
+                    <el-input v-model="extJson.fitText" type="textarea" :rows="2" placeholder="首行文案"></el-input>
+                  </el-col>
+                  <el-col :span="10">
+                    <el-input v-model="extJson.fitText2" type="textarea" :rows="2" placeholder="配合文案"></el-input>
+                  </el-col>
+                </el-row>
+              </el-form-item>
               <el-form-item>
                 <template slot="label">
                   <el-tooltip content="用于控制订购按钮的显示隐藏" placement="top">
@@ -719,7 +733,7 @@
                   </el-tooltip>
                 </template>
                 <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'活动logo')})">
-                  <img v-if="form.activityLogo !==''" :src="imgUrl+form.activityLogo" class="avatar" />
+                  <img v-if="form.activityLogo !==''" :src="form.activityLogo" class="avatar" />
                   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                 </el-upload>
                 <span v-if="form.activityLogo!==''" @click="form.activityLogo=''" style="color: #F56C6C; cursor: pointer">删除</span>
@@ -731,7 +745,7 @@
                   </el-tooltip>
                 </template>
                 <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'活动海报')})">
-                  <img v-if="form.posterPhoto!==''" :src="imgUrl+form.posterPhoto" class="avatar" />
+                  <img v-if="form.posterPhoto!==''" :src="form.posterPhoto" class="avatar" />
                   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                 </el-upload>
                 <span v-if="form.posterPhoto!==''" @click="form.posterPhoto=''" style="color: #F56C6C; cursor: pointer">删除</span>
@@ -750,10 +764,12 @@
 </template>
 
 <script>
+import lottie from 'lottie-web';
 import { post, get } from "@/api/common";
 export default {
   data () {
     return {
+      lottie: {},
       imgUrl: process.env.VUE_APP_BASE_IMG_URL,
       ifreamSrc: "",
       imgapi: process.env.VUE_APP_BASE_IMG_API, //上传图片地址
@@ -936,9 +952,13 @@ export default {
         this.objVal(this.viceJson, JSON.parse(this.form.productJson).viceProduct)
         this.objVal(this.otherJson, JSON.parse(this.form.otherJson))
         this.viceProductId = this.form.viceProductIds[0]
+        this.svgClick('all')
         if (this.$route.query.copy) {
           this.form.strategyName = this.form.strategyName + '-复制'
         }
+        setTimeout(() => {
+          this.preview()
+        }, 1000)
       })
     },
     // 获取新策略列表
@@ -1064,13 +1084,14 @@ export default {
     fileSuccess (file, fileList, name) {
       if (file.code === 10000) {
         if (name === '推广图') {
-          this.form.promotePhoto = file.data
+          this.form.promotePhoto = this.imgUrl + file.data
         } else if (name === 'logo') {
-          this.productJson.logoPic = file.data
+          this.productJson.logoPic =  file.data
         } else if (name === '主banner') {
           this.productJson.bannerImg = file.data
         } else if (name === '主jsonImg') {
           this.productJson.jsonImg = file.data
+          this.svgClick('主', file.data)
         } else if (name === '主upImg') {
           this.productJson.upImg = file.data
         } else if (name === '主topImg') {
@@ -1083,6 +1104,7 @@ export default {
           this.viceJson.bannerImg = file.data
         } else if (name === '副jsonImg') {
           this.viceJson.jsonImg = file.data
+          this.svgClick('副', file.data)
         } else if (name === '副upImg') {
           this.viceJson.upImg = file.data
         } else if (name === '副topImg') {
@@ -1092,9 +1114,9 @@ export default {
         } else if (name === '副explainImg') {
           this.viceJson.explainImg = file.data
         } else if (name === '活动logo') {
-          this.form.activityLogo = file.data
+          this.form.activityLogo = this.imgUrl + file.data
         } else if (name === '活动海报') {
-          this.form.posterPhoto = file.data
+          this.form.posterPhoto = this.imgUrl + file.data
         }
 
       }
@@ -1108,6 +1130,41 @@ export default {
           }
         })
       })
+    },
+    svgClick (name, path) {
+      if (name === '主') {
+        this.lottie = lottie.loadAnimation({
+          container: document.getElementById('lottie_box'),
+          renderer: 'svg',
+          loop: true,
+          autoplay: true,
+          path: this.imgUrl + path
+        })
+      } else if (name === '副') {
+        this.lottie = lottie.loadAnimation({
+          container: document.getElementById('lottieVice'),
+          renderer: 'svg',
+          loop: true,
+          autoplay: true,
+          path: this.imgUrl + path
+        })
+      } else if (name === 'all') {
+        this.lottie = lottie.loadAnimation({
+          container: document.getElementById('lottieVice'),
+          renderer: 'svg',
+          loop: true,
+          autoplay: true,
+          path: this.imgUrl + this.viceJson.jsonImg
+        })
+        this.lottie = lottie.loadAnimation({
+          container: document.getElementById('lottie_box'),
+          renderer: 'svg',
+          loop: true,
+          autoplay: true,
+          path: this.imgUrl + this.productJson.jsonImg
+        })
+      }
+
     }
   },
 }
@@ -1168,6 +1225,11 @@ export default {
       overflow: hidden;
     }
   }
+  .svgImg {
+    max-width: 260px;
+    margin-right: 10px;
+    display: inline-block;
+  }
 
   .avatar-uploader-icon {
     background-color: #fbfdff;