徐飞洋
2 months ago
7 changed files with 295 additions and 1 deletions
@ -0,0 +1,57 @@ |
|||
// pages/order/index.js
|
|||
Page({ |
|||
// 分享给朋友/群聊
|
|||
onShareAppMessage() { |
|||
return { |
|||
title: '鸡蛋贸易平台 - 我的订单', |
|||
path: '/pages/order/index', |
|||
imageUrl: '/images/你有好蛋.png' |
|||
} |
|||
}, |
|||
|
|||
// 分享到朋友圈
|
|||
onShareTimeline() { |
|||
return { |
|||
title: '鸡蛋贸易平台 - 我的订单', |
|||
query: '', |
|||
imageUrl: '/images/你有好蛋.png' |
|||
} |
|||
}, |
|||
|
|||
data: { |
|||
userInfo: {}, |
|||
orders: [] |
|||
}, |
|||
|
|||
onLoad() { |
|||
// 页面加载时的初始化逻辑
|
|||
this.loadUserInfo(); |
|||
}, |
|||
|
|||
onShow() { |
|||
// 页面显示时的逻辑
|
|||
this.loadUserInfo(); |
|||
// 更新自定义tabBar状态
|
|||
if (typeof this.getTabBar === 'function' && this.getTabBar()) { |
|||
this.getTabBar().setData({ |
|||
selected: 4 // 保持与个人中心相同的选中状态
|
|||
}); |
|||
} |
|||
}, |
|||
|
|||
// 加载用户信息
|
|||
loadUserInfo() { |
|||
const app = getApp(); |
|||
if (app.globalData.userInfo) { |
|||
this.setData({ userInfo: app.globalData.userInfo }); |
|||
} else { |
|||
const localUserInfo = wx.getStorageSync('userInfo') || {}; |
|||
this.setData({ userInfo: localUserInfo }); |
|||
} |
|||
}, |
|||
|
|||
// 返回上一页
|
|||
goBack() { |
|||
wx.navigateBack(); |
|||
} |
|||
}) |
|||
@ -0,0 +1,6 @@ |
|||
{ |
|||
"usingComponents": {}, |
|||
"navigationBarTitleText": "我的订单", |
|||
"navigationBarBackgroundColor": "#fff", |
|||
"navigationBarTextStyle": "black" |
|||
} |
|||
@ -0,0 +1,21 @@ |
|||
<view class="order-page"> |
|||
<!-- 订单状态标签栏 --> |
|||
<view class="order-tabs"> |
|||
<view class="tab-item active">全部</view> |
|||
<view class="tab-item">待付款</view> |
|||
<view class="tab-item">待发货</view> |
|||
<view class="tab-item">待收货</view> |
|||
<view class="tab-item">已完成</view> |
|||
</view> |
|||
|
|||
<!-- 订单列表 --> |
|||
<view class="order-list"> |
|||
<!-- 暂无订单提示 --> |
|||
<view class="no-orders"> |
|||
<view class="no-orders-icon">📦</view> |
|||
<view class="no-orders-title">空空如也~</view> |
|||
<view class="no-orders-subtitle">您还没有任何订单，快去选购吧</view> |
|||
<button class="go-shopping-btn" bindtap="goToHome">去首页购物</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,197 @@ |
|||
/* pages/order/index.wxss */ |
|||
.order-page { |
|||
min-height: 100vh; |
|||
background-color: #f5f5f5; |
|||
} |
|||
|
|||
/* 订单状态标签栏 */ |
|||
.order-tabs { |
|||
display: flex; |
|||
background-color: #fff; |
|||
border-bottom: 1rpx solid #e0e0e0; |
|||
overflow-x: auto; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.tab-item { |
|||
flex: 1; |
|||
min-width: 160rpx; |
|||
text-align: center; |
|||
padding: 24rpx 0; |
|||
font-size: 32rpx; |
|||
color: #666; |
|||
position: relative; |
|||
} |
|||
|
|||
.tab-item.active { |
|||
color: #1677ff; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.tab-item.active::after { |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
width: 60rpx; |
|||
height: 6rpx; |
|||
background-color: #1677ff; |
|||
border-radius: 3rpx; |
|||
} |
|||
|
|||
/* 订单列表 */ |
|||
.order-list { |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
/* 暂无订单提示 */ |
|||
.no-orders { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 120rpx 0; |
|||
background-color: #fff; |
|||
border-radius: 12rpx; |
|||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); |
|||
} |
|||
|
|||
.no-orders-icon { |
|||
font-size: 160rpx; |
|||
margin-bottom: 40rpx; |
|||
} |
|||
|
|||
.no-orders-title { |
|||
font-size: 36rpx; |
|||
font-weight: bold; |
|||
color: #333; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.no-orders-subtitle { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
margin-bottom: 60rpx; |
|||
} |
|||
|
|||
.go-shopping-btn { |
|||
background-color: #1677ff; |
|||
color: #fff; |
|||
border: none; |
|||
padding: 20rpx 80rpx; |
|||
border-radius: 60rpx; |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/* 订单卡片样式（预留） */ |
|||
.order-card { |
|||
background-color: #fff; |
|||
border-radius: 12rpx; |
|||
padding: 30rpx; |
|||
margin-bottom: 20rpx; |
|||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); |
|||
} |
|||
|
|||
.order-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 20rpx; |
|||
padding-bottom: 20rpx; |
|||
border-bottom: 1rpx solid #f0f0f0; |
|||
} |
|||
|
|||
.order-info { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
} |
|||
|
|||
.order-status { |
|||
font-size: 28rpx; |
|||
color: #1677ff; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.order-goods { |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.goods-item { |
|||
display: flex; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.goods-image { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
border-radius: 8rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.goods-info { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.goods-name { |
|||
font-size: 32rpx; |
|||
color: #333; |
|||
margin-bottom: 10rpx; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.goods-spec { |
|||
font-size: 26rpx; |
|||
color: #999; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
|
|||
.goods-price { |
|||
font-size: 32rpx; |
|||
color: #ff4d4f; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.order-footer { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding-top: 20rpx; |
|||
border-top: 1rpx solid #f0f0f0; |
|||
} |
|||
|
|||
.total-price { |
|||
font-size: 32rpx; |
|||
color: #333; |
|||
} |
|||
|
|||
.total-price .price { |
|||
color: #ff4d4f; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.order-actions { |
|||
display: flex; |
|||
} |
|||
|
|||
.action-btn { |
|||
padding: 12rpx 30rpx; |
|||
border-radius: 40rpx; |
|||
font-size: 28rpx; |
|||
margin-left: 20rpx; |
|||
border: 2rpx solid #1677ff; |
|||
color: #1677ff; |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.action-btn.primary { |
|||
background-color: #1677ff; |
|||
color: #fff; |
|||
} |
|||
Loading…
Reference in new issue