|
|
@@ -75,7 +75,7 @@ pc端视频位置 videoPcLoc
|
|
|
<div class="cover_pull">
|
|
|
<!-- 封面类型选择下拉框 -->
|
|
|
<div class="cover_pull_tit">{{ cover_pull_tit }}</div>
|
|
|
- <Select v-model="coverSelect">
|
|
|
+ <Select v-model="coverInfo.coverSelect">
|
|
|
<Option
|
|
|
v-for="item in selecList"
|
|
|
:key="item.type"
|
|
|
@@ -86,7 +86,7 @@ pc端视频位置 videoPcLoc
|
|
|
</Select>
|
|
|
|
|
|
<!-- 关于图片 -->
|
|
|
- <div class="mainImgBox" v-show="coverSelect !== 'video'">
|
|
|
+ <div class="mainImgBox" v-show="coverInfo.coverSelect !== 'video'">
|
|
|
<div class="coverImgTit">{{ coverImgTit }}</div>
|
|
|
<div class="coverImgBox">
|
|
|
<!-- pc图片 -->
|
|
|
@@ -94,7 +94,7 @@ pc端视频位置 videoPcLoc
|
|
|
<div class="tit">{{ $i18n.t(`edit_settings.pc`) }}</div>
|
|
|
<div class="coverImgMain">
|
|
|
<SelectedImage
|
|
|
- :imgSrc="info.coverPc"
|
|
|
+ :imgSrc="info.coverInfo.coverPc"
|
|
|
:defaultImgSrc="require('@/assets/img/coverUpTit1.png')"
|
|
|
@cancel="onCancelPcTip"
|
|
|
></SelectedImage>
|
|
|
@@ -119,15 +119,15 @@ pc端视频位置 videoPcLoc
|
|
|
<!-- 选择居中和全屏 -->
|
|
|
<div class="coverImglocBox">
|
|
|
<div
|
|
|
- :class="{ active: coverPcLoc === 'centen' }"
|
|
|
- @click="coverPcLoc = 'centen'"
|
|
|
+ :class="{ active: coverInfo.coverPcLoc === 'centen' }"
|
|
|
+ @click="coverInfo.coverPcLoc = 'centen'"
|
|
|
>
|
|
|
<div class="inco"></div>
|
|
|
<div class="txt">{{ coverImgLoc1 }}</div>
|
|
|
</div>
|
|
|
<div
|
|
|
- :class="{ active: coverPcLoc === 'full' }"
|
|
|
- @click="coverPcLoc = 'full'"
|
|
|
+ :class="{ active: coverInfo.coverPcLoc === 'full' }"
|
|
|
+ @click="coverInfo.coverPcLoc = 'full'"
|
|
|
>
|
|
|
<div class="inco inco2"></div>
|
|
|
<div class="txt">{{ coverImgLoc2 }}</div>
|
|
|
@@ -141,7 +141,7 @@ pc端视频位置 videoPcLoc
|
|
|
<!-- 移动端图片 -->
|
|
|
<div class="coverImgMain">
|
|
|
<SelectedImage
|
|
|
- :imgSrc="info.coverMo"
|
|
|
+ :imgSrc="info.coverInfo.coverMo"
|
|
|
:defaultImgSrc="require('@/assets/img/coverUpTit1.png')"
|
|
|
@cancel="onCancelAppTip"
|
|
|
></SelectedImage>
|
|
|
@@ -166,15 +166,15 @@ pc端视频位置 videoPcLoc
|
|
|
<!-- 选择居中和全屏 -->
|
|
|
<div class="coverImglocBox">
|
|
|
<div
|
|
|
- :class="{ active: coverMoLoc === 'centen' }"
|
|
|
- @click="coverMoLoc = 'centen'"
|
|
|
+ :class="{ active: coverInfo.coverMoLoc === 'centen' }"
|
|
|
+ @click="coverInfo.coverMoLoc = 'centen'"
|
|
|
>
|
|
|
<div class="inco"></div>
|
|
|
<div class="txt">{{ coverImgLoc1 }}</div>
|
|
|
</div>
|
|
|
<div
|
|
|
- :class="{ active: coverMoLoc === 'full' }"
|
|
|
- @click="coverMoLoc = 'full'"
|
|
|
+ :class="{ active: coverInfo.coverMoLoc === 'full' }"
|
|
|
+ @click="coverInfo.coverMoLoc = 'full'"
|
|
|
>
|
|
|
<div class="inco inco2"></div>
|
|
|
<div class="txt">{{ coverImgLoc2 }}</div>
|
|
|
@@ -188,7 +188,7 @@ pc端视频位置 videoPcLoc
|
|
|
<!-- 图片背景设置 -->
|
|
|
<div class="coverImgBacBox">
|
|
|
<div class="tit">{{ $i18n.t(`edit_settings.coverImgBacTit`) }}</div>
|
|
|
- <Select v-model="coverImgBac">
|
|
|
+ <Select v-model="coverInfo.coverImgBac">
|
|
|
<Option
|
|
|
v-for="item in coverImgBacList"
|
|
|
:key="item.type"
|
|
|
@@ -198,23 +198,23 @@ pc端视频位置 videoPcLoc
|
|
|
</Option>
|
|
|
</Select>
|
|
|
<!-- 选择颜色 -->
|
|
|
- <div class="imgColorSelec" v-show="coverImgBac === 'colorFill'">
|
|
|
- <div class="ll">{{ imgColorSelec }}</div>
|
|
|
+ <div class="imgColorSelec" v-show="coverInfo.coverImgBac === 'colorFill'">
|
|
|
+ <div class="ll">{{ coverInfo.imgColorSelec }}</div>
|
|
|
<div
|
|
|
class="rr"
|
|
|
- :style="`background-color: ${imgColorSelec};`"
|
|
|
+ :style="`background-color: ${coverInfo.imgColorSelec};`"
|
|
|
></div>
|
|
|
<ColorPicker
|
|
|
@change="imgColorSelecChange"
|
|
|
- v-model="imgColorSelec"
|
|
|
+ v-model="coverInfo.imgColorSelec"
|
|
|
:predefine="predefineColors"
|
|
|
>
|
|
|
</ColorPicker>
|
|
|
</div>
|
|
|
<!-- 选择背景图片 -->
|
|
|
- <div class="imgClolrBacImg" v-show="coverImgBac === 'imgTile'">
|
|
|
+ <div class="imgClolrBacImg" v-show="coverInfo.coverImgBac === 'imgTile'">
|
|
|
<SelectedImage
|
|
|
- :imgSrc="info.coverBac"
|
|
|
+ :imgSrc="info.coverInfo.coverBac"
|
|
|
:defaultImgSrc="require('@/assets/img/coverUpTit1.png')"
|
|
|
@cancel="onCancelBac"
|
|
|
></SelectedImage>
|
|
|
@@ -241,7 +241,7 @@ pc端视频位置 videoPcLoc
|
|
|
</div>
|
|
|
|
|
|
<!-- 关于视频 -->
|
|
|
- <div class="mainVideoBox" v-show="coverSelect !== 'img'">
|
|
|
+ <div class="mainVideoBox" v-show="coverInfo.coverSelect !== 'img'">
|
|
|
<div class="coverImgTit">
|
|
|
{{ $i18n.t(`edit_settings.coverVideoTit`) }}
|
|
|
</div>
|
|
|
@@ -251,7 +251,7 @@ pc端视频位置 videoPcLoc
|
|
|
<div class="tit">{{ $i18n.t(`edit_settings.pc`) }}</div>
|
|
|
<div class="coverImgMain">
|
|
|
<SelectedImage
|
|
|
- :imgSrc="info.videoPc"
|
|
|
+ :imgSrc="info.coverInfo.videoPc"
|
|
|
:defaultImgSrc="require('@/assets/img/coverUpTit2.png')"
|
|
|
@cancel="clearVideoPc"
|
|
|
></SelectedImage>
|
|
|
@@ -276,15 +276,15 @@ pc端视频位置 videoPcLoc
|
|
|
<!-- 选择居中和全屏 -->
|
|
|
<div class="coverImglocBox">
|
|
|
<div
|
|
|
- :class="{ active: videoPcLoc === 'centen' }"
|
|
|
- @click="videoPcLoc = 'centen'"
|
|
|
+ :class="{ active: coverInfo.videoPcLoc === 'centen' }"
|
|
|
+ @click="coverInfo.videoPcLoc = 'centen'"
|
|
|
>
|
|
|
<div class="inco"></div>
|
|
|
<div class="txt">{{ coverImgLoc1 }}</div>
|
|
|
</div>
|
|
|
<div
|
|
|
- :class="{ active: videoPcLoc === 'full' }"
|
|
|
- @click="videoPcLoc = 'full'"
|
|
|
+ :class="{ active: coverInfo.videoPcLoc === 'full' }"
|
|
|
+ @click="coverInfo.videoPcLoc = 'full'"
|
|
|
>
|
|
|
<div class="inco inco2"></div>
|
|
|
<div class="txt">{{ coverImgLoc2 }}</div>
|
|
|
@@ -298,7 +298,7 @@ pc端视频位置 videoPcLoc
|
|
|
<!-- 移动端视频 -->
|
|
|
<div class="coverImgMain">
|
|
|
<SelectedImage
|
|
|
- :imgSrc="info.videoMo"
|
|
|
+ :imgSrc="info.coverInfo.videoMo"
|
|
|
:defaultImgSrc="require('@/assets/img/coverUpTit2.png')"
|
|
|
@cancel="claerVideoMo"
|
|
|
></SelectedImage>
|
|
|
@@ -323,15 +323,15 @@ pc端视频位置 videoPcLoc
|
|
|
<!-- 选择居中和全屏 -->
|
|
|
<div class="coverImglocBox">
|
|
|
<div
|
|
|
- :class="{ active: videoMoLoc === 'centen' }"
|
|
|
- @click="videoMoLoc = 'centen'"
|
|
|
+ :class="{ active: coverInfo.videoMoLoc === 'centen' }"
|
|
|
+ @click="coverInfo.videoMoLoc = 'centen'"
|
|
|
>
|
|
|
<div class="inco"></div>
|
|
|
<div class="txt">{{ coverImgLoc1 }}</div>
|
|
|
</div>
|
|
|
<div
|
|
|
- :class="{ active: videoMoLoc === 'full' }"
|
|
|
- @click="videoMoLoc = 'full'"
|
|
|
+ :class="{ active: coverInfo.videoMoLoc === 'full' }"
|
|
|
+ @click="coverInfo.videoMoLoc = 'full'"
|
|
|
>
|
|
|
<div class="inco inco2"></div>
|
|
|
<div class="txt">{{ coverImgLoc2 }}</div>
|
|
|
@@ -345,7 +345,7 @@ pc端视频位置 videoPcLoc
|
|
|
<!-- 视频背景设置 -->
|
|
|
<div class="coverImgBacBox">
|
|
|
<div class="tit">{{ $i18n.t(`edit_settings.coverImgBacTit`) }}</div>
|
|
|
- <Select v-model="coverVideoBac">
|
|
|
+ <Select v-model="coverInfo.coverVideoBac">
|
|
|
<Option
|
|
|
v-for="item in coverImgBacList"
|
|
|
:key="item.type"
|
|
|
@@ -355,23 +355,23 @@ pc端视频位置 videoPcLoc
|
|
|
</Option>
|
|
|
</Select>
|
|
|
<!-- 选择颜色 -->
|
|
|
- <div class="imgColorSelec" v-show="coverVideoBac === 'colorFill'">
|
|
|
- <div class="ll">{{ videoColorSelec }}</div>
|
|
|
+ <div class="imgColorSelec" v-show="coverInfo.coverVideoBac === 'colorFill'">
|
|
|
+ <div class="ll">{{ coverInfo.videoColorSelec }}</div>
|
|
|
<div
|
|
|
class="rr"
|
|
|
- :style="`background-color: ${videoColorSelec};`"
|
|
|
+ :style="`background-color: ${coverInfo.videoColorSelec};`"
|
|
|
></div>
|
|
|
<ColorPicker
|
|
|
@change="videoColorSelecChange"
|
|
|
- v-model="videoColorSelec"
|
|
|
+ v-model="coverInfo.videoColorSelec"
|
|
|
:predefine="predefineColors"
|
|
|
>
|
|
|
</ColorPicker>
|
|
|
</div>
|
|
|
<!-- 选择背景图片 -->
|
|
|
- <div class="imgClolrBacImg" v-show="coverVideoBac === 'imgTile'">
|
|
|
+ <div class="imgClolrBacImg" v-show="coverInfo.coverVideoBac === 'imgTile'">
|
|
|
<SelectedImage
|
|
|
- :imgSrc="info.videoBacImg"
|
|
|
+ :imgSrc="info.coverInfo.videoBacImg"
|
|
|
:defaultImgSrc="require('@/assets/img/coverUpTit1.png')"
|
|
|
@cancel="onCancelBac2"
|
|
|
></SelectedImage>
|
|
|
@@ -406,7 +406,7 @@ pc端视频位置 videoPcLoc
|
|
|
</div>
|
|
|
<div class="VideoTitR">
|
|
|
<Switcher
|
|
|
- :value="coverVideoInWay"
|
|
|
+ :value="coverInfo.coverVideoInWay"
|
|
|
@change="coverVideoInWayChange"
|
|
|
></Switcher>
|
|
|
</div>
|
|
|
@@ -421,7 +421,7 @@ pc端视频位置 videoPcLoc
|
|
|
</div>
|
|
|
<div class="VideoTitR">
|
|
|
<Switcher
|
|
|
- :value="coverVideoControl"
|
|
|
+ :value="coverInfo.coverVideoControl"
|
|
|
@change="coverVideoControlChange"
|
|
|
></Switcher>
|
|
|
</div>
|
|
|
@@ -430,7 +430,7 @@ pc端视频位置 videoPcLoc
|
|
|
<div class="coverImgTit">
|
|
|
{{ $i18n.t(`edit_settings.coverVideoOrder`) }}
|
|
|
</div>
|
|
|
- <Select v-model="coverVideoOrder">
|
|
|
+ <Select v-model="coverInfo.coverVideoOrder">
|
|
|
<Option
|
|
|
v-for="item in coverVideoOrderList"
|
|
|
:key="item.type"
|
|
|
@@ -493,19 +493,39 @@ export default {
|
|
|
{ txt: i18n.t("edit_settings.coverSelecImg"), type: "img" },
|
|
|
{ txt: i18n.t("edit_settings.coverSelecVideo"), type: "video" },
|
|
|
],
|
|
|
- // 封面类型下拉框数据
|
|
|
- coverSelect: "img",
|
|
|
- // 图片pc端位置
|
|
|
- coverPcLoc: "centen",
|
|
|
- // 图片移动端位置
|
|
|
- coverMoLoc: "centen",
|
|
|
- // 图片的背景设置
|
|
|
- coverImgBac: "colorFill",
|
|
|
+
|
|
|
+ coverInfo: {
|
|
|
+ // 封面类型下拉框数据
|
|
|
+ coverSelect: "img",
|
|
|
+ // 图片pc端位置
|
|
|
+ coverPcLoc: "centen",
|
|
|
+ // 图片移动端位置
|
|
|
+ coverMoLoc: "centen",
|
|
|
+ // 图片的背景设置
|
|
|
+ coverImgBac: "colorFill",
|
|
|
+ // 图片的背景颜色
|
|
|
+ imgColorSelec: "#000000",
|
|
|
+
|
|
|
+ // 有关上传视频
|
|
|
+ // 视频pc端位置
|
|
|
+ videoPcLoc: "centen",
|
|
|
+ // 视频移动端位置
|
|
|
+ videoMoLoc: "centen",
|
|
|
+ // 视频的背景设置
|
|
|
+ coverVideoBac: "colorFill",
|
|
|
+ videoColorSelec: "#000000",
|
|
|
+ // 视频的进入方式
|
|
|
+ coverVideoInWay: 0,
|
|
|
+ // 视频控件是否显示
|
|
|
+ coverVideoControl: 0,
|
|
|
+ // 视频的出现顺序
|
|
|
+ coverVideoOrder: "before",
|
|
|
+ },
|
|
|
coverImgBacList: [
|
|
|
{ txt: i18n.t("edit_settings.coverImgBacSelec1"), type: "colorFill" },
|
|
|
{ txt: i18n.t("edit_settings.coverImgBacSelec2"), type: "imgTile" },
|
|
|
],
|
|
|
- imgColorSelec: "#000000",
|
|
|
+
|
|
|
predefineColors: [
|
|
|
"#000000",
|
|
|
"#ff4500",
|
|
|
@@ -520,20 +540,6 @@ export default {
|
|
|
isShowSelectionWindow: false,
|
|
|
selectingFor: "", // 'pc', 'mobile'
|
|
|
|
|
|
- // 有关上传视频
|
|
|
- // 视频pc端位置
|
|
|
- videoPcLoc: "centen",
|
|
|
- // 视频移动端位置
|
|
|
- videoMoLoc: "centen",
|
|
|
- // 视频的背景设置
|
|
|
- coverVideoBac: "colorFill",
|
|
|
- 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" },
|
|
|
@@ -546,106 +552,95 @@ export default {
|
|
|
}),
|
|
|
},
|
|
|
watch: {
|
|
|
- coverVideoOrder(val) {
|
|
|
- this.info.coverVideoOrder = val;
|
|
|
+
|
|
|
+ 'coverInfo.coverVideoOrder'(val) {
|
|
|
+ this.info.coverInfocoverVideoOrder = val;
|
|
|
},
|
|
|
|
|
|
- coverSelect(val) {
|
|
|
- this.info.coverSelect = val;
|
|
|
+ 'coverInfo.coverSelect'(val) {
|
|
|
+ this.info.coverInfo.coverSelect = val;
|
|
|
},
|
|
|
- coverPcLoc(val) {
|
|
|
- this.info.coverPcLoc = val;
|
|
|
+ 'coverInfo.coverPcLoc'(val) {
|
|
|
+ this.info.coverInfo.coverPcLoc = val;
|
|
|
},
|
|
|
- coverMoLoc(val) {
|
|
|
- this.info.coverMoLoc = val;
|
|
|
+ 'coverInfo.coverMoLoc'(val) {
|
|
|
+ this.info.coverInfo.coverMoLoc = val;
|
|
|
},
|
|
|
- coverImgBac(val) {
|
|
|
- this.info.coverImgBac = val;
|
|
|
+ 'coverInfo.coverImgBac'(val) {
|
|
|
+ this.info.coverInfo.coverImgBac = val;
|
|
|
},
|
|
|
- coverVideoBac(val) {
|
|
|
- this.info.coverVideoBac = val;
|
|
|
+ 'coverInfo.coverVideoBac'(val) {
|
|
|
+ this.info.coverInfo.coverVideoBac = val;
|
|
|
},
|
|
|
- videoPcLoc(val) {
|
|
|
- this.info.videoPcLoc = val;
|
|
|
+ 'coverInfo.videoPcLoc'(val) {
|
|
|
+ this.info.coverInfo.videoPcLoc = val;
|
|
|
},
|
|
|
- videoMoLoc(val) {
|
|
|
- this.info.videoMoLoc = val;
|
|
|
+ 'coverInfo.videoMoLoc'(val) {
|
|
|
+ this.info.coverInfo.videoMoLoc = val;
|
|
|
},
|
|
|
},
|
|
|
methods: {
|
|
|
// 视频的进入方式
|
|
|
coverVideoInWayChange(val) {
|
|
|
- this.coverVideoInWay = this.info.coverVideoInWay = val;
|
|
|
+ this.coverInfo.coverVideoInWay = this.info.coverInfo.coverVideoInWay = val;
|
|
|
},
|
|
|
coverVideoControlChange(val) {
|
|
|
- this.coverVideoControl = this.info.coverVideoControl = val;
|
|
|
+ this.coverInfo.coverVideoControl = this.info.coverInfo.coverVideoControl = val;
|
|
|
},
|
|
|
// 图片的颜色选择器改变事件
|
|
|
imgColorSelecChange(val) {
|
|
|
- this.imgColorSelec = val;
|
|
|
- this.info.imgColorSelec = val;
|
|
|
+ this.coverInfo.imgColorSelec = val;
|
|
|
+ this.info.coverInfo.imgColorSelec = val;
|
|
|
},
|
|
|
videoColorSelecChange(val) {
|
|
|
- this.videoColorSelec = val;
|
|
|
- this.info.videoColorSelec = val;
|
|
|
+ this.coverInfo.videoColorSelec = val;
|
|
|
+ this.info.coverInfo.videoColorSelec = val;
|
|
|
},
|
|
|
handleSubmitFromMaterialSelector(selected) {
|
|
|
// 点击确定的时候是选择的图片上传
|
|
|
if (this.upTypeSta === "imgBac") {
|
|
|
- if (this.selectingFor === "pc") this.info.coverPc = selected[0].icon;
|
|
|
+ if (this.selectingFor === "pc") this.info.coverInfo.coverPc = selected[0].icon;
|
|
|
else if (this.selectingFor === "mobile")
|
|
|
- this.info.coverMo = selected[0].icon;
|
|
|
- else this.info.coverBac = selected[0].icon;
|
|
|
+ this.info.coverInfo.coverMo = selected[0].icon;
|
|
|
+ else this.info.coverInfo.coverBac = selected[0].icon;
|
|
|
} else {
|
|
|
// 视频上传
|
|
|
- if (this.selectingFor === "pc") this.info.videoPc = selected[0].icon;
|
|
|
+ if (this.selectingFor === "pc") this.info.coverInfo.videoPc = selected[0].icon;
|
|
|
else if (this.selectingFor === "mobile")
|
|
|
- this.info.videoMo = selected[0].icon;
|
|
|
- else this.info.videoBacImg = selected[0].icon;
|
|
|
+ this.info.coverInfo.videoMo = selected[0].icon;
|
|
|
+ else this.info.coverInfo.videoBacImg = selected[0].icon;
|
|
|
}
|
|
|
this.isShowSelectionWindow = false;
|
|
|
},
|
|
|
onCancelPcTip() {
|
|
|
- this.info.coverPc = "";
|
|
|
+ this.info.coverInfo.coverPc = "";
|
|
|
},
|
|
|
onCancelAppTip() {
|
|
|
- this.info.coverMo = "";
|
|
|
+ this.info.coverInfo.coverMo = "";
|
|
|
},
|
|
|
onCancelBac() {
|
|
|
- this.info.coverBac = "";
|
|
|
+ this.info.coverInfo.coverBac = "";
|
|
|
},
|
|
|
// 关于视频
|
|
|
clearVideoPc() {
|
|
|
- this.info.videoPc = "";
|
|
|
+ this.info.coverInfo.videoPc = "";
|
|
|
},
|
|
|
claerVideoMo() {
|
|
|
- this.info.videoMo = "";
|
|
|
+ this.info.coverInfo.videoMo = "";
|
|
|
},
|
|
|
onCancelBac2() {
|
|
|
- this.info.videoBacImg = "";
|
|
|
+ this.info.coverInfo.videoBacImg = "";
|
|
|
},
|
|
|
},
|
|
|
- created() {},
|
|
|
+ created() {
|
|
|
+ if(!this.info.coverInfo){
|
|
|
+ this.info.coverInfo={...this.coverInfo}
|
|
|
+ }else{
|
|
|
+ this.coverInfo={...this.info.coverInfo}
|
|
|
+ }
|
|
|
+ },
|
|
|
mounted() {
|
|
|
- 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() {}, //生命周期 - 挂载之前
|
