|
@@ -0,0 +1,497 @@
|
|
|
+<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: [
|
|
|
+ 'phone_short',
|
|
|
+ 'link_short',
|
|
|
+ ],
|
|
|
+ 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 = vNew
|
|
|
+ this.editingInfo.value = ''
|
|
|
+ }
|
|
|
+ this.isIgnoreTypeChangeWhenEditing = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ beforeMount() {
|
|
|
+ if (!this.info.customButton) {
|
|
|
+ // 这是在v1.2版之前创建的作品,还没设置过自定义按钮,所以还没有customButton字段
|
|
|
+ this.info.customButton = [
|
|
|
+ {
|
|
|
+ "type": "phone",
|
|
|
+ "name": "电话",
|
|
|
+ "value": "",
|
|
|
+ "isShow": false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "type": "link",
|
|
|
+ "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>
|