manyi/static/app/js/device-param-100606.js

function PackageComponent(option) {
    var _el = option.el;
    var _package = option.package;

    this.app = new Vue({
        el: _el,
        template: `
<div>
    <h5 class="mui-content-padded">刷卡投币收费模式</h5>
    <div class="mui-input-group">
        <div class="mui-table-view-cell" v-for="(obj,index) in info['package']">
            <span>开始时间：{{obj.startTime}}</span>
            <span>单价：{{obj.unitPrice}}</span>
            <span>停车费：{{obj.parkingFee}}</span>
            <span>服务费：{{obj.serviceFee}}</span>
            <span class="mui-pull-right">
        <em v-on:click="editPackageRule(obj,index)" class="padding-t-b-10"><i class="iconfont icon-edit c-primary"></i>编辑</em>
        <em v-on:click="deletePackageRule(obj,index)" class="padding-t-b-10"><i
                class="iconfont icon-delete c-red"></i>删除</em></span>
        </div>
        <div class="mui-table-view-cell"
             v-on:click="addPackageRule()"><span><i class="iconfont icon-add c-success font-18"></i>添加</span></div>
    </div>

    <div class="edit-back packageDialog" v-bind:class="{ hidden: !info.dialogOpen }">
        <div class="edit-content">
            <div class="edit-box">
            
               <div class="mui-input-row">
                    <label>开始时间</label>
                    <div class="mui-pull-right edit-row">
                        <input type="time" step="1" v-model="info.dialogData.startTime"
                        />
                    </div>
                </div>
                <div class="mui-input-row">
                    <label>单价</label>
                    <div class="mui-pull-right edit-row">
                        <input type="number" min="0.00" step="0.01" maxlength="9" v-model="info.dialogData.unitPrice"
                        />
                        <span>元</span>
                    </div>
                </div>
                 <div class="mui-input-row">
                    <label>停车费</label>
                    <div class="mui-pull-right edit-row">
                        <input type="number" min="0.00" step="0.01" maxlength="9" v-model="info.dialogData.parkingFee"
                        />
                        <span>元</span>
                    </div>
                </div>  
                <div class="mui-input-row">
                    <label>服务费</label>
                    <div class="mui-pull-right edit-row">
                        <input type="number" min="0.00" step="0.01" maxlength="9" v-model="info.dialogData.serviceFee"
                        />
                        <span>元</span>
                    </div>
                </div>
            </div>
            <div class="mui-popup-buttons ">
                <span class="mui-popup-button" v-on:click="closeRulePanel()">取消</span>
                <span class="mui-popup-button mui-popup-button-bold" v-on:click="savePackageRule()">确认</span>
            </div>
        </div>
    </div>
</div>
        `
        ,
        data: {
            info: {
                dialogIndex: 0,
                dialogOpen: false,
                dialogData: {},

                package: [],
            },
        },

        mounted: function () {
            var that = this
            that.initPackages();
        },

        computed: {},

        filters: {},

        methods: {

            initPackages: function () {
                this.info.package = _package;
            },

            editPackageRule: function (obj, index) {
                this.info.dialogIndex = index;
                this.info.dialogOpen = true;
                this.info.dialogData = $.extend(true, {}, obj);

                $("body").addClass("over-hide");//避免滚动穿透，直接禁止body滚动
            },

            deletePackageRule: function (obj, index) {
                var that = this;
                var info = that.info
                info['package'].splice(index, 1);
            },

            closeRulePanel: function () {
                this.info.dialogOpen = false;
                $("body").removeClass("over-hide");//恢复body滚动
            },

            savePackageRule: function () {
                var that = this;
                var info = that.info
                var dialogData = info.dialogData;
                var packages = info['package']

                if (!dialogData.startTime) {
                    mui.toast("开始时间不能为空");
                    return;
                }

                if (!isMoney(dialogData.unitPrice)) {
                    mui.toast("单价不能为空");
                    return;
                }
                if (!isMoney(dialogData.parkingFee)) {
                    mui.toast("停车费不能为空");
                    return;
                }
                if (!isMoney(dialogData.serviceFee)) {
                    mui.toast("服务费不能为空");
                    return;
                }

                packages[info.dialogIndex] = $.extend(true, {}, info.dialogData);
                info.dialogOpen = false;
                $("body").removeClass("over-hide");//恢复body滚动
            },

            addPackageRule: function () {
                var that = this;
                var info = that.info
                var packages = info['package']
                info.dialogIndex = packages.length;
                info.dialogOpen = true;
                $("body").addClass("over-hide");//避免滚动穿透，直接禁止body滚动

                info.dialogData = {
                    startTime: "",
                    unitPrice: "",
                    parkingFee: "",
                    serviceFee: "",
                };
            },

        }
    });
}

PackageComponent.prototype.getPackage = function () {
    return this.app.info.package;
};