xyh 5 месяцев назад
Родитель
Сommit
f0455721df
3 измененных файлов с 351 добавлено и 3 удалено
  1. 18 0
      src/points/home/index.vue
  2. 333 3
      src/points/order/orderList.vue
  3. BIN
      src/static/points/orderGo.png

+ 18 - 0
src/points/home/index.vue

@@ -99,6 +99,11 @@ export default {
       uni.navigateTo({
         url: '/points/pointInfo/billPage'
       });
+    },
+    orderGo(){
+      uni.navigateTo({
+        url: '/points/order/orderList'
+      });
     }
   }
 }
@@ -124,6 +129,11 @@ export default {
     </view>
     <!-- 商品列表组件 -->
     <ProductList ref="productRef" :scrollTop="scrollTop" />
+    <!-- 积分订单跳转 -->
+     <view @click="orderGo" class="orderIcons">
+        <ImageItem src="/static/points/orderGo.png"/>
+     </view>
+    
   </view>
 </template>
 
@@ -133,6 +143,14 @@ export default {
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   position: relative;
+  .orderIcons{
+    width: 80rpx;
+    height: 80rpx;
+    position: fixed;
+    right: 6rpx;
+    bottom: 164rpx;
+    z-index: 99;
+  }
 }
 .points-task {
   background-image: url("@/static/points/homeBg.png");

+ 333 - 3
src/points/order/orderList.vue

@@ -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>

BIN
src/static/points/orderGo.png