瀏覽代碼

Merge branch 'master' of http://git.tjyourong.com.cn/ctop/adsp-vue

魏志佳 4 年之前
父節點
當前提交
9543ef11d8

+ 808 - 0
src/views/modules/BatchCreate/components/material.vue

@@ -0,0 +1,808 @@
+<template>
+  <div class="input-item material-creat">
+    <a-form-item class="row-item">
+      <a-radio-group v-model="materialType" @change="materialTypeChange" class="row-item">
+        <a-badge :count="HorizontalLargeImageListBig.length" :numberStyle="{backgroundColor: '#52c41a'} ">
+          <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE">大图横图</a-radio-button>
+        </a-badge>
+        <a-badge :count="HorizontalLargeImageListShu.length" :numberStyle="{backgroundColor: '#52c41a'} ">
+          <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO">横版视频</a-radio-button>
+        </a-badge>
+        <a-badge :count="HorizontalLargeImageListHeng.length" :numberStyle="{backgroundColor: '#52c41a'} ">
+          <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO_VERTICAL">竖版视频</a-radio-button>
+        </a-badge>
+        <a-badge :count="HorizontalLargeImageListZu.length" :numberStyle="{backgroundColor: '#52c41a'} "
+          v-if="creativeType=='customCreativity'">
+          <a-radio-button value="CREATIVE_IMAGE_MODE_GROUP">组图</a-radio-button>
+        </a-badge>
+        <a-badge :count="HorizontalLargeImageListSmall.length" :numberStyle="{backgroundColor: '#52c41a'} ">
+          <a-radio-button value="CREATIVE_IMAGE_MODE_SMALL">小图</a-radio-button>
+        </a-badge>
+        <a-badge :count="HorizontalLargeImageListBigShu.length" :numberStyle="{backgroundColor: '#52c41a'} ">
+          <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE_VERTICAL">大图竖图</a-radio-button>
+        </a-badge>
+      </a-radio-group>
+      <div class="bui-tabs-scroll">
+        <a-layout
+          :style="{ height: '600px',width:'700px',border:'1px solid #ccc',overflow:'auto',padding:'0 15px 10px'}">
+          <a-layout-content style="padding:10px;">
+            <div :style="{ marginBottom: '16px' }">
+              <a-button @click="addCreative()" :disabled="count">添加创意</a-button>
+              <span style="color:black;margin-left:10px"
+                v-if="creativeType == 'customCreativity'">{{countMany}}/10</span>
+              <span style="color:black;margin-left:10px" v-else-if="creativeType == 'program'">视频数量:{{vadioMany}}/12
+                图片数量:{{imgMany}}/10</span>
+            </div>
+            <a-row>
+              <a-col :span="24" v-for="(item,index) of HorizontalLargeImageList" :key="index">
+                <a-card title :ref="item">
+                  <a-icon type="close" style="float:right;cursor: pointer;" @click="deleteCreative(index)" />
+                  <div style="clear:both"></div>
+                  <div class="dynamically_add_form_item">
+                    <a-form-item class label="素材选择" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                      <!-- <upload-to-ali v-model="item.vadioUrl" :customDomain="customDomain" preview :region="region"
+                        :bucket="bucket"
+                        :accept="materialType=='CREATIVE_IMAGE_MODE_VIDEO'||materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'?acceptVideo:acceptImage"
+                        :size="102400" :accessKeyId="accessKeyId" :accessKeySecret="accessKeySecret"></upload-to-ali> -->
+                      <!-- <uploadFile :value.sync="item.vadioUrl" :fileCount="1"
+                        :uploadType="materialType=='CREATIVE_IMAGE_MODE_VIDEO'||materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'?'video':'image'" />
+                         -->
+                      <a
+                        @click="getVideoList(item)">{{materialType=='CREATIVE_IMAGE_MODE_VIDEO'||materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'?'选择视频':'选择图片'}}</a>
+                    </a-form-item>
+
+                    <a-form-item label="封面上传" :labelCol="labelCol" :wrapperCol="wrapperCol"
+                      v-if="(materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'||materialType=='CREATIVE_IMAGE_MODE_VIDEO')">
+                      <!-- <upload-to-ali v-model="item.imageUrl" :customDomain="customDomain" preview :region="region"
+                        :bucket="bucket" :accept="acceptImage" :size="102400" :accessKeyId="accessKeyId"
+                        :accessKeySecret="accessKeySecret"></upload-to-ali> -->
+                      <uploadFile :value.sync="item.imageUrl" :fileCount="1" uploadType="image" :multiple="false" />
+                    </a-form-item>
+
+                    <a-form-item label="创意标题" :labelCol="labelCol" :wrapperCol="wrapperCol"
+                      v-if="creativeType == 'customCreativity'">
+                      <a-input v-model="item.text" style="width:400px" class="rending" @change="judge(item)"></a-input>
+                    </a-form-item>
+                    <a-form-item label="动态词包" :labelCol="labelCol" :wrapperCol="wrapperCol"
+                      v-if="creativeType == 'customCreativity'">
+                      <a-tag v-for="(itemTag,indexTag) of tags" :key="indexTag" v-show="indexTag<item.many"
+                        @click="getChange(item,itemTag,index)">{{itemTag.name}}</a-tag>
+                      <span @click="showElseClick(item)">{{item.showElse?"更多":"收起"}}</span>
+                    </a-form-item>
+
+                  </div>
+                </a-card>
+              </a-col>
+            </a-row>
+          </a-layout-content>
+        </a-layout>
+      </div>
+    </a-form-item>
+    <div v-if="creativeType == 'proceduralCreativity'">
+
+      <div style="display:block;font-size: 22px;margin-bottom: 20px;">程序化创意标题</div>
+      <a-button @click="addTitle" class="row-item">添加创意标题</a-button>
+      <br />
+      <div v-for="(item,index) of titleData" :key="index">
+        <a-input style="width:55%;margin-bottom:20px" v-model="item.text" class="rending-all" @change="judge(item)">
+        </a-input>
+        <a-icon type="delete" style="margin-left:20px;cursor: pointer;" v-show="titleData.length>1"
+          @click="tetleDetele(index)" />
+        <br />
+        <a-tag style="margin-bottom:10px" v-for="(itemTag,indexTag) of tags" :key="indexTag"
+          @click="getChangeAllTitle(item,itemTag,index)">
+          {{itemTag.name}}</a-tag>
+      </div>
+    </div>
+    <!-- 创建大图横图创意 -->
+    <a-modal :maskClosable="false" title="选择素材" v-model="visibleMatemal" @ok="handleOkShow" :width="1000">
+
+      <a-range-picker name="buildTime" style="width: 400px;margin:10px 0" v-model="time" />
+      <ul v-if="dataSource.length>0" style="overflow:auto;padding-left:0">
+        <a-checkbox-group v-model="checkVideo" @change="onChangeVideo" style="width:100%">
+          <li v-for="(item,index) of dataSource" :key="index" class="chouzhen" style="height:350px;">
+
+            <!-- <video class="video" :src="item.url" controls="controls" style="width:100%">
+                  您的浏览器不支持 video 标签。
+                </video> -->
+            <a-checkbox :value="item" style="width:100%;position:absolute;z-index: 100;right:0;top:0;">
+              <img :src="item.coverUrl" alt="" style="width:100%;margin-bottom:10px">
+            </a-checkbox>
+            <a @click="matemalVideo(item,index)" style="position:absolute;z-index: 100;right:56px;bottom: 5px;">查看视频</a>
+          </li>
+        </a-checkbox-group>
+      </ul>
+      <div v-else style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
+        <img
+          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575627350102&di=02972956f2243933bffc0d85099adbfe&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1095310825%2C1528244349%26fm%3D214%26gp%3D0.jpg"
+          alt="" v-if="!loadingVideoList" />
+        <img v-else src="@/views/modules/material/loading.gif" />
+      </div>
+
+      <!-- <ul class="actor-photo-list">
+          <a-checkbox-group v-model="checkArr" style="width:100%;  display: flex;padding-left: 0;"
+            @change="onChangeCheck">
+            <li v-for="(item, index) of dataSource" :key="index">
+              <a-checkbox :value="item" style="position:absolute;z-index:100;padding-right:30px">
+
+              </a-checkbox>
+            </li>
+          </a-checkbox-group>
+        </ul> -->
+      <div style="text-align:right">
+        <a-pagination size="small" :showTotal="ipagination.showTotal" style="float:right" v-if="dataSource.length > 0"
+          showQuickJumper :pageSize.sync="ipagination.pageSize" :total="ipagination.total" v-model="ipagination.current"
+          @change="getDataSource" />
+      </div>
+    </a-modal>
+    <a-modal title="查看视频" v-model="visibleVideo" :width="300" :footer="null">
+      <video class="video" :src="videoUrlShow" controls="controls" style="width:100%">
+        您的浏览器不支持 video 标签。
+      </video>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+  import UploadToAli from '@femessage/upload-to-ali'
+  import uploadFile from '@/components/uploadFile.vue'
+  import {
+    postAction,
+    getAction,
+    getPackage
+  } from '@/api/manage'
+  import {
+    stopOtherVideo,
+    closeAllVideoFun
+  } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
+  import moment from 'moment'
+  import AFormItem from 'ant-design-vue/es/form/FormItem'
+  import $ from 'jquery'
+  export default {
+    name: 'BaseForm',
+    props: {
+      accountId: {
+        default () {
+          return ''
+        }
+      },
+      creativeType: {
+        type: String,
+        default () {
+          return 'customCreativity'
+        }
+      }
+    },
+    components: {
+      AFormItem,
+      //   UploadToAli,
+      uploadFile
+    },
+    data() {
+      return {
+        visibleMatemal: false,
+        visibleVideo: false,
+        videoUrlShow: "",
+        dataSource: [],
+        time: [],
+        checkVideo: [],
+        labelCol: {
+          xs: {
+            span: 24
+          },
+          sm: {
+            span: 5
+          }
+        },
+        wrapperCol: {
+          xs: {
+            span: 24
+          },
+          sm: {
+            span: 16
+          }
+        },
+        accessKeyId: 'LTAIbNbqWzSOklQV',
+        accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
+        bucket: 'ctop-media',
+        region: 'oss-cn-beijing',
+        acceptImage: 'image/jpeg,image/png',
+        acceptVideo: 'video/mpeg,video/mp4',
+        customDomain: '',
+        form: this.$form.createForm(this),
+        url: {
+          userAllocationList: '/template/allocation/list',
+          insertUrl: '/template/creative/insert',
+          industryListUrl: '/template/bytedance/industry/list',
+          campaignListUrl: '/template/campaign/list',
+          budgetTemplateListUrl: '/template/budget/list',
+          deliverytargetTemplateListUrl: '/template/deliverytarget/list',
+          userorentationTemplateListUrl: '/template/userorentation/list',
+          deliverytargetTemplateGetUrl: '/template/deliveryTarget/get',
+          convertList: 'template/convert/list'
+        },
+        materialType: 'CREATIVE_IMAGE_MODE_LARGE',
+        // 创建大图横图创意
+        createLargeImageCreativeCon: true,
+        HorizontalLargeImageList: [],
+        HorizontalLargeImageListBig: [],
+        HorizontalLargeImageListHeng: [],
+        HorizontalLargeImageListShu: [],
+        HorizontalLargeImageListZu: [],
+        HorizontalLargeImageListSmall: [],
+        HorizontalLargeImageListBigShu: [],
+        horizonImageUrlColl: [], // 大图横图图片素材集合
+        horizonImageCreativeTextColl: [], // 创意标题集合
+        itemIndex: null,
+        tags: [],
+        range: null,
+        countTag: 0,
+        titleData: [{
+          text: '',
+          showElse: true,
+          titleMany: 0
+        }],
+        nowItem: null,
+        ipagination: {
+          current: 1,
+          pageSize: 5,
+          //   pageSizeOptions: ['10', '20', '30'],
+          showTotal: (total, range) => {
+            return range[0] + '-' + range[1] + ' 共' + total + '条'
+          },
+          showQuickJumper: true,
+          //   showSizeChanger: true,
+          total: 0,
+          onChange: current => {
+            // 切换分页时的回调,
+            // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
+            this.ipagination.current = current
+          }
+        },
+      }
+    },
+    methods: {
+      onChangeVideo() {
+        if (this.checkVideo.length > 1) {
+          this.checkVideo.shift()
+        }
+      },
+      matemalVideo(item, index) {
+        this.visibleVideo = true
+        this.videoUrlShow = item.url
+      },
+      handleOkShow() {
+
+      },
+      getVideoList(item) {
+        this.checkVideo = []
+        if (this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO' || this.materialType ==
+          'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
+          console.log('video', item)
+          this.nowItem = item
+          this.visibleMatemal = true
+        } else {
+          console.log('image', item)
+          this.nowItem = item
+          this.visibleMatemal = true
+        }
+
+      },
+      judge(item) {
+        var re = /{(.*?)}/g
+        var array = []
+        var temp
+        while ((temp = re.exec(item.text))) {
+          array.push(temp[1])
+        }
+        console.log(array)
+        item.countTag = array.length
+      },
+      getChange(item, tag, index) {
+        this.judge(item)
+        if (item.text == '') {
+          item.countTag = 0
+        }
+        if (item.countTag >= 2) {
+          this.$message.error('最多插入两条词包')
+          // item.countTag = 2
+          return
+        }
+        var node = document.getElementsByClassName('rending')[index]
+        var v = '{' + tag.name + '}'
+
+        if (document.selection) {
+          //IE
+          node.focus()
+          var sel = document.selection.createRange()
+          sel.text = v
+          sel.select()
+          item.textIds.push(tag.creative_word_id)
+        } else if (node.selectionStart || node.selectionStart == '0') {
+          //MOZILLA/GOOGLE
+          var startPos = node.selectionStart
+          var endPos = node.selectionEnd
+          var restoreTop = node.scrollTop
+          node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
+          if (restoreTop > 0) {
+            node.scrollTop = restoreTop
+          }
+          item.text = node.value
+          item.textIds.push(tag.creative_word_id)
+          node.focus()
+          node.selectionStart = startPos + v.length
+          node.selectionEnd = startPos + v.length
+        } else {
+          //OTHER
+          node.value += v
+          item.textIds.push(tag.creative_word_id)
+          item.text = node.value
+          node.focus()
+        }
+      },
+      getChangeAllTitle(item, tag, index) {
+        this.judge(item)
+        if (item.text == '') {
+          item.countTag = 0
+        }
+        if (item.countTag >= 2) {
+          this.$message.error('最多插入两条词包')
+          // item.countTag = 2
+          return
+        }
+        var node = document.getElementsByClassName('rending-all')[index]
+        var v = '{' + tag.name + '}'
+        item.textIds.push(tag.name)
+        if (document.selection) {
+          //IE
+          node.focus()
+          var sel = document.selection.createRange()
+          sel.text = v
+          sel.select()
+        } else if (node.selectionStart || node.selectionStart == '0') {
+          //MOZILLA/GOOGLE
+          var startPos = node.selectionStart
+          var endPos = node.selectionEnd
+          var restoreTop = node.scrollTop
+          node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
+          if (restoreTop > 0) {
+            node.scrollTop = restoreTop
+          }
+          item.text = node.value
+          node.focus()
+          node.selectionStart = startPos + v.length
+          node.selectionEnd = startPos + v.length
+        } else {
+          //OTHER
+          node.value += v
+          item.text = node.value
+          node.focus()
+        }
+      },
+      showElseClick(item) {
+        item.showElse = !item.showElse
+        if (!item.showElse) {
+          item.many = this.tags.length
+        } else {
+          item.many = 3
+        }
+      },
+      materialTypeChange() {
+        let type = this.materialType
+        if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
+          // this.createLargeImageCreativeCon = false
+          this.showLargeImage = false
+          this.showLargeVerticalImage = false
+          this.showHorizonVideo = false
+          this.showVerticalVideo = false
+          this.showGroupImage = false
+          this.showSmallImage = true
+          this.HorizontalLargeImageList = this.HorizontalLargeImageListSmall
+        }
+        if (type === 'CREATIVE_IMAGE_MODE_LARGE') {
+          // this.createLargeImageCreativeCon = true
+          this.showLargeImage = false
+          this.showLargeVerticalImage = false
+          this.showHorizonVideo = false
+          this.showVerticalVideo = false
+          this.showGroupImage = false
+          this.showSmallImage = false
+          this.HorizontalLargeImageList = this.HorizontalLargeImageListBig
+        }
+        if (type === 'CREATIVE_IMAGE_MODE_GROUP') {
+          // this.createLargeImageCreativeCon = false
+          this.showLargeImage = false
+          this.showLargeVerticalImage = false
+          this.showHorizonVideo = false
+          this.showVerticalVideo = false
+          this.showGroupImage = true
+          this.showSmallImage = false
+          this.HorizontalLargeImageList = this.HorizontalLargeImageListZu
+        }
+        if (type === 'CREATIVE_IMAGE_MODE_VIDEO') {
+          // this.createLargeImageCreativeCon = false
+          this.showLargeImage = false
+          this.showLargeVerticalImage = false
+          this.showHorizonVideo = true
+          this.showVerticalVideo = false
+          this.showGroupImage = false
+          this.showSmallImage = false
+          this.HorizontalLargeImageList = this.HorizontalLargeImageListShu
+        }
+        if (type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL') {
+          // this.createLargeImageCreativeCon = false
+          this.showLargeImage = false
+          this.showLargeVerticalImage = true
+          this.showHorizonVideo = false
+          this.showVerticalVideo = false
+          this.showGroupImage = false
+          this.showSmallImage = false
+          this.HorizontalLargeImageList = this.HorizontalLargeImageListBigShu
+        }
+        if (type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
+          // this.createLargeImageCreativeCon = false
+          this.showLargeImage = false
+          this.showLargeVerticalImage = false
+          this.showHorizonVideo = false
+          this.showVerticalVideo = true
+          this.showGroupImage = false
+          this.showSmallImage = false
+          this.HorizontalLargeImageList = this.HorizontalLargeImageListHeng
+        }
+      },
+      //   创建大图横图创意
+      addCreative() {
+        let type = this.materialType
+        this.getTags()
+        if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
+          this.HorizontalLargeImageListSmall.push({
+            typeCode: type,
+            imageUrl: '',
+            text: '',
+            textIds: [],
+            vadioUrl: '',
+            multiple: [],
+            countTag: 0,
+            many: 3,
+            showElse: true
+          })
+          this.HorizontalLargeImageList = this.HorizontalLargeImageListSmall
+        }
+        if (type === 'CREATIVE_IMAGE_MODE_LARGE') {
+          this.HorizontalLargeImageListBig.push({
+            typeCode: type,
+            imageUrl: '',
+            text: '',
+            textIds: [],
+            vadioUrl: '',
+            multiple: [],
+            countTag: 0,
+            many: 3,
+            showElse: true
+          })
+          this.HorizontalLargeImageList = this.HorizontalLargeImageListBig
+        }
+        if (type === 'CREATIVE_IMAGE_MODE_GROUP') {
+          this.HorizontalLargeImageListZu.push({
+            creativeType: this.creativeType,
+            typeCode: type,
+            imageUrl: '',
+            text: '',
+            textIds: [],
+            vadioUrl: '',
+            multiple: [],
+            countTag: 0,
+            many: 3,
+            showElse: true
+          })
+          this.HorizontalLargeImageList = this.HorizontalLargeImageListZu
+        }
+        if (type === 'CREATIVE_IMAGE_MODE_VIDEO') {
+          this.HorizontalLargeImageListShu.push({
+            creativeType: this.creativeType,
+            typeCode: type,
+            imageUrl: '',
+            text: '',
+            textIds: [],
+            vadioUrl: '',
+            multiple: [],
+            countTag: 0,
+            many: 3,
+            showElse: true
+          })
+          this.HorizontalLargeImageList = this.HorizontalLargeImageListShu
+        }
+        if (type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL') {
+          this.HorizontalLargeImageListBigShu.push({
+            creativeType: this.creativeType,
+            typeCode: type,
+            imageUrl: '',
+            text: '',
+            textIds: [],
+            vadioUrl: '',
+            multiple: [],
+            countTag: 0,
+            many: 3,
+            showElse: true
+          })
+          this.HorizontalLargeImageList = this.HorizontalLargeImageListBigShu
+        }
+        if (type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
+          this.HorizontalLargeImageListHeng.push({
+            creativeType: this.creativeType,
+            typeCode: type,
+            imageUrl: '',
+            text: '',
+            textIds: [],
+            vadioUrl: '',
+            multiple: [],
+            countTag: 0,
+            many: 3,
+            showElse: true
+          })
+          this.HorizontalLargeImageList = this.HorizontalLargeImageListHeng
+        }
+      },
+      deleteCreative(index) {
+        console.log(index)
+        console.log(this.HorizontalLargeImageList)
+        this.HorizontalLargeImageList.splice(index, 1)
+      },
+      getTags() {
+        // let accountInfo = localStorage.getItem('accountInfo')
+        // console.log(groupInfo)
+
+        getAction('/bytedance/batch/creative/words/get', {
+          accountId: '1649600126891015'
+        }).then(res => {
+          if (res.code == '0') {
+            this.tags = res.creative_word
+          } else {
+            this.tags = []
+          }
+        })
+      },
+      addTitle() {
+        this.titleData.push({
+          text: '',
+          titleMany: 0,
+          textIds: []
+        })
+      },
+      tetleDetele(index) {
+        this.titleData.splice(index, 1)
+      }
+    },
+    created: function () {
+      this.$nextTick(() => {
+        this.getTags()
+      })
+    },
+    watch: {
+      creativeType: function (n, o) {
+        console.log(n, o)
+        this.HorizontalLargeImageListBig = []
+        this.HorizontalLargeImageListHeng = []
+        this.HorizontalLargeImageListShu = []
+        this.HorizontalLargeImageListZu = []
+        this.HorizontalLargeImageListSmall = []
+        this.HorizontalLargeImageListBigShu = []
+        this.HorizontalLargeImageList = []
+      },
+      materialType: function (n, o) {
+        this.materialTypeChange()
+      },
+      visibleVideo(n, o) {
+        if (!n) {
+          closeAllVideoFun()
+        }
+      }
+    },
+    computed: {
+      count: function () {
+        var bool
+        if (this.creativeType == 'customCreativity') {
+          bool =
+            this.HorizontalLargeImageListBig.length +
+            this.HorizontalLargeImageListHeng.length +
+            this.HorizontalLargeImageListShu.length +
+            this.HorizontalLargeImageListZu.length +
+            this.HorizontalLargeImageListSmall.length +
+            this.HorizontalLargeImageListBigShu.length >=
+            10 ?
+            true :
+            false
+        } else {
+          if (
+            this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL' ||
+            this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO'
+          ) {
+            bool = this.HorizontalLargeImageListHeng.length + this.HorizontalLargeImageListShu.length >= 12 ? true :
+              false
+          } else {
+            bool =
+              this.HorizontalLargeImageListBig.length +
+              this.HorizontalLargeImageListZu.length +
+              this.HorizontalLargeImageListSmall.length +
+              this.HorizontalLargeImageListBigShu.length >=
+              10 ?
+              true :
+              false
+          }
+        }
+        return bool
+      },
+      countMany: function () {
+        var bool =
+          this.HorizontalLargeImageListBig.length +
+          this.HorizontalLargeImageListHeng.length +
+          this.HorizontalLargeImageListShu.length +
+          this.HorizontalLargeImageListZu.length +
+          this.HorizontalLargeImageListSmall.length +
+          this.HorizontalLargeImageListBigShu.length
+        return bool
+      },
+      vadioMany: function () {
+        var bool = this.HorizontalLargeImageListHeng.length + this.HorizontalLargeImageListShu.length
+        return bool
+      },
+      imgMany: function () {
+        var bool =
+          this.HorizontalLargeImageListBig.length +
+          this.HorizontalLargeImageListZu.length +
+          this.HorizontalLargeImageListSmall.length +
+          this.HorizontalLargeImageListBigShu.length
+        return bool
+      }
+    }
+  }
+</script>
+
+
+<style lang="scss">
+  .material-creat {
+    .ant-layout {
+      background: white;
+    }
+  }
+
+  .dynamically_add_form_item {
+    .ant-form-item-label {
+      width: auto !important;
+    }
+
+    .ant-form-item-control-wrapper {
+      width: auto !important;
+    }
+  }
+</style>
+<style lang="scss" scoped>
+  ul,
+  li {
+    margin: 0;
+    padding: 0;
+  }
+
+  .moduler {
+    background: #fff;
+    margin-bottom: 16px;
+    position: relative;
+    padding: 32px 24px 48px 32px;
+    border-radius: 4px;
+    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
+
+    .moduler-title {
+      display: flex;
+      align-items: center;
+      font-size: 22px;
+      margin-bottom: 20px;
+    }
+
+    .row-item {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      margin-bottom: 32px;
+    }
+
+    .row-item:last-of-type {
+      margin-bottom: 0;
+    }
+
+    .row-item .hint-item {
+      width: 24px;
+      min-width: 24px;
+      align-self: flex-start;
+      line-height: 20px;
+      height: 20px;
+      margin-top: 5px;
+    }
+
+    .row-item .label-item {
+      position: relative;
+      align-items: flex-start;
+      align-self: flex-start;
+      line-height: 20px;
+      height: 20px;
+      margin-top: 7px;
+      width: 80px;
+      min-width: 80px;
+
+      .text-item {
+        font-size: 14px;
+        width: 60px;
+      }
+    }
+
+    .row-item .required-item {
+      width: 4px;
+      height: 4px;
+      border-radius: 2px;
+      background: #f45858;
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    .row-item .input-item {
+      min-width: 480px;
+      position: relative;
+
+      // height: 35px;
+      .tip {
+        font-size: 12px;
+        color: tomato;
+      }
+
+      .inventory-tags-lists-header {
+        background-color: #F8F9FA;
+        border: 1px solid #E4E9ED;
+        height: 36px;
+        line-height: 33px;
+        border-radius: 4px 4px 0 0;
+        font-weight: bold;
+        display: flex;
+      }
+
+      .inventory-tags-lists-container {
+        border: 1px solid #E4E9ED;
+        margin-top: -1px;
+        height: 100%;
+        padding: 4px 0px;
+        border-radius: 0 0 4px 4px;
+      }
+
+      .inventory-tags-lists-item {
+        width: 100%;
+        height: 37px;
+        line-height: 37px;
+        padding-left: 12px;
+        padding-right: 12px;
+        display: flex;
+        font-size: 14px;
+        color: #333;
+      }
+    }
+  }
+
+  .opt {
+    text-align: right;
+  }
+
+  .chouzhen {
+    border-style: solid;
+    border-width: 1px;
+    border-color: #e4e4e4;
+    width: calc(20% - 10px);
+    padding: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    background: #fff;
+    position: relative;
+    z-index: 99;
+    float: left
+  }
+</style>

文件差異過大導致無法顯示
+ 771 - 665
src/views/modules/BatchCreate/newCreate.vue


+ 0 - 1
src/views/modules/kuaishouapp/account/stepForm/Step2.vue

@@ -368,7 +368,6 @@
   import targetedPopulation from './stepModule/targetedPopulation.vue'
 
   import selectCheckAll from './stepModule/test'
-
   let dateQuantumRangeConst = ''
   const columns = [{
       title: '人群',

+ 1 - 1
vue.config.js

@@ -57,7 +57,7 @@ module.exports = {
     proxy: {
       '/jeecg-boot': {
         // target: 'http://192.168.1.90:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
-        // target: 'http://192.168.1.72:8088', //请求本地 需要jeecg-boot后台项目  英豪
+        target: 'http://192.168.1.72:8088', //请求本地 需要jeecg-boot后台项目  英豪
         // target: 'http://192.168.2.115:8080', //请求本地 需要jeecg-boot后台项目  祚云
         // target: 'http://192.168.1.94:8804', //请求本地 需要jeecg-boot后台项目  孙震
         target: 'http://192.168.1.51:8088', //请求本地 需要jeecg-boot后台项目  毕洁泉