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/paysuccess.vue
+98 -73
View File
@@ -1,31 +1,36 @@
<template>
<view v-if="obj">
<view class="od_top">
<view class="od_top_first">
<image src="http://cdn.hntgov.net/online/static/ps_ps.png"></image>支付成功
<view v-if="obj" class="page mm-page">
<gmy-back-touch></gmy-back-touch>
<!-- xuchao: 成功状态英雄区 —— 渐变对勾 + 柔光 -->
<view class="hero mm-fade-up">
<view class="hero__icon mm-grad">
<u-icon name="checkmark" color="#ffffff" size="64"></u-icon>
</view>
<view class="hero__title mm-display">支付成功</view>
<view class="hero__sub">门票订单已提交，请留意出票通知</view>
</view>
<view style="background-color: #fff;">
<view class="od_sh">
<image style="width: 32rpx;height: 28rpx;" src="http://cdn.hntgov.net/online/static/pas_ps.png">
</image>
<view class="od_sh_right">
<!-- xuchao: 支付方式改为微信支付 -->
<text style="color: #696969;">支付方式：<text style="color: #3D3D3D;">微信支付</text></text>
<text style="color: #696969;padding-top: 16rpx;">实付金额：<text
style="color: #3D3D3D;">￥{{(obj.order.orderAmount/100).toFixed(2)||0}}</text></text>
<!-- xuchao: 支付信息卡 -->
<view class="card mm-card mm-fade-up">
<view class="row">
<text class="row__label">支付方式</text>
<text class="row__val">微信支付</text>
</view>
<view class="row">
<text class="row__label">实付金额</text>
<view class="row__price">
<text class="row__cur">¥</text>
<text class="row__num mm-display mm-grad-text">{{(obj.order.orderAmount/100).toFixed(2)||0}}</text>
</view>
</view>
<view class="od_line"></view>
<view class="ps_item">
<!-- xuchao: 接通"查看订单"入口（旧版此按钮被注释成了死页面） -->
<view class="ps_item_item" style="color: #181617;" @tap='seeOrder()'>查看订单</view>
<view style="width: 1rpx;height: 48rpx;background-color: #E7E6E6;"></view>
<view class="ps_item_item" style="color: #ED2D38;" @tap='toMall()'>继续逛逛</view>
</view>
</view>
<!-- xuchao: 操作按钮 —— 主操作渐变、次操作描边 -->
<view class="acts mm-fade-up">
<view class="mm-btn" @tap="seeOrder()">查看订单</view>
<view class="mm-btn-ghost" @tap="toMall()">继续逛逛</view>
</view>
<u-toast ref="uToast" />
</view>
</template>
@@ -33,7 +38,11 @@
<script>
// xuchao: 支付成功页 —— 支付完成后跳入，轮询订单状态直到后端确认
var that = ''
import gmyBackTouch from "@/components/gmy-back-touch/gmy-back-touch.vue"
export default {
components: {
'gmy-back-touch': gmyBackTouch
},
data() {
return {
id: '',
@@ -90,74 +99,90 @@
}
</script>
<style>
page {
background-color: #f7f7f7;
}
</style>
<style scoped lang="scss">
.ps_item {
width: 690rpx;
margin-left: 30rpx;
height: 96rpx;
align-items: center;
display: flex;
.ps_item_item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
font-weight: bold;
}
<style scoped lang="less">
.page {
padding: 96rpx 32rpx 60rpx;
}
.od_top {
width: 750rpx;
height: 210rpx;
background: linear-gradient(90deg, #FF3F3C -8%, #FFA371 107%);
padding-top: 56rpx;
padding-left: 70rpx;
/* ---------- 英雄区 ---------- */
.hero {
display: flex;
flex-direction: column;
align-items: center;
}
.od_top_first {
.hero__icon {
width: 128rpx;
height: 128rpx;
border-radius: 50%;
display: flex;
align-items: center;
color: #FFF;
font-size: 34rpx;
justify-content: center;
box-shadow: var(--mm-shadow-accent), 0 0 0 24rpx rgba(0, 82, 255, 0.06);
}
.od_top_first image {
width: 50rpx;
height: 50rpx;
margin-right: 20rpx;
.hero__title {
margin-top: 36rpx;
font-size: 48rpx;
color: var(--mm-fg);
}
.od_sh {
padding: 30rpx;
.hero__sub {
margin-top: 12rpx;
font-size: 24rpx;
color: var(--mm-muted-fg);
}
/* ---------- 支付信息卡 ---------- */
.card {
margin-top: 64rpx;
padding: 8rpx 32rpx;
}
.row {
display: flex;
align-items: center;
font-size: 26rpx;
background-color: #fff;
justify-content: space-between;
height: 104rpx;
.od_sh_right {
width: 640rpx;
margin-left: 18rpx;
display: flex;
flex-direction: column;
&:first-child {
border-bottom: 2rpx solid var(--mm-muted);
}
}
.od_line {
width: 690rpx;
height: 1rpx;
background-color: #E7E6E6;
margin-left: 30rpx;
.row__label {
font-size: 28rpx;
color: var(--mm-muted-fg);
}
.row__val {
font-size: 28rpx;
font-weight: 500;
color: var(--mm-fg);
}
.row__price {
display: flex;
align-items: baseline;
}
.row__cur {
font-size: 26rpx;
font-weight: 600;
color: var(--mm-accent);
margin-right: 4rpx;
}
.row__num {
font-size: 44rpx;
line-height: 1;
}
/* ---------- 操作按钮 ---------- */
.acts {
margin-top: 64rpx;
display: flex;
flex-direction: column;
gap: 24rpx;
}
</style>