新三合一模板 新聚合模板

purchase_H5/src/common/loadTemps.js

@@ -58,6 +58,7 @@ let tempNames = [
   'tuiding-zhijia',
   'templateThree',
   'templateColorNew',
+  'templateYuku'
 ]
 
 tempNames.forEach(name => {

purchase_H5/src/componentsNew/login.vue

@@ -306,7 +306,7 @@ export default {
         font-size: 32px;
         width: 150px;
         margin: 0 10px;
-        color: #ffaf13;
+        color: #FF7B00;
 
         &.number {
           color: #a7a7a7;
@@ -329,9 +329,9 @@ export default {
       font-size: 34px;
       font-weight: bold;
       text-align: center;
-      background: #ffaf13;
+      background: #FF7B00;
       font-size: 40px;
-      color: #222222;
+      color: #fff;
       font-weight: 700;
       margin-top: 56px;
     }

purchase_H5/src/componentsNew/repeatModal.vue

@@ -8,7 +8,7 @@
       </div>
       <div class="text-box">不要错过！</div>
       <div class="btn-box">
-        <div class="btn left" @click="$emit('change', false)">确定</div>
+        <div class="btn left" @click="$emit('change', false)">取消</div>
         <div class="btn right" @click="getStrategy">
           去看看
         </div>
@@ -99,14 +99,14 @@ export default {
     }
 
     .left {
-      border: 2px #fdc51b solid;
-      color: #fdc51b;
+      border: 2px #777777 solid;
+      color: #777777;
       background-color: #ffffff;
     }
 
     .right {
-      color: #0d0d0d;
-      background: #fdc51b;
+      color: #fff;
+      background: #FF7B00;
     }
   }
 }

purchase_H5/src/templates/templateColorNew/index.scss

@@ -47,7 +47,7 @@
       left: 0;
       width: 100%;
       height: 100%;
-      z-index: 2;
+      z-index: 1;
 
       img {
         width: 100%;
@@ -333,14 +333,14 @@
       }
 
       .left {
-        border: 2px #fdc51b solid;
-        color: #fdc51b;
+        border: 2px #777777 solid;
+        color: #777777;
         background-color: #ffffff;
       }
 
       .right {
-        color: #0d0d0d;
-        background: #fdc51b;
+        color: #fff;
+        background: #FF7B00;
       }
     }
 

purchase_H5/src/templates/templateColorNew/index.vue

@@ -28,7 +28,7 @@
       <div class="orderRow">
         <img :src="imgUrl+pageData.mainJson.explainImg" alt="">
       </div>
-      <div class="buyBtn" v-if="pageData.remarks.isBuy === '1'" :style="{'background-image': `linear-gradient(90deg,${pageData.mainJson.btnTopcol},${pageData.mainJson.btnBotcol})`}" @click="buyBtn">
+      <div class="buyBtn" v-if="pageData.remarks.isBuy === '1'" :style="{'background-image': `linear-gradient(90deg,${pageData.mainJson.btnTopcol},${pageData.mainJson.btnBotcol})`,'color':pageData.mainJson.btnTextCol}" @click="buyBtn">
         {{ pageData.remarks.btnText!=='' ? pageData.remarks.btnText : "立即订购" }}
       </div>
       <div class="privacyBox" v-if="pageData.remarks.isBuy === '1'">

purchase_H5/src/templates/templateThree/components/tabUnbuy.vue

@@ -0,0 +1,112 @@
+<template>
+  <van-overlay :show="value" :duration="0.1">
+    <div class="tabUnbuy tabmodal" @click.stop>
+      <!-- <img src="../assets/img/close.png" class="close" @click="$emit('change', false)" /> -->
+      <div class="text-box">退订</div>
+      <div class="text-group">
+        <van-radio-group v-model="radio">
+          <van-cell-group>
+            <van-cell v-for="(item, index) in datas" :key="index" :title="item.productName" clickable @click="itemInfo = item">
+              <template #right-icon>
+                <van-radio checked-color="#fdc51b" :name="index" />
+              </template>
+            </van-cell>
+          </van-cell-group>
+        </van-radio-group>
+      </div>
+
+      <div class="btn-box">
+        <div class="btn left" @click="$emit('change', false)">取消</div>
+        <div class="btn right" @click="itemClick">
+          退订
+        </div>
+      </div>
+    </div>
+  </van-overlay>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      showSheet: true,
+      radio: null,
+      itemInfo: {}
+    }
+  },
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  props: {
+    value: Boolean,
+    datas: Array
+  },
+  methods: {
+    itemClick () {
+      if (this.radio == null) {
+        return this.$toast('请选择退订产品')
+      }
+      this.$emit('itemClick', this.itemInfo)
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.tabUnbuy {
+  top: 412px;
+  padding: 20px 30px;
+  font-size: 40px;
+  font-family: Source Han Sans CN;
+  font-weight: bold;
+  color: #222222;
+
+  .text-box {
+    line-height: 48px;
+    text-align: center;
+  }
+  .text-group {
+    margin-top: 40px;
+    font-size: 30px;
+  }
+
+  .btn-box {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 20px;
+    margin-bottom: 20px;
+
+    .btn {
+      width: 190px;
+      margin-top: 30px;
+      height: 80px;
+      line-height: 80px;
+      border-radius: 40px;
+      font-size: 34px;
+      font-weight: bold;
+      text-align: center;
+    }
+
+    .left {
+      border: 2px #777777 solid;
+      color: #777777;
+      background-color: #ffffff;
+    }
+
+    .right {
+      color: #fff;
+      background: #FF7B00;
+    }
+  }
+}
+
+.tabmodal {
+  box-sizing: border-box;
+  position: absolute;
+  left: 50%;
+  top: 333px;
+  transform: translateX(-50%);
+  width: 580px;
+  background-color: #fff;
+  border-radius: 8px;
+}
+</style>

purchase_H5/src/templates/templateThree/index.scss

@@ -37,7 +37,7 @@
       left: 0;
       width: 100%;
       height: 100%;
-      z-index: 2;
+      z-index: 1;
 
       img {
         width: 100%;
@@ -146,7 +146,7 @@
 
       .orderContent {
         width: 200px;
-        height: 263px;
+        height: 240px;
         position: relative;
 
         img {
@@ -159,7 +159,7 @@
           height: 48px;
           border-radius: 24px;
           position: absolute;
-          bottom: 27px;
+          bottom: 24px;
           left: 10px;
           z-index: 1;
           color: #662B00;
@@ -326,14 +326,14 @@
       }
 
       .left {
-        border: 2px #fdc51b solid;
-        color: #fdc51b;
+        border: 2px #777777 solid;
+        color: #777777;
         background-color: #ffffff;
       }
 
       .right {
-        color: #0d0d0d;
-        background: #fdc51b;
+        color: #fff;
+        background: #FF7B00;
       }
     }
 
@@ -350,6 +350,26 @@
     }
   }
 
+  .rule {
+    position: absolute;
+    right: 0;
+    top: 140px;
+    width: 48px;
+    height: 124px;
+    background: #FFFFFF;
+    // box-shadow: 0px 0px 12px 0px #ACACAC;
+    opacity: 0.7;
+    border-radius: 12px 0px 0px 12px;
+    font-size: 24px;
+    font-weight: 400;
+    color: #000;
+    z-index: 5;
+    writing-mode: vertical-lr;
+    padding-left: 10px;
+    padding-top: 10px;
+    box-sizing: border-box;
+  }
+
   .modal {
     color: #000;
     box-sizing: border-box;

purchase_H5/src/templates/templateThree/index.vue

@@ -28,15 +28,15 @@
       <div class="orderRow">
         <div class="orderContent" v-for="(item,index) in productDatas" :key="index">
           <img :src="imgUrl+item.img" alt="">
-          <div class="buyBtn" @click="buyBtn(item)" :style="{'background-image': `linear-gradient(90deg,${pageData.mainJson.btnTopcol},${pageData.mainJson.btnBotcol})`}">
-            立即订购
+          <div class="buyBtn" @click="buyBtn(item)" :style="{'background-image': `linear-gradient(90deg,${pageData.mainJson.btnTopcol},${pageData.mainJson.btnBotcol})`,'color':pageData.mainJson.btnTextCol}">
+            ￥{{item.originalPrice}}/月
           </div>
         </div>
       </div>
       <div class="privacyBox" v-if="pageData.remarks.isBuy === '1'">
         <van-checkbox v-model="checked" checked-color="#6696FF">
           <div>
-            <p style="margin: 0; padding: 0" :style="pageData.mainJson.pageTextcol!==''?{'color':pageData.mainJson.pageTextcol}:{'color':'#000'}">手机号仅用于开通服务,我已阅读并同意
+            <p style="margin: 0; padding: 0">手机号仅用于开通服务,我已阅读并同意
             </p>
           </div>
         </van-checkbox>
@@ -49,6 +49,9 @@
         {{pageData.remarks.privacyText}}
       </div>
     </div>
+    <div class="rule" @click="ruleClick">
+      产品说明
+    </div>
     <!-- 说明 -->
     <div class="descbox" :style="{'background':pageData.mainJson.orderBgcol}">
       <div class="explainTitle">
@@ -57,7 +60,7 @@
       <div class="main" :style="pageData.mainJson.pageTextcol!==''?{'color':pageData.mainJson.pageTextcol}:{'color':'#000'}" v-html="pageData.mainProduct.givePhoneInfo"></div>
     </div>
     <!-- tab导航 -->
-    <tab-Modal @tabClick="tabClick" :isApplet="isApplet"></tab-Modal>
+    <tab-Modal @tabClick="tabClickThree" :isApplet="isApplet"></tab-Modal>
     <!-- 隐私条款 -->
     <conceal v-model="showConceal" :pageData="pageData"></conceal>
     <!-- 产品说明 -->
@@ -83,7 +86,7 @@
         </div>
         <div class="text-box">不要错过！</div>
         <div class="btn-box">
-          <div class="btn left" @click="unBuySure">确定</div>
+          <div class="btn left" @click="unBuySure">取消</div>
           <div class="btn right" @click="recommend(pageData.strategyInfo.unsubscribeStrategyList[0])">
             去看看
           </div>
@@ -92,6 +95,8 @@
     </van-overlay>
     <!-- 重复订购引流 -->
     <repeat-modal @repeat="recommend" v-model="repeatShow"></repeat-modal>
+    <!-- 选择退订产品 -->
+    <tab-unbuy @itemClick="itemClick" :datas="productDatas" v-model="unbuyShow" />
   </div>
 </template>
 
@@ -101,6 +106,7 @@ import common from '@/common/common'
 import ruleModal from "../../componentsNew/ruleModal002.vue";
 import conceal from "../../componentsNew/hideModal.vue";
 import tabModal from "./components/tabModal.vue";
+import tabUnbuy from "./components/tabUnbuy.vue";
 import loginModal from "../../componentsNew/login.vue";
 import accountModal from "../../componentsNew/gongZongHao.vue";
 import timeoutModal from "../../componentsNew/timeoutModal.vue";
@@ -122,7 +128,8 @@ export default {
     timeoutModal,
     newZheZhao,
     unbuyModal,
-    repeatModal
+    repeatModal,
+    tabUnbuy
   },
   data () {
     return {
@@ -142,6 +149,7 @@ export default {
       unBuyDrainage: false,
       showQr: false,
       repeatShow: false,
+      unbuyShow: false,
       unBuyDrainageText: "",
       phone: "",
       isBuy: "未订购",
@@ -184,6 +192,53 @@ export default {
 
   },
   methods: {
+    tabClickThree (item) {
+      if (this.isApplet == true) {
+        if (item.tabUrlApplet !== '') {
+          let url = item.tabUrlApplet + '&channelName=' + this.pageData.channl.channelKey
+          window.location.href = url
+        } else {
+          if (item.tabName == '流量激活') {
+            this.jihuo('点击激活')
+          } else if (item.tabName == '一键反馈') {
+            this.toPhone()
+          } else if (item.tabName == '退订产品') {
+            // this.beforeLogin('unBUy')
+            this.unbuyShow = true
+          } else if (item.tabName == '剩余流量查询' || item.tabName == '流量查询') {
+            this.chaxun()
+          }
+        }
+      } else {
+        if (item.tabUrlBasics !== '') {
+          let url = item.tabUrlBasics + '&channelName=' + this.pageData.channl.channelKey
+          window.location.href = url
+        } else {
+          if (item.tabName == '流量激活') {
+            this.jihuo('点击激活')
+          } else if (item.tabName == '一键反馈') {
+            this.toPhone()
+          } else if (item.tabName == '退订产品') {
+            this.unbuyShow = true
+          } else if (item.tabName == '剩余流量查询' || item.tabName == '流量查询') {
+            this.chaxun()
+          }
+        }
+      }
+    },
+    itemClick (data) {
+      this.unbuyShow = false
+      this.pageData.mainProduct.cpid = data.cpid
+      this.pageData.mainProduct.spid = data.spid
+      this.pageData.mainProduct.id = data.id
+      this.param.cpid = data.cpid
+      this.param.spid = data.spid
+      this.beforeLogin('unBUy')
+    },
+    ruleClick () {
+      this.showRule = true;
+      localStorage.setItem("startTime", new Date().getTime());
+    },
     // 点击确定
     unBuySure () {
       addR.clickUnsubscribe();
@@ -363,20 +418,15 @@ export default {
     },
 
     buyBtn (item) {
-      let pageData = {
-        mainProduct: item,
-        channl: this.pageData.channl,
-        recommend: this.pageData.recommend,
-        remarks: this.pageData.remarks,
-        viceJson: this.pageData.viceJson, //副产品json
-        mainJson: this.pageData.mainJson,
-        otherJson: this.pageData.otherJson, //备用json
-        strategyInfo: this.pageData.strategyInfo
-      };
-      this.$store.commit("setPageData", pageData);
+      // this.$store.commit("setPageData", pageData);
       if (this.checked == false) {
         this.$toast('请勾选隐私声明')
       } else {
+        this.pageData.mainProduct.cpid = item.cpid
+        this.pageData.mainProduct.spid = item.spid
+        this.pageData.mainProduct.id = item.id
+        this.param.cpid = item.cpid
+        this.param.spid = item.spid
         this.openIframe()
       }
     },

purchase_H5/src/templates/templateYuku/index.vue

@@ -0,0 +1,223 @@
+<template>
+  <div class="templateYuku" id="temp">
+    <div class="banner">
+      <img src="./banner.png" alt="">
+    </div>
+    <div class="infoBox">
+      <div class="infoCell">
+        <div class="title">订单信息</div>
+        <div class="name">优酷VIP会员月卡</div>
+      </div>
+      <div class="infoCell">
+        <div class="title">内容</div>
+        <div class="name">优酷VIP会员月卡+定向流量</div>
+      </div>
+      <div class="infoPhone">
+        <input type="text" v-model="phone" placeholder="输入联通手机号">
+      </div>
+    </div>
+    <div class="buyBox" @click="buyClick">立即办理</div>
+    <div class="privacyBox">
+      <van-checkbox v-model="checked" checked-color="#4276fe">
+        <div>
+          <p style="margin: 0; padding: 0">我已阅读并同意</p>
+        </div>
+      </van-checkbox>
+      <span class="span" @click="showConceal = true">《隐私声明》</span><span class="span" @click="showRule = true">《产品说明》</span>
+    </div>
+    <div class="explain">
+      <div class="explainTitle"><span class="spanLeft">一</span>活动规则<span class="spanRight">一</span></div>
+      <div class="main" v-html="pageData.mainProduct.givePhoneInfo"></div>
+    </div>
+
+    <!-- 隐私条款 -->
+    <conceal v-model="showConceal" :pageData="pageData"></conceal>
+    <!-- 产品说明 -->
+    <rule-modal v-if="showRule" @ruleShow="showRule = false" :pageData="pageData"></rule-modal>
+  </div>
+</template>
+
+<script>
+
+import common from '@/common/common'
+import conceal from "../../components/hideModal.vue";
+import ruleModal from "../../components/ruleModal002.vue";
+export default {
+  mixins: [common],
+  components: {
+    ruleModal,
+    conceal,
+  },
+  data () {
+    return {
+      phone: "",
+      checked: false,
+      showConceal: false,
+      showRule: false,
+    }
+  },
+  created () {
+    let mobileStr = location.href.split('?')
+    if (mobileStr.length > 1) {
+      const res = {};
+      const search = mobileStr[1];
+      const strs = search.split('&');
+      for (let i = 0; i < strs.length; i++) {
+        res[strs[i].split('=')[0]] = decodeURIComponent(strs[i].split('=')[1]);
+      }
+      if (res.mobile) {
+        const Base64 = require('js-base64').Base64
+        this.phone = Base64.decode(res.mobile)
+      }
+    }
+  },
+  methods: {
+    buyClick () {
+      if (this.checked == false) {
+        this.$toast('请勾选隐私声明')
+      } else {
+        this.openIframe()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.templateYuku {
+  background-color: #fff;
+  min-height: 100vh;
+  .iframe {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 9999;
+  }
+  .banner {
+    width: 100%;
+    height: 260px;
+    img {
+      width: 100%;
+      height: auto;
+    }
+  }
+  .infoBox {
+    width: 670px;
+    margin: 0 auto;
+    .infoCell {
+      width: 100%;
+      height: 120px;
+      display: flex;
+      justify-content: space-between;
+      border-bottom: 1px solid #d9d9d9;
+      font-family: PingFang SC, PingFang SC-Regular;
+      font-size: 30px;
+      line-height: 170px;
+      .title {
+        font-weight: 400;
+        color: #616161;
+        text-align: left;
+      }
+      .name {
+        font-weight: 700;
+        text-align: right;
+        color: #000000;
+      }
+    }
+    .infoPhone {
+      width: 100%;
+      height: 120px;
+      font-size: 40px;
+      // line-height: 170px;
+      font-weight: 700;
+      color: #000000;
+      text-align: left;
+      border-bottom: 1px solid #d9d9d9;
+      input {
+        margin: 0;
+        padding: 0;
+        border: none;
+        outline: none;
+        width: 100%;
+        height: 100%;
+        padding-top: 50px;
+        box-sizing: border-box;
+      }
+    }
+  }
+  .buyBox {
+    width: 670px;
+    height: 100px;
+    margin: 0 auto;
+    background: #4276fe;
+    border-radius: 10px;
+    color: #fff;
+    text-align: center;
+    line-height: 100px;
+    font-size: 40px;
+    font-weight: 700;
+    margin-top: 40px;
+  }
+  .privacyBox {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    margin-top: 20px;
+    font-size: 20px;
+
+    .van-checkbox {
+      text-align: right;
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    p {
+      color: #616161;
+    }
+    .span {
+      color: #4276fe;
+      margin-top: 4px;
+    }
+  }
+  .van-icon {
+    transform: scale(0.75, 0.75);
+    border-color: #e4e4e4;
+  }
+
+  .van-checkbox__label {
+    margin-left: 1px;
+  }
+
+  .explain {
+    width: 670px;
+    margin: 40px auto;
+    .explainTitle {
+      width: 100%;
+      font-weight: 700;
+      font-size: 40px;
+      text-align: center;
+      margin-bottom: 20px;
+      .spanLeft {
+        margin-right: 20px;
+      }
+      .spanRight {
+        margin-left: 20px;
+      }
+    }
+    .main {
+      word-break: break-all;
+      p {
+        color: #616161;
+        font-size: 26px;
+        line-height: 40px;
+        // margin: 20px 0 0 0;
+        margin: 0;
+        padding: 0;
+      }
+    }
+  }
+}
+</style>

purchase_ao/src/components/imgBox/index.vue

@@ -9,21 +9,22 @@
       <i class="el-icon-plus"></i>
     </div>
     <div>
-      <img :src="this.imgVal" alt="">
-      <span v-if="imgVal!==''" @click="imgVal=''" style="color: #F56C6C; cursor: pointer">删除</span>
+      <img style="max-width:300px" :src="this.imgVal" alt="">
+      <span v-if="imgVal!==''" @click="removeImg()" style="color: #F56C6C; cursor: pointer">删除</span>
     </div>
-    <el-dialog title="图片列表" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="imgShow" width="55%">
+    <el-dialog title="图片列表" append-to-body top="8vh" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="imgShow" width="55%">
       <el-form :inline="true" size="small">
         <el-button type="primary" icon="el-icon-edit" size="small" @click="uploadShow = true">上传</el-button>
         <div class="imgContent">
           <div class="imgRow">
             <div class="imgInfo" v-for="(item,index) in imgList" :key="index" :class="index == num?'bor':''">
               <div class="image">
-                <el-image :src="imgUrl+item.name" :preview-src-list="srcList">
+                <el-image style="width: 200px; max-height: 250px" :fit="'fit'" :src="imgUrl+item.name" :preview-src-list="srcList">
                 </el-image>
+                <!-- <img :src="imgUrl+item.name" alt=""> -->
               </div>
               <div class="imgBtn">
-                <el-button style="margin-right:10px" size="mini" @click="num = index">选择</el-button>
+                <el-button size="mini" @click="num = index">选择</el-button>
               </div>
             </div>
           </div>
@@ -48,6 +49,9 @@
 <script>
 import { post, get } from "@/api/common";
 export default {
+  props: {
+    imgValue: String
+  },
   data () {
     return {
       imgUrl: process.env.VUE_APP_BASE_IMG_URL,
@@ -66,6 +70,14 @@ export default {
       unloadImg: '',
     }
   },
+  mounted () {
+    setTimeout(() => {
+      if (this.imgValue !== "" && this.imgValue != this.imgUrl) {
+        this.imgVal = this.imgValue
+      }
+    }, 100)
+
+  },
   methods: {
     openImgClick () {
       get('/filerecord/list', this.form).then(res => {
@@ -83,6 +95,11 @@ export default {
       this.imgShow = false
       this.$emit('imgVal', this.imgList[this.num].name)
     },
+    // 删除图片
+    removeImg () {
+      this.imgVal = ""
+      this.$emit('removeClick', '')
+    },
     // 每页数量
     handleSizeChange (val) {
       this.form.pageNum = 1;
@@ -138,10 +155,14 @@ export default {
       .image {
         width: 200px;
         height: 250px;
+        img{
+          width: 100%;
+          height: auto;
+        }
       }
       .imgBtn {
         text-align: right;
-        line-height: 50px;
+        // line-height: 50px;
       }
     }
   }

purchase_ao/src/router/index.js

@@ -150,15 +150,7 @@ export const constantRoutes = [{
     meta: {
       title: '编辑策略'
     }
-  }, 
-  // {
-  //   path: '/strategy/test',
-  //   component: () => import('@/views/strategy/test'),
-  //   name: '测试',
-  //   meta: {
-  //     title: '测试'
-  //   }
-  // }
+  },
 ]
 },
 {

purchase_ao/src/views/model/index.vue

@@ -22,7 +22,7 @@
       <el-main class="listBox">
         <el-row :gutter="40">
           <el-col v-for="(item,index) in tableData" :span="6" :key="index">
-            <div class="imgBox">
+            <div class="imgFlex">
               <el-image :src="imgurl+item.templatePhoto" style="width: 100%;height: 200px" fit="cover" />
               <div class="text">{{ item.templateName }}</div>
               <div class="text">ID：{{ item.templateCode }}</div>
@@ -50,10 +50,11 @@
             <el-input v-model="addForm.templateCode" autocomplete="off" />
           </el-form-item>
           <el-form-item label="模板图示" label-width="80px">
-            <el-upload class="avatar-uploader" :action="imgapi" :show-file-list="false" :on-success="picPreview">
+            <!-- <el-upload class="avatar-uploader" :action="imgapi" :show-file-list="false" :on-success="picPreview">
               <img v-if="picUrl" :src="picUrl" class="avatar">
               <i v-else class="el-icon-plus avatar-uploader-icon" />
-            </el-upload>
+            </el-upload> -->
+            <img-Content :imgValue="''" ref="imgValue" @imgVal="imgClick" @removeClick="picUrl = $event;addForm.templatePhoto = ''" />
           </el-form-item>
         </el-form>
         <div class="demo-drawer__footer">
@@ -75,10 +76,11 @@
             <el-input v-model="editForm.templateCode" disabled autocomplete="off" />
           </el-form-item>
           <el-form-item label="模板图示" label-width="80px">
-            <el-upload class="avatar-uploader" :action="imgapi" :show-file-list="false" :on-success="picPreview">
+            <!-- <el-upload class="avatar-uploader" :action="imgapi" :show-file-list="false" :on-success="picPreview">
               <img v-if="picUrl" :src="picUrl" class="avatar">
               <i v-else class="el-icon-plus avatar-uploader-icon" />
-            </el-upload>
+            </el-upload> -->
+            <img-Content :imgValue="''" ref="imgValue" @imgVal="imgClick" />
           </el-form-item>
         </el-form>
         <div class="demo-drawer__footer">
@@ -93,8 +95,12 @@
 
 <script>
 import { post, get } from '@/api/common'
+import imgContent from '../../components/imgBox/index.vue'
 export default {
   name: 'ProduceClass',
+  components: {
+    imgContent
+  },
   data () {
     return {
       lin: 'https://img.zcool.cn/community/017a155cf0ed61a801213ec229ad50.jpg@1280w_1l_2o_100sh.jpg',
@@ -122,7 +128,7 @@ export default {
         templatePhoto: ''
       },
       tableData: [],
-      total: 5000
+      total: 5000,
     }
   },
   created () {
@@ -130,6 +136,12 @@ export default {
     that.search()
   },
   methods: {
+    imgClick (data) {
+      // console.log(data)
+      this.picUrl = process.env.VUE_APP_BASE_IMG_URL + data
+      // this.editForm.templatePhoto = data
+      this.addForm.templatePhoto = data
+    },
     handleSizeChange (val) {
       this.searchForm.pageNum = 1
       this.searchForm.pageSize = val
@@ -159,6 +171,10 @@ export default {
     },
     add () { // 新增
       this.addDialog = true
+      this.addForm = {}
+      setTimeout(() => {
+        this.$refs['imgValue'].imgVal = ''
+      }, 100)
     },
     addHandleClose (done) { // 新增数据
       if (this.loading) return
@@ -183,7 +199,11 @@ export default {
     },
     edit (e) { // 编辑
       this.editForm = e
+      // this.valueImg = process.env.VUE_APP_BASE_IMG_URL + this.editForm.templatePhoto
       this.editDialog = true
+      setTimeout(() => {
+        this.$refs['imgValue'].imgVal = process.env.VUE_APP_BASE_IMG_URL + this.editForm.templatePhoto
+      }, 100)
     },
     editHandleClose (done) { // 修改数据
       if (this.loading) return
@@ -216,7 +236,7 @@ export default {
         })
     },
     cancelForm () { // 关闭抽屉
-      console.log(123)
+      this.image = ""
       this.loading = false
       this.editDialog = false
       this.addDialog = false
@@ -258,7 +278,7 @@ export default {
   border-radius: 4px;
   box-shadow: #bfbfbf 0 0 2px;
   height: unset !important;
-  .imgBox {
+  .imgFlex {
     margin: 10px 0;
     border-radius: 6px;
     box-shadow: #c7c7c7 1px 1px 3px;

purchase_ao/src/views/strategy/add.vue

@@ -171,11 +171,12 @@
                     <span slot="reference">推广图</span>
                   </el-popover>
                 </template>
-                <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'推广图')})">
+                <img-Content :imgValue="form.promotePhoto" @imgVal="form.promotePhoto =imgUrl+$event" @removeClick="form.promotePhoto = $event" />
+                <!-- <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'推广图')})">
                   <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>
+                <span v-if="form.promotePhoto!==''" style="color: #F56C6C; cursor: pointer" @click="form.promotePhoto=''">删除</span> -->
               </el-form-item>
               <el-form-item>
                 <template slot="label">
@@ -184,11 +185,12 @@
                     <span slot="reference">LOGO图</span>
                   </el-popover>
                 </template>
-                <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'logo')})">
+                <img-Content :imgValue="imgUrl+productJson.logoPic" @imgVal="productJson.logoPic =$event" @removeClick="productJson.logoPic = $event" />
+                <!-- <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'logo')})">
                   <img v-if="productJson.logoPic !==''" :src="imgUrl+productJson.logoPic" class="avatar" />
                   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                 </el-upload>
-                <span v-if="productJson.logoPic!==''" @click="productJson.logoPic=''" style="color: #F56C6C; cursor: pointer">删除</span>
+                <span v-if="productJson.logoPic!==''" @click="productJson.logoPic=''" style="color: #F56C6C; cursor: pointer">删除</span> -->
               </el-form-item>
             </el-form>
           </div>
@@ -234,6 +236,10 @@
                       </el-popover>
                       <el-color-picker v-model="productJson.btnBotcol" size="small" show-alpha />
                     </el-col>
+                    <el-col style="display: flex;" :span="7">
+                      <el-button style="margin-right:20px ;width: 100px;" type="text">按钮文字色</el-button>
+                      <el-color-picker v-model="productJson.btnTextCol" size="small" show-alpha />
+                    </el-col>
                   </el-row>
                   <el-row style="margin:0" :gutter="24">
                     <el-col style="display: flex;" :span="7">
@@ -299,11 +305,12 @@
                         <span>banner图</span>
                       </el-tooltip>
                     </template>
-                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'主banner')})">
+                    <img-Content :imgValue="imgUrl+productJson.bannerImg" @imgVal="productJson.bannerImg =$event" @removeClick="productJson.bannerImg = $event" />
+                    <!-- <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'主banner')})">
                       <img v-if="productJson.bannerImg" :src="imgUrl+productJson.bannerImg" class="avatar" />
                       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                     </el-upload>
-                    <span v-if="productJson.bannerImg!==''" @click="productJson.bannerImg=''" style="color: #F56C6C; cursor: pointer">删除</span>
+                    <span v-if="productJson.bannerImg!==''" @click="productJson.bannerImg=''" style="color: #F56C6C; cursor: pointer">删除</span> -->
                   </el-form-item>
                   <el-form-item>
                     <template slot="label">
@@ -323,11 +330,12 @@
                         <span>上层素材</span>
                       </el-tooltip>
                     </template>
-                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'主upImg')})">
+                    <img-Content :imgValue="imgUrl+productJson.upImg" @imgVal="productJson.upImg =$event" @removeClick="productJson.upImg = $event" />
+                    <!-- <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'主upImg')})">
                       <img v-if="productJson.upImg!==''" :src="imgUrl+productJson.upImg" class="avatar" />
                       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                     </el-upload>
-                    <span v-if="productJson.upImg!==''" @click="productJson.upImg=''" style="color: #F56C6C; cursor: pointer">删除</span>
+                    <span v-if="productJson.upImg!==''" @click="productJson.upImg=''" style="color: #F56C6C; cursor: pointer">删除</span> -->
                   </el-form-item>
                   <el-form-item>
                     <template slot="label">
@@ -335,18 +343,20 @@
                         <span>顶层素材</span>
                       </el-tooltip>
                     </template>
-                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'主topImg')})">
+                    <img-Content :imgValue="imgUrl+productJson.topImg" @imgVal="productJson.topImg =$event" @removeClick="productJson.topImg = $event" />
+                    <!-- <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'主topImg')})">
                       <img v-if="productJson.topImg!==''" :src="imgUrl+productJson.topImg" class="avatar" />
                       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                     </el-upload>
-                    <span v-if="productJson.topImg!==''" @click="productJson.topImg=''" style="color: #F56C6C; cursor: pointer">删除</span>
+                    <span v-if="productJson.topImg!==''" @click="productJson.topImg=''" style="color: #F56C6C; cursor: pointer">删除</span> -->
                   </el-form-item>
                   <el-form-item label="订购窗标题">
-                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'explainTitle')})">
+                    <img-Content :imgValue="imgUrl+productJson.explainTitle" @imgVal="productJson.explainTitle =$event" @removeClick="productJson.explainTitle = $event" />
+                    <!-- <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'explainTitle')})">
                       <img v-if="productJson.explainTitle !== ''" :src="imgUrl+productJson.explainTitle" class="avatar" />
                       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                     </el-upload>
-                    <span v-if="productJson.explainTitle!==''" @click="productJson.explainTitle=''" style="color: #F56C6C; cursor: pointer">删除</span>
+                    <span v-if="productJson.explainTitle!==''" @click="productJson.explainTitle=''" style="color: #F56C6C; cursor: pointer">删除</span> -->
                   </el-form-item>
                   <el-form-item>
                     <template slot="label">
@@ -354,11 +364,12 @@
                         <span>订购窗配图</span>
                       </el-tooltip>
                     </template>
-                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'主explainImg')})">
+                    <img-Content :imgValue="imgUrl+productJson.explainImg" @imgVal="productJson.explainImg =$event" @removeClick="productJson.explainImg = $event" />
+                    <!-- <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'主explainImg')})">
                       <img v-if="productJson.explainImg !== ''" :src="imgUrl+productJson.explainImg" class="avatar" />
                       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                     </el-upload>
-                    <span v-if="productJson.explainImg!==''" @click="productJson.explainImg=''" style="color: #F56C6C; cursor: pointer">删除</span>
+                    <span v-if="productJson.explainImg!==''" @click="productJson.explainImg=''" style="color: #F56C6C; cursor: pointer">删除</span> -->
                   </el-form-item>
 
                   <el-form-item>
@@ -367,11 +378,12 @@
                         <span>产品说明标题</span>
                       </el-tooltip>
                     </template>
-                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'主orderImg')})">
+                    <img-Content :imgValue="imgUrl+productJson.orderImg" @imgVal="productJson.orderImg =$event" @removeClick="productJson.orderImg = $event" />
+                    <!-- <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'主orderImg')})">
                       <img v-if="productJson.orderImg !==''" :src="imgUrl+productJson.orderImg" class="avatar" />
                       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                     </el-upload>
-                    <span v-if="productJson.orderImg!==''" @click="productJson.orderImg=''" style="color: #F56C6C; cursor: pointer">删除</span>
+                    <span v-if="productJson.orderImg!==''" @click="productJson.orderImg=''" style="color: #F56C6C; cursor: pointer">删除</span> -->
                   </el-form-item>
 
                 </el-collapse-item>
@@ -399,6 +411,10 @@
                       <el-button style="margin-right:20px ;width: 100px;" type="text">按钮色(下)</el-button>
                       <el-color-picker v-model="viceJson.btnBotcol" size="small" show-alpha />
                     </el-col>
+                    <el-col style="display: flex;" :span="7">
+                      <el-button style="margin-right:20px ;width: 100px;" type="text">按钮文字色</el-button>
+                      <el-color-picker v-model="viceJson.btnTextCol" size="small" show-alpha />
+                    </el-col>
                   </el-row>
                   <el-row style="margin:0" :gutter="24">
                     <el-col style="display: flex;" :span="7">
@@ -442,11 +458,12 @@
                     <template slot="label">
                       <span>banner图</span>
                     </template>
-                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'副banner')})">
+                    <img-Content :imgValue="imgUrl+viceJson.bannerImg" @imgVal="viceJson.bannerImg =$event" @removeClick="viceJson.bannerImg = $event" />
+                    <!-- <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'副banner')})">
                       <img v-if="viceJson.bannerImg" :src="imgUrl+viceJson.bannerImg" class="avatar" />
                       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                     </el-upload>
-                    <span v-if="viceJson.bannerImg!==''" @click="viceJson.bannerImg=''" style="color: #F56C6C; cursor: pointer">删除</span>
+                    <span v-if="viceJson.bannerImg!==''" @click="viceJson.bannerImg=''" style="color: #F56C6C; cursor: pointer">删除</span> -->
                   </el-form-item>
                   <el-form-item>
                     <template slot="label">
@@ -462,42 +479,46 @@
                     <template slot="label">
                       <span>上层素材</span>
                     </template>
-                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'副upImg')})">
+                    <img-Content :imgValue="imgUrl+viceJson.upImg" @imgVal="viceJson.upImg =$event" @removeClick="viceJson.upImg = $event" />
+                    <!-- <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'副upImg')})">
                       <img v-if="viceJson.upImg" :src="imgUrl+viceJson.upImg" class="avatar" />
                       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                     </el-upload>
-                    <span v-if="viceJson.upImg!==''" @click="viceJson.upImg=''" style="color: #F56C6C; cursor: pointer">删除</span>
+                    <span v-if="viceJson.upImg!==''" @click="viceJson.upImg=''" style="color: #F56C6C; cursor: pointer">删除</span> -->
                   </el-form-item>
 
                   <el-form-item>
                     <template slot="label">
                       <span>顶层素材</span>
                     </template>
-                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'副topImg')})">
+                    <img-Content :imgValue="imgUrl+viceJson.topImg" @imgVal="viceJson.topImg =$event" @removeClick="viceJson.topImg = $event" />
+                    <!-- <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'副topImg')})">
                       <img v-if="viceJson.topImg" :src="imgUrl+viceJson.topImg" class="avatar" />
                       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                     </el-upload>
-                    <span v-if="viceJson.topImg!==''" @click="viceJson.topImg=''" style="color: #F56C6C; cursor: pointer">删除</span>
+                    <span v-if="viceJson.topImg!==''" @click="viceJson.topImg=''" style="color: #F56C6C; cursor: pointer">删除</span> -->
                   </el-form-item>
                   <el-form-item>
                     <template slot="label">
                       <span>订购窗配图</span>
                     </template>
-                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'副explainImg')})">
+                    <img-Content :imgValue="imgUrl+viceJson.explainImg" @imgVal="viceJson.explainImg =$event" @removeClick="viceJson.explainImg = $event" />
+                    <!-- <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'副explainImg')})">
                       <img v-if="viceJson.explainImg" :src="imgUrl+viceJson.explainImg" class="avatar" />
                       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                     </el-upload>
-                    <span v-if="viceJson.explainImg!==''" @click="viceJson.explainImg=''" style="color: #F56C6C; cursor: pointer">删除</span>
+                    <span v-if="viceJson.explainImg!==''" @click="viceJson.explainImg=''" style="color: #F56C6C; cursor: pointer">删除</span> -->
                   </el-form-item>
                   <el-form-item>
                     <template slot="label">
                       <span>产品说明标题</span>
                     </template>
-                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'副orderImg')})">
+                    <img-Content :imgValue="imgUrl+viceJson.orderImg" @imgVal="viceJson.orderImg =$event"  @removeClick="viceJson.orderImg = $event"/>
+                    <!-- <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'副orderImg')})">
                       <img v-if="viceJson.orderImg" :src="imgUrl+viceJson.orderImg" class="avatar" />
                       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                     </el-upload>
-                    <span v-if="viceJson.orderImg!==''" @click="viceJson.orderImg=''" style="color: #F56C6C; cursor: pointer">删除</span>
+                    <span v-if="viceJson.orderImg!==''" @click="viceJson.orderImg=''" style="color: #F56C6C; cursor: pointer">删除</span> -->
                   </el-form-item>
                 </el-collapse-item>
                 <el-collapse-item v-if="form.templateCode==='templateTogether'" title="聚合产品-配置管理" name="5">
@@ -516,25 +537,28 @@
                 </el-collapse-item>
                 <el-collapse-item v-if="form.templateCode==='templateThree'" title="三合一产品配图" name="6">
                   <el-form-item label="主产品图">
-                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'img1')})">
+                    <img-Content :imgValue="imgUrl+extJson.img1" @imgVal="extJson.img1 =$event" @removeClick="extJson.img1 = $event" />
+                    <!-- <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'img1')})">
                       <img v-if="extJson.img1 !==''" :src="imgUrl+extJson.img1" class="avatar" />
                       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                     </el-upload>
-                    <span v-if="extJson.img1!==''" @click="extJson.img1=''" style="color: #F56C6C; cursor: pointer">删除</span>
+                    <span v-if="extJson.img1!==''" @click="extJson.img1=''" style="color: #F56C6C; cursor: pointer">删除</span> -->
                   </el-form-item>
                   <el-form-item label="副产品图1">
-                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'img2')})">
+                    <img-Content :imgValue="imgUrl+extJson.img2" @imgVal="extJson.img2 =$event" @removeClick="extJson.img2 = $event" />
+                    <!-- <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'img2')})">
                       <img v-if="extJson.img2 !==''" :src="imgUrl+extJson.img2" class="avatar" />
                       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                     </el-upload>
-                    <span v-if="extJson.img2!==''" @click="extJson.img2=''" style="color: #F56C6C; cursor: pointer">删除</span>
+                    <span v-if="extJson.img2!==''" @click="extJson.img2=''" style="color: #F56C6C; cursor: pointer">删除</span> -->
                   </el-form-item>
                   <el-form-item label="副产品图2">
-                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'img3')})">
+                    <img-Content :imgValue="imgUrl+extJson.img3" @imgVal="extJson.img3 =$event" @removeClick="extJson.img3 = $event" />
+                    <!-- <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'img3')})">
                       <img v-if="extJson.img3 !==''" :src="imgUrl+extJson.img3" class="avatar" />
                       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                     </el-upload>
-                    <span v-if="extJson.img3!==''" @click="extJson.img3=''" style="color: #F56C6C; cursor: pointer">删除</span>
+                    <span v-if="extJson.img3!==''" @click="extJson.img3=''" style="color: #F56C6C; cursor: pointer">删除</span> -->
                   </el-form-item>
                 </el-collapse-item>
                 <el-collapse-item title="菜单按钮" name="4">
@@ -708,11 +732,12 @@
                 <el-switch style="width: 300px" v-model="extJson.extendVal" active-text="启用" inactive-text="不启用" active-value="1" inactive-value="0" />
               </el-form-item>
               <el-form-item label="营销配图">
-                <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'extend')})">
+                <img-Content :imgValue="extJson.extendImg" @imgVal="extJson.extendImg =imgUrl +$event" @removeClick="extJson.extendImg = $event" />
+                <!-- <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'extend')})">
                   <img v-if="extJson.extendImg!==''" :src="extJson.extendImg" class="avatar" />
                   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                 </el-upload>
-                <span v-if="extJson.extendImg!==''" style="color: #F56C6C; cursor: pointer" @click="extJson.extendImg=''">删除</span>
+                <span v-if="extJson.extendImg!==''" style="color: #F56C6C; cursor: pointer" @click="extJson.extendImg=''">删除</span> -->
               </el-form-item>
             </el-form>
           </div>
@@ -791,11 +816,12 @@
                     <span>活动LOGO</span>
                   </el-tooltip>
                 </template>
-                <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'活动logo')})">
+                <img-Content :imgValue="form.activityLogo" @imgVal="form.activityLogo =imgUrl +$event" @removeClick="form.activityLogo = $event" />
+                <!-- <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="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>
+                <span v-if="form.activityLogo!==''" @click="form.activityLogo=''" style="color: #F56C6C; cursor: pointer">删除</span> -->
               </el-form-item>
               <el-form-item>
                 <template slot="label">
@@ -803,11 +829,12 @@
                     <span>活动海报</span>
                   </el-tooltip>
                 </template>
-                <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'活动海报')})">
+                <img-Content :imgValue="form.posterPhoto" @imgVal="form.posterPhoto =imgUrl +$event" @removeClick="form.posterPhoto = $event" />
+                <!-- <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'活动海报')})">
                   <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>
+                <span v-if="form.posterPhoto!==''" @click="form.posterPhoto=''" style="color: #F56C6C; cursor: pointer">删除</span> -->
               </el-form-item>
             </el-form>
           </div>
@@ -825,9 +852,14 @@
 const XEUtils = require("xe-utils");
 import lottie from 'lottie-web';
 import { post, get } from "@/api/common";
+import imgContent from '../../components/imgBox/index.vue'
 export default {
+  components: {
+    imgContent
+  },
   data () {
     return {
+      valueImg: "",
       lottie: {},
       imgUrl: process.env.VUE_APP_BASE_IMG_URL,
       ifreamSrc: "",
@@ -926,7 +958,8 @@ export default {
         orderImg: "", //订购窗图
         explainImg: "", //产品说明图
         productV: "2",//产品ui样式,
-        explainTitle: "" //订购窗标题图
+        explainTitle: "", //订购窗标题图,
+        btnTextCol:""
       },  //产品json
       otherJson: {}, // 备用json
       // 副产品json
@@ -950,6 +983,7 @@ export default {
         explainImg: "", //产品说明图
         productV: "2",
         drawVal: "0", //副产品动画
+        btnTextCol:""
       },
       // 客户端适配
       disposeList: [
@@ -995,6 +1029,9 @@ export default {
 
   },
   methods: {
+    imgClick (data) {
+
+    },
     getTabList () {
       this.tabList = []
       if (this.extJson.tabArr && this.extJson.tabArr.length > 0) {
@@ -1325,54 +1362,15 @@ export default {
     // 上传图片
     fileSuccess (file, fileList, name) {
       if (file.code === 10000) {
-        if (name === '推广图') {
-          this.form.promotePhoto = this.imgUrl + file.data
-        } else if (name === 'logo') {
-          this.productJson.logoPic = file.data
-        } else if (name === '主banner') {
-          this.productJson.bannerImg = file.data
-        } else if (name === '主jsonImg') {
+        if (name === '主jsonImg') {
           this.productJson.jsonImg = file.data
           let imgUrl = this.imgUrl + file.data
           this.svgClick('主', imgUrl)
-        } else if (name === '主upImg') {
-          this.productJson.upImg = file.data
-        } else if (name === '主topImg') {
-          this.productJson.topImg = file.data
-        } else if (name === '主orderImg') {
-          this.productJson.orderImg = file.data
-        } else if (name === '主explainImg') {
-          this.productJson.explainImg = file.data
-        } else if (name === '副banner') {
-          this.viceJson.bannerImg = file.data
         } else if (name === '副jsonImg') {
           this.viceJson.jsonImg = file.data
           let imgUrl = this.imgUrl + file.data
           this.svgClick('副', imgUrl)
-        } else if (name === '副upImg') {
-          this.viceJson.upImg = file.data
-        } else if (name === '副topImg') {
-          this.viceJson.topImg = file.data
-        } else if (name === '副orderImg') {
-          this.viceJson.orderImg = file.data
-        } else if (name === '副explainImg') {
-          this.viceJson.explainImg = file.data
-        } else if (name === '活动logo') {
-          this.form.activityLogo = this.imgUrl + file.data
-        } else if (name === '活动海报') {
-          this.form.posterPhoto = this.imgUrl + file.data
-        } else if (name === 'extend') {
-          this.extJson.extendImg = this.imgUrl + file.data
-        } else if (name == 'img1') {
-          this.extJson.img1 = file.data
-        } else if (name == 'img2') {
-          this.extJson.img2 = file.data
-        } else if (name == 'img3') {
-          this.extJson.img3 = file.data
-        } else if (name === 'explainTitle') {
-          this.productJson.explainTitle = file.data
         }
-
       }
     },
     // 对象赋值