| | |
| | | list-style:none; |
| | | float: left; |
| | | display: block; |
| | | border: #0e9aef 1px solid; |
| | | 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> |
| | |
| | | <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"> |
| | | <ul style="border: #0c7cb5 1px dashed;"> |
| | | <li>现金支付</li> |
| | | <li>微信</li> |
| | | <li>支付宝</li> |
| | | <li>银行卡支付</li> |
| | | <li>团购</li> |
| | | </ul> |
| | | |
| | | <ul> |
| | | <li>会员储值卡</li> |
| | | <li>欠款</li> |
| | | </ul> |
| | | <el-row> |
| | | <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-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> |
| | | |
| | |
| | | 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: {}, |
| | | |
| | |
| | | /******搜索表格数据END********/ |
| | | |
| | | dialogSettleVisible : true, |
| | | defaultProps: { |
| | | children: 'children', |
| | | label: 'label' |
| | | } |
| | | |
| | | }, |
| | | |
| | |
| | | callback: function (data) { |
| | | _this.currentVipInfo = data.rows[0]; |
| | | _this.order.vipId = _this.currentVipInfo.id; |
| | | _this.getVipMoneyCards(); |
| | | // _this.getVipMoneyCards(); |
| | | |
| | | } |
| | | }); |
| | |
| | | |
| | | |
| | | }, |
| | | payMethodSelect(item, index) { |
| | | this.$nextTick(function () { |
| | | if (item.isActive) { |
| | | Vue.set(item,'isActive',false); |
| | | } else { |
| | | Vue.set(item,'isActive',true); |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | |
| | | }) |