浏览代码

抖音音乐库

朱鑫波 4 年之前
父节点
当前提交
8dfa5aea13

+ 5 - 0
public/index.html

@@ -12,10 +12,13 @@
   <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.2.5/polyfill.js"></script> -->
   <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.2.5/polyfill.js"></script> -->
   <script src="<%= BASE_URL %>polyfill.js"></script>
   <script src="<%= BASE_URL %>polyfill.js"></script>
   <script src="<%= BASE_URL %>web-office-sdk-v1.1.1.umd.js"></script>
   <script src="<%= BASE_URL %>web-office-sdk-v1.1.1.umd.js"></script>
+  <link href="https://fonts.googleapis.com/css?family=Lexend+Deca&display=swap" rel="stylesheet">
   <link
   <link
   rel="stylesheet"
   rel="stylesheet"
   href="//at.alicdn.com/t/font_1367495_eza6utwbiqn.css"
   href="//at.alicdn.com/t/font_1367495_eza6utwbiqn.css"
 />
 />
+
+
   <style>
   <style>
     html,
     html,
     body,
     body,
@@ -281,6 +284,8 @@
     window._CONFIG['imgDomainURL'] = 'http://139.186.31.213:8804/jeecg-boot/sys/common/view';
     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';
     window._CONFIG['pdfDomainURL'] = 'http://139.186.31.213:8804/jeecg-boot/sys/common/pdf/pdfPreviewIframe';
   </script>
   </script>
+  <script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
+
 </head>
 </head>
 
 
 <body>
 <body>

+ 1 - 1
src/App.vue

@@ -22,7 +22,7 @@ export default {
       // tablet
       // tablet
       if (deviceType === 0) {
       if (deviceType === 0) {
         that.$store.commit('TOGGLE_DEVICE', 'mobile')
         that.$store.commit('TOGGLE_DEVICE', 'mobile')
-        that.$store.dispatch('setSidebar', false)
+        that.$store.dispatch('setSidebar', true)
       }
       }
       // mobile
       // mobile
       else if (deviceType === 1) {
       else if (deviceType === 1) {

二进制
src/assets/success.png


+ 9 - 2
src/components/page/GlobalLayout.vue

@@ -1,7 +1,7 @@
 <template>
 <template>
   <a-layout class="layout" :class="[device]">
   <a-layout class="layout" :class="[device]">
-
     <template v-if="layoutMode === 'sidemenu'">
     <template v-if="layoutMode === 'sidemenu'">
+
       <a-drawer
       <a-drawer
         v-if="device === 'mobile'"
         v-if="device === 'mobile'"
         :wrapClassName="'drawer-sider ' + navTheme"
         :wrapClassName="'drawer-sider ' + navTheme"
@@ -75,7 +75,9 @@
     </a-layout>
     </a-layout>
 
 
     <!-- <setting-drawer></setting-drawer> -->
     <!-- <setting-drawer></setting-drawer> -->
+
   </a-layout>
   </a-layout>
+ 
 </template>
 </template>
 
 
 <script>
 <script>
@@ -122,11 +124,16 @@
     watch: {
     watch: {
       sidebarOpened(val) {
       sidebarOpened(val) {
         this.collapsed = !val
         this.collapsed = !val
+      },
+      device(n,o){
+        if(n=='desktop'){
+          this.menus = this.permissionMenuList
+        }
       }
       }
     },
     },
     created() {
     created() {
       //--update-begin----author:scott---date:20190320------for:根据后台菜单配置,判断是否路由菜单字段,动态选择是否生成路由(为了支持参数URL菜单)------
       //--update-begin----author:scott---date:20190320------for:根据后台菜单配置,判断是否路由菜单字段,动态选择是否生成路由(为了支持参数URL菜单)------
-      //this.menus = this.mainRouters.find((item) => item.path === '/').children;
+      // this.menus = this.mainRouters.find((item) => item.path === '/').children;
       this.menus = this.permissionMenuList
       this.menus = this.permissionMenuList
       // 根据后台配置菜单,重新排序加载路由信息
       // 根据后台配置菜单,重新排序加载路由信息
       // console.log('----加载菜单逻辑----')
       // console.log('----加载菜单逻辑----')

+ 2 - 2
src/store/modules/app.js

@@ -35,9 +35,9 @@ const app = {
       Vue.ls.set(SIDEBAR_TYPE, type)
       Vue.ls.set(SIDEBAR_TYPE, type)
     },
     },
     CLOSE_SIDEBAR: (state, withoutAnimation) => {
     CLOSE_SIDEBAR: (state, withoutAnimation) => {
-      Vue.ls.set(SIDEBAR_TYPE, true)
+      Vue.ls.set(SIDEBAR_TYPE, false)
       state.sidebar.opened = false
       state.sidebar.opened = false
-      state.sidebar.withoutAnimation = withoutAnimation
+      state.sidebar.withoutAnimation = false
     },
     },
     TOGGLE_DEVICE: (state, device) => {
     TOGGLE_DEVICE: (state, device) => {
       state.device = device
       state.device = device

+ 298 - 50
src/views/modules/kuaishouapp/account/stepForm/Step3.vue

@@ -384,7 +384,7 @@ li.chouzhen.first:before {
                           </span>
                           </span>
                         </a-form-item>
                         </a-form-item>
                         <a-form-item label="广告语">
                         <a-form-item label="广告语">
-                          <a @click="showTitle(index, bestIndex)">推荐广告语</a>
+                          <!-- <a @click="showTitle(index, bestIndex)">推荐广告语</a> -->
 
 
                           <a-textarea
                           <a-textarea
                             class="rending"
                             class="rending"
@@ -394,7 +394,7 @@ li.chouzhen.first:before {
                           ></a-textarea>
                           ></a-textarea>
                           <span v-if="item.description.length > 30" style="color: red">广告语长度不能超过30个字符</span>
                           <span v-if="item.description.length > 30" style="color: red">广告语长度不能超过30个字符</span>
                           <br />
                           <br />
-                          <a @click="cunTitle(index, bestIndex)">收藏</a>
+                          <!-- <a @click="cunTitle(index, bestIndex)">收藏</a>
                           <a @click="showCunTitle(index, bestIndex)" style="margin-left: 10px">收藏列表</a>
                           <a @click="showCunTitle(index, bestIndex)" style="margin-left: 10px">收藏列表</a>
                           <br />
                           <br />
                           <a-tag
                           <a-tag
@@ -402,7 +402,7 @@ li.chouzhen.first:before {
                             :key="indexTag"
                             :key="indexTag"
                             @click="getChange(item, itemTag, index)"
                             @click="getChange(item, itemTag, index)"
                             >{{ itemTag.name }}</a-tag
                             >{{ itemTag.name }}</a-tag
-                          >
+                          > -->
                         </a-form-item>
                         </a-form-item>
 
 
                         <a-form-item label="短广告语">
                         <a-form-item label="短广告语">
@@ -533,28 +533,41 @@ li.chouzhen.first:before {
       <a-button type="primary" @click="handleSubmit" :loading="loading">提交</a-button>
       <a-button type="primary" @click="handleSubmit" :loading="loading">提交</a-button>
     </a-form-item>
     </a-form-item>
     <checkMatemal ref="check" @showVideo="showData"></checkMatemal>
     <checkMatemal ref="check" @showVideo="showData"></checkMatemal>
-    <a-modal :maskClosable="false" v-model="visible" title="广告创意创建情况">
-      <div>
-        创建成功:{{ allForm.success.length }}条
-        <div style="margin-top: 20px">
-          <p v-for="(item, index) of allForm.success" :key="index">
-            <span>名称:{{ item.creativeName }}</span>
-          </p>
+    <a-modal :maskClosable="false" v-model="visible" :footer="null" :width="520">
+      <div style="width: 100%; height: 329px; display: flex; flex-flow: column">
+        <main
+          class="container"
+          style="width: 100%; text-align: center; margin: 66px auto 24px; font-size: 30px; font-weight: 100"
+        >
+          <h2 data-splitting class="headline headline--yell" style="color: red">起量</h2>
+        </main>
+
+        <div style="width: 100%; text-align: center; font-size: 24px; margin-bottom: 65px">
+          <img src="@/assets/success.png" alt="" style="width: 24px; margin-right: 10px" />创建成功
         </div>
         </div>
-        <br />
-        创建失败:{{ allForm.fail.length }}条
-        <div style="margin-top: 20px">
-          <p v-for="(item, index) of allForm.fail" :key="index">
-            <span>名称:{{ item.creativeName }}</span
-            ><br />
-            <span>错误信息:{{ item.failMessage }}</span>
-          </p>
+        <div style="width: 100%; margin-bottom: 43px; display: flex; justify-content: center">
+          <a-button key="submit" type="primary" @click="handleOk" style="margin-right: 8px"> 返回列表 </a-button>
+          <a-button key="back" @click="handleCancel">关闭</a-button>
         </div>
         </div>
       </div>
       </div>
-      <template slot="footer">
+      <!-- <div style="position: absolute; top: 20px;left:10px;font-size:20px">起量</div>
+      <div style="position: absolute; top: 50px;left:20px;font-size:20px">起量</div>
+      <div style="position: absolute; top: 70px;left:50px;font-size:20px">起量</div>
+      <div style="position: absolute; top: 90px;left:100px;font-size:20px">起量</div>
+      <div style="position: absolute; top: 110px;left:60px;font-size:20px">起量</div>
+      <div style="position: absolute; top: 130px;left:470px;font-size:20px">起量</div>
+      <div style="position: absolute; top: 150px;left:300px;font-size:20px">起量</div>
+      <div style="position: absolute; top: 170px;left:370px;font-size:20px">起量</div>
+      <div style="position: absolute; top: 190px;left:210px;font-size:20px">起量</div>
+      <div style="position: absolute; top: 160px;left:190px;font-size:20px">起量</div>
+      <div style="position: absolute; top: 260px;left:110px;font-size:20px">起量</div>
+      <div style="position: absolute; top: 280px;left:400px;font-size:20px">起量</div>
+      <div style="position: absolute; top: 300px;left:330px;font-size:20px">起量</div> -->
+
+      <!-- <template slot="footer">
         <a-button key="back" @click="handleCancel">关闭</a-button>
         <a-button key="back" @click="handleCancel">关闭</a-button>
         <a-button key="submit" type="primary" @click="handleOk"> 返回列表 </a-button>
         <a-button key="submit" type="primary" @click="handleOk"> 返回列表 </a-button>
-      </template>
+      </template> -->
     </a-modal>
     </a-modal>
     <a-modal
     <a-modal
       :maskClosable="false"
       :maskClosable="false"
@@ -667,15 +680,33 @@ li.chouzhen.first:before {
     <a-modal :maskClosable="false" title="选择素材" v-model="visibleMatemal" @ok="handleOkShow" :width="1000">
     <a-modal :maskClosable="false" title="选择素材" v-model="visibleMatemal" @ok="handleOkShow" :width="1000">
       <a-tabs type="card" @change="callback" v-model="active" class="check-video">
       <a-tabs type="card" @change="callback" v-model="active" class="check-video">
         <a-tab-pane :tab="item.label" v-for="item of tab" :key="item.value">
         <a-tab-pane :tab="item.label" v-for="item of tab" :key="item.value">
-          <a-range-picker name="buildTime" style="width: 400px; margin: 10px 0" v-model="time" />
+          <a-row :gutter="24">
+            <a-col :span="12">
+              <a-form-item label="日期选择" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-range-picker name="buildTime" v-model="time" />
+              </a-form-item>
+            </a-col>
+            <!-- <a-col :span="12">
+              <a-form-item label="筛选条件" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-select v-model="orderBy" style="width: 100%">
+                  <a-select-option value="time"> 按时间排序 </a-select-option>
+                  <a-select-option value="cost"> 按消耗排序</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col> -->
+          </a-row>
+
           <ul v-if="dataSource.length > 0" style="overflow: auto; padding-left: 0">
           <ul v-if="dataSource.length > 0" style="overflow: auto; padding-left: 0">
             <a-checkbox-group v-model="checkVideo" @change="onChangeVideo" style="width: 100%">
             <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">
+              <li v-for="(item, index) of dataSource" :key="index" class="chouzhen" style="height: 400px">
                 <!-- <video class="video" :src="item.url" controls="controls" style="width:100%">
                 <!-- <video class="video" :src="item.url" controls="controls" style="width:100%">
                   您的浏览器不支持 video 标签。
                   您的浏览器不支持 video 标签。
                 </video> -->
                 </video> -->
                 <a-checkbox :value="item" style="width: 100%; position: absolute; z-index: 100; right: 0; top: 0">
                 <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" />
+                  <img :src="item.coverUrl" alt="" style="width: 100%; margin-bottom: 30px" />
+                  <div style="width: 100%; text-align: center">
+                    {{ item.statDate ? '时间:' + item.statDate.split(' ')[0] : '消耗:' + item.charge }}
+                  </div>
                 </a-checkbox>
                 </a-checkbox>
                 <a @click="matemalVideo(item, index)" style="position: absolute; z-index: 100; right: 56px; bottom: 5px"
                 <a @click="matemalVideo(item, index)" style="position: absolute; z-index: 100; right: 56px; bottom: 5px"
                   >查看视频</a
                   >查看视频</a
@@ -900,6 +931,7 @@ export default {
       visibleVideo: false,
       visibleVideo: false,
       videoUrlShow: '',
       videoUrlShow: '',
       time: [],
       time: [],
+      orderBy: 'time',
       channelType: 0,
       channelType: 0,
       checkVideo: [],
       checkVideo: [],
       dataSource: [],
       dataSource: [],
@@ -1186,7 +1218,7 @@ export default {
         }
         }
       })
       })
     },
     },
-    
+
     okTag() {
     okTag() {
       var data = this.$refs.tree.getCheckedKeys()
       var data = this.$refs.tree.getCheckedKeys()
       if (data.length > 1) {
       if (data.length > 1) {
@@ -1209,7 +1241,7 @@ export default {
               }),
               }),
             })
             })
             this.creativeTagVisible = false
             this.creativeTagVisible = false
-          }else{
+          } else {
             this.$message.error('选择出错,请稍后选择或自行手填')
             this.$message.error('选择出错,请稍后选择或自行手填')
           }
           }
         })
         })
@@ -1448,7 +1480,7 @@ export default {
       // params.materialType = this.getData('creativeMaterialType')
       // params.materialType = this.getData('creativeMaterialType')
       // params.pageSize = this.ipagination.pageSize
       // params.pageSize = this.ipagination.pageSize
       // params.pageNo = this.ipagination.current
       // params.pageNo = this.ipagination.current
-      // this.showVideoList('/kuaishou/batch/getVideoList', params)
+      // this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
     },
     },
     getDataSource(page, pageSize) {
     getDataSource(page, pageSize) {
       this.ipagination.current = page
       this.ipagination.current = page
@@ -1459,20 +1491,22 @@ export default {
       params.pageNo = page
       params.pageNo = page
       params.channelType = this.channelType
       params.channelType = this.channelType
       params.status = 0
       params.status = 0
+      params.orderBy = this.orderBy
       if (this.time.length > 0) {
       if (this.time.length > 0) {
         // params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
         // params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
         // params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
         // params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
         params.startDate = moment(this.time[0]).format('YYYY-MM-DD') + ' 00:00:00'
         params.startDate = moment(this.time[0]).format('YYYY-MM-DD') + ' 00:00:00'
         params.endDate = moment(this.time[1]).format('YYYY-MM-DD') + ' 23:59:59'
         params.endDate = moment(this.time[1]).format('YYYY-MM-DD') + ' 23:59:59'
       }
       }
-      this.showVideoList('/kuaishou/batch/getVideoList', params)
+      this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
     },
     },
     showVideoList(url, params) {
     showVideoList(url, params) {
       this.dataSource = []
       this.dataSource = []
       this.loadingVideoList = true
       this.loadingVideoList = true
       getAction(url, params).then((res) => {
       getAction(url, params).then((res) => {
+        console.log(res)
         if (res.success) {
         if (res.success) {
-          this.dataSource = res.result.records
+          this.dataSource = res.result.list
           this.ipagination.total = res.result.total
           this.ipagination.total = res.result.total
           this.loadingVideoList = false
           this.loadingVideoList = false
         } else {
         } else {
@@ -1484,6 +1518,7 @@ export default {
       if (type == 'video') {
       if (type == 'video') {
         nowIndex = index
         nowIndex = index
         bestIndex = bestIndex
         bestIndex = bestIndex
+        this.orderBy = 'time'
         this.visibleMatemal = true
         this.visibleMatemal = true
         this.checkVideo = []
         this.checkVideo = []
         this.active = 0
         this.active = 0
@@ -1496,7 +1531,7 @@ export default {
         //   params.pageSize = this.ipagination.pageSize
         //   params.pageSize = this.ipagination.pageSize
         //   params.pageNo = this.ipagination.current
         //   params.pageNo = this.ipagination.current
         //   params.params.channelType = 0 = 0
         //   params.params.channelType = 0 = 0
-        //   this.showVideoList('/kuaishou/batch/getVideoList', params)
+        //   this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
       } else {
       } else {
         this.creativeMaterialType = item.creativeMaterialType
         this.creativeMaterialType = item.creativeMaterialType
         this.$refs.check.showCheck(
         this.$refs.check.showCheck(
@@ -1540,21 +1575,15 @@ export default {
       }
       }
     },
     },
     handleOk() {
     handleOk() {
-      if (this.allForm.fail.length == 0) {
-        this.remove(this.pansKey)
-        if (localStorage.getItem('originality')) {
-          this.$router.replace({
-            path: '/account/originality',
-          })
-        } else {
-          this.$router.replace({
-            path: '/account/accountIndex',
-          })
-        }
-
-        this.visible = false
+      this.remove(this.pansKey)
+      if (localStorage.getItem('originality')) {
+        this.$router.replace({
+          path: '/account/originality',
+        })
       } else {
       } else {
-        this.visible = false
+        this.$router.replace({
+          path: '/account/accountIndex',
+        })
       }
       }
     },
     },
     handleCancel(e) {
     handleCancel(e) {
@@ -1643,9 +1672,10 @@ export default {
           postAction('/kuaishou/batch/createCreative', params).then((res) => {
           postAction('/kuaishou/batch/createCreative', params).then((res) => {
             if (res.success) {
             if (res.success) {
               this.visible = true
               this.visible = true
-              this.allForm.fail = res.result.fail
-              this.allForm.success = res.result.success
               this.loading = false
               this.loading = false
+              this.$nextTick(() => {
+                Splitting()
+              })
             } else {
             } else {
               this.loading = false
               this.loading = false
               this.$message.error(res.message)
               this.$message.error(res.message)
@@ -1728,13 +1758,14 @@ export default {
           params.pageNo = 1
           params.pageNo = 1
           params.status = 0
           params.status = 0
           params.channelType = this.channelType
           params.channelType = this.channelType
+          params.orderBy = this.orderBy
           if (this.time.length > 0) {
           if (this.time.length > 0) {
             // params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
             // params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
             // params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
             // params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
             params.startDate = moment(this.time[0]).format('YYYY-MM-DD') + ' 00:00:00'
             params.startDate = moment(this.time[0]).format('YYYY-MM-DD') + ' 00:00:00'
             params.endDate = moment(this.time[1]).format('YYYY-MM-DD') + ' 23:59:59'
             params.endDate = moment(this.time[1]).format('YYYY-MM-DD') + ' 23:59:59'
           }
           }
-          this.showVideoList('/kuaishou/batch/getVideoList', params)
+          this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
         } else {
         } else {
           this.$message.error(res.message)
           this.$message.error(res.message)
           this.tongbuLoading = false
           this.tongbuLoading = false
@@ -2143,7 +2174,8 @@ export default {
         params.channelType = this.channelType
         params.channelType = this.channelType
         params.startDate = moment(n[0]).format('YYYY-MM-DD') + ' 00:00:00'
         params.startDate = moment(n[0]).format('YYYY-MM-DD') + ' 00:00:00'
         params.endDate = moment(n[1]).format('YYYY-MM-DD') + ' 23:59:59'
         params.endDate = moment(n[1]).format('YYYY-MM-DD') + ' 23:59:59'
-        this.showVideoList('/kuaishou/batch/getVideoList', params)
+        params.orderBy = this.orderBy
+        this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
       } else {
       } else {
         var params = {}
         var params = {}
         params.accountId = localStorage.getItem('accountId')
         params.accountId = localStorage.getItem('accountId')
@@ -2152,10 +2184,27 @@ export default {
         params.pageNo = 1
         params.pageNo = 1
         params.status = 0
         params.status = 0
         params.channelType = this.channelType
         params.channelType = this.channelType
+        params.orderBy = this.orderBy
         this.ipagination.current = 1
         this.ipagination.current = 1
-        this.showVideoList('/kuaishou/batch/getVideoList', params)
+        this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
       }
       }
     },
     },
+    orderBy(n, o) {
+      var params = {}
+      params.accountId = localStorage.getItem('accountId')
+      params.materialType = this.creativeMaterialType
+      params.pageSize = this.ipagination.pageSize
+      params.pageNo = 1
+      params.status = 0
+      params.channelType = this.channelType
+      if (this.time.length > 0) {
+        params.startDate = moment(this.time[0]).format('YYYY-MM-DD') + ' 00:00:00'
+        params.endDate = moment(this.time[1]).format('YYYY-MM-DD') + ' 23:59:59'
+      } else {
+      }
+      params.orderBy = n
+      this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
+    },
     visibleVideo(n, o) {
     visibleVideo(n, o) {
       if (!n) {
       if (!n) {
         closeAllVideoFun()
         closeAllVideoFun()
@@ -2169,6 +2218,7 @@ export default {
   },
   },
   mounted: function () {
   mounted: function () {
     this.$nextTick(() => {
     this.$nextTick(() => {
+      Splitting()
       if (localStorage.getItem('pans')) {
       if (localStorage.getItem('pans')) {
         this.pans = JSON.parse(localStorage.getItem('pans')).map((item) => {
         this.pans = JSON.parse(localStorage.getItem('pans')).map((item) => {
           return {
           return {
@@ -2182,7 +2232,14 @@ export default {
         })
         })
         this.pansKey = this.pans[0].key
         this.pansKey = this.pans[0].key
         setTimeout(() => {
         setTimeout(() => {
-          this.addCreative(0)
+          if (
+            this.pane.sceneId.indexOf(5) >= 0 ||
+            this.pane.sceneId.indexOf(1) >= 0 ||
+            this.pane.sceneId.indexOf(7) >= 0 ||
+            this.pane.sceneId.indexOf(6) >= 0
+          ) {
+            this.addCreative(0)
+          }
         }, 0)
         }, 0)
 
 
         getAction('/kuaishou/batch/checkCreativeCount', {
         getAction('/kuaishou/batch/checkCreativeCount', {
@@ -2263,5 +2320,196 @@ export default {
   },
   },
 }
 }
 </script>
 </script>
-<style lang="scss">
+<style lang="scss" scope>
+$colors: #f9ca24, #3498db, #ff7979, #1abc9c, #e74c3c, #f8c291;
+
+/* Recommended styles for Splitting */
+.splitting .word,
+.splitting .char {
+  display: inline-block;
+}
+
+/* Psuedo-element chars */
+.splitting .char {
+  position: relative;
+}
+
+/**
+ * Populate the psuedo elements with the character to allow for expanded effects
+ * Set to `display: none` by default; just add `display: block` when you want
+ * to use the psuedo elements
+ */
+.splitting .char::before,
+.splitting .char::after {
+  content: attr(data-char);
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  transition: inherit;
+  user-select: none;
+}
+
+/* Expanded CSS Variables */
+
+.splitting {
+  /* The center word index */
+  --word-center: calc((var(--word-total) - 1) / 2);
+
+  /* The center character index */
+  --char-center: calc((var(--char-total) - 1) / 2);
+
+  /* The center character index */
+  --line-center: calc((var(--line-total) - 1) / 2);
+}
+
+.splitting .word {
+  /* Pecent (0-1) of the word's position */
+  --word-percent: calc(var(--word-index) / var(--word-total));
+
+  /* Pecent (0-1) of the line's position */
+  --line-percent: calc(var(--line-index) / var(--line-total));
+}
+
+.splitting .char {
+  /* Percent (0-1) of the char's position */
+  --char-percent: calc(var(--char-index) / var(--char-total));
+
+  /* Offset from center, positive & negative */
+  --char-offset: calc(var(--char-index) - var(--char-center));
+
+  /* Absolute distance from center, only positive */
+  --distance: calc((var(--char-offset) * var(--char-offset)) / var(--char-center));
+
+  /* Distance from center where -1 is the far left, 0 is center, 1 is far right */
+  --distance-sine: calc(var(--char-offset) / var(--char-center));
+
+  /* Distance from center where 1 is far left/far right, 0 is center */
+  --distance-percent: calc((var(--distance) / var(--char-center)));
+}
+
+* {
+  box-sizing: border-box;
+}
+* {
+  margin: 0;
+  padding: 0;
+}
+
+// html, body {
+//   height: 100%;
+// }
+
+.headline {
+  align-items: center;
+  // background-color: var(--color);
+  display: flex;
+  font-family: 'Lexend Deca', sans-serif;
+  font-weight: 400;
+  // font-size: calc(1rem + 15vmin);
+  height: 72px;
+  justify-content: center;
+  // overflow: hidden;
+  perspective: 1000px;
+  scroll-snap-align: start;
+  width: 100%;
+}
+
+.word,
+.char {
+  animation-delay: var(--del);
+  animation-direction: var(--dir, normal);
+  animation-duration: var(--dur);
+  animation-iteration-count: infinite;
+  animation-name: var(--name);
+  animation-timing-function: var(--tf);
+  display: inline-block;
+  position: relative;
+  transform-origin: 50% 100%;
+  z-index: 1;
+}
+
+// =========================
+// Headline animations
+// =========================
+
+.headline--yell .char {
+  --name: yell;
+  --dur: 2s;
+  --tf: ease;
+  -webkit-transform-origin: 50% 100%;
+  transform-origin: 50% 100%;
+}
+@-webkit-keyframes yell {
+  3% {
+    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+    transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+  }
+  6% {
+    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+    transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+  }
+  12% {
+    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+    transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+  }
+  18% {
+    -webkit-transform: scaleY(1) translateY(-2%);
+    transform: scaleY(1) translateY(-2%);
+  }
+  25% {
+    -webkit-transform: scaleY(0.98);
+    transform: scaleY(0.98);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+  75% {
+    -webkit-transform: scale(0.98);
+    transform: scale(0.98);
+  }
+}
+@keyframes yell {
+  3% {
+    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+    transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+  }
+  6% {
+    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+    transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+  }
+  12% {
+    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+    transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine)))
+      translateY(-10%);
+  }
+  18% {
+    -webkit-transform: scaleY(1) translateY(-2%);
+    transform: scaleY(1) translateY(-2%);
+  }
+  25% {
+    -webkit-transform: scaleY(0.98);
+    transform: scaleY(0.98);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+  75% {
+    -webkit-transform: scale(0.98);
+    transform: scale(0.98);
+  }
+}
 </style>
 </style>

+ 73 - 0
src/views/modules/kuaishouapp/account/stepForm/stepModule/animate.css

@@ -0,0 +1,73 @@
+
+
+
+
+/* Recommended styles for Splitting */
+.splitting .word,
+.splitting .char {
+  display: inline-block;
+}
+
+/* Psuedo-element chars */
+.splitting .char {
+  position: relative;
+}
+
+/**
+ * Populate the psuedo elements with the character to allow for expanded effects
+ * Set to `display: none` by default; just add `display: block` when you want
+ * to use the psuedo elements
+ */
+.splitting .char::before,
+.splitting .char::after {
+  content: attr(data-char);
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  transition: inherit;
+  user-select: none;
+}
+
+/* Expanded CSS Variables */
+
+.splitting {
+  /* The center word index */
+  --word-center: calc((var(--word-total) - 1) / 2);
+
+  /* The center character index */
+  --char-center: calc((var(--char-total) - 1) / 2);
+
+  /* The center character index */
+  --line-center: calc((var(--line-total) - 1) / 2);
+}
+
+.splitting .word {
+  /* Pecent (0-1) of the word's position */
+  --word-percent: calc(var(--word-index) / var(--word-total));
+
+  /* Pecent (0-1) of the line's position */
+  --line-percent: calc(var(--line-index) / var(--line-total));
+}
+
+.splitting .char {
+  /* Percent (0-1) of the char's position */
+  --char-percent: calc(var(--char-index) / var(--char-total));
+
+  /* Offset from center, positive & negative */
+  --char-offset: calc(var(--char-index) - var(--char-center));
+
+  /* Absolute distance from center, only positive */
+  --distance: calc(
+     (var(--char-offset) * var(--char-offset)) / var(--char-center)
+  );
+
+  /* Distance from center where -1 is the far left, 0 is center, 1 is far right */
+  --distance-sine: calc(var(--char-offset) / var(--char-center));
+
+  /* Distance from center where 1 is far left/far right, 0 is center */
+  --distance-percent: calc((var(--distance) / var(--char-center)));
+}
+
+
+

+ 461 - 0
src/views/modules/kuaishouapp/crossAccount/createCampaign.vue

@@ -0,0 +1,461 @@
+<style>
+.create-campaign .ant-form-item-control {
+  line-height: inherit;
+}
+</style>
+<template>
+  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false" class="create-campaign">
+    <a-form @submit="handleSubmit" :form="form">
+      <a-form-item
+        label="选择账户"
+        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
+        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
+      >
+        <Treeselect :appId.sync="accountIds" request="2,4" ref="treeSelect" style="width: 100%" />
+      </a-form-item>
+      <a-form-item
+        label="推广目的"
+        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
+        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
+      >
+        <a-radio-group v-decorator="['type', { initialValue: 2 }]" buttonStyle="solid">
+          <!-- <a-radio-button
+            v-for="purpose in typeList"
+            :key="purpose.itemText"
+            :value="purpose.itemValue"
+          >{{purpose.itemText}}</a-radio-button> -->
+          <a-radio-button :value="2">提升应用安装</a-radio-button>
+          <a-radio-button :value="3">获取电商下单</a-radio-button>
+          <a-radio-button :value="4">推广品牌活动</a-radio-button>
+          <a-radio-button :value="5">收集销售线索</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+
+      <a-form-item
+        label="创建数量"
+        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
+        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
+      >
+        <!-- {{ createTotal }} -->
+        <a-input-number
+          v-decorator="['createTotal', { initialValue: 1 }]"
+          :min="1"
+          :max="10"
+          @change="changeCreateTotal"
+        />
+      </a-form-item>
+      <a-form-item
+        label="命名方式"
+        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
+        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
+      >
+        <a-radio-group v-decorator="['nameType', { initialValue: 0 }]" buttonStyle="solid" @change="nameTypeChange">
+          <a-radio-button :value="0">统一命名</a-radio-button>
+          <a-radio-button :value="1">分别命名</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item
+        label="计划名称"
+        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
+        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
+        v-if="getData('nameType') == 0"
+      >
+        <!-- campaignName -->
+
+        <a-input
+          class="rending"
+          placeholder="请输入计划名称"
+          v-model="campaignName"
+          style="margin-bottom: 20px"
+        ></a-input>
+        <br />
+        <a-tag color="#2db7f5" @click="getChange('项目名称', 0)">项目名称</a-tag>
+        <a-tag color="#2db7f5" @click="getChange('计划类型', 0)">计划类型</a-tag>
+        <a-tag color="#2db7f5" @click="getChange('日期', 0)">日期</a-tag>
+        <a-tag color="#2db7f5" @click="getChange('数值', 0)">数值</a-tag>
+      </a-form-item>
+      <a-form-item
+        label="计划名称"
+        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
+        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
+        v-if="getData('nameType') == 1"
+      >
+        <!-- campaignName -->
+        <!-- @change="callback" -->
+        <!-- {{ tabs }} -->
+        <a-tabs v-model="active" type="card">
+          <a-tab-pane :key="item.accountId" :tab="item.authName" v-for="(item, index) of tabs">
+            <div v-for="(items, indexBest) of item.campaignNames" :key="indexBest" style="margin-bottom: 10px">
+              <a-input
+                class="rending"
+                placeholder="请输入计划名称"
+                v-model="items.campaignName"
+                style="margin-bottom: 10px"
+              ></a-input>
+              <br />
+              <a-tag color="#2db7f5" @click="getChangeAll('项目名称', indexBest, index, items)">项目名称</a-tag>
+              <a-tag color="#2db7f5" @click="getChangeAll('计划类型', indexBest, index, items)">计划类型</a-tag>
+              <a-tag color="#2db7f5" @click="getChangeAll('日期', indexBest, index, items)">日期</a-tag>
+              <a-tag color="#2db7f5" @click="getChangeAll('数值', indexBest, index, items)">数值</a-tag>
+            </div>
+          </a-tab-pane>
+        </a-tabs>
+        <!-- <a-input
+          class="rending"
+          placeholder="请输入计划名称"
+          v-model="campaignName"
+          style="margin-bottom: 20px"
+        ></a-input>
+        <br />
+        <a-tag color="#2db7f5" @click="getChange('项目名称')">项目名称</a-tag>
+        <a-tag color="#2db7f5" @click="getChange('计划类型')">计划类型</a-tag>
+        <a-tag color="#2db7f5" @click="getChange('日期')">日期</a-tag>
+        <a-tag color="#2db7f5" @click="getChange('数值')">数值</a-tag> -->
+      </a-form-item>
+      <a-form-item
+        label="单日预算"
+        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
+        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
+      >
+        <a-radio-group @change="showBudgetStatusChange" v-model="campaignBudget">
+          <a-radio-button value="UNLIMITED">不限</a-radio-button>
+          <a-radio-button value="AS_BUDGET">统一预算</a-radio-button>
+          <a-radio-button value="DAY_BUDGET">分日预算</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item
+        label="预算金额"
+        v-if="campaignBudget == 'AS_BUDGET'"
+        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
+        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
+      >
+        <a-input
+          v-decorator="[
+            'dayBudget',
+            { rules: [{ required: true, message: 'error:' }, { validator: handleConfirmValue }] },
+          ]"
+          placeholder="不小于500,不超过100000000,仅支持输入自然数"
+          type="number"
+          style="width: 70%"
+        ></a-input
+        >元
+      </a-form-item>
+      <a-form-item
+        label="分日预算"
+        v-if="campaignBudget == 'DAY_BUDGET'"
+        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
+        :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
+      >
+        <!-- <a-input
+          v-decorator="[
+            'dayBudget',
+            { rules: [{ required: true, message: 'error:' }, { validator: handleConfirmValue }] },
+          ]"
+          placeholder="不小于500,不超过100000000,仅支持输入自然数"
+          type="number"
+          style="width: 70%"
+        ></a-input
+        >元 -->
+        <a-row>
+          <a-col :span="3" v-for="(item, index) of dayBudgetSchedule" :key="index">
+            <a-card :title="'周' + numberReturn(index)">
+              <a-input-number :min="500" :max="100000000" v-model="item.one" :precision="1" />
+            </a-card>
+          </a-col>
+        </a-row>
+      </a-form-item>
+      <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
+        <a-button htmlType="submit" type="primary" :loading="loading">下一步</a-button>
+        <!-- <a-button style="margin-left: 8px">保存</a-button> -->
+      </a-form-item>
+    </a-form>
+  </a-card>
+</template>
+
+<script>
+import { deleteAction, postAction, getAction } from '@/api/manage'
+import moment from 'moment'
+import { mapActions, mapGetters } from 'vuex'
+import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
+export default {
+  name: 'create-campaign',
+  components: {
+    Treeselect,
+  },
+  data() {
+    return {
+      accountIds: [],
+      active: null,
+      promotionName: '',
+      tabs: [],
+      dayBudgetSchedule: [{ one: '' }, { one: '' }, { one: '' }, { one: '' }, { one: '' }, { one: '' }, { one: '' }],
+      type: '2',
+      typeList: {},
+      appList: {},
+      showBudgetDaily: false,
+      campaignName: '',
+      campaignBudget: 'UNLIMITED',
+      dayBudget: 0,
+      appId: '0', //应用目标
+      showApp: true,
+      redirectUrl: '', // 链接地址
+      showRedirect: false,
+      urlType: '1',
+      showUrlType: false,
+      channelType: '1',
+      showChannelType: false,
+      loading: false,
+      form: this.$form.createForm(this),
+      url: {
+        dictListUrl: 'toutiao/dictitem/list',
+        appListUrl: '/kuaishou/kuaiShouCreateAppTemplate/list',
+        insertTemplateUrl: '/kuaishou/batch/campaignCreate',
+      },
+      createTotal: [],
+    }
+  },
+  methods: {
+    ...mapGetters(['nickname', 'avatar', 'userInfo']),
+    numberReturn(num) {
+      var arr = ['一', '二', '三', '四', '五', '六', '天']
+      return arr[num]
+    },
+    getCampaignId(campaignId) {
+      alert(1)
+    },
+    changeCreateTotal() {
+      this.$nextTick(() => {
+        this.createTotal = []
+        for (let i = 0; i < this.getData('createTotal'); i++) {
+          this.createTotal.push({ campaignName: '' })
+        }
+      })
+    },
+    nameTypeChange(e) {
+      console.log(e.target.value)
+      if (e.target.value == 1) {
+        if (this.accountIds.length > 0) {
+          postAction('/kuaishou/crossAccount/getAuthName', { accountArr: this.accountIds }).then((res) => {
+            if (res.success) {
+              this.tabs = res.result.map((item) => {
+                return {
+                  ...item,
+                  campaignNames: JSON.parse(JSON.stringify(this.createTotal)),
+                }
+              })
+              this.active = res.result[0].accountId
+            } else {
+              this.tabs = []
+            }
+          })
+        }
+      } else {
+      }
+    },
+    getChangeAll(name, indexBest, index, items) {
+      var node = document.getElementsByClassName('rending')[indexBest]
+      var v = '{{' + name + '}}-'
+      if (document.selection) {
+        //IE
+        node.focus()
+        var sel = document.selection.createRange()
+        sel.text = v
+        sel.select()
+        items.campaignName = v
+      } 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
+        }
+        items.campaignName = node.value
+        node.focus()
+        node.selectionStart = startPos + v.length
+        node.selectionEnd = startPos + v.length
+        // this.campaignName = node.value
+      } else {
+        //OTHER
+        node.value += v
+        items.campaignName = node.value
+        node.focus()
+        // this.campaignName = node.value
+      }
+    },
+    getChange(name, index) {
+      console.log(index, document.getElementsByClassName('rending'))
+      var node = document.getElementsByClassName('rending')[index]
+      var v = '{{' + name + '}}-'
+      if (document.selection) {
+        //IE
+        node.focus()
+        var sel = document.selection.createRange()
+        sel.text = v
+        sel.select()
+        this.campaignName = v
+      } 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
+        }
+        this.campaignName = node.value
+        node.focus()
+        node.selectionStart = startPos + v.length
+        node.selectionEnd = startPos + v.length
+        // this.campaignName = node.value
+      } else {
+        //OTHER
+        node.value += v
+        this.campaignName = node.value
+        node.focus()
+        // this.campaignName = node.value
+      }
+    },
+    handleConfirmValue(rule, value, callback) {
+      if (value == '' || value < 500 || value >= 100000000) {
+        callback('请输入正确预算金额')
+      }
+      callback()
+    },
+
+    handleConfirmAppId(rule, value, callback) {
+      if (this.type == 2 && (this.appId == '0' || this.appId == '')) {
+        callback('请选择目标应用')
+      }
+      callback()
+    },
+
+    handleSubmit(e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.loading = true
+
+          let params = {}
+          params.type = values.type
+          //   params.campaignBudget = this.campaignBudget
+          if (this.campaignBudget == 'UNLIMITED') {
+            params.dayBudget = 0
+          } else if (this.campaignBudget == 'AS_BUDGET') {
+            params.dayBudget = values.dayBudget * 1000
+          } else {
+            params.dayBudgetSchedule = this.dayBudgetSchedule.map((item) => {
+              if (item.one == '') {
+                return 0
+              } else {
+                return item.one * 1000
+              }
+            })
+          }
+          if (this.getData('nameType') == 0) {
+            var dataArr = this.campaignName.split('-')
+            if (dataArr[dataArr.length - 1] == '') {
+              dataArr.pop()
+            }
+            params.campaignName = dataArr.join('-')
+          } else {
+            params.nameArr = this.tabs.map((item) => {
+              return {
+                accountId: item.accountId,
+                campaignNames: item.campaignNames.map((i) => {
+                  return i.campaignName
+                }),
+              }
+            })
+          }
+
+          params.accountArr = this.accountIds
+          params.nameType = values.nameType
+          params.createTotal = values.createTotal
+          console.log(params)
+
+          postAction('/kuaishou/crossAccount/batchCampaignCreate', params).then((res) => {
+            console.log(res)
+            if (res.success) {
+              this.$message.success('创建成功')
+              localStorage.setItem('campaignId', res.result)
+              this.loading = false
+              this.nextStep(res.result)
+            } else {
+              this.$message.error(res.message)
+              this.loading = false
+            }
+          })
+        }
+      })
+    },
+    onChange(value) {
+      console.log(value)
+    },
+    showBudgetStatusChange() {
+      if (this.campaignBudget == 'UNLIMITED') {
+        this.showBudgetDaily = false
+        this.dayBudget = 0
+      } else {
+        this.showBudgetDaily = true
+        this.dayBudget = ''
+      }
+    },
+    typeChange() {
+      if (this.type == 2) {
+        this.promotionName = '提升应用安装'
+        this.showApp = true
+        this.showRedirect = false
+        this.showUrlType = false
+        this.showChannelType = false
+      }
+      if (this.type == 3) {
+        this.promotionName = '获取电商下单'
+        this.showApp = false
+        this.showRedirect = true
+        this.showUrlType = true
+        this.showChannelType = false
+      }
+      if (this.type == 4) {
+        this.promotionName = '推广品牌活动'
+        this.showApp = false
+        this.showRedirect = true
+        this.showUrlType = false
+        this.showChannelType = false
+      }
+      if (this.type == 5) {
+        this.promotionName = '收集销售线索'
+        this.showApp = false
+        this.showRedirect = true
+        this.showUrlType = false
+        this.showChannelType = true
+      }
+      this.campaignName = this.promotionName + '_' + moment(new Date())
+    },
+    handleChange(value) {
+      console.log(`selected ${value}`)
+    },
+    handleBlur() {
+      console.log('blur')
+    },
+    handleFocus() {
+      console.log('focus')
+    },
+    filterOption(input, option) {
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    },
+    nextStep() {
+      this.$emit('nextStep')
+    },
+    getData(className) {
+      return this.form.getFieldValue(className)
+    },
+  },
+  mounted: function () {
+    this.$nextTick(() => {
+      this.changeCreateTotal()
+    })
+  },
+}
+</script>

文件差异内容过多而无法显示
+ 884 - 0
src/views/modules/material/musicBytedance.vue


+ 17 - 12
src/views/modules/material/musicTab.vue

@@ -67,13 +67,13 @@
 }
 }
 </style>
 </style>
 <template>
 <template>
-  <div class="music-tab" style="background:white;padding:20px">
-    <a-tabs default-active-key="1">
+  <div class="music-tab" style="background: white; padding: 20px">
+    <a-tabs v-model="active" @change="callBack">
       <a-tab-pane key="1" tab="网易云">
       <a-tab-pane key="1" tab="网易云">
         <wyyMusic />
         <wyyMusic />
       </a-tab-pane>
       </a-tab-pane>
       <a-tab-pane key="2" tab="抖音">
       <a-tab-pane key="2" tab="抖音">
-          
+        <dyMusic v-if="active == '2'" />
       </a-tab-pane>
       </a-tab-pane>
     </a-tabs>
     </a-tabs>
   </div>
   </div>
@@ -81,17 +81,19 @@
 
 
 <script>
 <script>
 import wyyMusic from './musicMaterial.vue'
 import wyyMusic from './musicMaterial.vue'
+import dyMusic from './musicBytedance.vue'
+import { mapActions } from 'vuex'
 export default {
 export default {
   name: 'music-tab',
   name: 'music-tab',
   components: {
   components: {
-   wyyMusic
+    wyyMusic,
+    dyMusic,
   },
   },
   data() {
   data() {
     return {
     return {
+      active: '1',
       loading: true,
       loading: true,
       center: null,
       center: null,
-      rankList,
-      barData,
       loginfo: {},
       loginfo: {},
       visitFields: ['ip', 'visit'],
       visitFields: ['ip', 'visit'],
       visitInfo: [],
       visitInfo: [],
@@ -102,15 +104,18 @@ export default {
       versionId: 0, //存储版本号 判断通知什么时候显示
       versionId: 0, //存储版本号 判断通知什么时候显示
     }
     }
   },
   },
-  created() {
-
-  },
+  created() {},
   methods: {
   methods: {
-   
-  },
-  mounted() {
+    ...mapActions(['clearPlayList']),
+    callBack() {
+      if(this.active=='1'){
 
 
+      }else{
+        this.clearPlayList()
+      }
+    },
   },
   },
+  mounted() {},
 }
 }
 </script>
 </script>
 
 

+ 243 - 25
src/views/playerPart/playerList.vue

@@ -49,7 +49,10 @@
           :loading="loading"
           :loading="loading"
         >
         >
           <span slot="action" slot-scope="text, record">
           <span slot="action" slot-scope="text, record">
-            <a @click="preview(record)">替换素材</a>
+            <a @click="downloadZip(record)">导出</a>
+
+            <a-divider type="vertical" />
+            <a @click="changeView(record)">替换素材</a>
 
 
             <a-divider type="vertical" />
             <a-divider type="vertical" />
             <a @click="preview(record)">预览</a>
             <a @click="preview(record)">预览</a>
@@ -108,33 +111,91 @@
     <a-modal
     <a-modal
       title="替换素材"
       title="替换素材"
       :visible="changeVisible"
       :visible="changeVisible"
-      @cancel="handleCancel"
+      @cancel="changeVisible = false"
       :width="1000"
       :width="1000"
-      @ok="saveFile"
-      :confirm-loading="confirmLoading"
+      @ok="changeFile"
+      :confirm-loading="changeLoading"
     >
     >
-      <a-form :form="form">
-        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="模板所属账户">
-          <Treeselect :appId.sync="appId" :multiple="false" request="1,3" ref="treeSelect" style="width: 100%" />
-        </a-form-item>
-        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="模板类型">
-          <a-input
-            placeholder="请输入模板类型"
-            v-decorator.trim="['fileType', { rules: [{ required: true, message: '请输入模板类型' }] }]"
-          />
-        </a-form-item>
-        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="模板文件">
+      <a-list class="demo-loadmore-list" :loading="loading" item-layout="horizontal" :data-source="dataList">
+        <!-- <a-list-item slot="renderItem" slot-scope="item, index"> -->
+        <a-list-item-meta style="margin-bottom: 10px">
+          <a slot="title">是否重新生成</a>
+          <div slot="description">
+            <a-radio-group v-model="create" button-style="solid">
+              <a-radio-button value="1"> 是 </a-radio-button>
+              <a-radio-button value="2"> 否 </a-radio-button>
+            </a-radio-group>
+          </div>
+        </a-list-item-meta>
+        <a-list-item-meta v-if="create == '1'">
+          <a slot="title">请输入试玩名称(不填默认拼接时间)</a>
+          <div slot="description">
+            <a-input placeholder="请输入试玩名称" v-model="fileName" />
+          </div>
+        </a-list-item-meta>
+
+        <!-- </a-list-item> -->
+        <a-list-item slot="renderItem" slot-scope="item, index">
           <a-upload
           <a-upload
             name="file"
             name="file"
             action="http://192.168.1.251/jeecg-boot"
             action="http://192.168.1.251/jeecg-boot"
-            :customRequest="customRequest"
+            :customRequest="customRequestChange"
+            :beforeUpload="beforeUpload"
             :fileList="defaultFileList"
             :fileList="defaultFileList"
+            slot="actions"
+            v-if="item.fileSuffix == 'png' || item.fileSuffix == 'jpg' || item.fileSuffix == 'gif'"
           >
           >
-            <a-button> <a-icon type="upload" /> Click to Upload </a-button>
+            <a @click="getIndex(item, index)">替换素材</a>
           </a-upload>
           </a-upload>
-          <!-- <input type="file" @change="customRequest"> -->
-        </a-form-item>
-      </a-form>
+
+          <a-list-item-meta v-if="item.fileSuffix == 'png' || item.fileSuffix == 'jpg' || item.fileSuffix == 'gif'">
+            <a slot="title"
+              >{{ item.fileName }} (请上传大小为{{ item.width + '*' + item.height }}的图片,格式为{{
+                item.fileSuffix
+              }})</a
+            >
+            <div
+              slot="description"
+              style="width: 300px; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center"
+            >
+              <img :src="item.fileUrl" alt="" style="width: 50%; heihgt: auto; margin: 0 auto" />
+              <img
+                :src="item.imgPviewsUrl"
+                v-if="item.imgPviewsUrl"
+                alt=""
+                style="width: 50%; heihgt: auto; margin: 0 auto"
+              />
+            </div>
+          </a-list-item-meta>
+          <!-- <a-list-item-meta v-else-if="item.fileSuffix == 'mp3'">
+            <a slot="title">{{ item.fileName }}</a>
+            <div
+              slot="description"
+              style="width: 200px; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center"
+            >
+              <audio
+                loop
+                muted
+                :src="item.fileUrl"
+                controls=""
+                style="width: 100%; height: 20px; margin: 5px auto"
+              ></audio>
+            </div>
+          </a-list-item-meta>
+          <a-list-item-meta v-else-if="item.fileSuffix == 'mp4'">
+            <a slot="title">{{ item.fileName }}</a>
+            <div
+              slot="description"
+              style="width: 200px; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center"
+            >
+              <video :src="item.fileUrl" controls="controls" style="width: 50%; heihgt: auto; margin: 0 auto">
+                您的浏览器不支持 video 标签。
+              </video>
+            </div>
+          </a-list-item-meta> -->
+          <!-- <div>content</div> -->
+        </a-list-item>
+      </a-list>
     </a-modal>
     </a-modal>
   </div>
   </div>
 </template>
 </template>
@@ -163,17 +224,24 @@ export default {
       headers: {
       headers: {
         'Content-Type': 'multipart/form-data',
         'Content-Type': 'multipart/form-data',
       },
       },
+      thisItem: null,
+      thisIndex: null,
       defaultFileList: [],
       defaultFileList: [],
       fileAll: null,
       fileAll: null,
       playerList,
       playerList,
       previewBody: false,
       previewBody: false,
       playerSrc: '',
       playerSrc: '',
       previewVisible: false,
       previewVisible: false,
-      changeVisible:false,
+      changeVisible: false,
+      changeLoading: false,
       loading: false,
       loading: false,
       dataSource: [],
       dataSource: [],
+      dataList: [],
       form: this.$form.createForm(this),
       form: this.$form.createForm(this),
       appId: '',
       appId: '',
+      fileName: '',
+      create: '1',
+      zipName: null,
       columns: [
       columns: [
         {
         {
           title: '试玩名称',
           title: '试玩名称',
@@ -202,6 +270,46 @@ export default {
     }
     }
   },
   },
   methods: {
   methods: {
+    downloadZip(item) {
+      let eleLink = document.createElement('a')
+      eleLink.download = item.fileName
+      eleLink.href = item.fileUrl
+      eleLink.click()
+      eleLink.remove()
+    },
+    beforeUpload(file, fileList) {
+      let that = this
+      return new Promise(function (resolve, reject) {
+        var imgInfo = {}
+
+        let fileReader = new FileReader()
+        fileReader.readAsDataURL(file) //根据图片路径读取图片
+        fileReader.onload = function (e) {
+          let base64 = this.result
+          let img = new Image()
+          img.src = base64
+          img.onload = function () {
+            imgInfo = {
+              width: img.naturalWidth,
+              height: img.naturalHeight,
+            }
+            console.log(imgInfo)
+            if (imgInfo.width != that.thisItem.width || imgInfo.height != that.thisItem.height) {
+              alert(`请选择${that.thisItem.width}*${that.thisItem.height}大小的文件!`)
+              reject()
+            } else {
+              resolve()
+            }
+          }
+        }
+      })
+      //  const fileOvesize = (file.size > this.size * oneKB)
+    },
+    getIndex(item, index) {
+      console.log(item, index)
+      this.thisItem = item
+      this.thisIndex = index
+    },
     customRequest(data) {
     customRequest(data) {
       var dataAll = {
       var dataAll = {
         uid: '1',
         uid: '1',
@@ -213,6 +321,62 @@ export default {
       this.fileAll = data.file
       this.fileAll = data.file
       // this.saveFile(data.file)
       // this.saveFile(data.file)
     },
     },
+    customRequestChange(data) {
+      console.log(data)
+      var dataAll = {
+        uid: '1',
+        name: data.file.name,
+        status: 'done',
+      }
+
+      // this.defaultFileList = []
+      if (data.file) {
+        var that = this
+        that.thisItem.newFile = data.file
+
+        var fr = new FileReader()
+        fr.onload = function () {
+          that.thisItem.imgPviewsUrl = this.result
+        }
+        fr.readAsDataURL(data.file)
+      }
+
+      // this.saveFile(data.file)
+    },
+    changeFile(e) {
+      this.changeLoading = true
+      var dataArr = this.dataList.filter((i) => {
+        return i.newFile != null
+      })
+      console.log(this.dataList, dataArr)
+      let formData = new FormData()
+      formData.append('file', dataArr[0].newFile)
+      formData.append('userId', this.userInfo().id)
+      formData.append('updateName', dataArr[0].fileName)
+      formData.append('id', dataArr[0].parentId)
+      formData.append('fileType', dataArr[0].fileType)
+      if (dataArr[0].accountId) {
+        formData.append('accountId', dataArr[0].accountId)
+      }
+
+      formData.append('isCreate', this.create == '1' ? 1 : null)
+      formData.append('newFileName', this.fileName == '' ? this.zipName : this.fileName+'.zip')
+
+      postAction('/shiwan/shiwanFileUpload/createNewZipFile', formData).then((res) => {
+        if (res.success) {
+          this.changeLoading = false
+          this.changeVisible = false
+          this.getPlayableList()
+          this.fileName = ''
+        }
+      })
+
+      // for (let i = 0; i < dataArr.length; i++) {
+      //   if (i == 0) {
+
+      //   }
+      // }
+    },
     saveFile(e) {
     saveFile(e) {
       this.confirmLoading = true
       this.confirmLoading = true
       this.form.validateFields((err, values) => {
       this.form.validateFields((err, values) => {
@@ -241,14 +405,31 @@ export default {
         }
         }
       })
       })
     },
     },
+
     ...mapGetters(['nickname', 'avatar', 'userInfo']),
     ...mapGetters(['nickname', 'avatar', 'userInfo']),
     changeView(item) {
     changeView(item) {
       getAction('/shiwan/shiwanFileUpload/selectListByParentId', { id: item.id }).then((res) => {
       getAction('/shiwan/shiwanFileUpload/selectListByParentId', { id: item.id }).then((res) => {
         if (res.success) {
         if (res.success) {
-          this.previewBody = true
-          this.playerSrc = res.result.filter((i) => {
-            return i.fileSuffix == 'html'
-          })[0].fileUrl
+          var data = []
+          data = res.result.filter((i) => {
+            if (i.fileSuffix == 'png' || i.fileSuffix == 'jpg' || i.fileSuffix == 'gif') {
+              return i
+            }
+          })
+          this.dataList = data.map((i) => {
+            return {
+              ...i,
+              width: null,
+              height: null,
+              imgPviewsUrl: '',
+              newFile: null,
+            }
+          })
+          for (let i = 0; i < this.dataList.length; i++) {
+            this.getImgWidth(this.dataList[i])
+          }
+          this.changeVisible = true
+          this.zipName = item.fileName
         }
         }
       })
       })
     },
     },
@@ -290,6 +471,43 @@ export default {
         }
         }
       })
       })
     },
     },
+    getImgWidth(item) {
+      // this.$nextTick(() => {
+      // 记录当前时间戳
+      var start_time = new Date().getTime()
+      // 图片地址
+      var img_url = item.fileUrl
+      // 创建对象
+      var img = new Image()
+      // 改变图片的src
+      img.src = img_url
+      // 定时执行获取宽高
+      var checkAll = ''
+      var that = this
+      var check = function () {
+        // 只要任何一方大于0
+        // 表示已经服务器已经返回宽高
+        if (img.width > 0 || img.height > 0) {
+          var diff = new Date().getTime() - start_time
+          item.width = img.width
+          item.height = img.height
+          that.$set(item, 'width', img.width)
+          that.$set(item, 'height', img.height)
+          clearInterval(set)
+        }
+      }
+      var set = setInterval(check, 40)
+      // 加载完成获取宽高
+      img.onload = function () {
+        var diff = new Date().getTime() - start_time
+        item.width = img.width
+        item.height = img.height
+        that.$set(item, 'width', img.width)
+        that.$set(item, 'height', img.height)
+        // console.log(item.width, item.height)
+      }
+      // })
+    },
   },
   },
   mounted() {
   mounted() {
     this.getPlayableList()
     this.getPlayableList()

+ 2 - 2
vue.config.js

@@ -70,7 +70,7 @@ module.exports = {
       '/jeecg-boot': {
       '/jeecg-boot': {
         //  target: 'http://192.168.1.8:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
         //  target: 'http://192.168.1.8:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
         // target: 'http://192.168.0.59:8088', //请求本地 需要jeecg-boot后台项目  英豪
         // target: 'http://192.168.0.59:8088', //请求本地 需要jeecg-boot后台项目  英豪
-        // target: 'http://192.168.1.188:8088', //请求本地 需要jeecg-boot后台项目  英豪
+        target: 'http://192.168.1.188:8088', //请求本地 需要jeecg-boot后台项目  英豪
         // target: 'http://192.168.2.115:8080', //请求本地 需要jeecg-boot后台项目  祚云
         // target: 'http://192.168.2.115:8080', //请求本地 需要jeecg-boot后台项目  祚云
 
 
         // target: 'http://192.168.1.74:8098', //请求本地 需要jeecg-boot后台项目  毕洁泉
         // target: 'http://192.168.1.74:8098', //请求本地 需要jeecg-boot后台项目  毕洁泉
@@ -86,7 +86,7 @@ module.exports = {
         // target: 'https://trac.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
         // target: 'https://trac.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
         // target: 'http://39.106.184.70:8088/', //请求本地 需要jeecg-boot后台项目
         // target: 'http://39.106.184.70:8088/', //请求本地 需要jeecg-boot后台项目
         //  target: 'http://adsp.tjyourong.com.cn/', //请求本地 需要jeecg-boot后台项目
         //  target: 'http://adsp.tjyourong.com.cn/', //请求本地 需要jeecg-boot后台项目
-        target: 'http://192.168.1.251/', //请求本地 需要jeecg-boot后台项目
+        // target: 'http://192.168.1.251/', //请求本地 需要jeecg-boot后台项目
         // target:'http://118.24.244.213:8804',
         // target:'http://118.24.244.213:8804',