259 lines
5.9 KiB
Vue
259 lines
5.9 KiB
Vue
<template>
|
||
<view class="page mm-page">
|
||
<!-- xuchao: 景区卡片列表 —— 整卡可点进详情，入场逐个渐显 -->
|
||
<view class="list mm-stagger">
|
||
<view class="card mm-card mm-fade-up" v-for="(item,index) in lookList" :key="index"
|
||
@click="toDetail(item.id)">
|
||
<image class="card__img" mode="aspectFill"
|
||
:src="item.mainPic||'https://aliyunoss.hn12301.net/sd/all_moren.png'"></image>
|
||
<view class="card__body">
|
||
<view class="card__name">{{item.name||''}}</view>
|
||
<view class="card__desc" v-if="item.subTypeId">{{item.subTypeId}}</view>
|
||
<view class="card__foot">
|
||
<view class="card__price">
|
||
<view class="card__origin">原价 <text
|
||
class="card__origin-num">¥{{(item.price/100).toFixed(0)}}</text></view>
|
||
<view class="card__now">
|
||
<text class="card__cur">¥</text>
|
||
<text class="card__num mm-display mm-grad-text">{{(item.unitPrice/100).toFixed(0)}}</text>
|
||
<text class="card__unit">元</text>
|
||
</view>
|
||
</view>
|
||
<view class="card__cta mm-grad">
|
||
<text>预订</text>
|
||
<u-icon name="arrow-right" color="#ffffff" size="22"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- xuchao: 空态（首次请求返回空列表才显示，避免加载中闪烁） -->
|
||
<view class="empty mm-fade-up" v-if="showEmpty">
|
||
<u-icon name="empty-coupon" color="#CBD5E1" size="120"></u-icon>
|
||
<view class="empty__text">暂无在售门票产品</view>
|
||
</view>
|
||
|
||
<!-- xuchao: 列表底部：仅分页加载时显示"正在加载…" -->
|
||
<view class="foot" v-if="lookList.length > 0 && !isLoad">
|
||
<text>正在加载…</text>
|
||
</view>
|
||
|
||
<!-- xuchao: 订单悬浮按钮 -->
|
||
<gmy-float-touch @menuClick="floatTouchClick"></gmy-float-touch>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// xuchao: 门票列表页（启动页/入口页）
|
||
import auth from '@/common/auth.js'
|
||
import gmyFloatTouch from "@/components/gmy-float-touch/gmy-float-touch.vue"
|
||
|
||
var that = ''
|
||
export default {
|
||
components: { gmyFloatTouch },
|
||
data() {
|
||
return {
|
||
pageAll: 2,
|
||
isLoad: true,
|
||
lookList: [],
|
||
// xuchao: 首次请求是否已返回，用于区分"加载中"与"真没数据"
|
||
firstLoaded: false,
|
||
obj: {
|
||
"name": "",
|
||
"typeId": "",
|
||
"cityId": "",
|
||
"pageSize": 10,
|
||
"pageNum": 1,
|
||
"todayAvailable": false
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
showEmpty() {
|
||
return this.firstLoaded && this.lookList.length === 0
|
||
}
|
||
},
|
||
onLoad() {
|
||
that = this
|
||
// xuchao: 异步登录校验 —— 已登录直接进；未登录时用 URL 上的 order 解码码换身份；
|
||
// 缺失/失败停留首页 Toast 提示，不跳登录页
|
||
auth.requireLogin('/pages/ticket/scenic').then(ok => {
|
||
if (ok) this.queryTicketsPageMethod()
|
||
})
|
||
},
|
||
onReachBottom() {
|
||
this.queryTicketsPageMethod()
|
||
},
|
||
methods: {
|
||
queryTicketsPageMethod() {
|
||
if (this.obj.pageNum <= this.pageAll && this.isLoad) {
|
||
this.isLoad = false
|
||
this.$u.api.queryTicketsPage(this.obj).then(res => {
|
||
this.isLoad = true
|
||
this.firstLoaded = true
|
||
this.obj.pageNum = this.obj.pageNum * 1 + 1
|
||
this.pageAll = Math.ceil(res.data.total / 10)
|
||
this.total = res.data.total
|
||
this.lookList = this.lookList.concat(res.data.list)
|
||
})
|
||
}
|
||
},
|
||
toDetail(e) {
|
||
uni.navigateTo({
|
||
url: 'scenicdetail?id=' + e
|
||
})
|
||
},
|
||
// xuchao: 悬浮按钮 —— 跳门票订单列表
|
||
floatTouchClick(e) {
|
||
if (e == 4) {
|
||
uni.navigateTo({
|
||
url: '/pages/ticket/orderlist'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.page {
|
||
padding: 32rpx 32rpx 40rpx;
|
||
}
|
||
|
||
/* ---------- 卡片列表 ---------- */
|
||
.list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.card {
|
||
display: flex;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
transition: transform 0.2s ease-out, box-shadow 0.3s ease-out;
|
||
}
|
||
|
||
.card:active {
|
||
transform: scale(0.985);
|
||
box-shadow: var(--mm-shadow-sm);
|
||
}
|
||
|
||
.card__img {
|
||
width: 208rpx;
|
||
height: 208rpx;
|
||
flex: none;
|
||
border-radius: 18rpx;
|
||
background: var(--mm-muted);
|
||
}
|
||
|
||
.card__body {
|
||
flex: 1;
|
||
min-width: 0;
|
||
margin-left: 24rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.card__name {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
letter-spacing: -0.01em;
|
||
color: var(--mm-fg);
|
||
overflow: hidden !important;
|
||
text-overflow: ellipsis !important;
|
||
display: -webkit-box !important;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.card__desc {
|
||
margin-top: 8rpx;
|
||
font-size: 22rpx;
|
||
line-height: 1.45;
|
||
color: var(--mm-muted-fg);
|
||
overflow: hidden !important;
|
||
text-overflow: ellipsis !important;
|
||
display: -webkit-box !important;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.card__foot {
|
||
margin-top: auto;
|
||
padding-top: 12rpx;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.card__origin {
|
||
font-size: 20rpx;
|
||
color: var(--mm-muted-fg);
|
||
}
|
||
|
||
.card__origin-num {
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.card__now {
|
||
display: flex;
|
||
align-items: baseline;
|
||
}
|
||
|
||
.card__cur {
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
color: var(--mm-accent);
|
||
margin-right: 2rpx;
|
||
}
|
||
|
||
.card__num {
|
||
font-size: 46rpx;
|
||
line-height: 1;
|
||
}
|
||
|
||
.card__unit {
|
||
font-size: 20rpx;
|
||
color: var(--mm-muted-fg);
|
||
margin-left: 6rpx;
|
||
}
|
||
|
||
/* xuchao: 预订按钮 —— 渐变胶囊 + 箭头，承担整卡的行动号召 */
|
||
.card__cta {
|
||
flex: none;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6rpx;
|
||
height: 60rpx;
|
||
padding: 0 26rpx;
|
||
border-radius: 999rpx;
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
box-shadow: 0 6rpx 16rpx rgba(0, 82, 255, 0.25);
|
||
}
|
||
|
||
/* ---------- 空态与底部 ---------- */
|
||
.empty {
|
||
margin-top: 160rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.empty__text {
|
||
font-size: 26rpx;
|
||
color: var(--mm-muted-fg);
|
||
}
|
||
|
||
.foot {
|
||
padding: 44rpx 0 20rpx;
|
||
text-align: center;
|
||
font-size: 22rpx;
|
||
letter-spacing: 0.1em;
|
||
color: var(--mm-muted-fg);
|
||
}
|
||
</style>
|