|
|
|
@ -26,38 +26,52 @@ |
|
|
|
<view class="order-item" v-for="order in orderList" :key="order.id"> |
|
|
|
<!-- 订单头部 --> |
|
|
|
<view class="order-header"> |
|
|
|
<text class="order-number">订单号：{{ order.orderNo }}</text> |
|
|
|
<text class="order-status" :class="[getStatusClass(order.status)]">{{ |
|
|
|
getStatusText(order.status) |
|
|
|
}}</text> |
|
|
|
<view class="order-left"> |
|
|
|
<view class="order-number-section"> |
|
|
|
<text class="order-label">订单号</text> |
|
|
|
<text class="order-number">{{ order.orderNo }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="order-status-wrapper"> |
|
|
|
<text class="order-status" :class="[getStatusClass(order.status)]"> |
|
|
|
{{ getStatusText(order.status) }} |
|
|
|
</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 权益商品包名 --> |
|
|
|
<view class="package-name"> |
|
|
|
<text>{{ order.packageName }}</text> |
|
|
|
<view class="package-section"> |
|
|
|
<view class="package-icon">📦</view> |
|
|
|
<text class="package-name">{{ order.packageName }}</text> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 商品列表 --> |
|
|
|
<view class="goods-list"> |
|
|
|
<view |
|
|
|
class="goods-item" |
|
|
|
v-for="goods in order.goodsList" |
|
|
|
:key="goods.id" |
|
|
|
> |
|
|
|
<image class="goods-image" :src="goods.image" mode="aspectFill" /> |
|
|
|
<view class="goods-info"> |
|
|
|
<text class="goods-name">{{ goods.name }}</text> |
|
|
|
<text class="goods-type">{{ getGoodsTypeName(goods.type) }}</text> |
|
|
|
<text class="goods-price">¥{{ goods.price }}</text> |
|
|
|
</view> |
|
|
|
<view class="goods-action"> |
|
|
|
<button |
|
|
|
class="action-btn" |
|
|
|
:class="[getActionBtnClass(goods.type)]" |
|
|
|
@click="handleGoodsAction(goods)" |
|
|
|
> |
|
|
|
{{ getActionBtnText(goods.type) }} |
|
|
|
</button> |
|
|
|
<view class="goods-section"> |
|
|
|
<view class="goods-title">商品清单</view> |
|
|
|
<view class="goods-list"> |
|
|
|
<view |
|
|
|
class="goods-item" |
|
|
|
v-for="goods in order.goodsList" |
|
|
|
:key="goods.id" |
|
|
|
> |
|
|
|
<image class="goods-image" :src="goods.image" mode="aspectFill" /> |
|
|
|
<view class="goods-info"> |
|
|
|
<text class="goods-name">{{ goods.name }}</text> |
|
|
|
<view class="goods-meta"> |
|
|
|
<text class="goods-type">{{ |
|
|
|
getGoodsTypeName(goods.type) |
|
|
|
}}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="goods-action"> |
|
|
|
<button |
|
|
|
class="action-btn" |
|
|
|
:class="[getActionBtnClass(goods.type)]" |
|
|
|
@click="handleGoodsAction(goods)" |
|
|
|
> |
|
|
|
{{ getActionBtnText(goods.type) }} |
|
|
|
</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -65,8 +79,14 @@ |
|
|
|
<!-- 订单底部 --> |
|
|
|
<view class="order-footer"> |
|
|
|
<view class="order-info"> |
|
|
|
<text class="order-time">{{ formatTime(order.createTime) }}</text> |
|
|
|
<text class="order-total">总计：¥{{ order.totalAmount }}</text> |
|
|
|
<view class="order-time-section"> |
|
|
|
<text class="time-label">下单时间</text> |
|
|
|
<text class="order-time">{{ formatTime(order.createTime) }}</text> |
|
|
|
</view> |
|
|
|
<view class="order-total-section"> |
|
|
|
<text class="total-label">实付金额</text> |
|
|
|
<text class="order-total">¥{{ order.totalAmount }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="order-actions"> |
|
|
|
<button |
|
|
|
@ -74,17 +94,18 @@ |
|
|
|
@click="showEquityCode(order)" |
|
|
|
v-if="order.status !== 0" |
|
|
|
> |
|
|
|
权益码 |
|
|
|
<text class="btn-icon">🎫</text> |
|
|
|
<text>权益码</text> |
|
|
|
</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 空状态 --> |
|
|
|
<view class="empty-state" v-if="orderList.length === 0 && !loading"> |
|
|
|
<view class="empty-state"> |
|
|
|
<image |
|
|
|
class="empty-image" |
|
|
|
src="/static/image/empty-order.png" |
|
|
|
:src="showImg('/uploads/20250808/c16267f9cc2b7a68bf23713b5847987e.png')" |
|
|
|
mode="aspectFit" |
|
|
|
/> |
|
|
|
<text class="empty-text">暂无订单</text> |
|
|
|
@ -414,29 +435,32 @@ export default { |
|
|
|
<style lang="scss" scoped> |
|
|
|
.order-list-container { |
|
|
|
min-height: 100vh; |
|
|
|
background-color: #f5f5f5; |
|
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
|
|
|
} |
|
|
|
|
|
|
|
// Tab样式 |
|
|
|
.tab-container { |
|
|
|
display: flex; |
|
|
|
background-color: #fff; |
|
|
|
border-bottom: 1px solid #eee; |
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2); |
|
|
|
position: sticky; |
|
|
|
top: 0; |
|
|
|
z-index: 10; |
|
|
|
box-shadow: 0 4rpx 20rpx rgba(102, 126, 234, 0.3); |
|
|
|
} |
|
|
|
|
|
|
|
.tab-item { |
|
|
|
flex: 1; |
|
|
|
padding: 30rpx 0; |
|
|
|
padding: 32rpx 0; |
|
|
|
text-align: center; |
|
|
|
position: relative; |
|
|
|
transition: all 0.3s ease; |
|
|
|
|
|
|
|
&.active { |
|
|
|
.tab-text { |
|
|
|
color: #007aff; |
|
|
|
font-weight: bold; |
|
|
|
color: #ffffff; |
|
|
|
font-weight: 700; |
|
|
|
transform: scale(1.05); |
|
|
|
} |
|
|
|
|
|
|
|
&::after { |
|
|
|
@ -445,110 +469,197 @@ export default { |
|
|
|
bottom: 0; |
|
|
|
left: 50%; |
|
|
|
transform: translateX(-50%); |
|
|
|
width: 60rpx; |
|
|
|
height: 4rpx; |
|
|
|
background-color: #007aff; |
|
|
|
border-radius: 2rpx; |
|
|
|
width: 80rpx; |
|
|
|
height: 6rpx; |
|
|
|
background: linear-gradient(45deg, #ffffff, #f1f2f6); |
|
|
|
border-radius: 3rpx; |
|
|
|
box-shadow: 0 2rpx 8rpx rgba(255, 255, 255, 0.4); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&:not(.active) { |
|
|
|
.tab-text { |
|
|
|
opacity: 0.7; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.tab-text { |
|
|
|
font-size: 28rpx; |
|
|
|
color: #333; |
|
|
|
font-size: 26rpx; |
|
|
|
color: #ffffff; |
|
|
|
font-weight: 600; |
|
|
|
letter-spacing: 0.5rpx; |
|
|
|
transition: all 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
// 订单列表样式 |
|
|
|
.order-scroll { |
|
|
|
height: calc(100vh - 120rpx); |
|
|
|
padding: 20rpx; |
|
|
|
margin: 20rpx; |
|
|
|
width: 710rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.order-item { |
|
|
|
background-color: #fff; |
|
|
|
border-radius: 16rpx; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
border-radius: 24rpx; |
|
|
|
margin-bottom: 24rpx; |
|
|
|
overflow: hidden; |
|
|
|
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08); |
|
|
|
border: 1px solid rgba(255, 255, 255, 0.8); |
|
|
|
transition: all 0.3s ease; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
transform: translateY(-4rpx); |
|
|
|
box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.12); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 订单头部 |
|
|
|
.order-header { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
padding: 30rpx; |
|
|
|
border-bottom: 1px solid #f0f0f0; |
|
|
|
align-items: flex-start; |
|
|
|
padding: 24rpx 30rpx; |
|
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); |
|
|
|
border-bottom: 1px solid #e9ecef; |
|
|
|
} |
|
|
|
|
|
|
|
.order-left { |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.order-number-section { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 6rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.order-label { |
|
|
|
font-size: 22rpx; |
|
|
|
color: #8e9aaf; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
.order-number { |
|
|
|
font-size: 28rpx; |
|
|
|
color: #333; |
|
|
|
font-size: 26rpx; |
|
|
|
color: #495057; |
|
|
|
font-weight: 600; |
|
|
|
font-family: "SF Mono", "Monaco", "Cascadia Code", monospace; |
|
|
|
} |
|
|
|
|
|
|
|
.order-status-wrapper { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.order-status { |
|
|
|
font-size: 26rpx; |
|
|
|
padding: 8rpx 16rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
font-size: 24rpx; |
|
|
|
padding: 10rpx 20rpx; |
|
|
|
border-radius: 50rpx; |
|
|
|
font-weight: 600; |
|
|
|
letter-spacing: 0.5rpx; |
|
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); |
|
|
|
|
|
|
|
&.status-pending { |
|
|
|
background-color: #fff3cd; |
|
|
|
background: linear-gradient(45deg, #fff3cd, #ffeaa7); |
|
|
|
color: #856404; |
|
|
|
border: 1px solid #ffeaa7; |
|
|
|
} |
|
|
|
|
|
|
|
&.status-waiting { |
|
|
|
background-color: #d4edda; |
|
|
|
color: #155724; |
|
|
|
background: linear-gradient(45deg, #d4edda, #00b894); |
|
|
|
color: #ffffff; |
|
|
|
border: 1px solid #00b894; |
|
|
|
} |
|
|
|
|
|
|
|
&.status-shipping { |
|
|
|
background-color: #cce5ff; |
|
|
|
color: #004085; |
|
|
|
background: linear-gradient(45deg, #cce5ff, #0984e3); |
|
|
|
color: #ffffff; |
|
|
|
border: 1px solid #0984e3; |
|
|
|
} |
|
|
|
|
|
|
|
&.status-completed { |
|
|
|
background-color: #e2e3e5; |
|
|
|
color: #383d41; |
|
|
|
background: linear-gradient(45deg, #e2e3e5, #636e72); |
|
|
|
color: #ffffff; |
|
|
|
border: 1px solid #636e72; |
|
|
|
} |
|
|
|
|
|
|
|
&.status-refund { |
|
|
|
background-color: #f8d7da; |
|
|
|
color: #721c24; |
|
|
|
background: linear-gradient(45deg, #f8d7da, #e17055); |
|
|
|
color: #ffffff; |
|
|
|
border: 1px solid #e17055; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 权益商品包名 |
|
|
|
.package-name { |
|
|
|
// 权益商品包 |
|
|
|
.package-section { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
padding: 20rpx 30rpx; |
|
|
|
background-color: #f8f9fa; |
|
|
|
border-bottom: 1px solid #f0f0f0; |
|
|
|
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); |
|
|
|
margin: 0 20rpx; |
|
|
|
border-radius: 16rpx; |
|
|
|
margin-top: -10rpx; |
|
|
|
box-shadow: 0 4rpx 20rpx rgba(102, 126, 234, 0.3); |
|
|
|
} |
|
|
|
|
|
|
|
text { |
|
|
|
font-size: 26rpx; |
|
|
|
color: #666; |
|
|
|
} |
|
|
|
.package-icon { |
|
|
|
font-size: 32rpx; |
|
|
|
margin-right: 16rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.package-name { |
|
|
|
font-size: 28rpx; |
|
|
|
color: #ffffff; |
|
|
|
font-weight: 600; |
|
|
|
letter-spacing: 0.5rpx; |
|
|
|
} |
|
|
|
|
|
|
|
// 商品部分 |
|
|
|
.goods-section { |
|
|
|
margin: 20rpx 0; |
|
|
|
} |
|
|
|
|
|
|
|
.goods-title { |
|
|
|
font-size: 26rpx; |
|
|
|
color: #495057; |
|
|
|
font-weight: 600; |
|
|
|
padding: 0 30rpx 16rpx; |
|
|
|
border-bottom: 2rpx solid #e9ecef; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
// 商品列表 |
|
|
|
.goods-list { |
|
|
|
padding: 0 30rpx; |
|
|
|
padding: 0 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.goods-item { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
padding: 30rpx 0; |
|
|
|
border-bottom: 1px solid #f0f0f0; |
|
|
|
padding: 24rpx 20rpx; |
|
|
|
margin-bottom: 16rpx; |
|
|
|
background: #ffffff; |
|
|
|
border-radius: 16rpx; |
|
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); |
|
|
|
border: 1px solid #f1f3f4; |
|
|
|
transition: all 0.3s ease; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
transform: translateY(-2rpx); |
|
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.12); |
|
|
|
} |
|
|
|
|
|
|
|
&:last-child { |
|
|
|
border-bottom: none; |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.goods-image { |
|
|
|
width: 120rpx; |
|
|
|
height: 120rpx; |
|
|
|
border-radius: 12rpx; |
|
|
|
width: 100rpx; |
|
|
|
height: 100rpx; |
|
|
|
border-radius: 16rpx; |
|
|
|
margin-right: 20rpx; |
|
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); |
|
|
|
} |
|
|
|
|
|
|
|
.goods-info { |
|
|
|
@ -558,46 +669,64 @@ export default { |
|
|
|
|
|
|
|
.goods-name { |
|
|
|
display: block; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #333; |
|
|
|
margin-bottom: 10rpx; |
|
|
|
font-size: 26rpx; |
|
|
|
color: #2d3748; |
|
|
|
font-weight: 600; |
|
|
|
margin-bottom: 12rpx; |
|
|
|
line-height: 1.4; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
.goods-meta { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.goods-type { |
|
|
|
display: block; |
|
|
|
font-size: 24rpx; |
|
|
|
color: #999; |
|
|
|
margin-bottom: 10rpx; |
|
|
|
font-size: 22rpx; |
|
|
|
color: #718096; |
|
|
|
background: #edf2f7; |
|
|
|
padding: 6rpx 12rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
.goods-price { |
|
|
|
font-size: 28rpx; |
|
|
|
color: #ff4757; |
|
|
|
font-weight: bold; |
|
|
|
font-size: 26rpx; |
|
|
|
color: #e53e3e; |
|
|
|
font-weight: 700; |
|
|
|
font-family: "SF Mono", "Monaco", "Cascadia Code", monospace; |
|
|
|
} |
|
|
|
|
|
|
|
.goods-action { |
|
|
|
.action-btn { |
|
|
|
padding: 12rpx 24rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
font-size: 24rpx; |
|
|
|
padding: 2rpx 25rpx; |
|
|
|
border-radius: 24rpx; |
|
|
|
font-size: 22rpx; |
|
|
|
font-weight: 600; |
|
|
|
border: none; |
|
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15); |
|
|
|
transition: all 0.3s ease; |
|
|
|
|
|
|
|
&:active { |
|
|
|
transform: scale(0.95); |
|
|
|
} |
|
|
|
|
|
|
|
&.btn-view { |
|
|
|
background-color: #007aff; |
|
|
|
background: linear-gradient(45deg, #667eea, #764ba2); |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
&.btn-reserve { |
|
|
|
background-color: #ff9500; |
|
|
|
background: linear-gradient(45deg, #f093fb, #f5576c); |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
&.btn-use { |
|
|
|
background-color: #34c759; |
|
|
|
background: linear-gradient(45deg, #4facfe, #00f2fe); |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
@ -608,35 +737,68 @@ export default { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
padding: 30rpx; |
|
|
|
background-color: #f8f9fa; |
|
|
|
padding: 24rpx 30rpx; |
|
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); |
|
|
|
border-top: 1px solid #dee2e6; |
|
|
|
margin-top: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.order-info { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
gap: 40rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.order-time-section, |
|
|
|
.order-total-section { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 6rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.time-label, |
|
|
|
.total-label { |
|
|
|
font-size: 20rpx; |
|
|
|
color: #8e9aaf; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
.order-time { |
|
|
|
display: block; |
|
|
|
font-size: 24rpx; |
|
|
|
color: #999; |
|
|
|
margin-bottom: 10rpx; |
|
|
|
color: #495057; |
|
|
|
font-weight: 500; |
|
|
|
font-family: "SF Mono", "Monaco", "Cascadia Code", monospace; |
|
|
|
} |
|
|
|
|
|
|
|
.order-total { |
|
|
|
font-size: 28rpx; |
|
|
|
color: #333; |
|
|
|
font-weight: bold; |
|
|
|
color: #e53e3e; |
|
|
|
font-weight: 700; |
|
|
|
font-family: "SF Mono", "Monaco", "Cascadia Code", monospace; |
|
|
|
} |
|
|
|
|
|
|
|
.order-actions { |
|
|
|
.equity-code-btn { |
|
|
|
padding: 16rpx 32rpx; |
|
|
|
background-color: #007aff; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 8rpx; |
|
|
|
padding: 0rpx 25rpx; |
|
|
|
background: linear-gradient(45deg, #667eea, #764ba2); |
|
|
|
color: #fff; |
|
|
|
border-radius: 24rpx; |
|
|
|
font-size: 26rpx; |
|
|
|
border-radius: 32rpx; |
|
|
|
font-size: 24rpx; |
|
|
|
font-weight: 600; |
|
|
|
border: none; |
|
|
|
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4); |
|
|
|
transition: all 0.3s ease; |
|
|
|
|
|
|
|
&:active { |
|
|
|
transform: scale(0.95); |
|
|
|
} |
|
|
|
|
|
|
|
.btn-icon { |
|
|
|
font-size: 20rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -644,6 +806,10 @@ export default { |
|
|
|
.empty-state { |
|
|
|
text-align: center; |
|
|
|
padding: 200rpx 0; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
flex-direction: column; |
|
|
|
} |
|
|
|
|
|
|
|
.empty-image { |
|
|
|
|
1054425342@qq.com
2 months ago