qjkankan_shibadongcun/packages/qjkankan-editor/src/views/base/customMaskSettings.vue

<template>
  <div class="custom-mask-settings">
    <span class="title">遮罩设置</span>
    <i class="iconfont icon-material_prompt tool-tip-for-editor" v-tooltip="'天空遮罩显示在场景的顶部，地面遮罩显示在场景的底部。'">
    </i>
    <br>
    <div class="image-selection">
      <div class="title">
        <span class="label">天空遮罩</span>
        <Switcher :value="info.customMask.sky.isShow" @change="(data)=>{info.customMask.sky.isShow=data}"></Switcher>
      </div>
      <div class="bottom">
        <SelectedImage
          :imgSrc="info && info.customMask && info.customMask.sky.icon"
          :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')"
          > -->
          <button
            class="ui-button submit"
            @click="onSelectPic('sky')"
          >
            选择图片
          </button>
          <div class="ui-remark">建议500*500px，<br/>支持jpg/png格式</div>
        </div>
      </div>
    </div>
    <div class="image-selection">
      <div class="title">
        <span class="label">地面遮罩</span>
        <Switcher :value="info.customMask.earth.isShow"  @change="(data)=>{info.customMask.earth.isShow=data}"></Switcher>
      </div>
      <div class="bottom">
        <SelectedImage
          :imgSrc="info && info.customMask && info.customMask.earth.icon"
          :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')"
          > -->
          <button
            class="ui-button submit"
            @click="onSelectPic('earth')"
          >
            选择图片
          </button>
          <div class="ui-remark">建议500*500px，<br/>支持jpg/png格式</div>
        </div>
      </div>
    </div>

    <div class="dialog" style="z-index: 2000" v-if="isShowSelectionWindow">
      <MaterialSelectorForEditor
        title="选择素材"
        @cancle="isShowSelectionWindow = false"
        @submit="handleSubmitFromMaterialSelector"
        :selectableType="['image']"
      />
    </div>
  </div>
</template>

<script>
import MaterialSelectorForEditor from "@/components/materialSelectorForEditor.vue";
import Switcher from "@/components/shared/Switcher";
import { mapGetters } from "vuex";
import SelectedImage from "@/components/selectedImageInEditor.vue";
import { getUserInfo } from "@/api";

export default {
  components: {
    MaterialSelectorForEditor,
    SelectedImage,
    Switcher
  },
  data() {
    return {
      isShowSelectionWindow: false,
      selectingFor: '', // 'sky', 'earth'
    }
  },
  computed: {
    ...mapGetters({
      info:'info'
    })
  },
  methods: {
    onSelectPic(selectingFor) {
      this.selectingFor = selectingFor
      this.isShowSelectionWindow = true
      // getUserInfo((res) => {
      //   try {
      //     if (res.data.incrementNum > 0) {
      //       this.selectingFor = selectingFor
      //       this.isShowSelectionWindow = true
      //     } else {
      //       // 非会员，点击跳转四维看看会员权益页。
      //       window.open('/#/mall/member')
      //     }
      //   } catch(e) {
      //     console.error('解析会员身份失败：', e)
      //   }
      // })
    },
    handleSubmitFromMaterialSelector(selected) {
      this.info.customMask[this.selectingFor].icon = selected[0].icon
      this.isShowSelectionWindow = false
    },
    onCancelSelection(cancelFor) {
      this.info.customMask[cancelFor].icon = ''
    },
  },
  mounted() {
    if (!this.info.customMask) {
      this.info.customMask = {
        earth: {
          icon:'',
          isShow:false
        },
        sky:{
          icon:'',
          isShow:true
        },
      }
    }
  },
}
</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: 100%;
    display: inline-block;
    margin-top: 16px;
    margin-bottom: 24px;
    .title {
      color: rgba(255, 255, 255, 0.6);
      font-size: 14px;
      margin-bottom: 16px;
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
    }
    .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>