ylrz_his_scrm_adminUI/src/views/live/components/productAfterSalesOrder.vue

<template>
  <div class="order-content">
    <div class="order-status" v-if="afterSales!=null" >
      <el-steps :active="afterSales.status==4?afterSales.status+1:afterSales.status" align-center>
        <el-step title="待审核(24小时自动审核)"></el-step>
        <el-step title="平台已审核等待用户发货"></el-step>
        <el-step title="用户已发货待仓库审核"></el-step>
        <el-step title="财务审核"></el-step>
        <el-step title="退款成功"></el-step>
      </el-steps>
    </div>
    <div v-if="afterSales!=null">
      <el-card shadow="never"  style="margin-top: 15px">
        <div class="operate-container">
          <span style="margin-left: 20px" class="color-danger">售后状态：
            <el-tag prop="status" v-for="(item, index) in salesStatusOptions"    v-if="afterSales.salesStatus==item.dictValue">{{item.dictLabel}}</el-tag>
          </span>
          <div class="operate-button-container"  >
            <el-button size="mini"  v-hasPermi="['store:storeAfterSales:edit']" v-show="afterSales.salesStatus==0&&afterSales.status===1"  @click="addDelivery">编辑物流</el-button>
            <el-button size="mini"  v-hasPermi="['store:storeAfterSales:audit1']" v-show="afterSales.salesStatus==0&&afterSales.status===0" @click="handleAudit1">平台审核</el-button>
            <el-button size="mini"  v-hasPermi="['store:storeAfterSales:audit2']" v-show="afterSales.salesStatus==0&&afterSales.status===2" @click="handleAudit2">仓库审核</el-button>
            <el-button size="mini"  v-hasPermi="['store:storeAfterSales:refund']" @click="handleRefund"  v-show="afterSales.salesStatus==0&&afterSales.status===3">财务审核</el-button>
            <el-button size="mini"  v-hasPermi="['store:storeAfterSales:cancel']" @click="cancel"  v-show="afterSales.salesStatus==0">撤销</el-button>
            <el-button size="mini"  @click="showOrder">查看订单</el-button>
          </div>
        </div>
        <div style="margin: 20px 0px">
          <span class="font-small">基本信息</span>
        </div>
        <el-descriptions :column="4" border  >
          <el-descriptions-item label="订单单号"  >
                <span v-if="order!=null">
                  {{order.orderCode}}
                </span>
          </el-descriptions-item>
          <el-descriptions-item label="会员"  >
                <span v-if="user!=null">
                  {{user.nickname}}({{user.phone}})
                </span>
          </el-descriptions-item>
          <el-descriptions-item label="退款金额"  >
                <span v-if="afterSales!=null">
                  {{afterSales.refundAmount}}
                </span>
          </el-descriptions-item>
          <el-descriptions-item label="运费"  >
                <span v-if="order!=null">
                  {{order.payDelivery}}
                </span>
          </el-descriptions-item>
          <el-descriptions-item label="申请类型"  >
                <span v-if="afterSales!=null">
                  <el-tag prop="serviceType" v-for="(item, index) in serviceTypeOptions"    v-if="afterSales.serviceType==item.dictValue">{{item.dictLabel}}</el-tag>
                </span>
          </el-descriptions-item>
          <el-descriptions-item label="申请原因"  >
                <span v-if="afterSales!=null">
                  {{afterSales.reasons}}
                </span>
          </el-descriptions-item>
          <el-descriptions-item label="说明"  >
                <span v-if="afterSales!=null">
                  {{afterSales.explains}}
                </span>
          </el-descriptions-item>
          <el-descriptions-item label="状态"  >
                <span v-if="afterSales!=null">
                  <el-tag   v-for="(item, index) in statusOptions"    v-if="afterSales.status==item.dictValue" >{{item.dictLabel}}</el-tag>
                </span>
          </el-descriptions-item>
          <el-descriptions-item label="售后状态"  >
                <span v-if="afterSales!=null">
                  <el-tag  v-for="(item, index) in salesStatusOptions"    v-if="afterSales.salesStatus==item.dictValue" >{{item.dictLabel}}</el-tag>
                </span>
          </el-descriptions-item>
        </el-descriptions>
        <div style="margin: 20px 0px">
          <span class="font-small">收货信息</span>
        </div>
        <el-descriptions   :column="4" border  >
          <el-descriptions-item label="收货人"  >
                <span v-if="order!=null">
                  {{order.userName}}
                </span>
          </el-descriptions-item>
          <!--            <el-descriptions-item label="收货人"  >-->
          <!--                <span v-if="order!=null">-->
          <!--                  {{order.userName}}-->
          <!--                </span>-->
          <!--            </el-descriptions-item>-->
          <el-descriptions-item label="手机号码"  >
                <span v-if="order!=null">
                  {{order.userPhone}}
                </span>
          </el-descriptions-item>
          <el-descriptions-item label="收货地址"  >
                <span v-if="order!=null">
                  {{order.userAddress}}
                </span>
          </el-descriptions-item>
          <el-descriptions-item label="快递公司"  >
                <span v-if="order!=null">
                  {{order.deliveryName}}
                </span>
          </el-descriptions-item>
          <el-descriptions-item label="运单号"  >
                <span v-if="order!=null">
                  {{order.deliverySn}}
                </span>
          </el-descriptions-item>
        </el-descriptions>
        <div style="margin-top: 20px">
          <span class="font-small">商品信息</span>
        </div>
        <el-table
          border
          :data="items"
          size="small"
          style="width: 100%;margin-top: 20px" >
          <el-table-column label="商品图片" width="150" align="center">
            <template slot-scope="scope">
              <img :src="JSON.parse(scope.row.jsonInfo).image" style="height: 80px">
            </template>
          </el-table-column>
          <el-table-column label="商品名称" width="300" align="center">
            <template slot-scope="scope">
              <p>{{JSON.parse(scope.row.jsonInfo).productName}}</p>
            </template>
          </el-table-column>
          <el-table-column label="价格" width="240" align="center">
            <template slot-scope="scope">
              <p>价格：￥{{JSON.parse(scope.row.jsonInfo).price}}</p>

            </template>
          </el-table-column>
          <el-table-column label="属性" width="240" align="center">
            <template slot-scope="scope">
              {{JSON.parse(scope.row.jsonInfo).sku}}
            </template>
          </el-table-column>
          <el-table-column label="数量" width="180" align="center">
            <template slot-scope="scope">
              {{JSON.parse(scope.row.jsonInfo).num}}
            </template>
          </el-table-column>
          <el-table-column label="小计"  align="center">
            <template slot-scope="scope">
              ￥{{JSON.parse(scope.row.jsonInfo).num*JSON.parse(scope.row.jsonInfo).price}}
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 12px; text-align: right;" v-if="order">
          <div>订单金额：￥{{ goodsTotal.toFixed(2) }}</div>
          <div>运费金额：￥{{ (order.payDelivery || 0).toFixed(2) }}</div>
        </div>
        <div style="margin-top: 20px">
          <span class="font-small">操作信息</span>
        </div>
        <el-table style="margin-top: 20px;width: 100%"
                  ref="orderHistoryTable"
                  :data="logs" border>
          <el-table-column label="操作时间"  width="160" align="center">
            <template slot-scope="scope">
              {{scope.row.changeTime}}
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center">
            <template slot-scope="scope">
              {{scope.row.changeMessage}}
            </template>
          </el-table-column>
        </el-table>
      </el-card>

    </div>
    <el-dialog :title="audit.title" :visible.sync="audit.open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="退款金额" prop="refundAmount"  >
          <el-input-number v-model="form.refundAmount"  />
        </el-form-item>
<!--        <el-form-item label="退货联系人" prop="consignee"  v-if="form.serviceType==1" >-->
<!--          <el-input v-model="form.consignee" placeholder="请输入收货人" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="退货手机号" prop="phoneNumber"  v-if="form.serviceType==1">-->
<!--          <el-input v-model="form.phoneNumber" placeholder="请输入手机号" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="退货地址" prop="address" v-if="form.serviceType==1">-->
<!--          <el-input v-model="form.address" placeholder="请输入地址" />-->
<!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAuditForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="show.title" v-if="show.open" :visible.sync="show.open" width="1000px" append-to-body>
      <product-order  ref="productOrder" />
    </el-dialog>
    <el-dialog :title="add.title" :visible.sync="add.open" width="500px" append-to-body>

      <div slot="footer" class="dialog-footer">
        <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="100px">
          <el-form-item label="id" prop="id" v-if="false">
            <el-input v-model="addForm.id" placeholder="请输入"  />
          </el-form-item>
          <el-form-item label="快递公司" prop="deliveryName">
            <el-input v-model="addForm.deliveryName" placeholder="请输入"  />
          </el-form-item>
          <el-form-item label="运单号" prop="deliverySn">
            <el-input v-model="addForm.deliverySn" placeholder="请输入"  />
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel1">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getLiveAfterSales,cancel,refund,audit,updateLiveAfterSales,audit1,audit2,handleImmediatelyRefund } from "@/api/live/liveAfterSales";

import productOrder from "./productOrder";
export default {
  components: { productOrder },
  name: "order",
  data() {
    return {
      show:{
        open:false,
        title:"订单详情"
      },
      audit:{
        title:"审核",
        open:false,
      },
      add:{
        open:false,
        title:"添加物流"
      },
      addForm:{
        id:null,
        deliveryName:null,
        deliverySn:null
      },
      addRules:{
        deliveryName: [
          { required: true, message: "物流名称不能为空", trigger: "blur" }
        ],
        deliverySn: [
          { required: true, message: "物流单号不能为空", trigger: "blur" }
        ],
      },
      order:null,
      user:null,
      serviceTypeOptions:[],
      salesStatusOptions:[],
      statusOptions:[],
      afterSales:null,
      items:[],
      logs:[],
      form:{
        serviceType:1,
        refundAmount:0,
        consignee:null,
        phoneNumber:null,
        address:null,

      },
      rules:{
        status: [
          { required: true, message: "状态不能为空", trigger: "blur" }
        ],
        refundAmount: [
          { required: true, message: "退款金额不能为空", trigger: "blur" }
        ],
        consignee: [
          { required: true, message: "退货联系人不能为空", trigger: "blur" }
        ],
        phoneNumber: [
          { required: true, message: "退货手机号不能为空", trigger: "blur" }
        ],
        address: [
          { required: true, message: "退货地址不能为空", trigger: "blur" }
        ],

      }

    };
  },
  created() {
    this.getDicts("store_after_sales_sales_status").then((response) => {
      this.salesStatusOptions = response.data;
    });
    this.getDicts("store_after_sales_status").then((response) => {
      this.statusOptions = response.data;
    });
    this.getDicts("store_after_sales_service_type").then((response) => {
      this.serviceTypeOptions = response.data;
    });
  },
  computed: {
    goodsTotal() {
      if (!this.items || this.items.length === 0) return 0;
      return this.items.reduce((sum, it) => {
        const info = JSON.parse(it.jsonInfo || "{}");
        const num = Number(info.num) || 0;
        const price = Number(info.price) || 0;
        return sum + num * price;
      }, 0);
    }
  },
  methods: {
    submitForm() {
      var id=this.afterSales.id;
      this.addForm.id = id;
      updateLiveAfterSales(this.addForm).then(response => {
        if (response.code === 200) {
          this.msgSuccess("编辑成功");
          this.add.open = false;
          this.getLiveAfterSales(id);
        }
      });
    },
    cancel1(){
      this.add.open = false;
    },
    addDelivery(){
      this.add.open = true;
      this.addForm.deliveryName = this.afterSales.deliveryName;
      this.addForm.deliverySn = this.afterSales.deliverySn;
    },
    showOrder(){
      this.show.open=true;
      const orderId = this.order.orderId ;
      setTimeout(() => {
        this.$refs.productOrder.getOrder(orderId);
      }, 500);
    },
    handleAudit(){
      this.audit.open=true;
      this.form.serviceType=this.afterSales.serviceType;
      this.form.salesId=this.afterSales.id;
      this.form.refundAmount=this.afterSales.refundAmount;
    },
    handleRefund(){
      this.audit.open=true;
      this.form.salesId=this.afterSales.id;
      this.form.refundAmount=this.afterSales.refundAmount;
    },
    handleImmediatelyRefund(){
      let _this = this;
       this.$confirm('确认立即退款吗?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {

        let param ={orderId:_this.order.orderId}
        console.log(param)
         debugger;
        handleImmediatelyRefund(param).then(res=>{
          _this.msgSuccess("操作成功");
          _this.getLiveAfterSales(_this.afterSales.id);
        }).catch(res=>{
          console.log(res);
        });
      }).then(() => {
        // this.getLiveAfterSales(id);
      }).catch(function() {});
    },
    handleAudit1(){
      var id=this.afterSales.id;
      this.$confirm('确定审请通过?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        var data={salesId:id}
        return audit1(data);
      }).then(() => {
        this.getLiveAfterSales(id);
        this.msgSuccess("操作成功");
      }).catch(function() {});

    },
    handleAudit2(){
      var id=this.afterSales.id;
      this.$confirm('确定审请通过?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        var data={salesId:id}
        return audit2(data);
      }).then(() => {
        this.getLiveAfterSales(id);
        this.msgSuccess("操作成功");
      }).catch(function() {});

    },
    submitAuditForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          refund(this.form).then(response => {
            if (response.code === 200) {
              this.audit.open = false;
              this.getLiveAfterSales(this.afterSales.id);
              this.msgSuccess("操作成功");
            }
          });
        }
      });
    },
    cancel(){
      var id=this.afterSales.id;
      this.$confirm('是否确认取消订单?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        var data={salesId:id}
        return cancel(data);
      }).then(() => {
        this.getLiveAfterSales(id);
        this.msgSuccess("操作成功");
      }).catch(function() {});
    },
    refund(){
      var id=this.afterSales.id;
      this.$confirm('是否确认收货,确认后将自动退款给客户', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        var data={salesId:id}
        console.log(data)
        return refund(data);
      }).then(() => {
        this.getLiveAfterSales(id);
        this.msgSuccess("操作成功");
      }).catch(function() {});
    },
    getLiveAfterSales(id){
      getLiveAfterSales(id).then(response => {
        console.log(response)
        console.log(123)
        this.afterSales = response.afterSales;
        this.logs = response.logs;
        this.items = response.items;
        this.user=response.user;
        this.order=response.order;
      });
    }
  }
};
</script>
<style scoped>
.order-content{
  margin: 10px;
}
.detail-container {
  width: 80%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
}

.operate-container {
  background: #F2F6FC;
  height: 80px;
  margin: -20px -20px 0;
  line-height: 80px;
}

.operate-button-container {
  float: right;
  margin-right: 20px
}


</style>