zfire-newmall-admin/src/views/secondHandMall/orderManagement/materialFlow.vue

<template>
  <zj-page-container>
    <zj-page-fill>
      <div style="box-sizing: border-box; padding:10px;">
        <div>
          
          <div class="order-main">
            <el-row style="padding: 15px 15px 10px">
              <el-col :span="24">
                <div class="order-main-title">
                  <span>订单编号：{{ orderDetail.esOrderId }}</span>
                  <span>下单时间：{{ orderDetail.createTime }}</span>
                </div>
              </el-col>
            </el-row>
            <div style="width: 100%; padding: 10px 15px 15px 15px">
              <el-row :gutter="10">
                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                  <div class='info'>
                    <div class='info_title'>卖家信息</div>
                    <div class='info_bottom'>
                      <div class='info_bottom_lt'>
                        <el-image style='width: 40px; height: 40px' :src="orderDetail.sellUrl"></el-image>
                      </div>
                      <div class='info_bottom_rt'>
                        <div>昵称：{{orderDetail.sellName}}</div>
                        <div>手机号：{{orderDetail.sellMobile}}</div>
                        <div>发布时间：{{orderDetail.sellTime}}</div>
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                  <div class='info'>
                    <div class='info_title'>买家信息</div>
                    <div class='info_bottom'>
                      <div class='info_bottom_lt'>
                        <el-image style='width: 40px; height: 40px' :src="orderDetail.wechatUserUrl">
                        </el-image>
                      </div>
                      <div class='info_bottom_rt'>
                        <div v-if="orderDetail.wechatUserName">昵称：{{orderDetail.wechatUserName}}</div>
                        <div v-if="orderDetail.wechatUserMobile">手机号：{{orderDetail.wechatUserMobile}}</div>
                        <div>收货人信息：({{orderDetail.userName}}){{orderDetail.userMobile}}</div>
                        <div>收货人地址：{{ orderDetail.province + orderDetail.city + orderDetail.area + orderDetail.street + orderDetail.receAddress }}</div>
                        <div>支付方式：{{({WECHAT:"微信支付", CASH:"到店支付", TRANSFER:"转账支付"})[orderDetail.payType]}}</div>
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                  <div class='info'>
                    <div class='info_title'>物流信息</div>
                    <div class='info_bottom'>
                      <div class='info_bottom_rt'>
                        <div>
                          <el-radio-group disabled v-model="orderDetail.pickType">
                            <el-radio label='YES'>自提</el-radio>
                            <el-radio label='NO'>物流</el-radio>
                          </el-radio-group>
                        </div>
                        <div>快递单号：{{orderDetail.logisticsNo}}</div>
                        <div>快递公司：{{orderDetail.logisticsName}}</div>
                        <el-button v-if="detailsTypeCp==0 && orderDetail.logisticsCode && orderDetail.logisticsNo" type='primary' size='small' @click="lookkuaidi">查看物流
                        </el-button>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>

          <h3>物流信息</h3>
          <div class="order-detail">
            <el-table :data="expressList" style="width: 100%" border>
              <el-table-column prop="comName" label="物流公司" align="center"></el-table-column>
              <el-table-column prop="areaName" label="地区名称" align="center"></el-table-column>
              <el-table-column prop="time" label="物流时间" align="center" min-width="100"></el-table-column>
              <el-table-column prop="state" label="物流状态" align="center">
                <template slot-scope="scope">
                  <div>{{ ({0:'在途',1:'揽收',2:'疑难',3:'签收',4:'退签',5:'派件',6:'退回'})[scope.row.state] }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="context" label="物流详情" align="center"></el-table-column>
            </el-table>
          </div>

        </div>
      </div>
    </zj-page-fill>
  </zj-page-container>
</template>

<script>
import { esOrderDetail, esOrderExpress, esOrderRefund, esOrderPayPrice } from "@/api/orderManagement";
export default {
  props:{
    detailsId: {
      type: [String, Number],
      default: ""
    },
  },
  data() {
    return {
      // 订单详情
      orderDetail: {
      },
      // 物流详情
      expressList: [],
    }
  },
  watch: {
    detailsId: {
      handler(newVal, oldVal) {
        this.getEsOrderDetail()
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    getEsOrderDetail(){
      esOrderDetail({
        esOrderId: this.detailsId
      }).then(res=>{
        this.orderDetail = {
          ...res.data
        }
        if(this.orderDetail.logisticsCode && this.orderDetail.logisticsNo){
          esOrderExpress({
            companyCode:this.orderDetail.logisticsCode,
            logisticsNo:this.orderDetail.logisticsNo
          }).then(res2=>{
            this.expressList = res2.data
          })
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
.info {
  .info_title {
    font-size: 16px;
    font-weight: 700;
  }

  .info_bottom {
    display: flex;
    margin: 10px 0;

    .info_bottom_lt {
      width: 40px;
      height: 40px;
    }

    .info_bottom_rt {
      padding: 0 0 0 10px;
      line-height: 30px;

      .photoPZ {
        display: inline-block;
        vertical-align: text-top;
      }
    }
  }
}

.order-main {
  margin-top: 15px;
  border: 1px solid #e5e5e5;

  .order-main-title {
    font-size: 14px;
  }

  .order-main-title span {
    margin-right: 15px;
  }

  .order-main-status {
    padding: 15px 0;
    font-size: 24px;
    color: #409EFF;
  }

  .order-main-opt-btn {
    padding: 15px 0;
  }
}

.order-receive-info {
  margin: 15px 0 30px;
  padding: 15px;
  background: #f5f7fa;

  :first-child div span {
    padding-right: 15px;
  }
}

.order-detail {
  background: #f5f7fa;

  .order-amount-info {
    padding: 15px 0;
    font-size: 12px;
    font-weight: bold;
  }

  ::v-deep .el-table tr,
  ::v-deep .el-table th {
    background-color: #f5f7fa;
  }
}

.main-detail {
  .title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
  }

  .item {
    display: flex;
    font-size: 14px;
    color: #666;
    padding-bottom: 12px;

    .label {
      white-space: nowrap;
    }
  }
}

.order-evaluate-info {
  margin: 15px 0;
  padding: 30px 15px;
  background: #f5f7fa;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      font-size: 16px;
      font-weight: 700;

      span {
        font-weight: normal;
        margin-left: 20px;
        font-size: 14px;
        color: #666;
      }
    }

    .right {
      display: flex;
      align-items: center;
      font-size: 14px;

      span {
        margin-right: 10px;
      }
    }
  }

  .main {
    margin-top: 20px;
    display: flex;

    .rate-list {
      font-size: 14px;
      flex-shrink: 0;
    }

    .tag-list {
      margin-left: 30px;

      ::v-deep .el-tag {
        margin-right: 10px;
        margin-bottom: 10px;
      }
    }
  }

  .content {
    width: 400px;
    line-height: 20px;
    font-size: 14px;
    color: #333;
    margin-top: 10px;
  }

  .img-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    width: 400px;

    ::v-deep .el-image {
      width: 100px;
      height: 100px;
      margin-right: 10px;
      margin-bottom: 10px;
      border: 1px solid #eaeaea;
    }
  }
}
</style>