upp

packages/qjkankan-editor/src/lang/_en.json

@@ -668,6 +668,11 @@
     "coverImgBacTit":"背景设置",
     "coverImgBacSelec1":"纯色填充",
     "coverImgBacSelec2":"图片平铺",
+    "coverVideoTit":"视频设置",
+    "select_video":"选择视频",
+
+
+
 
     "auto_pano": "Rotation",
     "enter_auto": "Enter the rotation mode (takes 3 mins to complete per rotation)",

packages/qjkankan-editor/src/lang/_zh.json

@@ -679,6 +679,9 @@
     "coverImgBacTit":"背景设置",
     "coverImgBacSelec1":"纯色填充",
     "coverImgBacSelec2":"图片平铺",
+    "coverVideoTit":"视频设置",
+    "select_video":"选择视频",
+
     
 
     "auto_pano": "自动巡游",

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

@@ -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')
+                  "
                 >
                   {{ $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')
                   "
                 >
                   {{ $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>
@@ -133,6 +139,7 @@
               :style="`background-color: ${imgColorSelec};`"
             ></div>
             <ColorPicker
+              show-alpha
               @change="imgColorSelecChange"
               v-model="imgColorSelec"
               :predefine="predefineColors"
@@ -150,7 +157,11 @@
             <div class="imgRight">
               <button
                 class="ui-button submit"
-                @click="(isShowSelectionWindow = true), (selectingFor = 'bac')"
+                @click="
+                  (isShowSelectionWindow = true),
+                    (selectingFor = 'bac'),
+                    (upType = 'image')
+                "
               >
                 {{ $i18n.t(`edit_settings.select_image`) }}
               </button>
@@ -161,7 +172,108 @@
             </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')
+                  "
+                >
+                  {{ $i18n.t(`edit_settings.select_video`) }}
+                </button>
+                <!-- 上传提示 -->
+                <div
+                  class="ui-remark"
+                  v-html="$i18n.t(`edit_settings.coverUpTit1`)"
+                ></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')
+                  "
+                >
+                  {{ $i18n.t(`edit_settings.select_video`) }}
+                </button>
+                <!-- 上传提示 -->
+                <div
+                  class="ui-remark"
+                  v-html="$i18n.t(`edit_settings.coverUpTit2`)"
+                ></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>
     </div>
     <div class="dialog" style="z-index: 2000" v-if="isShowSelectionWindow">
       <MaterialSelectorForEditor
@@ -169,7 +281,8 @@
         :isMultiSelection="false"
         @cancle="isShowSelectionWindow = false"
         @submit="handleSubmitFromMaterialSelector"
-        :selectableType="['image']"
+        :selectableType="[upType]"
+        :initialMaterialType="upType"
       />
     </div>
   </div>
@@ -199,6 +312,8 @@ export default {
       coverImgLoc1: i18n.t("edit_settings.coverImgLoc1"),
       coverImgLoc2: i18n.t("edit_settings.coverImgLoc2"),
 
+      upType: "",
+
       selecList: [
         {
           txt: i18n.t("edit_settings.coverSelecVideoAndImg"),
@@ -210,9 +325,9 @@ export default {
       // 封面类型下拉框数据
       SelectValue: "videoAndImg",
       // 图片pc端位置
-      imgLoc1: "centen",
+      coverPcLoc: "centen",
       // 图片移动端位置
-      imgLoc2: "centen",
+      coverMoLoc: "centen",
       // 图片的背景设置
       coverImgBac: "colorFill",
       coverImgBacList: [
@@ -233,6 +348,14 @@ export default {
 
       isShowSelectionWindow: false,
       selectingFor: "", // 'pc', 'mobile'
+
+      // 有关上传视频
+      // 视频pc端位置
+      videoPcLoc: "centen",
+      // 视频移动端位置
+      videoMoLoc: "centen",
+      // 视频的背景设置
+      coverVideoBac: "colorFill",
     };
   },
   computed: {
@@ -244,15 +367,21 @@ 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;
     },
+    videoPcLoc(val) {
+      this.info.videoPcLoc = val;
+    },
+    videoMoLoc(val) {
+      this.info.videoMoLoc = val;
+    },
   },
   methods: {
     // 图片的颜色选择器改变事件
@@ -261,12 +390,17 @@ export default {
       this.info.imgColorSelec = 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.upType === "image") {
+        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;
       }
       this.isShowSelectionWindow = false;
     },
@@ -279,12 +413,19 @@ export default {
     onCancelBac() {
       this.info.coverBac = "";
     },
+    // 关于视频
+    clearVideoPc() {
+      this.info.videoPc = "";
+    },
+    claerVideoMo() {
+      this.info.videoMo = "";
+    },
   },
   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;
   },