Kaynağa Gözat

feat: 移动端多个手机号选择新增ActionSheet

cuiyalong 1 yıl önce
ebeveyn
işleme
65f4d47206

+ 53 - 1
apps/mobile/src/views/article/components/ContentAbstract.vue

@@ -290,10 +290,18 @@
       <span class="highlight-text underline" @click="concatKf">联系客服</span>
       <span>进行处理。</span>
     </div>
+    <van-action-sheet
+      v-model="sheet.telSelect"
+      :actions="telSheetActions"
+      @select="telSheetSelect"
+      cancel-text="取消"
+      close-on-click-action
+      @cancel="onSheetCancel"
+    />
   </section>
 </template>
 <script>
-import { Icon } from 'vant'
+import { Icon, ActionSheet } from 'vant'
 import { mapState } from 'vuex'
 import { LINKS } from '@/data'
 import { openAppOrWxPage } from '@/utils/'
@@ -302,6 +310,7 @@ import { callPhone } from '@/utils/callFn'
 export default {
   name: 'ContentAbstract',
   components: {
+    [ActionSheet.name]: ActionSheet,
     [Icon.name]: Icon
   },
   props: {
@@ -311,6 +320,19 @@ export default {
     },
     beforeLeavePage: Function
   },
+  data() {
+    return {
+      sheet: {
+        telSelect: false,
+        
+      },
+      telSheetActions: [
+        // { name: '选项一', value: '1111' },
+        // { name: '选项二', value: '1111' },
+        // { name: '选项三', value: '1111' }
+      ]
+    }
+  },
   computed: {
     ...mapState({
       summary: (state) => state.article.mainModel.summary
@@ -361,9 +383,39 @@ export default {
       })
     },
     doCallPhone(tel) {
+      if (!tel) return
+      const replacer = /[,,、/]/
+      tel = tel + ''
+      // 1. 检查是否能够分割
+      const telArr = tel.split(replacer)
+      if (Array.isArray(telArr) && telArr.length > 1) {
+        this.telSheetActions = telArr.filter((t) => !!t).map((t) => {
+          return {
+            name: t,
+            value: t
+          }
+        })
+        this.showTelSheet()
+      } else {
+        this.callPhone(tel)
+      }
+    },
+    callPhone(tel) {
       if (!tel) return
       callPhone(tel)
     },
+    telSheetSelect(s) {
+      this.callPhone(s.value)
+    },
+    onSheetCancel() {
+      this.closeTelSheet()
+    },
+    showTelSheet() {
+      this.sheet.telSelect = true
+    },
+    closeTelSheet() {
+      this.sheet.telSelect = false
+    },
     async concatKf() {
       if (this.beforeLeavePage) {
         await this.beforeLeavePage()