feat: 质惠游 H5 一期 —— 门票模块全链路(微信公众号版)
从 xghmall(云闪付版湘工游)迁移民票模块,改造为微信公众号 H5: - 技术栈沿用 uni-app + Vue2 + uView(含定制版日历组件) - 登录/支付独立成层(common/auth.js、common/pay.js): 一期假登录(测试手机号)+ 模拟支付,后端微信接口就绪后只换这两处 - 登录页重写:短信验证码 + 公众号网页授权(code 换用户信息)预留 - 门票列表页为入口页(进页必须登录),加订单悬浮按钮 - 支付成功页接通:查看订单/继续逛逛 + 订单状态轮询 - 详情页定位导航改用 uni.openLocation + 高德网页兜底 - 出行人页:身份证 18 位格式校验,删除死的删除按钮,修正证件类型回显笔误 - 清理云闪付 SDK、支付宝授权、死页面引用等残留 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<view class="u-tips" :class="['u-' + type, isShow ? 'u-tip-show' : '']" :style="{
|
||||
top: navbarHeight + 'px',
|
||||
zIndex: uZIndex
|
||||
}">{{ title }}</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* topTips 顶部提示
|
||||
* @description 该组件一般用于页面顶部向下滑出一个提示,尔后自动收起的场景。
|
||||
* @tutorial https://www.uviewui.com/components/topTips.html
|
||||
* @property {String Number} navbar-height 导航栏高度(包含状态栏高度在内),单位PX
|
||||
* @property {String Number} z-index z-index值(默认975)
|
||||
* @example <u-top-tips ref="uTips"></u-top-tips>
|
||||
*/
|
||||
export default {
|
||||
name: "u-top-tips",
|
||||
props: {
|
||||
// 导航栏高度,用于提示的初始化
|
||||
navbarHeight: {
|
||||
type: [Number, String],
|
||||
// #ifndef H5
|
||||
default: 0,
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
default: 44,
|
||||
// #endif
|
||||
},
|
||||
// z-index值
|
||||
zIndex: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timer: null, // 定时器
|
||||
isShow: false, // 是否显示消息组件
|
||||
title: '', // 组件中显示的消息内容
|
||||
type: 'primary', // 消息的类型(颜色不同),primary,success,error,warning,info
|
||||
duration: 2000, // 组件显示的时间,单位为毫秒
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
uZIndex() {
|
||||
return this.zIndex ? this.zIndex : this.$u.zIndex.topTips;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show(config = {}) {
|
||||
// 先清除定时器(可能是上一次定义的,需要清除了再开始新的)
|
||||
clearTimeout(this.timer);
|
||||
// 时间,内容,类型主题(type)等参数
|
||||
if (config.duration) this.duration = config.duration;
|
||||
if (config.type) this.type = config.type;
|
||||
this.title = config.title;
|
||||
this.isShow = true;
|
||||
// 倒计时
|
||||
this.timer = setTimeout(() => {
|
||||
this.isShow = false;
|
||||
clearTimeout(this.timer);
|
||||
this.timer = null;
|
||||
}, this.duration);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../libs/css/style.components.scss";
|
||||
|
||||
view {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// 顶部弹出类型样式
|
||||
.u-tips {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
padding: 20rpx 30rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 28rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@include vue-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
// 此处为最核心点,translateY(-100%)意味着将其从Y轴隐藏(隐藏到顶部(h5)或者说导航栏(app)下面)
|
||||
transform: translateY(-100%);
|
||||
transition: all 0.35s linear;
|
||||
}
|
||||
|
||||
.u-tip-show {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.u-primary {
|
||||
background: $u-type-primary;
|
||||
}
|
||||
|
||||
.u-success {
|
||||
background: $u-type-success;
|
||||
}
|
||||
|
||||
.u-warning {
|
||||
background: $u-type-warning;
|
||||
}
|
||||
|
||||
.u-error {
|
||||
background: $u-type-error;
|
||||
}
|
||||
|
||||
.u-info {
|
||||
background: $u-type-info;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user