Skip to content

C
CFFP-HB
Commit 8a87023f by yuzhenWang
Options

添加客服按钮

parent 9b3d8abf
Showing with 94 additions and 75 deletions
components/FloatingButton/FloatingButton.vue
......@@ -2,7 +2,7 @@
<!-- 悬浮按钮 -->
<view
class="floating-button"
:style="{ left: buttonLeft + 'px', top: buttonTop + 'px' }"
:style="{ right: buttonRight + 'rpx', bottom: buttonBottom + 'rpx' }"
@touchstart="handleTouchStart"
@touchmove="handleTouchMove"
@touchend="handleTouchEnd"
......@@ -11,8 +11,8 @@
<!-- 默认内容 -->
<slot>
<view class="consultBtn">
<text class="iconfont icon-kefu"></text>
<text>咨询客服</text>
<view class="iconfont icon-kefu"></view>
<view>咨询客服</view>
</view>
</slot>
</view>
......@@ -23,38 +23,69 @@ export default {
name: 'FloatingButton',
data() {
return {
buttonLeft: 310, // 初始位置
buttonTop: 200, // 初始位置
buttonRight: 10, // 初始位置，单位rpx
buttonBottom: 200, // 初始位置，单位rpx
startX: 0,
startY: 0,
isDragging: false
isDragging: false,
windowWidth: 0,
windowHeight: 0,
buttonWidth: 140, // 按钮宽度，单位rpx
buttonHeight: 140 // 按钮高度，单位rpx
}
},
mounted() {
this.updateWindowSize();
// 监听窗口变化
uni.onWindowResize(() => {
this.updateWindowSize();
});
},
methods: {
// 更新窗口尺寸
updateWindowSize() {
const systemInfo = uni.getSystemInfoSync();
this.windowWidth = systemInfo.windowWidth;
this.windowHeight = systemInfo.windowHeight;
},
// 触摸开始事件
handleTouchStart(event) {
const touch = event.touches[0];
this.startX = touch.clientX - this.buttonLeft;
this.startY = touch.clientY - this.buttonTop;
// 记录触摸点相对于按钮右下角的偏移量
this.startX = touch.clientX - (this.windowWidth - this.rpxToPx(this.buttonRight));
this.startY = touch.clientY - (this.windowHeight - this.rpxToPx(this.buttonBottom));
this.isDragging = false;
},
// 触摸移动事件
handleTouchMove(event) {
event.preventDefault(); // 阻止默认滚动行为
const touch = event.touches[0];
this.buttonLeft = touch.clientX - this.startX;
this.buttonTop = touch.clientY - this.startY;
// 计算新的right和bottom值（像素单位）
let newRight = this.windowWidth - touch.clientX + this.startX;
let newBottom = this.windowHeight - touch.clientY + this.startY;
// 转换为rpx单位
this.buttonRight = this.pxToRpx(newRight);
this.buttonBottom = this.pxToRpx(newBottom);
this.isDragging = true;
// 限制按钮不超出屏幕
const windowWidth = uni.getSystemInfoSync().windowWidth;
const windowHeight = uni.getSystemInfoSync().windowHeight;
const buttonSize = 80; // 按钮大小
// 限制按钮不超出屏幕（rpx单位）
const maxRight = this.windowWidth - this.rpxToPx(this.buttonWidth);
const maxBottom = this.windowHeight - this.rpxToPx(this.buttonHeight);
if (this.buttonLeft < 0) this.buttonLeft = 0;
if (this.buttonLeft > windowWidth - buttonSize) this.buttonLeft = windowWidth - buttonSize;
if (this.buttonTop < 0) this.buttonTop = 0;
if (this.buttonTop > windowHeight - buttonSize) this.buttonTop = windowHeight - buttonSize;
if (newRight < 0) {
this.buttonRight = this.pxToRpx(0);
} else if (newRight > maxRight) {
this.buttonRight = this.pxToRpx(maxRight);
}
if (newBottom < 0) {
this.buttonBottom = this.pxToRpx(0);
} else if (newBottom > maxBottom) {
this.buttonBottom = this.pxToRpx(maxBottom);
}
},
// 触摸结束事件
handleTouchEnd() {
......@@ -64,7 +95,30 @@ export default {
},
// 点击事件
handleClick() {
this.$emit('floatingButton');
// 现在还没转化成小程序，暂时放在这
// #ifdef MP-WEIXIN
uni.openCustomerServiceChat({
extInfo: {
url: 'https://work.weixin.qq.com/kfid/kfc08c55f4170e7fc9e'
},
corpId: 'ww43cac1cf9dd6a3d0', // 客服会话按钮打开后，在微信客服会话按钮处理的事件类型
showMessageCard: true,
sendMessageTitle: (uni.getStorageSync('hoservice_mobileNo')?(uni.getStorageSync('hoservice_mobileNo')+"，") :"" ) + "进入个人中心-->咨询客服",
sendMessagePath: `/pages/index/mySelf.html`,
//sendMessageImg: cardItem.value['list'][0]['itemImg']
});
// #endif
// #ifndef MP-WEIXIN
window.open('https://work.weixin.qq.com/kfid/kfc08c55f4170e7fc9e')
// #endif
},
// rpx转px
rpxToPx(rpx) {
return rpx / 750 * this.windowWidth;
},
// px转rpx
pxToRpx(px) {
return px * 750 / this.windowWidth;
}
}
}
......@@ -84,20 +138,15 @@ export default {
cursor: pointer;
user-select: none;
z-index: 9999;
background-color: #007AFF; /* 默认背景色 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
.consultBtn{
display: flex;
align-items: center;
flex-direction: column;
color: #20279B;
font-size: 28rpx;
// .icon-kefu{
// width: 60rpx;
// height: 60rpx;
// color: #20279B;
// }
.icon-kefu{
font-size: 60rpx;
}
}
}
</style>
\ No newline at end of file
main.js
// import App from './App';
// // #ifndef VUE3
// import Vue from 'vue'
// App.mpType = 'app'
// const app = new Vue({
// ...App
// })
// app.$mount()
// // #endif
// // #ifdef VUE3
// import { createSSRApp } from 'vue'
// export function createApp() {
// const app = createSSRApp(App)
// return {
// app
// }
// }
// // #endif
// //#ifdef H5
// window.sessionStorage.setItem('firstEntryUrl',window.location.href.split('#')[0])
// // #endif
import App from './App';
import FloatingButton from '@/components/FloatingButton/FloatingButton.vue';
// #ifndef VUE3
import Vue from 'vue'
App.mpType = 'app'
// 全局注册悬浮按钮组件
Vue.component('FloatingButton', FloatingButton);
const app = new Vue({
...App
})
......
pages/index/index.vue
<template>
<view class="container">
<!-- 使用默认图标的悬浮按钮 -->
<FloatingButton ></FloatingButton>
<view class="homeHeader">
<view class="top">
<view class="one">
......@@ -193,6 +191,7 @@
import search from '@/components/search/search.vue';
import courseItem from "@/components/courseItem/courseItem.vue";
import {companyInfo} from "@/environments/environment";
export default {
data() {
return {
......
pages/personalCenter/personalCenter.vue
<template>
<view class="container">
<!-- 使用默认图标的悬浮按钮 -->
<FloatingButton ></FloatingButton>
<view class="myHeader">
<view class="left" @click="userinfo()">
<view
......@@ -90,6 +92,7 @@
import tabBar from '../../components/tabBar/tabBar.vue';
import api from "@/api/api";
import {companyInfo} from "@/environments/environment";
import FloatingButton from '@/components/FloatingButton/FloatingButton.vue';
export default {
data() {
return {
......
static/font1/demo_index.html
......@@ -55,9 +55,9 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe604;</span>
<span class="icon iconfont">&#xe116;</span>
<div class="name">客服</div>
<div class="code-name">&amp;#xe604;</div>
<div class="code-name">&amp;#xe116;</div>
</li>
<li class="dib">
......@@ -270,9 +270,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1750644432497') format('woff2'),
url('iconfont.woff?t=1750644432497') format('woff'),
url('iconfont.ttf?t=1750644432497') format('truetype');
src: url('iconfont.woff2?t=1750649292857') format('woff2'),
url('iconfont.woff?t=1750649292857') format('woff'),
url('iconfont.ttf?t=1750649292857') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
......
static/font1/iconfont.css
@font-face {
font-family: "iconfont"; /* Project id 4933433 */
src: url('iconfont.woff2?t=1750644432497') format('woff2'),
url('iconfont.woff?t=1750644432497') format('woff'),
url('iconfont.ttf?t=1750644432497') format('truetype');
src: url('iconfont.woff2?t=1750649292857') format('woff2'),
url('iconfont.woff?t=1750649292857') format('woff'),
url('iconfont.ttf?t=1750649292857') format('truetype');
}
.iconfont {
......@@ -14,7 +14,7 @@
}
.icon-kefu:before {
content: "\e604";
content: "\e116";
}
.icon-shuangyoujiantou:before {
......
static/font1/iconfont.json
......@@ -9,8 +9,8 @@
"icon_id": "518189",
"name": "客服",
"font_class": "kefu",
"unicode": "e604",
"unicode_decimal": 58884
"unicode": "e116",
"unicode_decimal": 57622
},
{
"icon_id": "6999657",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment