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 @@ ...@@ -2,7 +2,7 @@
<!-- 悬浮按钮 --> <!-- 悬浮按钮 -->
<view <view
class="floating-button" class="floating-button"
:style="{ left: buttonLeft + 'px', top: buttonTop + 'px' }" :style="{ right: buttonRight + 'rpx', bottom: buttonBottom + 'rpx' }"
@touchstart="handleTouchStart" @touchstart="handleTouchStart"
@touchmove="handleTouchMove" @touchmove="handleTouchMove"
@touchend="handleTouchEnd" @touchend="handleTouchEnd"
...@@ -11,8 +11,8 @@ ...@@ -11,8 +11,8 @@
<!-- 默认内容 --> <!-- 默认内容 -->
<slot> <slot>
<view class="consultBtn"> <view class="consultBtn">
<text class="iconfont icon-kefu"></text> <view class="iconfont icon-kefu"></view>
<text>咨询客服</text> <view>咨询客服</view>
</view> </view>
</slot> </slot>
</view> </view>
...@@ -23,38 +23,69 @@ export default { ...@@ -23,38 +23,69 @@ export default {
name: 'FloatingButton', name: 'FloatingButton',
data() { data() {
return { return {
buttonLeft: 310, // 初始位置 buttonRight: 10, // 初始位置，单位rpx
buttonTop: 200, // 初始位置 buttonBottom: 200, // 初始位置，单位rpx
startX: 0, startX: 0,
startY: 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: { methods: {
// 更新窗口尺寸
updateWindowSize() {
const systemInfo = uni.getSystemInfoSync();
this.windowWidth = systemInfo.windowWidth;
this.windowHeight = systemInfo.windowHeight;
},
// 触摸开始事件 // 触摸开始事件
handleTouchStart(event) { handleTouchStart(event) {
const touch = event.touches[0]; 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; this.isDragging = false;
}, },
// 触摸移动事件 // 触摸移动事件
handleTouchMove(event) { handleTouchMove(event) {
event.preventDefault(); // 阻止默认滚动行为 event.preventDefault(); // 阻止默认滚动行为
const touch = event.touches[0]; 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; this.isDragging = true;
// 限制按钮不超出屏幕 // 限制按钮不超出屏幕（rpx单位）
const windowWidth = uni.getSystemInfoSync().windowWidth; const maxRight = this.windowWidth - this.rpxToPx(this.buttonWidth);
const windowHeight = uni.getSystemInfoSync().windowHeight; const maxBottom = this.windowHeight - this.rpxToPx(this.buttonHeight);
const buttonSize = 80; // 按钮大小
if (this.buttonLeft < 0) this.buttonLeft = 0; if (newRight < 0) {
if (this.buttonLeft > windowWidth - buttonSize) this.buttonLeft = windowWidth - buttonSize; this.buttonRight = this.pxToRpx(0);
if (this.buttonTop < 0) this.buttonTop = 0; } else if (newRight > maxRight) {
if (this.buttonTop > windowHeight - buttonSize) this.buttonTop = windowHeight - buttonSize; this.buttonRight = this.pxToRpx(maxRight);
}
if (newBottom < 0) {
this.buttonBottom = this.pxToRpx(0);
} else if (newBottom > maxBottom) {
this.buttonBottom = this.pxToRpx(maxBottom);
}
}, },
// 触摸结束事件 // 触摸结束事件
handleTouchEnd() { handleTouchEnd() {
...@@ -64,7 +95,30 @@ export default { ...@@ -64,7 +95,30 @@ export default {
}, },
// 点击事件 // 点击事件
handleClick() { 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 { ...@@ -84,20 +138,15 @@ export default {
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
z-index: 9999; z-index: 9999;
background-color: #007AFF; /* 默认背景色 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
.consultBtn{ .consultBtn{
display: flex;
align-items: center;
flex-direction: column;
color: #20279B; color: #20279B;
font-size: 28rpx; font-size: 28rpx;
// .icon-kefu{ .icon-kefu{
// width: 60rpx; font-size: 60rpx;
// height: 60rpx; }
// color: #20279B;
// }
} }
} }
</style> </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 App from './App';
import FloatingButton from '@/components/FloatingButton/FloatingButton.vue';
// #ifndef VUE3 // #ifndef VUE3
import Vue from 'vue' import Vue from 'vue'
App.mpType = 'app' App.mpType = 'app'
// 全局注册悬浮按钮组件
Vue.component('FloatingButton', FloatingButton);
const app = new Vue({ const app = new Vue({
...App ...App
}) })
......
pages/index/index.vue
<template> <template>
<view class="container"> <view class="container">
<!-- 使用默认图标的悬浮按钮 -->
<FloatingButton ></FloatingButton>
<view class="homeHeader"> <view class="homeHeader">
<view class="top"> <view class="top">
<view class="one"> <view class="one">
...@@ -193,6 +191,7 @@ ...@@ -193,6 +191,7 @@
import search from '@/components/search/search.vue'; import search from '@/components/search/search.vue';
import courseItem from "@/components/courseItem/courseItem.vue"; import courseItem from "@/components/courseItem/courseItem.vue";
import {companyInfo} from "@/environments/environment"; import {companyInfo} from "@/environments/environment";
export default { export default {
data() { data() {
return { return {
......
pages/personalCenter/personalCenter.vue
<template> <template>
<view class="container"> <view class="container">
<!-- 使用默认图标的悬浮按钮 -->
<FloatingButton ></FloatingButton>
<view class="myHeader"> <view class="myHeader">
<view class="left" @click="userinfo()"> <view class="left" @click="userinfo()">
<view <view
...@@ -90,6 +92,7 @@ ...@@ -90,6 +92,7 @@
import tabBar from '../../components/tabBar/tabBar.vue'; import tabBar from '../../components/tabBar/tabBar.vue';
import api from "@/api/api"; import api from "@/api/api";
import {companyInfo} from "@/environments/environment"; import {companyInfo} from "@/environments/environment";
import FloatingButton from '@/components/FloatingButton/FloatingButton.vue';
export default { export default {
data() { data() {
return { return {
......
static/font1/demo_index.html
...@@ -55,9 +55,9 @@ ...@@ -55,9 +55,9 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe604;</span> <span class="icon iconfont">&#xe116;</span>
<div class="name">客服</div> <div class="name">客服</div>
<div class="code-name">&amp;#xe604;</div> <div class="code-name">&amp;#xe116;</div>
</li> </li>
<li class="dib"> <li class="dib">
...@@ -270,9 +270,9 @@ ...@@ -270,9 +270,9 @@
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1750644432497') format('woff2'), src: url('iconfont.woff2?t=1750649292857') format('woff2'),
url('iconfont.woff?t=1750644432497') format('woff'), url('iconfont.woff?t=1750649292857') format('woff'),
url('iconfont.ttf?t=1750644432497') format('truetype'); url('iconfont.ttf?t=1750649292857') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
......
static/font1/iconfont.css
@font-face { @font-face {
font-family: "iconfont"; /* Project id 4933433 */ font-family: "iconfont"; /* Project id 4933433 */
src: url('iconfont.woff2?t=1750644432497') format('woff2'), src: url('iconfont.woff2?t=1750649292857') format('woff2'),
url('iconfont.woff?t=1750644432497') format('woff'), url('iconfont.woff?t=1750649292857') format('woff'),
url('iconfont.ttf?t=1750644432497') format('truetype'); url('iconfont.ttf?t=1750649292857') format('truetype');
} }
.iconfont { .iconfont {
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
} }
.icon-kefu:before { .icon-kefu:before {
content: "\e604"; content: "\e116";
} }
.icon-shuangyoujiantou:before { .icon-shuangyoujiantou:before {
......
static/font1/iconfont.json
...@@ -9,8 +9,8 @@ ...@@ -9,8 +9,8 @@
"icon_id": "518189", "icon_id": "518189",
"name": "客服", "name": "客服",
"font_class": "kefu", "font_class": "kefu",
"unicode": "e604", "unicode": "e116",
"unicode_decimal": 58884 "unicode_decimal": 57622
}, },
{ {
"icon_id": "6999657", "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