Skip to content

C
CFFP-HB
Commit f07641bb by yuzhenWang
Options

解决冲突发布测试

parents 5d98bef8 8a87023f
Showing with 198 additions and 8 deletions
components/FloatingButton/FloatingButton.vue 0 → 100644
<template>
<!-- 悬浮按钮 -->
<view
class="floating-button"
:style="{ right: buttonRight + 'rpx', bottom: buttonBottom + 'rpx' }"
@touchstart="handleTouchStart"
@touchmove="handleTouchMove"
@touchend="handleTouchEnd"
@click="handleClick"
>
<!-- 默认内容 -->
<slot>
<view class="consultBtn">
<view class="iconfont icon-kefu"></view>
<view>咨询客服</view>
</view>
</slot>
</view>
</template>
<script>
export default {
name: 'FloatingButton',
data() {
return {
buttonRight: 10, // 初始位置，单位rpx
buttonBottom: 200, // 初始位置，单位rpx
startX: 0,
startY: 0,
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.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];
// 计算新的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;
// 限制按钮不超出屏幕（rpx单位）
const maxRight = this.windowWidth - this.rpxToPx(this.buttonWidth);
const maxBottom = this.windowHeight - this.rpxToPx(this.buttonHeight);
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() {
if (!this.isDragging) {
this.handleClick();
}
},
// 点击事件
handleClick() {
// 现在还没转化成小程序，暂时放在这
// #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;
}
}
}
</script>
<style scoped lang="scss">
.floating-button {
position: fixed;
width: 140rpx;
height: 140rpx;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
cursor: pointer;
user-select: none;
z-index: 9999;
.consultBtn{
display: flex;
align-items: center;
flex-direction: column;
color: #20279B;
font-size: 28rpx;
.icon-kefu{
font-size: 60rpx;
}
}
}
</style>
\ No newline at end of file
main.js
...@@ -21,4 +21,4 @@ export function createApp() { ...@@ -21,4 +21,4 @@ export function createApp() {
//#ifdef H5 //#ifdef H5
window.sessionStorage.setItem('firstEntryUrl',window.location.href.split('#')[0]) window.sessionStorage.setItem('firstEntryUrl',window.location.href.split('#')[0])
// #endif // #endif
\ No newline at end of file
pages/index/index.vue
...@@ -191,6 +191,7 @@ ...@@ -191,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
...@@ -91,6 +93,7 @@ ...@@ -91,6 +93,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,6 +55,12 @@ ...@@ -55,6 +55,12 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe116;</span>
<div class="name">客服</div>
<div class="code-name">&amp;#xe116;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xecc0;</span> <span class="icon iconfont">&#xecc0;</span>
<div class="name">双右箭头</div> <div class="name">双右箭头</div>
<div class="code-name">&amp;#xecc0;</div> <div class="code-name">&amp;#xecc0;</div>
...@@ -264,9 +270,9 @@ ...@@ -264,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=1750144165277') format('woff2'), src: url('iconfont.woff2?t=1750649292857') format('woff2'),
url('iconfont.woff?t=1750144165277') format('woff'), url('iconfont.woff?t=1750649292857') format('woff'),
url('iconfont.ttf?t=1750144165277') format('truetype'); url('iconfont.ttf?t=1750649292857') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
...@@ -293,6 +299,15 @@ ...@@ -293,6 +299,15 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-kefu"></span>
<div class="name">
客服
</div>
<div class="code-name">.icon-kefu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shuangyoujiantou"></span> <span class="icon iconfont icon-shuangyoujiantou"></span>
<div class="name"> <div class="name">
双右箭头 双右箭头
...@@ -609,6 +624,14 @@ ...@@ -609,6 +624,14 @@
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-kefu"></use>
</svg>
<div class="name">客服</div>
<div class="code-name">#icon-kefu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shuangyoujiantou"></use> <use xlink:href="#icon-shuangyoujiantou"></use>
</svg> </svg>
<div class="name">双右箭头</div> <div class="name">双右箭头</div>
......
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=1750144165277') format('woff2'), src: url('iconfont.woff2?t=1750649292857') format('woff2'),
url('iconfont.woff?t=1750144165277') format('woff'), url('iconfont.woff?t=1750649292857') format('woff'),
url('iconfont.ttf?t=1750144165277') format('truetype'); url('iconfont.ttf?t=1750649292857') format('truetype');
} }
.iconfont { .iconfont {
...@@ -13,6 +13,10 @@ ...@@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-kefu:before {
content: "\e116";
}
.icon-shuangyoujiantou:before { .icon-shuangyoujiantou:before {
content: "\ecc0"; content: "\ecc0";
} }
......
static/font1/iconfont.js
This source diff could not be displayed because it is too large. You can view the blob instead.
static/font1/iconfont.json
...@@ -6,6 +6,13 @@ ...@@ -6,6 +6,13 @@
"description": "", "description": "",
"glyphs": [ "glyphs": [
{ {
"icon_id": "518189",
"name": "客服",
"font_class": "kefu",
"unicode": "e116",
"unicode_decimal": 57622
},
{
"icon_id": "6999657", "icon_id": "6999657",
"name": "双右箭头", "name": "双右箭头",
"font_class": "shuangyoujiantou", "font_class": "shuangyoujiantou",
......
static/logo1.png
static/logo1.png

12.1 KB | W: | H:

static/logo1.png

687 KB | W: | H:

static/logo1.png
static/logo1.png
static/logo1.png
static/logo1.png
  • 2-up
  • Swipe
  • Onion skin
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