app-AgricultureSmart/uniapp/components/order-list/order-list.vue

<template>
  <view class="order-list">
    <view class="order-item" v-for="order in orders" :key="order.id">
      <view class="order-header">
        <image class="user-avatar" :src="storeIconById[order.storeId]" mode="aspectFill" />
        <view class="order-info">
          <view class="order-number">订单编号：{{ order.transCode }}</view>
          <view class="order-remark">备注：{{ order.orderRemark||"" }}</view>
          <view class="order-remark">当前状态：{{ order.orderState||"" }}</view>
        </view>
      </view>
      <view class="order-details">
        <view class="order-detail-row">
          <text class="label">下单时间:</text>
          <text>{{ order.timeOrder||"" }}</text>
        </view>
        <view class="order-detail-row">
          <text class="label">数量:</text>
          <text>{{ order.orderProductsLists.length }}</text>
        </view>
        <view class="order-detail-row">
          <text class="label">实付:</text>
          <text class="order-price">￥{{ order.originPay }}</text>
        </view>
      </view>
      <view class="order-actions">
        <van-button size="small" type="primary" @click="handleOrderDetail(order)">查看详情</van-button>
<!--        <van-button size="small" type="danger" @click="handleOrderAction(order)">{{ getActionText(order.orderState) }}</van-button>-->
        <van-button size="small" plain type="info" @click="handleReorder(order)">再来一单</van-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    orders: {
      type: Array,
      required: true
    }
  },
  data	(){
	return {
		storeIconById:{
			1:"http://localhost:2441/files/1714889318659-scenes.png",
			2:"http://localhost:2441/files/1714889474353-head2.jpg"
		}
	}  
  },
  methods: {
    handleOrderDetail(order) {
      console.log(this.orders)
      console.log(`查看订单详情: ${order.transCode}`);
    },
    handleOrderAction(order) {
      const action = this.getActionText(order.orderState);
      console.log(`执行操作: ${action} - 订单编号: ${order.transCode}`);
    },
    handleReorder(order) {
      // console.log(`跳转到商店页面: `);
      // 在这里编写跳转到相应商店页面的逻辑
      uni.navigateTo({
        url: `/subpkg/shopdetail/shopdetail?shopID=${order.storeId}`
      })
    },
    getActionText(orderState) {
      switch (orderState) {
        case "待付款":
          return "立即付款";
        case "待收货":
          return "确认收货";
        case "退款/售后":
          return "申请退款";
        case "已完成":
          return "重新购买";
        default:
          return "暂无操作";
      }
    }
  }
};
</script>

<style lang="scss">
.order-list {
  .order-item {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    padding: 12px;
    margin-bottom: 12px;

    .order-header {
      display: flex;
      align-items: center;
      margin-bottom: 8px;

      .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 12px;
      }

      .order-info {
        flex: 1;

        .order-number {
          font-weight: bold;
          font-size: 14px;
          margin-bottom: 4px;
        }

        .order-remark {
          color: #666;
          font-size: 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .order-details {
      margin-bottom: 8px;

      .order-detail-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px;
        font-size: 12px;

        .label {
          color: #666;
        }

        .order-price {
          font-weight: bold;
          color: #ee0a24;
        }
      }
    }

    .order-actions {
      display: flex;
      justify-content: flex-end;

      .van-button {
        margin-left: 8px;
        font-size: 12px;
        padding: 0 8px;
      }
    }
  }
}
</style>