Helius
2021-01-06 149a4f21c685c33415bfb1ca71d55e4511afe104
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);
                    }
                });
            }
        }
    })