Merge branch 'dev' of http://face3d.4dage.com:7005/chenzhiguang/qjkankan_v1.1.1 into dev

packages/qjkankan-editor/src/views/base/coverBase copy.vue

@@ -0,0 +1,840 @@
+<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>
+    <i
+      class="iconfont icon-material_prompt tool-tip-for-editor"
+      v-tooltip="coverBase_button_tips"
+    >
+    </i>
+    <br />
+    <div class="cover_pull">
+      <!-- 封面类型选择下拉框 -->
+      <div class="cover_pull_tit">{{ cover_pull_tit }}</div>
+      <Select v-model="coverInfo.coverSelect">
+        <Option
+          v-for="item in selecList"
+          :key="item.type"
+          :label="item.txt"
+          :value="item.type"
+        >
+        </Option>
+      </Select>
+
+      <!-- 关于图片 -->
+      <div class="mainImgBox" v-show="coverInfo.coverSelect !== 'video'">
+        <div class="coverImgTit">{{ coverImgTit }}</div>
+        <div class="coverImgBox">
+          <!-- pc图片 -->
+          <div class="coverImgBox_ll">
+            <div class="tit">{{ $i18n.t(`edit_settings.pc`) }}</div>
+            <div class="coverImgMain">
+              <SelectedImage
+                :imgSrc="info.coverInfo.coverPc"
+                :defaultImgSrc="require('@/assets/img/coverUpTit1.png')"
+                @cancel="onCancelPcTip"
+              ></SelectedImage>
+              <div class="imgRight">
+                <!-- 上传图片按钮 -->
+                <button
+                  class="ui-button submit"
+                  @click="
+                    (isShowSelectionWindow = true),
+                      (selectingFor = 'pc'),
+                      (upType = 'image'),
+                      (upTypeSta = 'imgBac')
+                  "
+                >
+                  {{ $i18n.t(`edit_settings.select_image`) }}
+                </button>
+                <!-- 上传提示 -->
+                <div
+                  class="ui-remark"
+                  v-html="$i18n.t(`edit_settings.coverUpTit1`)"
+                ></div>
+                <!-- 选择居中和全屏 -->
+                <div class="coverImglocBox">
+                  <div
+                    :class="{ active: coverInfo.coverPcLoc === 'centen' }"
+                    @click="coverInfo.coverPcLoc = 'centen'"
+                  >
+                    <div class="inco"></div>
+                    <div class="txt">{{ coverImgLoc1 }}</div>
+                  </div>
+                  <div
+                    :class="{ active: coverInfo.coverPcLoc === 'full' }"
+                    @click="coverInfo.coverPcLoc = '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.coverInfo.coverMo"
+                :defaultImgSrc="require('@/assets/img/coverUpTit1.png')"
+                @cancel="onCancelAppTip"
+              ></SelectedImage>
+              <div class="imgRight">
+                <!-- 上传图片按钮 -->
+                <button
+                  class="ui-button submit"
+                  @click="
+                    (isShowSelectionWindow = true),
+                      (selectingFor = 'mobile'),
+                      (upType = 'image'),
+                      (upTypeSta = 'imgBac')
+                  "
+                >
+                  {{ $i18n.t(`edit_settings.select_image`) }}
+                </button>
+                <!-- 上传提示 -->
+                <div
+                  class="ui-remark"
+                  v-html="$i18n.t(`edit_settings.coverUpTit2`)"
+                ></div>
+                <!-- 选择居中和全屏 -->
+                <div class="coverImglocBox">
+                  <div
+                    :class="{ active: coverInfo.coverMoLoc === 'centen' }"
+                    @click="coverInfo.coverMoLoc = 'centen'"
+                  >
+                    <div class="inco"></div>
+                    <div class="txt">{{ coverImgLoc1 }}</div>
+                  </div>
+                  <div
+                    :class="{ active: coverInfo.coverMoLoc === 'full' }"
+                    @click="coverInfo.coverMoLoc = '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="coverInfo.coverImgBac">
+            <Option
+              v-for="item in coverImgBacList"
+              :key="item.type"
+              :label="item.txt"
+              :value="item.type"
+            >
+            </Option>
+          </Select>
+          <!-- 选择颜色 -->
+          <div class="imgColorSelec" v-show="coverInfo.coverImgBac === 'colorFill'">
+            <div class="ll">{{ coverInfo.imgColorSelec }}</div>
+            <div
+              class="rr"
+              :style="`background-color: ${coverInfo.imgColorSelec};`"
+            ></div>
+            <ColorPicker
+              @change="imgColorSelecChange"
+              v-model="coverInfo.imgColorSelec"
+              :predefine="predefineColors"
+            >
+            </ColorPicker>
+          </div>
+          <!-- 选择背景图片 -->
+          <div class="imgClolrBacImg" v-show="coverInfo.coverImgBac === 'imgTile'">
+            <SelectedImage
+              :imgSrc="info.coverInfo.coverBac"
+              :defaultImgSrc="require('@/assets/img/coverUpTit1.png')"
+              @cancel="onCancelBac"
+            ></SelectedImage>
+            <!-- 上传图片按钮 -->
+            <div class="imgRight">
+              <button
+                class="ui-button submit"
+                @click="
+                  (isShowSelectionWindow = true),
+                    (selectingFor = 'bac'),
+                    (upType = 'image'),
+                    (upTypeSta = 'imgBac')
+                "
+              >
+                {{ $i18n.t(`edit_settings.select_image`) }}
+              </button>
+              <div
+                class="ui-remark"
+                v-html="$i18n.t(`edit_settings.coverUpTit3`)"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 关于视频 -->
+      <div class="mainVideoBox" v-show="coverInfo.coverSelect !== '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.coverInfo.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: coverInfo.videoPcLoc === 'centen' }"
+                    @click="coverInfo.videoPcLoc = 'centen'"
+                  >
+                    <div class="inco"></div>
+                    <div class="txt">{{ coverImgLoc1 }}</div>
+                  </div>
+                  <div
+                    :class="{ active: coverInfo.videoPcLoc === 'full' }"
+                    @click="coverInfo.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.coverInfo.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: coverInfo.videoMoLoc === 'centen' }"
+                    @click="coverInfo.videoMoLoc = 'centen'"
+                  >
+                    <div class="inco"></div>
+                    <div class="txt">{{ coverImgLoc1 }}</div>
+                  </div>
+                  <div
+                    :class="{ active: coverInfo.videoMoLoc === 'full' }"
+                    @click="coverInfo.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="coverInfo.coverVideoBac">
+            <Option
+              v-for="item in coverImgBacList"
+              :key="item.type"
+              :label="item.txt"
+              :value="item.type"
+            >
+            </Option>
+          </Select>
+          <!-- 选择颜色 -->
+          <div class="imgColorSelec" v-show="coverInfo.coverVideoBac === 'colorFill'">
+            <div class="ll">{{ coverInfo.videoColorSelec }}</div>
+            <div
+              class="rr"
+              :style="`background-color: ${coverInfo.videoColorSelec};`"
+            ></div>
+            <ColorPicker
+              @change="videoColorSelecChange"
+              v-model="coverInfo.videoColorSelec"
+              :predefine="predefineColors"
+            >
+            </ColorPicker>
+          </div>
+          <!-- 选择背景图片 -->
+          <div class="imgClolrBacImg" v-show="coverInfo.coverVideoBac === 'imgTile'">
+            <SelectedImage
+              :imgSrc="info.coverInfo.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 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="coverInfo.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="coverInfo.coverVideoControl"
+              @change="coverVideoControlChange"
+            ></Switcher>
+          </div>
+        </div>
+        <!-- 出现顺序 -->
+        <div class="coverImgTit">
+          {{ $i18n.t(`edit_settings.coverVideoOrder`) }}
+        </div>
+        <Select v-model="coverInfo.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
+        :title="$i18n.t(`gather.select_material`)"
+        :isMultiSelection="false"
+        @cancle="isShowSelectionWindow = false"
+        @submit="handleSubmitFromMaterialSelector"
+        :selectableType="[upType]"
+        :initialMaterialType="upType"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import Switcher from "@/components/shared/Switcher";
+import { Select, Option, ColorPicker } from "element-ui";
+import { i18n } from "@/lang";
+import { mapGetters } from "vuex";
+import SelectedImage from "@/components/selectedImageInEditor.vue";
+import MaterialSelectorForEditor from "@/components/materialSelectorForEditor.vue";
+export default {
+  name: "coverBase",
+  components: {
+    Select,
+    Option,
+    ColorPicker,
+    Switcher,
+    MaterialSelectorForEditor,
+    SelectedImage,
+  },
+  data() {
+    return {
+      coverBase_button: i18n.t("edit_settings.coverBase_button"),
+      coverBase_button_tips: i18n.t("edit_settings.coverBase_button_tips"),
+      cover_pull_tit: i18n.t("edit_settings.cover_pull_tit"),
+      coverImgTit: i18n.t("edit_settings.coverImgTit"),
+      coverImgLoc1: i18n.t("edit_settings.coverImgLoc1"),
+      coverImgLoc2: i18n.t("edit_settings.coverImgLoc2"),
+
+      upType: "",
+      upTypeSta: "",
+
+      selecList: [
+        {
+          txt: i18n.t("edit_settings.coverSelecVideoAndImg"),
+          type: "videoAndImg",
+        },
+        { txt: i18n.t("edit_settings.coverSelecImg"), type: "img" },
+        { txt: i18n.t("edit_settings.coverSelecVideo"), type: "video" },
+      ],
+
+      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" },
+      ],
+
+      predefineColors: [
+        "#000000",
+        "#ff4500",
+        "#ff8c00",
+        "#ffd700",
+        "#90ee90",
+        "#00ced1",
+        "#1e90ff",
+        "#c71585",
+      ],
+
+      isShowSelectionWindow: false,
+      selectingFor: "", // 'pc', 'mobile'
+
+      coverVideoOrderList: [
+        { txt: i18n.t("edit_settings.coverVideoOrderTit1"), type: "before" },
+        { txt: i18n.t("edit_settings.coverVideoOrderTit2"), type: "later" },
+      ],
+    };
+  },
+  computed: {
+    ...mapGetters({
+      info: "info",
+    }),
+  },
+  watch: {
+
+    'coverInfo.coverVideoOrder'(val) {
+      this.info.coverInfocoverVideoOrder = val;
+    },
+
+    'coverInfo.coverSelect'(val) {
+      this.info.coverInfo.coverSelect = val;
+    },
+    'coverInfo.coverPcLoc'(val) {
+      this.info.coverInfo.coverPcLoc = val;
+    },
+    'coverInfo.coverMoLoc'(val) {
+      this.info.coverInfo.coverMoLoc = val;
+    },
+    'coverInfo.coverImgBac'(val) {
+      this.info.coverInfo.coverImgBac = val;
+    },
+    'coverInfo.coverVideoBac'(val) {
+      this.info.coverInfo.coverVideoBac = val;
+    },
+    'coverInfo.videoPcLoc'(val) {
+      this.info.coverInfo.videoPcLoc = val;
+    },
+    'coverInfo.videoMoLoc'(val) {
+      this.info.coverInfo.videoMoLoc = val;
+    },
+  },
+  methods: {
+    // 视频的进入方式
+    coverVideoInWayChange(val) {
+      this.coverInfo.coverVideoInWay = this.info.coverInfo.coverVideoInWay = val;
+    },
+    coverVideoControlChange(val) {
+      this.coverInfo.coverVideoControl = this.info.coverInfo.coverVideoControl = val;
+    },
+    // 图片的颜色选择器改变事件
+    imgColorSelecChange(val) {
+      this.coverInfo.imgColorSelec = val;
+      this.info.coverInfo.imgColorSelec = val;
+    },
+    videoColorSelecChange(val) {
+      this.coverInfo.videoColorSelec = val;
+      this.info.coverInfo.videoColorSelec = val;
+    },
+    handleSubmitFromMaterialSelector(selected) {
+      // 点击确定的时候是选择的图片上传
+      if (this.upTypeSta === "imgBac") {
+        if (this.selectingFor === "pc") this.info.coverInfo.coverPc = selected[0].icon;
+        else if (this.selectingFor === "mobile")
+          this.info.coverInfo.coverMo = selected[0].icon;
+        else this.info.coverInfo.coverBac = selected[0].icon;
+      } else {
+        // 视频上传
+        if (this.selectingFor === "pc") this.info.coverInfo.videoPc = selected[0].icon;
+        else if (this.selectingFor === "mobile")
+          this.info.coverInfo.videoMo = selected[0].icon;
+        else this.info.coverInfo.videoBacImg = selected[0].icon;
+      }
+      this.isShowSelectionWindow = false;
+    },
+    onCancelPcTip() {
+      this.info.coverInfo.coverPc = "";
+    },
+    onCancelAppTip() {
+      this.info.coverInfo.coverMo = "";
+    },
+    onCancelBac() {
+      this.info.coverInfo.coverBac = "";
+    },
+    // 关于视频
+    clearVideoPc() {
+      this.info.coverInfo.videoPc = "";
+    },
+    claerVideoMo() {
+      this.info.coverInfo.videoMo = "";
+    },
+    onCancelBac2() {
+      this.info.coverInfo.videoBacImg = "";
+    },
+  },
+  created() {
+    if(!this.info.coverInfo){
+      this.info.coverInfo={...this.coverInfo}
+    }else{
+      this.coverInfo={...this.info.coverInfo}
+    }
+  },
+  mounted() {
+
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.coverBase {
+  padding: 24px 30px;
+  background: #252526;
+  height: 520px;
+  overflow-y: auto;
+  .title {
+    font-size: 18px;
+    color: #ffffff;
+  }
+  .tool-tip-for-editor {
+    margin-left: 4px;
+    font-size: 12px;
+    cursor: default;
+    position: relative;
+    top: -2px;
+  }
+  .cover_pull {
+    margin-top: 10px;
+    .cover_pull_tit {
+      margin-bottom: 10px;
+      font-size: 14px;
+      color: rgba(255, 255, 255, 0.5);
+    }
+    /deep/.el-select {
+      background: #1a1b1d;
+      border-radius: 4px;
+      border: 1px solid #404040;
+      width: 300px;
+      height: 36px;
+    }
+    /deep/.el-input {
+      height: 36px;
+      line-height: 36px;
+    }
+    /deep/.el-input__inner {
+      color: #fff;
+      height: 36px;
+      line-height: 36px;
+      background-color: transparent;
+      border-color: transparent !important;
+    }
+  }
+
+  .coverImgTit {
+    font-size: 18px;
+    color: #ffffff;
+    margin-top: 16px;
+    margin-bottom: 10px;
+  }
+  .coverImgBox {
+    display: flex;
+    justify-content: space-between;
+    & > div {
+      width: 48%;
+      .tit {
+        font-size: 14px;
+        opacity: 0.5;
+        margin-bottom: 10px;
+      }
+      .coverImgMain {
+        display: flex;
+        .imgBox {
+          width: 136px;
+          height: 136px;
+          background: #1a1b1d;
+          border-radius: 4px;
+          border: 1px solid #404040;
+        }
+        .ui-remark {
+          margin: 12px 0;
+          font-size: 14px;
+        }
+        .coverImglocBox {
+          display: flex;
+          width: 140px;
+          height: 36px;
+          background: #1a1b1d;
+          border-radius: 4px;
+          border: 1px solid #404040;
+          & > div {
+            cursor: pointer;
+            width: 50%;
+            font-size: 14px;
+            color: #fff;
+            opacity: 0.5;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .inco {
+              margin-top: 2px;
+              width: 16px;
+              height: 16px;
+              position: relative;
+              border: 1px solid #fff;
+              margin-right: 3px;
+              &::before {
+                content: "";
+                position: absolute;
+                top: 1px;
+                left: 3px;
+                width: 8px;
+                height: 12px;
+                background-color: #fff;
+              }
+            }
+            .inco2 {
+              &::before {
+                content: "";
+                position: absolute;
+                top: 1px;
+                left: 1px;
+                width: 12px;
+                height: 12px;
+                background-color: #fff;
+              }
+            }
+          }
+          .active {
+            opacity: 1;
+            background-color: #0076f6;
+          }
+        }
+      }
+    }
+  }
+  .coverImgBacBox {
+    margin-top: 16px;
+    .tit {
+      font-size: 14px;
+      opacity: 0.5;
+      margin-bottom: 10px;
+    }
+  }
+  .imgColorSelec {
+    cursor: pointer;
+    width: 300px;
+    height: 36px;
+    margin-top: 10px;
+    background: #1a1b1d;
+    border-radius: 4px;
+    border: 1px solid #404040;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 12px;
+    align-items: center;
+    position: relative;
+    .rr {
+      width: 20px;
+      height: 20px;
+    }
+    /deep/.el-color-picker {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 10;
+      width: 298px;
+      height: 36px;
+    }
+    /deep/.el-color-picker__trigger {
+      opacity: 0;
+      width: 298px;
+      height: 36px;
+    }
+  }
+  .imgClolrBacImg {
+    margin-top: 10px;
+    width: 334px;
+    display: flex;
+    .ui-remark {
+      margin: 12px 0;
+      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>

packages/qjkankan-editor/src/views/base/coverBase.vue

@@ -63,7 +63,7 @@ pc端视频位置 videoPcLoc
 	before：开场图片前
 	later：开场图片后
  -->
-  <div class="coverBase">
+  <div class="coverBase" v-if="info.coverInfo">
     <!-- 顶上标题 -->
     <span class="title">{{ coverBase_button }}</span>
     <i
@@ -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="info.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="info.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: info.coverInfo.coverPcLoc === 'centen' }"
+                    @click="info.coverInfo.coverPcLoc = 'centen'"
                   >
                     <div class="inco"></div>
                     <div class="txt">{{ coverImgLoc1 }}</div>
                   </div>
                   <div
-                    :class="{ active: coverPcLoc === 'full' }"
-                    @click="coverPcLoc = 'full'"
+                    :class="{ active: info.coverInfo.coverPcLoc === 'full' }"
+                    @click="info.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: info.coverInfo.coverMoLoc === 'centen' }"
+                    @click="info.coverInfo.coverMoLoc = 'centen'"
                   >
                     <div class="inco"></div>
                     <div class="txt">{{ coverImgLoc1 }}</div>
                   </div>
                   <div
-                    :class="{ active: coverMoLoc === 'full' }"
-                    @click="coverMoLoc = 'full'"
+                    :class="{ active: info.coverInfo.coverMoLoc === 'full' }"
+                    @click="info.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="info.coverInfo.coverImgBac">
             <Option
               v-for="item in coverImgBacList"
               :key="item.type"
@@ -198,23 +198,29 @@ pc端视频位置 videoPcLoc
             </Option>
           </Select>
           <!-- 选择颜色 -->
-          <div class="imgColorSelec" v-show="coverImgBac === 'colorFill'">
-            <div class="ll">{{ imgColorSelec }}</div>
+          <div
+            class="imgColorSelec"
+            v-show="info.coverInfo.coverImgBac === 'colorFill'"
+          >
+            <div class="ll">{{ info.coverInfo.imgColorSelec }}</div>
             <div
               class="rr"
-              :style="`background-color: ${imgColorSelec};`"
+              :style="`background-color: ${info.coverInfo.imgColorSelec};`"
             ></div>
             <ColorPicker
               @change="imgColorSelecChange"
-              v-model="imgColorSelec"
+              v-model="info.coverInfo.imgColorSelec"
               :predefine="predefineColors"
             >
             </ColorPicker>
           </div>
           <!-- 选择背景图片 -->
-          <div class="imgClolrBacImg" v-show="coverImgBac === 'imgTile'">
+          <div
+            class="imgClolrBacImg"
+            v-show="info.coverInfo.coverImgBac === 'imgTile'"
+          >
             <SelectedImage
-              :imgSrc="info.coverBac"
+              :imgSrc="info.coverInfo.coverBac"
               :defaultImgSrc="require('@/assets/img/coverUpTit1.png')"
               @cancel="onCancelBac"
             ></SelectedImage>
@@ -241,7 +247,7 @@ pc端视频位置 videoPcLoc
       </div>
 
       <!-- 关于视频 -->
-      <div class="mainVideoBox" v-show="coverSelect !== 'img'">
+      <div class="mainVideoBox" v-show="info.coverInfo.coverSelect !== 'img'">
         <div class="coverImgTit">
           {{ $i18n.t(`edit_settings.coverVideoTit`) }}
         </div>
@@ -251,7 +257,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 +282,15 @@ pc端视频位置 videoPcLoc
                 <!-- 选择居中和全屏 -->
                 <div class="coverImglocBox">
                   <div
-                    :class="{ active: videoPcLoc === 'centen' }"
-                    @click="videoPcLoc = 'centen'"
+                    :class="{ active: info.coverInfo.videoPcLoc === 'centen' }"
+                    @click="info.coverInfo.videoPcLoc = 'centen'"
                   >
                     <div class="inco"></div>
                     <div class="txt">{{ coverImgLoc1 }}</div>
                   </div>
                   <div
-                    :class="{ active: videoPcLoc === 'full' }"
-                    @click="videoPcLoc = 'full'"
+                    :class="{ active: info.coverInfo.videoPcLoc === 'full' }"
+                    @click="info.coverInfo.videoPcLoc = 'full'"
                   >
                     <div class="inco inco2"></div>
                     <div class="txt">{{ coverImgLoc2 }}</div>
@@ -298,7 +304,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 +329,15 @@ pc端视频位置 videoPcLoc
                 <!-- 选择居中和全屏 -->
                 <div class="coverImglocBox">
                   <div
-                    :class="{ active: videoMoLoc === 'centen' }"
-                    @click="videoMoLoc = 'centen'"
+                    :class="{ active: info.coverInfo.videoMoLoc === 'centen' }"
+                    @click="info.coverInfo.videoMoLoc = 'centen'"
                   >
                     <div class="inco"></div>
                     <div class="txt">{{ coverImgLoc1 }}</div>
                   </div>
                   <div
-                    :class="{ active: videoMoLoc === 'full' }"
-                    @click="videoMoLoc = 'full'"
+                    :class="{ active: info.coverInfo.videoMoLoc === 'full' }"
+                    @click="info.coverInfo.videoMoLoc = 'full'"
                   >
                     <div class="inco inco2"></div>
                     <div class="txt">{{ coverImgLoc2 }}</div>
@@ -345,7 +351,7 @@ pc端视频位置 videoPcLoc
         <!-- 视频背景设置 -->
         <div class="coverImgBacBox">
           <div class="tit">{{ $i18n.t(`edit_settings.coverImgBacTit`) }}</div>
-          <Select v-model="coverVideoBac">
+          <Select v-model="info.coverInfo.coverVideoBac">
             <Option
               v-for="item in coverImgBacList"
               :key="item.type"
@@ -355,23 +361,29 @@ pc端视频位置 videoPcLoc
             </Option>
           </Select>
           <!-- 选择颜色 -->
-          <div class="imgColorSelec" v-show="coverVideoBac === 'colorFill'">
-            <div class="ll">{{ videoColorSelec }}</div>
+          <div
+            class="imgColorSelec"
+            v-show="info.coverInfo.coverVideoBac === 'colorFill'"
+          >
+            <div class="ll">{{ info.coverInfo.videoColorSelec }}</div>
             <div
               class="rr"
-              :style="`background-color: ${videoColorSelec};`"
+              :style="`background-color: ${info.coverInfo.videoColorSelec};`"
             ></div>
             <ColorPicker
               @change="videoColorSelecChange"
-              v-model="videoColorSelec"
+              v-model="info.coverInfo.videoColorSelec"
               :predefine="predefineColors"
             >
             </ColorPicker>
           </div>
           <!-- 选择背景图片 -->
-          <div class="imgClolrBacImg" v-show="coverVideoBac === 'imgTile'">
+          <div
+            class="imgClolrBacImg"
+            v-show="info.coverInfo.coverVideoBac === 'imgTile'"
+          >
             <SelectedImage
-              :imgSrc="info.videoBacImg"
+              :imgSrc="info.coverInfo.videoBacImg"
               :defaultImgSrc="require('@/assets/img/coverUpTit1.png')"
               @cancel="onCancelBac2"
             ></SelectedImage>
@@ -406,7 +418,7 @@ pc端视频位置 videoPcLoc
           </div>
           <div class="VideoTitR">
             <Switcher
-              :value="coverVideoInWay"
+              :value="info.coverInfo.coverVideoInWay"
               @change="coverVideoInWayChange"
             ></Switcher>
           </div>
@@ -421,7 +433,7 @@ pc端视频位置 videoPcLoc
           </div>
           <div class="VideoTitR">
             <Switcher
-              :value="coverVideoControl"
+              :value="info.coverInfo.coverVideoControl"
               @change="coverVideoControlChange"
             ></Switcher>
           </div>
@@ -430,7 +442,7 @@ pc端视频位置 videoPcLoc
         <div class="coverImgTit">
           {{ $i18n.t(`edit_settings.coverVideoOrder`) }}
         </div>
-        <Select v-model="coverVideoOrder">
+        <Select v-model="info.coverInfo.coverVideoOrder">
           <Option
             v-for="item in coverVideoOrderList"
             :key="item.type"
@@ -493,19 +505,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 +552,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" },
@@ -545,108 +563,72 @@ export default {
       info: "info",
     }),
   },
-  watch: {
-    coverVideoOrder(val) {
-      this.info.coverVideoOrder = val;
-    },
-
-    coverSelect(val) {
-      this.info.coverSelect = val;
-    },
-    coverPcLoc(val) {
-      this.info.coverPcLoc = 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;
-    },
-  },
+  watch: {},
   methods: {
     // 视频的进入方式
     coverVideoInWayChange(val) {
-      this.coverVideoInWay = this.info.coverVideoInWay = val;
+      this.info.coverInfo.coverVideoInWay = val;
     },
     coverVideoControlChange(val) {
-      this.coverVideoControl = this.info.coverVideoControl = val;
+      this.info.coverInfo.coverVideoControl = val;
     },
     // 图片的颜色选择器改变事件
     imgColorSelecChange(val) {
-      this.imgColorSelec = val;
-      this.info.imgColorSelec = val;
+      this.info.coverInfo.imgColorSelec = val;
     },
     videoColorSelecChange(val) {
-      this.videoColorSelec = val;
-      this.info.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() {},
-  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];
-    });
+  created() {
+    if (!this.info.coverInfo) {
+      this.$store.commit("SetInfo", {
+        coverInfo: { ...this.coverInfo },
+        ...this.info,
+      });
+    }
+    // else{
+    //   this.coverInfo={...this.info.coverInfo}
+    // }
   },
+  mounted() {},
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前