tf-business/order_module/orderDetail/index.vue

<template>
  <view class="order-detail">
    <view class="detail-state">
      <template
        v-if="
          orderInfo.state == 8 ||
            orderInfo.state == 9 ||
            orderInfo.state == 2 ||
            orderInfo.state == 3
        "
      >
        <view class="state-error">
          <image class="" src="@/static/image/order/error_icon.png" />
          <text v-if="orderInfo.state == 8">当前订单待核销（未付款）</text>
          <text v-if="orderInfo.state == 9">当前订单待核销（已付款）</text>
          <text v-if="orderInfo.state == 2">待发货</text>
          <text v-if="orderInfo.state == 3">待收货</text>
        </view></template
      >

      <template v-else-if="orderInfo.state == 10 || orderInfo.state == 4">
        <view class="state-success">
          <image class="" src="@/static/image/order/success_icon.png" />
          <text v-if="orderInfo.state == 10">当前订单已核销</text>
          <text v-if="orderInfo.state == 4">当前订单已完成</text>
        </view>
      </template>
      <template v-else-if="orderInfo.state == 5">
        <view class="state-complete">
          <image class="" src="@/static/image/order/complete_icon.png" />
          <text>当前订单交易关闭（已取消）</text>
        </view>
      </template>
    </view>

    <view class="product-detail">
      <view class="product-list">
        <view
          class="product-item"
          v-for="item in renderData"
          :key="item.productId"
        >
          <view class="item-left">
            <image class="" :src="item.image" />
          </view>
          <view class="item-right">
            <view class="right-title">{{ item.productName }}</view>
            <view class="right-bottom">
              <view class="number">数量&nbsp;&nbsp;*{{ item.number }}</view>
              <view class="onePrice">￥{{ item.productPrice }}/1个</view>
            </view>
          </view>
        </view>
      </view>
      <view class="load-more" v-if="productData.length > 2">
        <template v-if="!isShow">
          <view @click="expand">
            <tui-icon name="down" :size="16" color="#EF530E"></tui-icon>
            <text
              >展开剩余&nbsp;{{
                productData.length - renderData.length
              }}&nbsp;件商品</text
            >
          </view>
        </template>
        <template v-else>
          <view @click="expand">
            <tui-icon name="up" :size="16" color="#EF530E"></tui-icon>
            <text>收起</text>
          </view>
        </template>
      </view>
    </view>
    <view class="order-info">
      <view class="info-title">订单信息</view>
      <view class="info-detail">
        <view class="info-box">
          <text>订单编号</text>
          <text>{{ orderInfo.orderFormid }}</text>
        </view>
        <view class="info-box">
          <text>创建时间</text>
          <text>{{ orderInfo.createTime }}</text>
        </view>
        <view class="info-box">
          <text>订单类型</text>
          <text v-if="orderInfo.scanType == 1">常规订单</text>
          <text v-if="orderInfo.scanType == 2">收款码订单</text>
        </view>
        <view class="info-box">
          <text>下单账户</text>
          <text>{{ orderInfo.customerName }}</text>
        </view>
        <view class="info-box">
          <text>下单号码</text>
          <text>{{ orderInfo.buyerPhone }}</text>
        </view>
      </view>
    </view>
    <view class="pay-info">
      <view class="info-title">支付信息</view>
      <view class="info-detail">
        <view class="info-box">
          <text>支付方式</text>
          <text v-if="orderInfo.paymentMode == 1">微信</text>
          <text v-else-if="orderInfo.paymentMode == 2">支付宝</text>
          <text v-else-if="orderInfo.paymentMode == 3">花呗分期</text>
          <text v-else-if="orderInfo.paymentMode == 4">通联支付</text>
          <text v-else-if="orderInfo.paymentMode == 5">平台余额支付</text>
          <text v-else-if="orderInfo.paymentMode == 6">商家余额支付</text>
          <text v-else-if="orderInfo.paymentMode == 7">佣金支付</text>
          <text v-else-if="orderInfo.paymentMode == 8">消费金支付</text>
          <text v-else-if="orderInfo.paymentMode == 9">惠市宝支付</text>
          <text v-else>--</text>
        </view>
        <view class="info-box">
          <text>支付时间</text>
          <text>{{ orderInfo.paymentTime || "--" }}</text>
        </view>
        <view class="info-box price">
          <text>支付金额</text>
          <text>{{ orderInfo.price }}元</text>
        </view>
        <view class="info-box price">
          <text>赠送代金券</text>
          <text>{{ orderInfo.presenterVoucher }}</text>
        </view>
      </view>
    </view>
    <view class="write-off" v-if="orderInfo.state == 8 || orderInfo.state == 9">
      <view class="off-btn" @click="navigateTo('/pages_module/scanCode/index')"
        >去核销</view
      >
      <view class="seat"></view>
    </view>
  </view>
</template>

<script>
import { orderGetById } from "@/config/index.js";
export default {
  onLoad(option) {
    this.orderId = option.orderId;
    console.log(this.orderId, option);
    this.orderGetDetail();
  },
  data() {
    return {
      orderId: "",
      orderInfo: {},
      //  实际渲染的数据
      renderData: [],
      //  总商品数据
      productData: [],
      //  控制收起以及展开
      isShow: false,
    };
  },
  methods: {
    //  请求订单详情
    async orderGetDetail() {
      try {
        let res = await orderGetById({ orderId: this.orderId });
        this.orderInfo = res.data;
        this.productData = res.data.products;
        //  判断上坡是否超过两行
        if (res.data.products.length > 2) {
          this.renderData = res.data.products.slice(0, 2);
        } else {
          this.renderData = res.data.products;
        }
      } catch (error) {
        console.log(error);
      }
    },
    //  展开商品 expand
    expand() {
      this.isShow = !this.isShow;
      if (this.isShow) {
        this.renderData = this.productData;
      } else {
        this.renderData = this.productData.slice(0, 2);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>