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:
xuchao
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="u-content" :class="[elId]" :style="{
|
||||
height: isLongContent && !showMore ? showHeight + 'rpx' : 'auto',
|
||||
textIndent: textIndent
|
||||
}">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<view style="width: 690rpx;height: 1rpx;background-color: #E7E6E6;" v-if="isLine"></view>
|
||||
<view @tap="toggleReadMore" v-if="isLongContent" class="u-content__showmore-wrap"
|
||||
:class="{ 'u-content__show-more': showMore }"
|
||||
:style="[innerShadowStyle]" style="margin-top: 40rpx;">
|
||||
<text class="u-content__showmore-wrap__readmore-btn" :style="{
|
||||
fontSize: fontSize + 'rpx',
|
||||
color: color
|
||||
}">
|
||||
{{ showMore ? openText : closeText }}
|
||||
</text>
|
||||
<view class="u-content__showmore-wrap__readmore-btn__icon u-flex">
|
||||
<u-icon :color="color" :size="fontSize" :name="showMore ? iconUp :iconDown"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* readMore 阅读更多
|
||||
* @description 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
|
||||
* @tutorial https://www.uviewui.com/components/readMore.html
|
||||
* @property {String Number} show-height 内容超出此高度才会显示展开全文按钮，单位rpx（默认400）
|
||||
* @property {Boolean} toggle 展开后是否显示收起按钮（默认false）
|
||||
* @property {String} close-text 关闭时的提示文字（默认“展开阅读全文”）
|
||||
* @property {String Number} font-size 提示文字的大小，单位rpx（默认28）
|
||||
* @property {String} text-indent 段落首行缩进的字符个数（默认2em）
|
||||
* @property {String} open-text 展开时的提示文字（默认“收起”）
|
||||
* @property {String} color 提示文字的颜色（默认#2979ff）
|
||||
* @example <u-read-more><rich-text :nodes="content"></rich-text></u-read-more>
|
||||
*/
|
||||
export default {
|
||||
name: "u-read-more",
|
||||
props: {
|
||||
// 默认的显示占位高度，单位为rpx
|
||||
iconUp:{
|
||||
type: String,
|
||||
default: 'arrow-up-fill'
|
||||
},
|
||||
iconDown:{
|
||||
type: String,
|
||||
default: 'arrow-down-fill'
|
||||
},
|
||||
showHeight: {
|
||||
type: [Number, String],
|
||||
default: 400
|
||||
},
|
||||
// 展开后是否显示"收起"按钮
|
||||
toggle: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isLine: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 关闭时的提示文字
|
||||
closeText: {
|
||||
type: String,
|
||||
default: '展开阅读全文'
|
||||
},
|
||||
// 展开时的提示文字
|
||||
openText: {
|
||||
type: String,
|
||||
default: '收起'
|
||||
},
|
||||
// 提示的文字颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#2979ff'
|
||||
},
|
||||
// 提示文字的大小
|
||||
fontSize: {
|
||||
type: [String, Number],
|
||||
default: 28
|
||||
},
|
||||
// 是否显示阴影
|
||||
shadowStyle: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
|
||||
paddingTop: "300rpx",
|
||||
marginTop: "-300rpx"
|
||||
}
|
||||
}
|
||||
},
|
||||
// 段落首行缩进的字符个数
|
||||
textIndent: {
|
||||
type: String,
|
||||
default: '2em'
|
||||
},
|
||||
// open和close事件时，将此参数返回在回调参数中
|
||||
index: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
paramsChange(val) {
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
paramsChange() {
|
||||
return `${this.toggle}-${this.showHeight}`;
|
||||
},
|
||||
// 展开后无需阴影，收起时才需要阴影样式
|
||||
innerShadowStyle() {
|
||||
return this.shadowStyle
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLongContent: false, // 是否需要隐藏一部分内容
|
||||
showMore: false, // 当前隐藏与显示的状态，true-显示，false-收起
|
||||
elId: this.$u.guid(), // 生成唯一class
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.init();
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.$uGetRect('.' + this.elId).then(res => {
|
||||
// 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮
|
||||
if (res.height > uni.upx2px(this.showHeight)) {
|
||||
this.isLongContent = true;
|
||||
this.showMore = false;
|
||||
}
|
||||
})
|
||||
},
|
||||
// 展开或者收起
|
||||
toggleReadMore() {
|
||||
this.showMore = !this.showMore;
|
||||
// 如果toggle为false，隐藏"收起"部分的内容
|
||||
if (this.toggle == false) this.isLongContent = false;
|
||||
// 发出打开或者收齐的事件
|
||||
this.$emit(this.showMore ? 'open' : 'close', this.index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../libs/css/style.components.scss";
|
||||
|
||||
.u-content {
|
||||
font-size: 30rpx;
|
||||
color: $u-content-color;
|
||||
line-height: 1.8;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
|
||||
&__show-more {
|
||||
padding-top: 0;
|
||||
background: none;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
&__showmore-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-bottom: 26rpx;
|
||||
@include vue-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&__readmore-btn {
|
||||
@include vue-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
|
||||
&__icon {
|
||||
margin-left: 14rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user