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:
co-authored by
Claude Opus 4.8
parent
ded90fd423
commit
97b22650ad
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user