123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861 |
- <style lang="scss" scoped>
- .previewStrategy{
- .moduler {
- .opt {
- text-align: right;
- }
- width: 100%;
- 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;
- }
- .extraClass{
- .row-item {
- margin-bottom: 20px;
- }
-
- }
- .row-item {
- display: flex;
- justify-content: flex-start;
- align-items: center;
- margin-bottom: 25px;
- }
- .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: 9px;
- }
- .row-item .label-item {
- position: relative;
- align-items: flex-start;
- align-self: flex-start;
- line-height: 20px;
- height: 20px;
- margin-top: 10px;
- 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;
- }
- }
- .adName{
- display: flex;
- .nameList{
- width: 90%;
- }
- .item{
- display: inline-block;
- width: 30%;
- margin-left: 15px;
- margin-bottom: 10px;
- }
- }
- }
- .toolbox-automate-rules-create-body {
- margin: 16px 0 16px ;
- padding: 32px 32px 16px;
- background-color: #fff;
- border-radius: 4px;
- }
- .toolbox-automate-rules-create-content_title {
- background-color: #fff;
- display: flex;
- flex-flow: row nowrap;
- justify-content: flex-start;
- align-items: center;
- margin-bottom: 28px;
- h3 {
- font-size: 22px;
- margin: 0;
- font-weight: 400;
- height: 30px;
- line-height: 30px;
- }
- }
- .toolbox-automate-rules-create-content {
- padding-left: 28px;
- }
- ul,li{
- margin: 0;
- padding: 0;
- }
-
- width: 100%;
- .topBody{
- width: 100%;
- background: #FFFFFF;
- margin-bottom: 12px;
- padding: 20px;
- box-sizing: border-box;
- .breadcrumb{
- height: 22px;
- font-size: 12px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: #000000;
- line-height: 22px;
- }
- .bottom{
- display: flex;
- position: relative;
- justify-content: space-between;
- // padding: 20px;
- .orderIcon{
- width: 28px;
- height: 28px;
- margin-right: 15px;
- img{
- width: 100%;
- }
- }
- .tip{
- .greet{
- width: 300px;
- height: 28px;
- font-size: 20px;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: 500;
- color: rgba(0, 0, 0, 0.85);
- line-height: 28px;
- margin-bottom: 5px;
- }
- .descPosition{
-
- font-size: 14px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: rgba(0, 0, 0, 0.45);
- overflow: hidden;
- margin-bottom: 0;
- li{
- height: 22px;
- line-height: 22px;
- margin-top:3px ;
- }
- span{
- width: 250px;
- display: inline-block;
- }
- }
- }
- .optBody{
- width: 200px;
- flex-shrink:0;
- // justify-content: flex-end;
- text-align: right;
- .btnBody{
- margin-bottom: 10px;
- }
- .orderInfo{
- display: flex;
- justify-content: space-between;
- text-align: right;
- p{
- margin-bottom: 0;
- }
-
- .markName{
- height: 22px;
- font-size: 14px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: rgba(0, 0, 0, 0.45);
- line-height: 22px;
- }
- .big{
- height: 28px;
- font-size: 20px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: rgba(0, 0, 0, 0.85);
- line-height: 28px;
- }
- }
- }
- }
- }
- .section{
- background: white;
- padding:20px ;
- .breadcrumb{
- height: 22px;
- font-size: 12px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: #000000;
- line-height: 22px;
- }
- .sectionBody{
-
- p{
- margin-bottom: 0;
- }
- .section-item{
- background: white;
- margin-bottom: 20px;
- }
- .tabBox{
- padding: 15px 20px 0;
- display: flex;
- flex-wrap: wrap;
- position: relative;
- .search-item{
- margin-bottom: 12px;
- width: 30%;
- }
- .opt-item{
- position: absolute;
- right: 20px;
- top: 16px;
- }
- }
- .sectionHead{
- padding: 15px 20px;
- // height: 24px;
- font-size: 16px;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: 500;
- color: rgba(0, 0, 0, 0.85);
- line-height: 24px;
- border-bottom: 1px solid #E9E9E9;;
- .allOrder{
- float: right;
- }
- }
- .section-box{
- margin-top: 30px;
- padding: 20px 20px;
- border: 1px solid #E9E9E9;
- .description{
- margin-top: 10px;
- .time{
- height: 32px;
- line-height: 32px;
- }
- }
- ul{
- display: flex;
- flex-wrap: wrap;
- // justify-content: space-around;
- }
- li{
-
- width: 30%;
- height: 22px;
- font-size: 14px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: rgba(0, 0, 0, 0.85);
- line-height: 22px;
- text-align: left;
- margin-bottom: 15px;
- }
- .top{
- margin-bottom: 25px;
- }
- .bottom{
- h4{
-
- font-size: 15px;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: 600;
- color: rgba(0, 0, 0, 0.85);
- margin-bottom: 25px;
- }
- }
- .shenhe{
- width: 6px;
- height: 6px;
- display: inline-block;
- background: #52C41A;
- border-radius: 50%;
- position: relative;
- top: -2px;
- }
- .wancheng{
- width: 6px;
- height: 6px;
- display: inline-block;
- background: #1890FF;
- border-radius: 50%;
- // margin-right: 3px;
- position: relative;
- top: -2px;
- }
- .bohui{
- width: 6px;
- height: 6px;
- display: inline-block;
- background: #F5222D;
- border-radius: 50%;
- position: relative;
- top: -2px;
- }
- }
-
- }
- }
- }
- .videoBox{
-
- height: 240px;
- }
- .imgBox{
- width: 90%;
- }
- .videomarterialInfo{
- position: relative;
- height: 800px;
- }
- .marterialInfo{
- overflow: auto;
- height: 800px;
- position: relative;
- p{margin-bottom: 0;}
- ul,li{
- margin: 0;
- padding: 0;
- }
- .info-item{
- margin-bottom: 20px;
- display: flex;
- // justify-content: center;
- align-items: flex-start;
- span{
- display: inline-block;
- width: 70px;
- text-align: left;
- flex-shrink: 0;
- }
- .ant-tag{
- width: auto;
- min-width: 50px;
- text-align: center;
- }
- }
- .info{
- ul{
- width: 100%;
- display: flex;
- justify-content: space-between;
- flex-wrap: wrap;
- }
- li{
- width: 33.3%;
- margin-bottom: 20px;
- }
- margin-bottom: 0;
- }
- // .btnBody{
- // width: 100%;
- // height: 80px;
- // position: relative;
- // }
- .bottom-btn{
- width: 100%;
- text-align: center;
- position: absolute;
- bottom: 0px;
- left: 0;
- // margin-top: 20px;
- }
- .scriptbottom-btn{
- width: 100%;
- // height: 60px;
- line-height: 60px;
- text-align: center;
- position: absolute;
- bottom: 0px;
- left: 0;
-
- }
- }
- </style>
- <style lang="less">
- .previewStrategy{
- .ant-timeline-item-head{
- background: rgb(240,242,245);
- }
- .muen{
- cursor: pointer;
- }
- .muen:hover{
- color: #1890ff;
- }
- }
-
-
- </style>
- <template>
- <div class="previewStrategy ">
- <a-spin :spinning="spinning">
- <div class="toolbox-automate-rules-create-body">
- <div class="toolbox-automate-rules-create-content_title"><h3>策略预览</h3></div>
- <div class="toolbox-automate-rules-create-content">
-
- <a-table
- size="middle"
- :columns="columns"
- :dataSource="data"
- id="outTable"
- :pagination="ipagination"
- :loading="loading"
- @change="sort"
- style="word-break: break-all;"
- :bordered='true'
- >
- <div slot="materialStatus" slot-scope="text" >
- <span class="wancheng" v-if="text==7"> </span>
- <span class="bohui" v-else-if="text==6||text==3"> </span>
- <span class="shenhe" v-else> </span>
- {{text | handlerMaterialStatus}}
- </div>
- <div slot="scriptStatus" slot-scope="text,record">
- <span v-if="record.materialStatus==0&&role=='design'">-</span>
- <a href="javascript:;" v-if="record.materialStatus==0&&role=='designLeader'" @click="scriptAssign(record)">指派</a>
- <span v-else>
- <a href="javascript:;" @click="scriptViewDetails(record)">{{record.planName}}</a>
- </span>
- </div>
- <div slot="videoStatus" slot-scope="text,record">
- <span v-if="record.materialStatus==0&&role=='design'">-</span>
- <a href="javascript:;" v-if="record.materialStatus==0&&role=='designLeader'" @click="videoAssign(record)">指派</a>
- <span v-else>
- <a href="javascript:;" @click="viewDetails(record)">{{record.clipName}}</a>
- </span>
- </div>
- <div slot="operator" slot-scope="text,record">
- <a href="javascript:;" @click="goDetail(record)">查看详情</a>
- </div>
- </a-table>
- <a-drawer
- title="视频详情"
- width="800"
- :placement="placement"
- :closable="false"
- :visible="visible"
- @close="onClose"
- >
- <a-tabs
- default-active-key="1"
- tab-position="top"
- :style="{ height: '200px' }"
- @prevClick="callback"
- @nextClick="callback"
- >
- <a-tab-pane v-for="i in 30" :key="i" :tab="`Tab-${i}`"> </a-tab-pane>
- </a-tabs>
- <a-spin :spinning="visibleLoading">
- <div class="marterialInfo videomarterialInfo">
- <div class="info-item">
- <span>素材类型:</span>
- <p>{{ currentVideo.videoStatus | handlerVideoStatus }}</p>
- </div>
- <div class="info-item">
- <span>视频预览:</span>
- <div class="videoBox">
- <video style="height:100%" :src="currentVideo.url" controls v-if="currentVideo.url"></video>
- <img :src="defaultPic" alt="" style="width:100px;margin:0 10px 8px 0" v-else>
- </div>
- </div>
- <div class="info-item">
- <span>封面预览:</span>
- <div class="imgBox">
- <div >
- <template v-if="currentVideo.imgList&¤tVideo.imgList.length">
- <img alt="" style="width:100px;margin:0 10px 8px 0" v-for="(item,index) in currentVideo.imgList" :key='index' :src="item">
- </template>
- <span v-else>暂无封面</span>
- </div>
- </div>
- </div>
-
- <div class="info-item" >
- <span>创意标题:</span>
- <p>
-
- </p>
- </div>
- <div class="info-item" >
- <span>广告语:</span>
- <p>
-
- </p>
- </div>
- <div class="info-item" >
- <span>行动号召:</span>
- <p>
-
- </p>
- </div>
- <div class="info-item" >
- <span>监测链接</span>
- <p>
-
- </p>
- </div>
-
-
- <div class="bottom-btn">
- <a-button type='default' @click="onClose">关闭</a-button>
- </div>
-
-
- </div>
- </a-spin>
- </a-drawer>
- </div>
- </div>
- <div class="moduler">
- <!-- <div class="moduler-title">计划名称</div> -->
- <div class="opt">
- <a-button type="default" style="margin-right:15px" @click="goBack">取消创建</a-button>
- <a-button type="primary" style="margin-right:15px" @click="saveHandler" :loading="saveLoading">确认创建</a-button>
- </div>
- </div>
- </a-spin>
-
- </div>
- </template>
- <script>
- import moment from 'moment';
- import qs from 'qs'
- import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
- import Vue from 'vue'
- import {ACCESS_TOKEN} from "@/store/mutation-types"
- import BMF from 'browser-md5-file'
- import { fileCheck, fileCheckImage, fileEdit, fileEditAll,orderFileInsert} from '@/api/actor'
- import uploadFile from '@/components/uploadFile.vue'
- import { closeAllVideoFun, stopOtherVideo } from '@/utils/videoControl'
- import UploadToAli from '@femessage/upload-to-ali'
- import { mapGetters } from 'vuex'
- import TrendVue from '../../../components/Trend/Trend.vue';
- let listColumns=[
- {
- title: '广告组',
- dataIndex: 'materialName',
- align: 'center',
- key: 'materialName',
- scopedSlots: { customRender: 'materialName' }
- },
- {
- title: '所属计划',
- dataIndex: 'materialId',
- align: 'center',
- key: 'tag',
- scopedSlots: { customRender: 'materialId' }
- },
- {
- title: '优化目标',
- dataIndex: 'materialStatus',
- align: 'center',
- key: 'materialStatus',
- scopedSlots: { customRender: 'materialStatus' }
- },
- {
- title: '出价',
- dataIndex: 'scriptStatus',
- align: 'center',
- key: 'scriptStatus',
- scopedSlots: { customRender: 'scriptStatus' }
- },
- {
- title: '深度优化目标',
- dataIndex: 'videoStatus',
- align: 'center',
- key: 'videoStatus',
- width:250,
- scopedSlots: { customRender: 'videoStatus' }
- },
- {
- title: '深度优化出价',
- dataIndex: 'orderTitle',
- align: 'center',
- key: 'orderTitle',
- scopedSlots: { customRender: 'orderTitle' }
- },
- {
- title: '广告位置',
- dataIndex: 'position',
- align: 'center',
- key: 'position',
- scopedSlots: { customRender: 'position' }
- },
- {
- title: '创意',
- dataIndex: 'operator',
- align: 'center',
- key: 'operator',
- scopedSlots: { customRender: 'operator' }
- },
-
- ]
- export default {
- name:'preview-strategy',
-
- data() {
-
- return {
- spinning:false,
- currentVideo:{},
- visible: false,
- visibleLoading:false,
- placement: 'right',
- loading:false,
- data:[],
- columns:[...listColumns],
- url:{
- assgin:'/platform/designer/assign',
- scriptDetail:'/platform/material/scriptDetail',
- videoDetail:'/platform/material/videoDetail',
- scriptAccept:'/platform/material/script/accept',
- scriptReject:'/platform/material/script/reject',
- videoAccept:'/platform/material/video/accept',
- videoReject:'/platform/material/video/reject',
- },
- ipagination: {
- current: 1,
- pageSize: 10,
- // pageSizeOptions: ['10', '20', '30'],
- showTotal: (total, range) => {
- return range[0] + "-" + range[1] + " 共" + total + "条"
- },
- showQuickJumper: true,
- showSizeChanger:true,
- pageSizeOptions: ['10', '30', '50'],
- total: 0,
- onChange: (current, pageSize) => {
- // 切换分页时的回调,
- // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
- this.ipagination.current = current;
- this.ipagination.pageSize= pageSize;
- }
- },
- }
- },
- methods: {
- goDetail(record){
- consoel.log(record);
- this.visible=true;
- },
- callback(val) {
- console.log(val);
- },
- onClose() {
- this.visible = false;
- },
- sort(pagination, filters, sorter, { currentDataSource }){
-
- this.ipagination.current=pagination.current;
- this.ipagination.pageSize=pagination.pageSize;
- this.materialHttp(this.activeKey)
- },
- // 请求列表
- getListHttp(type){
- this.loading=true;
- this.data=[];
- let params=this.handlerParams(type)
- params={
- ...params,
- pageNo:this.ipagination.current,
- pageSize:this.ipagination.pageSize
- }
- getAction('/platform/material/listByRole',params).then(res=>{
- console.log(res);
- if(res.success){
- this.loading=false;
- this.data=res.result.list;
- this.ipagination.total=res.result.total;
- }
- })
- },
-
- saveHandler(){
- this.$refs.ruleForm.validate(valid=> {
- if (valid) {
- // this.form.rulesList=this.rulesList;
- console.log(valid,this.form);
-
- this.saveLoading=true;
- if(this.currentRuleId){
- let ruleList=this.form.ruleList.filter(item=>{
- return !item.groupId
- })
- console.log(ruleList)
- if(ruleList.length>0){
- postAction(this.url.createRuleGroup,{
- templateId:this.currentRuleId,
- ruleList
- }).then(res=>{
- console.log(res);
- this.saveLoading=false;
- if(res.success){
-
- this.$router.push('/earlyWarningRules/index')
- this.$bus.$emit('remove', `/earlyWarningRules/configRules?id=${this.currentRuleId}`)
- }else{
- this.$message.error(res.message)
- }
-
- })
- }else{
- this.$router.push('/earlyWarningRules/index')
- this.$bus.$emit('remove', `/earlyWarningRules/configRules?id=${this.currentRuleId}`)
- }
-
- }else{
- postAction(this.url.creativeTemplate,this.form).then(res=>{
- console.log(res);
- this.saveLoading=false;
- if(res.success){
- this.$router.push('/earlyWarningRules/index')
- this.$bus.$emit('remove', '/earlyWarningRules/configRules')
- }else{
- this.$message.error(res.message)
- }
-
-
- })
- }
-
-
-
- } else {
- console.log('error submit!!');
- this.$message.error('请按提示填写必填项目!')
- return false;
- }
- });
- },
- goBack() {
- this.$router.push('/earlyWarningRules/index')
- this.$bus.$emit('remove', '/earlyWarningRules/configRules')
-
- },
- },
- mounted(){
-
- },
- activated() {
-
- },
- filters:{
- handlerMaterialStatus(val){
- let str='';
- switch(val){
-
- case 0:
- str= '待指派'
- break;
- case 1:
- str= '脚本待上传'
- break;
- case 2:
- str= '脚本待审核'
- break;
- case 3:
- str= '脚本被驳回'
- break;
- case 4:
- str= '视频待上传'
- break;
- case 5:
- str= '视频待审核'
- break;
- case 6:
- str= '视频被驳回'
- break;
- case 7:
- str= '物料已完结'
- break;
- default:
- str='出错了'
- break;
- }
- return str
- },
- handlerVideoStatus(val){
- let str='';
- switch(val){
-
- case 0:
- str= '待上传'
- break;
- case 1:
- str= '待审核'
- break;
- case 2:
- str= '被驳回'
- break;
- case 3:
- str= '已审核'
- break;
- default:
- str='出错了'
- break;
- }
- return str
- },
-
- },
- }
- </script>
|