feat: 全站 UI 按 Minimalist Modern 重设计，新增返回悬浮钮
- 设计令牌层：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
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
dd25c0ae63
commit
77e5cb9510
+162
-38
@@ -1,38 +1,67 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="item" v-for="(item,index) in lookList" :key="index" @tap='toOrderDetail(item.id)'>
|
||||
<view class="item_h">
|
||||
<text>订单编号：{{item.id}}</text>
|
||||
<text>{{getText(item.orderStatus,1)}}</text>
|
||||
<view class="page mm-page">
|
||||
<gmy-back-touch></gmy-back-touch>
|
||||
<!-- xuchao: 页头徽章（自定义导航无标题栏，补一个页面标识） -->
|
||||
<view class="head mm-fade-up">
|
||||
<view class="mm-badge">
|
||||
<view class="mm-badge__dot"></view>
|
||||
<text class="mm-badge__text">门票订单</text>
|
||||
</view>
|
||||
<view class="item_rq">
|
||||
<view style="font-weight: bold;color: #000;">{{item.skuName}}</view>
|
||||
<view style="width: 606rpx;display: flex;justify-content: space-between;color: rgba(0, 0, 0, 0.8);margin-top: 24rpx;">
|
||||
<text>使用日期：{{item.orderDate}}</text>
|
||||
<text>￥{{(item.orderAmount/100).toFixed(2)}}</text>
|
||||
</view>
|
||||
|
||||
<!-- xuchao: 订单卡片列表 —— 整卡可点进详情 -->
|
||||
<view class="list mm-stagger">
|
||||
<view class="order mm-card mm-fade-up" v-for="(item,index) in lookList" :key="index"
|
||||
@tap="toOrderDetail(item.id)">
|
||||
<view class="order__head">
|
||||
<text class="order__no">订单编号：{{item.id}}</text>
|
||||
<text :class="['order__status', statusClass(item.orderStatus)]">{{getText(item.orderStatus,1)}}</text>
|
||||
</view>
|
||||
<view class="order__body">
|
||||
<view class="order__name">{{item.skuName}}</view>
|
||||
<view class="order__foot">
|
||||
<text class="order__date">使用日期：{{item.orderDate}}</text>
|
||||
<view class="order__price">
|
||||
<text class="order__cur">¥</text>
|
||||
<text class="order__num mm-display mm-grad-text">{{(item.orderAmount/100).toFixed(2)}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore :status="status" />
|
||||
|
||||
<!-- xuchao: 空态（首次请求返回空列表才显示） -->
|
||||
<view class="empty mm-fade-up" v-if="showEmpty">
|
||||
<u-icon name="empty-order" color="#CBD5E1" size="120"></u-icon>
|
||||
<view class="empty__text">暂无相关订单</view>
|
||||
</view>
|
||||
|
||||
<u-loadmore v-if="lookList.length > 0" :status="status" />
|
||||
</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{
|
||||
status: 'loadmore',
|
||||
obj: {
|
||||
"orderPhone": "",
|
||||
"orderStatus": "",
|
||||
"orderStatus": "",
|
||||
"pageSize": 10,
|
||||
"pageNum": 1,
|
||||
|
||||
|
||||
},
|
||||
pageAll:2,
|
||||
isLoad:true,
|
||||
lookList:[],
|
||||
// xuchao: 首次请求是否已返回，用于区分"加载中"与"真没数据"
|
||||
firstLoaded: false,
|
||||
orderList:[{
|
||||
text:'待支付',
|
||||
value:'WAITPAY',
|
||||
@@ -64,11 +93,16 @@
|
||||
}]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showEmpty() {
|
||||
return this.firstLoaded && this.lookList.length === 0
|
||||
}
|
||||
},
|
||||
onLoad(){
|
||||
that=this
|
||||
this.obj.orderPhone=uni.getStorageSync('phone')
|
||||
|
||||
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.pageAll=2
|
||||
@@ -93,11 +127,19 @@
|
||||
return str
|
||||
}
|
||||
},
|
||||
// xuchao: 订单状态 → 徽章色调（待办类用主题蓝强调，终态用中性灰）
|
||||
statusClass(e) {
|
||||
if (['WAITPAY', 'WAITSEND', 'REFUNDING'].indexOf(e) > -1) {
|
||||
return 'order__status--active'
|
||||
}
|
||||
return ''
|
||||
},
|
||||
queryTicketsOrderPageMethod() {
|
||||
if (that.obj.pageNum <= that.pageAll&&this.isLoad) {
|
||||
this.isLoad=false
|
||||
this.$u.api.queryTicketsOrderPage(this.obj).then(res => {
|
||||
this.isLoad=true
|
||||
this.firstLoaded = true
|
||||
that.obj.pageNum = that.obj.pageNum * 1 + 1;
|
||||
that.pageAll = Math.ceil(res.data.total / 10)
|
||||
if (that.page == 2) {
|
||||
@@ -120,29 +162,111 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page{
|
||||
background: #F8F9FC;
|
||||
padding-top: 24rpx;
|
||||
<style lang="less" scoped>
|
||||
.page {
|
||||
padding: 32rpx 32rpx 40rpx;
|
||||
}
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.order {
|
||||
padding: 24rpx;
|
||||
transition: transform 0.2s ease-out, box-shadow 0.3s ease-out;
|
||||
}
|
||||
|
||||
.order:active {
|
||||
transform: scale(0.985);
|
||||
box-shadow: var(--mm-shadow-sm);
|
||||
}
|
||||
|
||||
.order__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.order__no {
|
||||
font-size: 22rpx;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--mm-muted-fg);
|
||||
}
|
||||
|
||||
.order__status {
|
||||
flex: none;
|
||||
font-size: 22rpx;
|
||||
color: var(--mm-muted-fg);
|
||||
background: var(--mm-muted);
|
||||
border-radius: 999rpx;
|
||||
padding: 4rpx 20rpx;
|
||||
}
|
||||
|
||||
/* xuchao: 待办类状态（待支付/出票中/退款中）—— 主题蓝强调 */
|
||||
.order__status--active {
|
||||
color: var(--mm-accent);
|
||||
background: rgba(0, 82, 255, 0.08);
|
||||
}
|
||||
|
||||
.order__body {
|
||||
margin-top: 20rpx;
|
||||
background: var(--mm-muted);
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.order__name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: var(--mm-fg);
|
||||
}
|
||||
|
||||
.order__foot {
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.order__date {
|
||||
font-size: 24rpx;
|
||||
color: var(--mm-muted-fg);
|
||||
}
|
||||
|
||||
.order__price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.order__cur {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: var(--mm-accent);
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.order__num {
|
||||
font-size: 40rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.empty {
|
||||
margin-top: 160rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.empty__text {
|
||||
font-size: 26rpx;
|
||||
color: var(--mm-muted-fg);
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.item{
|
||||
width: 750rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 24rpx;
|
||||
background: #fff;
|
||||
.item_h{
|
||||
width: 702rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.item_rq{
|
||||
width: 654rpx;
|
||||
margin: 24rpx 24rpx 0rpx 24rpx;
|
||||
background: #F8F9FC;
|
||||
padding: 24rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user