xuchaoandClaude Opus 4.8
73be4f7d73
实测修正（桌面+手机双端验证）： 1 列表左右宽度一致：宽屏下页面列居中、两侧等宽灰底加阴影。 踩坑：uni-page-body 框架默认 display:inline，使 width/margin 失效，需先改 block； 且居中宽度不能用 rpx（750rpx 恒等于整屏宽，会被编译成当前视口宽），改用固定 375px （等于框架 >768px 锁定的 rpx 基准）；body 底色加 important 压过页面级 page 背景。 2 悬浮订单按钮：整体放大 25%（80upx 改 100upx），单击直达门票订单列表， 去掉先点订单再点门票的两步展开菜单；保留拖拽并正确区分拖拽与点击； 清理因此废弃的展开逻辑与无用 imgLists。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
97 lines
2.4 KiB
Vue
97 lines
2.4 KiB
Vue
<template name="gmy-float-touch">
|
||
<!-- xuchao: 直接显示"门票订单"悬浮按钮 —— 单击直达订单列表，仍可拖拽换位 -->
|
||
<view @touchmove.stop.prevent="doNothing">
|
||
<view class="box" style="z-index: 999;" :style="{top:top+'px',left:left+'px'}"
|
||
@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" @click="onTap">
|
||
<image :src="mainImg" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "gmy-float-touch",
|
||
data() {
|
||
return {
|
||
top: 500,
|
||
left: 3,
|
||
moved: false, // xuchao: 区分拖拽与点击，拖拽时不触发跳转
|
||
startX: 0,
|
||
startY: 0
|
||
}
|
||
},
|
||
props: {
|
||
mainImg: {
|
||
type: String,
|
||
default: "../../static/main.png"
|
||
}
|
||
},
|
||
methods: {
|
||
doNothing: function() {},
|
||
// xuchao: 点击悬浮球直接派发订单事件（无需先展开菜单）
|
||
onTap: function() {
|
||
if (this.moved) {
|
||
this.moved = false
|
||
return
|
||
}
|
||
this.$emit("menuClick", 4)
|
||
},
|
||
touchstart: function(e) {
|
||
this.moved = false
|
||
this.startX = e.touches[0].pageX
|
||
this.startY = e.touches[0].pageY
|
||
},
|
||
touchmove: function(e) {
|
||
var position = e.touches[0]
|
||
// 移动超过阈值才视为拖拽，避免轻触误判
|
||
if (Math.abs(position.pageX - this.startX) > 5 || Math.abs(position.pageY - this.startY) > 5) {
|
||
this.moved = true
|
||
}
|
||
var wHeight = this.getSystemInfo('H')
|
||
if (position.pageY > 50 && position.pageY + 60 < wHeight) {
|
||
this.top = position.pageY - 25
|
||
}
|
||
this.left = position.pageX - 25
|
||
},
|
||
touchend: function(e) {
|
||
var wWidth = this.getSystemInfo('W')
|
||
// 松手时吸附到较近的一侧屏幕边缘
|
||
this.left = e.changedTouches[0].clientX > wWidth * 0.5 ? wWidth - 56 : 3
|
||
},
|
||
getSystemInfo: function(type) {
|
||
const screen = uni.getSystemInfoSync()
|
||
return type === 'H' ? screen.windowHeight : screen.windowWidth
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
// xuchao: 按钮整体放大 25%（原 80upx → 100upx）
|
||
.box {
|
||
position: fixed;
|
||
left: 3upx;
|
||
top: 70%;
|
||
width: 100upx;
|
||
height: 100upx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.box image {
|
||
width: 100upx;
|
||
height: 100upx;
|
||
z-index: 99;
|
||
}
|
||
|
||
/* #ifdef H5 */
|
||
// xuchao: 宽屏（>768px）时页面列居中（375px），悬浮按钮同步锚定到列左缘，避免脱离页面
|
||
@media screen and (min-width: 769px) {
|
||
.box {
|
||
left: calc(50vw - 182px) !important;
|
||
}
|
||
}
|
||
/* #endif */
|
||
</style>
|