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

<template>
  <div class="opening-tip-settings">
    <span class="title">{{$i18n.t(`edit_settings.opening_tips_setting`)}}</span>
    <i class="iconfont icon-help_i tool-tip-for-editor" v-tooltip="$i18n.t(`edit_settings.opening_tips`)">
    </i>
    <br>
    <div class="image-selection">
      <div class="title">{{$i18n.t(`edit_settings.pc`)}}</div>
      <div class="bottom">
        <SelectedImage
          :imgSrc="info.pcIcon"
          :defaultImgSrc="require('@/assets/images/default/img_tipspc_default.png')"
          @cancel="onCancelPcTip"
        ></SelectedImage>
        <div class="bottom-right">
          <button class="ui-button submit" @click="isShowSelectionWindow = true, selectingFor = 'pc'">{{$i18n.t(`edit_settings.select_image`)}}</button>
          <div class="ui-remark" v-html="$i18n.t(`edit_settings.opening_size`)"></div>
        </div>
      </div>
    </div>
    <div class="image-selection">
      <div class="title">{{$i18n.t(`edit_settings.mobile`)}}</div>
      <div class="bottom">
        <SelectedImage
          :imgSrc="info.appIcon"
          :defaultImgSrc="require('@/assets/images/default/img_tipsmb_default.png')"
          @cancel="onCancelAppTip"
        ></SelectedImage>
        <div class="bottom-right">
          <button class="ui-button submit" @click="isShowSelectionWindow = true, selectingFor = 'mobile'">{{$i18n.t(`edit_settings.select_image`)}}</button>
          <div class="ui-remark" v-html="$i18n.t(`edit_settings.opening_size`)"></div>
        </div>
      </div>
    </div>

    <div class="title">{{$i18n.t(`edit_settings.show_setting`)}}</div>
    <div class="switch-wrapper">
        <span class="label">{{$i18n.t(`edit_settings.first_notice`)}}</span>
        <switcher :value="info.isRemind" @change="onSwitcherChange"></switcher>
    </div>
    <div class="range-wrapper">
      <RangeItem :value="rang" @input="onRangeChange" />
    </div>

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

<script>
import MaterialSelector from "@/components/materialSelector.vue";
import { mapGetters } from "vuex";
import Switcher from "@/components/shared/Switcher";
import RangeItem from "@/components/rangeItem/index.vue";
import SelectedImage from "@/components/selectedImageInEditor.vue";

export default {
  components: {
    MaterialSelector,
    Switcher,
    RangeItem,
    SelectedImage,
  },
  data() {
    return {
      isShowSelectionWindow: false,
      selectingFor: '', // 'pc', 'mobile'
      rang: {
        label: this.$i18n.t('edit_settings.display_time'),
        unit: this.$i18n.t('edit_settings.second'),
        value: 1,
        min: 0,
        max: 3,
        gradient: 1,
        tip:true
      }
    }
  },
  computed: {
    ...mapGetters({
      info:'info'
    })
  },

  mounted() {
    this.$nextTick(()=>{
      this.rang.value = this.info.remindTime
    })
  },
  methods: {
    handleSubmitFromMaterialSelector(selected) {
      if (this.selectingFor === 'pc') {
        this.info.pcIcon = selected[0].icon
        this.info.pcIconId = selected[0].id
      } else if (this.selectingFor === 'mobile') {
        this.info.appIcon = selected[0].icon
        this.info.appIconId = selected[0].id
      }
      this.isShowSelectionWindow = false
    },
    onCancelPcTip() {
      this.info.pcIcon = ''
      this.info.pcIconId = null
    },
    onCancelAppTip() {
      this.info.appIcon = ''
      this.info.appIconId = null
    },
    onSwitcherChange(data){
      this.info.isRemind = data
    },
    onRangeChange(data) {
      console.log(data.value);
      this.info.remindTime = parseInt(data.value)
    },
  }
}
</script>

<style lang="less" scoped>
.opening-tip-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;
        button {
          margin-bottom: 20px;
        }
        .ui-remark {
          font-size: 14px;
        }
      }
    }
  }
  .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;
    }
  }
  .range-wrapper {
    margin-top: 18px;
  }
}
</style>