源文件
This commit is contained in:
444
components/online-service/online-service.vue
Normal file
444
components/online-service/online-service.vue
Normal file
@@ -0,0 +1,444 @@
|
||||
<template>
|
||||
<view :class="theme_view">
|
||||
<block v-if="online_service_status == 1">
|
||||
<!-- 是否商品页样式 -->
|
||||
<view v-if="propIsGoods == true" class="goods-chat-container fl cp">
|
||||
<block v-if="is_chat == 1">
|
||||
<view @tap="chat_event">
|
||||
<image class="icon" :src="chat_icon" mode="scaleToFill"></image>
|
||||
<text class="text dis-block text-size-xs cr-grey">{{$t('online-service.online-service.4l6k22')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<!-- #ifdef MP-WEIXIN || MP-TOUTIAO || MP-BAIDU || MP-KUAISHOU -->
|
||||
<button class="chat-btn" open-type="contact" :show-message-card="propCard" :send-message-title="propTitle" :send-message-path="propPath" :send-message-img="propImg">
|
||||
<image class="icon" :src="chat_icon" mode="scaleToFill"></image>
|
||||
<text class="text dis-block text-size-xs cr-grey">{{$t('online-service.online-service.4l6k22')}}</text>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<button class="chat-btn alipay-contact" open-type="contact">
|
||||
<contact-button class="alipay-chat-btn" :tnt-inst-id="mini_alipay_tnt_inst_id" :scene="mini_alipay_scene" :alipay-card-no="mini_alipay_openid || ''" :icon="chat_icon" size="40rpx*40rpx" />
|
||||
<text class="text dis-block text-size-xs cr-grey">{{$t('online-service.online-service.4l6k22')}}</text>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 || APP -->
|
||||
<button class="chat-btn" type="default" @tap="call_event">
|
||||
<image class="icon" :src="chat_icon" mode="scaleToFill"></image>
|
||||
<text class="text dis-block text-size-xs cr-grey">{{$t('online-service.online-service.4l6k22')}}</text>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
</block>
|
||||
</view>
|
||||
<!-- 默认浮动展示-可拖拽位置 -->
|
||||
<view v-else>
|
||||
<block v-if="is_online_service_fixed == 1">
|
||||
<block v-if="propIsMovable">
|
||||
<movable-area class="online-service-movable-container" :style="'height: calc(100% - '+height_dec+'rpx);top:'+top+'rpx;'">
|
||||
<movable-view direction="all" :x="x" :y="y" :animation="false" :class="'online-service-event-submit '+(propIsSpread ? ' spread' : '')">
|
||||
<block v-if="propIsSpread">
|
||||
<view class="ring"></view>
|
||||
<view class="ring"></view>
|
||||
</block>
|
||||
<block v-if="is_chat == 1">
|
||||
<button class="chat-btn" type="default" :class="common_ent" @tap="chat_event">
|
||||
<image class="icon dis-block" :src="chat_image"></image>
|
||||
</button>
|
||||
</block>
|
||||
<block v-else>
|
||||
<!-- #ifdef MP-WEIXIN || MP-TOUTIAO || MP-BAIDU -->
|
||||
<button class="chat-btn" open-type="contact" :class="common_ent" :show-message-card="propCard" :send-message-title="propTitle" :send-message-path="propPath" :send-message-img="propImg">
|
||||
<image class="icon dis-block" :src="chat_image"></image>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<button class="chat-btn" open-type="contact" :class="'alipay-contact '+common_ent">
|
||||
<contact-button class="alipay-chat-btn" :tnt-inst-id="mini_alipay_tnt_inst_id" :scene="mini_alipay_scene" :alipay-card-no="mini_alipay_openid || ''" :icon="chat_image" size="40rpx*40rpx" />
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 || APP -->
|
||||
<button class="chat-btn" type="default" :class="common_ent" @tap="call_event">
|
||||
<image class="icon dis-block" :src="chat_image"></image>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
</block>
|
||||
</movable-view>
|
||||
</movable-area>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="online-service-movable-container" :style="'height: calc(100% - '+height_dec+'rpx);top:'+top+'rpx;'">
|
||||
<view :class="'online-service-event-submit '+(propIsSpread ? ' spread' : '')">
|
||||
<block v-if="propIsSpread">
|
||||
<view class="ring"></view>
|
||||
<view class="ring"></view>
|
||||
</block>
|
||||
<block v-if="is_chat == 1">
|
||||
<button class="chat-btn" type="default" :class="common_ent" @tap="chat_event">
|
||||
<image class="icon dis-block" :src="chat_image"></image>
|
||||
</button>
|
||||
</block>
|
||||
<block v-else>
|
||||
<!-- #ifdef MP-WEIXIN || MP-TOUTIAO || MP-BAIDU -->
|
||||
<button class="chat-btn" open-type="contact" :class="common_ent" :show-message-card="propCard" :send-message-title="propTitle" :send-message-path="propPath" :send-message-img="propImg">
|
||||
<image class="icon dis-block" :src="chat_image"></image>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<button class="chat-btn alipay-contact" :class="common_ent" open-type="contact">
|
||||
<contact-button class="alipay-chat-btn" :tnt-inst-id="mini_alipay_tnt_inst_id" :scene="mini_alipay_scene" :alipay-card-no="mini_alipay_openid || ''" :icon="chat_image" size="40rpx*40rpx" />
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 || APP -->
|
||||
<button class="chat-btn" type="default" :class="common_ent" @tap="call_event">
|
||||
<image class="icon dis-block" :src="chat_image"></image>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
const app = getApp();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
theme_view: app.globalData.get_theme_value_view(),
|
||||
common_static_url: app.globalData.get_static_url('common'),
|
||||
client_value: app.globalData.application_client_type(),
|
||||
is_chat: 0,
|
||||
chat_url: null,
|
||||
chat_icon: '',
|
||||
chat_image: '',
|
||||
common_app_customer_service_tel: null,
|
||||
common_app_customer_service_custom: null,
|
||||
common_app_customer_service_company_weixin_corpid: null,
|
||||
common_app_customer_service_company_weixin_url: null,
|
||||
online_service_status: 0,
|
||||
is_online_service_fixed: app.globalData.data.is_online_service_fixed,
|
||||
mini_alipay_tnt_inst_id: null,
|
||||
mini_alipay_scene: null,
|
||||
mini_alipay_openid: null,
|
||||
system: null,
|
||||
x: 0,
|
||||
y: 0,
|
||||
top: 0,
|
||||
height_dec: 0,
|
||||
is_first: 1,
|
||||
common_ent: ''
|
||||
};
|
||||
},
|
||||
components: {},
|
||||
props: {
|
||||
propIsGoods: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
propIsBar: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
propIsNav: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
propCard: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
propTitle: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
propImg: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
propPath: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
propIsGrayscale: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
propIsChat: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
propChatUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
propChatIcon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
propChatImage: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
propIsSpread: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
propIsMovable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
// 属性值改变监听
|
||||
watch: {
|
||||
// 是否灰度
|
||||
propIsGrayscale(value, old_value) {
|
||||
this.common_ent = value ? 'grayscale' : '';
|
||||
}
|
||||
},
|
||||
// 页面被展示
|
||||
created: function(e) {
|
||||
this.init_config();
|
||||
|
||||
// 非首次进入则重新初始化配置接口
|
||||
if (this.is_first == 0) {
|
||||
app.globalData.init_config();
|
||||
}
|
||||
|
||||
// 数据设置
|
||||
var system = app.globalData.get_system_info(null, null, true);
|
||||
var width = app.globalData.window_width_handle(system.windowWidth);
|
||||
var height = app.globalData.window_height_handle(system);
|
||||
|
||||
// 页面是否定义导航
|
||||
var top_h = this.propIsNav ? 130 : 0;
|
||||
this.setData({
|
||||
is_first: 0,
|
||||
system: system,
|
||||
chat_icon: this.propChatIcon || this.common_static_url+'chat-icon.png',
|
||||
chat_image: this.propChatImage || this.common_static_url+'online-service-icon.png',
|
||||
// 位置坐标
|
||||
x: width - 65,
|
||||
y: height - 380,
|
||||
// 展示位置处理
|
||||
top: top_h,
|
||||
height_dec: top_h,
|
||||
// #ifdef H5 || APP
|
||||
top: 210,
|
||||
height_dec: this.propIsBar ? 310 : 210,
|
||||
// #endif
|
||||
// 是否灰度
|
||||
common_ent: this.propIsGrayscale ? 'grayscale' : ''
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
// 初始化配置
|
||||
init_config(status) {
|
||||
// 客服优先级顺序( 客服系统 -> 自定义客服 -> 企业微信客服(仅app+h5+微信小程序生效) -> 各端平台客服 -> 电话客服 )
|
||||
if ((status || false) == true) {
|
||||
// 是否使用客服系统
|
||||
var is_chat = app.globalData.get_config('plugins_base.chat.data.is_mobile_chat', 0);
|
||||
var chat_url = app.globalData.get_config('plugins_base.chat.data.chat_url');
|
||||
var is_online_service = app.globalData.get_config('config.common_app_is_online_service', 0);
|
||||
if(is_chat == 1 && (chat_url != null || (this.propChatUrl || null) != null)) {
|
||||
this.setData({
|
||||
is_chat: is_chat,
|
||||
chat_url: this.propChatUrl || chat_url,
|
||||
online_service_status: is_online_service,
|
||||
});
|
||||
} else {
|
||||
var online_service_url = app.globalData.get_config('config.common_app_customer_service_custom', null);
|
||||
this.setData({
|
||||
common_app_customer_service_tel: app.globalData.get_config('config.common_app_customer_service_tel', null),
|
||||
common_app_customer_service_custom: (online_service_url == null || (online_service_url[this.client_value] || null) == null) ? null : online_service_url[this.client_value],
|
||||
common_app_customer_service_company_weixin_corpid: app.globalData.get_config('config.common_app_customer_service_company_weixin_corpid', null),
|
||||
common_app_customer_service_company_weixin_url: app.globalData.get_config('config.common_app_customer_service_company_weixin_url', null),
|
||||
online_service_status: is_online_service,
|
||||
});
|
||||
|
||||
// 存在自定义客服和微信企业客服则走客服模式
|
||||
if((this.common_app_customer_service_custom || null) != null || ((this.common_app_customer_service_company_weixin_corpid || null) != null && (this.common_app_customer_service_company_weixin_url || null) != null)) {
|
||||
this.setData({
|
||||
is_chat: 1
|
||||
});
|
||||
}
|
||||
|
||||
// 对应平台没有提供客服的、[电话，自定义客服，企业微信客服]必须存在一个，则关闭在线客服
|
||||
if(['qq', 'h5', 'ios', 'android'].indexOf(this.client_value) != -1 && (this.common_app_customer_service_tel || null) == null && (this.common_app_customer_service_custom || null) == null) {
|
||||
var temp_service_status = this.online_service_status;
|
||||
if(this.client_value == 'qq') {
|
||||
temp_service_status = 0;
|
||||
} else {
|
||||
// h5,app是否配置企业微信客服
|
||||
if((this.common_app_customer_service_company_weixin_corpid || null) == null && (this.common_app_customer_service_company_weixin_url || null) == null) {
|
||||
temp_service_status = 0;
|
||||
}
|
||||
}
|
||||
this.setData({
|
||||
online_service_status: temp_service_status
|
||||
});
|
||||
}
|
||||
|
||||
// #ifdef MP-ALIPAY
|
||||
// 在线客服开启，获取用户openid
|
||||
if(this.online_service_status == 1)
|
||||
{
|
||||
this.setData({
|
||||
mini_alipay_tnt_inst_id: app.globalData.get_config('config.common_app_mini_alipay_tnt_inst_id'),
|
||||
mini_alipay_scene: app.globalData.get_config('config.common_app_mini_alipay_scene'),
|
||||
mini_alipay_openid: app.globalData.get_user_cache_info('alipay_openid')
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
} else {
|
||||
app.globalData.is_config(this, 'init_config');
|
||||
}
|
||||
},
|
||||
|
||||
// 客服事件
|
||||
chat_event() {
|
||||
// 在线客服系统
|
||||
if((this.chat_url || null) != null) {
|
||||
app.globalData.chat_entry_handle(this.chat_url);
|
||||
} else {
|
||||
// 自定义客服
|
||||
if((this.common_app_customer_service_custom || null) != null) {
|
||||
app.globalData.url_open(this.common_app_customer_service_custom);
|
||||
} else {
|
||||
// 企业微信客服
|
||||
if((this.common_app_customer_service_company_weixin_corpid || null) != null && (this.common_app_customer_service_company_weixin_url || null) != null) {
|
||||
// #ifdef APP
|
||||
// app打开企业微信客服
|
||||
plus.share.getServices(res => {
|
||||
var wechat = res.find(i => i.id === 'weixin')
|
||||
if(wechat) {
|
||||
wechat.openCustomerServiceChat({
|
||||
corpid: this.common_app_customer_service_company_weixin_corpid,
|
||||
url: this.common_app_customer_service_company_weixin_url,
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信小程序打开企业微信客服
|
||||
uni.openCustomerServiceChat({
|
||||
extInfo: {url: this.common_app_customer_service_company_weixin_url},
|
||||
corpId: this.common_app_customer_service_company_weixin_corpid,
|
||||
showMessageCard: this.propCard,
|
||||
sendMessageTitle: this.propTitle,
|
||||
sendMessagePath: this.propPath,
|
||||
sendMessageImg: this.propImg,
|
||||
});
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
app.globalData.url_open(this.common_app_customer_service_company_weixin_url);
|
||||
// #endif
|
||||
} else {
|
||||
// 电话客服
|
||||
this.call_event();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 客服电话
|
||||
call_event() {
|
||||
app.globalData.call_tel(this.common_app_customer_service_tel);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.online-service-movable-container {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
.online-service-event-submit {
|
||||
pointer-events: auto;
|
||||
}
|
||||
.online-service-event-submit,
|
||||
.online-service-event-submit .chat-btn {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.online-service-event-submit .chat-btn {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.online-service-event-submit .icon {
|
||||
width: 50px !important;
|
||||
height: 50px !important;
|
||||
position: relative;
|
||||
}
|
||||
.goods-chat-container .chat-btn {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
line-height: initial;
|
||||
font-size: 24rpx;
|
||||
background: transparent;
|
||||
}
|
||||
.goods-chat-container .icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin: 10rpx 0 5rpx 0;
|
||||
}
|
||||
.goods-chat-container .text {
|
||||
margin-top: -10rpx;
|
||||
}
|
||||
/* #ifdef MP-ALIPAY */
|
||||
.goods-chat-container .alipay-contact {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.goods-chat-container .alipay-contact .text {
|
||||
margin-top: -5rpx;
|
||||
}
|
||||
.online-service-event-submit .alipay-chat-btn {
|
||||
line-height: initial;
|
||||
display: block;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
/**
|
||||
* 呼吸灯
|
||||
*/
|
||||
.spread {
|
||||
background-color: rgba(238, 73, 70,0.4);
|
||||
border-radius: 100%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.spread .ring {
|
||||
/* 速度为1.5 * 层数 = 实际运行速度，速度修改则 animation-delay 属性也修改相同速度 */
|
||||
animation: pulsing 1.5s ease-out infinite;
|
||||
}
|
||||
/* 速度为1*层数 */
|
||||
.spread .ring:nth-of-type(1) {
|
||||
-webkit-animation-delay: -1.5s;
|
||||
animation-delay: -1.5s;
|
||||
}
|
||||
|
||||
/* 速度为1*层数 */
|
||||
.spread .ring:nth-of-type(2) {
|
||||
-webkit-animation-delay: -2s;
|
||||
animation-delay: -2s;
|
||||
}
|
||||
@keyframes pulsing {
|
||||
100% {
|
||||
transform: scale(1.35);
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user