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

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

    function getCommonPackagesRenderTemp() {
        return `
<!--        <h5 class="mui-content-padded">刷卡金额</h5>-->
<!--        <div class="mui-input-group">-->
<!--            <div class="mui-input-row">-->
<!--                <label class="">刷卡金额：</label>-->
<!--                <input type="text" class="save-data padding-r-35">-->
<!--                <span class="mini-unit">元</span>-->
<!--            </div>-->
<!--        </div>-->
        <h5 class="mui-content-padded">刷卡套餐配置</h5>
        <div class="package-list mui-input-group margin-t-10">
            <div class="mui-table-view-cell" v-for="(obj,index) in info.packages" :class="{'fade-node':!obj.switch}">
                <div class="p-title-row">
                    <div class="p-title">
                        <span>{{obj.name}} </span>
                        <span class="mark online">{{obj.cardFee}}分</span>
                        <span class="mark mark-blue">{{obj.cardMin}}{{unitMap[obj.unit] ? unitMap[obj.unit] : ""}}</span>
                    </div>
                    <div class="switch switch-mini" :class="{active:obj.switch}" @tap="tapSubSwitch($event,obj)">
                        <div class="switch-handle"></div>
                    </div>
                </div>
                <div class="font-b-14-6 padding-t-10" v-if="obj.description"><template> 套餐详情：<span class="font-b-14-8">{{obj.description}}</span></template></div>
                <div class="font-b-14 padding-t-20" :class="{'c-green':obj.switch,'c-lgreen':!obj.switch}">
                    <div class="btn-group" style="display: inline-block" permission="manage-show">
                        <em v-on:click="editPackageRule(obj,index)" class=""><i class="iconfont icon-edit c-primary"></i></em>
                        <em v-on:click="deletePackageRule(obj,index)"><i
                                class="iconfont icon-delete c-red"></i></em></div>
                    <div class="mui-pull-right">
                    {{obj.switch ? '套餐已启用' : '套餐未启用'}}
                    </div>
                </div>
            </div>
<!--            <div class="mui-table-view-cell" permission="manage-show"-->
<!--                 v-on:click="addPackageRule()"><span><i class="iconfont icon-add c-success font-18"></i>添加</span></div>-->
        </div>
        `
    }

    function getCommonPackageEditDialogTemp() {
        return `
         <div class="edit-back edit-bottom " v-bind:class="{ hidden: !info.dialogOpen }">
            <div class="edit-content" style="height: 60%">
                <div class="edit-box">
                    <div class="mui-input-row">
                        <label>名称</label>
                        <div class="mui-pull-right edit-row">
                            <input type="text" maxlength="20" v-model="info.dialogData.name"
                                   placeholder="请输入名称"/>
                        </div>
                    </div>

                    <div class="mui-input-row ">
                            <label>支付</label>
                            <div class="mui-pull-right edit-row">
                                <input type="number" maxlength="5" v-model="info.dialogData.cardFee"
                                />
                                <span class="font-b-6">分</span>
                            </div>
                    </div>

                    <div class="mui-input-row">
                            <label>
                                <span>获得</span>
                            </label>
                            <div class="mui-pull-right edit-row">
                                <input type="number" maxlength="5" v-model="info.dialogData.cardMin"/>
                                <span class="event-unit">{{unitMap[info.dialogData.unit] ? unitMap[info.dialogData.unit] : ""}}</span>
                            </div>
                     </div>
                     
                     <div class="mui-input-row">
                            <label>
                                <span>单位</span>
                            </label>
                            <div class="mui-pull-right mui-radio">
                                <span class="font-b-14"><input name="litre" type="radio" value="time" v-model="info.dialogData.unit">分钟</span>
                                <span class="font-b-14"><input name="litre" type="radio" value="second" v-model="info.dialogData.unit">秒</span>
                                <span class="font-b-14 "><input name="litre" type="radio" value="litre" v-model="info.dialogData.unit">0.1升</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>
        `
    }


    var vueConfig = ({
        el: _el,
        template: `
<div class="package-component">
    <template>
        ${getCommonPackagesRenderTemp()}
        ${getCommonPackageEditDialogTemp()}
    </template>
</div>
        `,
        data: {
            unitMap: {
                time: "分钟",
                second: "秒",
                litre: "0.1升",
            },
            info: {
                unit: "second",
                packages: [],
                dialogIndex: 0,
                dialogOpen: false,
                dialogData: {},

                cardFee: "",
            },
        },

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

        methods: {
            getBaseConfig() {
                var info = this.info
                var reObj = {
                    cardFee: info.cardFee
                };
                return reObj
            },

            adapterPackagesData: function (opt) {
                var packages = opt.packages || this.info.packages

                for (var index in packages) {
                    var item = packages[index]
                    if (!item.unit) {
                        item.unit = this.info.unit
                    }

                    if (item.switch === null || item.switch === undefined) {
                        item.switch = false
                    }
                }

                this.info.packages = packages
            },

            tapSubSwitch: function ($evt, obj) {
                if (obj.switch) {
                    mui.toast("已经启用");
                }
                $evt && $evt.stopPropagation();
                this.info.packages.forEach(item => {
                    item.switch = false;
                })
                obj.switch = true;
            },

            initPackages: function () {
                //初始化先适配数据，主要是为了适配单位、还有默认开关
                this.adapterPackagesData(option);
            },

            getDefaultPackageItem() {
                let obj = {
                    switch: true,
                    name: "",
                    cardFee: "",
                    unit: this.info.unit,
                    cardMin: '',
                };
                return obj
            },

            addPackageRule: function () {
                this.info.dialogIndex = this.info.packages.length;
                this.info.dialogOpen = true;
                $("body").addClass("over-hide");//避免滚动穿透，直接禁止body滚动
                this.info.dialogData = this.getDefaultPackageItem();
            },

            editPackageRule: function (obj, index) {
                this.info.dialogIndex = index;
                this.info.dialogOpen = true;
                this.info.dialogData = $.extend(true, this.getDefaultPackageItem(), obj)
                $("body").addClass("over-hide");//避免滚动穿透，直接禁止body滚动
            },

            deletePackageRule: function (obj, index) {
                var that = this;
                var tnArray = ['取消', '确认'];
                mui.confirm('确定要删除该套餐？', '温馨提示', tnArray, function (e) {
                    if (e.index == 0) {
                    } else {
                        //点击确认业务
                        that.info.packages.splice(index, 1);
                    }
                });
            },

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

            savePackageRule: function () {
                var dialogData = this.info.dialogData;

                if (!this.checkName()) {
                    return;
                }

                if (!isMoney(dialogData.cardFee)) {
                    mui.toast("支付价格填写不正确");
                    return;
                }
                if (dialogData.cardMin === "" || dialogData.cardMin == null || dialogData.cardMin <= 0) {
                    mui.toast(`"获得"不正确，必须为大于0的数字`);
                    return;
                }
                if (!dialogData.unit) {
                    mui.toast("请选择单位");
                    return;
                }

                this.info.unit = dialogData.unit;
                let list = this.info.packages;
                let index = this.info.dialogIndex;
                let newRow = $.extend(true, {}, this.info.dialogData);
                list.splice(index, 1, newRow);
                this.tapSubSwitch(null, newRow);// 编辑的最后一个为启用

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

            checkName() {
                let dialogData = this.info.dialogData;
                if (!dialogData.name) {
                    mui.toast("名称不能为空");
                    return false;
                }
                return true
            },
        }
    });
    this.app = new Vue(vueConfig);
}

PackageComponent.prototype.getPackages = function () {
    return this.app.info.packages;
};

PackageComponent.prototype.getBaseConfig = function () {
    if (this.app.getBaseConfig) {
        return this.app.getBaseConfig();
    }
    return {}
};

/******************************************分割线**************************************************************/
function PackageComponent2(option) {
    var _el = option.el;

    function getCommonPackagesRenderTemp() {
        return `
        <h5 class="mui-content-padded">投币套餐配置</h5>
        <div class="package-list mui-input-group margin-t-10">
            <div class="mui-table-view-cell" v-for="(obj,index) in info.packages" :class="{'fade-node':!obj.switch}">
                <div class="p-title-row">
                    <div class="p-title">
                        <span>{{obj.name}} </span>
                        <span class="mark mark-blue">单位{{unitMap[obj.unit]}}</span>
                    </div>
                    <div class="switch switch-mini" :class="{active:obj.switch}" @tap="tapSubSwitch($event,obj)">
                        <div class="switch-handle"></div>
                    </div>
                </div>
                <div class="font-b-14-6 padding-t-10" v-if="obj.description"><template> 套餐详情：<span class="font-b-14-8">{{obj.description}}</span></template></div>
                <div class="font-b-14 padding-t-20" :class="{'c-green':obj.switch,'c-lgreen':!obj.switch}">
                    <div class="btn-group" style="display: inline-block" permission="manage-show">
                        <em v-on:click="editPackageRule(obj,index)" class=""><i class="iconfont icon-edit c-primary"></i></em>
                        <em v-on:click="deletePackageRule(obj,index)"><i
                                class="iconfont icon-delete c-red"></i></em></div>
                    <div class="mui-pull-right">
                        {{obj.switch ? '套餐已启用' : '套餐未启用'}}
                    </div>
                </div>
            </div>
<!--            <div class="mui-table-view-cell" permission="manage-show"-->
<!--                 v-on:click="addPackageRule()"><span><i class="iconfont icon-add c-success font-18"></i>添加</span></div>-->
        </div>
        `
    }

    function getCommonPackageEditDialogTemp() {
        return `
         <div class="edit-back edit-bottom " v-bind:class="{ hidden: !info.dialogOpen }">
            <form class="edit-content" ref="form">
                <div class="edit-box">
                    <div class="mui-input-row">
                        <label>名称</label>
                        <div class="mui-pull-right edit-row">
                            <input type="text" maxlength="20" v-model="info.dialogData.name" required
                                   placeholder="请输入名称"/>
                        </div>
                    </div>

                    <template v-for="index in 6">
                        <div class="mui-input-row">
                         <label>第{{index}}档价格</label>
                         <div class="mui-pull-right edit-row">
                             <input type="number" inputmode="decimal" maxlength="5" v-model="info.dialogData['power'+(index)+'Price']" required min="0"/>
                             <span class="font-b-6 ">分</span>
                         </div>
                        </div>
                        <div class="mui-input-row">
                         <label>第{{index}}档获得</label>
                         <div class="mui-pull-right edit-row">
                             <input type="number" inputmode="decimal" maxlength="5" v-model="info.dialogData['power'+(index)+'Matter']" required min="0"/>
                              <span class="font-b-6 ">{{unitMap[info.dialogData.unit]}}</span>
                         </div>
                        </div>
                    </template>
                    
                    <div class="mui-input-row">
                            <label>
                                <span>单位</span>
                            </label>
                            <div class="mui-pull-right mui-radio">
                                <span class="font-b-14"><input name="r2" type="radio" value="time" v-model="info.dialogData.unit" required>分钟</span>
                                <span class="font-b-14"><input name="r2" type="radio" value="second" v-model="info.dialogData.unit" required>秒</span>
                                <span class="font-b-14 "><input name="r2" type="radio" value="litre" v-model="info.dialogData.unit">0.1升</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>
            </form>
        </div>
        `
    }


    var vueConfig = ({
        el: _el,
        template: `
<div class="package-component">
    <template>
        ${getCommonPackagesRenderTemp()}
        ${getCommonPackageEditDialogTemp()}
    </template>
</div>
        `,
        data: {
            unitMap: {
                time: "分钟",
                second: "秒",
                litre: "0.1升",
            },
            info: {
                unit: "second",
                packages: [],
                dialogIndex: 0,
                dialogOpen: false,
                dialogData: {},

                cardFee: "",
            },
        },

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

        methods: {
            adapterPackagesData: function (opt) {
                var packages = opt.packages || this.info.packages

                for (var index in packages) {
                    var item = packages[index]
                    if (!item.unit) {
                        item.unit = this.info.unit
                    }

                    if (item.switch === null || item.switch === undefined) {
                        item.switch = false
                    }
                }

                this.info.packages = packages
            },

            tapSubSwitch: function ($evt, obj) {
                if (obj.switch) {
                    mui.toast("已经启用");
                }
                $evt && $evt.stopPropagation();
                this.info.packages.forEach(item => {
                    item.switch = false;
                })
                obj.switch = true;
            },

            initPackages: function () {
                //初始化先适配数据，主要是为了适配单位、还有默认开关
                this.adapterPackagesData(option);
            },

            getDefaultPackageItem() {
                let obj = {
                    switch: true,
                    name: "",
                    unit: this.info.unit,
                    cardMin: '',
                };
                return obj
            },

            addPackageRule: function () {
                this.info.dialogIndex = this.info.packages.length;
                this.info.dialogOpen = true;
                $("body").addClass("over-hide");//避免滚动穿透，直接禁止body滚动
                this.info.dialogData = this.getDefaultPackageItem();
            },

            editPackageRule: function (obj, index) {
                this.info.dialogIndex = index;
                this.info.dialogOpen = true;
                this.info.dialogData = $.extend(true, this.getDefaultPackageItem(), obj)
                $("body").addClass("over-hide");//避免滚动穿透，直接禁止body滚动
            },

            deletePackageRule: function (obj, index) {
                var that = this;
                var tnArray = ['取消', '确认'];
                mui.confirm('确定要删除该套餐？', '温馨提示', tnArray, function (e) {
                    if (e.index == 0) {
                    } else {
                        //点击确认业务
                        that.info.packages.splice(index, 1);
                    }
                });
            },

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

            savePackageRule: function () {
                var dialogData = this.info.dialogData;
                let flag = this.$refs.form.reportValidity()
                if (!flag) {
                    return
                }

                this.info.unit = dialogData.unit;
                let list = this.info.packages;
                let index = this.info.dialogIndex;
                let newRow = $.extend(true, {}, this.info.dialogData);
                list.splice(index, 1, newRow);
                this.tapSubSwitch(null, newRow);// 编辑的最后一个为启用

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

        }
    });
    this.app = new Vue(vueConfig);
}

PackageComponent2.prototype.getPackages = function () {
    return this.app.info.packages;
};