修正了 pages 名为拼音的问题
This commit is contained in:
273
pages/orders/orders.js
Normal file
273
pages/orders/orders.js
Normal file
@@ -0,0 +1,273 @@
|
||||
// pages/orders/orders.js
|
||||
const app = getApp()
|
||||
import request from '../../utils/request.js'
|
||||
|
||||
Page({
|
||||
data: {
|
||||
// 订单状态tab配置
|
||||
dingdanZhuangtaiTabs: [
|
||||
{ name: '全部', key: 'all', zhuangtaiList: [1, 2, 3, 4, 5, 6, 7, 8] },
|
||||
{ name: '已下单', key: 'yixiadan', zhuangtaiList: [1, 7] },
|
||||
{ name: '进行中', key: 'jinxingzhong', zhuangtaiList: [2] },
|
||||
{ name: '争议订单', key: 'zhengyi', zhuangtaiList: [4, 5, 6] },
|
||||
{ name: '已完成', key: 'yiwancheng', zhuangtaiList: [3] },
|
||||
{ name: '结算中', key: 'jiesuanzhong', zhuangtaiList: [8] }
|
||||
],
|
||||
|
||||
// 当前选中的tab索引
|
||||
xuanzhongTabIndex: 0,
|
||||
// 当前选中的tab的key
|
||||
currentTabKey: 'all',
|
||||
|
||||
// 每个tab对应的订单数据
|
||||
dingdanShuju: {
|
||||
all: { list: [], page: 1, hasMore: true, isLoading: false },
|
||||
yixiadan: { list: [], page: 1, hasMore: true, isLoading: false },
|
||||
jinxingzhong: { list: [], page: 1, hasMore: true, isLoading: false },
|
||||
zhengyi: { list: [], page: 1, hasMore: true, isLoading: false },
|
||||
yiwancheng: { list: [], page: 1, hasMore: true, isLoading: false },
|
||||
jiesuanzhong: { list: [], page: 1, hasMore: true, isLoading: false }
|
||||
},
|
||||
|
||||
// 个人中心传递过来的type参数
|
||||
gerenzhongxinType: '',
|
||||
|
||||
// 是否显示加载更多
|
||||
xianshiJiazaigengduo: false,
|
||||
|
||||
// 页面加载状态
|
||||
isLoading: true
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
const type = options.type || ''
|
||||
|
||||
wx.setNavigationBarTitle({
|
||||
title: '我的订单'
|
||||
})
|
||||
|
||||
this.qingkongGerenzhongxinJishu(type)
|
||||
|
||||
const tabIndex = this.yingsheTypeToTabIndex(type)
|
||||
const tabKey = this.data.dingdanZhuangtaiTabs[tabIndex].key
|
||||
|
||||
this.setData({
|
||||
gerenzhongxinType: type,
|
||||
xuanzhongTabIndex: tabIndex,
|
||||
currentTabKey: tabKey,
|
||||
isLoading: false
|
||||
})
|
||||
|
||||
this.jiazaiDingdanShuju(tabIndex)
|
||||
},
|
||||
onShow() {
|
||||
this.registerNotificationComponent();
|
||||
},
|
||||
|
||||
registerNotificationComponent() {
|
||||
const app = getApp();
|
||||
const notificationComp = this.selectComponent('#global-notification');
|
||||
|
||||
if (notificationComp && notificationComp.showNotification) {
|
||||
app.globalData.globalNotification = {
|
||||
show: (data) => notificationComp.showNotification(data),
|
||||
hide: () => notificationComp.hideNotification()
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
qingkongGerenzhongxinJishu(type) {
|
||||
const jishuMap = {
|
||||
'daifuwu': 'daifuwu',
|
||||
'fuwuzhong': 'fuwuzhong',
|
||||
'yiwancheng': 'yiwancheng',
|
||||
'yituikuan': 'yituikuan'
|
||||
}
|
||||
|
||||
const jishuKey = jishuMap[type]
|
||||
if (jishuKey && app.globalData.dingdanTiaoshu) {
|
||||
app.globalData.dingdanTiaoshu[jishuKey] = 0
|
||||
}
|
||||
},
|
||||
|
||||
yingsheTypeToTabIndex(type) {
|
||||
const yingsheMap = {
|
||||
'daifuwu': 1,
|
||||
'fuwuzhong': 2,
|
||||
'yiwancheng': 4,
|
||||
'yituikuan': 3
|
||||
}
|
||||
|
||||
return yingsheMap[type] || 0
|
||||
},
|
||||
|
||||
switchDingdanTab(e) {
|
||||
const tabIndex = e.currentTarget.dataset.index
|
||||
if (tabIndex === this.data.xuanzhongTabIndex) return
|
||||
|
||||
const tabKey = this.data.dingdanZhuangtaiTabs[tabIndex].key
|
||||
|
||||
this.setData({
|
||||
xuanzhongTabIndex: tabIndex,
|
||||
currentTabKey: tabKey
|
||||
})
|
||||
|
||||
this.jiazaiDingdanShuju(tabIndex)
|
||||
},
|
||||
|
||||
async jiazaiDingdanShuju(tabIndex, isLoadMore = false) {
|
||||
const tab = this.data.dingdanZhuangtaiTabs[tabIndex]
|
||||
const tabKey = tab.key
|
||||
|
||||
const tabData = this.data.dingdanShuju[tabKey]
|
||||
|
||||
const page = isLoadMore ? tabData.page + 1 : 1
|
||||
|
||||
if (tabData.isLoading) return
|
||||
|
||||
// 重置逻辑：如果不是加载更多，清空已有数据
|
||||
if (!isLoadMore) {
|
||||
this.setData({
|
||||
[`dingdanShuju.${tabKey}.list`]: [],
|
||||
[`dingdanShuju.${tabKey}.page`]: 1
|
||||
})
|
||||
}
|
||||
|
||||
this.setData({
|
||||
[`dingdanShuju.${tabKey}.isLoading`]: true
|
||||
})
|
||||
|
||||
wx.showLoading({
|
||||
title: isLoadMore ? '加载更多...' : '加载订单...',
|
||||
mask: true
|
||||
})
|
||||
|
||||
try {
|
||||
const requestData = {
|
||||
zhuangtai_list: tab.zhuangtaiList,
|
||||
page: page,
|
||||
page_size: 10
|
||||
}
|
||||
|
||||
const res = await request({
|
||||
url: '/dingdan/dingdanhuoqu',
|
||||
method: 'POST',
|
||||
data: requestData,
|
||||
header: {
|
||||
'content-type': 'application/json'
|
||||
}
|
||||
})
|
||||
|
||||
wx.hideLoading()
|
||||
|
||||
// 关键修正：res是直接返回的数据对象
|
||||
if (res && res.data.code === 0) {
|
||||
const newDingdanList = res.data.data.list || []
|
||||
const hasMore = res.data.data.has_more || false
|
||||
|
||||
// 处理图片URL，拼接完整路径
|
||||
const processedList = newDingdanList.map(item => {
|
||||
let tupianUrl = item.tupian || ''
|
||||
|
||||
// 如果图片URL不是完整路径，拼接ossImageUrl
|
||||
if (tupianUrl && !tupianUrl.startsWith('http')) {
|
||||
const ossImageUrl = app.globalData.ossImageUrl || ''
|
||||
tupianUrl = ossImageUrl + tupianUrl
|
||||
}
|
||||
|
||||
const zhuangtaiZh = this.getZhuangtaiZhongwen(item.zhuangtai)
|
||||
|
||||
return {
|
||||
...item,
|
||||
tupian: tupianUrl,
|
||||
zhuangtaiZh: zhuangtaiZh
|
||||
}
|
||||
})
|
||||
|
||||
const currentList = this.data.dingdanShuju[tabKey].list
|
||||
const updatedList = isLoadMore
|
||||
? [...currentList, ...processedList]
|
||||
: processedList
|
||||
|
||||
this.setData({
|
||||
[`dingdanShuju.${tabKey}.list`]: updatedList,
|
||||
[`dingdanShuju.${tabKey}.page`]: page,
|
||||
[`dingdanShuju.${tabKey}.hasMore`]: hasMore,
|
||||
[`dingdanShuju.${tabKey}.isLoading`]: false,
|
||||
xianshiJiazaigengduo: hasMore
|
||||
})
|
||||
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: res ? (res.msg || '加载失败') : '请求失败',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
|
||||
this.setData({
|
||||
[`dingdanShuju.${tabKey}.isLoading`]: false
|
||||
})
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('加载订单数据失败:', error)
|
||||
wx.hideLoading()
|
||||
wx.showToast({
|
||||
title: '网络请求失败，请重试',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
|
||||
this.setData({
|
||||
[`dingdanShuju.${tabKey}.isLoading`]: false
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
getZhuangtaiZhongwen(zhuangtai) {
|
||||
const zhuangtaiMap = {
|
||||
1: '已下单',
|
||||
2: '进行中',
|
||||
3: '已完成',
|
||||
4: '退款中',
|
||||
5: '已退款',
|
||||
6: '退款失败',
|
||||
7: '指定中',
|
||||
8: '结算中'
|
||||
}
|
||||
|
||||
return zhuangtaiMap[zhuangtai] || '未知状态'
|
||||
},
|
||||
|
||||
onReachBottom() {
|
||||
const tabKey = this.data.currentTabKey
|
||||
const tabData = this.data.dingdanShuju[tabKey]
|
||||
|
||||
if (tabData.hasMore && !tabData.isLoading) {
|
||||
const tabIndex = this.data.xuanzhongTabIndex
|
||||
this.jiazaiDingdanShuju(tabIndex, true)
|
||||
}
|
||||
},
|
||||
|
||||
goToDingdanXiangqing(e) {
|
||||
const dingdanItem = e.currentTarget.dataset.item
|
||||
if (!dingdanItem) return
|
||||
|
||||
const dingdanDataStr = encodeURIComponent(JSON.stringify(dingdanItem))
|
||||
|
||||
wx.navigateTo({
|
||||
url: `/pages/order-detail/order-detail?dingdanData=${dingdanDataStr}`
|
||||
})
|
||||
},
|
||||
|
||||
onImageError(e) {
|
||||
const index = e.currentTarget.dataset.index
|
||||
const tabKey = this.data.currentTabKey
|
||||
|
||||
const defaultImage = app.globalData.lunbozhanwei || '/images/default.jpg'
|
||||
|
||||
this.setData({
|
||||
[`dingdanShuju.${tabKey}.list[${index}].tupian`]: defaultImage
|
||||
})
|
||||
}
|
||||
})
|
||||
5
pages/orders/orders.json
Normal file
5
pages/orders/orders.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"global-notification": "/components/global-notification/global-notification"
|
||||
}
|
||||
}
|
||||
111
pages/orders/orders.wxml
Normal file
111
pages/orders/orders.wxml
Normal file
@@ -0,0 +1,111 @@
|
||||
<!--pages/orders/orders.wxml-->
|
||||
<view class="dingdan-page">
|
||||
|
||||
<!-- 订单状态tab区域 -->
|
||||
<scroll-view
|
||||
class="dingdan-tabs-scroll"
|
||||
scroll-x="true"
|
||||
scroll-with-animation="true"
|
||||
>
|
||||
<view class="dingdan-tabs-container">
|
||||
<block wx:for="{{dingdanZhuangtaiTabs}}" wx:key="key">
|
||||
<view
|
||||
class="dingdan-tab-item {{index === xuanzhongTabIndex ? 'tab-active' : ''}}"
|
||||
bindtap="switchDingdanTab"
|
||||
data-index="{{index}}"
|
||||
>
|
||||
<text class="tab-text">{{item.name}}</text>
|
||||
<view class="tab-active-line" wx:if="{{index === xuanzhongTabIndex}}"></view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 订单列表区域 -->
|
||||
<view class="dingdan-list-container">
|
||||
|
||||
<!-- 页面加载中 -->
|
||||
<view class="loading-container" wx:if="{{isLoading}}">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">加载中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view
|
||||
class="empty-container"
|
||||
wx:if="{{!isLoading && dingdanShuju[currentTabKey].list.length === 0}}"
|
||||
>
|
||||
<image
|
||||
class="empty-image"
|
||||
src="/images/empty-order.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<text class="empty-text">暂无订单</text>
|
||||
<text class="empty-subtext">快去下单体验服务吧</text>
|
||||
</view>
|
||||
|
||||
<!-- 订单列表 -->
|
||||
<block wx:if="{{!isLoading && dingdanShuju[currentTabKey].list.length > 0}}">
|
||||
<block wx:for="{{dingdanShuju[currentTabKey].list}}" wx:key="dingdanId">
|
||||
<view
|
||||
class="dingdan-card"
|
||||
bindtap="goToDingdanXiangqing"
|
||||
data-item="{{item}}"
|
||||
>
|
||||
<!-- 商品图片 -->
|
||||
<view class="dingdan-card-left">
|
||||
<image
|
||||
class="dingdan-image"
|
||||
src="{{item.tupian}}"
|
||||
mode="aspectFill"
|
||||
binderror="onImageError"
|
||||
data-index="{{index}}"
|
||||
></image>
|
||||
</view>
|
||||
|
||||
<!-- 订单信息 -->
|
||||
<view class="dingdan-card-center">
|
||||
<view class="dingdan-jieshao">
|
||||
{{item.jieshao || '暂无描述'}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单状态和价格 -->
|
||||
<view class="dingdan-card-right">
|
||||
<!-- 订单状态 -->
|
||||
<view class="dingdan-zhuangtai">
|
||||
{{item.zhuangtaiZh || '未知状态'}}
|
||||
</view>
|
||||
|
||||
<!-- 订单价格 -->
|
||||
<view class="dingdan-jine">
|
||||
<text class="jine-symbol">¥</text>
|
||||
<text class="jine-number">{{item.jine || '0.00'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
|
||||
<!-- 加载更多提示 -->
|
||||
<view
|
||||
class="load-more-container"
|
||||
wx:if="{{xianshiJiazaigengduo && !isLoading && dingdanShuju[currentTabKey].list.length > 0}}"
|
||||
>
|
||||
<view class="load-more-line"></view>
|
||||
<text class="load-more-text">上拉加载更多</text>
|
||||
<view class="load-more-line"></view>
|
||||
</view>
|
||||
|
||||
<!-- 没有更多提示 -->
|
||||
<view
|
||||
class="no-more-container"
|
||||
wx:if="{{!xianshiJiazaigengduo && !isLoading && dingdanShuju[currentTabKey].list.length > 0}}"
|
||||
>
|
||||
<text class="no-more-text">没有更多订单了</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<global-notification id="global-notification" />
|
||||
190
pages/orders/orders.wxss
Normal file
190
pages/orders/orders.wxss
Normal file
@@ -0,0 +1,190 @@
|
||||
/* pages/orders/orders.wxss */
|
||||
|
||||
.dingdan-page {
|
||||
background-color: #f8f9fa;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.dingdan-tabs-scroll {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.dingdan-tabs-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.dingdan-tab-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dingdan-tab-item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* .dingdan-tab-item.tab-active 已由全局 .tab-capsule--active 覆盖 */
|
||||
|
||||
.tab-active-line {
|
||||
width: 40rpx;
|
||||
height: 4rpx;
|
||||
background-color: #4caf50;
|
||||
border-radius: 2rpx;
|
||||
margin-top: 6rpx;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: scale(0.8); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.dingdan-list-container {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 400rpx;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
border: 6rpx solid #e0e0e0;
|
||||
border-top-color: #4caf50;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.empty-container {
|
||||
height: 500rpx;
|
||||
padding-top: 80rpx;
|
||||
}
|
||||
|
||||
.empty-image {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 32rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.dingdan-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.dingdan-card:active {
|
||||
transform: translateY(-2rpx);
|
||||
box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.dingdan-card-left {
|
||||
flex-shrink: 0;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.dingdan-image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.dingdan-card-center {
|
||||
flex: 1;
|
||||
height: 160rpx;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.dingdan-jieshao {
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.dingdan-card-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
height: 160rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
/* 价格样式 */
|
||||
.dingdan-jine {
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中 */
|
||||
}
|
||||
|
||||
.jine-symbol {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
margin-right: 4rpx; /* 添加右边距，让符号和数字有间隔 */
|
||||
}
|
||||
|
||||
.jine-number {
|
||||
font-size: 32rpx; /* 整数和小数一样大 */
|
||||
color: #333333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.load-more-line {
|
||||
width: 80rpx;
|
||||
height: 1rpx;
|
||||
background-color: #e0e0e0;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
|
||||
.load-more-text {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.dingdan-image {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
}
|
||||
|
||||
.dingdan-card-center {
|
||||
height: 140rpx;
|
||||
}
|
||||
|
||||
.dingdan-card-right {
|
||||
height: 140rpx;
|
||||
}
|
||||
|
||||
.jine-number {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user