修改订单退款

src/api/system/order.js

@@ -51,3 +51,12 @@ export function getLogList(query) {
     params: query,
   });
 }
+
+// 退款
+export function refund(data) {
+  return request({
+    url: "/system/refund",
+    method: "post",
+    data: data,
+  });
+}

src/views/order/index.vue

@@ -66,7 +66,7 @@
       <el-table-column width="200" label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
            <el-button size="mini" type="text" v-if="authBtn(['3','4','5','6','13'], scope.row.state)"
-            @click="refund(scope.row.id)">退款</el-button>      
+            @click="refundClick(scope.row)">退款</el-button>      
         </template>
       </el-table-column>
     </el-table>
@@ -74,7 +74,7 @@
       @pagination="getList" />
 
     <!-- 详情对话框 -->
-    <el-dialog title="订单信息" :visible.sync="open" width="1000px" append-to-body>
+    <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">
@@ -164,6 +164,16 @@
               <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">
@@ -175,8 +185,9 @@
             </el-table>
         </el-tab-pane>
       </el-tabs>      
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
+      <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>
@@ -184,13 +195,30 @@
 </template>
 
 <script>
-import { listOrder, getOrder,getLogList } from "@/api/system/order";
+import { listOrder, getOrder,getLogList,refund } from "@/api/system/order";
 import { listShop} from "@/api/system/shop";
 import piovince from '@/utils/piovince';
 export default {
   name: "Order",  
   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){
+        if(value>this.amount){
+          callback(new Error('退款金额不能大于实付金额'));
+        }else {
+          callback();
+        }
+      }else {
+        callback();
+      }
+    };
     return {
+      refundTag:false,
       createdTime:[],
       payTime:[],   
       shopList:[
@@ -249,13 +277,27 @@ export default {
       },
       // 表单参数
       form: {},
+      //退款表单
+      refundForm: {
+        refundAmount:"",
+        desc:"",
+        orderId:""
+      },
       shopName: null,
       city:null,
       activeName:"first",
       goodsList:[],
       logList:[] ,
-      orderId:null  
- 
+      orderId:null ,
+      amount: null,
+      rules: {
+        refundAmount: [
+          { required: true,validator: validateRefundAmount,  trigger: 'blur' }
+        ],
+        desc: [
+          { required: true, message: '请输入退款处理', trigger: 'blur' }
+        ]
+      }
     };
   },
   created() {
@@ -272,8 +314,30 @@ export default {
       }
     },
     //退款
-    refund(id){
-
+    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.getList();
+            }
+          }); 
+        }         
+      });    
     },
     getPicsList(str){   
       let picObj = JSON.parse(str);  
@@ -379,8 +443,11 @@ export default {
     },
     /** 详情按钮操作 */
     handleUpdate(row) {
+      this.refundTag=false;
       this.goodsList=[];
-      this.orderId= row.id 
+      this.orderId= row.id; 
+      this.title="订单信息";
+      this.open = true;
       this.getOrderDetail(this.orderId);
     },
     getOrderDetail(id){
@@ -398,7 +465,6 @@ export default {
              "realAmount":list[i].realAmount,"num":list[i].num})
             }
           }
-          this.open = true;
         }        
       });
     },