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

<template>
  <div class="custom-button-settings">
    <span class="title">{{ custom_button }}</span>


    <i class="iconfont icon-material_prompt tool-tip-for-editor" v-tooltip="custom_button_tips">
    </i>
    <br />

    <div v-for="(item, index) of info.customButton" :key="index" class="button-setting-item"
      :class="{ expand: expandStatus[index] }">
      <div class="title-bar" :class="info.customButton[index].isShow ? 'bright' : 'dark'"
        @click="onRequestForChangeExpandStatus(index)">
        <div class="left">
          <i class="iconfont icon-edit_input_arrow icon-expand"></i>
          <img v-if="info.customButton[index].type === '电话' && info.customButton[index].isShow"
            :src="require('@/assets/images/icons/phone.svg')" class="button-icon" alt="">
          <img v-if="info.customButton[index].type === '电话' && !info.customButton[index].isShow"
            :src="require('@/assets/images/icons/phone-dark.svg')" class="button-icon" alt="">
          <img v-if="info.customButton[index].type === '链接' && info.customButton[index].isShow"
            :src="require('@/assets/images/icons/link.svg')" class="button-icon" alt="">
          <img v-if="info.customButton[index].type === '链接' && !info.customButton[index].isShow"
            :src="require('@/assets/images/icons/link-dark.svg')" class="button-icon" alt="">
          <span class="button-name">
            {{ buttonName[index] }}
            <!-- {{ info.customButton[index].name  }} -->
          </span>
        </div>
        <div class="right">
          <i class="iconfont icon-editor_list_edit btn-edit" @click.stop="onRequestForEdit(index)" v-tooltip="edittips">
          </i>
          <i v-show="info.customButton[index].isShow" class="iconfont icon-editor_on btn-show" v-tooltip="hidetips"
            @click.stop="info.customButton[index].isShow = false"></i>
          <i v-show="!info.customButton[index].isShow" class="iconfont icon-editor_off btn-hide" v-tooltip="showtips"
            @click.stop="onRequestForShow(index)"></i>
        </div>
      </div>
      <div class="edit-content">
        <div class="edit-content-item">
          <span class="item-name">{{ button_name }}</span>
          <PulldownMenuInEditor class="selector" :valueList="buttonTypeList" v-model="info.customButton[index].type">
          </PulldownMenuInEditor>
          <input class="name-input" :placeholder="button_placeholder" v-model="info.customButton[index].name"
            maxlength="15">
        </div>
        <div class="edit-content-item">
          <span class="item-name">{{ buttonValueTips[index] }}</span>
          <input class="value-input" v-model="info.customButton[index].value">
        </div>
      </div>
    </div>

    <popup v-if="isEditing" :canClose="false">
      <div class="ui-message ui-message-confirm dark edit-window">
        <div class="ui-message-header">
          <span>{{ custom_button }}</span>
          <span @click="isEditing = false">
            <i class="iconfont icon_close"></i>
          </span>
        </div>

        <div class="ui-message-main">
          <div class="edit-content-item">
            <span class="item-name">{{ button_name }}</span>
            <PulldownMenuInEditor class="selector" :valueList="buttonTypeList" v-model="editingInfo.type">
            </PulldownMenuInEditor>
            <input class="name-input" :placeholder="button_placeholder" v-model="editingInfo.name" maxlength="15">
          </div>
          <div class="edit-content-item">
            <span class="item-name">{{ editingButtonValueTip }}</span>
            <input class="value-input" :placeholder="`${please_input}${editingButtonValueTip}`"
              v-model="editingInfo.value">
          </div>
        </div>

        <div class="ui-message-footer">
          <button class="ui-button deepcancel" @click="isEditing = false">
            {{ canceltips }}
          </button>
          <button class="ui-button submit" @click="onConfirmEditing">
            {{ comfirmtips }}
          </button>
        </div>
      </div>
    </popup>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import PulldownMenuInEditor from "@/components/pulldownMenuInEditor.vue";
import { isValidPhoneNumber } from "@/utils/other.js";
import Popup from "@/components/shared/popup/index.vue";
import { i18n } from "@/lang"


export default {
  components: {
    PulldownMenuInEditor,
    Popup,
  },
  data() {
    return {
      custom_button: i18n.t("edit_settings.custom_button"),
      custom_button_tips: i18n.t("edit_settings.custom_button_tips"),
      edittips: i18n.t("edit_settings.edit"),
      hidetips: i18n.t("edit_settings.hide"),
      showtips: i18n.t("edit_settings.show"),
      button_name: i18n.t("edit_settings.button_name"),
      button_placeholder: i18n.t("edit_settings.button_placeholder"),
      please_input: i18n.t("edit_settings.please_input"),

      canceltips: i18n.t("gather.cancel"),
      comfirmtips: i18n.t("gather.comfirm"),

      expandStatus: [],
      buttonTypeList: [
        '电话',
        '链接',
      ],
      isEditing: false,
      editingButtonIdx: -1,
      isIgnoreTypeChangeWhenEditing: false,
      editingInfo: {
        type: '',
        name: '',
        value: '',
      }
    }
  },
  computed: {
    ...mapGetters({
      info: 'info'
    }),
    buttonValueTips() {
      if (this.info.customButton) {
        return this.info.customButton.map((item) => {
          if (item.type === '电话') {
            return i18n.t("edit_settings.phone")
          } else if (item.type === '链接') {
            return i18n.t("edit_settings.link")
          } else {
            return ''
          }
        })
      } else {
        return null
      }
    },

    buttonName() {
      if (this.info.customButton) {
        return this.info.customButton.map((item) => {
          if (item.type === '电话') {
            return i18n.t("edit_settings.phone_short")
          } else if (item.type === '链接') {
            return i18n.t("edit_settings.link_short")
          } else {
            return ''
          }
        })
      } else {
        return null
      }
    },
    editingButtonValueTip() {
      if (this.editingInfo.type === '电话') {
        return i18n.t("edit_settings.phone")
      } else if (this.editingInfo.type === '链接') {
        return i18n.t("edit_settings.link")
      } else {
        return ''
      }
    },
  },
  watch: {
    'editingInfo.type': {
      handler(vNew) {
        if (!this.isIgnoreTypeChangeWhenEditing) {
          console.log(vNew);
          this.editingInfo.name = i18n.t(`zh_key.${vNew}`)
          this.editingInfo.value = ''
        }
        this.isIgnoreTypeChangeWhenEditing = false
      }
    },
  },
  beforeMount() {
    if (!this.info.customButton) {
      // 这是在v1.2版之前创建的作品，还没设置过自定义按钮，所以还没有customButton字段
      this.info.customButton = [
        {
          "type": "电话",
          "name": "电话",
          "value": "",
          "isShow": false
        },
        {
          "type": "链接",
          "name": "链接",
          "value": "",
          "isShow": false
        }
      ]
    }
  },
  methods: {
    onRequestForChangeExpandStatus(index) {
      this.$set(this.expandStatus, index, !this.expandStatus[index])
    },
    onRequestForEdit(index) {
      this.editingButtonIdx = index
      this.isIgnoreTypeChangeWhenEditing = true,
      this.editingInfo.type = this.info.customButton[index].type
      this.editingInfo.name = this.info.customButton[index].name
      this.editingInfo.value = this.info.customButton[index].value
      this.isEditing = true
    },
    checkButtonName(name) {
      if (!name) {
        this.$msg.warning(i18n.t('gather.fill_complete'))
        return false
      }
      return true
    },
    checkButtonValue(value, type) {
      if (type === '电话') {
        if (!isValidPhoneNumber(value)) {
          this.$msg.warning(i18n.t('gather.fill_phone'))
          return false
        }
      } else if (type === '链接') {
        if (!value) {
          this.$msg.warning(i18n.t('gather.fill_complete'))
          return false
        }
      }
      return true
    },
    onConfirmEditing() {
      if (!this.checkButtonName(this.editingInfo.name)) {
        return
      }
      if (!this.checkButtonValue(this.editingInfo.value, this.editingInfo.type)) {
        return
      }
      this.info.customButton[this.editingButtonIdx].type = this.editingInfo.type
      this.info.customButton[this.editingButtonIdx].name = this.editingInfo.name
      this.info.customButton[this.editingButtonIdx].value = this.editingInfo.value
      this.$msg.success(i18n.t('gather.success'))
      this.isEditing = false
    },
    onRequestForShow(index) {
      if (!this.checkButtonName(this.info.customButton[index].name)) {
        return
      }
      if (!this.checkButtonValue(this.info.customButton[index].value, this.info.customButton[index].type)) {
        return
      }
      this.info.customButton[index].isShow = true
    }
  },
  mounted() {
    this.info.customButton.forEach(item=>{
      item.name = i18n.t(`zh_key.${item.name}`).indexOf('zh_key')>-1?item.name:i18n.t(`zh_key.${item.name}`)
    })
  },
}
</script>

<style lang="less" scoped>
.custom-button-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;
  }

  >.button-setting-item {
    margin-top: 16px;
    position: relative;
    min-height: 50px;

    >.title-bar {
      position: absolute;
      width: 100%;
      height: 50px;
      background: #1A1B1D;
      border-radius: 2px;
      border: 1px solid #404040;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 16px;
      cursor: pointer;

      &.bright {
        color: #fff;
      }

      &.dark {
        color: #808080;
      }

      >.left {
        display: flex;
        align-items: center;

        >.icon-expand {
          font-size: 10px;
          color: rgba(255, 255, 255, 0.6);
          transform: rotate(-90deg);
          cursor: pointer;
        }

        >.button-icon {
          width: 18px;
          height: 18px;
          margin-left: 6px;
        }

        >.button-name {
          font-size: 16px;
          margin-left: 6px;
        }
      }

      >.right {
        display: flex;
        align-items: center;

        i.btn-edit {
          margin-left: 16px;
          cursor: pointer;

          &:hover {
            color: #0076F6;
          }
        }

        >.btn-show {
          margin-left: 16px;
          cursor: pointer;

          &:hover {
            color: #0076F6;
          }
        }

        >.btn-hide {
          margin-left: 16px;
          cursor: pointer;

          &:hover {
            color: #0076F6;
          }
        }
      }
    }

    >.edit-content {
      border-radius: 2px;
      border: 1px solid #404040;
      padding-top: 58px;
      padding-bottom: 26px;
      display: none;
      pointer-events: none;

      >.edit-content-item {
        margin-top: 16px;
        display: flex;
        align-items: center;

        >.item-name {
          margin-left: 16px;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.5)
        }

        >.selector {
          margin-left: 16px;
        }

        >.name-input {
          height: 36px;
          background: transparent;
          border-radius: 2px;
          border: 1px solid #404040;
          color: #fff;
          font-size: 14px;
          padding: 0 16px;
          letter-spacing: 1px;
          width: 470px;

          &:focus {
            border-color: #0076F6;
          }
        }

        >.value-input {
          margin-left: 16px;
          height: 36px;
          background: transparent;
          border-radius: 2px;
          border: 1px solid #404040;
          color: #fff;
          font-size: 14px;
          padding: 0 16px;
          letter-spacing: 1px;
          width: 610px;

          &:focus {
            border-color: #0076F6;
          }
        }
      }
    }
  }

  >.button-setting-item.expand {
    >.title-bar {
      >.left {
        >.icon-expand {
          transform: rotate(0deg);
        }
      }
    }

    >.edit-content {
      display: block;
    }
  }

  .edit-window {
    width: 574px;

    >.ui-message-main {
      margin-bottom: 40px;

      >.edit-content-item {
        margin-top: 16px;
        display: flex;
        align-items: center;

        >.item-name {
          flex: 0 0 auto;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.5)
        }

        >.selector {
          margin-left: 16px;
        }

        >.name-input {
          height: 36px;
          background: #252526;
          border-radius: 2px;
          border: 1px solid #404040;
          color: #fff;
          font-size: 14px;
          padding: 0 16px;
          letter-spacing: 1px;
          width: 470px;

          &:focus {
            border-color: #0076F6;
          }
        }

        >.value-input {
          margin-left: 16px;
          height: 36px;
          background: #252526;
          border-radius: 2px;
          border: 1px solid #404040;
          color: #fff;
          font-size: 14px;
          padding: 0 16px;
          letter-spacing: 1px;
          width: 610px;

          &:focus {
            border-color: #0076F6;
          }
        }
      }
    }
  }
}
</style>