yoga-manager-ui/src/components/sc/order/orderDetail.vue

<template>
  <div>
    <el-dialog title="订单详情" :visible.sync="open" width="780px" class="compact top0">
      <el-row v-loading="loading" class="cla-detail">
        <div class="title">
          <div class="title-content">订单信息</div>
        </div>
        <div class="cla-base-info">
          <div class="item">
            <div class="item-name">订单编号:</div>
            <div class="item-value">
              <el-tooltip effect="dark" :content="orderInfo.orderId" placement="top">
                <span>{{ orderInfo.orderId }}</span>
              </el-tooltip>
            </div>
          </div>
          <div class="item">
            <div class="item-name">经办校区:</div>
            <div class="item-value">{{ orderInfo.handleDeptName }}</div>
          </div>
          <div class="item">
            <div class="item-name">经办日期:</div>
            <div class="item-value">{{ orderInfo.handleDate }}</div>
          </div>
          <div class="item">
            <div class="item-name">学员:</div>
            <div class="item-value">{{ orderInfo.studentName }}</div>
          </div>
          <div class="item">
            <div class="item-name">学员电话:</div>
            <div class="item-value">{{ orderInfo.phone }}</div>
          </div>
          <div class="item">
            <div class="item-name">订单类型:</div>
            <div v-if="orderInfo.orderType === '1'" class="item-value">新办</div>
            <div v-else class="item-value">{{ orderInfo.orderType }}</div>
          </div>
          <div class="item">
            <div class="item-name">原价:</div>
            <div class="item-value">¥{{ orderInfo.originalTotalFee }}</div>
          </div>
          <div class="item">
            <div class="item-name">实收:</div>
            <div class="item-value">¥{{ orderInfo.receiptFee }}</div>
          </div>
          <div class="item">
            <div class="item-name">订单标签:</div>
            <div class="item-value">{{ orderInfo.orderTag }}</div>
          </div>
          <div class="item">
            <div class="item-name">销售员工:</div>
            <div class="item-value">{{ orderInfo.saleStaffName }}</div>
          </div>
          <div class="item">
            <div class="item-name">订单状态:</div>
            <div class="item-value">
              <el-tag v-if="orderInfo.orderStatus === '1'" size="medium" type="info">未支付</el-tag>
              <el-tag v-if="orderInfo.orderStatus === '2'" size="medium">已支付</el-tag>
              <el-tag v-if="orderInfo.orderStatus === '3'" size="medium" type="danger">已作废</el-tag>
            </div>
          </div>
          <div class="item">
            <div class="item-name">备注:</div>
            <div class="item-value">{{ orderInfo.memo }}</div>
          </div>
        </div>
        <div class="title">
          <div class="title-content">收款账户</div>
        </div>
        <div class="item">
          <div class="item-name">收款账户:</div>
          <div class="item-value">{{ orderAccount.accountName }}</div>
        </div>

        <div  class="top-border">
          <div class="title">
            <div class="title-content">报读卡类({{ orderDetail.cardTypeName }})</div>
          </div>
          <div class="cla-base-info">
            <div class="item">
              <div class="item-name">扣费方式:</div>
              <div class="item-value">
                {{ orderDetail.chargeType=='count'?'按次数':orderDetail.chargeType=='total_fee'?'按储值':'按周期'  }}
              </div>
            </div>
            <div class="item">
              <div class="item-name">卡号: </div>
              <div class="item-value">
                {{ orderDetail.cardNo }}
              </div>
            </div>
            <div v-if="orderDetail.chargeType=='count'" class="item">
              <div class="item-name">总次数: </div>
              <div class="item-value">
                {{ orderDetail.totalCount }} 次
              </div>
            </div>
            <div v-if="orderDetail.chargeType=='days'" class="item">
              <div class="item-name">总天数: </div>
              <div class="item-value">
                {{ orderDetail.totalDays }} 天
              </div>
            </div>
            <div v-if="orderDetail.chargeType=='total_fee'" class="item">
              <div class="item-name">储值金额: </div>
              <div class="item-value">
                {{ orderDetail.totalFee }} 元
              </div>
            </div>

            <div class="item">
              <div class="item-name">卡片状态:</div>
              <div class="item-value">{{ orderDetail.statusDesc }}</div>
            </div>
            <div class="item">
              <div class="item-name">备注:</div>
              <div class="item-value">{{ orderDetail.notes }}</div>
            </div>
          </div>
        </div>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getOrder } from '@/api/school/sc/order'
export default {
  data() {
    return {
      open: false,
      loading: false,
      orderInfo: {},
      orderDetail: [],
      orderAccount: []
    }
  },
  methods: {
    loadOrderDetail(orderId) {
      this.open = true
      this.loading = true
      getOrder(orderId).then(response => {
        this.loading = false
        this.orderInfo = response.data.orderInfo
        this.orderDetail = response.data.orderDetail
        this.orderAccount = response.data.orderAccount
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped src="@/styles/sc/cla/cla-detail.scss"></style>
<style rel="stylesheet/scss" lang="scss" scoped>
  .cla-detail .cla-base-info{
    border-bottom: none;
  }
  .top-border {
    border-top: 2px solid #f5f7f9;
  }
  .title {
    padding: 15px 0px;
    color: rgba(0,0,0,.85);
    font-weight: 500;
    font-size: 16px;
    &.top {
      padding-top: 0px;
    }
    .title-content{
      border-left: 3px solid #409EFF;
      padding-left: 10px;
    }
  }
</style>