124 lines
3.4 KiB
Vue
124 lines
3.4 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>
|
|
import { createCustomerService } from '@/common/js/customer-service.js';
|
|
|
|
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 {
|
|
customerService: null,
|
|
buttonConfig: null
|
|
};
|
|
},
|
|
created() {
|
|
// 初始化客服服务
|
|
this.customerService = createCustomerService(this);
|
|
this.buttonConfig = this.customerService.getButtonConfig();
|
|
},
|
|
methods: {
|
|
/**
|
|
* 联系客服
|
|
*/
|
|
contactServicer() {
|
|
// 如果是微信/支付宝小程序客服，由系统自动处理
|
|
if (this.buttonConfig.openType === 'contact') {
|
|
return;
|
|
}
|
|
|
|
// 使用统一客服处理
|
|
this.customerService.handleCustomerClick({
|
|
niushop: this.niushop,
|
|
sendMessageTitle: this.sendMessageTitle,
|
|
sendMessagePath: this.sendMessagePath,
|
|
sendMessageImg: this.sendMessageImg
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</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> |