添加图标

components/My-button/My-button.vue

@@ -1,15 +1,21 @@
 <template>
-    <view class="button-box" :style="customStyle" :class="disabled && 'disabled'" hover-class="navigator-hover" hover-start-time="50"
-        hover-stay-time="200" @click="handleClick">
+    <view class="button-box" :style="customStyle" :class="disabled && 'disabled'" hover-class="navigator-hover"
+        hover-start-time="50" hover-stay-time="200" @click="handleClick">
         <view v-if="loading" style="margin-right: 10rpx;">
             <up-loading-icon size="18" mode="circle" />
-        </view>{{ loading ? loadingText || text + '中...' : text }}
+        </view>
+        <view v-if="frontIcon && !loading" :style="frontIconStyle" class="iconfont icon" :class="frontIcon" />
+        {{ loading ? loadingText || text + '中...' : text }}
     </view>
 </template>
 
 <script setup>
 import { defineProps } from 'vue';
 const props = defineProps({
+    frontIcon: {
+        type: String,
+        default: ''
+    },
     text: {
         type: String,
         default: '按钮'
@@ -28,15 +34,32 @@ const props = defineProps({
     customStyle: {
         type: Object
     },
+    frontIconStyle: {
+        type: Object
+    },
     onClick: {
         type: Function,
         default: () => { }
+    },
+    phonenumber: {
+        type: [String, Number],
+        default: ''
     }
 });
 
 function handleClick() {
+    if (props.phonenumber) return uni.makePhoneCall({
+        phoneNumber: String(props.phonenumber),
+        success: () => {
+            console.log('拨打电话成功');
+        },
+        fail: (err) => {
+            console.error('拨打电话失败', err);
+        }
+    });
     // 如果处于加载状态或禁用状态，则不执行任何操作
     if (props.loading || props.disabled) return;
+
     // 执行传入的点击事件
     props.onClick();
 }
@@ -50,12 +73,17 @@ function handleClick() {
     width: 100%;
     height: 80rpx;
     background-color: #3874F6;
+    border: 2rpx solid #3874F6;
     color: #FFFFFF;
     box-sizing: border-box;
     border-radius: 40rpx;
     font-family: Microsoft YaHei, Microsoft YaHei;
     font-size: 32rpx;
     color: #FFFFFF;
+
+    .icon {
+        margin-right: 20rpx;
+    }
 }
 
 .disabled {