|
@@ -21,8 +21,8 @@
|
|
|
</Option>
|
|
|
</Select>
|
|
|
|
|
|
- <!-- 图片设置 -->
|
|
|
- <template>
|
|
|
+ <!-- 关于图片 -->
|
|
|
+ <div class="mainImgBox" v-show="SelectValue !== 'video'">
|
|
|
<div class="coverImgTit">{{ coverImgTit }}</div>
|
|
|
<div class="coverImgBox">
|
|
|
<!-- pc图片 -->
|
|
@@ -38,7 +38,11 @@
|
|
|
<!-- 上传图片按钮 -->
|
|
|
<button
|
|
|
class="ui-button submit"
|
|
|
- @click="(isShowSelectionWindow = true), (selectingFor = 'pc')"
|
|
|
+ @click="
|
|
|
+ (isShowSelectionWindow = true),
|
|
|
+ (selectingFor = 'pc'),
|
|
|
+ (upType = 'image'),(upTypeSta='imgBac')
|
|
|
+ "
|
|
|
>
|
|
|
{{ $i18n.t(`edit_settings.select_image`) }}
|
|
|
</button>
|
|
@@ -50,15 +54,15 @@
|
|
|
<!-- 选择居中和全屏 -->
|
|
|
<div class="coverImglocBox">
|
|
|
<div
|
|
|
- :class="{ active: imgLoc1 === 'centen' }"
|
|
|
- @click="imgLoc1 = 'centen'"
|
|
|
+ :class="{ active: coverPcLoc === 'centen' }"
|
|
|
+ @click="coverPcLoc = 'centen'"
|
|
|
>
|
|
|
<div class="inco"></div>
|
|
|
<div class="txt">{{ coverImgLoc1 }}</div>
|
|
|
</div>
|
|
|
<div
|
|
|
- :class="{ active: imgLoc1 === 'full' }"
|
|
|
- @click="imgLoc1 = 'full'"
|
|
|
+ :class="{ active: coverPcLoc === 'full' }"
|
|
|
+ @click="coverPcLoc = 'full'"
|
|
|
>
|
|
|
<div class="inco inco2"></div>
|
|
|
<div class="txt">{{ coverImgLoc2 }}</div>
|
|
@@ -81,7 +85,9 @@
|
|
|
<button
|
|
|
class="ui-button submit"
|
|
|
@click="
|
|
|
- (isShowSelectionWindow = true), (selectingFor = 'mobile')
|
|
|
+ (isShowSelectionWindow = true),
|
|
|
+ (selectingFor = 'mobile'),
|
|
|
+ (upType = 'image'),(upTypeSta='imgBac')
|
|
|
"
|
|
|
>
|
|
|
{{ $i18n.t(`edit_settings.select_image`) }}
|
|
@@ -94,15 +100,15 @@
|
|
|
<!-- 选择居中和全屏 -->
|
|
|
<div class="coverImglocBox">
|
|
|
<div
|
|
|
- :class="{ active: imgLoc2 === 'centen' }"
|
|
|
- @click="imgLoc2 = 'centen'"
|
|
|
+ :class="{ active: coverMoLoc === 'centen' }"
|
|
|
+ @click="coverMoLoc = 'centen'"
|
|
|
>
|
|
|
<div class="inco"></div>
|
|
|
<div class="txt">{{ coverImgLoc1 }}</div>
|
|
|
</div>
|
|
|
<div
|
|
|
- :class="{ active: imgLoc2 === 'full' }"
|
|
|
- @click="imgLoc2 = 'full'"
|
|
|
+ :class="{ active: coverMoLoc === 'full' }"
|
|
|
+ @click="coverMoLoc = 'full'"
|
|
|
>
|
|
|
<div class="inco inco2"></div>
|
|
|
<div class="txt">{{ coverImgLoc2 }}</div>
|
|
@@ -150,7 +156,11 @@
|
|
|
<div class="imgRight">
|
|
|
<button
|
|
|
class="ui-button submit"
|
|
|
- @click="(isShowSelectionWindow = true), (selectingFor = 'bac')"
|
|
|
+ @click="
|
|
|
+ (isShowSelectionWindow = true),
|
|
|
+ (selectingFor = 'bac'),
|
|
|
+ (upType = 'image'),(upTypeSta='imgBac')
|
|
|
+ "
|
|
|
>
|
|
|
{{ $i18n.t(`edit_settings.select_image`) }}
|
|
|
</button>
|
|
@@ -161,7 +171,162 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 关于视频 -->
|
|
|
+ <div class="mainVideoBox" v-show="SelectValue !== 'img'">
|
|
|
+ <div class="coverImgTit">
|
|
|
+ {{ $i18n.t(`edit_settings.coverVideoTit`) }}
|
|
|
+ </div>
|
|
|
+ <div class="coverImgBox">
|
|
|
+ <!-- pc视频 -->
|
|
|
+ <div class="coverImgBox_ll">
|
|
|
+ <div class="tit">{{ $i18n.t(`edit_settings.pc`) }}</div>
|
|
|
+ <div class="coverImgMain">
|
|
|
+ <SelectedImage
|
|
|
+ :imgSrc="info.videoPc"
|
|
|
+ :defaultImgSrc="require('@/assets/img/coverUpTit2.png')"
|
|
|
+ @cancel="clearVideoPc"
|
|
|
+ ></SelectedImage>
|
|
|
+ <div class="imgRight">
|
|
|
+ <!-- 上传视频按钮 -->
|
|
|
+ <button
|
|
|
+ class="ui-button submit"
|
|
|
+ @click="
|
|
|
+ (isShowSelectionWindow = true),
|
|
|
+ (selectingFor = 'pc'),
|
|
|
+ (upType = 'video'),(upTypeSta='videoBac')
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ $i18n.t(`edit_settings.select_video`) }}
|
|
|
+ </button>
|
|
|
+ <!-- 上传提示 -->
|
|
|
+ <div
|
|
|
+ class="ui-remark"
|
|
|
+ v-html="$i18n.t(`edit_settings.coverUpTit4`)"
|
|
|
+ ></div>
|
|
|
+ <!-- 选择居中和全屏 -->
|
|
|
+ <div class="coverImglocBox">
|
|
|
+ <div
|
|
|
+ :class="{ active: videoPcLoc === 'centen' }"
|
|
|
+ @click="videoPcLoc = 'centen'"
|
|
|
+ >
|
|
|
+ <div class="inco"></div>
|
|
|
+ <div class="txt">{{ coverImgLoc1 }}</div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="{ active: videoPcLoc === 'full' }"
|
|
|
+ @click="videoPcLoc = 'full'"
|
|
|
+ >
|
|
|
+ <div class="inco inco2"></div>
|
|
|
+ <div class="txt">{{ coverImgLoc2 }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="coverImgBox_rr">
|
|
|
+ <div class="tit">{{ $i18n.t(`edit_settings.mobile`) }}</div>
|
|
|
+ <!-- 移动端视频 -->
|
|
|
+ <div class="coverImgMain">
|
|
|
+ <SelectedImage
|
|
|
+ :imgSrc="info.videoMo"
|
|
|
+ :defaultImgSrc="require('@/assets/img/coverUpTit2.png')"
|
|
|
+ @cancel="claerVideoMo"
|
|
|
+ ></SelectedImage>
|
|
|
+ <div class="imgRight">
|
|
|
+ <!-- 上传视频按钮 -->
|
|
|
+ <button
|
|
|
+ class="ui-button submit"
|
|
|
+ @click="
|
|
|
+ (isShowSelectionWindow = true),
|
|
|
+ (selectingFor = 'mobile'),
|
|
|
+ (upType = 'video'),(upTypeSta='videoBac')
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ $i18n.t(`edit_settings.select_video`) }}
|
|
|
+ </button>
|
|
|
+ <!-- 上传提示 -->
|
|
|
+ <div
|
|
|
+ class="ui-remark"
|
|
|
+ v-html="$i18n.t(`edit_settings.coverUpTit5`)"
|
|
|
+ ></div>
|
|
|
+ <!-- 选择居中和全屏 -->
|
|
|
+ <div class="coverImglocBox">
|
|
|
+ <div
|
|
|
+ :class="{ active: videoMoLoc === 'centen' }"
|
|
|
+ @click="videoMoLoc = 'centen'"
|
|
|
+ >
|
|
|
+ <div class="inco"></div>
|
|
|
+ <div class="txt">{{ coverImgLoc1 }}</div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="{ active: videoMoLoc === 'full' }"
|
|
|
+ @click="videoMoLoc = 'full'"
|
|
|
+ >
|
|
|
+ <div class="inco inco2"></div>
|
|
|
+ <div class="txt">{{ coverImgLoc2 }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 视频背景设置 -->
|
|
|
+ <div class="coverImgBacBox">
|
|
|
+ <div class="tit">{{ $i18n.t(`edit_settings.coverImgBacTit`) }}</div>
|
|
|
+ <Select v-model="coverVideoBac">
|
|
|
+ <Option
|
|
|
+ v-for="item in coverImgBacList"
|
|
|
+ :key="item.type"
|
|
|
+ :label="item.txt"
|
|
|
+ :value="item.type"
|
|
|
+ >
|
|
|
+ </Option>
|
|
|
+ </Select>
|
|
|
+ <!-- 选择颜色 -->
|
|
|
+ <div class="imgColorSelec" v-show="coverVideoBac === 'colorFill'">
|
|
|
+ <div class="ll">{{ videoColorSelec }}</div>
|
|
|
+ <div
|
|
|
+ class="rr"
|
|
|
+ :style="`background-color: ${videoColorSelec};`"
|
|
|
+ ></div>
|
|
|
+ <ColorPicker
|
|
|
+ @change="videoColorSelecChange"
|
|
|
+ v-model="videoColorSelec"
|
|
|
+ :predefine="predefineColors"
|
|
|
+ >
|
|
|
+ </ColorPicker>
|
|
|
+ </div>
|
|
|
+ <!-- 选择背景图片 -->
|
|
|
+ <div class="imgClolrBacImg" v-show="coverVideoBac === 'imgTile'">
|
|
|
+ <SelectedImage
|
|
|
+ :imgSrc="info.videoBacImg"
|
|
|
+ :defaultImgSrc="require('@/assets/img/coverUpTit1.png')"
|
|
|
+ @cancel="onCancelBac2"
|
|
|
+ ></SelectedImage>
|
|
|
+ <!-- 上传图片按钮 -->
|
|
|
+ <div class="imgRight">
|
|
|
+ <button
|
|
|
+ class="ui-button submit"
|
|
|
+ @click="
|
|
|
+ (isShowSelectionWindow = true),
|
|
|
+ (selectingFor = 'bac'),
|
|
|
+ (upType = 'image'),
|
|
|
+ (upTypeSta='videoBac')
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ $i18n.t(`edit_settings.select_image`) }}
|
|
|
+ </button>
|
|
|
+ <div
|
|
|
+ class="ui-remark"
|
|
|
+ v-html="$i18n.t(`edit_settings.coverUpTit3`)"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="dialog" style="z-index: 2000" v-if="isShowSelectionWindow">
|
|
|
<MaterialSelectorForEditor
|
|
@@ -169,7 +334,8 @@
|
|
|
:isMultiSelection="false"
|
|
|
@cancle="isShowSelectionWindow = false"
|
|
|
@submit="handleSubmitFromMaterialSelector"
|
|
|
- :selectableType="['image']"
|
|
|
+ :selectableType="[upType]"
|
|
|
+ :initialMaterialType="upType"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -199,6 +365,9 @@ export default {
|
|
|
coverImgLoc1: i18n.t("edit_settings.coverImgLoc1"),
|
|
|
coverImgLoc2: i18n.t("edit_settings.coverImgLoc2"),
|
|
|
|
|
|
+ upType: "",
|
|
|
+ upTypeSta:'',
|
|
|
+
|
|
|
selecList: [
|
|
|
{
|
|
|
txt: i18n.t("edit_settings.coverSelecVideoAndImg"),
|
|
@@ -210,9 +379,9 @@ export default {
|
|
|
// 封面类型下拉框数据
|
|
|
SelectValue: "videoAndImg",
|
|
|
// 图片pc端位置
|
|
|
- imgLoc1: "centen",
|
|
|
+ coverPcLoc: "centen",
|
|
|
// 图片移动端位置
|
|
|
- imgLoc2: "centen",
|
|
|
+ coverMoLoc: "centen",
|
|
|
// 图片的背景设置
|
|
|
coverImgBac: "colorFill",
|
|
|
coverImgBacList: [
|
|
@@ -233,6 +402,15 @@ export default {
|
|
|
|
|
|
isShowSelectionWindow: false,
|
|
|
selectingFor: "", // 'pc', 'mobile'
|
|
|
+
|
|
|
+ // 有关上传视频
|
|
|
+ // 视频pc端位置
|
|
|
+ videoPcLoc: "centen",
|
|
|
+ // 视频移动端位置
|
|
|
+ videoMoLoc: "centen",
|
|
|
+ // 视频的背景设置
|
|
|
+ coverVideoBac: "colorFill",
|
|
|
+ videoColorSelec: "#c71585",
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
@@ -244,15 +422,24 @@ export default {
|
|
|
SelectValue(val) {
|
|
|
this.info.coverSelect = val;
|
|
|
},
|
|
|
- imgLoc1(val) {
|
|
|
+ coverPcLoc(val) {
|
|
|
this.info.coverPcLoc = val;
|
|
|
},
|
|
|
- imgLoc2(val) {
|
|
|
+ coverMoLoc(val) {
|
|
|
this.info.coverMoLoc = val;
|
|
|
},
|
|
|
coverImgBac(val) {
|
|
|
this.info.coverImgBac = val;
|
|
|
},
|
|
|
+ coverVideoBac(val) {
|
|
|
+ this.info.coverVideoBac = val;
|
|
|
+ },
|
|
|
+ videoPcLoc(val) {
|
|
|
+ this.info.videoPcLoc = val;
|
|
|
+ },
|
|
|
+ videoMoLoc(val) {
|
|
|
+ this.info.videoMoLoc = val;
|
|
|
+ },
|
|
|
},
|
|
|
methods: {
|
|
|
// 图片的颜色选择器改变事件
|
|
@@ -260,13 +447,23 @@ export default {
|
|
|
this.imgColorSelec = val;
|
|
|
this.info.imgColorSelec = val;
|
|
|
},
|
|
|
+ videoColorSelecChange(val) {
|
|
|
+ this.videoColorSelec = val;
|
|
|
+ this.info.videoColorSelec = val;
|
|
|
+ },
|
|
|
handleSubmitFromMaterialSelector(selected) {
|
|
|
- if (this.selectingFor === "pc") {
|
|
|
- this.info.coverPc = selected[0].icon;
|
|
|
- } else if (this.selectingFor === "mobile") {
|
|
|
- this.info.coverMo = selected[0].icon;
|
|
|
+ // 点击确定的时候是选择的图片上传
|
|
|
+ if (this.upTypeSta === "imgBac") {
|
|
|
+ if (this.selectingFor === "pc") this.info.coverPc = selected[0].icon;
|
|
|
+ else if (this.selectingFor === "mobile")
|
|
|
+ this.info.coverMo = selected[0].icon;
|
|
|
+ else this.info.coverBac = selected[0].icon;
|
|
|
} else {
|
|
|
- this.info.coverBac = selected[0].icon;
|
|
|
+ // 视频上传
|
|
|
+ if (this.selectingFor === "pc") this.info.videoPc = selected[0].icon;
|
|
|
+ else if (this.selectingFor === "mobile")
|
|
|
+ this.info.videoMo = selected[0].icon;
|
|
|
+ else this.info.videoBacImg = selected[0].icon;
|
|
|
}
|
|
|
this.isShowSelectionWindow = false;
|
|
|
},
|
|
@@ -279,14 +476,27 @@ export default {
|
|
|
onCancelBac() {
|
|
|
this.info.coverBac = "";
|
|
|
},
|
|
|
+ // 关于视频
|
|
|
+ clearVideoPc() {
|
|
|
+ this.info.videoPc = "";
|
|
|
+ },
|
|
|
+ claerVideoMo() {
|
|
|
+ this.info.videoMo = "";
|
|
|
+ },
|
|
|
+ onCancelBac2() {
|
|
|
+ this.info.videoBacImg = "";
|
|
|
+ },
|
|
|
},
|
|
|
created() {},
|
|
|
mounted() {
|
|
|
if (this.info.coverSelect) this.SelectValue = this.info.coverSelect;
|
|
|
- if (this.info.coverPcLoc) this.imgLoc1 = this.info.coverPcLoc;
|
|
|
- if (this.info.coverMoLoc) this.imgLoc2 = this.info.coverMoLoc;
|
|
|
+ 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;
|
|
|
},
|
|
|
beforeCreate() {}, //生命周期 - 创建之前
|
|
|
beforeMount() {}, //生命周期 - 挂载之前
|