Ver código fonte

切换分支

朱鑫波 4 anos atrás
pai
commit
ea77bd674e

+ 1 - 1
public/index.html

@@ -284,7 +284,7 @@
     window._CONFIG['imgDomainURL'] = 'http://139.186.31.213:8804/jeecg-boot/sys/common/view';
     window._CONFIG['pdfDomainURL'] = 'http://139.186.31.213:8804/jeecg-boot/sys/common/pdf/pdfPreviewIframe';
   </script>
-  <script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
+  <script src="<%= BASE_URL %>splitting.js"></script>
 
 </head>
 

+ 37 - 0
public/splitting.js

@@ -0,0 +1,37 @@
+!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):n.Splitting=t()}(this,function(){"use strict"
+var u=document,l=u.createTextNode.bind(u)
+function d(n,t,e){n.style.setProperty(t,e)}function f(n,t){return n.appendChild(t)}function p(n,t,e,r){var i=u.createElement("span")
+return t&&(i.className=t),e&&(!r&&i.setAttribute("data-"+t,e),i.textContent=e),n&&f(n,i)||i}function h(n,t){return n.getAttribute("data-"+t)}function m(n,t){return n&&0!=n.length?n.nodeName?[n]:[].slice.call(n[0].nodeName?n:(t||u).querySelectorAll(n)):[]}function o(n){for(var t=[];n--;)t[n]=[]
+return t}function g(n,t){n&&n.some(t)}function c(t){return function(n){return t[n]}}var a={}
+function n(n,t,e,r){return{by:n,depends:t,key:e,split:r}}function e(n){return function t(e,n,r){var i=r.indexOf(e)
+if(-1==i)r.unshift(e),g(a[e].depends,function(n){t(n,e,r)})
+else{var u=r.indexOf(n)
+r.splice(i,1),r.splice(u,0,e)}return r}(n,0,[]).map(c(a))}function t(n){a[n.by]=n}function v(n,r,i,u,o){n.normalize()
+var c=[],a=document.createDocumentFragment()
+u&&c.push(n.previousSibling)
+var s=[]
+return m(n.childNodes).some(function(n){if(!n.tagName||n.hasChildNodes()){if(n.childNodes&&n.childNodes.length)return s.push(n),void c.push.apply(c,v(n,r,i,u,o))
+var t=n.wholeText||"",e=t.trim()
+e.length&&(" "===t[0]&&s.push(l(" ")),g(e.split(i),function(n,t){t&&o&&s.push(p(a,"whitespace"," ",o))
+var e=p(a,r,n)
+c.push(e),s.push(e)})," "===t[t.length-1]&&s.push(l(" ")))}else s.push(n)}),g(s,function(n){f(a,n)}),n.innerHTML="",f(n,a),c}var s=0
+var i="words",r=n(i,s,"word",function(n){return v(n,"word",/\s+/,0,1)}),y="chars",w=n(y,[i],"char",function(n,e,t){var r=[]
+return g(t[i],function(n,t){r.push.apply(r,v(n,"char","",e.whitespace&&t))}),r})
+function b(t){var f=(t=t||{}).key
+return m(t.target||"[data-splitting]").map(function(a){var s=a["🍌"]
+if(!t.force&&s)return s
+s=a["🍌"]={el:a}
+var n=e(t.by||h(a,"splitting")||y),l=function(n,t){for(var e in t)n[e]=t[e]
+return n}({},t)
+return g(n,function(n){if(n.split){var t=n.by,e=(f?"-"+f:"")+n.key,r=n.split(a,l,s)
+e&&(i=a,c=(o="--"+e)+"-index",g(u=r,function(n,t){Array.isArray(n)?g(n,function(n){d(n,c,t)}):d(n,c,t)}),d(i,o+"-total",u.length)),s[t]=r,a.classList.add(t)}var i,u,o,c}),a.classList.add("splitting"),s})}function N(n,t,e){var r=m(t.matching||n.children,n),i={}
+return g(r,function(n){var t=Math.round(n[e]);(i[t]||(i[t]=[])).push(n)}),Object.keys(i).map(Number).sort(x).map(c(i))}function x(n,t){return n-t}b.html=function(n){var t=(n=n||{}).target=p()
+return t.innerHTML=n.content,b(n),t.outerHTML},b.add=t
+var T=n("lines",[i],"line",function(n,t,e){return N(n,{matching:e[i]},"offsetTop")}),L=n("items",s,"item",function(n,t){return m(t.matching||n.children,n)}),k=n("rows",s,"row",function(n,t){return N(n,t,"offsetTop")}),A=n("cols",s,"col",function(n,t){return N(n,t,"offsetLeft")}),C=n("grid",["rows","cols"]),M="layout",S=n(M,s,s,function(n,t){var e=t.rows=+(t.rows||h(n,"rows")||1),r=t.columns=+(t.columns||h(n,"columns")||1)
+if(t.image=t.image||h(n,"image")||n.currentSrc||n.src,t.image){var i=m("img",n)[0]
+t.image=i&&(i.currentSrc||i.src)}t.image&&d(n,"background-image","url("+t.image+")")
+for(var u=e*r,o=[],c=p(s,"cell-grid");u--;){var a=p(c,"cell")
+p(a,"cell-inner"),o.push(a)}return f(n,c),o}),H=n("cellRows",[M],"row",function(n,t,e){var r=t.rows,i=o(r)
+return g(e[M],function(n,t,e){i[Math.floor(t/(e.length/r))].push(n)}),i}),O=n("cellColumns",[M],"col",function(n,t,e){var r=t.columns,i=o(r)
+return g(e[M],function(n,t){i[t%r].push(n)}),i}),j=n("cells",["cellRows","cellColumns"],"cell",function(n,t,e){return e[M]})
+return t(r),t(w),t(T),t(L),t(k),t(A),t(C),t(S),t(H),t(O),t(j),b})

+ 2 - 1
src/views/modules/kuaishouapp/account/stepForm/Step3.vue

@@ -2278,7 +2278,7 @@ export default {
   },
   mounted: function () {
     this.$nextTick(() => {
-      Splitting()
+      
       if (localStorage.getItem('pans')) {
         this.pans = JSON.parse(localStorage.getItem('pans')).map((item) => {
           return {
@@ -2397,6 +2397,7 @@ export default {
           }
         }
       })
+      Splitting()
     })
   },
 }

+ 275 - 6
src/views/modules/kuaishouapp/newBatch/index.vue

@@ -382,8 +382,10 @@ li.chouzhen.first:before {
                       <template slot="content">
                         <img :src="showImgUrl(creativeInfo.overlayType[0])" alt="" style="width: 100%" />
                       </template>
-                      {{ creativeInfo.overlayType[0] }}
+                      <!-- {{ creativeInfo.overlayType[0] }} -->
+                      1张
                     </a-popover>
+                    <span v-else>无</span>
                   </a-form-item>
                   <!-- creativeInfo.overlayType -->
                 </a-col>
@@ -401,11 +403,95 @@ li.chouzhen.first:before {
                 </a-col>
               </a-row>
             </a-card>
-            <a-card class="search-box step-jump" style="min-height: 600px" title="创意素材">
+            <a-card class="search-box step-jump" title="创意素材">
               <p>
-                已选素材:0/200
+                已选素材:{{ videoMaterialShow ? materialCount : 0 }}/200
                 <a-button type="primary" @click="materialVisible = true" style="margin: 0 15px"> 选择素材 </a-button>
               </p>
+              <div v-if="videoMaterialShow" style="width: 100%; height: 400px">
+                <div
+                  v-for="(item, index) in materialInfo.materialList"
+                  :key="index"
+                  style="
+                    width: 100%;
+                    height: 400px;
+                    overflow: auto;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-between;
+                    background: #f2f2f2;
+                    padding: 30px;
+                  "
+                >
+                  <template v-for="(items, indexMaterial) in item.photoArr">
+                    <div
+                      style="
+                        width: 45%;
+                        height: 250px;
+                        display: flex;
+                        background: white;
+                        justify-content: space-between;
+                        margin: 20px;
+                        padding: 10px;
+                      "
+                      v-if="items.image.url"
+                    >
+                      <div style="width: 45%; height: 100%; text-align: center">
+                        <img :src="items.image.url" style="width: auto; height: 100%" alt="" srcset="" />
+                      </div>
+                      <div style="width: 45%; height: 100%; text-align: center">
+                        <img :src="items.image.url" style="width: auto; height: 100%" alt="" srcset="" />
+                      </div>
+                      <a-popconfirm
+                        title="确定要删除这个素材吗?"
+                        ok-text="确定"
+                        cancel-text="取消"
+                        @confirm="removeVideoMaterial(index, indexMaterial)"
+                        @cancel="cancel"
+                      >
+                        <a-icon type="close-circle" style="cursor: pointer" />
+                      </a-popconfirm>
+                    </div>
+                  </template>
+                </div>
+              </div>
+              <!-- v-if="materialInfo.matchingMethod != 1 && videoMaterialShow" -->
+              <div style="margin-top: 20px">
+                <a-list bordered :data-source="descriptionList">
+                  <a-list-item slot="renderItem" slot-scope="item, index">
+                    <p v-if="!item.edit" style="margin-bottom: 0; width: 100%">
+                      {{ item.value }}
+                    </p>
+                    <p v-else style="margin-bottom: 0; width: 100%">
+                      <a-input id="error" placeholder="请输入广告语" v-model="item.value" style="width: 50%" />
+                    </p>
+
+                    <div slot="actions">
+                      <a @click="editDescription(item)">{{ item.edit ? '确定' : '编辑' }}</a>
+                      <a-divider type="vertical" />
+                      <a @click="removeDescription(index)">删除</a>
+                    </div>
+                  </a-list-item>
+                  <div slot="header">
+                    <a-button
+                      type="primary"
+                      style="margin-right: 20px"
+                      @click="addDescription"
+                      :disabled="
+                        descriptionList.length >= (materialInfo.matchingMethod == 2
+                          ? materialCount
+                          : materialInfo.materialList.length)
+                      "
+                    >
+                      添加广告语
+                    </a-button>
+                    {{ descriptionList.length }}/{{
+                      materialInfo.matchingMethod == 2 ? materialCount : materialInfo.materialList.length
+                    }}
+                    <a style="margin-left: 20px" @click="descriptionList = []">清空 </a>
+                  </div>
+                </a-list>
+              </div>
             </a-card>
             <div style="display: flex; justify-content: space-between; margin-bottom: 100px">
               <a-button type="primary"> 预览应用/链接 </a-button>
@@ -1185,9 +1271,9 @@ li.chouzhen.first:before {
     <!-- 定向预览结束 -->
 
     <!-- 创意素材选择 -->
-    <a-modal title="创意素材" v-model="materialVisible" :width="1000">
+    <a-modal title="创意素材" v-model="materialVisible" :width="1000" @ok="handleOkVideo" @cancel="cancelVideo">
       <a-form-model
-        ref="ruleForm"
+        ref="materialForm"
         :model="materialInfo"
         v-bind="formItemLayout"
         :rules="materialRules"
@@ -1488,6 +1574,62 @@ li.chouzhen.first:before {
       </div>
     </a-modal>
     <!-- 选择素材相关结束 -->
+
+    <!-- 推荐广告语开始 -->
+
+    <a-modal
+      title="推荐标题"
+      v-model="titleVisible"
+      :width="1000"
+      @ok="okTitle"
+      @cancel="
+        dataOne = []
+        value = ''
+        title = []
+        titleVisible = false
+        checkTitle = []
+      "
+    >
+      <a-row :gutter="10">
+        <a-col :sm="10" style="margin-bottom: 20px; z-index: 10">
+          <a-card class="search-box" style="min-height: 500px">
+            <div style="margin-bottom: 30px">
+              <span style="display: inline-block; width: 80px">行业</span>
+              <a-cascader
+                style="margin-top: 1rem; width: 300px"
+                v-model="dataOne"
+                :options="options"
+                :showSearch="{ filter }"
+                expandTrigger="hover"
+                @change="onChangeTitle"
+                placeholder="请选择行业"
+              >
+                <a-icon type="smile" slot="suffixIcon" class="test" />
+              </a-cascader>
+            </div>
+            <div style="margin-bottom: 30px">
+              <span style="display: inline-block; width: 80px">关键词</span>
+              <a-input placeholder="请输入关键词" v-model="value" style="width: 300px" />
+            </div>
+            <span style="display: inline-block; width: 80px; float: left"></span>
+            <a-button type="primary" @click="searchQuery" :disabled="value == ''">生成</a-button>
+          </a-card>
+        </a-col>
+        <a-col :sm="14" style="margin-bottom: 20px; z-index: 10">
+          <a-card class="search-box" style="over-flow: auto">
+            <a-checkbox-group v-model="checkTitle" style="width: 100%">
+              <a-list size="large" bordered :dataSource="title">
+                <a-list-item slot="renderItem" slot-scope="item">
+                  <a-checkbox :value="item"> {{ item }} </a-checkbox>
+                  <!-- <a slot="actions" @click="okTitle(item)">选择</a> -->
+                </a-list-item>
+              </a-list>
+            </a-checkbox-group>
+          </a-card>
+        </a-col>
+      </a-row>
+    </a-modal>
+    <!-- 推荐广告语结束 -->
   </div>
 </template>
 
@@ -1670,6 +1812,7 @@ export default {
 
       //素材相关
       materialVisible: false,
+      videoMaterialShow: false,
       materialInfo: {
         isMakeCover: 2, //是否自动生成封面  1不开启,2开启
         coverNumber: 1, //设置封面数量
@@ -1737,7 +1880,13 @@ export default {
         },
       ],
       //按创意和按创意组匹配
-      descriptionList: [],
+      descriptionList: [{ value: '测试广告语', edit: false }],
+      titleVisible: false,
+      options: [],
+      value: '',
+      dataOne: [],
+      title: [],
+      checkTitle: [],
       //素材相关结束
 
       //配置应用/链接
@@ -1774,6 +1923,20 @@ export default {
       createTiveTemplateId: null,
     }
   },
+  computed: {
+    materialCount() {
+      var count = 0
+
+      for (let i = 0; i < this.materialInfo.materialList.length; i++) {
+        if (this.materialInfo.materialList.length > 0) {
+          for (let j = 0; j < this.materialInfo.materialList[i].photoArr.length; j++) {
+            count++
+          }
+        }
+      }
+      return count
+    },
+  },
   watch: {
     accountId: function (n, o) {
       if (n != '') {
@@ -1886,6 +2049,107 @@ export default {
         }
       }
     },
+    editDescription(item) {
+      console.log(item)
+      item.edit = !item.edit
+    },
+    removeDescription(index) {
+      this.descriptionList.splice(index, 1)
+    },
+    okTitle() {
+      console.log(this.checkTitle)
+      var count = this.materialInfo.matchingMethod == 2 ? this.materialCount : this.materialInfo.materialList.length
+      if (this.descriptionList.length + this.checkTitle.length > count) {
+        this.$message.error('选择广告语超过可选的上限,请去掉一部分后确定')
+        return
+      }
+
+      if (this.checkTitle.length > 0) {
+        for (let i = 0; i < this.checkTitle.length; i++) {
+          this.descriptionList.push({ value: this.checkTitle[i], edit: false })
+        }
+      } else {
+        this.$message.error('请选择广告语')
+        return
+      }
+
+      this.titleVisible = false
+      this.dataOne = []
+      this.value = ''
+      this.title = []
+      this.checkTitle = []
+    },
+
+    onChangeTitle(value, selectedOptions) {
+      this.dataOne = value
+      this.value = ''
+      this.title = []
+    },
+    searchQuery() {
+      this.getAction('/ctop/creativeTitle/titleSearch', {
+        firstCategory: this.dataOne[0],
+        secondCategory: this.dataOne[1],
+        keywords: this.value,
+      }).then((res) => {
+        console.log(res)
+        this.title = res.result ? res.result : []
+      })
+    },
+    addDescription() {
+      this.titleVisible = true
+      this.getHangye()
+    },
+    getHangye() {
+      this.getAction('/ctop/creativeTitle/getTitleLabel', '').then((res) => {
+        if (res.success) {
+          this.options = res.result.map((item) => {
+            return {
+              label: item.label,
+              value: item.value,
+              children:
+                item.children.length > 0
+                  ? [
+                      {
+                        label: '不限',
+                        value: 0,
+                      },
+                    ].concat(item.children)
+                  : [
+                      {
+                        label: '不限',
+                        value: 0,
+                      },
+                    ],
+            }
+          })
+          this.options = [
+            {
+              label: '不限',
+              value: 0,
+            },
+          ].concat(this.options)
+          if (this.dataOne.length > 0) {
+            return
+          } else {
+            this.dataOne = [0]
+          }
+        }
+      })
+    },
+    handleOkVideo() {
+      this.$refs.materialForm.validate((valid) => {
+        if (valid) {
+          console.log(this.materialInfo)
+          this.materialVisible = false
+          this.videoMaterialShow = true
+        }
+      })
+    },
+    cancelVideo() {},
+    removeVideoMaterial(index, indexMaterial) {
+      this.materialInfo.materialList[index].photoArr.splice(indexMaterial, 1)
+    },
+    cancel() {},
 
     //选择素材相关
     handleOkShow() {
@@ -2203,6 +2467,9 @@ export default {
     filterOption(input, option) {
       return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
     },
+    filter(inputValue, path) {
+      return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
+    },
     checkAccountId() {
       if (this.accountId == '') {
         this.$message.warning('请先选择广告投放账号')
@@ -2227,6 +2494,8 @@ export default {
     stickerCheck(rule, value, callback) {
       if (this.creativeInfo.overlayType.length > 0 && value == '') {
         callback('封面广告语标题必填')
+      } else if (value.length > 14) {
+        callback('封面广告语标题最多为14个字符')
       }
       callback()
     },