wanma-benteng
/
new-admin-view
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加：开屏广告支持设置视频

This commit is contained in:
wuhui_zzw 2023-12-13 14:26:02 +08:00
parent fd19a44fbe
commit 98bf7ac739
1 changed files with 108 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

185
src/views/setting/devise/visualization.vue
View File

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