编辑器-基础-自定义按钮（以后还要改需求）

src/components/pulldownMenuInEditor.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="pull-down-menu-in-editor">
     <button class="menu-cover" @click="isExpand = !isExpand">
-      {{placeholder ? placeholder : valueList[currentIdx]}}
+      {{placeholder ? placeholder : valueList[value]}}
       <i class="iconfont icon-edit_input_arrow"></i>
     </button>
     <div class="menu" v-show="isExpand">
@@ -30,22 +30,20 @@ export default {
       type: String,
       default: '',
     },
-    defaultIdx: {
+    value: {
       type: Number,
       default: 0,
     }
   },
   data() {
     return {
-      currentIdx: this.defaultIdx,
       isExpand: false,
     }
   },
   methods: {
     onSelect(index) {
-      this.currentIdx = index
       this.isExpand = false
-      this.$emit('change', this.valueList[this.currentIdx])
+      this.$emit('input', index)
     }
   }
 }

src/framework/EditorMain.vue

@@ -27,7 +27,7 @@ import Toolbar from "./Toolbar";
 
 
 export default {
-  name: "app-main",
+  name: "editor-main",
   components: {
     AppMenu,
     Core,

src/pages/Edit.vue

@@ -9,8 +9,9 @@ import AppLayout from "@/framework/EditorAppLayout.vue";
 export default {
   components: {
     AppLayout
-  }
+  },
 };
+
 </script>
 <style lang="less">
 html,

src/utils/other.js

@@ -56,4 +56,25 @@ export function debounce(fn, delay, isImmediateCall = false) {
       }, delay)
     }
   }
+}
+
+/**
+同时验证⼿机号码和固定电话号码（带区号或不带区号或带分机号）
+
+规则说明：
+1、可以是1开头的11位数字（⼿机号）
+2、可以是“区号-电话号-分机号”或者是“(区号)电话号-分机号”格式
+3、区号是0开头的3～4位数字，可以没有区号
+4、电话号是5～8位数字，不能以0开头
+5、分机号是1～8位数字，可以没有分机号
+
+合法数据⽰例：
+①13812341234
+②010-12345678
+③(0432)1234567-1234
+④12345678
+ */
+export function isValidPhoneNumber(value) {
+  const reg = /^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/
+  return reg.test(value)
 }

src/views/base/customButtonSettings.vue

@@ -1,69 +1,179 @@
 <template>
   <div class="custom-button-settings">
     <span class="title">自定义按钮</span>
+
+    <!-- <iframe src="https://www.4dkankan.com/#/" frameborder="0" width="1280" height="960" style="transform: scale(10%); transform-origin: top left"></iframe> -->
+
     <i class="iconfont icon-material_prompt tool-tip-for-editor" v-tool-tip-wrapper>
       <TooltipInEditor
-        :text="'？？？？？？？？？？？？？？？？'"
-        :framePosLeft="'30px'"
-        :arrowPosLeft="'calc(50% - 24px)'"
+        :text="'自定义按钮可为作品添加联系方式或网站链接等，设置可见后即可在作品显示。'"
       ></TooltipInEditor>
     </i>
     <br/>
     
     <div class="button-setting-item" :class="{expand: isFirstSettingItemExpand}">
-      <div class="title-bar"
-        @click="isFirstSettingItemExpand = !isFirstSettingItemExpand"
-      >
+      <div class="title-bar">
         <div class="left">
-          <i class="iconfont icon-edit_input_arrow icon-expand"></i>
-          <img :src="require('@/assets/images/icons/phone.png')" class="button-icon" alt="">
-          <span class="button-name">公司电话</span>
+          <i
+            class="iconfont icon-edit_input_arrow icon-expand"
+            @click="isFirstSettingItemExpand = !isFirstSettingItemExpand"
+          ></i>
+          <img v-if="info.customButton.button1.type === '电话'" :src="require('@/assets/images/icons/phone.png')" class="button-icon" alt="">
+          <img v-if="info.customButton.button1.type === '链接'" :src="require('@/assets/images/icons/link.png')" class="button-icon" alt="">
+          <span class="button-name">
+            {{info.customButton.button1.name}}
+          </span>
         </div>
         <div class="right">
-          <i class="iconfont icon-editor_list_edit"></i>
-          <img class="eye-on" :src="require('@/assets/images/icons/eye_on.png')" alt="">
-          <img class="eye-off" :src="require('@/assets/images/icons/eye_off.png')" alt="">
+          <i
+            class="iconfont icon-editor_list_edit btn-edit"
+            @click="isFirstSettingItemExpand = !isFirstSettingItemExpand"
+            v-tool-tip-wrapper
+          >
+            <TooltipInEditor
+              :text="'编辑'"
+            ></TooltipInEditor>
+          </i>
+          <div
+            class="btn-show"
+            v-show="info.customButton.button1.isShow"
+            v-tool-tip-wrapper
+          >
+            <img
+              class="eye-on" :src="require('@/assets/images/icons/eye_on.png')" alt=""
+              @click="info.customButton.button1.isShow = !info.customButton.button1.isShow"
+            >
+            <TooltipInEditor
+              :text="'显示'"
+            ></TooltipInEditor>
+          </div>
+          <div
+            class="btn-hide"
+            v-show="!info.customButton.button1.isShow"
+            v-tool-tip-wrapper
+          >
+            <img
+              class="eye-off" :src="require('@/assets/images/icons/eye_off.png')" alt=""
+              @click="info.customButton.button1.isShow = !info.customButton.button1.isShow"
+            >
+            <TooltipInEditor
+              :text="'隐藏'"
+            ></TooltipInEditor>
+          </div>
         </div>
       </div>
       <div class="edit-content">
         <div class="edit-content-item">
           <span class="item-name">按钮名称</span>
-          <PulldownMenuInEditor class="selector"></PulldownMenuInEditor>
-          <input class="name-input" placeholder="请输入按钮名称">
+          <PulldownMenuInEditor
+            class="selector"
+            :valueList="buttonTypeList"
+            v-model="button1TypeIdx"
+          ></PulldownMenuInEditor>
+          <input
+            class="name-input"
+            placeholder="请输入按钮名称"
+            v-model="info.customButton.button1.name"
+            maxlength="15"
+            @blur="checkButtonName(info.customButton.button1.name)"
+          >
         </div>
         <div class="edit-content-item">
-          <span class="item-name">电话号码</span>
-          <input class="value-input" placeholder="请输入电话号码">
+          <span class="item-name">{{button1ValueTip}}</span>
+          <input
+            class="value-input"
+            :placeholder="`请输入${button1ValueTip}`"
+            v-model="info.customButton.button1.value"
+            @blur="checkButtonValue(info.customButton.button1.value, info.customButton.button1.type)"
+          >
         </div>
+        <iframe v-if="info.customButton.button1.type === '链接'" :src="info.customButton.button1.value" frameborder="0"
+          width="1920" height="930"
+        ></iframe>
       </div>
     </div>
 
     <div class="button-setting-item" :class="{expand: isSecondSettingItemExpand}">
       <div
         class="title-bar"
-        @click="isSecondSettingItemExpand = !isSecondSettingItemExpand"
       >
         <div class="left">
-          <i class="iconfont icon-edit_input_arrow icon-expand"></i>
-          <img :src="require('@/assets/images/icons/link.png')" class="button-icon" alt="">
-          <span class="button-name">链接</span>
+          <i
+            class="iconfont icon-edit_input_arrow icon-expand"
+            @click="isSecondSettingItemExpand = !isSecondSettingItemExpand"
+          ></i>
+          <img v-if="info.customButton.button2.type === '电话'" :src="require('@/assets/images/icons/phone.png')" class="button-icon" alt="">
+          <img v-if="info.customButton.button2.type === '链接'" :src="require('@/assets/images/icons/link.png')" class="button-icon" alt="">
+          <span class="button-name">
+            {{info.customButton.button2.name}}
+          </span>
         </div>
         <div class="right">
-          <i class="iconfont icon-editor_list_edit"></i>
-          <img class="eye-on" :src="require('@/assets/images/icons/eye_on.png')" alt="">
-          <img class="eye-off" :src="require('@/assets/images/icons/eye_off.png')" alt="">
+          <i
+            class="iconfont icon-editor_list_edit btn-edit"
+            @click="isSecondSettingItemExpand = !isSecondSettingItemExpand"
+            v-tool-tip-wrapper
+          >
+            <TooltipInEditor
+              :text="'编辑'"
+            />
+          </i>
+          <div
+            class="btn-show"
+            v-show="info.customButton.button2.isShow"
+              v-tool-tip-wrapper
+          >
+            <img
+              class="eye-on" :src="require('@/assets/images/icons/eye_on.png')" alt=""
+              @click="info.customButton.button2.isShow = !info.customButton.button2.isShow"
+            >
+            <TooltipInEditor
+              :text="'显示'"
+            />
+          </div>
+          <div
+            v-show="!info.customButton.button2.isShow"
+            v-tool-tip-wrapper
+            class="btn-hide"
+          >
+            <img
+              class="eye-off" :src="require('@/assets/images/icons/eye_off.png')" alt=""
+              @click="info.customButton.button2.isShow = !info.customButton.button2.isShow"
+            >
+            <TooltipInEditor
+              :text="'隐藏'"
+            />
+          </div>
         </div>
       </div>
       <div class="edit-content">
         <div class="edit-content-item">
-          <span class="item-name" placeholder="请输入按钮名称">按钮名称</span>
-          <PulldownMenuInEditor class="selector"></PulldownMenuInEditor>
-          <input class="name-input">
+          <span class="item-name">按钮名称</span>
+          <PulldownMenuInEditor
+            class="selector"
+            :valueList="buttonTypeList"
+            v-model="button2TypeIdx"
+          ></PulldownMenuInEditor>
+          <input
+            class="name-input"
+            placeholder="请输入按钮名称"
+            v-model="info.customButton.button2.name"
+            maxlength="15"
+            @blur="checkButtonName(info.customButton.button2.name)"
+          >
         </div>
         <div class="edit-content-item">
-          <span class="item-name">电话号码</span>
-          <input class="value-input" placeholder="请输入电话号码">
+          <span class="item-name">{{button2ValueTip}}</span>
+          <input
+            class="value-input"
+            :placeholder="`请输入${button2ValueTip}`"
+            v-model="info.customButton.button2.value"
+            @blur="checkButtonValue(info.customButton.button2.value, info.customButton.button2.type)"
+          >
         </div>
+        <iframe v-if="info.customButton.button2.type === '链接'" :src="info.customButton.button2.value" frameborder="0"
+          width="1920" height="930"
+        ></iframe>
       </div>
     </div>
   </div>
@@ -73,6 +183,7 @@
 import { mapGetters } from "vuex";
 import TooltipInEditor from '@/components/TooltipInEditor.vue'
 import PulldownMenuInEditor from "@/components/pulldownMenuInEditor.vue";
+import { isValidPhoneNumber } from "@/utils/other.js";
 
 export default {
   components: {
@@ -83,14 +194,78 @@ export default {
     return {
       isFirstSettingItemExpand: false,
       isSecondSettingItemExpand: false,
+      buttonTypeList: [
+        '电话',
+        '链接',
+      ],
+      button1TypeIdx: 0,
+      button2TypeIdx: 1,
     }
   },
   computed: {
     ...mapGetters({
       info:'info'
-    })
+    }),
+    button1ValueTip() {
+      if (this.buttonTypeList[this.button1TypeIdx] === '电话') {
+        return '电话号码'
+      } else if (this.buttonTypeList[this.button1TypeIdx] === '链接') {
+        return '链接地址'
+      } else {
+        return ''
+      }
+    },
+    button2ValueTip() {
+      if (this.buttonTypeList[this.button2TypeIdx] === '电话') {
+        return '电话号码'
+      } else if (this.buttonTypeList[this.button2TypeIdx] === '链接') {
+        return '链接地址'
+      } else {
+        return ''
+      }
+    },
+  },
+  watch: {
+    button1TypeIdx: {
+      handler(vNew, vOld) {
+        this.info.customButton.button1.type = this.buttonTypeList[vNew]
+        // 如果按钮名称使用的是默认名称
+        if (this.info.customButton.button1.name === this.buttonTypeList[vOld]) {
+          // 按钮名称改为新按钮类型对应的默认名称
+          this.info.customButton.button1.name = this.buttonTypeList[vNew]
+        }
+        this.info.customButton.button1.value = ''
+      }
+    },
+    button2TypeIdx: {
+      handler(vNew, vOld) {
+        this.info.customButton.button2.type = this.buttonTypeList[vNew]
+        // 如果按钮名称使用的是默认名称
+        if (this.info.customButton.button2.name === this.buttonTypeList[vOld]) {
+          // 按钮名称改为新按钮类型对应的默认名称
+          this.info.customButton.button2.name = this.buttonTypeList[vNew]
+        }
+        this.info.customButton.button2.value = ''
+      }
+    }
   },
   methods: {
+    checkButtonName(name) {
+      if (!name) {
+        this.$msg.warning('请填写完整信息')
+      }
+    },
+    checkButtonValue(value, type) {
+      if (type === '电话') {
+        if (!isValidPhoneNumber(value)) {
+          this.$msg.warning('请正确填写电话号码')
+        }
+      } else if (type === '链接') {
+        if (!value) {
+          this.$msg.warning('请填写完整信息')
+        }
+      }
+    }
   }
 }
 </script>
@@ -133,6 +308,7 @@ export default {
           font-size: 10px;
           color: rgba(255, 255, 255, 0.6);
           transform: rotate(-90deg);
+          cursor: pointer;
         }
         > .button-icon {
           width: 36px;
@@ -146,16 +322,29 @@ export default {
       > .right {
         display: flex;
         align-items: center;
-        > i {
+        i.btn-edit {
           margin-left: 16px;
+          cursor: pointer;
+          &:hover {
+            color: #0076F6;
+          }
         }
-        > .eye-on {
-          display: none;
+        > .btn-show {
           margin-left: 16px;
+          cursor: pointer;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          img {
+            height: 100%;
+          }
         }
-        > .eye-off {
-          display: inline-block;
+        > .btn-hide {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
           margin-left: 16px;
+          cursor: pointer;
         }
       }
     }
@@ -207,6 +396,13 @@ export default {
           }
         }
       }
+      > iframe {
+        width: 1920;
+        transform-origin: top left;
+        transform: scale(calc(737 / 1920));
+        background: #fff;
+        margin-top: 16px;
+      }
     }
   }
   > .button-setting-item.expand {
@@ -215,18 +411,6 @@ export default {
         > .icon-expand {
           transform: rotate(0deg);
         }
-        > .button-icon {
-        }
-        > .button-name {
-        }
-      }
-      > .right {
-        > .eye-on {
-          display: inline-block;
-        }
-        > .eye-off {
-          display: none;
-        }
       }
     }
     > .edit-content {

src/views/base/customMaskSettings.vue

@@ -4,8 +4,6 @@
     <i class="iconfont icon-material_prompt tool-tip-for-editor" v-tool-tip-wrapper>
       <TooltipInEditor
         :text="'天空遮罩显示在场景的顶部，地面遮罩显示在场景的底部。'"
-        :framePosLeft="'30px'"
-        :arrowPosLeft="'calc(50% - 24px)'"
       ></TooltipInEditor>
     </i>
     <br>

src/views/base/index.vue

@@ -4,17 +4,25 @@
     <!-- 左侧 -->
     <setting></setting>
     <!-- 中间 -->
-    <toolbar></toolbar>
+    <toolbar v-if="info"></toolbar>
   </div>
 </template>
+
 <script>
 import Setting from "./Setting";
 import Toolbar from "./Toolbar";
+import { mapGetters } from "vuex";
+
 export default {
   name: "EditorBase",
   components: {
     Setting,
     Toolbar
+  },
+  computed: {
+    ...mapGetters({
+      info: 'info'
+    }),
   }
 };
 </script>

src/views/base/openingTipSettings.vue

@@ -4,8 +4,6 @@
     <i class="iconfont icon-material_prompt tool-tip-for-editor" v-tool-tip-wrapper>
       <TooltipInEditor
         :text="'开场提示仅适用于全景图。若初始场景为三维模\n型，以下开场提示不适用。'"
-        :framePosLeft="'30px'"
-        :arrowPosLeft="'calc(50% - 24px)'"
       ></TooltipInEditor>
     </i>
     <br>