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"> <template name="gmy-float-touch">
<!-- xuchao: 直接显示"门票订单"悬浮按钮 —— 单击直达订单列表,仍可拖拽换位 --> <!-- xuchao: 门票订单悬浮按钮 —— 固定距屏幕底部 50px、左侧 12px,单击直达订单列表 -->
<view @touchmove.stop.prevent="doNothing"> <view class="box" @click="onTap">
<view class="box" style="z-index: 999;" :style="{top:top+'px',left:left+'px'}" <image class="box__img" :src="mainImg" mode="aspectFill"></image>
@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" @click="onTap">
<image :src="mainImg" mode="aspectFill"></image>
</view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
name: "gmy-float-touch", name: "gmy-float-touch",
data() {
return {
top: 500,
left: 3,
moved: false, // xuchao: 区分拖拽与点击,拖拽时不触发跳转
startX: 0,
startY: 0
}
},
props: { props: {
mainImg: { mainImg: {
type: String, type: String,
@@ -27,70 +15,36 @@
} }
}, },
methods: { methods: {
doNothing: function() {}, // xuchao: 单击直接派发订单事件
// xuchao: 点击悬浮球直接派发订单事件(无需先展开菜单)
onTap: function() { onTap: function() {
if (this.moved) {
this.moved = false
return
}
this.$emit("menuClick", 4) 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> </script>
<style lang="scss"> <style lang="scss">
// xuchao: 按钮整体放大 25%(原 80upx → 100upx)
.box { .box {
position: fixed; position: fixed;
left: 3upx; left: 12px;
top: 70%; bottom: 50px;
width: 100upx; width: 100upx;
height: 100upx; height: 100upx;
z-index: 999;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.box image { .box__img {
width: 100upx; width: 100upx;
height: 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 */ .box:active .box__img {
// xuchao: 宽屏(>768px)时页面列居中(375px),悬浮按钮同步锚定到列左缘,避免脱离页面 transform: scale(0.9);
@media screen and (min-width: 769px) {
.box {
left: calc(50vw - 182px) !important;
}
} }
/* #endif */
</style> </style>
+78 -192
View File
@@ -1,61 +1,27 @@
<template> <template>
<view> <view>
<view style="width: 750rpx;background-color: #fff;padding:15rpx 0rpx;" v-if="false"> <view class='nr_item' v-for="(item,index) in lookList" :key="index" @click="toDetail(item.id)">
<view style="width: 702rpx;margin-left: 24rpx;"> <image class="nr_img" :src="item.mainPic||'https://aliyunoss.hn12301.net/sd/all_moren.png'"></image>
<u-search placeholder="搜景区名称" bg-color='#F8F9FC' search-icon-color='#7C7C7E' v-model="obj.name" @search='search()'
:show-action='false' height='72'></u-search>
</view>
</view>
<view v-if="false"
style="width: 750rpx;height: 88rpx;background: #fff;padding: 0rpx 24rpx;display: flex;align-items: center;color: #000;position: relative;">
<view @tap="selectArae" style="display: flex;gap: 10rpx;">
{{cityName}}<u-icon :style="{transform:transform}" style="transition: 500ms;" name="arrow-down-fill"
size='20'></u-icon>
</view>
<view @tap="selectType" style="display: flex;gap: 10rpx;margin-left: 72rpx;">
{{typeName}}
<u-icon :style="{transform:transform1}" style="transition: 500ms;" name="arrow-down-fill"
size='20'></u-icon>
</view>
<view style="position: absolute;right: 0rpx;">
<u-checkbox-group @change='search()'>
<u-checkbox v-model="obj.todayAvailable" :label-disabled="false" active-color="#3B94E6"><text style="color: #000;">今日可用</text></u-checkbox>
</u-checkbox-group>
</view>
</view>
<view class='nr_item' v-for="(item,index) in lookList" :key="index" @click="toDetail(item.id)" >
<image :src="item.mainPic||'https://aliyunoss.hn12301.net/sd/all_moren.png'" style="width: 268rpx;height: 268rpx;"></image>
<view class="nr_item_r"> <view class="nr_item_r">
<text class="n_text">{{item.name||''}}</text> <text class="n_text">{{item.name||''}}</text>
<view style="display: flex;gap: 12rpx;flex-wrap: wrap;"> <view class="nr_tags">
<text :class="index1==0?'t_text1':index1==1?'t_text':index1==2?'t_text2':'t_text3'" v-for="(item1,index1) in ['节日福利/春游秋游','余额券','满减券']">{{item1}}</text> <text :class="index1==0?'t_text1':index1==1?'t_text':index1==2?'t_text2':'t_text3'"
v-for="(item1,index1) in ['节日福利/春游秋游','余额券','满减券']" :key="index1">{{item1}}</text>
</view> </view>
<view class="r_text">{{item.subTypeId}}</view> <view class="r_text">{{item.subTypeId}}</view>
<!-- <u-tag :text="" bg-color='#FEEFC3' color='#D17516' mode="dark" /> --> <view class="nr_origin">原售价<text
<view style="width: 380rpx;text-align: right;color:#4F4F4F;font-size: 12rpx;position: absolute;bottom: 60rpx;right:0rpx;"> class="nr_origin_num">{{(item.price/100).toFixed(0)}}</text>元</view>
原售价<text <view class="p_text">会员补贴价¥<text
style="font-size: 28rpx;text-decoration: line-through;font-weight: bold;">{{(item.price/100).toFixed(0)}}</text>元 class="p_num">{{(item.unitPrice/100).toFixed(0)}}</text>元</view>
</view>
<view class="p_text">工会补贴价¥<text
style="font-size: 32rpx;font-style: italic;font-weight: bold;margin-bottom: 8rpx;">{{(item.unitPrice/100).toFixed(0)}}</text>元
</view>
</view> </view>
</view> </view>
<u-loadmore :status="status" />
<u-picker mode="selector" v-model="show" :range="selector1" @close='selectAraeInput' confirm-color='#3B94E6' range-key="name"
@confirm='araeConfirm'></u-picker>
<u-picker mode="selector" v-model="show1" :range="selector" @close='selectTypeInput' confirm-color='#3B94E6' range-key="label"
@confirm='typeConfirm'></u-picker>
<!-- xuchao: 订单悬浮按钮 --> <!-- xuchao: 订单悬浮按钮 -->
<gmy-float-touch :mainImg="mainImg" @menuClick="floatTouchClick"></gmy-float-touch> <gmy-float-touch :mainImg="mainImg" @menuClick="floatTouchClick"></gmy-float-touch>
</view> </view>
</template> </template>
<script> <script>
// xuchao: 门票列表页(启动页/入口页)—— 进页必须登录 // xuchao: 门票列表页(启动页/入口页)
import auth from '@/common/auth.js' import auth from '@/common/auth.js'
import gmyFloatTouch from "@/components/gmy-float-touch/gmy-float-touch.vue" import gmyFloatTouch from "@/components/gmy-float-touch/gmy-float-touch.vue"
@@ -65,20 +31,9 @@
data() { data() {
return { return {
mainImg: "../../static/logo4.png", mainImg: "../../static/logo4.png",
status: 'loadmore', pageAll: 2,
keyword: '', isLoad: true,
transform: 'rotate(0deg)', lookList: [],
transform1: 'rotate(0deg)',
cityName: '全部地区',
typeName: '全部类型',
icon: true,
show: false,
show1: false,
icon1: true,
selector1: [{id:'',name:'全部地区'}],
selector: [{id:'',label:'全部类型'}],
checked: false,
page: 1,
obj: { obj: {
"name": "", "name": "",
"typeId": "", "typeId": "",
@@ -86,70 +41,33 @@
"pageSize": 10, "pageSize": 10,
"pageNum": 1, "pageNum": 1,
"todayAvailable": false "todayAvailable": false
}, }
pageAll:2,
isLoad:true,
lookList:[]
} }
}, },
onLoad() { onLoad() {
that = this that = this
// xuchao: 未登录则跳登录页,登录成功后回跳本页 // xuchao: 未登录则(正式)跳登录页 / (开发)静默假登录
if (!auth.requireLogin('/pages/ticket/scenic')) return if (!auth.requireLogin('/pages/ticket/scenic')) return
this.getTicketsTypesMethod()
this.getTicketsCitiesMethod()
this.queryTicketsPageMethod() this.queryTicketsPageMethod()
}, },
onReachBottom() { onReachBottom() {
this.queryTicketsPageMethod() this.queryTicketsPageMethod()
}, },
methods: { methods: {
getTicketsCitiesMethod(){
this.selector1=[{id:'',name:'全部地区'}]
this.$u.api.getTicketsCities().then(res => {
if (res) {
res.data.forEach(item=>{
this.selector1.push({id:item.id,name:item.name})
})
}
})
},
getTicketsTypesMethod(){
this.selector=[{id:'',label:'全部类型'}]
this.$u.api.getTicketsTypes().then(res => {
if (res) {
console.log(res.data);
res.data.forEach(item=>{
this.selector.push({id:item.id,label:item.label})
})
}
})
},
queryTicketsPageMethod() { queryTicketsPageMethod() {
if (that.obj.pageNum <= that.pageAll&&this.isLoad) { if (this.obj.pageNum <= this.pageAll && this.isLoad) {
this.isLoad=false this.isLoad = false
this.$u.api.queryTicketsPage(this.obj).then(res => { this.$u.api.queryTicketsPage(this.obj).then(res => {
this.isLoad=true this.isLoad = true
that.obj.pageNum = that.obj.pageNum * 1 + 1; this.obj.pageNum = this.obj.pageNum * 1 + 1
that.total = res.data.total this.pageAll = Math.ceil(res.data.total / 10)
that.pageAll = Math.ceil(res.data.total / 10) this.lookList = this.lookList.concat(res.data.list)
if (that.page == 2) { })
that.lookList = res.data.list
} else {
that.lookList = that.lookList.concat(res.data.list)
}
if (that.page > that.pageAll) {
that.status = "nomore"
}
})
} }
}, },
toDetail(e) { toDetail(e) {
uni.navigateTo({ uni.navigateTo({
url: 'scenicdetail?id='+e url: 'scenicdetail?id=' + e
}) })
}, },
// xuchao: 悬浮按钮 —— 跳门票订单列表 // xuchao: 悬浮按钮 —— 跳门票订单列表
@@ -159,64 +77,6 @@
url: '/pages/ticket/orderlist' url: '/pages/ticket/orderlist'
}) })
} }
},
selectArae() {
this.icon = !this.icon
this.show = !this.show
if (this.icon) {
this.transform = 'rotate(0deg)'
} else {
this.transform = 'rotate(180deg)'
}
},
selectAraeInput(e) {
console.log(e);
this.icon = !this.icon
this.show = e
if (this.icon) {
this.transform = 'rotate(0deg)'
} else {
this.transform = 'rotate(180deg)'
}
},
selectTypeInput(e) {
this.icon1 = !this.icon1
this.show1 = e
if (this.icon1) {
this.transform1 = 'rotate(0deg)'
} else {
this.transform1 = 'rotate(180deg)'
}
},
search(){
this.obj.pageNum=1
this.pageAll=2
this.lookList=[]
this.queryTicketsPageMethod()
},
selectType() {
this.icon1 = !this.icon1
this.show1 = !this.show1
if (this.icon1) {
this.transform1 = 'rotate(0deg)'
} else {
this.transform1 = 'rotate(180deg)'
}
},
typeConfirm(e) {
console.log(e);
this.typeName = this.selector[e[0]].label
this.obj.typeId= this.selector[e[0]].id
this.search()
},
araeConfirm(e) {
this.cityName=this.selector1[e[0]].name
this.obj.cityId=this.selector1[e[0]].id
this.search()
} }
} }
} }
@@ -229,20 +89,36 @@
</style> </style>
<style scoped lang="less"> <style scoped lang="less">
.nr_item { .nr_item {
width: 702rpx; // xuchao: 左右边距用百分比,随屏幕宽度等比变化;宽度自适应(去掉固定 702rpx)
width: auto;
box-sizing: border-box;
margin: 24rpx 3.2% 0;
display: flex; display: flex;
margin: 24rpx 24rpx 0rpx 24rpx;
background: #fff; background: #fff;
padding: 12rpx; padding: 12rpx;
.nr_img {
width: 268rpx;
height: 268rpx;
flex: none;
}
.nr_item_r { .nr_item_r {
width: 390rpx; // xuchao: 右侧信息列改为弹性填充,配合卡片宽度自适应
flex: 1;
min-width: 0;
margin-left: 20rpx; margin-left: 20rpx;
display: flex; display: flex;
gap: 8rpx; gap: 8rpx;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
.nr_tags {
display: flex;
gap: 12rpx;
flex-wrap: wrap;
}
.p_text { .p_text {
position: absolute; position: absolute;
bottom: 0rpx; bottom: 0rpx;
@@ -258,9 +134,32 @@
padding-left: 18rpx; padding-left: 18rpx;
border-radius: 4rpx; border-radius: 4rpx;
} }
.p_num {
font-size: 32rpx;
font-style: italic;
font-weight: bold;
margin-bottom: 8rpx;
}
.nr_origin {
position: absolute;
bottom: 60rpx;
right: 0rpx;
width: 100%;
text-align: right;
color: #4F4F4F;
font-size: 12rpx;
}
.nr_origin_num {
font-size: 28rpx;
text-decoration: line-through;
font-weight: bold;
}
.r_text { .r_text {
width: 390rpx; width: 100%;
overflow: hidden !important; overflow: hidden !important;
text-overflow: ellipsis !important; text-overflow: ellipsis !important;
display: -webkit-box !important; display: -webkit-box !important;
@@ -268,15 +167,7 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
font-size: 20rpx; font-size: 20rpx;
} }
.r_text1 {
width: 390rpx;
overflow: hidden !important;
text-overflow: ellipsis !important;
display: -webkit-box !important;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
font-size: 20rpx;
}
.n_text { .n_text {
color: #008F90; color: #008F90;
font-weight: bolder; font-weight: bolder;
@@ -287,17 +178,7 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
font-size: 32rpx; font-size: 32rpx;
} }
.n_text1{
color: #585858;
font-size: 28rpx;
font-weight: bold;
overflow: hidden !important;
text-overflow: ellipsis !important;
display: -webkit-box !important;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
font-size: 24rpx;
}
.t_text { .t_text {
background-color: #FDEEC3; background-color: #FDEEC3;
font-size: 18rpx; font-size: 18rpx;
@@ -305,6 +186,7 @@
color: #D57817; color: #D57817;
border-radius: 4rpx; border-radius: 4rpx;
} }
.t_text1 { .t_text1 {
background-color: #FDF4ED; background-color: #FDF4ED;
font-size: 18rpx; font-size: 18rpx;
@@ -312,6 +194,7 @@
color: #AF4744; color: #AF4744;
border-radius: 4rpx; border-radius: 4rpx;
} }
.t_text2 { .t_text2 {
background-color: #cbebfb; background-color: #cbebfb;
font-size: 18rpx; font-size: 18rpx;
@@ -319,6 +202,7 @@
color: #6ba0b3; color: #6ba0b3;
border-radius: 4rpx; border-radius: 4rpx;
} }
.t_text3 { .t_text3 {
background-color: #F0F1F5; background-color: #F0F1F5;
font-size: 18rpx; font-size: 18rpx;
@@ -328,6 +212,8 @@
} }
} }
} }
// 以下为旧版遗留、当前模板未使用的样式(.item / .r_text1 / .n_text1),按约定仅提示不删
.item { .item {
width: 702rpx; width: 702rpx;
padding: 12rpx; padding: 12rpx;
@@ -384,4 +270,4 @@
line-height: 36rpx; line-height: 36rpx;
} }
} }
</style> </style>