aluminium-trading-uniapp-240925/pages_order/components/order/myOrderList.vue

<template>
  <view class="page">

    <view v-for="(item, index) in list" v-if="list.length>0" :key="index" class="content"
          @click="lookDetail(item, index)">

      <view class="left">
        <image :src="item.pic" mode="aspectFill"></image>
      </view>

      <view class="right">
        <view class="text-hidden-1">
          订单状态：{{ orderStatusText(item.orderFlag) }}
        </view>
        <view class="text-hidden-1">
          公司名称：{{ item.companyName }}
        </view>
        <view class="text-hidden-1">
          单价：{{ item.price }}
        </view>
        <!--<view class="text-hidden-1">-->
        <!--  数量：{{ item.num }}-->
        <!--</view>-->
        <view class="text-hidden-1">
          提货地址：{{ item.address }}
        </view>
        <!--<view class="text-hidden-1">-->
        <!--  定金：{{ item.deposit }}-->
        <!--</view>-->
        <view class="text-hidden-1">
          提货时间：{{ item.takeTime }}
        </view>
        <!--审核状态 0审核中 1 审核通过 2审核未通过-->
        <!--<view class="text-hidden-1">-->
        <!--  审核状态：{{ item.auditStatus == 0? '审核中' : (item.auditStatus == 1? '审核通过' : '审核未通过') }}-->
        <!--</view>-->
      </view>

    </view>

    <!--无历史记录-->
    <view
        v-else
        style="padding: 100rpx 0;">
      <uv-empty
          iconSize="100rpx"
          mode="history"
          textSize="28rpx"/>
    </view>
  </view>
</template>

<script>
export default {
  name: "myOrderList",
  props: {
    list: {
      type: Array,
      default: false
    },
  },
  data() {
    return {}
  },
  methods: {

    // 订单状态 0 未确认 1已确认 2已取消 3已付保证金 4 已退款 5已提货
    orderStatusText(flag) {
      const statusMap = {
        0: '未确认',
        1: '已确认',
        2: '已取消',
        3: '已付保证金',
        4: '已退款',
        5: '已提货'
      };
      return statusMap[flag] || '未知状态';
    },


    // 查看详情
    lookDetail(item, index) {
      uni.navigateTo({
        url: `/pages_order/order/myOrderDetail?orderInfo=${encodeURIComponent(JSON.stringify(item))}`
      });
    },


  }
}
</script>


<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  gap: 20rpx;

  height: calc(90vh - 180rpx);


  .content {
    display: flex;
    margin: 10rpx 0;

    .left {
      width: 200rpx;
      height: 100%;
      //height: 130rpx;
      border-radius: 10rpx;

      image {
        //width: 130rpx;
        //height: 130rpx;
        width: 100%;
        height: 100%;
        border-radius: 10rpx;
      }
    }

    .right {
      width: calc(100% - 160rpx);
      color: #777;
      font-size: 24rpx;
      padding-left: 20rpx;
      line-height: 40rpx;
      background-color: #F8F8F8;
    }
  }

}
</style>