renkang_companyui/src/views/store/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"  @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="afterSales!=null">
                  {{afterSales.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="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="afterSales!=null">
                  {{afterSales.consignee}}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="收货人"  >
                <span v-if="afterSales!=null">
                  {{afterSales.consignee}}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="手机号码"  >
                <span v-if="afterSales!=null">
                  {{afterSales.phoneNumber}}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="收货地址"  >
                <span v-if="afterSales!=null">
                  {{afterSales.address}}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="快递公司"  >
                <span v-if="afterSales!=null">
                  {{afterSales.deliveryName}}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="运单号"  >
                <span v-if="afterSales!=null">
                  {{afterSales.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: 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="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="id" prop="id" v-if="false">
          <el-input v-model="form.id" placeholder="请输入"  />
        </el-form-item>
        <el-form-item label="快递公司" prop="deliveryName">
          <el-input v-model="form.deliveryName" placeholder="请输入"  />
        </el-form-item>
        <el-form-item label="运单号" prop="deliverySn">
          <el-input v-model="form.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 {getStoreAfterSales,cancel,refund,audit,updateStoreAfterSales } from "@/api/store/storeAfterSales";

import productOrder from "./productOrder";
export default {
  components: { productOrder },
  name: "order",
  data() {
    return {
      show:{
        open:false,
        title:"订单详情"
      },
      audit:{
          title:"审核",
          open:false,
      },
      add:{
        open:false,
        title:"添加物流"
      },
      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;
    });
  },
  methods: {
    submitForm() {
      var id=this.afterSales.id;
      this.form.id = id;
      updateStoreAfterSales(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("添加成功");
                this.add.open = false;
                this.getStoreAfterSales(id);
              }
            });
    },
    cancel1(){
      this.add.open = false;
    },
    addDelivery(){
      this.add.open = true;
    },
    showOrder(){
      this.show.open=true;
      const orderId = this.order.id ;
      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;
    },
    submitAuditForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
           audit(this.form).then(response => {
              if (response.code === 200) {
                this.audit.open = false;
                this.getStoreAfterSales(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.getStoreAfterSales(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.getStoreAfterSales(id);
          this.msgSuccess("操作成功");
        }).catch(function() {});
    },
    getStoreAfterSales(id){
        getStoreAfterSales(id).then(response => {
            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>