Uniapp/lucky_shop
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

chore: 集成统一客服服务

Browse Source
This commit is contained in:
ZF Sun
2025-12-16 16:54:39 +08:00
parent 142a97d65c
commit d9c9599cb2
6 changed files with 1103 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
components/hover-nav/hover-nav.vue
View File

@@ -3,17 +3,20 @@
<view v-if="pageCount == 1 || need" class="fixed-box" :style="{ height: fixBtnShow ? '330rpx' : '120rpx' }">
<!-- <view class="btn-item" v-if="fixBtnShow" @click="$util.redirectTo('/pages/index/index')"> -->
<!-- #ifdef MP-WEIXIN -->
<button class="btn-item" v-if="fixBtnShow" hoverClass="none" openType="contact" sessionFrom="weapp" showMessageCard="true" :style="{backgroundImage:'url('+(kefuimg?kefuimg:'')+')',backgroundSize:'100% 100%'}">
<!-- 统一客服按钮 -->
<button class="btn-item" v-if="fixBtnShow" hoverClass="none" :open-type="buttonConfig.openType"
sessionFrom="weapp" showMessageCard="true" @click="contactServicer"
:style="{ backgroundImage: 'url(' + (kefuimg ? kefuimg : '') + ')', backgroundSize: '100% 100%' }">
<text class="icox icox-kefu" v-if="!kefuimg"></text>
<!-- <view>首页</view> -->
</button>
<!-- #endif -->
<view class="btn-item" v-if="fixBtnShow" @click="call()" :style="{backgroundImage:'url('+(phoneimg?phoneimg:'')+')',backgroundSize:'100% 100%'}">
<view class="btn-item" v-if="fixBtnShow" @click="call()"
:style="{ backgroundImage: 'url(' + (phoneimg ? phoneimg : '') + ')', backgroundSize: '100% 100%' }">
<text class="iconfont icon-dianhua" v-if="!phoneimg"></text>
<!-- <view>我的</view> -->
</view>
<!-- <view class="btn-item icon-xiala" v-if="fixBtnShow" @click="fixBtnShow ? (fixBtnShow = false) : (fixBtnShow = true)">
<!-- <view class="btn-item icon-xiala" v-if="fixBtnShow" @click="fixBtnShow ? (fixBtnShow = false) : (fixBtnShow = true)">
<text class="iconfont icon-unfold"></text>
</view>
<view class="btn-item switch" v-else :class="{ show: fixBtnShow }"
@@ -25,118 +28,134 @@
</template>
<script>
export default {
name: 'hover-nav',
props: {
need: {
type: Boolean,
default: false
},
import { createCustomerService } from '@/common/js/customer-service.js';
export default {
name: 'hover-nav',
props: {
need: {
type: Boolean,
default: false
},
data() {
return {
pageCount: 0,
fixBtnShow: true,
tel:'',
kefuimg:'',
phoneimg:''
};
},
created() {
this.kefuimg = this.$util.getDefaultImage().kefu
this.phoneimg = this.$util.getDefaultImage().phone
this.pageCount = getCurrentPages().length;
var that = this
uni.getStorage({
key:'shopInfo',
success(e){
that.tel = e.data.mobile
}
})
},
methods: {
//拨打电话
call(){
uni.makePhoneCall({
phoneNumber:this.tel+''
})
},
data() {
return {
pageCount: 0,
fixBtnShow: true,
tel: '',
kefuimg: '',
phoneimg: '',
customerService: null, // 客服服务实例
buttonConfig: null // 按钮配置
};
},
created() {
this.kefuimg = this.$util.getDefaultImage().kefu
this.phoneimg = this.$util.getDefaultImage().phone
this.pageCount = getCurrentPages().length;
// 初始化客服服务
this.customerService = createCustomerService(this);
this.buttonConfig = this.customerService.getButtonConfig();
var that = this
uni.getStorage({
key: 'shopInfo',
success(e) {
that.tel = e.data.mobile
}
})
},
methods: {
//拨打电话
call() {
uni.makePhoneCall({
phoneNumber: this.tel + ''
})
},
//处理客服点击事件
contactServicer() {
// 使用统一客服处理
this.customerService.handleCustomerClick();
}
};
}
};
</script>
<style lang="scss">
.container-box {
width: 100%;
.container-box {
width: 100%;
.item-wrap {
.item-wrap {
border-radius: 10rpx;
.image-box {
border-radius: 10rpx;
}
.image-box {
border-radius: 10rpx;
}
image {
width: 100%;
height: auto;
border-radius: 10rpx;
will-change: transform;
}
image {
width: 100%;
height: auto;
border-radius: 10rpx;
will-change: transform;
}
}
}
//悬浮按钮
.fixed-box {
position: fixed;
right: 0rpx;
bottom: 200rpx;
z-index: 10;
// background: #fff;
// box-shadow: 2rpx 2rpx 22rpx rgba(0, 0, 0, 0.3);
border-radius: 120rpx;
padding: 20rpx 0;
//悬浮按钮
.fixed-box {
position: fixed;
right: 0rpx;
bottom: 200rpx;
z-index: 10;
// background: #fff;
// box-shadow: 2rpx 2rpx 22rpx rgba(0, 0, 0, 0.3);
border-radius: 120rpx;
padding: 20rpx 0;
display: flex;
justify-content: center;
flex-direction: column;
width: 100rpx;
box-sizing: border-box;
transition: 0.3s;
overflow: hidden;
.btn-item {
display: flex;
justify-content: center;
text-align: center;
flex-direction: column;
width: 100rpx;
box-sizing: border-box;
transition: 0.3s;
overflow: hidden;
line-height: 1;
margin: 14rpx 0;
transition: 0.1s;
background: #fff;
border-radius: 50rpx;
width: 80rpx;
height: 80rpx;
padding: 0;
.btn-item {
display: flex;
justify-content: center;
text-align: center;
flex-direction: column;
line-height: 1;
margin: 14rpx 0;
transition: 0.1s;
background: #fff;
border-radius: 50rpx;
width: 80rpx;
height: 80rpx;
padding: 0;
text {
font-size: 36rpx;
font-weight: bold;
}
text {
font-size: 36rpx;
font-weight: bold;
}
view {
font-size: 26rpx;
font-weight: bold;
}
view {
font-size: 26rpx;
font-weight: bold;
}
&.show {
transform: rotate(180deg);
}
&.show {
transform: rotate(180deg);
}
&.switch {}
&.switch {}
&.icon-xiala {
margin: 0;
margin-top: 0.1rpx;
}
&.icon-xiala {
margin: 0;
margin-top: 0.1rpx;
}
}
}
</style>