|  |  | 
 |  |  |         .ibox-content { | 
 |  |  |             background-color: rgba(240, 242, 245, 1); | 
 |  |  |         } | 
 |  |  |         label { | 
 |  |  |         .aside label { | 
 |  |  |             width: 100%; | 
 |  |  |             margin: 5px 0 !important; | 
 |  |  |         } | 
 |  |  | 
 |  |  | </head> | 
 |  |  | <div class="ibox-content" id="app"> | 
 |  |  |     <el-container> | 
 |  |  |         <el-aside style="width: 300px; background-color: white; padding: 10px;"> | 
 |  |  |         <el-aside class="aside" style="width: 300px; background-color: white; padding: 10px;"> | 
 |  |  |             <el-row style="border-bottom: #E4E7ED 1px solid;"> | 
 |  |  |                 <el-col :span="20" style="padding: 10px;"> | 
 |  |  |                     <el-row type="flex" align="middle"> | 
 |  |  | 
 |  |  |                             <label style="font-size: 14px;">应收金额</label> | 
 |  |  |                             <label>欠款</label> | 
 |  |  |                             <label>已还</label> | 
 |  |  |                             <label>退款</label> | 
 |  |  |                             <label v-if="order.refund != 0">退款</label> | 
 |  |  |                         </el-col> | 
 |  |  |                         <el-col :span="14" style="text-align: right;"> | 
 |  |  |                             <label>¥ {{order.total}}</label> | 
 |  |  | 
 |  |  |                             <label>¥ {{order.zkTotal}}</label> | 
 |  |  |                             <label>¥ {{order.arrears}}</label> | 
 |  |  |                             <label>¥ {{order.repay}}</label> | 
 |  |  |                             <label>¥ {{order.refund}}</label> | 
 |  |  |                             <label v-if="order.refund != 0">¥ {{order.refund}}</label> | 
 |  |  |                         </el-col> | 
 |  |  |                     </el-row> | 
 |  |  |                 </el-col> | 
 |  |  | 
 |  |  |  | 
 |  |  |         <el-row type="flex" align="middle" style="padding: 10px 0;"> | 
 |  |  |             <el-col :span="5" style="text-align: center;">退款方式</el-col> | 
 |  |  |             <el-col class="paymethod" :span="15"> | 
 |  |  |             <el-col class="paymethod" :span="18"> | 
 |  |  |                 <el-row> | 
 |  |  |                     <ul> | 
 |  |  |                         <span v-for="(item, index) in payMethods"> | 
 |  |  | 
 |  |  |                                          @check="(click, checked,$item)=>{handleCheckChange(click, checked,$item)}" | 
 |  |  |                                          :props="defaultProps"> | 
 |  |  |                                 </el-tree> | 
 |  |  |                                 <li :class="{active : item.isActive}" slot="reference" @click="payMethodSelect(item, index)">{{item.value}}</li> | 
 |  |  |                                 <li :class="{active : item.isActive}" slot="reference" @click="payMethodSelect(item, index)"><div style=" height:30px; line-height: 30px; display: flex; align-items: center"><img style="width: 25px; height: 25px; align-items: center;" :src="item.img"><span style="margin-left: 5px;">{{item.value}}</span></div></li> | 
 |  |  |                             </el-popover> | 
 |  |  |                         </span> | 
 |  |  |                     </ul> | 
 |  |  | 
 |  |  |             isReturnAchieve : false, | 
 |  |  |             payMethods: [{ | 
 |  |  |                 value: '现金支付', | 
 |  |  |                 img: '/images/pay/cash.png', | 
 |  |  |                 isActive: false, | 
 |  |  |                 type: '现金支付' | 
 |  |  |             }, { | 
 |  |  |                 value: '微信', | 
 |  |  |                 img: '/images/pay/wechat.png', | 
 |  |  |                 isActive: false, | 
 |  |  |                 type: '微信' | 
 |  |  |             }, { | 
 |  |  |                 value: '支付宝', | 
 |  |  |                 img: '/images/pay/zhifubao.png', | 
 |  |  |                 isActive: false, | 
 |  |  |                 type: '支付宝' | 
 |  |  |             }, { | 
 |  |  |                 value: '银行卡', | 
 |  |  |                 img: '/images/pay/yinlian.png', | 
 |  |  |                 isActive: false, | 
 |  |  |                 type: '银行卡' | 
 |  |  |             }, { | 
 |  |  |                 value: '团购', | 
 |  |  |                 img: '/images/pay/tuan.png', | 
 |  |  |                 isActive: false, | 
 |  |  |                 type: '团购' | 
 |  |  |             }, { | 
 |  |  |                 value: '储值卡', | 
 |  |  |                 img: '/images/pay/card.png', | 
 |  |  |                 isActive: false, | 
 |  |  |                 type: '储值卡' | 
 |  |  |             }, ], | 
 |  |  | 
 |  |  |                         _this.vipInfo = mapInfo.vipInfo; | 
 |  |  |                         _this.order = mapInfo.order; | 
 |  |  |                         _this.orderItems = mapInfo.orderItems; | 
 |  |  |                         _this.payMethodItems = mapInfo.payMethodItems; | 
 |  |  |                         _this.payMethodItems = mapInfo.payMethods; | 
 |  |  |                         _this.achieveItems = mapInfo.achieveList; | 
 |  |  |  | 
 |  |  |                         _this.flowItems = _this.order.flows; | 
 |  |  | 
 |  |  |                             } | 
 |  |  |                         } else { | 
 |  |  |                             Vue.set(item,'isActive',true); | 
 |  |  |                             var hasAmount = 0; | 
 |  |  |                             for(var i = 0; i < payMoneys.length; i++) { | 
 |  |  |                                 hasAmount += parseFloat(payMoneys[i].money); | 
 |  |  |                             } | 
 |  |  |                             if (_this.refundMoney - hasAmount > 0) { | 
 |  |  |                                 Vue.set(item, 'money', _this.refundMoney - hasAmount); | 
 |  |  |                             } | 
 |  |  |                             _this.payMoneys.push(item); | 
 |  |  |                         } | 
 |  |  |                     }); |