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

<template>
  <div class="app-container">
    <el-page-header @back="goBack" content="订单详情"></el-page-header>
    <div class="order-refund-main">
      <el-row style="padding: 15px 15px 10px">
        <el-col :span="24">
          <div class="order-refund-main-title">
            <span>订单编号：{{ orderDetail.orderId }}</span>
            <span>申请退款时间：{{ orderDetail.createTime }}</span>
            <span>商户：{{ orderDetail.companyWechatName || '无' }}</span>
            <div class="fr">
              <el-link type="primary" :underline="false" @click="showRemark('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-refund-main-status">
              <span>{{ orderDetail.orderStatus | ORDER_REFUND_CURRENT_STATUS_FILTER }}</span>
            </div>
            <div class="order-refund-main-opt-btn">
              <template v-if="orderDetail.orderStatus === 'DSJCL'">
				<el-button v-if="orderDetail.refundType == 'REFUND_GOODS'" @click="changeExamineStatus('OK',orderDetail.refundType)" slot="reference" size="small" type="primary">同意</el-button>
                <el-popconfirm v-else title="确定同意吗？" @confirm="changeExamineStatus('OK')">
                  <el-button slot="reference" size="small" type="primary">同意</el-button>
                </el-popconfirm>
                <el-popconfirm title="确定拒绝吗？" @confirm="changeExamineStatus('FAIL')" style="margin-left: 10px;">
                  <el-button slot="reference" size="small" type="warning">拒绝</el-button>
                </el-popconfirm>
              </template>
              <template v-if="orderDetail.orderStatus === 'DSJSH'">
                <el-popconfirm title="确定要收货吗？" @confirm="receiveProd()">
                  <el-button slot="reference" size="small" type="primary">确认收货</el-button>
                </el-popconfirm>
                <el-button type="success" size="small" @click="queryLogistics(orderDetail.logisticsNo)" v-if="orderDetail.logisticsNo" style="margin-left: 10px;">查看物流</el-button>
              </template>
            </div>
          </el-col>
          <el-col :span="16" style="padding: 0 15px;">订单备注：{{ orderDetail.remark }}</el-col>
        </el-row>
      </div>
    </div>
    <div class="order-refund-receive-info">
      <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}}</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.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>
        </el-col>
        <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.refundType | REFUND_CURRENT_TYPE_FILTER}}</div>
            </div>
            <div class="item">
              <div class="label">退款原因：</div>
              <div class="value">{{orderDetail.refundReason}}</div>
            </div>
            <div class="item">
              <div class="label">退款说明：</div>
              <div class="value">{{orderDetail.refundExplain}}</div>
            </div>
            <div class="item">
              <div class="label">退款凭证：</div>
              <div class="value" style="display: flex;">
                <div v-for="(item, index) in orderDetail.tkFiles" :key="index" style="margin-right: 10px">
                  <el-image :src="item.url" style="width: 50px; height: 50px;" :preview-src-list="[item.url]"></el-image>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="order-refund-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"></el-table-column>
        <el-table-column prop="profitAmount" label="预计盈利" align="center"></el-table-column>
        <el-table-column prop="totalPrice" label="商品总金额" align="center" min-width="100"></el-table-column>
        <el-table-column prop="refundAmount" label="退款金额" align="center"></el-table-column>
        <el-table-column prop="refundNum" label="退款数量" align="center"></el-table-column>
        <el-table-column label="退款时间" align="center" min-width="160">
          <template>
            {{ orderDetail.examineTime || '' }}
          </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;">商品总价：¥ {{ totalAmountCompute }}</div>
            <div style="padding-bottom: 10px;">运费：¥ {{ orderDetail.freight }}</div>
            <div style="padding-bottom: 10px;">优惠：¥ {{ orderDetail.discountAmount }}</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>
    <el-dialog :title="'订单备注'" :visible.sync="remarkVisible" :show-close="false" width="50%" :close-on-click-modal="false">
      <el-input
        type="textarea"
        :autosize="{ minRows: 8, maxRows: 16}"
        placeholder="请输入备注内容"
        v-model="orderDetail.remark"
        maxlength="100"
        show-word-limit>
      </el-input>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveRemark">保 存</el-button>
        <el-button @click="cancelRemark">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="'物流信息'" :visible.sync="logisticsVisible" :show-close="false" width="80%" :close-on-click-modal="false">
      <el-table
        :data="logistics"
        style="width: 100%"
        size="mini">
        <el-table-column prop="logisticsNo" label="快递单号" align="center"></el-table-column>
        <el-table-column prop="comName" 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 @click="logisticsVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
	<!-- 退货确认 -->
	<el-dialog :title="'退货确认'" :visible.sync="returnGoodsVisible" :show-close="false" width="80%" :close-on-click-modal="false">
		<el-form :model="returnGoodsForm" :rules="returnGoodsFormRules" ref="returnGoodsForm" label-width="80px" label-position="left">
			<el-row :gutter="20">
				<el-col :span="24">
					<el-form-item label="卖家留言" prop="refundMessage">
					  <el-input type="textarea" :rows="5" v-model="returnGoodsForm.refundMessage" placeholder="请输入卖家留言"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-card class="box-card">
						<el-tabs v-model="typeIndex" @tab-click="changeType">
						    <el-tab-pane label="发货数量" name="1"></el-tab-pane>
						    <el-tab-pane v-if="joinCode" label="退货条码" name="2"></el-tab-pane>
						</el-tabs>
						<br/>
						<el-button size="small" v-show="typeIndex == 2 && joinCode" type="primary" @click="addCode()">新增</el-button>
						<el-button size="small" v-show="typeIndex == 1 && joinCode" type="primary" @click="handleDownload('导入条码模板')">导入条码模板下载</el-button>
						<div class="table">
							<!-- 发货数量 -->
							<el-form v-show="typeIndex == 1" ref="formData1" :model="formData1" label-width="0" size="small" label-position="left">
								<el-table :data="formData1.list" element-loading-text="Loading" border fit highlight-current-row stripe>
									<el-table-column prop="brandName" align="center" label="品牌"></el-table-column>
									<el-table-column prop="mainName" align="center" label="大类"></el-table-column>
									<el-table-column prop="smallName" align="center" label="小类"></el-table-column>
									<el-table-column prop="goodsName" align="center" label="商品名称"></el-table-column>
									<el-table-column prop="goodsMaterialSpecsName" align="center" label="规格型号"></el-table-column>
									<el-table-column prop="goodsMaterialUnit" align="center" label="单位">
										<template slot-scope="scope">
											{{scope.row.goodsMaterialUnit == 'C'?'整套':scope.row.goodsMaterialUnit == 'I'?"单个":''}}
										</template>
									</el-table-column>
									<el-table-column prop="num" align="center" label="数量"></el-table-column>
									<el-table-column prop="insideNum" align="center" label="内机数量"></el-table-column>
									<el-table-column prop="outNum" align="center" label="外机数量"></el-table-column>
									<el-table-column prop="partNum" align="center" label="配件数量"></el-table-column>
									<el-table-column prop="refundInsideCodeQty" align="center" label="导入内机条码数量" width="140"></el-table-column>
									<el-table-column prop="refundOutCodeQty" align="center" label="导入外机条码数量" width="140"></el-table-column>
									<el-table-column prop="refundPartsCodeQty" align="center" label="导入配件条码数量" width="140"></el-table-column>
									<el-table-column label="操作" align="center" width="140" fixed="right">
										<template slot-scope="scope" v-if="joinCode">
											<el-upload
											  action='_'
											  :show-file-list='false'
											  :http-request="importCode"
											>
												<el-button @click="orderDetailId = scope.row.orderDetailId" size="mini" type="text">导入条码</el-button>
											</el-upload>
										</template>
									</el-table-column>
								</el-table>
							</el-form>
							<!-- 发货条码 -->
							<el-form ref="formData2" :model="formData2">
								<el-table v-show="typeIndex == 2" :data="formData2.list" element-loading-text="Loading" border fit highlight-current-row stripe>
									<el-table-column label="品牌" align="center">
										<template slot-scope="scope">
											<el-form-item>
												<el-input type="text" v-model="scope.row.brandName" :disabled="true" placeholder="请输入"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column label="商品大类" align="center">
										<template slot-scope="scope">
											<el-form-item>
												<el-input type="text" v-model="scope.row.mainName" :disabled="true" placeholder="请输入"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column label="商品小类" align="center">
										<template slot-scope="scope">
											<el-form-item>
												<el-input type="text" v-model="scope.row.smallName" :disabled="true" placeholder="请输入"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column prop="" align="center" label="商品名称">
										<template slot-scope="scope">
											<el-form-item>
												<el-input type="text" v-model="scope.row.goodsMaterialName" :disabled="true" placeholder="请输入"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column label="规格型号" align="center">
										<template slot-scope="scope">
											<el-form-item :prop="'list.' + scope.$index + '.specs'" :rules="[{ required: true, message: `请选择规格型号`, trigger: 'blur' }]">
												<el-select v-model="scope.row.specs" @change="(e)=>{changeSpecs(e,scope.row)}" value-key="orderDetailId" :disabled="isEdit2 != scope.$index" placeholder="请选择" style="width: 100%;">
												    <el-option
												      v-for="(item,ind) in formData1.list"
												      :key="ind"
												      :label="item.goodsMaterialSpecsName"
												      :value="item">
												    </el-option>
												</el-select>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column label="物料类型" align="center">
										<template slot-scope="scope">
											<el-form-item :prop="'list.' + scope.$index + '.goodsMaterialItemType'" :rules="[{ required: true, message: `请选择物料类型`, trigger: 'blur' }]">
												<el-select v-model="scope.row.goodsMaterialItemType" @change="(e)=>{changeMaterial(e,scope.row)}" 
													:disabled="isEdit2 != scope.$index" placeholder="请选择" style="width: 100%;">
												    <el-option
												      v-for="(item,ind) in [{name: '内机',id: 'INSIDE'},{name: '外机',id: 'OUT'},{name: '配件',id: 'PARTS'}]"
												      :key="ind"
												      :label="item.name"
												      :value="item.id">
												    </el-option>
												</el-select>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column label="物料名称" align="center">
										<template slot-scope="scope">
											<el-form-item :prop="'list.' + scope.$index + '.material'" :rules="[{ required: true, message: `请选择物料名称`, trigger: 'blur' }]">
												<el-select v-model="scope.row.material" @focus="(e)=>{
													if(!scope.row.goodsMaterialItemType){
														return $message.warning('请先选择物料类型！');
													}
												}" @change="(e)=>{
													scope.row.materialName = e.name
													scope.row.stockQty = (e.uniqueCode=='YES'?1:null)
													scope.row.uniqueCode = e.uniqueCode
													scope.row.goodsMaterialItemId = e.itemId
													
												}" value-key="name" :disabled="isEdit2 != scope.$index" placeholder="请选择" style="width: 100%;">
												    <el-option
												      v-for="(item,ind) in scope.row.materialList"
												      :key="ind"
												      :label="item.name"
												      :value="item">
												    </el-option>
												</el-select>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column prop="" align="center" label="是否一物一码" >
										<template slot-scope="scope">
											<el-form-item>
												{{scope.row.uniqueCode=='YES'?'是':scope.row.uniqueCode=='NO'?'否':''}}
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column prop="" align="center" label="条码" >
										<template slot-scope="scope">
											<el-form-item :prop="'list.' + scope.$index + '.materialCode'" :rules="[{ required: true, message: `请输入条码`, trigger: 'blur' }]">
												<el-input type="text" v-model="scope.row.materialCode" :disabled="isEdit2 != scope.$index" placeholder="请输入"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column prop="" align="center" label="数量">
										<template slot-scope="scope">
											<el-form-item :prop="'list.' + scope.$index + '.stockQty'" :rules="[{ required: true, message: `请输入数量`, trigger: 'blur' }]">
												<el-input type="number" v-model="scope.row.stockQty" :disabled="isEdit2 != scope.$index || scope.row.uniqueCode=='YES'" placeholder="请输入"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column label="操作" align="right" width="140" fixed="right">
										<template slot-scope="scope">
											<el-button size="mini" type="primary" v-if="scope.$index == isEdit2" @click="saveCode(scope.row)">保存</el-button>
											<el-button size="mini" type="primary" v-if="scope.$index != isEdit2" @click="isEdit2 = scope.$index">编辑</el-button>
											<el-popconfirm title="确定删除吗？" @confirm="delCode(scope.row.orderDetailCodeId,scope.$index)">
												<el-button slot="reference" size="mini" type="danger">删除</el-button>
											</el-popconfirm>
										</template>
									</el-table-column>
								</el-table>
							</el-form>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</el-form>
		<div slot="footer" class="dialog-footer">
		  <el-button @click="returnGoodsVisible = false;">关 闭</el-button>
		  <el-button type="primary" @click="saveReturnGoods()">确 定</el-button>
		</div>
	</el-dialog>
  </div>
</template>

<script>
import {changeExamineStatus, getOrderRefundDetail, receiveProd, saveRefundRemark, getOrderDetail, getCodeDetail2, getMaterialList, listImport2, saveCode2,delCode2} from "@/api/order";
import {getExpress} from "@/api/common";

export default {
  name: "orderRefundDetail",
  data() {
    return {
      orderRefundId: '',
      orderDetail: {},
      remarkVisible: false,
      logisticsVisible: false,
      logistics: [],
	  returnGoodsVisible: false,
	  typeIndex: '1',
	  formData1: {
	  	list: [],
	  },
	  formData2: {
	  	list: [],
	  },
	  isEdit1: 0,
	  isEdit2: 0,
	  joinCode: JSON.parse(localStorage.getItem('greemall_user')).joinCode,
	  orderDetailId: '',
	  returnGoodsFormRules: {
	  	// refundMessage: [{ required: true, message: '请填写卖家留言', trigger: 'blur' }],
	  },
	  returnGoodsForm: {
	  	refundMessage: ''
	  },
    }
  },
  created() {
    this.orderRefundId = this.$route.query.orderRefundId || this.$route.query.orderId
    this.getDetail()
  },
  methods: {
    getDetail() {
      getOrderRefundDetail({ orderRefundId: this.orderRefundId }).then((res) => {
        this.orderDetail = res.data
        this.orderDetail.workerName = this.orderDetail.workerName ? this.orderDetail.workerName : '暂无'
        this.orderDetail.workerPhone = this.orderDetail.workerPhone ? this.orderDetail.workerPhone : ''
      })
    },
    goBack() {
      // this.$router.go(-1);
		this.$router.push({
			name:"order_pr",
			params: {}
		})
    },
    showRemark() {
      this.remarkVisible = true
    },
    cancelRemark() {
      this.remarkVisible = false
    },
    saveRemark() {
      const params = {
        orderRefundId: this.orderRefundId,
        remark: this.orderDetail.remark
      }
      saveRefundRemark(params).then(() => {
        this.cancelRemark();
        this.getDetail();
        this.$successMsg('保存成功');
      })
    },
    // 变更维权处理状态
    changeExamineStatus(examineStatus,refundType) {
      console.log(refundType);
      const orderRefundId = this.orderRefundId
		if(refundType == 'REFUND_GOODS'){
			this.getOrderDetail()
			this.getCodeDetail2()
			this.returnGoodsVisible = true
		}else{
			changeExamineStatus({orderRefundId, examineStatus}).then(() => {
			  this.getDetail();
			  this.$successMsg('操作成功');
			})
		}
    },
	saveReturnGoods(){
		changeExamineStatus({
		  orderRefundId: this.orderRefundId,
		  examineStatus: 'OK',
		  refundMessage: this.returnGoodsForm.refundMessage
		}).then(() => {
		  this.getDetail();
		  this.$successMsg('操作成功');
		})
	},
    // 确认收货
    receiveProd() {
      const orderRefundId = this.orderRefundId
      receiveProd({orderRefundId}).then(() => {
        this.getDetail();
        this.$successMsg('确认收货成功');
      })
    },
    // 查看物流
    queryLogistics(logisticsNo) {
      this.logisticsVisible = true
      getExpress({ logisticsNo }).then(res => {
        this.logistics = res.data
      })
    },
		
		getOrderDetail(){
			getOrderDetail({orderId: this.orderDetail.orderId}).then(res => {
			  this.formData1.list = res.data.orderDetails
			})
		},
		changeType(){
			this.getOrderDetail()
			this.getCodeDetail2()
		},
		async getCodeDetail2(){
			getCodeDetail2({orderId: this.orderRefundId}).then(async res => {
				for(var item of res.data){
					item.specs = {goodsMaterialSpecsName: item.specsName,orderDetailId: item.orderDetailId}
					item.material = {name: item.materialName}
					item.materialList = await this.getMaterialList(item.specsName,item.goodsMaterialItemType)
				}
				this.formData2.list = res.data
			})
		},
		async getMaterialList(specsName,type){
			return new Promise((resolve, reject) => {
				getMaterialList({
					pageNum: 1,
					pageSize: -1,
					specsName,
					type
				}).then(async res => {
					resolve(res.data.records) 
				})
			})
			
		},
		async changeSpecs(e,row){
			row.brandName = e.brandName
			row.brandId = e.brandId
			row.mainName = e.mainName
			row.mainId = e.mainNumber
			row.smallName = e.smallName
			row.smallId = e.smallNumber
			row.specsName = e.goodsMaterialSpecsName
			row.goodsMaterialName = e.goodsName
			row.goodsMaterialId = e.goodsMaterialId
			row.material = null
			row.materialName = ''
			row.stockQty = ''
			row.uniqueCode = ''
			row.materialList = await this.getMaterialList(row.specsName,row.goodsMaterialItemType)
			row.orderDetailId = e.orderDetailId
		},
		async changeMaterial(e,row){
			if(!row.specs){
				return this.$message.warning('请先选择规格型号！');
			}
			row.material = null
			row.materialName = ''
			row.stockQty = ''
			row.uniqueCode = ''
			row.materialList = await this.getMaterialList(row.specsName,row.goodsMaterialItemType)
		},
		//发货新增条码
		addCode(){
			this.$refs.formData2.validate((valid) => {
				if (valid) {
					this.isEdit2 = 0
					this.formData2.list.unshift({
						brandId: '',
						brandName: '',
						mainId: '',
						mainName: '',
						stockQty: '',
						smallId: '',
						smallName: '',
						goodsMaterialItemType: '',
						goodsMaterialName: '',
						goodsMaterialId: '',
						materialCode: '',
						uniqueCode: '',
						specs: null,
						specsName: '',
						materialName: '',
						material: null,
						materialList: [],
						orderDetailId: '',
						goodsMaterialItemId: ''
					})
				}
			});
		},
		delCode(orderDetailCodeId,index){
			if(orderDetailCodeId){
				delCode2({
				  orderDetailCodeId
				}).then(res => {
				  if (res.code == 200) {
				    this.$message({ type: 'success', message: '删除成功!' })
				    this.getOrderDetail()
				    this.getCodeDetail2()
				  } else {
				    this.$message.error(res.msg);
				  }
				})
			}else{
				this.formData2.list.splice(index,1)
			}
		},
		saveCode(orderDetailCodes){
			const that = this
			let params = [{
				...orderDetailCodes,
				orderId: this.orderRefundId,
			}]
			delete params[0].material;
			delete params[0].specs;
			this.$refs.formData2.validate((valid, invalidFields, errLabels) => {
				if (valid) {
					saveCode2(params).then(res=>{
						if(res.code == 200){
							that.$message.success('保存成功!')
							this.getOrderDetail()
							this.getCodeDetail2()
						}
					})
				}
			})
		},
		importCode(data){
			const loading = this.$loading({
			  lock: true,
			  text: '正在导入',
			  spinner: 'el-icon-loading',
			  background: 'rgba(0, 0, 0, 0.7)'
			})
			var formdata = new FormData()
			formdata.append('file', data.file)
			let params = {
				orderDetailId: this.orderDetailId
			}
			if (!!params) {
			  for (const key in params) {
			    if (Object.hasOwnProperty.call(params, key)) {
			      formdata.append(key, params[key])
			    }
			  }
			}
			listImport2({ formdata })
			  .then(res => {
			    this.getOrderDetail()
				this.getCodeDetail2()
			    loading.close()
			    this.$message({
			      type: 'success',
			      message: '导入成功!'
			    })
			  })
			  .catch(err => {
			    loading.close()
			    this.$message({
			      type: 'error',
			      message: err.message || '导入失败'
			    })
			  })
		},
		
		// 下载导入模版
		handleDownload(title) {
			commonTemplateDownload({ name: '导入条码.xlsx' }, title).then(res => {
				this.$message({
					message: '下载成功',
					type: 'success'
				})
			}).catch(err => {
				this.$message.error('下载失败')
			})
		},
  },
  computed: {
    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-refund-main {
  margin-top: 15px;
  border: 1px solid #e5e5e5;
  .order-refund-main-title {
    font-size: 14px;
  }
  .order-refund-main-title span {
    margin-right: 15px;
  }
  .order-refund-main-status {
    color: #409EFF;
    padding: 15px 0;
    font-size: 24px;
  }
  .order-refund-main-opt-btn {
    padding: 15px 0;
  }
}
.order-refund-receive-info {
  margin: 15px 0;
  padding: 15px;
  background: #f5f7fa;
  :first-child div span {
    padding-right: 15px;
  }
  .el-row{
    padding-top: 15px;
  }
}

.order-refund-detail {
  background: #f5f7fa;
  .order-amount-info {
    padding: 15px 0;
    font-size: 12px;
    font-weight: bold;
  }
}

.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;
    }
  }
}
</style>
<style lang="scss">
.order-refund-detail {
  .el-table tr,.el-table th {
    background-color: #f5f7fa;
  }
}

</style>