| | |
| | | <meta http-equiv="Cache-Control" content="no-siteapp" /> |
| | | <LINK rel="Bookmark" href="../images/favicon.ico"> |
| | | <!-- 本框架基本脚本和样式 --> |
| | | <script type="text/javascript" |
| | | th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script> |
| | | <script type="text/javascript" |
| | | th:src="@{/js/systools/MBase.js}"></script> |
| | | |
| | | |
| | | <script type="text/javascript" th:src="@{/js/systools/MBaseVue.js}"></script> |
| | | <link rel="stylesheet" th:href="@{/plugin/element-ui/index.css}"> |
| | | <link th:href="@{/css/styleOne/style.min.css}" rel="stylesheet" type="text/css"/> |
| | | <title></title> |
| | | <style> |
| | | .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; |
| | | } |
| | | |
| | | .el-dialog__body { |
| | | padding-top: 10px !important; |
| | | } |
| | | </style> |
| | | </head> |
| | | <div class="ibox-content"> |
| | | <div class="panel-body" id="app"> |
| | | <el-dialog title="充值" :visible.sync="dialogSettleVisible" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false"> |
| | | <el-row type="flex" align="middle" style="padding: 0 0 10px 0;"> |
| | | <el-col :span="5" style="text-align: center;">充值金额</el-col> |
| | | <el-col :span="10" style="text-align: center; line-height: 50px;"> |
| | | <el-input v-model="rechargeMoney" placeholder="0.1元起充"></el-input> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <form th:if="${obj ne null }" class="form-horizontal" id="dataform" |
| | | onsubmit="javascripr:return false;"> |
| | | <input autocomplete="off" type="hidden" name="cardId" th:value="${obj.id }"> |
| | | <div class="form-group"> |
| | | <label class="col-sm-2 control-label">余额</label> |
| | | <div class="col-sm-4"> |
| | | <input autocomplete="off" type="text" class="form-control" th:value="${obj.realMoney}" |
| | | readonly="readonly"> |
| | | <div class="Validform_checktip"></div> |
| | | </div> |
| | | <label class="col-sm-2 control-label">充值时间</label> |
| | | <div class="col-sm-4"> |
| | | <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> |
| | | <ul> |
| | | <span v-for="(item, index) in payMethods"> |
| | | <li :class="{active : item.isActive}" @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> |
| | | </span> |
| | | </ul> |
| | | </el-row> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <input autocomplete="off" name="dateTime" type="text" datatype="*" |
| | | class="form-control datetimepicker" nullmsg="充值时间不能为空" |
| | | style="display: inline;" |
| | | th:value="${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd')}"> |
| | | <div class="Validform_checktip"></div> |
| | | </div> |
| | | <el-row type="flex" align="middle" style="padding: 10px 0 50px 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="6" 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="6" style="margin-left: 10px;" v-if="item.type == '储值卡'">{{item.isGift == 1 ? '赠送余额' : '余额' }}:<span class="arrears">¥ {{item.balance}}</span></el-col> |
| | | </el-row> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <el-row type="flex" align="middle" style="padding: 10px 0 50px 0;"> |
| | | <el-col :span="5" style="text-align: center;">业绩</el-col> |
| | | <el-col :span="16"> |
| | | <el-table class="mt-20" |
| | | :border="true" |
| | | :data="achieveList" |
| | | style="width: 100%"> |
| | | <el-table-column |
| | | type="index" |
| | | width="50"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="业绩" width="100"> |
| | | <template slot-scope="scope"> |
| | | <el-input v-model="scope.row.achieveMoney"></el-input> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="提成"> |
| | | <template slot-scope="scope"> |
| | | <el-input v-model="scope.row.commission"></el-input> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="员工" width="130"> |
| | | <template slot-scope="scope"> |
| | | <el-select v-model="scope.row.saleId" placeholder="请选择员工"> |
| | | <el-option |
| | | v-for="item in userList" |
| | | :key="item.suId" |
| | | :label="item.suName" |
| | | :value="item.suId"> |
| | | </el-option> |
| | | </el-select> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | width="150" |
| | | label="操作"> |
| | | <template slot-scope="scope"> |
| | | <el-button type="primary" v-if="scope.row.isShare" |
| | | size="mini" |
| | | @click="delAchieve(scope.$index, scope.row)">删除 |
| | | </el-button> |
| | | <el-tooltip content="分享业绩" placement="top"> |
| | | <el-button @click="shareAchieve(scope.$index, scope.row)" icon="el-icon-share" |
| | | size="mini" type="primary"></el-button> |
| | | </el-tooltip> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | </div> |
| | | <div class="form-group"> |
| | | <el-row style="text-align: center; margin: 20px 0 10px 0"> |
| | | <el-checkbox v-model="printPaper">打印小票</el-checkbox> |
| | | </el-row> |
| | | |
| | | <label class="col-sm-2 control-label">充值金额</label> |
| | | <div class="col-sm-4"> |
| | | <input autocomplete="off" type="text" class="form-control" name="bjmoney" value="0" |
| | | onchange="changePayMoney('p0',this)" |
| | | datatype="*" nullmsg="充值金额不能为空"> |
| | | <div class="Validform_checktip"></div> |
| | | <el-row style="text-align: center; margin: 10px 0 0 0"> |
| | | <el-button type="primary" @click="submitRecharge">确认收款</el-button> |
| | | <el-button type="danger" @click="cancelSubmit">取消</el-button> |
| | | </el-row> |
| | | </el-dialog> |
| | | </div> |
| | | |
| | | <label class="col-sm-2 control-label">赠送金额</label> |
| | | <div class="col-sm-4"> |
| | | <input autocomplete="off" type="text" class="form-control" value="0" dataType="n1-8" |
| | | name="giftMoney" /> |
| | | <div class="Validform_checktip"></div> |
| | | </div> |
| | | </div> |
| | | <div class="form-group"> |
| | | |
| | | <label class="col-sm-2 control-label">赠送积分</label> |
| | | <div class="col-sm-4"> |
| | | <input autocomplete="off" type="text" class="form-control" value="0" dataType="n1-8" |
| | | name="jf" /> |
| | | <div class="Validform_checktip"></div> |
| | | </div> |
| | | |
| | | <label class="col-sm-2 control-label">下单顾问</label> |
| | | <div class="col-sm-4"> |
| | | <select class="autoFull select2 " style="width: 100%" |
| | | th:data-url="@{/admin/getShopStaffByRoleName?roleName=健康顾问}" |
| | | data-value="suId" data-filed="suName" |
| | | th:data-def="${session.userInfo.suId }" name="staffId"> |
| | | </select> |
| | | </div> |
| | | |
| | | </div> |
| | | <div class="row "> |
| | | <div class="col-sm-10 pd-20 col-sm-offset-1"> |
| | | <div class="panel-body"> |
| | | <table class="table table-condensed "> |
| | | <thead> |
| | | <tr> |
| | | <th>序号</th> |
| | | <th>商品名称</th> |
| | | <th>分配金额</th> |
| | | <th>美疗师业绩</th> |
| | | <th>操作</th> |
| | | </tr> |
| | | </thead> |
| | | <tbody id="tbody2"> |
| | | <tr id="p0"> |
| | | <td>1</td> |
| | | <td>会籍卡充值</td> |
| | | <td>0</td> |
| | | <td> |
| | | <table class="table table-condensed "> |
| | | <tr> |
| | | <td><select class="autoFull select2 input-sm" style="width: 80px;" |
| | | th:data-url="@{/admin/getShopStaffByRoleName?roleName=美疗师}" |
| | | data-value="suId" data-filed="suName" |
| | | th:data-def="${session.userInfo.suId }" |
| | | name="achaeveList[0].beaultId"> |
| | | </select></td> |
| | | <td><input autocomplete="off" type="text" class="form-control input-sm" value="0" |
| | | style="width: 80px" name="achaeveList[0].t1"></td> |
| | | <td><button class="btn btn-danger btn-sm" |
| | | onclick="deleteBeaute(this)">删除</button></td> |
| | | </tr> |
| | | </table> |
| | | </td> |
| | | <td><a class="btn btn-default btn-sm" |
| | | onclick="addBeaute('p0','0')">添加</a></td> |
| | | </tr> |
| | | </tbody> |
| | | </table> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | <div class="form-group "> |
| | | <div class="col-sm-12 text-center"> |
| | | <a href="javascript:;" onclick="myForm.submit()" |
| | | class="btn btn-success radius">保存</a> |
| | | <button onclick="MTools.closeForm()" class="btn btn-danger radius" |
| | | type="button">取消</button> |
| | | </div> |
| | | </div> |
| | | </form> |
| | | </c:if> |
| | | <div th:if="${obj eq null }" class="text-center text-info"> |
| | | <h2>该会员没有可用的会员卡!</h2> |
| | | </div> |
| | | |
| | | </div> |
| | | <script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script><script type="text/javascript"> |
| | | $('.select2 ').select2(); |
| | | MTools.autoFullSelect(); |
| | | MTools.ininDatetimepicker({}); |
| | | var myForm = MForm.initForm({ |
| | | invokeUrl : basePath+"/admin/moneyCardUse/cz", |
| | | isAutoClose : false, |
| | | beforeSubmit : function() { |
| | | |
| | | //校验业绩 |
| | | var ifAchieveOk = true; |
| | | var achieveSum = 0; |
| | | $("#tbody2").children("tr").each( |
| | | function() { |
| | | var tr = $(this); |
| | | var pay = parseFloat(tr.find("td").eq(2).html()); |
| | | |
| | | tr.find("td").eq(3).find("table").find("tr").each( |
| | | function() { |
| | | var achieve = parseFloat($(this).find("td") |
| | | .eq(1).find("input").val()); |
| | | achieveSum += achieve; |
| | | }); |
| | | if (achieveSum > pay) { |
| | | ifAchieveOk = false; |
| | | } |
| | | }); |
| | | if(isNaN(achieveSum)){ |
| | | layer.msg("业绩金额格式错误", { |
| | | icon : 2 |
| | | }) |
| | | return false; |
| | | } |
| | | if (!ifAchieveOk) { |
| | | layer.msg("业绩金额不能大于支付金额", { |
| | | icon : 2 |
| | | }) |
| | | return false; |
| | | } |
| | | |
| | | <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/layer/layer.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/element-ui/index.js}"></script> |
| | | <script type="text/javascript" th:inline="javascript"> |
| | | //<![CDATA[ |
| | | var vue = new Vue({ |
| | | el: '#app', |
| | | data : { |
| | | cardInfo : "", |
| | | rechargeMoney : "", |
| | | 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: '团购' |
| | | }, ], |
| | | dialogSettleVisible : true, |
| | | defaultProps: { |
| | | children: 'children', |
| | | label: 'showLable' |
| | | }, |
| | | afterSubmit : function(loj) { |
| | | achieveList : [], |
| | | userList: [], |
| | | treeSelect : [], |
| | | payMoneys : [], |
| | | printPaper : false, |
| | | }, |
| | | created : function() { |
| | | let _this = this; |
| | | this.cardInfo = /*[[${obj}]]*/ |
| | | |
| | | //获取用户列表 |
| | | AjaxProxy.requst({ |
| | | app: _this, |
| | | url: basePath + '/admin/shopAll', |
| | | callback: function (data) { |
| | | _this.userList = data.rows; |
| | | } |
| | | }); |
| | | }, |
| | | methods : { |
| | | submitRecharge() { |
| | | let _this = this; |
| | | if (_this.payMoneys.length > 0) { |
| | | let flows = [] |
| | | var total = 0; |
| | | _this.payMoneys.forEach(item => { |
| | | let flow = {}; |
| | | flow.payMethod = item.type; |
| | | if (!item.money) { |
| | | this.$message.warning("请输入" + item.type + "的付款金额"); |
| | | return false; |
| | | } |
| | | flow.amount = item.money; |
| | | if (item.type == '储值卡'){ |
| | | flow.isGift = item.isGift; |
| | | flow.cardId = item.id; |
| | | } |
| | | total += item.money; |
| | | flows.push(flow) |
| | | }) |
| | | if (total > _this.order.arrears) { |
| | | this.$message.warning("输入付款总金额大于应还金额"); |
| | | return false; |
| | | } |
| | | _this.order.flows = flows; |
| | | } else { |
| | | this.$message.warning("请选择支付方式"); |
| | | return false; |
| | | } |
| | | |
| | | let url = basePath + "/admin/moneyCardUse/cz"; |
| | | |
| | | AjaxProxy.requst({ |
| | | app: _this, |
| | | data: _this.order, |
| | | url: url, |
| | | callback: function (data) { |
| | | if (_this.printPaper) { |
| | | _this.print(); |
| | | } |
| | | |
| | | if(parent.myGrid) { |
| | | parent.myGrid.serchData(); |
| | | } |
| | | |
| | | if (parent.app) { |
| | | parent.app.orderQuery(); |
| | | } |
| | | |
| | | _this.closeFrame(); |
| | | } |
| | | }); |
| | | }, |
| | | cancelSubmit() { |
| | | this.closeFrame(); |
| | | }, |
| | | print() { |
| | | let _this = this; |
| | | if (_this.order.id) { |
| | | layer.open({ |
| | | type: 2, |
| | | title: "打印订单", |
| | | area: ['250px', '550px'], |
| | | maxmin: true, |
| | | content: [basePath + '/admin/redirect/hive/beautySalon/print-order?id=' + loj.getResult().mapInfo.orderId], |
| | | cancel: function (index, layer) { |
| | | if (parent.app) { |
| | | parent.app.vipInfoFn(); |
| | | } else { |
| | | parent.selectByKey(); |
| | | } |
| | | MTools.closeForm(); |
| | | content: [basePath + '/admin/redirect/hive/beautySalon/print-order?id=' + this.order.id], |
| | | cancel: function (index, layero) { |
| | | _this.closeFram(); |
| | | } |
| | | }); |
| | | } else { |
| | | this.$message.warning("请先挂单在打印"); |
| | | } |
| | | |
| | | |
| | | }, |
| | | }); |
| | | |
| | | |
| | | |
| | | //添加一个美疗师 |
| | | function addBeaute(trId, itemIndex) { |
| | | if (!itemIndex) { |
| | | itemIndex = 0; |
| | | } |
| | | var id = MTools.randomStr(); |
| | | console.log(1); |
| | | var table = $("#" + trId).find("td").eq(3).find("table") |
| | | |
| | | var achieveIndex = $("#" + trId).find("td").eq(3).find("table").find( |
| | | "tr").length; |
| | | var html = '<tr> <td><select class="autoFull select2 input-sm" id="'+id+'" name="achaeveList['+achieveIndex+'].beaultId" ' |
| | | +'data-url="'+basePath+'/admin/getShopStaffByRoleName?roleName=美疗师" data-value="suId" data-filed="suName" data-def=""' |
| | | +'name="beatuyId"> </select></td> <td><input autocomplete="off" type="text" class="form-control input-sm" value="0" style="width: 80px" name="achaeveList['+achieveIndex+'].t1" ' |
| | | +'name="items['+achieveIndex+'].zkPrice" ></td> <td><button class="btn btn-danger btn-sm" onclick="deleteBeaute(this)" >删除</button></td> </tr>'; |
| | | $("#" + trId).find("td").eq(3).find("table").append(html); |
| | | $('#' + id).select2({ |
| | | 'width' : '80px' |
| | | }); |
| | | MTools.autoFullSelect({ |
| | | selecteder : '#' + id |
| | | }); |
| | | }; |
| | | //删除一个美疗师 |
| | | function deleteBeaute(node) { |
| | | $(node).closest("tr").remove(); |
| | | payMethodSelect(item, index) { |
| | | let _this = this; |
| | | let payMoneys = _this.payMoneys; |
| | | let rechargeMoney = _this.rechargeMoney; |
| | | if (!rechargeMoney) { |
| | | this.$message.warning("请输入充值金额"); |
| | | return; |
| | | } |
| | | |
| | | //修改收款金额 |
| | | function changePayMoney(trId, node) { |
| | | console.log(trId, node); |
| | | $("#" + trId).find("td").eq(2).html($(node).val()); |
| | | }; |
| | | if (rechargeMoney < 0.1) { |
| | | this.$message.warning("0.1元起充"); |
| | | return; |
| | | } |
| | | if (item.type != '储值卡') { |
| | | 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); |
| | | var hasAmount = 0; |
| | | for(var i = 0; i < payMoneys.length; i++) { |
| | | hasAmount += parseFloat(payMoneys[i].money); |
| | | } |
| | | if (_this.order.arrears - hasAmount > 0) { |
| | | Vue.set(item, 'money', _this.rechargeMoney - hasAmount); |
| | | } |
| | | _this.payMoneys.push(item); |
| | | } |
| | | }); |
| | | } |
| | | }, |
| | | closeFrame() { |
| | | parent.layer.close(parent.layer.getFrameIndex(window.name)); |
| | | }, |
| | | } |
| | | }); |
| | | //]]> |
| | | </script> |
| | | </body> |
| | | </html> |