| <!DOCTYPE HTML> | 
| <html xmlns:th="http://www.thymeleaf.org" xmlns:matrix="http://www.w3.org/1999/xhtml"> | 
| <head> | 
|     <meta charset="utf-8"> | 
|     <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> | 
|     <meta name="renderer" content="webkit|ie-comp|ie-stand"> | 
|     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | 
|     <meta name="viewport" | 
|           content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> | 
|     <meta http-equiv="Cache-Control" content="no-siteapp"/> | 
|     <LINK rel="Bookmark" href="../images/favicon.ico"> | 
|     <!-- 本框架基本脚本和样式 --> | 
|   | 
|     <script type="text/javascript" th:src="@{/js/systools/MBaseVue.js}"></script> | 
|     <link rel="stylesheet" th:href="@{/plugin/element-ui/index.css}"> | 
|     <link rel="stylesheet" th:href="@{/plugin/bootstrap-3.3.5/css/bootstrap.min.css}"> | 
|     <link th:href="@{/css/styleOne/style.min.css}" rel="stylesheet" type="text/css"/> | 
| </head> | 
| <body> | 
| <div class="ibox-content" id="app" v-cloak> | 
|     <form class="form-horizontal" id="dataform" | 
|           onsubmit="javascripr:return false;"> | 
|   | 
|         <div class="form-group"> | 
|             <label class="col-md-2 control-label"> </label> | 
|             <div class="col-md-12"> | 
|                 <div class="panel panel-primary"> | 
|                     <div class="panel-heading"> | 
|                         <div class="row"> | 
|                             <div class="col-md-6"> | 
|                                 <h2>客户:{{vipInfo.vipName}}</h2> | 
|                             </div> | 
|                         </div> | 
|                     </div> | 
|                     <div class="panel-body"> | 
|                         <div class="form-group"> | 
|                             <label class="col-md-1 control-label">退款时间:</label> | 
|                             <div class="col-md-3"> | 
|                                 <el-date-picker v-model="orderTime" | 
|                                                 type="date" | 
|                                                 placeholder="选择日期"> | 
|                                 </el-date-picker> | 
|                             </div> | 
|   | 
|                         </div> | 
|                         <div class="form-group"> | 
|   | 
|                             <label class="col-md-1 control-label">退款类型</label> | 
|                             <div class="col-md-6"> | 
|                                 <el-button-group> | 
|                                     <el-button @click="openSelect(1)" type="primary" size="small">退产品</el-button> | 
|                                     <el-button @click="openSelect(2)" type="primary" size="small">退项目套餐</el-button> | 
|                                     <el-button @click="openSelect(3)" type="primary" size="small">退卡项</el-button> | 
|                                 </el-button-group> | 
|                             </div> | 
|                         </div> | 
|   | 
|   | 
|                         <div class="form-group"> | 
|                             <label class="col-md-1 control-label">退款明细</label> | 
|                             <div class="col-md-11"> | 
|                                 <table class="table table-bordered"> | 
|                                     <tr> | 
|                                         <th>序号</th> | 
|                                         <th width="50px">产品名称</th> | 
|                                         <th>原单价</th> | 
|                                         <th>折扣单价</th> | 
|                                         <th>退款数量</th> | 
|                                         <th>卡项退款</th> | 
|                                         <th>现金退款</th> | 
|                                         <th>操作</th> | 
|                                     </tr> | 
|   | 
|                                     <tr v-for="(item,index) in refundItems"> | 
|                                         <td>{{index+1}}</td> | 
|                                         <td>{{item.goodsName}}</td> | 
|                                         <td>{{item.price}}</td> | 
|                                         <td> | 
|                                             <el-input :readonly="item.refundType==3" :max="item.price"  v-model="item.zkPrice"></el-input> | 
|                                         </td> | 
|                                         <td> | 
|                                             <el-input :readonly="item.refundType==3" :max="item.maxCount"  v-model="item.count"></el-input> | 
|                                         </td> | 
|                                         <td> | 
|   | 
|                                             <el-input v-if="item.cardName" v-model="item.cardPay"></el-input> | 
|                                             <div>{{item.cardName}}</div> | 
|                                         </td> | 
|                                         <td> | 
|                                             <el-input v-model="item.cashPay"  ></el-input> | 
|                                         </td> | 
|                                         <td> | 
|                                             <el-button @click="remove(index)" size="small" type="danger" | 
|                                                        icon="el-icon-delete"></el-button> | 
|                                         </td> | 
|                                     </tr> | 
|   | 
|                                 </table> | 
|                             </div> | 
|                         </div> | 
|                         <div class="form-group"> | 
|                             <label class="col-md-1 control-label">备  注:</label> | 
|                             <div class="col-md-7"> | 
|                 <textarea name="remark" type="text" id="remark" | 
|                           class="form-control" rows="4" | 
|                           v-model="remark"></textarea> | 
|                             </div> | 
|                         </div> | 
|   | 
|                         <div class="form-group "> | 
|                             <div class="col-md-12 text-center"> | 
|                                 <a href="javascript:;" @click="submit()" | 
|                                    class="btn btn-success radius">保存</a>     | 
|                                 <button @click="closeFram()" class="btn btn-danger radius" type="button">取消</button> | 
|                             </div> | 
|                         </div> | 
|                     </div> | 
|                 </div> | 
|   | 
|             </div> | 
|         </div> | 
|   | 
|     </form> | 
| </div> | 
| </div> | 
| <script type="text/javascript" th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script> | 
| <script type="text/javascript" th:src="@{/js/plugin/jquery.query.js}"></script> | 
| <script type="text/javascript" th:src="@{/plugin/bootstrap-3.3.5/js/bootstrap.min.js}"></script> | 
| <script type="text/javascript" th:src="@{/js/systools/AjaxProxyVue.js}"></script> | 
| <script type="text/javascript" th:src="@{/js/plugin/vue.js}"></script> | 
| <script type="text/javascript" th:src="@{/plugin/layer/layer.js}"></script> | 
| <script type="text/javascript" th:src="@{/plugin/element-ui/index.js}"></script> | 
| <script type="text/javascript"> | 
|   | 
|     var vipId = $.query.get("id"); | 
|     console.log(vipId); | 
|     var app = new Vue({ | 
|         el: '#app', | 
|         data: { | 
|             refundItems: [], | 
|             vipInfo: {}, | 
|             orderTime: new Date(), | 
|             remark: "", | 
|             vipId: vipId | 
|         }, | 
|         created: function () { | 
|             this.loadInfo(); | 
|         }, | 
|   | 
|         mounted: function () { | 
|   | 
|         }, | 
|   | 
|         methods: { | 
|   | 
|   | 
|             loadInfo: function () { | 
|   | 
|                 console.log('加载客户信息数据'); | 
|                 var _this = this; | 
|                 AjaxProxy.requst({ | 
|                     app: _this, | 
|                     async: false, | 
|                     url: basePath + '/admin/vipInfo/findUserById?id=' + _this.vipId, | 
|                     callback: function (data) { | 
|                         _this.vipInfo = data.rows[0]; | 
|                     } | 
|                 }); | 
|   | 
|   | 
|             } | 
|             , | 
|             remove: function (index) { | 
|                 this.refundItems.splice(index, 1); | 
|             }, | 
|   | 
|             closeFram: function () { | 
|                 parent.layer.close(parent.layer.getFrameIndex(window.name)); | 
|             }, | 
|   | 
|             submit: function () { | 
|                 var _this = this; | 
|                 var params = { | 
|                     vipId: _this.vipId, | 
|                     items: _this.refundItems, | 
|                     remark: _this.remark, | 
|                 } | 
|                 if (this.validate(this.refundItems)) { | 
|                     AjaxProxy.requst({ | 
|                         app: _this, | 
|                         data: params, | 
|                         url: basePath + '/admin/refundOrder/refundOrder', | 
|                         callback: function (data) { | 
|                             _this.$message({ | 
|                                 message: data.info, | 
|                                 type: 'success', | 
|                                 onClose: function () { | 
|                                     _this.closeFram(); | 
|                                 } | 
|                             }); | 
|                         } | 
|                     }); | 
|                 } | 
|             } | 
|             , | 
|   | 
|             openSelect: function (type) { | 
|                 var title = ""; | 
|                 var url = ""; | 
|                 if (type == 1) { | 
|                     title = "选择退款订单"; | 
|                     url = basePath + '/admin/redirect/hive/beautySalon/refundSelectOrder-list?keyword=' + this.vipInfo.phone; | 
|                 } else if (type == 2) { | 
|                     title = "选择退款项目"; | 
|                     url = basePath + '/admin/redirect/hive/beautySalon/refundSelectTaocan-list?vipId=' + this.vipInfo.id; | 
|                 } else if (type == 3) { | 
|                     title = "选择退款卡项"; | 
|                     url = basePath + '/admin/redirect/hive/beautySalon/refundSelectCard-list?vipId=' + this.vipInfo.id; | 
|                 } | 
|                 layer.open({ | 
|                     type: 2, | 
|                     title: title, | 
|                     area: ["100%", "100%"], | 
|                     content: [url] | 
|                 }); | 
|   | 
|             }, | 
|   | 
|             /** | 
|              * 订单产品退款 | 
|              * @param orderId | 
|              */ | 
|             selectOrder: function (orderId) { | 
|                 console.log('加载退款订单'); | 
|                 this.createItem({refundType: 1, orderId: orderId}) | 
|             }, | 
|             /** | 
|              * 项目套餐退款 | 
|              * @param orderId | 
|              */ | 
|             selectTaocan: function (ids) { | 
|                 console.log('项目套餐'); | 
|                 this.createItem({refundType: 2, ids: ids.join(",")}) | 
|             }, | 
|             selectCard: function (id) { | 
|                 console.log('充值卡'); | 
|                 this.createItem({refundType: 3, ids: id}) | 
|             }, | 
|   | 
|             createItem: function (data) { | 
|                 var _this = this; | 
|                 AjaxProxy.requst({ | 
|                     app: _this, | 
|                     async: false, | 
|                     data: data, | 
|                     url: basePath + '/admin/refundOrder/createItem', | 
|                     callback: function (data) { | 
|                         _this.refundItems = data.rows; | 
|                     } | 
|                 }); | 
|             }, | 
|   | 
|   | 
|             validate: function (params) { | 
|                 for (var i = 0; i < params.length; i++) { | 
|                     var item = params[i]; | 
|                     if( parseFloat(item.zkPrice)> parseFloat(item.price)){ | 
|                         this.$message({ | 
|                             message: '退款单价不能大于购买单价', | 
|                             type: 'error' | 
|                         }); | 
|                         return false; | 
|                     } | 
|                     if( parseFloat(item.count)> parseFloat(item.maxCount)){ | 
|                         this.$message({ | 
|                             message: '退款数量不能大于购买数量', | 
|                             type: 'error' | 
|                         }); | 
|                         return false; | 
|                     } | 
|                     var tkje = parseFloat(item.cardPay) + parseFloat(item.cashPay); | 
|                     var zfje = parseFloat(item.zkPrice) * parseFloat(item.count); | 
|                     if (tkje > zfje) { | 
|                         this.$message({ | 
|                             message: '退款金额不能大于购买金额', | 
|                             type: 'error' | 
|                         }); | 
|                         return false; | 
|                     } | 
|                 } | 
|   | 
|                 return true; | 
|             } | 
|             , | 
|   | 
|   | 
|         }, | 
|         filters: | 
|             { | 
|                 format: function (value, patten) { | 
|                     if (!value) return ''; | 
|                     return MTools.formatDate(value, patten) | 
|                 } | 
|                 , | 
|             } | 
|         , | 
|   | 
|     }) | 
|   | 
|   | 
| </script> | 
| </body> | 
| </html> |