teambuy-front/components/order/OrderItem.vue

<template>
  <view class="order-item" @click="clickOrder">
    <!-- 订单头部 - 商家信息 -->
    <view class="order-header">
      <view class="shop-info">
        <image class="shop-logo" :src="order.shopLogo" mode="aspectFill"></image>
        <text class="shop-name">{{ order.shopName }}</text>
      </view>
    </view>

    <!-- 订单内容 - 菜品展示 -->
    <view class="order-content">
      <view class="food-list">
        <view class="food-scroll">
          <view class="food-item" v-for="(food, index) in fourImage" :key="index">
            <image class="food-image" :src="food.image" mode="aspectFill"></image>
          </view>
        </view>
        <view class="food-count" v-if="order.foodCount > 4">共{{ order.foodCount }}个</view>
      </view>
    </view>

    <!-- 订单信息 - 下单时间和价格 -->
    <view class="order-info">
      <view class="order-time">下单时间：{{ order.orderTime }}</view>
      <view class="order-price">
        <text>合计:</text>
        <text class="price">￥{{ order.totalPrice.toFixed(2) }}</text>
      </view>
    </view>

    <!-- 订单操作 -->
    <view class="order-actions">
      <view 
        class="order-toast" 
        v-if="order.status === 'shipping' || order.status === 'delivered'" 
        :style="{ backgroundColor: order.status === 'shipping' ? '#ECFEF4' : '#FFDBDB', color: order.status === 'shipping' ? '#019245' : '#FF2A2A' }">
        <uv-icon name="info-circle" size="34" :color="order.status === 'shipping' ? '#019245' : '#FF2A2A'"></uv-icon>
        <text v-show="order.status === 'shipping'">全力奔跑中，请耐心等待哦！</text>
        <text v-show="order.status === 'delivered'">您的餐点已送到取餐点，请尽快取餐</text>
      </view>
      <view class="action-btn cancel" v-show="order.status === 'pending'" @click="cancelOrder">
        取消订单
      </view>
      <view class="action-btn confirm" v-show="order.status === 'pending'" @click="payOrder">
        立即下单
      </view>
      <view class="action-btn confirm" v-show="order.status === 'processing' || order.status === 'shipping'"
        @click="payOrder">
        查看订单
      </view>
      <view class="action-btn confirm" v-show="order.status === 'completed'" @click="gotoSale">
        订单售后
      </view>
      <view class="action-btn confirm" v-show="order.status === 'delivered'" @click="payOrder">
        取餐完成
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'OrderItem',
  props: {
    // 订单数据对象
    order: {
      type: Object,
      required: true,
      default: () => ({
        id: '',
        shopName: '',
        shopLogo: '',
        foods: [],
        foodCount: 0,
        orderTime: '',
        totalPrice: 0,
        status: 'pending' // pending, processing, shipping, completed, delivered, canceled
      })
    }
  },
  computed: {
    fourImage() {
      return this.order.foods.slice(0, 4)
    }
  },
  methods: {
    // 取消订单
    cancelOrder() {
      this.$emit('cancel', this.order.id);
    },
    // 支付订单
    payOrder() {
      this.$emit('pay', this.order.id);
    },
    // 点击整个订单项
    clickOrder() {
      this.$emit('click', this.order);
    },
    gotoSale() {
      this.$utils.navigateTo({
        url: '/pages_order/order/afterSale?id=' + this.order.id
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.order-item {
  background-color: #ffffff;
  margin: 20rpx 0;
  border-radius: 16rpx;
  padding: 20rpx;
  
  .order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #f5f5f5;
    
    .shop-info {
      display: flex;
      align-items: center;
      
      .shop-logo {
        width: 70rpx;
        height: 70rpx;
        border-radius: 6rpx;
        margin-right: 10rpx;
      }
      
      .shop-name {
        font-size: 28rpx;
      }
    }
  }
  
  .order-content {
    padding: 20rpx 0;
    
    .food-list {
      white-space: nowrap;
      height: 150rpx;
      width: 100%;
      display: flex;
      align-items: center;
    }
    
    .food-scroll {
      display: inline-flex;
    }
    
    .food-item {
      height: 140rpx;
      width: 130rpx;
      margin-right: 10rpx;
      display: inline-block;
      
      .food-image {
        width: 100%;
        height: 100%;
        border-radius: 8rpx;
      }
    }
    
    .food-count {
      flex: 1;
      font-size: 24rpx;
      color: #666;
      text-align: center;
      margin-top: 10rpx;
    }
  }
  
  .order-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10rpx 0;
    border-top: 1rpx solid #f5f5f5;
    
    .order-time {
      font-size: 24rpx;
      color: #666;
    }
    
    .order-price {
      font-size: 24rpx;
      
      .price {
        color: #f00;
        font-weight: 500;
        margin-left: 8rpx;
      }
    }
  }
  
  .order-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 20rpx;
    gap: 20rpx;
    .order-toast {
      display: flex;
      align-items: center;
      // justify-content: flex-start;
      flex: 1;
      // text-align: left;
      gap: 10rpx;
      font-size: 24rpx;
      background-color: pink;
      border-radius: 10rpx;
      padding: 10rpx;

    }
    .action-btn {
      padding: 12rpx 30rpx;
      border-radius: 30rpx;
      font-size: 24rpx;
      font-weight: 500;
      &.cancel {
        background-color: #fff;
        color: $uni-color-third;
        border: 3rpx solid $uni-color-third;
      }
      
      &.confirm {
        background-color: $uni-color;
        color: #fff;
      }
    }
  }
}
</style>