Browse Source

feat: 优化需求12\14\15

zhengxy 11 months ago
parent
commit
906b6a0208

+ 3 - 1
src/components/businessMoudle/batchGdt/configArea/creativeMaterial/libraryDialog.vue

164
               layout="total, sizes, prev, pager, next, jumper"
164
               layout="total, sizes, prev, pager, next, jumper"
165
               :total="total"
165
               :total="total"
166
               @current-change="(val)=>handleCurrentChange(val,typeAc)"
166
               @current-change="(val)=>handleCurrentChange(val,typeAc)"
167
+              @size-change="(val) => handleSizeChange(val,typeAc)"
167
           />
168
           />
168
         </div>
169
         </div>
169
       </div>
170
       </div>
356
   if(LoadingMaskRef.value){
357
   if(LoadingMaskRef.value){
357
     let inject_arr: any = _.cloneDeep(inject_accountIds)
358
     let inject_arr: any = _.cloneDeep(inject_accountIds)
358
     //假设15s一个视频 totalTime为总时长 3s一轮巡
359
     //假设15s一个视频 totalTime为总时长 3s一轮巡
359
-    let totalTime = 15 * Number(arr.length) * Number(inject_arr._object[inject_arr._key].length) 
360
+    let totalTime = 15 * Number(arr.length) * Number(inject_arr._object[inject_arr._key].length)
360
     LoadingMaskRef.value.time = formatSeconds(totalTime, false)
361
     LoadingMaskRef.value.time = formatSeconds(totalTime, false)
361
   }
362
   }
362
   await get_upload_res()
363
   await get_upload_res()
445
   init_createrList,
446
   init_createrList,
446
   getSizeList,
447
   getSizeList,
447
   handleCurrentChange,
448
   handleCurrentChange,
449
+  handleSizeChange,
448
   init_collect_all,
450
   init_collect_all,
449
   initAll,
451
   initAll,
450
   sizeVisibleEvent,
452
   sizeVisibleEvent,

+ 9 - 1
src/components/businessMoudle/batchGdt/configArea/creativeMaterial/ts/materialTs.ts

150
     const pageSize = ref<number>(20)
150
     const pageSize = ref<number>(20)
151
     const loading = ref<boolean>(false)
151
     const loading = ref<boolean>(false)
152
     const handleCurrentChange = (val:number,type:string) => {
152
     const handleCurrentChange = (val:number,type:string) => {
153
-        if(type=='cover'){
153
+        if(type=='collect'){
154
             init_collect_list(val)
154
             init_collect_list(val)
155
         }else{
155
         }else{
156
             init(val)
156
             init(val)
157
         }
157
         }
158
     }
158
     }
159
+    const handleSizeChange = (val:number,type:string) => {
160
+        if(type=='collect'){
161
+            init_collect_list(1)
162
+        }else{
163
+            init(1)
164
+        }
165
+    }
159
     const init = async (page?:any) => {
166
     const init = async (page?:any) => {
160
         loading.value = true
167
         loading.value = true
161
         currentPage.value = page ? page : 1
168
         currentPage.value = page ? page : 1
329
         init_createrList,
336
         init_createrList,
330
         getSizeList,
337
         getSizeList,
331
         handleCurrentChange,
338
         handleCurrentChange,
339
+        handleSizeChange,
332
         initAll,
340
         initAll,
333
         init_collect_all,
341
         init_collect_all,
334
         checkChangeItem,
342
         checkChangeItem,

+ 4 - 0
src/components/businessMoudle/materialLibrary/album.vue

97
               layout="total, sizes, prev, pager, next, jumper"
97
               layout="total, sizes, prev, pager, next, jumper"
98
               :total="total"
98
               :total="total"
99
               @current-change="handleCurrentChange"
99
               @current-change="handleCurrentChange"
100
+              @size-change="handleSizeChange"
100
           />
101
           />
101
         </div>
102
         </div>
102
       </div>
103
       </div>
252
 const handleCurrentChange = (val:number) => {
253
 const handleCurrentChange = (val:number) => {
253
   initFile_Album(val)
254
   initFile_Album(val)
254
 }
255
 }
256
+const handleSizeChange = (val: number) => {
257
+  initFile_Album(1)
258
+}
255
 //文件夹列表
259
 //文件夹列表
256
 const initFile_Album = async (page?:number) => {
260
 const initFile_Album = async (page?:number) => {
257
   fileLoading.value = true
261
   fileLoading.value = true

+ 35 - 5
src/components/businessMoudle/materialLibrary/block/materialBlock.vue

6
           <img :src="paramsObj.oss_url" alt=""  v-if="paramsObj.mtype==2"  height="120">
6
           <img :src="paramsObj.oss_url" alt=""  v-if="paramsObj.mtype==2"  height="120">
7
           <img :src="paramsObj.pre_oss_url" alt=""  v-if="paramsObj.mtype==1"  height="120">
7
           <img :src="paramsObj.pre_oss_url" alt=""  v-if="paramsObj.mtype==1"  height="120">
8
         </div>
8
         </div>
9
-        <div class="videoPlayBox" v-if="paramsObj.mtype==1"><el-icon :size="22"><i-ep-VideoPlay /></el-icon></div>
9
+        <div class="videoPlayBox" v-if="paramsObj.mtype==1" @click.stop="onClickVideoPlay(paramsObj)"><el-icon :size="28"><i-ep-VideoPlay /></el-icon></div>
10
         <div class="size shadowBox">{{paramsObj.width || '-'}} * {{paramsObj.height || '-'}}</div>
10
         <div class="size shadowBox">{{paramsObj.width || '-'}} * {{paramsObj.height || '-'}}</div>
11
         <div class="time shadowBox" v-if="paramsObj.mtype==1">{{paramsObj.duration || '-'}}</div>
11
         <div class="time shadowBox" v-if="paramsObj.mtype==1">{{paramsObj.duration || '-'}}</div>
12
         <div class="collectBox" v-if="!checkShow || source=='librayDialog'" @click.stop="collectEvent(paramsObj)">
12
         <div class="collectBox" v-if="!checkShow || source=='librayDialog'" @click.stop="collectEvent(paramsObj)">
51
             <span>广点通拒审{{ paramsObj.refuse_cnt }}次</span>
51
             <span>广点通拒审{{ paramsObj.refuse_cnt }}次</span>
52
             <el-icon class="lMar3"><WarningFilled /></el-icon>
52
             <el-icon class="lMar3"><WarningFilled /></el-icon>
53
           </div>
53
           </div>
54
-          
54
+
55
         </div>
55
         </div>
56
         <div class="f12 flex tMar8 c-999" v-if="paramsObj.is_placed == 0 && source=='librayDialog'"><el-icon :size="12" color="#3173FF" class="rMar5"><i-ep-Warning /></el-icon> 不符合媒体可投放要求</div>
56
         <div class="f12 flex tMar8 c-999" v-if="paramsObj.is_placed == 0 && source=='librayDialog'"><el-icon :size="12" color="#3173FF" class="rMar5"><i-ep-Warning /></el-icon> 不符合媒体可投放要求</div>
57
       </div>
57
       </div>
64
 
64
 
65
     <!-- 拒审理由 -->
65
     <!-- 拒审理由 -->
66
     <RefuseDetails ref="RefuseDetailsRef"></RefuseDetails>
66
     <RefuseDetails ref="RefuseDetailsRef"></RefuseDetails>
67
+
68
+    <!-- S 视频播放 弹框 -->
69
+    <videoPlayDialog
70
+      :dialogVisible="videoPlayVisible"
71
+      :videoInfo="currentVideoInfo"
72
+      @confirm="onConfirmVideoPlay"
73
+      @cancel="onCancelVideoPlay"
74
+    />
75
+    <!-- E 视频播放 弹框 -->
67
   </div>
76
   </div>
68
 </template>
77
 </template>
69
 <script setup lang="ts">
78
 <script setup lang="ts">
74
 import {Api} from "@/api/api";
83
 import {Api} from "@/api/api";
75
 import {ElMessage} from "element-plus";
84
 import {ElMessage} from "element-plus";
76
 import RefuseDetails from '../dialog/refuseDetails.vue'
85
 import RefuseDetails from '../dialog/refuseDetails.vue'
86
+import videoPlayDialog from './videoPlayDialog.vue'
77
 
87
 
78
 const { proxy } = getCurrentInstance() as any;
88
 const { proxy } = getCurrentInstance() as any;
79
 // 全局方法定义
89
 // 全局方法定义
162
   }
172
   }
163
 }
173
 }
164
 
174
 
175
+// S 视频播放
176
+const videoPlayVisible = ref<boolean>(false)
177
+const currentVideoInfo = ref<any>({})
178
+const onClickVideoPlay = (paramsObj) => {
179
+  console.log('onClickVideoPlay paramsObj => ', paramsObj)
180
+  currentVideoInfo.value = {...paramsObj}
181
+  console.log('currentVideoInfo => ', currentVideoInfo.value)
182
+  videoPlayVisible.value = true
183
+}
184
+const onConfirmVideoPlay = () => {
185
+  currentVideoInfo.value = {}
186
+  videoPlayVisible.value = false
187
+}
188
+const onCancelVideoPlay = () => {
189
+  currentVideoInfo.value = {}
190
+  videoPlayVisible.value = false
191
+}
192
+// E 视频播放
193
+
194
+
165
 onMounted(()=>{
195
 onMounted(()=>{
166
   nextTick(()=>{
196
   nextTick(()=>{
167
 
197
 
268
       top: 50%;
298
       top: 50%;
269
       left: 50%;
299
       left: 50%;
270
       color: #fff;
300
       color: #fff;
271
-      margin-top: -11px;
272
-      margin-left: -11px;
301
+      margin-top: -15px;
302
+      margin-left: -15px;
273
     }
303
     }
274
     .collectBox{
304
     .collectBox{
275
       position: absolute;
305
       position: absolute;
311
     color: #fb1919;
341
     color: #fb1919;
312
     border: 1px solid #fb1919;
342
     border: 1px solid #fb1919;
313
   }
343
   }
314
-  
344
+
315
   &:hover{
345
   &:hover{
316
     box-shadow: 0px 2px 8px 1px rgba(0,0,0,.1);
346
     box-shadow: 0px 2px 8px 1px rgba(0,0,0,.1);
317
     .collectBox{
347
     .collectBox{

+ 193 - 0
src/components/businessMoudle/materialLibrary/block/videoPlayDialog.vue

1
+<template>
2
+  <div>
3
+    <el-dialog :model-value="props.dialogVisible" :before-close="handleClose" :show-close="true" :title="dialogTitle" width="600px"
4
+    class="video-dialog">
5
+      <div class="content-wrap">
6
+        <video v-if="props.dialogVisible" class="video-wrap" :src="form.oss_url" :poster="form.pre_oss_url" controls autoplay muted preload="none" controlslist="nodownload noremoteplayback disablePictureInPicture noplaybackrate" />
7
+      </div>
8
+      <div class="footer">
9
+        <!-- <el-button @click="handleClose">取消</el-button>
10
+        <el-button type="primary" @click="handleSave">确定</el-button> -->
11
+        <el-button type="primary" @click="handleClose">关 闭</el-button>
12
+      </div>
13
+    </el-dialog>
14
+  </div>
15
+</template>
16
+
17
+<script setup lang="ts">
18
+import { reactive, watch, computed } from 'vue'
19
+import type { PropType } from 'vue';
20
+import { ElMessage } from 'element-plus'
21
+import { Api as $api } from '@/api/api'
22
+import $http from '@/http/http'
23
+import to from 'await-to-js'
24
+
25
+const emits = defineEmits([
26
+  'confirm',
27
+  'cancel'
28
+])
29
+
30
+const props = defineProps({
31
+  dialogVisible: {
32
+    type: Boolean as PropType<boolean>,
33
+    default: () => false,
34
+  },
35
+  videoInfo: {
36
+    type: Object as PropType<object>,
37
+    default: () => ({})
38
+  },
39
+})
40
+
41
+// 弹框标题
42
+const dialogTitle = computed(() => {
43
+  return `视频素材:${form.name}`
44
+})
45
+
46
+// 表单数据
47
+const form = reactive({
48
+  name: '' as any,
49
+  oss_url: '' as any,
50
+  pre_oss_url: '' as any,
51
+})
52
+
53
+// 监听弹框显示
54
+watch(() => props.dialogVisible, isShow => {
55
+  isShow && handleInitForm()
56
+})
57
+
58
+// 表单数据初始化
59
+const handleInitForm = async () => {
60
+  console.log('handleInitForm => ')
61
+  console.log('props.videoInfo => ', props.videoInfo)
62
+  const { name, oss_url, pre_oss_url } = props.videoInfo as any
63
+  form.name = name
64
+  form.oss_url = oss_url
65
+  form.pre_oss_url = pre_oss_url
66
+}
67
+
68
+// 取消
69
+const handleClose = () => {
70
+  emits('cancel')
71
+}
72
+
73
+// 确定
74
+const handleSave = async () => {
75
+  try {
76
+    await handleValidate() // 表单判空校验
77
+    await handleSubmit() // 提交表单
78
+    emits('confirm')
79
+  } catch (error) {
80
+    console.log(error)
81
+  }
82
+}
83
+
84
+// 表单判空校验
85
+const handleValidate = () => {
86
+  return new Promise((resolve, reject) => {
87
+    // const { strategy_name } = form
88
+    // if (strategy_name === '') {
89
+    //   ElMessage.warning('请输入策略名称')
90
+    //   reject('校验未通过')
91
+    // } else {
92
+    //   resolve('校验通过')
93
+    // }
94
+    resolve('校验通过')
95
+  })
96
+}
97
+
98
+// 提交表单
99
+const handleSubmit = async () => {
100
+  // const url = $api.sellStrategy_sellStrategyAdd
101
+  // const params = {
102
+  //   strategy_name: form.strategy_name,
103
+  // }
104
+  // const [err, res]: any = await to($http.post(url, params))
105
+  // if (err || res?.errNo !== '0' || res?.rst === false) {
106
+  //   ElMessage.error(err?.message || res?.errMsg || "操作失败")
107
+  //   return Promise.reject()
108
+  // } else if (res?.rst?.strategy_id) {
109
+  //   ElMessage.success('操作成功')
110
+  //   return Promise.resolve()
111
+  // }
112
+  return Promise.resolve()
113
+}
114
+
115
+</script>
116
+
117
+<style lang="scss" scoped>
118
+:deep(.el-dialog) {
119
+  margin: 0;
120
+  position: absolute;
121
+  top: 50%;
122
+  left: 50%;
123
+  transform: translate(-50%, -50%);
124
+  .el-dialog__body {
125
+    padding: 0;
126
+  }
127
+  .el-dialog__header{
128
+    border-bottom: 1px solid #e8eaec;
129
+    padding: 20px;
130
+    margin-right: 0;
131
+    margin-left: 0;
132
+    .el-dialog__title{
133
+      font-size: 16px;
134
+      font-weight: bold;
135
+      padding-left: 20px;
136
+    }
137
+  }
138
+  .content-wrap {
139
+    padding: 20px;
140
+    display: flex;
141
+    align-items: center;
142
+    justify-content: center;
143
+    .video-wrap {
144
+      width: 90%;
145
+      max-height: 400px;
146
+    }
147
+  }
148
+  .content {
149
+    padding: 24px 50px 0 40px;
150
+    .form-item {
151
+      display: flex;
152
+      align-items: center;
153
+      margin-top: 30px;
154
+      &:first-child {
155
+        margin-top: 0;
156
+      }
157
+      .item-label {
158
+        flex-shrink: 0;
159
+        width: 80px;
160
+        font-size: 14px;
161
+        color: #333;
162
+        font-weight: 400;
163
+        &.required {
164
+          position: relative;
165
+        }
166
+        &.required::before {
167
+          position: absolute;
168
+          left: -8px;
169
+          top: 0;
170
+          content: '*';
171
+          font-size: 12px;
172
+          color: rgb(245, 108, 108);
173
+        }
174
+      }
175
+      .el-input__inner {
176
+        height: 28px;
177
+      }
178
+      .el-cascader {
179
+        flex: 1;
180
+      }
181
+      .el-select {
182
+        flex: 1;
183
+      }
184
+    }
185
+  }
186
+  .footer {
187
+    padding: 0 0 20px;
188
+    display: flex;
189
+    align-items: center;
190
+    justify-content: center;
191
+  }
192
+}
193
+</style>

+ 2 - 0
src/components/businessMoudle/materialLibrary/material.vue

100
               layout="total, sizes, prev, pager, next, jumper"
100
               layout="total, sizes, prev, pager, next, jumper"
101
               :total="total"
101
               :total="total"
102
               @current-change="handleCurrentChange"
102
               @current-change="handleCurrentChange"
103
+              @size-change="handleSizeChange"
103
       />
104
       />
104
     </div>
105
     </div>
105
   </div>
106
   </div>
280
   getSizeList,
281
   getSizeList,
281
   usageList,
282
   usageList,
282
   handleCurrentChange,
283
   handleCurrentChange,
284
+  handleSizeChange,
283
   initAll,
285
   initAll,
284
   checkChangeItem,
286
   checkChangeItem,
285
   sizeVisibleEvent
287
   sizeVisibleEvent

+ 2 - 1
src/components/businessMoudle/textLibrary/index.vue

31
           :descol="tableInfo.descolList"
31
           :descol="tableInfo.descolList"
32
           :selectableEvent="selectableEvent"
32
           :selectableEvent="selectableEvent"
33
           :handleSelectionAllChange="handleSelectionAllChange"
33
           :handleSelectionAllChange="handleSelectionAllChange"
34
+          pageLayout="total, sizes, prev, pager, next"
34
           @init="init"
35
           @init="init"
35
           @selectChange="selectEvent"
36
           @selectChange="selectEvent"
36
           @sort="sortEvent"
37
           @sort="sortEvent"
96
     type: String,
97
     type: String,
97
     default: 'default'
98
     default: 'default'
98
   }
99
   }
99
-  
100
+
100
 })
101
 })
101
 
102
 
102
 interface Emits {
103
 interface Emits {

+ 6 - 0
src/components/capsulationMoudle/tableList.vue

51
                    :layout="pageLayout"
51
                    :layout="pageLayout"
52
                    :small="pageSmall"
52
                    :small="pageSmall"
53
                    :total="total"
53
                    :total="total"
54
+                   @size-change="handleSizeChange"
54
                    @current-change="handleCurrentChange" />
55
                    @current-change="handleCurrentChange" />
55
   </div>
56
   </div>
56
 </template>
57
 </template>
213
   emit('init', currentPage.value, pageSize.value)
214
   emit('init', currentPage.value, pageSize.value)
214
 }
215
 }
215
 
216
 
217
+const handleSizeChange = (val: number) => {
218
+  currentPage.value = 1
219
+  emit('init', currentPage.value, pageSize.value)
220
+}
221
+
216
 
222
 
217
 // 父组件共享值
223
 // 父组件共享值
218
 defineExpose({
224
 defineExpose({