forked from beauty-erp
zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/order-form.html
@@ -75,6 +75,43 @@ .arrears { color: #E6A23C; } .paymethod ul { padding: 0; margin: 0; height: 50px; } .paymethod ul li { padding: 10px; margin: 5px; list-style:none; float: left; display: block; cursor: pointer; position: relative; border: white 1px solid; } .paymethod ul li:hover { border: #409EFF 1px solid; } .paymethod .active { border: #409EFF 1px solid; } .paymethod .active::after { content: ''; display: block; height: 0px; width: 0px; position: absolute; bottom: 0; right: 0; color:#fff; /**对号大小*/ font-size: 10px; line-height: 8px; border: 3px solid; border-color: transparent #4884ff #4884ff transparent; } </style> </head> <body> @@ -414,32 +451,58 @@ </el-drawer> <el-dialog title="收款" :visible.sync="dialogSettleVisible"> <el-row> <el-col :span="5">应收</el-col> <el-col :span="15"><span style="color: red;">¥ 80</span></el-col> <el-row type="flex" align="middle" style="padding: 10px 0;"> <el-col :span="5" style="text-align: center;">应收</el-col> <el-col :span="10" style="text-align: center; line-height: 50px;"><span style="color: red;">¥ 80</span></el-col> </el-row> <el-row> <el-col :span="5">收款方式</el-col> <el-col :span="15"></el-col> </el-row> <el-row> <el-col :span="5">支付金额</el-col> <el-col :span="15"> <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-row> <el-col :span="5">微信支付</el-col> <el-col :span="5"><el-input></el-input></el-col> </el-row> <el-row> <el-col :span="5">微信支付</el-col> <el-col :span="5"><el-input></el-input></el-col> </el-row> <el-row> <el-col :span="5">微信支付</el-col> <el-col :span="5"><el-input></el-input></el-col> <ul> <span v-for="(item, index) in payMethods"> <el-popover :disabled="item.type != 6" placement="bottom" 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 node-key="id" 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-popover> </span> </ul> </el-row> </el-col> </el-row> <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;" 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 style="text-align: center; margin: 20px 0 10px 0"> <el-checkbox>打印小票</el-checkbox> </el-row> <el-row style="text-align: center; margin: 10px 0 0 0"> <el-button type="primary" @click="submitPay">确认收款</el-button> </el-row> </el-dialog> @@ -487,24 +550,33 @@ currentVipInfo: {}, vipLoading: false, payMethods: [{ value: '现金', label: '现金' value: '现金支付', isActive: false, type: 1 }, { value: '微信', label: '微信' isActive: false, type: 2 }, { value: '支付宝', label: '支付宝' isActive: false, type: 3 }, { value: '银行卡', label: '银行卡' isActive: false, type: 4 }, { value: '美团', label: '美团' value: '团购', isActive: false, type: 5 }, { value: '会员卡', label: '会员卡', disabled: true, isActive: false, type: 6 }, { value: '欠款', isActive: false, type: 7 },], achieveList: [], //会员可用的充值卡 @@ -526,7 +598,13 @@ loading: false, /******搜索表格数据END********/ dialogSettleVisible : false, dialogSettleVisible : true, defaultProps: { children: 'children', label: 'showLable' }, treeSelect : [], payMoneys : [] }, @@ -604,7 +682,6 @@ } }); }, methods: { @@ -636,11 +713,6 @@ item.showLable = item.cardName + "-余额:" + (item.realMoney + item.giftMoney) }); _this.moneyCards = data.rows; //启用会员卡支付方式 _this.payMethods[5].disabled = false; } else { //禁用会员卡支付方式 _this.payMethods[5].disabled = true; } } @@ -1054,6 +1126,73 @@ }, payMethodSelect(item, index) { 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() { } } })
