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-popconfirm title="确定同意吗？" @onConfirm="changeExamineStatus('OK')">
                  <el-button slot="reference" size="small" type="primary">同意</el-button>
                </el-popconfirm>
                <el-popconfirm title="确定拒绝吗？" @onConfirm="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="确定要收货吗？" @onConfirm="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>
  </div>
</template>

<script>
import {changeExamineStatus, getOrderRefundDetail, receiveProd, saveRefundRemark} from "@/api/order";
import {getExpress} from "@/api/common";

export default {
  name: "orderRefundDetail",
  data() {
    return {
      orderRefundId: '',
      orderDetail: {},
      remarkVisible: false,
      logisticsVisible: false,
      logistics: []
    }
  },
  created() {
    this.orderRefundId = this.$route.query.orderRefundId
    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);
    },
    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) {
      console.log(123);
      const orderRefundId = this.orderRefundId
      changeExamineStatus({orderRefundId, examineStatus}).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
      })
    },
  },
  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>