编辑器-热点-电话号类型的热点-电话号校验

packages/qjkankan-editor/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@qjkankan/editor",
-  "version": "1.2.0",
+  "version": "1.2.20230130.1026",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@qjkankan/editor",
-      "version": "1.2.0",
+      "version": "1.2.20230130.1026",
       "dependencies": {
         "@floating-ui/dom": "^0.5.4",
         "@wangeditor/editor-for-vue": "^1.0.2",
@@ -14,6 +14,7 @@
         "d3": "^7.8.0",
         "element-ui": "^2.15.1",
         "html2canvas": "^1.4.1",
+        "libphonenumber-js": "^1.10.19",
         "photoswipe": "^4.1.3",
         "quill": "^1.3.7",
         "swiper": "^5.3.8",
@@ -11178,6 +11179,11 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/libphonenumber-js": {
+      "version": "1.10.19",
+      "resolved": "https://registry.npmmirror.com/libphonenumber-js/-/libphonenumber-js-1.10.19.tgz",
+      "integrity": "sha512-MDZ1zLIkfSDZV5xBta3nuvbEOlsnKCPe4z5r3hyup/AXveevkl9A1eSWmLhd2FX4k7pJDe4MrLeQsux0HI/VWg=="
+    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmmirror.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -30131,6 +30137,11 @@
         "type-check": "~0.3.2"
       }
     },
+    "libphonenumber-js": {
+      "version": "1.10.19",
+      "resolved": "https://registry.npmmirror.com/libphonenumber-js/-/libphonenumber-js-1.10.19.tgz",
+      "integrity": "sha512-MDZ1zLIkfSDZV5xBta3nuvbEOlsnKCPe4z5r3hyup/AXveevkl9A1eSWmLhd2FX4k7pJDe4MrLeQsux0HI/VWg=="
+    },
     "lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmmirror.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz",

packages/qjkankan-editor/package.json

@@ -23,6 +23,7 @@
     "d3": "^7.8.0",
     "element-ui": "^2.15.1",
     "html2canvas": "^1.4.1",
+    "libphonenumber-js": "^1.10.19",
     "photoswipe": "^4.1.3",
     "quill": "^1.3.7",
     "swiper": "^5.3.8",

packages/qjkankan-editor/src/lang/_en.json

@@ -907,6 +907,7 @@
     "text_content": "文字内容",
     "apply_to_all": "应用到所有",
     "phone_placeholder": "请输入电话号码",
+    "phone_error_tip": "请输入正确的电话号码",
     "select_pdf": "添加PDF",
     "change_pdf": "更换PDF",
     "pdf_invalid_tip": "请选择50MB以内、PDF格式的文件",

packages/qjkankan-editor/src/lang/_zh.json

@@ -911,6 +911,7 @@
     "text_content": "文字内容",
     "apply_to_all": "应用到所有",
     "phone_placeholder": "请输入电话号码",
+    "phone_error_tip": "请输入正确的电话号码",
     "select_pdf": "添加PDF",
     "change_pdf": "更换PDF",
     "pdf_invalid_tip": "请选择50MB以内、PDF格式的文件",

packages/qjkankan-editor/src/views/hotspot/EditPanel.vue

@@ -164,6 +164,7 @@ import Switcher from "@/components/shared/Switcher.vue";
 import TabbarSwitcher from "@/components/shared/TabbarSwitcher.vue";
 import TabbarSwitcherIcon from "@/components/shared/TabbarSwitcherIcon.vue";
 import hotspotTypeList from "./hotspotTypeList.js";
+import { isValidPhoneNumber } from 'libphonenumber-js/max'
 
 export default {
   props: ['show', 'data', 'editTitle'],
@@ -335,7 +336,7 @@ export default {
           }
           break;
         case 'phone':
-          if (!this.hotspot.phoneInfo.phone) {
+          if (!isValidPhoneNumber(this.hotspot.phoneInfo.phone) && !isValidPhoneNumber('+86' + this.hotspot.phoneInfo.phone)) {
             return false
           }
           break;

packages/qjkankan-editor/src/views/hotspot/hotspotType/phone.vue

@@ -2,8 +2,11 @@
   <div class="phone-effect-setting">
     <div class="phone-input-wrapper">
       <input
-        v-model.trim="hotspot.phoneInfo.phone"
-        type="text"
+        ref="input"
+        :value="hotspot.phoneInfo.phone"
+        @input="onInput"
+        @blur="onInputBlur"
+        type="tel"
         :placeholder="$i18n.t('hotspot.phone_placeholder')"
       />
       <!-- <span class="count">{{ hotspot.hotspotTitle.length }}/15</span> -->
@@ -13,13 +16,31 @@
 
 <script>
 import { mapGetters } from "vuex";
+import { isValidPhoneNumber } from 'libphonenumber-js/max'
 
 export default {
+  data() {
+    return {
+    }
+  },
   computed: {
     ...mapGetters({
       hotspot: 'hotspot',
     }),
   },
+  methods: {
+    onInput(e) {
+      this.hotspot.phoneInfo.phone = this.$refs.input.value
+    },
+    onInputBlur() {
+      if (!isValidPhoneNumber(this.hotspot.phoneInfo.phone) && !isValidPhoneNumber('+86' + this.hotspot.phoneInfo.phone)) {
+        this.$msg({
+          message: this.$i18n.t('hotspot.phone_error_tip'),
+          type: 'error'
+        })
+      }
+    }
+  },
 }
 </script>