|
|
@@ -1,13 +1,343 @@
|
|
|
<script>
|
|
|
export default {
|
|
|
- name: "orderList"
|
|
|
+ name: "orderList",
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ orderList: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ time: '2026-1-26 10:00:00',
|
|
|
+ status: 'pending',
|
|
|
+ statusText: '待发货',
|
|
|
+ product: {
|
|
|
+ name: '广誉源会员定制玻璃杯',
|
|
|
+ spec: '大号,白色',
|
|
|
+ price: 10,
|
|
|
+ points: 1000
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ time: '2026-1-26 10:00:00',
|
|
|
+ status: 'shipped',
|
|
|
+ statusText: '已发货',
|
|
|
+ product: {
|
|
|
+ name: '广誉源会员定制玻璃杯',
|
|
|
+ spec: '大号,白色',
|
|
|
+ price: 10,
|
|
|
+ points: 1000
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ time: '2026-1-26 10:00:00',
|
|
|
+ status: 'delivered',
|
|
|
+ statusText: '已收货',
|
|
|
+ product: {
|
|
|
+ name: '广誉源会员定制玻璃杯',
|
|
|
+ spec: '大号,白色',
|
|
|
+ price: 10,
|
|
|
+ points: 1000
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ time: '2026-1-26 10:00:00',
|
|
|
+ status: 'pending',
|
|
|
+ statusText: '待发货',
|
|
|
+ product: {
|
|
|
+ name: '广誉源会员定制玻璃杯',
|
|
|
+ spec: '大号,白色',
|
|
|
+ price: 10,
|
|
|
+ points: 1000
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ time: '2026-1-26 10:00:00',
|
|
|
+ status: 'shipped',
|
|
|
+ statusText: '已发货',
|
|
|
+ product: {
|
|
|
+ name: '广誉源会员定制玻璃杯',
|
|
|
+ spec: '大号,白色',
|
|
|
+ price: 10,
|
|
|
+ points: 1000
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 6,
|
|
|
+ time: '2026-1-26 10:00:00',
|
|
|
+ status: 'delivered',
|
|
|
+ statusText: '已收货',
|
|
|
+ product: {
|
|
|
+ name: '广誉源会员定制玻璃杯',
|
|
|
+ spec: '大号,白色',
|
|
|
+ price: 10,
|
|
|
+ points: 1000
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 7,
|
|
|
+ time: '2026-1-26 10:00:00',
|
|
|
+ status: 'pending',
|
|
|
+ statusText: '待发货',
|
|
|
+ product: {
|
|
|
+ name: '广誉源会员定制玻璃杯',
|
|
|
+ spec: '大号,白色',
|
|
|
+ price: 10,
|
|
|
+ points: 1000
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 8,
|
|
|
+ time: '2026-1-26 10:00:00',
|
|
|
+ status: 'shipped',
|
|
|
+ statusText: '已发货',
|
|
|
+ product: {
|
|
|
+ name: '广誉源会员定制玻璃杯',
|
|
|
+ spec: '大号,白色',
|
|
|
+ price: 10,
|
|
|
+ points: 1000
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 9,
|
|
|
+ time: '2026-1-26 10:00:00',
|
|
|
+ status: 'delivered',
|
|
|
+ statusText: '已收货',
|
|
|
+ product: {
|
|
|
+ name: '广誉源会员定制玻璃杯',
|
|
|
+ spec: '大号,白色',
|
|
|
+ price: 10,
|
|
|
+ points: 1000
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 10,
|
|
|
+ time: '2026-1-26 10:00:00',
|
|
|
+ status: 'pending',
|
|
|
+ statusText: '待发货',
|
|
|
+ product: {
|
|
|
+ name: '广誉源会员定制玻璃杯',
|
|
|
+ spec: '大号,白色',
|
|
|
+ price: 10,
|
|
|
+ points: 1000
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 11,
|
|
|
+ time: '2026-1-26 10:00:00',
|
|
|
+ status: 'shipped',
|
|
|
+ statusText: '已发货',
|
|
|
+ product: {
|
|
|
+ name: '广誉源会员定制玻璃杯',
|
|
|
+ spec: '大号,白色',
|
|
|
+ price: 10,
|
|
|
+ points: 1000
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 12,
|
|
|
+ time: '2026-1-26 10:00:00',
|
|
|
+ status: 'delivered',
|
|
|
+ statusText: '已收货',
|
|
|
+ product: {
|
|
|
+ name: '广誉源会员定制玻璃杯',
|
|
|
+ spec: '大号,白色',
|
|
|
+ price: 10,
|
|
|
+ points: 1000
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 加载状态
|
|
|
+ loading: false,
|
|
|
+ // 是否有更多数据
|
|
|
+ hasMore: true,
|
|
|
+ // 分页数据
|
|
|
+ page: 1,
|
|
|
+ pageSize: 10
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ loadMore(){
|
|
|
+ if (this.loading || !this.hasMore) return
|
|
|
+
|
|
|
+ this.loading = true
|
|
|
+ this.page++
|
|
|
+
|
|
|
+ // 模拟加载数据
|
|
|
+ setTimeout(() => {
|
|
|
+ // 模拟新数据
|
|
|
+ const newOrders = [
|
|
|
+ {
|
|
|
+ id: this.orderList.length + 1,
|
|
|
+ time: '2026-1-26 10:00:00',
|
|
|
+ status: 'pending',
|
|
|
+ statusText: '待发货',
|
|
|
+ product: {
|
|
|
+ name: '广誉源会员定制玻璃杯',
|
|
|
+ spec: '大号,白色',
|
|
|
+ price: 10,
|
|
|
+ points: 1000
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: this.orderList.length + 2,
|
|
|
+ time: '2026-1-26 10:00:00',
|
|
|
+ status: 'shipped',
|
|
|
+ statusText: '已发货',
|
|
|
+ product: {
|
|
|
+ name: '广誉源会员定制玻璃杯',
|
|
|
+ spec: '大号,白色',
|
|
|
+ price: 10,
|
|
|
+ points: 1000
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+
|
|
|
+ // 添加新数据
|
|
|
+ this.orderList = [...this.orderList, ...newOrders]
|
|
|
+
|
|
|
+ // 模拟没有更多数据
|
|
|
+ if (this.page >= 3) {
|
|
|
+ this.hasMore = false
|
|
|
+ }
|
|
|
+
|
|
|
+ this.loading = false
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ viewDetail(order){
|
|
|
+ console.log('查看详情:', order)
|
|
|
+ // 这里可以跳转到订单详情页面
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
-
|
|
|
+ <view class="order-box">
|
|
|
+ <u-list @scrolltolower="loadMore" style="height:calc(100vh - 100rpx)">
|
|
|
+ <u-list-item v-for="(item, index) in orderList" :key="item.id" class="order-item">
|
|
|
+ <view class="order-header">
|
|
|
+ <text class="order-time">下单时间: {{ item.time }}</text>
|
|
|
+ <text class="order-status" :class="item.status">{{ item.statusText }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="order-body">
|
|
|
+ <view class="product-info">
|
|
|
+ <text class="product-name">{{ item.product.name }}</text>
|
|
|
+ <text class="product-spec">{{ item.product.spec }}</text>
|
|
|
+ <text class="product-price">¥{{ item.product.price }}+{{ item.product.points }}积分</text>
|
|
|
+ </view>
|
|
|
+ <button class="detail-button" @click="viewDetail(item)">查看详情</button>
|
|
|
+ </view>
|
|
|
+ </u-list-item>
|
|
|
+ <!-- 空数据状态 -->
|
|
|
+ <u-empty
|
|
|
+ v-if="orderList.length === 0"
|
|
|
+ icon="order"
|
|
|
+ text="暂无订单"
|
|
|
+ mode="page"
|
|
|
+ >
|
|
|
+ </u-empty>
|
|
|
+ <!-- 加载更多 -->
|
|
|
+ <u-loadmore
|
|
|
+ v-if="orderList.length > 0"
|
|
|
+ :status="loading ? 'loading' : (hasMore ? 'more' : 'nomore')"
|
|
|
+ loading-text="加载中..."
|
|
|
+ nomore-text="没有更多订单了"
|
|
|
+ @loadmore="loadMore"
|
|
|
+ >
|
|
|
+ </u-loadmore>
|
|
|
+ </u-list>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-
|
|
|
+.order-box {
|
|
|
+ width: 750rpx;
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #F5F8F8;
|
|
|
+ padding: 32rpx;
|
|
|
+ .order-item{
|
|
|
+ width: 686rpx;
|
|
|
+ height: 256rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ margin-bottom: 28rpx;
|
|
|
+ .order-header{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1rpx solid #EEEEEE;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ .order-time{
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 24rpx;
|
|
|
+ }
|
|
|
+ .order-status{
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 24rpx;
|
|
|
+ &.pending{
|
|
|
+ color: #34c7c2;
|
|
|
+ }
|
|
|
+ &.shipped{
|
|
|
+ color: #34c7c2;
|
|
|
+ }
|
|
|
+ &.delivered{
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .order-body{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ .product-info{
|
|
|
+ flex: 1;
|
|
|
+ .product-name{
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 32rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .product-spec{
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 24rpx;
|
|
|
+ margin-bottom:32rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .product-price{
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #F53E54;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .detail-button{
|
|
|
+ height: 48rpx;
|
|
|
+ border-radius: 98rpx 98rpx 98rpx 98rpx;
|
|
|
+ border: 2rpx solid #BBBBBB;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 43rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 100rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|