Browse Source

feat:订单样式

dev_des
1054425342@qq.com 2 months ago
parent
commit
9d661fa8ca
  1. 338
      subPackages/orderQy/list.vue

338
subPackages/orderQy/list.vue

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

Loading…
Cancel
Save