151 lines
3.6 KiB
Vue
151 lines
3.6 KiB
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>
|