添加：开屏广告支持设置视频
This commit is contained in:
parent
fd19a44fbe
commit
98bf7ac739
|
|
@ -233,85 +233,91 @@
|
|||
<div class="right-box">
|
||||
<div class="hot_imgs">
|
||||
<div class="title">开屏广告设置</div>
|
||||
<div class="title-text">建议尺寸：750 * 1334px，拖拽图片可调整图片顺序哦，最多添加五张</div>
|
||||
<div class="list-box">
|
||||
<div>
|
||||
<el-form :model="formItem" label-width="80px">
|
||||
<el-form-item label="开屏广告:">
|
||||
<el-switch
|
||||
v-model="formItem.open_screen_switch"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
:width="53"
|
||||
active-text="开启"
|
||||
inactive-text="关闭"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="停留时间:">
|
||||
<el-input-number
|
||||
v-model.number="formItem.open_screen_time"
|
||||
type="number"
|
||||
size="small"
|
||||
:min="1"
|
||||
placeholder="请输入开屏广告时间"
|
||||
style="width: 150px"
|
||||
></el-input-number>（单位：秒）
|
||||
</el-form-item>
|
||||
<el-form-item label="间隔时间:">
|
||||
<el-input-number
|
||||
v-model.number="formItem.open_screen_space"
|
||||
type="number"
|
||||
size="small"
|
||||
:min="0"
|
||||
placeholder="请输入广告间隔时间"
|
||||
style="width: 150px"
|
||||
></el-input-number>（单位：小时）
|
||||
<span style="color:#999999;">备注：弹广告的频次，即N小时内进入不再显示广告页，0为每次进入都显示</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="title-text">建议尺寸：750 * 1334px，拖拽图片可调整图片顺序哦，最多添加五张</div>
|
||||
<div class="list-box">
|
||||
<div>
|
||||
<el-form :model="formItem" label-width="80px">
|
||||
<el-form-item label="开屏广告:">
|
||||
<el-switch v-model="formItem.open_screen_switch" :active-value="1" :inactive-value="0" :width="53" active-text="开启" inactive-text="关闭" />
|
||||
</el-form-item>
|
||||
<el-form-item label="广告类型:">
|
||||
<el-radio-group v-model="formItem.open_screen_type">
|
||||
<el-radio :label="0">图片</el-radio>
|
||||
<el-radio :label="1">视频</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<template v-if="formItem.open_screen_type == 1">
|
||||
<video v-if="formItem.open_screen_video" style="width:360px;height: 180px;" :src="formItem.open_screen_video" controls="controls">
|
||||
您的浏览器不支持 video 标签。
|
||||
</video>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-form-item label="停留时间:">
|
||||
<el-input-number
|
||||
v-model.number="formItem.open_screen_time"
|
||||
type="number"
|
||||
size="small"
|
||||
:min="1"
|
||||
placeholder="请输入开屏广告时间"
|
||||
style="width: 150px"
|
||||
></el-input-number>
|
||||
（单位：秒）
|
||||
</el-form-item>
|
||||
<el-form-item label="间隔时间:">
|
||||
<el-input-number
|
||||
v-model.number="formItem.open_screen_space"
|
||||
type="number"
|
||||
size="small"
|
||||
:min="0"
|
||||
placeholder="请输入广告间隔时间"
|
||||
style="width: 150px"
|
||||
></el-input-number>
|
||||
（单位：小时）
|
||||
<span style="color:#999999;">备注：弹广告的频次，即N小时内进入不再显示广告页，0为每次进入都显示</span>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
</div>
|
||||
<draggable class="dragArea list-group" v-if="formItem.open_screen_type != 1" :list="tabList.list" group="peoples" handle=".move-icon">
|
||||
<div class="item" v-for="(item,index) in tabList.list" :key="index+ 'd'">
|
||||
<div class="move-icon">
|
||||
<span class="iconfont icondrag2"></span>
|
||||
</div>
|
||||
<draggable class="dragArea list-group" :list="tabList.list" group="peoples"
|
||||
handle=".move-icon">
|
||||
<div class="item" v-for="(item,index) in tabList.list" :key="index+ 'd'">
|
||||
<div class="move-icon">
|
||||
<span class="iconfont icondrag2"></span>
|
||||
<div class="img-box" @click="modalPicTap('单选',index)">
|
||||
<img :src="item.pic" alt="" v-if="item.pic">
|
||||
<div class="upload-box" v-else>
|
||||
<i class="el-icon-camera-solid" />
|
||||
</div>
|
||||
<div class="img-box" @click="modalPicTap('单选',index)">
|
||||
<img :src="item.pic" alt="" v-if="item.pic">
|
||||
<div class="upload-box" v-else>
|
||||
<i class="el-icon-camera-solid"/>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info-item">
|
||||
<span>图片名称：</span>
|
||||
<div class="input-box">
|
||||
<el-input v-model="item.name" size="small" placeholder="请填写名称" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info-item">
|
||||
<span>图片名称：</span>
|
||||
<div class="input-box">
|
||||
<el-input v-model="item.name" size="small" placeholder="请填写名称"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>链接地址：</span>
|
||||
<div class="input-box" @click="link(index)">
|
||||
|
||||
<el-input v-model="item.url" size="small" suffix-icon="el-icon-arrow-right" readonly
|
||||
placeholder="选择链接"/>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>链接地址：</span>
|
||||
<div class="input-box" @click="link(index)">
|
||||
<el-input v-model="item.url" size="small" suffix-icon="el-icon-arrow-right" readonly placeholder="选择链接" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="delect-btn" @click.stop="bindDelete(item,index)">
|
||||
<i class="el-icon-error"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="delect-btn" @click.stop="bindDelete(item,index)">
|
||||
<i class="el-icon-error" />
|
||||
</div>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
<template>
|
||||
<div class="add-btn">
|
||||
<el-button class="btn-add" @click="addBox">添加图片</el-button>
|
||||
<template>
|
||||
<div class="add-btn">
|
||||
<el-button v-if="formItem.open_screen_type != 1" class="btn-add" @click="addBox">添加图片</el-button>
|
||||
<el-button v-else class="btn-add" @click="modalVideo = true;">选择视频</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col v-else>
|
||||
<!-- 右侧轮播图以及其他设置 -->
|
||||
|
|
@ -369,6 +375,12 @@
|
|||
</div>
|
||||
</el-card>
|
||||
<linkaddress ref="linkaddres" @linkUrl="linkUrl"></linkaddress>
|
||||
|
||||
<!--视频上传-->
|
||||
<el-dialog :visible.sync="modalVideo" width="1024px" title="上传视频">
|
||||
<uploadVideo @getVideo="getvideo" :isDiy="true"></uploadVideo>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -389,9 +401,10 @@ import {
|
|||
} from "@/api/system";
|
||||
import draggable from "vuedraggable";
|
||||
import linkaddress from "@/components/linkaddress";
|
||||
import uploadVideo from "@/components/uploadVideo";
|
||||
export default {
|
||||
name: "list",
|
||||
components: { draggable, linkaddress, WangEditor },
|
||||
components: { draggable, linkaddress, WangEditor, uploadVideo },
|
||||
computed: {
|
||||
bgcolors() {
|
||||
return {
|
||||
|
|
@ -407,15 +420,16 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
sideBar1:
|
||||
window.localStorage.getItem("sidebarStyle") == "a" ? false : true,
|
||||
modalVideo: false,
|
||||
|
||||
sideBar1: window.localStorage.getItem("sidebarStyle") == "a" ? false : true,
|
||||
formValidate: {
|
||||
content: "",
|
||||
},
|
||||
agreementList: [
|
||||
{ name: "隐私协议", type: "privacy" },
|
||||
{ name: "用户协议", type: "user" },
|
||||
{ name: "注销协议", type: "cancel" },
|
||||
{name: "隐私协议", type: "privacy"},
|
||||
{name: "用户协议", type: "user"},
|
||||
{name: "注销协议", type: "cancel"},
|
||||
],
|
||||
ruleValidate: {},
|
||||
myConfig: {
|
||||
|
|
@ -519,8 +533,7 @@ export default {
|
|||
mounted() {
|
||||
this.getGroupAll();
|
||||
let time = new Date().getTime() * 1000
|
||||
this.url =
|
||||
this.BaseURL + "/pages/columnGoods/HotNewGoods/index?inner_frame=1&type=new&time="+time;
|
||||
this.url = this.BaseURL + "/pages/columnGoods/HotNewGoods/index?inner_frame=1&type=new&time="+time;
|
||||
},
|
||||
methods: {
|
||||
getEditorContent(data) {
|
||||
|
|
@ -692,7 +705,15 @@ export default {
|
|||
save() {
|
||||
this.loadingExist = true;
|
||||
let data = {data: this.tabList.list}
|
||||
if(this.guide == 2){data.config={open_screen_switch: this.formItem.open_screen_switch,open_screen_time: this.formItem.open_screen_time,open_screen_space: this.formItem.open_screen_space}}
|
||||
if(this.guide == 2){
|
||||
data.config = {
|
||||
open_screen_switch: this.formItem.open_screen_switch,
|
||||
open_screen_time: this.formItem.open_screen_time,
|
||||
open_screen_space: this.formItem.open_screen_space,
|
||||
open_screen_type: this.formItem.open_screen_type,
|
||||
open_screen_video : this.formItem.open_screen_video
|
||||
}
|
||||
}
|
||||
groupSaveApi(this.name,data)
|
||||
.then((res) => {
|
||||
this.loadingExist = false;
|
||||
|
|
@ -753,6 +774,16 @@ export default {
|
|||
getContent(val) {
|
||||
this.formValidate.content = val;
|
||||
},
|
||||
|
||||
getvideo(data) {
|
||||
let _this = this;
|
||||
_this.modalVideo = false;
|
||||
this.formItem.open_screen_video = data
|
||||
// this.editor.cmd.do(
|
||||
// "insertHTML",
|
||||
// `<video src="${_this.video}" controls style="max-width:100%;"/>`
|
||||
// );
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue