ruoyi-vue-pro/yudao-ui-app/pages/order/detail.vue

<template>
  <view class="container">
    <viwe class="detail-header">
      <view class="order-status">{{ order.status | getStatusName }}</view>
    </viwe>

    <view class="order-product">
      <view class="order-item" v-for="item in order.items" :key="item.id">
        <image class="product-image" :src="item.picUrl"></image>
        <view class="item-info">
          <view class="info-text">
            <u--text :lines="1" size="15px" color="#333333" :text="item.spuName"></u--text>
            <u-gap height="10"></u-gap>
            <yd-text-price class="product-price" size="13" intSize="14" :price="item.originalUnitPrice"></yd-text-price>
          </view>
          <view class="price-number-box">
            <view class="number-box">
              <view class="product-number">共 {{ item.count }} 件</view>
              小计：
            </view>
            <view class="number-box" @click.stop>
              <yd-text-price size="13" intSize="16" :price="item.originalPrice"></yd-text-price>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view v-if="order.no" >
      <view v-if="order.no" class="base-info">
        <view class="info-item">
          <view class="item-name">订单编号：</view>
          <view class="item-value">{{ order.no }}</view>
        </view>
        <view class="info-item">
          <view class="item-name">下单时间：</view>
          <view class="item-value">{{ order.createTime }}</view>
        </view>
        <view v-if="order.payOrderId" class="info-item">
          <view class="item-name">支付方式：</view>
          <view class="item-value">{{ order.payOrderId }}</view>
        </view>
        <view v-if="order.payTime" class="info-item">
          <view class="item-name">支付时间：</view>
          <view class="item-value">{{ order.payTime }}</view>
        </view>
      </view>

      <view class="delivery-info">
        <view class="info-item">
          <view class="item-name">收货地址：</view>
          <view class="item-value">{{ order.receiverAreaName + order.receiverDetailAddress  + order.receiverDetailAddress  + order.receiverDetailAddress }}</view>
        </view>
        <view v-if="order.receiverName" class="info-item">
          <view class="item-name">收货人：</view>
          <view class="item-value">{{ order.receiverName }}</view>
        </view>
        <view v-if="order.receiverMobile" class="info-item">
          <view class="item-name">联系电话：</view>
          <view class="item-value">{{ order.receiverMobile }}</view>
        </view>
      </view>

      <view class="delivery-info">
        <view class="info-item">
          <view class="item-name">商品总额：</view>
          <yd-text-price class="product-price" size="13" intSize="16" :price="order.originalPrice"></yd-text-price>
        </view>
        <view class="info-item">
          <view class="item-name">运费：</view>
          <yd-text-price class="product-price" size="13" intSize="16" :price="order.deliveryPrice"></yd-text-price>
        </view>
        <view class="info-item">
          <view class="item-name">优惠：</view>
          <yd-text-price class="product-price" size="13" intSize="16" symbol="-￥" :price="order.discountPrice"></yd-text-price>
        </view>
        <view class="info-item">
          <view class="item-name">订单金额：</view>
          <yd-text-price class="product-price" size="15" intSize="20" :price="order.orderPrice"></yd-text-price>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import { getOrderDetail } from '../../api/order'
import orderStatus from '@/common/orderStatus'

export default {
  name: 'orderDetail',
  filters: {
    getStatusName(status) {
      return orderStatus[status + ''].name
    }
  },
  data() {
    return {
      orderId: undefined,
      order: {}
    }
  },
  onLoad(e) {
    this.orderId = e.orderId
    if (!this.orderId) {
      uni.$u.toast('请求参数错误')
    } else {
      this.loadOrderDetailData()
    }
  },
  methods: {
    loadOrderDetailData() {
      getOrderDetail({ id: this.orderId })
        .then(res => {
          this.order = res.data || {}
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #f3f3f3;
  height: 100vh;
}

.detail-header {
  @include flex-center();
  background-color: $custom-bg-color;
  padding: 10rpx 0;
  border-radius: 0 0 20rpx 20rpx;
}

.order-product {
  background-color: $custom-bg-color;
  border-radius: 20rpx;
  margin: 20rpx;
  padding: 10rpx 20rpx;
  .order-item {
    background: #ffffff;
    @include flex-space-between;
    padding: 10rpx 0 10rpx 5rpx;

    .product-check {
      padding: 20rpx;

      .un-check-box {
        width: 20px;
        height: 20px;
        border: 1px solid #939393;
        border-radius: 50%;
      }
    }

    .product-image {
      width: 180rpx;
      height: 180rpx;
      border-radius: 10rpx;
    }

    .item-info {
      flex: 1;
      padding: 0 20rpx;

      .info-text {
        padding-bottom: 10rpx;

        .product-price {
          margin-top: 15rpx;
        }
      }

      .price-number-box {
        @include flex-space-between;

        .number-box {
          font-size: 24rpx;

          .product-number {
            width: 200rpx;
          }
        }

        .number-box {
          height: 60rpx;
          @include flex-center;
        }
      }
    }
  }
}

.base-info {
  background-color: $custom-bg-color;
  border-radius: 20rpx;
  margin: 20rpx;
  padding: 20rpx;
  .info-item {
    @include flex-left();
    padding: 10rpx 0;
    .item-name {
      color: #999;
      font-size: 26rpx;
    }
    .item-value {
      color: #333;
      font-size: 26rpx;
    }
  }
}

.delivery-info {
  background-color: $custom-bg-color;
  border-radius: 20rpx;
  margin: 20rpx;
  padding: 20rpx;
  .info-item {
    @include flex-left();
    padding: 10rpx 0;
    .item-name {
      color: #999;
      font-size: 26rpx;
      width: 260rpx;
    }
    .item-value {
      color: #333;
      font-size: 26rpx;
    }
  }
}

.delivery-info {
  background-color: $custom-bg-color;
  border-radius: 20rpx;
  margin: 20rpx;
  padding: 20rpx;
  .info-item {
    @include flex-space-between();
    padding: 10rpx 0;
    .item-name {
      color: #999;
      font-size: 26rpx;
    }
  }
}

</style>