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

<template>
  <div class="custom-logo-settings">
    <span class="title">{{$i18n.t(`edit_settings.custom_logo`)}}</span>
    <br>
    <div class="switch-wrapper">
      <span class="label">{{$i18n.t(`edit_settings.show_logo`)}}</span>
      <Switcher :value="info.isLogo" @change="onSwitcherChange"></Switcher>
    </div>
    <div class="bottom" :class="{disabled: !info.isLogo}">
        <SelectedImage
          :imgSrc="info.logo"
          :defaultImgSrc="require(`@/assets/images/default/logo_white_${$lang}.svg`)"
          @cancel="onClickCancelCustomLogo"
        ></SelectedImage>
      <div class="bottom-right">
        <img 
          class="select-pic-btn"
          :src="require(`@/assets/images/select_pic_btn_${$lang}.png`)" alt=""
          @click="onClickSelectingPicBtn"
        >
        <!-- <button
          class="ui-button submit"
          @click="onClickSelectingPicBtn"
        >
          选择图片
        </button> -->
        <div class="remark" v-html="$i18n.t(`edit_settings.logo_size`)">
        </div>
      </div>
    </div>

    <div class="dialog" style="z-index: 2000" v-if="isShowSelectionWindow">
      <MaterialSelectorForEditor
        :title="$i18n.t(`gather.select_material`)"
        @cancle="isShowSelectionWindow = false"
        @submit="handleSubmitFromMaterialSelector"
        :selectableType="['image']"
      />
    </div>
  </div>
</template>

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

export default {
  components: {
    Switcher,
    MaterialSelectorForEditor,
    SelectedImage,
  },
  data() {
    return {
      password:'',
      canSee: false,
      isShowSelectionWindow: false,
    }
  },
  computed: {
    ...mapGetters({
      info:'info'
    })
  },
  methods: {
    onSwitcherChange(data) {
      this.info.isLogo = data
    },
    onClickSelectingPicBtn() {
      this.isShowSelectionWindow = true
      // getUserInfo((res) => {
      //   try {
      //     if (res.data.incrementNum > 0) {
      //       this.isShowSelectionWindow = true
      //     } else {
      //       // 非会员，点击跳转四维看看会员权益页。
      //       window.open('/#/mall/member')
      //     }
      //   } catch(e) {
      //     console.error('解析会员身份失败：', e)
      //   }
      // })
    },
    handleSubmitFromMaterialSelector(selected) {
      this.info.logo = selected[0].icon
      this.info.logoChange = true
      this.isShowSelectionWindow = false
    },
    onClickCancelCustomLogo() {
      this.info.logo = ''
      this.info.logoChange = false
    }
  },
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.custom-logo-settings {
  padding: 24px 30px;
  background: #252526;
  height: 546px;
  .title {
    font-size: 18px;
    color: #FFFFFF;
  }
  .switch-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    .label {
      color: rgba(255, 255, 255, 0.6);
      font-size: 14px;
    }
  }
  .bottom {
    margin-top: 19px;
    display: flex;
    align-items: flex-start;
    &.disabled {
      opacity: 0.5;
    }
    .img-wrapper {
      position: relative;
      width: 136px;
      height: 136px;
      border-radius: 4px;
      background: #1a1b1d;
      overflow: hidden;
      .logo-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .cancel-btn-background {
        width: 52px;
        height: 52px;
        position: absolute;
        top: -28px;
        right: -28px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        cursor: pointer;
        i {
          font-size: 12px;
          transform: scale(0.8);
          position: absolute;
          left: 9px;
          bottom: 9px;
        }
      }
    }
    .bottom-right {
      margin-left: 16px;
      .select-pic-btn {
        cursor: pointer;
      }
      .remark {
        margin-top: 20px;
        font-size: 14px;
        font-family: MicrosoftYaHei;
        color: rgba(255, 255, 255, 0.3);
        line-height: 19px;
      }
    }
  }
}
</style>