|
|
@@ -1,4 +1,68 @@
|
|
|
<template>
|
|
|
+ <!--
|
|
|
+ info里面的数据介绍
|
|
|
+
|
|
|
+封面类型下拉框 coverSelect
|
|
|
+ videoAndImg：图片+视频
|
|
|
+ img：图片
|
|
|
+ video：视频
|
|
|
+
|
|
|
+----------图片
|
|
|
+
|
|
|
+pc端图片地址 coverPc
|
|
|
+
|
|
|
+pc端图片位置 coverPcLoc
|
|
|
+ centen：居中
|
|
|
+ full：全屏
|
|
|
+
|
|
|
+移动端图片地址 coverMo
|
|
|
+
|
|
|
+移动端图片位置 coverMoLoc
|
|
|
+ centen：居中
|
|
|
+ full：全屏
|
|
|
+
|
|
|
+图片的背景设置下拉框 coverImgBac
|
|
|
+ colorFill：纯色填充
|
|
|
+ imgTile：图片平铺
|
|
|
+
|
|
|
+图片背景颜色选择纯色填充的色值 imgColorSelec
|
|
|
+
|
|
|
+图片背景选择图片平铺的图片地址 coverBac
|
|
|
+
|
|
|
+--------视频
|
|
|
+
|
|
|
+pc端视频地址 videoPc
|
|
|
+
|
|
|
+pc端视频位置 videoPcLoc
|
|
|
+ centen：居中
|
|
|
+ full：全屏
|
|
|
+
|
|
|
+移动端视频地址 videoMo
|
|
|
+
|
|
|
+移动端视频位置 videoMoLoc
|
|
|
+ centen：居中
|
|
|
+ full：全屏
|
|
|
+
|
|
|
+视频的背景设置下拉框 coverVideoBac
|
|
|
+ colorFill：纯色填充
|
|
|
+ imgTile：图片平铺
|
|
|
+
|
|
|
+视频背景颜色选择纯色填充的色值 videoColorSelec
|
|
|
+
|
|
|
+视频背景选择图片平铺的图片地址 videoBacImg
|
|
|
+
|
|
|
+视频的进入方式 coverVideoInWay
|
|
|
+ 0：播放完不自动进入
|
|
|
+ 1：播放完自动进入
|
|
|
+
|
|
|
+视频控件是否显示 coverVideoControl
|
|
|
+ 0：不显示
|
|
|
+ 1：显示
|
|
|
+
|
|
|
+视频的出场顺序 coverVideoOrder
|
|
|
+ before：开场图片前
|
|
|
+ later：开场图片后
|
|
|
+ -->
|
|
|
<div class="coverBase">
|
|
|
<!-- 顶上标题 -->
|
|
|
<span class="title">{{ coverBase_button }}</span>
|
|
|
@@ -11,7 +75,7 @@
|
|
|
<div class="cover_pull">
|
|
|
<!-- 封面类型选择下拉框 -->
|
|
|
<div class="cover_pull_tit">{{ cover_pull_tit }}</div>
|
|
|
- <Select v-model="SelectValue">
|
|
|
+ <Select v-model="coverSelect">
|
|
|
<Option
|
|
|
v-for="item in selecList"
|
|
|
:key="item.type"
|
|
|
@@ -22,7 +86,7 @@
|
|
|
</Select>
|
|
|
|
|
|
<!-- 关于图片 -->
|
|
|
- <div class="mainImgBox" v-show="SelectValue !== 'video'">
|
|
|
+ <div class="mainImgBox" v-show="coverSelect !== 'video'">
|
|
|
<div class="coverImgTit">{{ coverImgTit }}</div>
|
|
|
<div class="coverImgBox">
|
|
|
<!-- pc图片 -->
|
|
|
@@ -41,7 +105,8 @@
|
|
|
@click="
|
|
|
(isShowSelectionWindow = true),
|
|
|
(selectingFor = 'pc'),
|
|
|
- (upType = 'image'),(upTypeSta='imgBac')
|
|
|
+ (upType = 'image'),
|
|
|
+ (upTypeSta = 'imgBac')
|
|
|
"
|
|
|
>
|
|
|
{{ $i18n.t(`edit_settings.select_image`) }}
|
|
|
@@ -87,7 +152,8 @@
|
|
|
@click="
|
|
|
(isShowSelectionWindow = true),
|
|
|
(selectingFor = 'mobile'),
|
|
|
- (upType = 'image'),(upTypeSta='imgBac')
|
|
|
+ (upType = 'image'),
|
|
|
+ (upTypeSta = 'imgBac')
|
|
|
"
|
|
|
>
|
|
|
{{ $i18n.t(`edit_settings.select_image`) }}
|
|
|
@@ -159,7 +225,8 @@
|
|
|
@click="
|
|
|
(isShowSelectionWindow = true),
|
|
|
(selectingFor = 'bac'),
|
|
|
- (upType = 'image'),(upTypeSta='imgBac')
|
|
|
+ (upType = 'image'),
|
|
|
+ (upTypeSta = 'imgBac')
|
|
|
"
|
|
|
>
|
|
|
{{ $i18n.t(`edit_settings.select_image`) }}
|
|
|
@@ -174,7 +241,7 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 关于视频 -->
|
|
|
- <div class="mainVideoBox" v-show="SelectValue !== 'img'">
|
|
|
+ <div class="mainVideoBox" v-show="coverSelect !== 'img'">
|
|
|
<div class="coverImgTit">
|
|
|
{{ $i18n.t(`edit_settings.coverVideoTit`) }}
|
|
|
</div>
|
|
|
@@ -195,7 +262,8 @@
|
|
|
@click="
|
|
|
(isShowSelectionWindow = true),
|
|
|
(selectingFor = 'pc'),
|
|
|
- (upType = 'video'),(upTypeSta='videoBac')
|
|
|
+ (upType = 'video'),
|
|
|
+ (upTypeSta = 'videoBac')
|
|
|
"
|
|
|
>
|
|
|
{{ $i18n.t(`edit_settings.select_video`) }}
|
|
|
@@ -241,7 +309,8 @@
|
|
|
@click="
|
|
|
(isShowSelectionWindow = true),
|
|
|
(selectingFor = 'mobile'),
|
|
|
- (upType = 'video'),(upTypeSta='videoBac')
|
|
|
+ (upType = 'video'),
|
|
|
+ (upTypeSta = 'videoBac')
|
|
|
"
|
|
|
>
|
|
|
{{ $i18n.t(`edit_settings.select_video`) }}
|
|
|
@@ -314,7 +383,7 @@
|
|
|
(isShowSelectionWindow = true),
|
|
|
(selectingFor = 'bac'),
|
|
|
(upType = 'image'),
|
|
|
- (upTypeSta='videoBac')
|
|
|
+ (upTypeSta = 'videoBac')
|
|
|
"
|
|
|
>
|
|
|
{{ $i18n.t(`edit_settings.select_image`) }}
|
|
|
@@ -326,7 +395,53 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- 进入方式 -->
|
|
|
+ <div class="coverImgTit">
|
|
|
+ {{ $i18n.t(`edit_settings.coverVideoInWay`) }}
|
|
|
+ </div>
|
|
|
+ <div class="VideoTit">
|
|
|
+ <div class="VideoTitL">
|
|
|
+ {{ $i18n.t(`edit_settings.coverVideoInWayTit`) }}
|
|
|
+ </div>
|
|
|
+ <div class="VideoTitR">
|
|
|
+ <Switcher
|
|
|
+ :value="coverVideoInWay"
|
|
|
+ @change="coverVideoInWayChange"
|
|
|
+ ></Switcher>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 视频控件 -->
|
|
|
+ <div class="coverImgTit">
|
|
|
+ {{ $i18n.t(`edit_settings.coverVideoControl`) }}
|
|
|
+ </div>
|
|
|
+ <div class="VideoTit">
|
|
|
+ <div class="VideoTitL">
|
|
|
+ {{ $i18n.t(`edit_settings.coverVideoControlTit`) }}
|
|
|
+ </div>
|
|
|
+ <div class="VideoTitR">
|
|
|
+ <Switcher
|
|
|
+ :value="coverVideoControl"
|
|
|
+ @change="coverVideoControlChange"
|
|
|
+ ></Switcher>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 出现顺序 -->
|
|
|
+ <div class="coverImgTit">
|
|
|
+ {{ $i18n.t(`edit_settings.coverVideoOrder`) }}
|
|
|
+ </div>
|
|
|
+ <Select v-model="coverVideoOrder">
|
|
|
+ <Option
|
|
|
+ v-for="item in coverVideoOrderList"
|
|
|
+ :key="item.type"
|
|
|
+ :label="item.txt"
|
|
|
+ :value="item.type"
|
|
|
+ >
|
|
|
+ </Option>
|
|
|
+ </Select>
|
|
|
</div>
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
</div>
|
|
|
<div class="dialog" style="z-index: 2000" v-if="isShowSelectionWindow">
|
|
|
<MaterialSelectorForEditor
|
|
|
@@ -342,6 +457,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import Switcher from "@/components/shared/Switcher";
|
|
|
import { Select, Option, ColorPicker } from "element-ui";
|
|
|
import { i18n } from "@/lang";
|
|
|
import { mapGetters } from "vuex";
|
|
|
@@ -353,6 +469,7 @@ export default {
|
|
|
Select,
|
|
|
Option,
|
|
|
ColorPicker,
|
|
|
+ Switcher,
|
|
|
MaterialSelectorForEditor,
|
|
|
SelectedImage,
|
|
|
},
|
|
|
@@ -366,7 +483,7 @@ export default {
|
|
|
coverImgLoc2: i18n.t("edit_settings.coverImgLoc2"),
|
|
|
|
|
|
upType: "",
|
|
|
- upTypeSta:'',
|
|
|
+ upTypeSta: "",
|
|
|
|
|
|
selecList: [
|
|
|
{
|
|
|
@@ -377,7 +494,7 @@ export default {
|
|
|
{ txt: i18n.t("edit_settings.coverSelecVideo"), type: "video" },
|
|
|
],
|
|
|
// 封面类型下拉框数据
|
|
|
- SelectValue: "videoAndImg",
|
|
|
+ coverSelect: "img",
|
|
|
// 图片pc端位置
|
|
|
coverPcLoc: "centen",
|
|
|
// 图片移动端位置
|
|
|
@@ -388,7 +505,7 @@ export default {
|
|
|
{ txt: i18n.t("edit_settings.coverImgBacSelec1"), type: "colorFill" },
|
|
|
{ txt: i18n.t("edit_settings.coverImgBacSelec2"), type: "imgTile" },
|
|
|
],
|
|
|
- imgColorSelec: "#c71585",
|
|
|
+ imgColorSelec: "#000000",
|
|
|
predefineColors: [
|
|
|
"#000000",
|
|
|
"#ff4500",
|
|
|
@@ -410,7 +527,17 @@ export default {
|
|
|
videoMoLoc: "centen",
|
|
|
// 视频的背景设置
|
|
|
coverVideoBac: "colorFill",
|
|
|
- videoColorSelec: "#c71585",
|
|
|
+ videoColorSelec: "#000000",
|
|
|
+ // 视频的进入方式
|
|
|
+ coverVideoInWay: 0,
|
|
|
+ // 视频控件是否显示
|
|
|
+ coverVideoControl: 0,
|
|
|
+ // 视频的出现顺序
|
|
|
+ coverVideoOrder: "before",
|
|
|
+ coverVideoOrderList: [
|
|
|
+ { txt: i18n.t("edit_settings.coverVideoOrderTit1"), type: "before" },
|
|
|
+ { txt: i18n.t("edit_settings.coverVideoOrderTit2"), type: "later" },
|
|
|
+ ],
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -419,7 +546,11 @@ export default {
|
|
|
}),
|
|
|
},
|
|
|
watch: {
|
|
|
- SelectValue(val) {
|
|
|
+ coverVideoOrder(val) {
|
|
|
+ this.info.coverVideoOrder = val;
|
|
|
+ },
|
|
|
+
|
|
|
+ coverSelect(val) {
|
|
|
this.info.coverSelect = val;
|
|
|
},
|
|
|
coverPcLoc(val) {
|
|
|
@@ -442,6 +573,13 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 视频的进入方式
|
|
|
+ coverVideoInWayChange(val) {
|
|
|
+ this.coverVideoInWay = this.info.coverVideoInWay = val;
|
|
|
+ },
|
|
|
+ coverVideoControlChange(val) {
|
|
|
+ this.coverVideoControl = this.info.coverVideoControl = val;
|
|
|
+ },
|
|
|
// 图片的颜色选择器改变事件
|
|
|
imgColorSelecChange(val) {
|
|
|
this.imgColorSelec = val;
|
|
|
@@ -489,14 +627,25 @@ export default {
|
|
|
},
|
|
|
created() {},
|
|
|
mounted() {
|
|
|
- if (this.info.coverSelect) this.SelectValue = this.info.coverSelect;
|
|
|
- if (this.info.coverPcLoc) this.coverPcLoc = this.info.coverPcLoc;
|
|
|
- if (this.info.coverMoLoc) this.coverMoLoc = this.info.coverMoLoc;
|
|
|
- if (this.info.coverImgBac) this.coverImgBac = this.info.coverImgBac;
|
|
|
- if (this.info.imgColorSelec) this.imgColorSelec = this.info.imgColorSelec;
|
|
|
- if (this.info.videoPcLoc) this.videoPcLoc = this.info.videoPcLoc;
|
|
|
- if (this.info.videoMoLoc) this.videoMoLoc = this.info.videoMoLoc;
|
|
|
- if (this.info.coverVideoBac) this.coverVideoBac = this.info.coverVideoBac;
|
|
|
+ const arr = [
|
|
|
+ "coverSelect",
|
|
|
+ "coverPcLoc",
|
|
|
+ "coverMoLoc",
|
|
|
+ "coverImgBac",
|
|
|
+ "imgColorSelec",
|
|
|
+ "videoPcLoc",
|
|
|
+ "videoMoLoc",
|
|
|
+ "coverVideoBac",
|
|
|
+ "coverVideoInWay",
|
|
|
+ "coverVideoControl",
|
|
|
+ "videoColorSelec",
|
|
|
+ "coverVideoOrder",
|
|
|
+ ];
|
|
|
+ arr.forEach((v) => {
|
|
|
+ if (!this.info[v]) {
|
|
|
+ this.info[v] = this[v];
|
|
|
+ } else this[v] = this.info[v];
|
|
|
+ });
|
|
|
},
|
|
|
beforeCreate() {}, //生命周期 - 创建之前
|
|
|
beforeMount() {}, //生命周期 - 挂载之前
|
|
|
@@ -681,5 +830,16 @@ export default {
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
}
|
|
|
+ .mainVideoBox {
|
|
|
+ .VideoTit {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .VideoTitL {
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(255, 255, 255, 0.5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
