zfire-newmall-admin/src/views/mallManagement/order/order_detail/index.vue

<template>
  <div class="app-container">
    <el-page-header @back="goBack" content="订单详情"></el-page-header>
    <div class="order-main">
      <el-row style="padding: 15px 15px 10px">
        <el-col :span="24">
          <div class="order-main-title">
            <span>订单编号：{{ orderDetail.orderId }}</span>
            <span>下单时间：{{ orderDetail.createTime }}</span>
            <span>商户：{{ orderDetail.companyWechatName || '无' }}</span>
            <span>网点：{{ orderDetail.websitName || '无' }}</span>
            <div class="fr">
              <el-link type="primary" :underline="false" @click="showDialog('remark')">订单备注</el-link>
            </div>
          </div>
        </el-col>
      </el-row>
      <div style="width: 100%; padding: 10px 15px 15px 15px">
        <el-row>
          <el-col :span="8" style="border-right: 1px solid #e8e8e8;">
            <div class="order-main-status">
              <span>{{ orderDetail.orderStatus | ORDER_CURRENT_STATUS_FILTER }}</span>
            </div>
            <div class="order-main-opt-btn">
              <template v-if="orderDetail.orderStatus === 'NOPAY'">
                <el-popconfirm title="确定收款吗？" @confirm="confirmOrder">
                  <el-button slot="reference" size="small">确认收款</el-button>
                </el-popconfirm>
                <el-button size="small" @click="showDialog('price')" style="margin-left: 10px;">修改价格</el-button>
                <el-popconfirm title="确定取消订单吗？" @confirm="cancelOrder" style="margin-left: 10px;">
                  <el-button slot="reference" size="small" type="danger">取消订单</el-button>
                </el-popconfirm>
              </template>
              <template v-if="orderDetail.orderStatus === 'DFH'">
                <el-button size="small" type="primary" @click="showDialog('send')">发货</el-button>
                <el-popconfirm title="确定取消订单吗？" @confirm="cancelOrder" style="margin-left: 10px;">
                  <el-button slot="reference" size="small" type="danger">取消订单</el-button>
                </el-popconfirm>
              </template>
              <template v-if="orderDetail.orderStatus === 'YFH' || orderDetail.orderStatus === 'OVER'">
                <el-button size="small" @click="showDialog('query')">查看物流</el-button>
              </template>
            </div>
          </el-col>
          <el-col :span="16" style="padding-top: 10px;">
            <el-steps :active="orderDetail.orderStatus != 'CLOSE' ? curOrderStatus : -1" align-center>
              <el-step title="买家下单" :description="orderDetail.createTime"></el-step>
              <el-step title="买家付款" :description="orderDetail.payTime ? orderDetail.payTime : ''"></el-step>
              <el-step title="商家发货" :description="orderDetail.deliverTime ? orderDetail.deliverTime : ''"></el-step>
              <el-step title="交易成功" :description="orderDetail.overTime ? orderDetail.overTime : ''"></el-step>
            </el-steps>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="order-receive-info" style="padding-bottom: 15px;">
      <el-row :gutter="30">
        <el-col :xs="24" :sm="12" :lg="12">
          <div class="main-detail">
            <div class="title">订单信息</div>
            <div class="item">
              <div class="label">收货人信息：</div>
              <div class="value">{{ orderDetail.receUserName }} ({{ orderDetail.recePhone }})</div>
            </div>
            <div class="item">
              <div class="label">收货人地址：</div>
              <div class="value">{{ orderDetail.province + orderDetail.city + orderDetail.area + orderDetail.street +
                orderDetail.receAddress + orderDetail.houseNo }}</div>
            </div>
            <div class="item">
              <div class="label">销售员信息：</div>
              <div class="value">{{ orderDetail.workerName }} ({{ orderDetail.workerPhone }})</div>
            </div>
            <div class="item">
              <div class="label">团长信息：</div>
              <div class="value">{{ orderDetail.promotionGroupUserName }} ({{ orderDetail.promotionGroupMobile }})</div>
            </div>
            <div class="item">
              <div class="label">下单渠道：</div>
              <div class="value">{{ orderDetail.source }}</div>
            </div>
            <div class="item">
              <div class="label">支付方式：</div>
              <div class="value">{{ orderDetail.payType }}</div>
            </div>
            <div class="item">
              <div class="label">是否开票：</div>
              <div class="value">{{ orderDetail.tax ? '是' : '否' }}</div>
            </div>
            <div class="item" v-if="orderDetail.dispatchType">
              <div class="label">工单派单方式：</div>
              <div class="value">{{ orderDetail.dispatchType }}</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12" v-if="orderDetail.orderStatus === 'YFH' || orderDetail.orderStatus === 'OVER'">
          <div class="main-detail">
            <div class="title">物流信息</div>
            <div class="item">
              <div class="label">快递单号：</div>
              <div class="value">{{ orderDetail.logisticsNo }}</div>
            </div>
            <div class="item">
              <div class="label">快递公司：</div>
              <div class="value">{{ orderDetail.companyName }}</div>
            </div>
            <div class="item">
              <div class="label">货件仓储：</div>
              <div class="value">{{ orderDetail.storageName }}</div>
            </div>
          </div>
        </el-col>
      </el-row>


    </div>

    <div class="order-detail" v-if="compensateList.length > 0" style="margin-bottom: 20px;">
      <!-- 理赔表格 -->
      <el-table :data="compensateList" style="width: 100%;" size="small" border>
        <el-table-column prop="goodsName" label="理赔商品" align="center"></el-table-column>
        <el-table-column prop="num" label="理赔数量" align="center"></el-table-column>
        <el-table-column prop="createTime" label="理赔时间" align="center"></el-table-column>
        <el-table-column prop="refundAmount" label="理赔金额" align="center"></el-table-column>
        <el-table-column prop="operatorUser" label="操作人" align="center"></el-table-column>
        <el-table-column prop="remark" label="备注" align="center"></el-table-column>
      </el-table>
    </div>

    <div class="order-detail">

      <!-- 订单表格 -->
      <el-table :data="orderDetail.orderDetails" style="width: 100%" border>
        <el-table-column label="商品信息" min-width="200">
          <template slot-scope="scope">
            <el-row>
              <el-col :span="6">
                <el-image style="width: 40px; height: 40px" :src="scope.row.imgUrl">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </el-col>
              <el-col :span="18">
                <div>{{ scope.row.goodsName }}</div>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column prop="goodsSpecName" label="规格" align="center"></el-table-column>
        <el-table-column prop="price" label="单价" align="center"></el-table-column>
        <el-table-column prop="num" label="数量" align="center"></el-table-column>
        <el-table-column prop="shareAmount" label="分销金额" align="center">
          <template slot-scope="scope">
            {{ orderDetail.workerId || orderDetail.promotionGroupUserId ? scope.row.shareAmount : '0' }}
          </template>
        </el-table-column>
        <el-table-column prop="discountAmount" label="优惠金额" align="center"></el-table-column>
        <!-- <el-table-column prop="zkAmount" label="折扣优惠" align="center"></el-table-column> -->
        <el-table-column prop="applyAmount" label="优惠价格申请" align="center" min-width="110"></el-table-column>
        <el-table-column prop="profitAmount" label="预计盈利" align="center">
          <template slot-scope="scope">
            {{ orderDetail.workerId || orderDetail.promotionGroupUserId ? scope.row.profitAmount : scope.row.payAmount }}
          </template>
        </el-table-column>
        <el-table-column prop="payAmount" label="商品总金额" align="center" min-width="100"></el-table-column>
        <el-table-column prop="freight" label="运费" align="center"></el-table-column>
        <el-table-column prop="refundNum" label="退款数量" align="center"></el-table-column>
        <el-table-column prop="refundAmount" label="退款金额" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="160" v-if="orderDetail.orderStatus != 'CLOSE'">
          <template slot-scope="scope">
            <el-button v-if="!~['TIMEOUT', 'CLOSE'].indexOf(orderDetail.orderStatus)" size="mini" type="primary"
              @click="handleRefund(scope.row)"
              :disabled="!orderDetail.refundAble || scope.row.refundNum >= scope.row.num">退款</el-button>
            <el-button v-if="!~['TIMEOUT'].indexOf(orderDetail.orderStatus)" size="mini"
              @click="handleCompensate(scope.row)">理赔</el-button>
          </template>
        </el-table-column>
      </el-table>


      <div class="order-amount-info">
        <el-row>
          <el-col :span="19">
            <div style="width: 1px;height: 1px;"></div>
          </el-col>
          <el-col :span="5">
            <div style="padding-bottom: 10px;">商品总价：¥ {{ orderDetail.totalAmount }}</div>
            <div style="padding-bottom: 10px;">运费：¥ {{ orderDetail.freight }}</div>
            <div style="padding-bottom: 10px;" v-if="orderDetail.discountAmount">
              优惠：¥ {{ orderDetail.discountAmount }}
              <span v-if="orderDetail.exchangeCode">（优惠码：{{ orderDetail.exchangeCode }}）</span>
              <span v-if="orderDetail.promotionDiscountRate">（{{ orderDetail.promotionDiscountRate * 10 }}折）</span>
            </div>
            <div style="font-size: 14px;">
              <span style="padding-right: 15px;">实际收款</span><span style="color: red;font-size: 18px;">¥ {{
                orderDetail.payAmount }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="order-evaluate-info" v-if="evaluateDetail">
      <div class="title">
        <div class="left">评价信息<span>{{ evaluateDetail.createTime }}</span></div>
        <div class="right">
          <span>是否客户端展示</span>
          <el-switch v-model="evaluateDetail.isShow" @change="changeShow"></el-switch>
        </div>
      </div>
      <div class="main">
        <div class="rate-list">
          <div style="display: flex; align-items: center; margin-bottom: 5px;">商品质量：<el-rate
              :value="evaluateDetail.commentGoods" disabled disabled-void-color="#DDDDDD"></el-rate></div>
          <div style="display: flex; align-items: center; margin-bottom: 5px;">服务质量：<el-rate
              :value="evaluateDetail.commentService" disabled disabled-void-color="#DDDDDD"></el-rate></div>
          <div style="display: flex; align-items: center;">配送质量：<el-rate :value="evaluateDetail.commentExpress" disabled
              disabled-void-color="#DDDDDD"></el-rate></div>
        </div>
        <div class="tag-list" v-if="orderDetail.orderCommentTags && orderDetail.orderCommentTags.length > 0">
          <el-tag v-for="(item, index) in orderDetail.orderCommentTags" :key="index">{{ item }}</el-tag>
        </div>
      </div>
      <div class="content">{{ evaluateDetail.content }}</div>
      <div class="img-list" v-if="orderDetail.orderCommentImgs && orderDetail.orderCommentImgs.length > 0">
        <el-image v-for="(item, index) in orderDetail.orderCommentImgs" :key="index" :src="item"
          :preview-src-list="orderDetail.orderCommentImgs" fit="cover"></el-image>
      </div>
    </div>

    <el-dialog :title="dialogTitle" :visible.sync="remarkVisible" :show-close="false" :width="dialogWidth"
      :close-on-click-modal="false">
      <el-form :model="orderForm" :rules="orderFormRules" ref="orderForm" v-if="curOpenDialogType !== 'query'"
        label-width="90px" label-position="left">
        <el-form-item prop="remark" v-if="curOpenDialogType === 'remark'">
          <el-input type="textarea" :autosize="{ minRows: 8, maxRows: 16 }" placeholder="请输入备注内容" v-model="remark"
            maxlength="100" show-word-limit>
          </el-input>
        </el-form-item>
        <el-form-item prop="payAmount" v-if="curOpenDialogType === 'price'">
          <el-input v-model="orderForm.payAmount" autocomplete="off" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="收货人" prop="receUserName" v-if="curOpenDialogType === 'info'">
          <el-input v-model="orderForm.receUserName" autocomplete="off" placeholder="请输入收货人"></el-input>
        </el-form-item>
        <el-form-item label="收货电话" prop="recePhone" v-if="curOpenDialogType === 'info'">
          <el-input v-model="orderForm.recePhone" autocomplete="off" placeholder="请输入收货电话"></el-input>
        </el-form-item>
        <el-form-item label="收货地址" prop="receAddress" v-if="curOpenDialogType === 'info'">
          <el-input v-model="orderForm.receAddress" autocomplete="off" placeholder="请输入收货地址"></el-input>
        </el-form-item>
        <el-form-item label="快递单号" prop="logisticsNo" v-if="curOpenDialogType === 'send'">
          <el-input v-model="orderForm.logisticsNo" autocomplete="off" placeholder="请输入快递单号"></el-input>
        </el-form-item>
        <el-form-item label="物流公司" prop="companyCode" v-if="curOpenDialogType === 'send'">
          <el-select v-model="orderForm.companyCode" placeholder="请选择物流公司" style="width: 100%;">
            <el-option :label="item.name" :value="item.code" v-for="(item, index) in companyList"
              :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="仓储" prop="storageId" v-if="curOpenDialogType === 'send'">
          <el-select v-model="orderForm.storageId" placeholder="请选择仓储" style="width: 100%;">
            <el-option :label="item.storageName" :value="item.storageId" v-for="(item, index) in storageList"
              :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否派单" prop="workOrder" v-if="curOpenDialogType === 'send'">
          <el-radio-group v-model="orderForm.workOrder">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-table v-loading="logisticsLoading" :data="logistics" style="width: 100%" size="mini"
        v-if="curOpenDialogType === 'query'">
        <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"></el-table-column>
        <el-table-column prop="state" label="物流状态" align="center">
          <template slot-scope="scope">
            {{ scope.row.state | EXPRESS_CURRENT_STATE_FILTER }}
          </template>
        </el-table-column>
        <el-table-column prop="context" label="物流详情" align="center"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveForm" v-if="curOpenDialogType !== 'query'">保 存</el-button>
        <el-button @click="cancelForm">{{ curOpenDialogType === 'query' ? '关 闭' : '取 消' }}</el-button>
      </div>
    </el-dialog>

    <el-dialog title="理赔" :visible.sync="compensateFormVisible" width="30%" :close-on-click-modal="false">
      <el-form ref="compensateForm" :model="compensateForm" :rules="compensateFormRules" label-position="left">
        <el-form-item label="理赔数量" prop="num">
          <el-input v-model="compensateForm.num" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="理赔金额" prop="amount">
          <el-input v-model="compensateForm.amount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="compensateForm.remark" autocomplete="off" type="textarea" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelCompensateForm">取 消</el-button>
        <el-button type="primary" @click="submitCompensateForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  cancelOrder,
  changePrice,
  changeReceiveInfo,
  confirmOrder,
  getOrderDetail, goodsDeliver,
  saveRemark, orderRefund, orderCompensate, getCompensateList,
  changeShow
} from "@/api/order";
import { getExpress, getCompanyList } from "@/api/common";
import * as Storage from "@/api/storage";
import { mapGetters } from 'vuex'

export default {
  name: "detail",
  data() {
    return {
      orderId: '',
      orderDetail: {},
      evaluateDetail: null,
      dialogTitle: '',
      remarkVisible: false,
      remark: '',
      price: 0,
      orderForm: {
        orderId: '',
        payAmount: '',
        receAddress: '',
        receUserName: '',
        recePhone: '',
        logisticsNo: '',
        companyCode: '',
        workOrder: true,
      },
      orderFormRules: {
        payAmount: [
          {
            validator: (rule, value, callback) => {
              if (this.curOpenDialogType !== 'price') {
                callback()
              } else {
                if (!value) {
                  callback(new Error('请输入价格'))
                } else {
                  if (!this.isNumber(value)) {
                    callback(new Error('请输入数字值'))
                  } else {
                    callback()
                  }
                }
              }
            }, trigger: 'blur'
          }
        ],
        receUserName: [
          { require: true, message: '请输入收货人', trigger: 'blur' }
        ],
        recePhone: [
          { require: true, message: '请输入收货电话', trigger: 'blur' }
        ],
        receAddress: [
          { require: true, message: '请输入收货地址', trigger: 'blur' }
        ],
        logisticsNo: [
          {
            validator: (rule, value, callback) => {
              if (this.curOpenDialogType !== 'send') {
                callback()
              } else {
                if (!value) {
                  callback(new Error('请输入快递单号'))
                } else {
                  callback()
                }
              }
            }, trigger: 'blur'
          }
        ],
        storageId: [
          {
            validator: (rule, value, callback) => {
              if (this.curOpenDialogType !== 'send') {
                callback()
              } else {
                if (!value) {
                  callback(new Error('请选择仓储'))
                } else {
                  callback()
                }
              }
            }, trigger: 'change'
          }
        ],
        companyCode: [
          {
            validator: (rule, value, callback) => {
              if (this.curOpenDialogType !== 'send') {
                callback()
              } else {
                if (!value) {
                  callback(new Error('请选择快递公司'))
                } else {
                  callback()
                }
              }
            }, trigger: 'change'
          }
        ]
      },
      curOpenDialogType: 'order',
      logistics: [],
      storageList: [],
      dialogWidth: '50%',
      logisticsLoading: false,
      companyList: [],

      compensateFormVisible: false,
      compensateForm: {
        id: null,
        num: '',
        amount: '',
        remark: '',
      },
      compensateFormRules: {
        num: [
          { required: true, message: '请输入理赔数量', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value > (this.compensateItem.num - this.compensateItem.refundNum)) {
                callback(new Error('最多还可以理赔' + (this.compensateItem.num - this.compensateItem.refundNum) + '件商品'));
              } else {
                callback();
              }
            }, trigger: 'blur'
          }
        ],
        amount: [
          { required: true, message: '请输入理赔金额', trigger: 'blur' },
        ]
      },
      compensateItem: {
        num: '',
        refundNum: '',
      },
      compensateList: [],
    }
  },
  created() {
    this.orderId = this.$route.query.orderId
    this.getDetail();
    this.getStorageList();
    this.getCompanyList();
    this.getCompensateList();
  },
  methods: {
    getDetail() {
      getOrderDetail({ orderId: this.orderId }).then((res) => {
        this.orderDetail = res.data
        this.orderDetail.workerName = this.orderDetail.workerName ? this.orderDetail.workerName : '暂无'
        this.orderDetail.workerPhone = this.orderDetail.workerPhone ? this.orderDetail.workerPhone : ''
        this.evaluateDetail = res.data.orderComment;
      })
    },
    showDialog(type) {
      this.dialogWidth = type === 'query' ? '80%' : '50%'
      this.remarkVisible = true
      this.curOpenDialogType = type
      if (type === 'remark') {
        this.dialogTitle = '订单备注'
        this.remark = this.orderDetail.remark
      } else if (type === 'price') {
        this.dialogTitle = '修改价格'
        this.orderForm.payAmount = this.orderDetail.payAmount
      } else if (type === 'info') {
        this.dialogTitle = '收货人信息'
        this.orderForm.receUserName = this.orderDetail.receUserName
        this.orderForm.recePhone = this.orderDetail.recePhone
        this.orderForm.receAddress = this.orderDetail.receAddress
      } else if (type === 'send') {
        this.dialogTitle = '发货信息'
      } else if (type === 'query') {
        this.logisticsLoading = true
        this.dialogTitle = '物流信息'
        getExpress({
          logisticsNo: this.orderDetail.logisticsNo,
          companyCode: this.orderDetail.companyCode
        }).then(res => {
          this.logistics = res.data
          this.logisticsLoading = false
        })
      }
    },
    cancelForm() {
      this.remarkVisible = false
      if (this.curOpenDialogType === 'query') {
        return
      }
      this.$refs.orderForm.resetFields()
      if (this.curOpenDialogType === 'remark') {
        this.remark = ''
      } else if (this.curOpenDialogType === 'price') {
        this.price = ''
      }
    },
    saveForm() {
      const params = {
        orderId: this.orderId
      }
      if (this.curOpenDialogType === 'remark') {
        params.remark = this.remark
        saveRemark(params).then(() => {
          this.cancelForm();
          this.getDetail();
          this.$successMsg('保存成功');
        })
      } else if (this.curOpenDialogType === 'price') {
        params.price = this.orderForm.payAmount
        this.$refs.orderForm.validate((valid) => {
          if (valid) {
            changePrice(params).then(() => {
              this.cancelForm();
              this.getDetail();
              this.$successMsg('保存成功');
            })
          }
        })
      } else if (this.curOpenDialogType === 'info') {
        params.receUserName = this.orderForm.receUserName
        params.recePhone = this.orderForm.recePhone
        params.receAddress = this.orderForm.receAddress
        params.orderStatus = this.orderDetail.orderStatus
        this.$refs.orderForm.validate((valid) => {
          if (valid) {
            changeReceiveInfo(params).then(() => {
              this.cancelForm();
              this.getDetail();
              this.$successMsg('保存成功');
            })
          }
        })
      } else if (this.curOpenDialogType === 'send') {
        params.logisticsNo = this.orderForm.logisticsNo
        params.storageId = this.orderForm.storageId
        params.companyCode = this.orderForm.companyCode
        params.workOrder = this.orderForm.workOrder
        this.$refs.orderForm.validate((valid) => {
          if (valid) {
            goodsDeliver(params).then(() => {
              this.cancelForm();
              this.getDetail();
              this.$successMsg('保存成功');
            })
          }
        })
      }
    },
    cancelOrder() {
      cancelOrder({ orderId: this.orderId }).then(() => {
        this.getDetail();
        this.$successMsg('取消成功');
      })
    },
    confirmOrder() {
      confirmOrder({ orderId: this.orderId }).then(() => {
        this.getDetail();
        this.$successMsg('确认收款成功');
      })
    },
    goBack() {
      // this.$router.go(-1);
		this.$router.push({
			name:"order_list"
		})
    },
    isNumber(val) {
      const regPos = /^\d+(\.\d+)?$/
      const regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/
      if (regPos.test(val) || regNeg.test(val)) {
        return true
      } else {
        return false
      }
    },

    getStorageList() {
      Storage.getList({ pageNum: 1, pageSize: 100 }).then(res => {
        this.storageList = res.data.records
      })
    },

    // 获取物流公司列表
    getCompanyList() {
      getCompanyList().then(res => {
        this.companyList = res.data;
      })
    },

    // 退款
    handleRefund(row) {
      console.log(row);
      if (row.num == 1) {
        this.$confirm('此操作将退款此商品, 是否继续?', '退款', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.orderRefund(1, row.orderDetailId);
        }).catch(() => { });
      }
      else {
        this.$prompt('请输入退款数量', '退款', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValidator: function (value) {
            if (!value) return '请输入退款数量';
            if (value == 0) return '退款数量不能小于1';
            if (value > (row.num - row.refundNum)) {
              return '最多还可以退款' + (row.num - row.refundNum) + '件商品'
            }
          },
        }).then(({ value }) => {
          this.orderRefund(value, row.orderDetailId);
        }).catch(() => { });
      }
    },

    // 退款
    orderRefund(num, id) {
      orderRefund({
        num: num,
        orderDetailId: id,
      }).then(res => {
        this.getDetail();
        this.$successMsg('退款成功');
      })
    },

    // 理赔
    handleCompensate(row) {
      this.compensateFormVisible = true;
      this.compensateForm.id = row.orderDetailId;
      this.compensateItem.num = row.num;
      this.compensateItem.refundNum = row.refundNum;
    },

    // 取消 理赔
    cancelCompensateForm() {
      this.compensateFormVisible = false;
      this.compensateForm = {
        id: null,
        num: '',
        amount: '',
        remark: '',
      }
    },

    // 提交 理赔
    submitCompensateForm() {
      this.$refs.compensateForm.validate((valid) => {
        if (valid) {
          let params = {
            adminUserId: this.userid,
            orderDetailId: this.compensateForm.id,
            num: this.compensateForm.num,
            refundAmount: this.compensateForm.amount,
            remark: this.compensateForm.remark,
          }
          orderCompensate(params).then(res => {
            this.cancelCompensateForm();
            this.getDetail();
            this.getCompensateList();
            this.$successMsg('理赔成功');
          })
        }
      });

    },

    // 获取理赔列表
    getCompensateList() {
      getCompensateList({ orderId: this.orderId }).then(res => {
        this.compensateList = res.data;
      })
    },

    // 切换评价信息是否显示
    changeShow() {
      changeShow({
        isShow: this.evaluateDetail.isShow,
        orderId: this.orderId,
      }).then(res => {
        this.getDetail();
        this.$successMsg();
      })
    }

  },
  computed: {
    ...mapGetters([
      'userid',
      'name'
    ]),
    curOrderStatus() {
      switch (this.orderDetail.orderStatus) {
        case 'NOPAY':
          return 1
          break;
        case 'DFH':
          return 2
          break;
        case 'YFH':
          return 3
          break;
        case 'OVER':
          return 4
          break;
        default:
          return 1
      }
    },
    totalAmountCompute() {
      if (!this.orderDetail.totalAmount) {
        return 0
      }
      const totalAmount = parseFloat(this.orderDetail.totalAmount)
      const freight = parseFloat(this.orderDetail.freight)
      return (totalAmount - freight).toFixed(2)
    }
  }
}
</script>

<style scoped lang="scss">
.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;
  padding: 15px;
  background: #f5f7fa;

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

  .el-row {
    padding-top: 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>