|  |  | 
 |  |  |                     <ul> | 
 |  |  |                         <span v-for="(item, index) in payMethods"> | 
 |  |  |                             <el-popover | 
 |  |  |                                     :disabled="item.type != 1" | 
 |  |  |                                     :disabled="item.type != 6" | 
 |  |  |                                     placement="bottom" | 
 |  |  |                                     trigger="click"> | 
 |  |  |                                 <el-row><span>选择</span></el-row> | 
 |  |  |                                     trigger="hover" | 
 |  |  |                                     @hide="popoverHide(item)"> | 
 |  |  |                                 <el-row style="text-align: center;"><span style="padding: 0 0 10px 0; display: block; font-size: 12px;">选择会员卡支付方式</span></el-row> | 
 |  |  |                                 <el-tree :data="moneyCards" | 
 |  |  |                                         show-checkbox | 
 |  |  |                                         default-expand-all | 
 |  |  | 
 |  |  |                                         ref="tree" | 
 |  |  |                                          check-strictly | 
 |  |  |                                          highlight-current | 
 |  |  |                                          @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> | 
 |  |  | 
 |  |  |         <el-row type="flex" align="middle" style="padding: 10px 0;"> | 
 |  |  |             <el-col :span="5" style="text-align: center;">支付金额</el-col> | 
 |  |  |             <el-col :span="15"> | 
 |  |  |                 <el-row style="line-height: 50px;"> | 
 |  |  |                     <el-col :span="5" style="text-align: right; padding-right: 10px;">微信支付</el-col> | 
 |  |  |                     <el-col :span="8"><el-input></el-input></el-col> | 
 |  |  |                 </el-row> | 
 |  |  |                 <el-row style="line-height: 50px;"> | 
 |  |  |                     <el-col :span="5" style="text-align: right; padding-right: 10px;">储值卡</el-col> | 
 |  |  |                     <el-col :span="8"><el-input></el-input></el-col> | 
 |  |  |                     <el-col :span="5" style="margin-left: 10px;">余额:<span class="arrears">¥ 1000</span></el-col> | 
 |  |  |                 </el-row> | 
 |  |  |                 <el-row style="line-height: 50px;"> | 
 |  |  |                     <el-col :span="5" style="text-align: right; padding-right: 10px;">欠款</el-col> | 
 |  |  |                     <el-col :span="8"><el-input></el-input></el-col> | 
 |  |  |                 <el-row style="line-height: 50px;" v-for="(item, index) in payMoneys"> | 
 |  |  |                     <el-col :span="5" style="text-align: right; padding-right: 10px; font-size: 12px;">{{item.value}}</el-col> | 
 |  |  |                     <el-col :span="8"><el-input v-model="item.money"></el-input></el-col> | 
 |  |  |                     <el-col :span="5" style="margin-left: 10px;" v-if="item.type == 6">余额:<span class="arrears">¥ {{item.balance}}</span></el-col> | 
 |  |  |                 </el-row> | 
 |  |  |             </el-col> | 
 |  |  |         </el-row> | 
 |  |  | 
 |  |  |         </el-row> | 
 |  |  |  | 
 |  |  |         <el-row style="text-align: center; margin: 10px 0 0 0"> | 
 |  |  |             <el-button type="primary">确认收款</el-button> | 
 |  |  |             <el-button type="primary" @click="submitPay">确认收款</el-button> | 
 |  |  |         </el-row> | 
 |  |  |     </el-dialog> | 
 |  |  |  | 
 |  |  | 
 |  |  |             vipLoading: false, | 
 |  |  |             payMethods: [{ | 
 |  |  |                 value: '现金支付', | 
 |  |  |                 isActive: false | 
 |  |  |             }, { | 
 |  |  |                 value: '微信', | 
 |  |  |                 isActive: false | 
 |  |  |             }, { | 
 |  |  |                 value: '支付宝', | 
 |  |  |                 isActive: false | 
 |  |  |             }, { | 
 |  |  |                 value: '银行卡', | 
 |  |  |                 isActive: false | 
 |  |  |             }, { | 
 |  |  |                 value: '团购', | 
 |  |  |                 isActive: false | 
 |  |  |             }, { | 
 |  |  |                 value: '会员卡', | 
 |  |  |                 isActive: false, | 
 |  |  |                 type: 1 | 
 |  |  |             }, { | 
 |  |  |                 value: '微信', | 
 |  |  |                 isActive: false, | 
 |  |  |                 type: 2 | 
 |  |  |             }, { | 
 |  |  |                 value: '支付宝', | 
 |  |  |                 isActive: false, | 
 |  |  |                 type: 3 | 
 |  |  |             }, { | 
 |  |  |                 value: '银行卡', | 
 |  |  |                 isActive: false, | 
 |  |  |                 type: 4 | 
 |  |  |             }, { | 
 |  |  |                 value: '团购', | 
 |  |  |                 isActive: false, | 
 |  |  |                 type: 5 | 
 |  |  |             }, { | 
 |  |  |                 value: '会员卡', | 
 |  |  |                 isActive: false, | 
 |  |  |                 type: 6 | 
 |  |  |             }, { | 
 |  |  |                 value: '欠款', | 
 |  |  |                 isActive: false | 
 |  |  |                 isActive: false, | 
 |  |  |                 type: 7 | 
 |  |  |             },], | 
 |  |  |             achieveList: [], | 
 |  |  |             //会员可用的充值卡 | 
 |  |  | 
 |  |  |             defaultProps: { | 
 |  |  |                 children: 'children', | 
 |  |  |                 label: 'showLable' | 
 |  |  |             } | 
 |  |  |             }, | 
 |  |  |             treeSelect : [], | 
 |  |  |             payMoneys : [] | 
 |  |  |  | 
 |  |  |         }, | 
 |  |  |  | 
 |  |  | 
 |  |  |  | 
 |  |  |             }, | 
 |  |  |             payMethodSelect(item, index) { | 
 |  |  |                 this.$nextTick(function () { | 
 |  |  |                     if (item.isActive) { | 
 |  |  |                         Vue.set(item,'isActive',false); | 
 |  |  |                     } else { | 
 |  |  |                         Vue.set(item,'isActive',true); | 
 |  |  |                 let _this = this; | 
 |  |  |                 let payMoneys = _this.payMoneys; | 
 |  |  |                 if (item.type != 6) { | 
 |  |  |                     this.$nextTick(function () { | 
 |  |  |                         if (item.isActive) { | 
 |  |  |                             Vue.set(item,'isActive',false); | 
 |  |  |                             var index = -1; | 
 |  |  |                             for (var i = 0; i < payMoneys.length; i++) { | 
 |  |  |                                 let payMoney = payMoneys[i]; | 
 |  |  |                                 if (payMoney.value == item.value) { | 
 |  |  |                                     index = i; | 
 |  |  |                                     break; | 
 |  |  |                                 } | 
 |  |  |                             } | 
 |  |  |  | 
 |  |  |                             if (index > -1) { | 
 |  |  |                                 _this.payMoneys.splice(index, 1) | 
 |  |  |                             } | 
 |  |  |                         } else { | 
 |  |  |                             Vue.set(item,'isActive',true); | 
 |  |  |                             _this.payMoneys.push(item); | 
 |  |  |                         } | 
 |  |  |                     }); | 
 |  |  |                 } | 
 |  |  |             }, | 
 |  |  |             popoverHide(item) { | 
 |  |  |                 if(this.treeSelect.length <= 0) { | 
 |  |  |                     Vue.set(item, 'isActive', false) | 
 |  |  |                 } else { | 
 |  |  |                     Vue.set(item, 'isActive', true) | 
 |  |  |                 } | 
 |  |  |             }, | 
 |  |  |             handleCheckChange(click, checked) { | 
 |  |  |                 let _this = this; | 
 |  |  |                 let selectNodes = checked.checkedNodes; | 
 |  |  |                 this.treeSelect = selectNodes; | 
 |  |  |  | 
 |  |  |                 let payMoneys = this.payMoneys; | 
 |  |  |                 for(var i = 0; i < payMoneys.length; i++) { | 
 |  |  |                     if(payMoneys[i].type == 6) { | 
 |  |  |                         _this.payMoneys.splice(i, 1); | 
 |  |  |                     } | 
 |  |  |                 }); | 
 |  |  |                 } | 
 |  |  |  | 
 |  |  |                 for(var i = 0; i < selectNodes.length; i++) { | 
 |  |  |                     var node = selectNodes[i]; | 
 |  |  |                     var item = {}; | 
 |  |  |                     item.value = node.cardName; | 
 |  |  |                     item.balance = node.money; | 
 |  |  |                     item.isGift = 0; | 
 |  |  |                     item.type = 6; | 
 |  |  |                     item.id = node.id; | 
 |  |  |                     if (node.giftMoney != 0) { | 
 |  |  |                         var giftItem = {}; | 
 |  |  |                         giftItem.value = node.cardName + "赠送金额"; | 
 |  |  |                         giftItem.id = node.id; | 
 |  |  |                         giftItem.balance = node.giftMoney; | 
 |  |  |                         giftItem.isGift = 1; | 
 |  |  |                         giftItem.type = 6; | 
 |  |  |                         _this.payMoneys.push(giftItem); | 
 |  |  |                     } | 
 |  |  |                     _this.payMoneys.push(item); | 
 |  |  |                 } | 
 |  |  |             }, | 
 |  |  |             submitPay() { | 
 |  |  |             } | 
 |  |  |         } | 
 |  |  |  |