carbon-web/src/views/order/inlineOrder/orderDetail.vue

<template>
  <div class="orderDetail" v-loading="loading">
    <div class="orderDetail-box">
       <div class="orderDetail-box-header">
          订单信息
       </div>
       <div class="orderDetail-box-content">
          <el-row :gutter="20">
            <el-col :span="8"><span class="label">订单编号:</span><span class="txt">{{datas.orderNo}}</span></el-col>
            <el-col :span="8"><span class="label">订单状态:</span><span class="txt">{{datas.orderStatus || '-'}}</span></el-col>
            <el-col :span="8"><span class="label">下单时间:</span><span class="txt">{{datas.createTime || '-'}}</span></el-col>
          </el-row>
       </div>
    </div>
    <div class="orderDetail-box">
       <div class="orderDetail-box-header">
          客户信息
       </div>
       <div class="orderDetail-box-content">
          <el-row :gutter="20">
            <el-col :span="8"><span class="label">客户账号:</span><span class="txt">{{datas.account || '-'}}</span></el-col>
            <el-col :span="8"><span class="label">联系电话:</span><span class="txt">{{datas.phone || '-'}}</span></el-col>
            <el-col :span="8"><span class="label">客户名称:</span><span class="txt">{{datas.customerName || '-'}}</span></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8"><span class="label">客户类型:</span><span class="txt">{{datas.customerTypeName || '-'}}</span></el-col>
            <el-col :span="8"></el-col>
            <el-col :span="8"></el-col>
          </el-row>
       </div>
    </div>
    <div class="orderDetail-box">
       <div class="orderDetail-box-header">
          订单商品
       </div>
       <div class="orderDetail-box-content">
          <el-table :data="datas.items" border>
            <el-table-column label="序号" type="index" width="50" align="center" />
            <el-table-column label="商品编号" align="center" prop="goodsCode" />
            <el-table-column label="商品名称" align="center" prop="goodsName"/>
            <el-table-column label="商品类型" align="center" prop="goodsType"/>
            <el-table-column label="认购期" align="center" prop="subscriptionDate"/>
            <el-table-column label="单价" align="center" prop="goodsPrice"/>
            <el-table-column label="碳汇量（kg）" align="center" prop="saleNum"/>
            <el-table-column label="金额" align="center" prop="amount"></el-table-column>
          </el-table>
          <div class="tableTotal">
              总计 <span class="num">{{saleNumTotal}}</span> <span class="price">{{priceTotal}}</span>
          </div>
       </div>
    </div>
    <div class="orderDetail-footer">
       <el-button type="info" @click="goPage">返回</el-button>
    </div>
  </div>
</template>

<script>
  import { orderDetail } from "@/api/order/subscription";
  export default{
    name:"orderDetail",
    created() {
      console.log(this.$route.query)
      this.getDetail();
    },
    data(){
      return{
        datas:{
          orderNo:'',
          items:[],
        },
        loading:false,
        list:[]
      }
    },
    methods:{
      getDetail(){
        this.loading = true
        let params = {
          guid:this.$route.query.id
        }
        orderDetail(params).then(res => {
            if (res.retHead.errCode === 0) {
              this.datas = res.retBody
              this.loading = false
            }
        });
      },
      goPage(){
        this.$router.go(-1)
      }
    },
    computed:{
      //碳汇量计算
      saleNumTotal(){
        let totalSumAll = 0;
        this.datas.items.map((item) => {
          if(!isNaN(item.saleNum)) totalSumAll += item.saleNum
        })
        if(isNaN(totalSumAll)){
          return 0
        }
        return totalSumAll
      },
      //总价计算
      priceTotal(){
        let totalPrice = 0;
        this.datas.items.map((item) => {
          if(!isNaN(item.goodsPrice)) totalPrice += item.goodsPrice
        })
        if(isNaN(totalPrice)){
          return 0
        }
        return totalPrice
      }
    }
  }
</script>

<style lang="scss" scoped>
  .orderDetail{
    margin:30px 40px;
    &-box{
      border-bottom:1px solid #EBEBEB;
      &-header{
        margin-top:10px;
        height:50px;
        line-height:50px;
        font-size:16px;
        font-weight:bold;
      }
      &-content{
        padding-bottom:10px;
        .el-col{
          height:35px;
          line-height:35px;
          font-size:14px;
          .label{
            color:#272727;
            font-weight:bold;
            margin-right:10px;
          }
          .txt{
            color:#5A5A5A;
          }
        }
        .tableTotal{
          position:relative;
          height:40px;
          line-height:50px;
          .num,
          .price{
            position:absolute;
            top:0;
          }
          .num{
            right:320px;
          }
          .price{
            right:90px;
          }
        }
      }
    }
    &-footer{
      text-align:center;
      padding:15px 0;
    }
  }
</style>