refactor: 列表页清理死模块 + 卡片自适应 + 飘带改字 + 悬浮钮定位

按需求四项(桌面+手机实测):
1 删除搜索栏/筛选栏/u-loadmore/两个 u-picker 及其仅供它们使用的脚本
   (地区/类型方法与数据、search 等),onReachBottom 分页保留。
2 卡片 .nr_item 左右边距改百分比(3.2%)、去掉固定宽 702rpx 改 width:auto+border-box,
   右侧信息列改 flex:1,原售价宽改 100%,使左右边距随屏宽等比变化、实测左右相等。
3 补贴价飘带"工会补贴价"改"会员补贴价"。
4 悬浮按钮固定距屏幕底部 50px、左侧 12px;因定位已写死,移除与之矛盾的拖拽逻辑,
   保留单击直达;加轻微投影与按下回弹反馈。
注:模板未使用的旧样式 .item/.r_text1/.n_text1 按约定保留未删;
   其它页面"工会补贴价/工会会员补贴价"文案本次未动(仅改飘带)。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
xuchao
2026-07-21 15:37:30 +08:00
co-authored by Claude Opus 4.8
parent ded90fd423
commit 97b22650ad
2 changed files with 91 additions and 251 deletions
+13 -59
View File
@@ -1,25 +1,13 @@
<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>
<!-- xuchao: 门票订单悬浮按钮 —— 固定距屏幕底部 50px、左侧 12px,单击直达订单列表 -->
<view class="box" @click="onTap">
<image class="box__img" :src="mainImg" mode="aspectFill"></image>
</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,
@@ -27,70 +15,36 @@
}
},
methods: {
doNothing: function() {},
// xuchao: 点击悬浮球直接派发订单事件(无需先展开菜单)
// 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%;
left: 12px;
bottom: 50px;
width: 100upx;
height: 100upx;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
}
.box image {
.box__img {
width: 100upx;
height: 100upx;
z-index: 99;
transition: transform 0.12s ease;
// xuchao: 轻微投影 + 按下回弹,让悬浮钮有"浮起/可点"的反馈
filter: drop-shadow(0 6rpx 12rpx rgba(0, 0, 0, 0.18));
}
/* #ifdef H5 */
// xuchao: 宽屏(>768px)时页面列居中(375px),悬浮按钮同步锚定到列左缘,避免脱离页面
@media screen and (min-width: 769px) {
.box {
left: calc(50vw - 182px) !important;
}
.box:active .box__img {
transform: scale(0.9);
}
/* #endif */
</style>