JS的代码
const app = getApp();
const { request } = require('../../../utils/request');
const API = require('../../../config/api');
const { formatDate } = require("../../../utils/util");
import { aplus_sendPv } from "../../../utils/dataTrack/util";
Page({
data: {
orderList: [],
// 订单状态 1 未支付 2 已支付/待收货 3 退款中/退货中 4取消订单/已失效 5已核销 6已退单/已退款
statusMap: {
'1': '待支付',
'2': '待消费',
'3': '退款中',
'4': '已失效',
'5': '已核销',
'6': '已退款'
},
colorMap: {
'1': '#E9425C',
'2': '#07C160',
'3': '#E9425C',
'4': '#666666',
'5': '#292929',
'6': '#818181'
},
page: 1,
pageSize: 10,
hasMore: true,
isRefreshing: false,
loading: false,
scrollTop: 0,
topHeight: app.globalData.statusBarHeight + app.globalData.navBarHeight,
fabButton: {
icon: 'https://images.biliq.com/images/miniprogram/floating-avatar.png',
shape: 'rectangle', // 圆角按钮
}
},
onLoad(options) {
console.log('onLoad', options);
this.setData({
sceneCode: options.sceneCode
});
wx.showLoading({
title: '加载中...',
mask: true
});
this.getOrderList();
// 埋点-页面浏览
try {
aplus_sendPv({
is_auto: false
}, {
sceneCode: this.data.sceneCode
});
} catch (error) { }
},
onShow() {
console.log('onPageShow');
this.data.orderList = [];
this.setData({
page: 1,
scrollTop: 0
});
this.getOrderList();
},
onHide() {
console.log('onPageHide');
this.setData({
hasMore: true,
loading: false,
isRefreshing: false,
});
},
// 获取订单列表
async getOrderList(isRefresh = false) {
if (isRefresh) {
this.setData({
page: 1,
hasMore: true,
isRefreshing: true
});
}
console.log('getOrderList', this.data.hasMore, this.data.loading);
console.log('isRefreshing', this.data.isRefreshing);
console.log('page', !this.data.hasMore || this.data.loading);
if (!this.data.hasMore || this.data.loading) return;
try {
this.setData({ loading: true });
if (!this.data.isRefreshing) {
wx.showLoading({
title: '加载中...',
mask: true
});
}
const { page, pageSize } = this.data;
const params = {
page,
pageSize,
status: 0
};
const response = await request(API.getOrderList, params, 'GET', true);
const { orderList, total } = response.data;
// 格式化订单数据，包括日期处理
const formattedList = orderList?.map(order => {
// 处理商品列表中的日期
if (order.goods) {
order.goods = order.goods.map(good => ({
...good,
}));
}
return {
...order,
createTime: formatDate(order.createTime)
};
});
this.setData({
// orderList:[],
orderList: isRefresh ? formattedList : [...this.data.orderList, ...formattedList],
hasMore: (isRefresh ? formattedList.length : this.data.orderList.length + formattedList.length) < total,
page: this.data.page + 1,
isRefreshing: false,
loading: false
});
if (isRefresh) {
wx.showToast({
title: '刷新成功',
icon: 'success',
duration: 1500
});
}
} catch (error) {
console.error('获取订单列表失败:', error);
wx.showToast({
title: '获取订单列表失败',
icon: 'none'
});
this.setData({
loading: false,
isRefreshing: false
});
} finally {
wx.hideLoading();
wx.stopPullDownRefresh();
}
},
// 查看订单详情
goToOrderDetail(event) {
const { item } = event.currentTarget.dataset;
wx.navigateTo({
url: `/pages/ticketsManage/myOrderDetail/index?orderNo=${item.orderNo}&sceneCode=${this.data.sceneCode}`
});
},
// 下拉刷新
async onPullDownRefresh() {
if (this.data.isRefreshing) return;
this.setData({ isRefreshing: true });
await this.getOrderList(true);
},
// 上拉加载更多
onReachBottom() {
if (this.data.hasMore && !this.data.loading) {
this.getOrderList();
}
},
// 点击悬浮按钮,跳转到聊天页面
handleClickFab(){
if(app.globalData.userInfo.agentId){
wx.navigateTo({
url: `/pages/home/home?come=6&botId=${app.globalData.userInfo.agentId}&name=`,
});
}
}
});
WXML的代码
<return />
<view class="all-wrap" style="padding-top:{{topHeight}}px;">
<view class="my-title">我的门票</view>
<scroll-view
class="order-list-container"
scroll-y
scroll-top="{{scrollTop}}"
refresher-enabled="{{true}}"
refresher-default-style="white"
refresher-triggered="{{isRefreshing}}"
bindrefresherrefresh="onPullDownRefresh"
bindscrolltolower="onReachBottom"
>
<!-- 订单列表 -->
<view class="orderList-info">
<view
class="small-product-card-wrap"
bindtap="goToOrderDetail"
data-item="{{item}}"
wx:for="{{orderList}}"
wx:key="id"
wx:for-item="item"
wx:for-index="index"
>
<view class="small-product-card-pad">
<view
class="small-product-card-item"
wx:for="{{item.goods}}"
wx:key="id"
wx:for-item="goodsItem"
wx:for-index="goodsIndex"
>
<view class="small-product-card-content" data-item="{{item}}">
<view class="small-product-card-bg">
<image src="{{goodsItem.swiperPic}}" mode="" />
</view>
<view class="small-product-card-content_left">
<image src="{{goodsItem.goodsPic}}" mode="" />
</view>
<view class="small-product-card-content_mid">
<!-- <view class="small-product-card-content_name">{{goodsItem.goodsName||""}}</view> -->
<view class="small-product-card-content_name">{{goodsItem.goodsAliasName||""}}</view>
<view class="small-product-card-content_date">
<text>{{goodsItem.ticketValidityDate}}</text>
<text/>
<text>{{goodsItem.goodsNumber}}张</text>
</view>
</view>
<view class="small-product-card-content_right">
<image
wx:if="{{item.status === 2}}"
class="order-status-icon"
src="https://images.biliq.com/images/miniprogram/paopao2.0/common/images/indicate-qrcode.png"
mode=""
/>
<view class="small-product-card-content_price">
<text style="color: {{colorMap[item.status]}}">{{statusMap[item.status]}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 空状态 -->
<view class="no-data" wx:if="{{orderList.length===0 && !loading}}">
<view class="dreaming-noRes">
<image class="dreaming-noRes-icon" src="https://images.biliq.com/images/miniprogram/paopao2.0/common/images/no-data-icon.png" />
<view class="dreaming-noRes-text">暂无门票数据</view>
</view>
</view>
<!-- 加载完成 -->
<view class="load-all" wx:if="{{!hasMore && orderList.length > 0}}">
没有更多订单了
</view>
</scroll-view>
</view>
<!-- 悬浮泡泡按钮 -->
<!-- <t-fab
style="bottom: 160px; right: 20px;"
draggable
y-bounds="{{[0, 0]}}"
button-props="{{fabButton}}"
bind:click="handleClickFab"
>
</t-fab> -->
WXSS的代码
.all-wrap{
width: 100vw;
height: 100vh;
box-sizing: border-box;
background: linear-gradient( 180deg, #556654 0%, #0C0C0C 100%);
display: flex;
flex-direction: column;
}
.all-wrap .my-title{
font-weight: 500;
font-size: 44rpx;
color: #FFFFFF;
padding: 24rpx 39rpx;
}
.all-wrap .order-list-container {
flex: 1;
min-height: 0; /* 确保flex子项可以收缩 */
padding-bottom: 20rpx;
box-sizing: border-box;
}
.orderList-info {
width: 100%;
padding: 0 39rpx 0;
box-sizing: border-box;
}
.order-list {
width: 100%;
padding: 0 39rpx;
box-sizing: border-box;
}
/* 商品小卡片 */
.small-product-card-wrap {
width: 100%;
height: auto;
box-sizing: border-box;
padding: 20rpx 0rpx;
/* padding: 30rpx 0rpx; */
/* border-bottom: 1rpx solid #D0D0D0; */
}
.small-product-card-pad {
width: 100%;
height: auto;
}
.small-product-card-item {
position: relative;
margin-bottom: 22rpx;
}
.small-product-card-item:last-child {
margin-bottom: 0;
}
.small-product-card-wrap .small-product-card-bg {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
}
.small-product-card-wrap .small-product-card-bg image {
width: 100%;
height: 100%;
}
.small-product-card-content {
width: 100%;
height: auto;
box-sizing: border-box;
display: flex;
align-items: center;
padding: 12rpx 24rpx 12rpx 12rpx;
}
.small-product-card-content .small-product-card-content_left {
width: 130rpx;
height: 130rpx;
}
.small-product-card-content .small-product-card-content_left image {
width: 100%;
height: 100%;
}
.small-product-card-content .small-product-card-content_mid {
margin-left: 20rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.small-product-card-content .small-product-card-content_mid .small-product-card-content_name {
width: 280rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 48rpx;
line-height: 48rpx;
font-weight: 600;
font-size: 34rpx;
color: #FFFFFF;
margin-bottom: 16rpx;
}
.small-product-card-content .small-product-card-content_mid .small-product-card-content_date {
font-weight: 600;
font-size: 22rpx;
color: #FFFFFF;
}
.small-product-card-content .small-product-card-content_mid .small-product-card-content_date text:nth-child(1) {
font-weight: 600;
font-size: 28rpx;
}
.small-product-card-content .small-product-card-content_mid .small-product-card-content_date text:nth-child(2) {
display: inline-block;
width: 2rpx;
height: 18rpx;
background: #FFFFFF;
opacity: 0.66;
margin: 0 16rpx;
}
.small-product-card-content .small-product-card-content_mid .small-product-card-content_date text:nth-child(3) {
font-weight: 600;
font-size: 28rpx;
}
.small-product-card-content_right {
margin-left: auto;
position: relative;
}
.order-status-icon {
opacity: 0.28;
width: 170rpx;
height: 120rpx;
position: absolute;
top: -25rpx;
left: -5rpx;
z-index: -1;
}
.small-product-card-content .small-product-card-content_right .small-product-card-content_price {
width: 160rpx;
height: 70rpx;
padding: 18rpx 0rpx;
box-sizing: border-box;
font-weight: 700;
font-size: 22rpx;
color: #292929;
background: #FFFFFF;
border-radius: 35rpx;
display: flex;
align-items: center;
justify-content: center;
}
.small-product-card-content .small-product-card-content_right .small-product-card-content_price text {
font-size: 29rpx;
margin-right: 10rpx;
}
.small-product-card-content_right button {
width: 160rpx;
height: 70rpx;
line-height: 70rpx;
background: #FFFFFF;
border-radius: 35rpx;
font-weight: 600;
font-size: 29rpx;
color: #292929;
}
button::after {
border: none;
}
.load-all {
text-align: center;
padding: 30rpx 0;
color: rgba(255, 255, 255, 0.4);
}
/* 空状态样式 */
/* 暂无更多数据 */
/* .no-data { */
/* width: 100vw;
height: 100vh; */
/* background: #DBE2D2; */
/* flex: 1; */
/* } */
/* 泡泡思考无结果 */
.dreaming-noRes {
width: 368rpx;
position: absolute;
top: 400rpx;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.dreaming-noRes .dreaming-noRes-icon {
width: 180rpx;
height: 180rpx;
margin-bottom: 31rpx;
}
.dreaming-noRes .dreaming-noRes-text {
font-size: 32rpx;
color: rgba(255, 255, 255, 0.4);
}
/* 悬浮泡泡按钮 */
.t-button {
width: 162rpx!important;
height: 182rpx!important;
box-sizing: border-box!important;
border-radius: none!important;
background: none!important;
padding: 0!important;
box-shadow: none!important;
}
.t-icon{
width: 142rpx!important;
height: 182rpx!important;
border-radius: none!important;
}
json的代码
{
"navigationBarTitleText": "我的门票",
"navigationBarBackgroundColor": "#F4F7F3",
"usingComponents": {
"return": "../components/return/index",
"t-fab": "tdesign-miniprogram/fab/fab"
},
"disableScroll": true
}