qimall/backend/modules/admin/views/addons/combo-edit.php

<style>
    .addons-cate {
        padding: 10px 0;
    }
    .addons-item {
        margin-bottom: 20px;
    }
    .el-checkbox.is-bordered+.el-checkbox.is-bordered {
        margin-left: 0;
    }
    .el-checkbox-group {
        font-size: 14px;
    }
</style>
<div id="app" v-cloak>
    <el-card v-loading="loading" style="border:0;min-width: 1200px;" shadow="never" body-style="background-color: #f3f3f3;padding: 0 0;">
        <el-form :model="ruleForm"
                 ref="ruleForm"
                 label-width="172px"
                 :rules="rules"
                 style="position: relative"
                 size="small">
            <el-card shadow="never" class="mt-24">
                <div slot="header">
                    <span>套餐编辑</span>
                </div>

                <el-form-item label="套餐名称" prop="title">
                    <el-col :span="12">
                        <el-input type="text" style="width: 350px;" v-model.trim="ruleForm.title"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="套餐说明">
                    <el-col :span="12">
                        <el-input
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 6}"
                                placeholder="请输入内容"
                                v-model="ruleForm.description">
                        </el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="应用有效期" prop="expire">
                    <el-col :span="12">
                        <el-checkbox v-model="ruleForm.expire.is_forever" style="margin-right: 10px;">永久有效</el-checkbox>
                        <template v-if="ruleForm.expire.is_forever == false">
                            <el-input style="width:150px" v-model="ruleForm.expire.duration" onInput="value=toNumber(value)"></el-input>
                            <el-select v-model="ruleForm.expire.unit" style="width: 64px;">
                                <el-option label="月" :value="1">月</el-option>
                                <el-option label="年" :value="2">年</el-option>
                            </el-select>
                        </template>
                    </el-col>
                </el-form-item>

                <el-form-item label="所有应用" prop="addons">
                    <el-col :span="24">
                        <el-alert
                                title="温情提示： 套餐新增或删除时，将对已使用该套餐的所有店铺产生影响， 请选择客户访问店铺时间较少的时段调整. 如：店铺已购买小票打印应用且应用的到期时间小于套餐到期时间，此时修改套餐将小票打印调整为免费时， 店铺购买的应用到期时间将保留，且标记“套餐内免费使用”，套餐到期之前可免费使用该应用. 如果再次修改套餐取消免费使用，则保留应用到期时间，应用过期后需要续费使用"
                                type="warning">
                        </el-alert>

                        <el-checkbox-group v-model="ruleForm.addons">
                            <div v-for="(item, key) in addons_list" :key="key">
                                <p class="addons-cate">{{ item.title }}</p>
                                <div>
                                    <el-checkbox class="addons-item" v-for="(addon, index) in item.list" :key="index" size="medium" :label="addon.name" border>{{ addon.title }}</el-checkbox>
                                </div>
                            </div>
                        </el-checkbox-group>
                    </el-col>
                </el-form-item>

                <el-form-item>
                    <el-col :span="12">
                        <el-button :loading="submitLoading" size="small" type="primary"
                                   @click="submit('ruleForm')">保存
                        </el-button>
                    </el-col>
                </el-form-item>
            </el-card>

        </el-form>
    </el-card>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                submitLoading: false,
                ruleForm: {
                    title: null,
                    description: null,
                    addons: [],
                    expire: {
                        is_forever: true,
                        duration: 1,
                        unit: 1
                    }
                },
                addons_list: {},
                rules: {
                    title: [
                        { required: true, message: '请输入套餐名称', trigger: 'blur' },
                        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                    ],
                    description: [
                        { required: true, message: '请输入套餐说明', trigger: 'blur' },
                        { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
                    ],
                    addons: [
                        { type: 'array', required: true, message: '请至少选择一个应用', trigger: 'blur' }
                    ],
                }
            };
        },
        created() {
            this.loadData();
        },
        methods: {
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'admin/addons/combo-edit',
                        id: getQuery('id')
                    },
                    method: 'get',
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        if (e.data.data) {
                            if (!isEmpty(e.data.data.detail)) {
                                this.ruleForm = e.data.data.detail;
                                this.ruleForm.addons = JSON.parse(this.ruleForm.addons);
                                this.ruleForm.expire = JSON.parse(this.ruleForm.expire);
                            }
                            if (!isEmpty(e.data.data.addons_list)) this.addons_list = e.data.data.addons_list;
                        }
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                });
            },
            submit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.submitLoading = true;
                        this.ruleForm.id = getQuery('id');
                        this.ruleForm.addons = JSON.stringify(this.ruleForm.addons);
                        this.ruleForm.expire = JSON.stringify(this.ruleForm.expire);
                        request({
                            params: {
                                r: 'admin/addons/combo-edit',
                            },
                            method: 'post',
                            data: {
                                detail: this.ruleForm
                            },
                        }).then(e => {
                            this.submitLoading = false;
                            if (e.data.code === 0) {
                                this.$message.success(e.data.msg);

                                navigateTo({
                                    r: 'admin/addons/combo'
                                })
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        },
        computed: {

        }
    });
</script>