217 lines
7.6 KiB
Vue
217 lines
7.6 KiB
Vue
<template>
|
||
<view class="contact-wrap">
|
||
<slot></slot>
|
||
<!-- #ifdef MP-ALIPAY -->
|
||
<view class="contact-button" @click="contactServicer">
|
||
<contact-button :tnt-inst-id="config.instid" :scene="config.scene" size="1000rpx" v-if="config.type == 'aliapp'"/>
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- #ifndef MP-ALIPAY -->
|
||
<button
|
||
type="default"
|
||
hover-class="none"
|
||
:open-type="openType"
|
||
class="contact-button"
|
||
@click="contactServicer"
|
||
:send-message-title="sendMessageTitle"
|
||
:send-message-path="sendMessagePath"
|
||
:send-message-img="sendMessageImg"
|
||
:show-message-card="true"></button>
|
||
<!-- #endif -->
|
||
<uni-popup ref="servicePopup" type="center">
|
||
<view class="service-popup-wrap">
|
||
<view class="head-wrap" @click="$refs.servicePopup.close()">
|
||
<text>联系客服</text>
|
||
<text class="iconfont icon-close"></text>
|
||
</view>
|
||
<view class="body-wrap">{{ siteInfo.site_tel ? '请联系客服，客服电话是' + siteInfo.site_tel : '抱歉，商家暂无客服，请线下联系' }}</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 客服组件 -->
|
||
<script>
|
||
export default {
|
||
name: 'ns-contact',
|
||
props: {
|
||
niushop: {
|
||
type: Object,
|
||
default: function() {
|
||
return {};
|
||
}
|
||
},
|
||
sendMessageTitle: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
sendMessagePath: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
sendMessageImg: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
config: null,
|
||
openType: ''
|
||
};
|
||
},
|
||
created() {
|
||
if (this.servicerConfig) {
|
||
// #ifdef H5
|
||
this.config = this.servicerConfig.h5;
|
||
// #endif
|
||
|
||
// #ifdef MP-WEIXIN
|
||
this.config = this.servicerConfig.weapp;
|
||
if (this.config.type == 'weapp') this.openType = 'contact';
|
||
// #endif
|
||
|
||
// #ifdef MP-ALIPAY
|
||
this.config = this.servicerConfig.aliapp;
|
||
if (this.config.type == 'aliapp') this.openType = 'contact';
|
||
// #endif
|
||
}
|
||
},
|
||
methods: {
|
||
/**
|
||
* 联系客服
|
||
*/
|
||
contactServicer() {
|
||
if (this.config.type == 'none') {
|
||
this.$refs.servicePopup.open();
|
||
}
|
||
if (this.openType == 'contact') return;
|
||
|
||
switch (this.config.type) {
|
||
case 'wxwork':
|
||
this.openWxWorkService();
|
||
break;
|
||
case 'third':
|
||
location.href = this.config.third_url;
|
||
break;
|
||
case 'niushop':
|
||
this.$util.redirectTo('/pages_tool/chat/room', this.niushop);
|
||
break;
|
||
default:
|
||
this.makePhoneCall();
|
||
}
|
||
},
|
||
/**
|
||
* 打开企业微信客服
|
||
* @param {boolean} useOriginalService 是否使用原有客服方式
|
||
*/
|
||
openWxWorkService(useOriginalService = false) {
|
||
// #ifdef MP-WEIXIN
|
||
if (this.wxworkConfig?.contact_url && !useOriginalService) {
|
||
// 直接使用活码链接跳转
|
||
wx.navigateToMiniProgram({
|
||
appId: 'wxeb490c6f9b154ef9', // 是企业微信官方小程序的AppID（固定值, 由腾讯企业微信团队维护, 不需要修改，用于展示"添加企业微信联系人"的官方页面）
|
||
path: `pages/contacts/externalContactDetail?url=${encodeURIComponent(this.wxworkConfig.contact_url)}`,
|
||
success: () => {
|
||
console.log('跳转企业微信成功');
|
||
},
|
||
fail: (err) => {
|
||
console.error('跳转企业微信失败:', err);
|
||
// 降级处理：使用原有客服方式
|
||
this.fallbackToOriginalService();
|
||
}
|
||
});
|
||
} else {
|
||
// 使用原有的客服会话方式
|
||
wx.openCustomerServiceChat({
|
||
extInfo: { url: this.config.wxwork_url },
|
||
corpId: this.config.corpid,
|
||
showMessageCard: true,
|
||
sendMessageTitle: this.sendMessageTitle,
|
||
sendMessagePath: this.sendMessagePath,
|
||
sendMessageImg: this.sendMessageImg
|
||
});
|
||
}
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
if (this.wxworkConfig?.contact_url) {
|
||
// H5环境直接跳转活码链接
|
||
window.location.href = this.wxworkConfig.contact_url;
|
||
} else {
|
||
location.href = this.config.wxwork_url;
|
||
}
|
||
// #endif
|
||
},
|
||
|
||
/**
|
||
* 降级处理：使用原有客服方式
|
||
*/
|
||
fallbackToOriginalService() {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '无法直接添加企业微信客服，是否使用其他方式联系客服？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
console.log('降级处理：使用原有客服方式');
|
||
this.openWxWorkService(true);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
/**
|
||
* 店铺联系方式
|
||
*/
|
||
makePhoneCall() {
|
||
this.$api.sendRequest({
|
||
url: '/api/site/shopcontact',
|
||
success: res => {
|
||
if (res.code == 0 && res.data.mobile) uni.makePhoneCall({
|
||
phoneNumber: res.data
|
||
.mobile
|
||
});
|
||
}
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.contact-wrap {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
|
||
.contact-button {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 5;
|
||
padding: 0;
|
||
margin: 0;
|
||
opacity: 0;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.service-popup-wrap {
|
||
width: 600rpx;
|
||
|
||
.head-wrap {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 30rpx;
|
||
height: 90rpx;
|
||
}
|
||
|
||
.body-wrap {
|
||
text-align: center;
|
||
padding: 30rpx;
|
||
height: 100rpx;
|
||
}
|
||
}
|
||
</style> |