caimei-mall-admin-ui/src/views/order/deliver.vue

<template>
  <div class="app-container">
    <el-card class="box-card" style="margin: 0 auto;">
      <div class="refund-item">
        <el-row :gutter="24" class="box-row">
          <el-col :span="4"><b>收货人：</b> {{ orderInfo.receiver }} </el-col>
          <el-col :span="4"><b>手机号：</b> {{ orderInfo.mobile }} </el-col>
          <el-col :span="16"><b>收货地址：</b> {{ orderInfo.address }} </el-col>
        </el-row>
        <el-row :gutter="24" class="box-row">
          <el-col :span="24"><b>买家留言：</b>
            <span v-for="(msg,index) in orderInfo.notes" :key="index">
              【{{ `${index+1}.${msg}` }}】
            </span>
          </el-col>
        </el-row>
      </div>
      <div class="refund-item">
        <el-row :gutter="24" class="box-row">
          <el-table :data="orderInfo.orderProduct" border fit highlight-current-row :header-cell-style="{background:'#eef1f6',color:'#606266'}" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" />
            <el-table-column label="商品名" align="center" prop="name" />
            <el-table-column label="商品图片" align="center" prop="productImage">
              <template slot-scope="{row}">
                <el-popover
                  placement="top-start"
                  title=""
                  width="120"
                  trigger="hover"
                >
                  <img :src="row.productImage" alt="" style="width:100px;height:100px;">
                  <img slot="reference" :src="row.productImage" alt="" style="width:50px;height:50px;">
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="规格" align="center" prop="unit" />
            <el-table-column label="供应商" align="center" prop="shopName" />
            <el-table-column label="购买数量" align="center" prop="num" />
            <el-table-column label="未发数量" align="center" prop="notOutStore" />
            <el-table-column label="发货数量" align="center" prop="deliveryNum">
              <template slot-scope="{row}">
                <el-input v-model="row.deliveryNum" :maxlength="4" size="mini" />
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </div>
    </el-card>
    <div class="filter-container" style="text-align: center;margin-top: 20px;">
      <el-button type="primary" :disabled="disabled" @click="hanldeConfirm">发货</el-button>
    </div>
  </div>
</template>

<script>
import { orderTodeliver } from '@/api/order'
export default {
  name: 'PaymentDetails',
  filters: {

  },
  data() {
    return {
      orderInfo: {},
      productRadio: null
    }
  },
  computed: {
    orderId: function() {
      return this.$route.query.orderId * 1
    },
    disabled() {
      return this.productRadio === null
    }
  },
  created() {
    this.orderTodeliver(this.orderId)
  },
  methods: {
    // 付款单详情
    async orderTodeliver(orderId) {
      try {
        const res = await orderTodeliver(orderId)
        console.log('res', res)
        this.orderInfo = res.data
        this.orderInfo.orderProduct.map((elem) => {
          elem.deliveryNum = elem.num
          return elem
        })
      } catch (error) {
        console.log('error', error)
      }
    },
    // 多选商品
    handleSelectionChange(row) {
      this.productRadio = row
      console.log('productRadio', row)
    },
    hanldeConfirm() {
      // 发货去添加物流
      this.$confirm('确认去发货吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.push({ path: '/order/addLogistics', query: { orderId: this.orderId, products: JSON.stringify(this.productRadio) }})
      })
    },
    backToList() {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$nextTick(() => {
          this.$router.replace({
            path: '/finance/payment-list'
          })
        })
      })
    }
  }
}
</script>

<style scoped>
  .app-title{
    line-height: 36px;
    font-size: 26px;
    font-weight: bold;
    color: #409EFF;
    text-align: center;
    margin: 0;
  }
  .box-card{
    margin-top: 20px;
    font-size: 14px;
  }
  .box-row{
    padding: 10px 0;
  }
  .box-row .dropdown{
    margin-top: -10px;
  }
  .refund-item{
    padding: 10px 0;
  }
  .order-item{
    background:#f7f7f7;
    margin-bottom: 20px;
    padding: 10px 15px;
    border-radius: 5px;
  }
  .product-row{
    padding: 10px 0;
    background: #EBEEF5;
    border-top: 1px dashed #DCDFE6;
  }
  .op-item{
    padding: 5px 0;
  }
  .el-span-warning{
    color: #E6A23C;
  }
  .el-span-success{
    color: #67C23A;
  }
  .el-span-danger{
    color: #F56C6C;
  }
</style>