yitisheng-mini-app/pages/zyb/order/list.vue

<template>
  <view class="order-list border-top">
    <view v-if="orders.length > 0">
      <view v-for="(order, index) in orders" :key="index">
        <view class="order-item" @click="openDetail(order)">
          <view class="flexWrap border-bottom" style="padding: 20rpx">
            <view class="flex-item-2">订单号</view>
            <view class="flex-item-6">
              <text class="multiline-text">{{ order.orderCode }}</text>
            </view>
            <view class="flex-item-2 font-weight-b">
              <text class="float-right" :style="'color:'+getColorByStatus(order.orderStatus)">{{ getTextByStatus(order.orderStatus) }}</text>
            </view>
          </view>
          <view class="flexWrap" style="padding: 5rpx 0">
            <view class="flex-item-2"></view>
            <view class="flex-item-8 font-weight-b"><text>{{ order.skuName }}</text></view>
          </view>
          <view class="flexWrap" style="padding: 5rpx 0">
            <view class="flex-item-2"></view>
            <view class="flex-item-8"><text class="multiline-text">{{ order.skuDetail }}</text></view>
          </view>
          <view class="flexWrap" style="padding: 5rpx 0">
            <view class="flex-item-2"></view>
            <view class="flex-item-8">下单时间：<text>{{ order.createTime }}</text></view>
          </view>
          <view class="flexWrap" style="padding: 5rpx 0" v-if="order.orderStatus && order.orderStatus==='2'">
            <view class="flex-item-2"></view>
            <view class="flex-item-8">付款时间：<text>{{ order.paymentTime }}</text></view>
          </view>
          <view class="flexWrap" style="padding: 5rpx 0" v-if="order.refundTime">
            <view class="flex-item-2"></view>
            <view class="flex-item-8">退款时间：<text>{{ order.refundTime }}</text></view>
          </view>
          <view class="flexWrap" style="padding: 5rpx 0">
            <view class="flex-item-2"></view>
            <view class="flex-item-8"><text class="redOrange2">￥{{ order.totalAmount }}</text></view>
          </view>
        </view>
        <view class="divider" v-if="index !== orders.length - 1"></view>
      </view>
    </view>
    <view v-else>
      <text class="no-orders-text">暂无订单信息</text>
    </view>
  </view>
</template>

<script>
import StaticConstant from "@/common/StaticConstant";
import ApiConstant from "@/common/ApiConstant";
import Request from '@/common/request'

let request = new Request()
export default {
  computed: {
    ApiConstant() {
      return ApiConstant
    },
    StaticConstant() {
      return StaticConstant
    }
  },
  data() {
    return {
      lo:true,
      orders: []
    };
  },
  onPullDownRefresh() {
    this.current = 1
    this.getOrderList();
  },
  /*onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
    //当距离大于600时显示回到顶部按钮，//当距离小于600时隐藏回到顶部按钮
    this.topFlag = e.scrollTop > 600;
  },*/
  onLoad(){
    this.getOrderList()
  },
  methods:{
    loadMore(){
      if (this.status === 'noMore') {
        return;
      }
      console.log('加载中')
      this.current++;
      this.getOrderList()
    },
    openDetail(e){
      uni.navigateTo({
        url: '/pages/zyb/order/detail?orderCode='+e.orderCode
      })
    },
    getOrderList(){
      request.get(ApiConstant.VIP.orderList,{}).then(r => {
        console.log(r)
        if (r.success) {
          //追加到列表数据中
          this.orders = r.result
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    getColorByStatus(status){
      if (status === '1') {
        return '#f96543';
      }else if (status === '2') {
        return '#85e689';
      }else if (status === '5') {
        return '#f2891b';
      }else{
        return '#bb0303';
      }
    },
    getTextByStatus(status){
      if (status === '1') {
        return '待支付';
      }else if (status === '2') {
        return '已支付';
      }else if (status === '5') {
        return '已退款';
      }else{
        return '未知';
      }
    }
  }
};
</script>

<style lang="scss">
.order-list {
  padding:0 20rpx;
}

.order-item {
  background-color: #ffffff;
  padding: 20rpx;
  margin: 5px 0;
  //border-bottom: 1px solid #eeeeee;

  .order-id {
    font-weight: bold;
    color: #333;
  }

  .product-name {
    color: #666;
  }

  .totalAmount {
    color: #009688;
  }

  .status {
    color: #ff9900;
  }

  &:last-child {
    border-bottom: none; // Remove bottom border for the last item
  }
}

.divider {
  height: 1px;
  background-color: #eeeeee;
}

.no-orders-text {
  text-align: center;
  margin-top: 20rpx;
  color: #999;
}
</style>