编辑器-基础-自定义遮罩

src/views/base/Toolbar.vue

@@ -65,6 +65,7 @@
         <AutoCruiseSettings v-show="activeTab === '自动巡游'"></AutoCruiseSettings>
         <BackgroundMusicSettings v-show="activeTab === '背景音乐'"></BackgroundMusicSettings>
         <CustomLogoSettings v-show="activeTab === '自定义LOGO'"></CustomLogoSettings>
+        <CustomMaskSettings v-show="activeTab === '自定义遮罩'"></CustomMaskSettings>
       </div>
     </div>
 
@@ -109,6 +110,7 @@ import PasswordSettings from "@/views/base/passwordSettings.vue";
 import AutoCruiseSettings from '@/views/base/autoCruiseSettings.vue'
 import BackgroundMusicSettings from "@/views/base/backgroundMusicSettings.vue";
 import CustomLogoSettings from "@/views/base/customLogoSettings.vue";
+import CustomMaskSettings from "@/views/base/customMaskSettings.vue";
 import Table from "@/components/tableSelect";
 import Table2 from "@/components/tableSelect2";
 import Select from "@/components/select";
@@ -127,6 +129,7 @@ export default {
     AutoCruiseSettings,
     BackgroundMusicSettings,
     CustomLogoSettings,
+    CustomMaskSettings,
   },
   data() {
     return {

src/views/base/customLogoSettings.vue

@@ -159,7 +159,6 @@ export default {
     }
     .bottom-right {
       margin-left: 16px;
-      padding-top: 3px;
       .select-pic-btn {
         cursor: pointer;
       }

src/views/base/customMaskSettings.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="custom-mask-settings">
+    <span class="title">遮罩设置</span>
+    <i class="iconfont icon-material_prompt tool-tip-for-editor" v-tool-tip-wrapper>
+      <TooltipInEditor
+        :text="'天空遮罩显示在场景的顶部，地面遮罩显示在场景的底部。'"
+        :framePosLeft="'30px'"
+        :arrowPosLeft="'calc(50% - 24px)'"
+      ></TooltipInEditor>
+    </i>
+    <br>
+    <div class="image-selection">
+      <div class="title">天空遮罩</div>
+      <div class="bottom">
+        <SelectedImage
+          :imgSrc="info && info.customMask && info.customMask.sky"
+          :defaultImgSrc="require('@/assets/images/default/mask_bg.png')"
+          @cancel="onCancelSelection('sky')"
+        ></SelectedImage>
+        <div class="bottom-right">
+          <img 
+            class="select-pic-btn"
+            :src="require('@/assets/images/select_pic_btn.png')" alt=""
+            @click="onSelectPic('sky')"
+          >
+          <div class="ui-remark">建议500*500px，<br/>支持jpg/png格式</div>
+        </div>
+      </div>
+    </div>
+    <div class="image-selection">
+      <div class="title">地面遮罩</div>
+      <div class="bottom">
+        <SelectedImage
+          :imgSrc="info && info.customMask && info.customMask.earth"
+          :defaultImgSrc="require('@/assets/images/default/mask_bg.png')"
+          @cancel="onCancelSelection('earth')"
+        ></SelectedImage>
+        <div class="bottom-right">
+          <img 
+            class="select-pic-btn"
+            :src="require('@/assets/images/select_pic_btn.png')" alt=""
+            @click="onSelectPic('earth')"
+          >
+          <div class="ui-remark">建议500*500px，<br/>支持jpg/png格式</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="dialog" style="z-index: 2000" v-if="isShowSelectionWindow">
+      <Table2
+        title="选择素材"
+        @cancle="isShowSelectionWindow = false"
+        @submit="handleSubmitFromTableSelect2"
+        :selectableType="['image']"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import TooltipInEditor from '@/components/TooltipInEditor.vue'
+import Table2 from "@/components/tableSelect2.vue";
+import { mapGetters } from "vuex";
+import SelectedImage from "@/components/selectedImageInEditor.vue";
+import { getUserInfo } from "@/api";
+
+export default {
+  components: {
+    TooltipInEditor,
+    Table2,
+    SelectedImage,
+  },
+  data() {
+    return {
+      isShowSelectionWindow: false,
+      selectingFor: '', // 'sky', 'earth'
+    }
+  },
+  computed: {
+    ...mapGetters({
+      info:'info'
+    })
+  },
+  methods: {
+    onSelectPic(selectingFor) {
+      getUserInfo((res) => {
+        try {
+          if (res.data.incrementNum > 0) {
+            this.selectingFor = selectingFor
+            this.isShowSelectionWindow = true
+          } else {
+            // 非会员，点击跳转四维看看会员权益页。
+            window.open('/#/mall/member')
+          }
+        } catch(e) {
+          console.error('解析会员身份失败：', e)
+        }
+      })
+    },
+    handleSubmitFromTableSelect2(selected) {
+      this.info.customMask[this.selectingFor] = selected[0].icon
+      this.isShowSelectionWindow = false
+    },
+    onCancelSelection(cancelFor) {
+      this.info.customMask[cancelFor] = ''
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.custom-mask-settings {
+  padding: 24px 30px;
+  background: #252526;
+  height: 546px;
+  .title {
+    font-size: 18px;
+    color: #FFFFFF;
+  }
+  .tool-tip-for-editor {
+    margin-left: 4px;
+    font-size: 12px;
+    cursor: default;
+    position: relative;
+    top: -2px;
+  }
+  .image-selection {
+    width: 50%;
+    display: inline-block;
+    margin-top: 16px;
+    margin-bottom: 24px;
+    .title {
+      color: rgba(255, 255, 255, 0.6);
+      font-size: 14px;
+      margin-bottom: 16px;
+    }
+    .bottom {
+      display: flex;
+      align-items: flex-start;
+      .bottom-right {
+        display: inline-block;
+        .select-pic-btn {
+          cursor: pointer;
+        }
+
+        .ui-remark {
+          margin-top: 20px;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
+</style>