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

<template>
  <div class="custom-button-settings">
    <span class="title">自定义按钮</span>


    <i class="iconfont icon-material_prompt tool-tip-for-editor" v-tooltip="'自定义按钮可为作品添加联系方式或网站链接等，设置可见后即可在作品显示。'">
    </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">
            {{info.customButton[index].name}}
          </span>
        </div>
        <div class="right">
          <i
            class="iconfont icon-editor_list_edit btn-edit"
            @click.stop="onRequestForEdit(index)"
            v-tooltip="'编辑'"
          >
          </i>
          <i
            v-show="info.customButton[index].isShow"
            class="iconfont icon-editor_on btn-show"
            v-tooltip="'隐藏'"
            @click.stop="info.customButton[index].isShow = false"
          ></i>
          <i
            v-show="!info.customButton[index].isShow"
            class="iconfont icon-editor_off btn-hide"
            v-tooltip="'显示'"
            @click.stop="onRequestForShow(index)"
          ></i>
        </div>
      </div>
      <div class="edit-content">
        <div class="edit-content-item">
          <span class="item-name">按钮名称</span>
          <PulldownMenuInEditor
            class="selector"
            :valueList="buttonTypeList"
            v-model="info.customButton[index].type"
          ></PulldownMenuInEditor>
          <input
            class="name-input"
            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>自定义按钮</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">按钮名称</span>
            <PulldownMenuInEditor
              class="selector"
              :valueList="buttonTypeList"
              v-model="editingInfo.type"
            ></PulldownMenuInEditor>
            <input
              class="name-input"
              placeholder="请输入按钮名称"
              v-model="editingInfo.name"
              maxlength="15"
            >
          </div>
          <div class="edit-content-item">
            <span class="item-name">{{editingButtonValueTip}}</span>
            <input
              class="value-input"
              :placeholder="`请输入${editingButtonValueTip}`"
              v-model="editingInfo.value"
            >
          </div>
        </div>

        <div class="ui-message-footer">
          <button class="ui-button deepcancel" @click="isEditing = false">
            取消
          </button>
          <button
            class="ui-button submit"
            @click="onConfirmEditing"
          >
            确定
          </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";

export default {
  components: {
    PulldownMenuInEditor,
    Popup,
  },
  data() {
    return {
      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 '电话号码'
          } else if (item.type === '链接') {
            return '链接地址'
          } else {
            return ''
          }
        })
      } else {
        return null
      }
    },
    editingButtonValueTip() {
      if (this.editingInfo.type === '电话') {
        return '电话号码'
      } else if (this.editingInfo.type === '链接') {
        return '链接地址'
      } else {
        return ''
      }
    },
  },
  watch: {
    'editingInfo.type': {
      handler(vNew) {
        if (!this.isIgnoreTypeChangeWhenEditing) {
          this.editingInfo.name = 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('请填写完整信息')
        return false
      }
      return true
    },
    checkButtonValue(value, type) {
      if (type === '电话') {
        if (!isValidPhoneNumber(value)) {
          this.$msg.warning('请正确填写电话号码')
          return false
        }
      } else if (type === '链接') {
        if (!value) {
          this.$msg.warning('请填写完整信息')
          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('操作成功')
      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
    }
  }
}
</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>