orderDetial.vue

<template>
  <div class="app-container">
    <!-- 详情对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="订单信息" name="first">
          <el-form ref="form" :model="form" label-width="80px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="订单编号" >
                  <el-input v-model="form.orderNo" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="顺序号" >
                  <el-input v-model="form.orderNum" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="订单状态" >
                  <el-input v-model="form.state" disabled/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="城市" >
                  <el-input v-model="form.city" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="店铺" >
                  <el-input v-model="form.shopName" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="创建时间" >
                  <el-input v-model="form.createdAt" disabled/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="商品数量" >
                  <el-input v-model="form.goodsNum" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="金额" >
                  <el-input v-model="form.amount" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="付款时间" >
                  <el-input v-model="form.payTime" disabled/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="用户昵称" >
                  <el-input v-model="form.userName" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="用户电话" >
                  <el-input v-model="form.userPhone" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="完成时间" >
                  <el-input v-model="form.finishTime" disabled/>
                </el-form-item>
              </el-col>
            </el-row>           
            <el-table :data="goodsList">
              <el-table-column label="商品名称" align="center" prop="goodsName" />
              <el-table-column label="缩略图" align="center">
                <template slot-scope="scope">              
                  <div class="image-tmp">
                    <el-image style="width: 100px; height: 100px"  :src="getPicsList(scope.row.pics)" :preview-src-list="getPicsBigList(scope.row.pics)">
                      <div slot="error" class="image-slot"></div>            
                    </el-image>
                  </div>    
                </template>
              </el-table-column>
              <el-table-column label="商品分类" align="center" prop="categoryName" />
              <el-table-column label="原售价" align="center" prop="amount" />
              <el-table-column label="折扣价" align="center" prop="realAmount" />
              <el-table-column label="实付" align="center" prop="realAmount" />
              <el-table-column label="数量" align="center" prop="num" />              
            </el-table>  
          </el-form>
          <div v-show="refundTag" style="margin-top: 20px;" >
            <el-form ref="refundForm" :rules="rules" :model="refundForm" label-width="80px">
              <el-form-item label="退款金额" prop="refundAmount">
                <el-input  v-model="refundForm.refundAmount" style="width:200px;" placeholder="请输入退款金额"/>
              </el-form-item>
              <el-form-item label="处理备注" prop="desc">
                <el-input  v-model="refundForm.desc" type="textarea" placeholder="请输入处理备注"/>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="订单日志" name="second">
          <el-table  :data="logList">
            <el-table-column label="状态" align="center" prop="status" />              
            <el-table-column label="操作" align="center" prop="operation" />
            <el-table-column label="时间" align="center" prop="createAt" />
            <el-table-column label="操作人" align="center" prop="operationUser" />
            <el-table-column label="内容" align="center" prop="content" />        
            </el-table>
        </el-tab-pane>
      </el-tabs>      
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button v-show="!refundTag" type="primary" @click="submitForm">确定</el-button>
        <el-button v-show="refundTag" type="danger" @click="refundSubmit">退款</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getOrder,getLogList,refund } from "@/api/system/order";
import piovince from '@/utils/piovince';
export default {
  name: "OrderDetial",  
  data() {
    var validateRefundAmount = (rule, value, callback) => {    
      var regular=/(^[+]{0,1}([0-9]+)$)|(^[+]{0,1}([0-9]+)[\.]{1}[0-9]{1,2}$)/; //正数 ,小数可有可无，最多2位
      if (value == undefined || value === '') {        
        callback(new Error('不能为空'));
      }else if(!regular.test(value)){    
        callback(new Error('请输入大于0的正数,最多保留2位小数'));     
      }else if(this.amount){
        let refundAmountValue=parseFloat(value);
        let amountValue=parseFloat(this.amount);
        if(refundAmountValue>amountValue){
          callback(new Error('退款金额不能大于实付金额'));
        }else {
          callback();
        }
      }else {
        callback();
      }
    };
    return {
      refundTag:false,
      piovince,
      // 总条数
      total: 0,
      // 订单表格数据
      refundList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,     
      shopName: null,    
      goodsList:[],
      // 表单参数
      form: {},
      //退款表单
      refundForm: {
        refundAmount:"",
        desc:"",
        orderId:""
      },
      rules: {
        refundAmount: [
          { required: true,validator: validateRefundAmount,  trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请输入退款处理', trigger: 'blur' }
        ]
      },
      activeName:"first",
      logList: []      
    };
  },
  created() {
   
  },
  methods: {
    getProvince(province){
      let list=this.piovince;
      for(let i=0;i<list.length;i++){
        if(list[i].children.length>0){
          let childrenList=list[i].children;
          for(let j=0;j<childrenList.length;j++){
            if(childrenList[j].value == province){
              return childrenList[j].name;
            } 
          }
        }       
      }
    },
    // 取消按钮
    cancel() {
      this.activeName="first";
      this.open = false;    
    },
    /** 提交按钮 */
    submitForm() {
      this.open=false;
      this.activeName="first"     
    },
    formatterState(state){
       if(state == 0){
        return "创建未校验（创建未校验）";
      }else if(state == 1){
        return "未支付（待付款）";
      }else if(state == 2){
        return "已支付（待制作）";
      }else if(state == 3){
        return "支付制作中（制作中）";
      }else if(state == 4){
        return "制作完成未取（待取餐）";
      }else if(state == 5){
        return "取餐中（取餐中）";
      }else if(state == 6){
        return "正常完成（已完成）";
      }else if(state == 7){
       return "待取超时（已完成）";
      }else if(state == 8){
       return "未支付取消（已取消）";
      }else if(state == 9){
        return "支付后制作前取消（已取消）";
      }else if(state == 10){
        return "制作中取消（已取消）";        
      }else if(state == 11){
        return "制作完成取消（已取消）";  
      }else if(state == 12){
        return "退款中（退款中）";  
      }else if(state == 13){
        return "退款失败（退款失败）";  
      }else if(state == 14){
        return "部分退款（部分退款）";  
      }else if(state == 15){
        return "已退款（已退款）";  
      }else if(state == 50){
        return "其他人工干预状态（其他人工干预状态）";  
      }
    },
    handleClick(tab) {
      if(tab.name=="first"){
        this.getOrderDetail(this.orderId);
      }else if(tab.name=="second"){
        this.getLogList();
      }
    },
    /** 查询订单日志列表 */
    getLogList() {
      //this.loading = true;
      getLogList({orderId:this.orderId}).then(response => {
        if(response.code=="200"){
          this.logList = response.data; 
        }
      });
    },
    //退款
    refundClick(row){
      this.refundForm.refundAmount="";
      this.refundForm.desc="";
      this.refundTag=true;
      this.title="退款处理";
      this.open=true;      
      this.goodsList=[];
      this.orderId= row.id; 
      this.amount=row.amount;
      this.getOrderDetail(this.orderId);
    },
    //提交退款
    refundSubmit(){
      this.refundForm.orderId=this.orderId;       
      this.$refs["refundForm"].validate((valid) => {       
        if (valid) {          
          refund(this.refundForm).then(response => {
            if(response.code="200"){
              this.open=false;
              this.$emit('getList');
            }
          }); 
        }         
      });    
    },
    /** 详情按钮操作 */
    handleUpdate(row) {
      this.refundTag=false;
      this.goodsList=[];
      this.orderId= row.id; 
      this.title="订单信息";
      this.open = true;
      this.getOrderDetail(this.orderId);
    },
    getOrderDetail(id){
      getOrder(id).then(response => {
        if(response.code=="200"){
          this.goodsList=[];
          this.form = response.data;
          this.form.shopName=response.data.shop.name;
          this.form.state=this.formatterState(response.data.state);  
          this.form.city=this.getProvince(response.data.shop.city);        
          if(response.data.orderDetails.length>0){
            let list=response.data.orderDetails;
            for(let i=0;i<list.length;i++){
             this.goodsList.push({"goodsName":list[i].goods.name,"pics":list[i].goods.pics,
             "categoryName":list[i].goods.categoryName,"price":list[i].goods.price,"discount":list[i].goods.discount,
             "realAmount":list[i].realAmount,"num":list[i].num,"amount":list[i].amount})
            }
          }
        }        
      });
    },
    getPicsList(str){   
      let picObj = JSON.parse(str);  
      return picObj.thumbnail
    },
    getPicsBigList(str){
      let list=[];
      let picObj = JSON.parse(str);  
      list.push(picObj.thumbnail)
      return list;
    },    
  }
};
</script>