ai-clone/frontend-ai/components/ServiceButton.vue

<template>
  <view class="service-button-container">
    <!-- 微信客服按钮 -->
    <!-- #ifdef MP-WEIXIN -->
    <button 
      v-if="useWechatService"
      open-type="contact"
      class="service-btn wechat-service"
      :session-from="sessionFrom"
    >
      <text class="icon">💬</text>
      <text class="text">联系客服</text>
    </button>
    <!-- #endif -->
    
    <!-- 电话客服按钮 -->
    <button 
      v-if="!useWechatService"
      @click="callService"
      class="service-btn phone-service"
    >
      <text class="icon">📞</text>
      <text class="text">拨打客服</text>
    </button>
  </view>
</template>

<script>
export default {
  name: 'ServiceButton',
  props: {
    // 会话来源页面
    sessionFrom: {
      type: String,
      default: ''
    },
    // 按钮类型：primary, default
    type: {
      type: String,
      default: 'primary'
    }
  },
  data() {
    return {
      useWechatService: true,
      servicePhone: ''
    };
  },
  onLoad() {
    this.loadConfig();
  },
  methods: {
    // 加载配置
    async loadConfig() {
      try {
        // 先从本地存储读取缓存
        const cachedConfig = uni.getStorageSync('appConfig');
        if (cachedConfig && cachedConfig.common) {
          this.useWechatService = cachedConfig.common.useWechatService !== false;
          this.servicePhone = cachedConfig.common.servicePhone || '';
        }
        
        // 从后端获取最新配置
        const { API_BASE, API_ENDPOINTS } = await import('@/config/api.js');
        const res = await uni.request({
          url: `${API_BASE}${API_ENDPOINTS.config.getAppConfig}`,
          method: 'GET',
          header: {
            'Content-Type': 'application/json'
            // 不添加认证头，因为这是公开接口
          }
        });
        
        // 兼容不同平台的返回格式：可能是 [error, res] 或直接是 res
        const response = Array.isArray(res) ? res[1] : res;
        if (response && response.data && response.data.success && response.data.data) {
          const config = response.data.data;
          // 保存到本地存储
          uni.setStorageSync('appConfig', config);
          
          // 更新组件数据
          if (config.common) {
            this.useWechatService = config.common.useWechatService !== false;
            this.servicePhone = config.common.servicePhone || '';
          }
        }
      } catch (error) {
        console.error('加载配置失败:', error);
        // 如果请求失败，使用缓存的配置
      }
    },
    
    // 拨打客服电话
    callService() {
      uni.makePhoneCall({
        phoneNumber: this.servicePhone,
        success: () => {
          console.log('拨打电话成功');
        },
        fail: (err) => {
          console.error('拨打电话失败:', err);
          uni.showToast({
            title: '拨打失败',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.service-button-container {
  width: 100%;
}

.service-btn {
  width: 100%;
  height: 90upx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 45upx;
  font-size: 30upx;
  font-weight: 600;
  border: none;
  
  .icon {
    font-size: 36upx;
    margin-right: 10upx;
  }
  
  .text {
    line-height: 1;
  }
}

.wechat-service {
  background: linear-gradient(135deg, #07C160 0%, #00D976 100%);
  color: white;
  box-shadow: 0 8upx 20upx rgba(7, 193, 96, 0.3);
}

.phone-service {
  background: linear-gradient(135deg, #8B7355 0%, #6D8B8B 100%);
  color: white;
  box-shadow: 0 8upx 20upx rgba(139, 115, 85, 0.3);
}
</style>