From e9b9e26af022ef7bd5854de2a82f30afdb279de5 Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Mon, 25 Aug 2025 14:45:41 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=A8=E7=BA=BF=E5=AE=A2=E6=9C=8D=E7=9A=84?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../customer-service-modal.vue                | 372 ++++++++++++++++++
 pages/profile/profile.vue                     |  15 +-
 2 files changed, 386 insertions(+), 1 deletion(-)
 create mode 100644 components/customer-service-modal/customer-service-modal.vue

diff --git a/components/customer-service-modal/customer-service-modal.vue b/components/customer-service-modal/customer-service-modal.vue
new file mode 100644
index 0000000..1863e3f
--- /dev/null
+++ b/components/customer-service-modal/customer-service-modal.vue
@@ -0,0 +1,372 @@
+<template>
+  <view v-if="visible" class="modal-overlay" @click="handleOverlayClick">
+    <view class="modal-container" @click.stop>
+      <!-- 头部 -->
+      <view class="modal-header">
+        <view class="header-content">
+          <view class="header-text">
+            <text class="title">联系客服</text>
+            <text class="subtitle">为您解决难题</text>
+          </view>
+        </view>
+        <view class="close-btn" @click="handleClose">
+          <text class="close-icon">×</text>
+        </view>
+      </view>
+
+      <!-- 客服信息 -->
+      <view class="service-section">
+        <text class="section-title">订单要售后:</text>
+
+        <!-- 客服列表 -->
+        <view class="service-list">
+          <view v-for="(service, index) in serviceList" :key="index" class="service-item">
+            <view class="service-info">
+              <view class="service-name">
+                <text class="name">{{ service.name }}</text>
+                <text class="phone">{{ service.phone }}</text>
+              </view>
+              <view class="work-time">
+                <text class="time-label">工作时间:</text>
+                <text class="time-value">{{ service.workTime }}</text>
+              </view>
+            </view>
+            <view class="call-btn" @click="handleCall(service)">
+              <text class="call-icon">📞</text>
+              <text class="call-text">拨打</text>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 底部提示 -->
+      <view class="modal-footer">
+        <text class="footer-tip">客服电话高峰期可能遇忙,请耐心等待</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits } from 'vue'
+
+// 定义props
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// 定义emits
+const emit = defineEmits(['close'])
+
+// 客服数据
+const serviceList = ref([
+  {
+    name: '阿帮',
+    phone: '13376970966',
+    workTime: '08:00:00~23:00:00',
+  },
+  {
+    name: '小翔',
+    phone: '13105875911',
+    workTime: '07:00:00~22:00:00',
+  },
+])
+
+// 关闭弹窗
+const handleClose = () => {
+  emit('close')
+}
+
+// 点击遮罩层关闭
+const handleOverlayClick = () => {
+  handleClose()
+}
+
+// 拨打电话
+const handleCall = service => {
+  uni.showModal({
+    title: '确认拨打电话',
+    content: `是否拨打 ${service.name} 的电话 ${service.phone}？`,
+    success: res => {
+      if (res.confirm) {
+        // 检查当前时间是否在工作时间内
+        const now = new Date()
+        const currentTime = now.getHours() * 10000 + now.getMinutes() * 100 + now.getSeconds()
+
+        // 解析工作时间
+        const [startTime, endTime] = service.workTime.split('~')
+        const start = parseInt(startTime.replace(/:/g, ''))
+        const end = parseInt(endTime.replace(/:/g, ''))
+
+        if (currentTime >= start && currentTime <= end) {
+          // 在工作时间内，直接拨打电话
+          uni.makePhoneCall({
+            phoneNumber: service.phone,
+            success: () => {
+              console.log('拨打电话成功')
+            },
+            fail: err => {
+              console.error('拨打电话失败:', err)
+              uni.showToast({
+                title: '拨打电话失败',
+                icon: 'none',
+              })
+            },
+          })
+        } else {
+          // 不在工作时间内，提示用户
+          uni.showModal({
+            title: '温馨提示',
+            content: `${service.name} 当前不在工作时间内，是否仍要拨打？`,
+            success: res => {
+              if (res.confirm) {
+                uni.makePhoneCall({
+                  phoneNumber: service.phone,
+                  success: () => {
+                    console.log('拨打电话成功')
+                  },
+                  fail: err => {
+                    console.error('拨打电话失败:', err)
+                    uni.showToast({
+                      title: '拨打电话失败',
+                      icon: 'none',
+                    })
+                  },
+                })
+              }
+            },
+          })
+        }
+      }
+    },
+  })
+}
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.modal-container {
+  width: 90%;
+  max-width: 600rpx;
+  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
+  border-radius: 24rpx;
+  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  animation: slideUp 0.3s ease-out;
+}
+
+.modal-header {
+  position: relative;
+  padding: 40rpx 40rpx 20rpx;
+  background: linear-gradient(135deg, #f15a04 0%, #f15a04 100%);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.header-text {
+  flex: 1;
+}
+
+.title {
+  display: block;
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #ffffff;
+  margin-bottom: 8rpx;
+}
+
+.subtitle {
+  display: block;
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.robot-icon {
+  font-size: 40rpx;
+}
+
+.close-btn {
+  position: absolute;
+  top: 20rpx;
+  right: 20rpx;
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+}
+
+.close-icon {
+  font-size: 32rpx;
+  color: #ffffff;
+  font-weight: bold;
+}
+
+.service-section {
+  padding: 40rpx;
+}
+
+.section-title {
+  display: block;
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #333333;
+  margin-bottom: 30rpx;
+}
+
+.service-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24rpx;
+}
+
+.service-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24rpx;
+  background: #f8f9fa;
+  border-radius: 16rpx;
+  border: 2rpx solid #e9ecef;
+}
+
+.service-info {
+  flex: 1;
+}
+
+.service-name {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12rpx;
+}
+
+.name {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #333333;
+  margin-right: 16rpx;
+}
+
+.phone {
+  font-size: 26rpx;
+  color: #666666;
+}
+
+.work-time {
+  display: flex;
+  align-items: center;
+}
+
+.time-label {
+  font-size: 24rpx;
+  color: #999999;
+  margin-right: 8rpx;
+}
+
+.time-value {
+  font-size: 24rpx;
+  color: #666666;
+}
+
+.call-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100rpx;
+  height: 100rpx;
+  background: linear-gradient(135deg, #f15a04 0%, #f15a04 100%);
+  border-radius: 16rpx;
+  box-shadow: 0 8rpx 20rpx rgba(102, 126, 234, 0.3);
+}
+
+.call-icon {
+  font-size: 24rpx;
+  margin-bottom: 4rpx;
+}
+
+.call-text {
+  font-size: 20rpx;
+  color: #ffffff;
+  font-weight: bold;
+}
+
+.modal-footer {
+  padding: 20rpx 40rpx 40rpx;
+  text-align: center;
+}
+
+.footer-tip {
+  font-size: 22rpx;
+  color: #999999;
+  line-height: 1.5;
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100rpx);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 750rpx) {
+  .modal-container {
+    width: 95%;
+    margin: 0 20rpx;
+  }
+
+  .modal-header {
+    padding: 30rpx 30rpx 15rpx;
+  }
+
+  .service-section {
+    padding: 30rpx;
+  }
+
+  .service-item {
+    padding: 20rpx;
+  }
+
+  .call-btn {
+    width: 80rpx;
+    height: 80rpx;
+  }
+}
+</style>
diff --git a/pages/profile/profile.vue b/pages/profile/profile.vue
index 5bfcbcb..fc423e8 100644
--- a/pages/profile/profile.vue
+++ b/pages/profile/profile.vue
@@ -104,7 +104,7 @@
           </view>
           <text class="function-text">我的订单</text>
         </view>
-        <view class="function-item" @click="goToMyOrderList">
+        <view class="function-item" @click="showServiceModal">
           <view class="function-icon">
             <image
               :src="commonEnum.ONLINE_CUSTOMER_SERVICE"
@@ -116,6 +116,8 @@
         </view>
       </view>
     </view>
+    <!-- 客服弹窗组件 -->
+    <customer-service-modal :visible="serviceModalVisible" @close="handleCloseModal" />
   </view>
 </template>
 
@@ -128,6 +130,7 @@ export default {
   name: 'ProfilePage',
   data() {
     return {
+      serviceModalVisible: false,
       commonEnum,
       userInfo: {
         nickName: '昵称',
@@ -303,6 +306,16 @@ export default {
       })
     },
 
+    // 显示弹窗
+    showServiceModal() {
+      this.serviceModalVisible = true
+    },
+
+    // 关闭弹窗
+    handleCloseModal() {
+      this.serviceModalVisible = false
+    },
+
     async goToUserList() {
       if (this.isAgent) {
         uni.navigateTo({