完成电话拨打功能

src/components/custom-btn/custom-btn.vue

@@ -6,7 +6,11 @@
       props.subBtnText ? 'apposition-btn-style' : '',
     ]"
   >
-    <wd-button custom-class="custom-sub-btn-class" v-if="props.subBtnText">
+    <wd-button
+      custom-class="custom-sub-btn-class"
+      v-if="props.subBtnText"
+      @click="clickSubBtn"
+    >
       {{ props.subBtnText }}
     </wd-button>
     <wd-button
@@ -24,7 +28,7 @@
 import { reactive } from 'vue'
 import { defineProps, defineEmits } from 'vue'
 const state = reactive({})
-const emits = defineEmits(['clickBtn'])
+const emits = defineEmits(['clickSubBtn', 'clickBtn'])
 const props = defineProps({
   isBottom: false, //是否底部按钮
   btnText: '', //按钮文字
@@ -33,7 +37,12 @@ const props = defineProps({
   plain: false, //是否镂空
 })
 
-//点击
+//点击副按钮
+const clickSubBtn = () => {
+  emits('clickSubBtn')
+}
+
+//点击主按钮
 const clickBtn = () => {
   emits('clickBtn')
 }

src/pages/dialog/dialogDetail/userDetail.vue

@@ -64,10 +64,37 @@
             :btnText="$t('user.detail.sendMsg')"
             :subBtnText="$t('user.detail.ringBell')"
             @clickBtn="toTalkUser"
+            @clickSubBtn="handleCall"
           ></customBtn>
         </template>
       </ZPaging>
     </div>
+    <tm-drawer
+      placement="bottom"
+      v-model:show="state.isShowPhoneCall"
+      :hideHeader="true"
+      :height="416"
+      :round="6"
+    >
+      <div class="do-phone-call">
+        <div class="do-phone-call-header">
+          <span>{{ $t('popup.title.phone') }}</span>
+          <img
+            src="/src/static/image/login/check-circle-filled@3x.png"
+            @click="hidePhoneCallPopup"
+          />
+        </div>
+        <div class="do-phone-call-number">
+          <span>{{ state.phoneNumber }}</span>
+        </div>
+        <div class="do-phone-call-btn">
+          <customBtn
+            :btnText="$t('do.phone.call')"
+            @clickBtn="doPhoneCall"
+          ></customBtn>
+        </div>
+      </div>
+    </tm-drawer>
   </div>
 </template>
 <script setup>
@@ -88,6 +115,8 @@ const state = reactive({
   erpUserId: '', //erp用户id
   userInfo: null, //用户详情
   userBasicInfos: [], //用户基本信息
+  isShowPhoneCall: true, //是否显示电话拨号弹框
+  phoneNumber: '', //手机号
 })
 
 onLoad((options) => {
@@ -167,6 +196,7 @@ const getUserInfo = () => {
           value: data.enter_date,
         },
       ]
+      state.phoneNumber = data.tel_num
     } else {
     }
   })
@@ -174,10 +204,33 @@ const getUserInfo = () => {
   resp.catch(() => {})
 }
 
+//点击唤起拨号弹框
+const handleCall = () => {
+  state.isShowPhoneCall = true
+}
+
+//点击隐藏拨号弹框
+const hidePhoneCallPopup = () => {
+  state.isShowPhoneCall = false
+}
+
 //点击对用户发起单聊
 const toTalkUser = () => {
   talkStore.toTalk(1, state.userInfo.sys_id, state.erpUserId)
 }
+
+//点击拨打唤起拨号
+const doPhoneCall = () => {
+  uni.makePhoneCall({
+    phoneNumber: state.phoneNumber,
+    success: () => {
+      console.log('拨号成功')
+    },
+    fail: (err) => {
+      console.error('失败:', err)
+    },
+  })
+}
 </script>
 <style scoped lang="scss">
 .outer-layer {
@@ -290,4 +343,58 @@ const toTalkUser = () => {
     }
   }
 }
+
+.do-phone-call {
+  .do-phone-call-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 42rpx 0;
+    position: relative;
+    span {
+      font-size: 28rpx;
+      line-height: 40rpx;
+      color: #747474;
+      font-weight: 400;
+    }
+    img {
+      position: absolute;
+      top: 44rpx;
+      right: 30rpx;
+      width: 36rpx;
+      height: 36rpx;
+    }
+  }
+  .do-phone-call-number {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 32rpx 0;
+    border-top: 2rpx solid #e7e7e7;
+    border-bottom: 2rpx solid #e7e7e7;
+    span {
+      font-size: 32rpx;
+      line-height: 44rpx;
+      color: #1a1a1a;
+      font-weight: 400;
+    }
+  }
+  .do-phone-call-btn {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 50rpx 0;
+    :deep(.custom-btn-class) {
+      width: 690rpx;
+      font-size: 32rpx;
+      line-height: 44rpx;
+      padding: 18rpx 0;
+      height: 80rpx;
+      background: linear-gradient(to right, #674bbc, #46299d);
+    }
+  }
+}
 </style>

src/uni_modules/tmui/locale/zh-Hans.json

@@ -150,5 +150,7 @@
   "button.text.close": "关闭",
   "choose.deps.all": "全部",
   "choose.deps.current": "当前",
-  "chat.mention.select": "选择提醒的人"
+  "chat.mention.select": "选择提醒的人",
+  "do.phone.call": "拨打",
+  "popup.title.phone": "电话"
 }