From 149a4f21c685c33415bfb1ca71d55e4511afe104 Mon Sep 17 00:00:00 2001 From: Helius <wangdoubleone@gmail.com> Date: Wed, 06 Jan 2021 18:58:20 +0800 Subject: [PATCH] modify --- zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/order-form.html | 169 +++++++++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 136 insertions(+), 33 deletions(-) diff --git a/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/order-form.html b/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/order-form.html index deb7edd..2e32d03 100644 --- a/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/order-form.html +++ b/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,63 @@ </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> + <div v-for="(item, index) in payMethods"> + <el-popover + :disabled="item.type != 1" + placement="bottom" + width="200" + trigger="click"> + <el-tree :data="moneyCards" + show-checkbox + default-expand-all + node-key="id" + ref="tree" + highlight-current + :props="defaultProps"> + </el-tree> + <li :class="{active : item.isActive}" @click="payMethodSelect(item, index)" slot="reference">{{item.value}}</li> + </el-popover> + </div> + </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;"> + <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> + </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">确认收款</el-button> </el-row> </el-dialog> @@ -487,28 +555,50 @@ currentVipInfo: {}, vipLoading: false, payMethods: [{ - value: '现金', - label: '现金' + value: '现金支付', + isActive: false }, { value: '微信', - label: '微信' + isActive: false }, { value: '支付宝', - label: '支付宝' + isActive: false }, { value: '银行卡', - label: '银行卡' + isActive: false }, { - value: '美团', - label: '美团' + value: '团购', + isActive: false }, { value: '会员卡', - label: '会员卡', - disabled: true, + isActive: false, + type: 1 + }, { + value: '欠款', + isActive: false },], achieveList: [], //会员可用的充值卡 - moneyCards: [], + moneyCards: [ + { + id: 1, + label: '一级 1', + children: [{ + id: 4, + label: '二级 1-1', + children: [] + }] + }, + { + id: 2, + label: '一级 2', + children: [{ + id: 3, + label: '二级 2-1', + children: [] + }] + } + ], //门店信息 shopInfo: {}, @@ -526,7 +616,11 @@ loading: false, /******搜索表格数据END********/ - dialogSettleVisible : false, + dialogSettleVisible : true, + defaultProps: { + children: 'children', + label: 'label' + } }, @@ -1016,7 +1110,7 @@ callback: function (data) { _this.currentVipInfo = data.rows[0]; _this.order.vipId = _this.currentVipInfo.id; - _this.getVipMoneyCards(); + // _this.getVipMoneyCards(); } }); @@ -1054,6 +1148,15 @@ }, + payMethodSelect(item, index) { + this.$nextTick(function () { + if (item.isActive) { + Vue.set(item,'isActive',false); + } else { + Vue.set(item,'isActive',true); + } + }); + } } }) -- Gitblit v1.9.1