10.3 黑马Vue电商后台管理系统 进一步完善订单模块--修改发货地址

1. 效果图

因为有时候，客户只是需要我们帮助其修改地址，那么就无需跳转到另一个页面来修改地址，直接点击修改地址按钮，订单列表中的“发货地址”就会随之变化。

另外，在修改订单页面，我也进行了补充：

2. 具体实现

在Order.vue中增加代码：

1。先修改页面布局，并且为按钮绑定事件
以及修改地址的对话框，为“确定”按钮添加事件：

代码如下：

  <el-table-column prop="consignee_addr" label="发货地址">
        </el-table-column>

<el-tooltip effect="dark"
             content="修改地址" placement="top" :enterable="false">
              <el-button size="mini"
             icon="el-icon-edit" circle @click="editAddress(scope.row.order_id)"></el-button>
            </el-tooltip>

2。点击 “修改地址” 这一按钮时，其实是要发送查询请求的，当选择完地址，填写完详细地址，点击“确定”，要做的才是修改地址。

在methods节点下面加入代码如下：

 // 点击修改订单地址按钮触发的事件
    async editAddress (id) {
      this.addressVisible = true
      this.orderId = id
  
      const { data: res1 } = await this.$http.get('orders/' + id)
      this.orderInfo = res1.data
      console.log(this.orderInfo)
    },
    // 修改地址，并刷新页面
    async edit () {
      const { data: res } = await this.$http.put('orders/' + this.orderId, {
        order_price: this.orderInfo.order_price,
        consignee_addr: this.addressForm.address1 + ' ' + this.addressForm.address2
      })
      console.log(res)
      if (res.meta.status !== 201) {
        return this.$message.error('修改订单失败!')
      }
      this.$message.success('修改订单成功!')
      this.getOrderList()
      this.addressVisible = false
    }

关于修改订单 OrderEdit.vue，加入几行代码即可：

 <!-- 表单区域 -->
    <el-form :model="orderForm" label-width="80px"
    ref="orderFormRef">
  <el-form-item label="订单编号">
    <el-input v-model="orderForm.order_number" disabled></el-input>
  </el-form-item>
  <el-form-item label="是否发货">
    <p style="font-size:15px">1表示发货,0表示不发货</p>
    <el-input v-model="orderForm.is_send"></el-input>
  </el-form-item>
  <el-form-item label="支付状态">
    <p style="font-size:15px">0表示 未支付, 1表示支付宝, 2表示微信, 3表示银行卡</p>
    <el-input v-model="orderForm.order_pay"></el-input>
  </el-form-item>
  <el-form-item label="发票抬头">
    <p style="font-size:15px">'个人' 或者 '公司'</p>
    <el-input v-model="orderForm.order_fapiao_title"></el-input>
  </el-form-item>
   <el-form-item label="发票内容">
       <el-input v-model="orderForm.order_fapiao_content"></el-input>
  </el-form-item>
  <el-form-item label="公司名称">
    <el-input v-model="orderForm.order_fapiao_company" ></el-input>
  </el-form-item>
  <el-form-item label="订单价格">
    <el-input v-model="orderForm.order_price"></el-input>
  </el-form-item>
    </el-form>
    <el-button type="primary" @click="edit">修改订单</el-button>

后续，还会继续完善订单模块，比如：在订单详情页面，也就是修改订单页面，加入该订单包含的商品信息等。