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

<template>
  <div class="custom-button-settings">
    <span class="title">{{ $i18n.t("edit_settings.custom_button") }}</span>

    <i
      class="iconfont icon-material_prompt tool-tip-for-editor"
      v-tooltip="$i18n.t(`edit_settings.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="item.isShow ? 'bright' : 'dark'"
        @click="onRequestForChangeExpandStatus(index)"
      >
        <!-- 新增的体验图片 -->
        <div class="experience">
          <img src="@/assets/img/experience.png" alt="" />
        </div>

        <div class="left">
          <i class="iconfont icon-edit_input_arrow icon-expand"></i>
          <img
            v-if="item.type === '电话' && item.isShow"
            :src="require('@/assets/images/icons/phone.svg')"
            class="button-icon"
            alt=""
          />
          <img
            v-if="item.type === '电话' && !item.isShow"
            :src="require('@/assets/images/icons/phone-dark.svg')"
            class="button-icon"
            alt=""
          />
          <img
            v-if="item.type === '链接' && item.isShow"
            :src="require('@/assets/images/icons/link.svg')"
            class="button-icon"
            alt=""
          />
          <img
            v-if="item.type === '链接' && !item.isShow"
            :src="require('@/assets/images/icons/link-dark.svg')"
            class="button-icon"
            alt=""
          />
          <span class="button-name">
            {{ getButtonTypeI18n(item.type) }}
          </span>
        </div>
        <div class="right">
          <i
            class="iconfont icon-editor_list_edit btn-edit"
            @click.stop="onRequestForEdit(index)"
            v-tooltip="$i18n.t(`edit_settings.edit`)"
          >
          </i>
          <i
            v-show="item.isShow"
            class="iconfont icon-editor_on btn-show"
            v-tooltip="$i18n.t(`edit_settings.hide`)"
            @click.stop="item.isShow = false"
          ></i>
          <i
            v-show="!item.isShow"
            class="iconfont icon-editor_off btn-hide"
            v-tooltip="$i18n.t(`edit_settings.show`)"
            @click.stop="onRequestForShow(index)"
          ></i>
        </div>
      </div>
      <div class="edit-content">
        <div class="edit-content-item">
          <span class="item-name">{{
            $i18n.t(`edit_settings.button_type`)
          }}</span>
          <div style="margin-left: 16px">
            {{ getButtonTypeI18n(item.type) }}
          </div>
        </div>
        <div class="edit-content-item">
          <span class="item-name">{{
            $i18n.t(`edit_settings.button_name`)
          }}</span>
          <div style="margin-left: 16px">
            {{ item.name }}
          </div>
        </div>
        <div class="edit-content-item">
          <span class="item-name">{{ buttonValueTips[index] }}</span>
          <div style="margin-left: 16px">
            {{ item.value }}
          </div>
        </div>
        <div class="edit-content-item" v-if="item.type !== '电话'">
          <span class="item-name"
            >{{ $i18n.t("edit_settings.button_open_method") }}</span
          >
          <div style="margin-left: 16px">
            {{ $i18n.t(`zh_key.${item.openMethod}`) }}
          </div>
        </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>{{ $i18n.t("edit_settings.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">{{
              $i18n.t(`edit_settings.button_name`)
            }}</span>
            <PulldownMenuInEditor
              class="selector"
              :valueList="buttonTypeList"
              v-model="editingInfo.type"
            />
            <input
              class="name-input"
              :placeholder="$i18n.t(`edit_settings.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="`${$i18n.t(
                `edit_settings.please_input`
              )}${editingButtonValueTip}`"
              v-model="editingInfo.value"
            />
          </div>
          <div class="edit-content-item full" v-if="!isNotPhoneMode">
            <span class="item-name">{{
              $i18n.t("edit_settings.button_open_method")
            }}</span>
            <PulldownMenuInEditor
              class="selector"
              :valueList="buttonOpenMethodList"
              v-model="editingInfo.openMethod"
            />
          </div>
        </div>

        <div class="ui-message-footer">
          <button class="ui-button deepcancel" @click="isEditing = false">
            {{ $i18n.t("gather.cancel") }}
          </button>
          <button class="ui-button submit" @click="onConfirmEditing">
            {{ $i18n.t("gather.comfirm") }}
          </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 {
      expandStatus: [],
      buttonTypeList: ["电话", "链接"],
      buttonOpenMethodList: ["弹出层打开", "新窗口打开"],
      isEditing: false,
      editingButtonIdx: -1,
      editingInfo: {
        type: "",
        name: "",
        value: "",
        openMethod: "",
      },
    };
  },
  computed: {
    ...mapGetters({
      info: "info",
    }),
    isNotPhoneMode() {
      //TODO 这个模块都有用中文做为key value （惊了？）
      return this.editingInfo.type === "电话";
    },
    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;
      }
    },
    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: {
    //   handler(val) {
    //     console.log("editingInfo-1", val);
    //   },
    //   immediate: true,
    //   deep: true,
    // },
    "editingInfo.type": {
      handler(newValue, oldValue) {
        this.editingInfo.name = i18n.t(`zh_key.${newValue}`);
        if (oldValue && newValue !== oldValue) {
          this.editingInfo.value = "";
        }
      },
    },
  },
  beforeMount() {
    if (!this.info.customButton) {
      // 这是在v1.2版之前创建的作品，还没设置过自定义按钮，所以还没有customButton字段
      this.info.customButton = [
        {
          type: "电话",
          name: "电话",
          value: "",
          openMethod: "弹出层打开",
          isShow: false,
        },
        {
          type: "链接",
          name: "链接",
          value: "",
          openMethod: "弹出层打开",
          isShow: false,
        },
      ];
    }
    if (!this.info.customButton[0].openMethod) {
      // 这是在v1.3版之前创建的作品，还没设置过自定义按钮的打开方式。
      this.info.customButton[0].openMethod = "弹出层打开";
      this.info.customButton[1].openMethod = "弹出层打开";
    }
  },
  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}`);
    });
  },
  methods: {
    getButtonTypeI18n(buttonType) {
      if (buttonType === "电话") {
        return i18n.t("edit_settings.phone_short");
      } else if (buttonType === "链接") {
        return i18n.t("edit_settings.link_short");
      } else {
        return "";
      }
    },
    onRequestForChangeExpandStatus(index) {
      this.$set(this.expandStatus, index, !this.expandStatus[index]);
    },
    onRequestForEdit(index) {
      this.editingButtonIdx = index;

      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.editingInfo.openMethod = this.info.customButton[index].openMethod;
      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;
    },
  },
};
</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 31px 0 16px;
      cursor: pointer;

      .experience {
        position: absolute;
        z-index: 10;
        top: 0;
        right: 0;
        & > img {
          width: 31px;
          height: 31px;
        }
      }

      &.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 {
          cursor: pointer;
          padding: 7px;
          &:hover {
            color: #0076f6;
          }
        }

        > .btn-show {
          margin-left: 9px;
          cursor: pointer;
          padding: 7px;

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

        > .btn-hide {
          margin-left: 9px;
          cursor: pointer;
          padding: 7px;

          &: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;
        &.full {
          .selector {
            width: 610px;
          }
        }
        > .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>