xuchao/h5-meike
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 全站 UI 按 Minimalist Modern 重设计，新增返回悬浮钮

Browse Source 
- 设计令牌层：mm-* CSS 变量与工具类、uView 换肤、优设标题黑字体
- 九个页面全部重写为新风格（列表/详情/下单/出行人/订单/支付成功/登录）
- 补齐 H5 运行时缺失的基础样式（uni-view/scroll-view/toast/swiper 等，App.vue 全局）
- 修复：详情头图轮播、预订须知弹层滚动、出行人数量按购买数限制、订单详情去箭头
- 新增 gmy-back-touch 返回悬浮钮，除首页外全页接入，点击返回上一页

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
jacobxu666
2026-08-05 12:48:45 +08:00
co-authored by Claude Opus 4.8
parent dd25c0ae63
commit 77e5cb9510
19 changed files with 2690 additions and 1335 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/ticket/select.vue
+172 -45
View File
@@ -1,27 +1,54 @@
<template>
<view>
<text class="text">需添加 &nbsp;{{value}}&nbsp;个出行人</text>
<view class="h_item" @click="toAddPerson">
<text class="text1">新增出行人</text>
<text class="text2">+</text>
</view>
<view class="item" v-for="(item,index) in list" :key="index">
<image src="https://aliyunoss.hn12301.net/sd/ticket_edit.png" style="width: 48rpx;height: 48rpx;" @click="toPerson(item)"></image>
<text style="margin-left: 24rpx;">{{item.name}}</text>
<text style="margin-left: 24rpx;">{{item.identityNo}}</text>
<view style="position: absolute;right: 0rpx;">
<u-checkbox v-model="item.isSelect" active-color="#457AF7"></u-checkbox>
<view class="page mm-page">
<gmy-back-touch></gmy-back-touch>
<!-- xuchao: 顶部提示徽章 —— 需添加的出行人数量 -->
<view class="tip mm-fade-up">
<view class="mm-badge">
<view class="mm-badge__dot"></view>
<text class="mm-badge__text">需添加 {{value}} 个出行人（已选 {{selectedCount}}）</text>
</view>
</view>
<view style="width: 702rpx;position: fixed;left: 0rpx;right: 0rpx;margin: 0 auto;bottom: calc(24rpx + env(safe-area-inset-bottom));">
<u-button shape="circle" size="default" style="background: linear-gradient(180deg, #FF9E49 0%, #ED3B1A 100%);color: #fff;" @click="select">完成</u-button>
</view>
<!-- xuchao: 新增出行人 —— 虚线描边引导卡 -->
<view class="add mm-fade-up" @click="toAddPerson">
<view class="add__icon mm-grad">
<u-icon name="plus" color="#ffffff" size="30"></u-icon>
</view>
<text class="add__text">新增出行人</text>
<u-icon name="arrow-right" color="#CBD5E1" size="28"></u-icon>
</view>
<!-- xuchao: 出行人列表 —— 整卡点击勾选，笔形图标进编辑 -->
<view class="list mm-stagger">
<view class="person mm-card mm-fade-up" v-for="(item,index) in list" :key="index" @click="toggle(item)">
<view class="person__avatar mm-grad">{{(item.name||'').charAt(0)}}</view>
<view class="person__info">
<view class="person__name">{{item.name}}</view>
<view class="person__id">{{item.identityNo}}</view>
</view>
<view class="person__edit" @click.stop="toPerson(item)">
<u-icon name="edit-pen" color="#64748B" size="36"></u-icon>
</view>
<view class="person__check" @click.stop>
<u-checkbox v-model="item.isSelect" active-color="#0052FF"></u-checkbox>
</view>
</view>
</view>
<!-- xuchao: 底部固定完成按钮（视口水平居中，宽屏下与页面列对齐） -->
<view class="bar">
<view class="mm-btn" @click="select">完成</view>
</view>
</view>
</template>
<script>
var that=''
import gmyBackTouch from "@/components/gmy-back-touch/gmy-back-touch.vue"
export default {
components: {
'gmy-back-touch': gmyBackTouch
},
data() {
return {
checked:true,
@@ -31,16 +58,34 @@ export default {
},
onLoad(e){
that=this
this.value=e.value
this.value=Number(e.value)
},
onShow(){
this.getMemberTouristMethod()
},
computed: {
// xuchao: 已勾选的出行人数量
selectedCount() {
return this.list.filter(item => item.isSelect).length
}
},
methods: {
// 选中某个复选框时，由checkbox时触发
checkboxChange(e) {
console.log(e);
},
// xuchao: 整卡点击即勾选/取消；勾选数达到需求量 value 后再勾选则提示拦截
toggle(item) {
if (!item.isSelect && this.selectedCount >= this.value) {
uni.showToast({
icon: 'none',
title: '只需 ' + this.value + ' 位出行人',
duration: 1500
})
return
}
item.isSelect = !item.isSelect
},
toAddPerson(){
uni.navigateTo({
url: 'person'
@@ -58,7 +103,7 @@ export default {
this.$set(item,'isSelect',false)
})
this.list=res.data
}
})
},
@@ -72,7 +117,7 @@ export default {
let pages = getCurrentPages(); //获取所有页面栈实例列表
let nowPage = pages[pages.length - 1]; //当前页页面实例
let prevPage = pages[pages.length - 2]; //上一页页面实例
prevPage.objitem = JSON.stringify(arr); //修改上一页面的 couponNumber 参数值为 value
prevPage.objitem = JSON.stringify(arr); //修改上一页面的 couponNumber 参数值为 value
uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
delta: 1
});
@@ -82,38 +127,120 @@ export default {
</script>
<style lang="less" scoped>
.text{
color: rgba(0, 0, 0, 0.8);
margin: 24rpx 0rpx 0rpx 24rpx;
font-size: 36rpx;
height: 88rpx;
font-weight: bold;
/* xuchao: 底部预留 220rpx，避免列表被固定完成按钮遮挡 */
.page {
padding: 32rpx 32rpx 220rpx;
}
.h_item{
width: 702rpx;
.tip {
display: flex;
}
.add {
margin-top: 24rpx;
display: flex;
margin-left: 24rpx;
justify-content: space-between;
border-bottom: 1px dashed #E1E1E1;
align-items: center;
padding-bottom: 24rpx;
.text1{
color:rgba(0, 0, 0, 0.8);
}
.text2{
color:#457AF7;
font-size: 40rpx;
font-weight: bold;
}
border: 2rpx dashed rgba(0, 82, 255, 0.4);
border-radius: 20rpx;
background: rgba(0, 82, 255, 0.04);
padding: 28rpx 24rpx;
transition: transform 0.15s ease;
}
.item{
width: 702rpx;
margin-left: 24rpx;
height: 112rpx;
.add:active {
transform: scale(0.985);
}
.add__icon {
flex: none;
width: 64rpx;
height: 64rpx;
border-radius: 50%;
display: flex;
align-items: center;
position: relative;
justify-content: center;
box-shadow: var(--mm-shadow-accent);
}
</style>
.add__text {
flex: 1;
margin-left: 20rpx;
font-size: 28rpx;
font-weight: 500;
color: var(--mm-accent);
}
.list {
margin-top: 24rpx;
display: flex;
flex-direction: column;
gap: 20rpx;
}
.person {
display: flex;
align-items: center;
padding: 28rpx 24rpx;
transition: transform 0.15s ease;
}
.person:active {
transform: scale(0.985);
}
.person__avatar {
flex: none;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 32rpx;
font-weight: 600;
box-shadow: var(--mm-shadow-accent);
}
.person__info {
flex: 1;
min-width: 0;
margin-left: 20rpx;
}
.person__name {
font-size: 30rpx;
font-weight: 600;
color: var(--mm-fg);
}
.person__id {
margin-top: 6rpx;
font-size: 22rpx;
letter-spacing: 0.04em;
color: var(--mm-muted-fg);
}
.person__edit {
flex: none;
padding: 0 24rpx 0 8rpx;
}
.person__check {
flex: none;
/* xuchao: 复选框仅作状态展示，勾选统一走整卡 toggle，数量上限才拦得住 */
pointer-events: none;
}
/* xuchao: 底部固定按钮 —— left/right 0 + margin auto 保证宽屏居中时与页面列对齐 */
.bar {
position: fixed;
left: 0;
right: 0;
margin: 0 auto;
width: 686rpx;
bottom: calc(32rpx + constant(safe-area-inset-bottom));
bottom: calc(32rpx + env(safe-area-inset-bottom));
z-index: 99;
}
</style>