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

<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="coverSelect">
        <Option
          v-for="item in selecList"
          :key="item.type"
          :label="item.txt"
          :value="item.type"
        >
        </Option>
      </Select>

      <!-- 关于图片 -->
      <div class="mainImgBox" v-show="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.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: coverPcLoc === 'centen' }"
                    @click="coverPcLoc = 'centen'"
                  >
                    <div class="inco"></div>
                    <div class="txt">{{ coverImgLoc1 }}</div>
                  </div>
                  <div
                    :class="{ active: coverPcLoc === 'full' }"
                    @click="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.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: coverMoLoc === 'centen' }"
                    @click="coverMoLoc = 'centen'"
                  >
                    <div class="inco"></div>
                    <div class="txt">{{ coverImgLoc1 }}</div>
                  </div>
                  <div
                    :class="{ active: coverMoLoc === 'full' }"
                    @click="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="coverImgBac">
            <Option
              v-for="item in coverImgBacList"
              :key="item.type"
              :label="item.txt"
              :value="item.type"
            >
            </Option>
          </Select>
          <!-- 选择颜色 -->
          <div class="imgColorSelec" v-show="coverImgBac === 'colorFill'">
            <div class="ll">{{ imgColorSelec }}</div>
            <div
              class="rr"
              :style="`background-color: ${imgColorSelec};`"
            ></div>
            <ColorPicker
              @change="imgColorSelecChange"
              v-model="imgColorSelec"
              :predefine="predefineColors"
            >
            </ColorPicker>
          </div>
          <!-- 选择背景图片 -->
          <div class="imgClolrBacImg" v-show="coverImgBac === 'imgTile'">
            <SelectedImage
              :imgSrc="info.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="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.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 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
        :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" },
      ],
      // 封面类型下拉框数据
      coverSelect: "img",
      // 图片pc端位置
      coverPcLoc: "centen",
      // 图片移动端位置
      coverMoLoc: "centen",
      // 图片的背景设置
      coverImgBac: "colorFill",
      coverImgBacList: [
        { txt: i18n.t("edit_settings.coverImgBacSelec1"), type: "colorFill" },
        { txt: i18n.t("edit_settings.coverImgBacSelec2"), type: "imgTile" },
      ],
      imgColorSelec: "#000000",
      predefineColors: [
        "#000000",
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
      ],

      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" },
      ],
    };
  },
  computed: {
    ...mapGetters({
      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;
    },
  },
  methods: {
    // 视频的进入方式
    coverVideoInWayChange(val) {
      this.coverVideoInWay = this.info.coverVideoInWay = val;
    },
    coverVideoControlChange(val) {
      this.coverVideoControl = this.info.coverVideoControl = val;
    },
    // 图片的颜色选择器改变事件
    imgColorSelecChange(val) {
      this.imgColorSelec = val;
      this.info.imgColorSelec = val;
    },
    videoColorSelecChange(val) {
      this.videoColorSelec = val;
      this.info.videoColorSelec = val;
    },
    handleSubmitFromMaterialSelector(selected) {
      // 点击确定的时候是选择的图片上传
      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 {
        // 视频上传
        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;
    },
    onCancelPcTip() {
      this.info.coverPc = "";
    },
    onCancelAppTip() {
      this.info.coverMo = "";
    },
    onCancelBac() {
      this.info.coverBac = "";
    },
    // 关于视频
    clearVideoPc() {
      this.info.videoPc = "";
    },
    claerVideoMo() {
      this.info.videoMo = "";
    },
    onCancelBac2() {
      this.info.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];
    });
  },
  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>