qimall/addons/Clockin/backend/views/default/setting.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-rich-text');
?>
<div id="app" v-cloak>
    <el-card class="box-card" v-loading="loading" shadow="never" style="border:0;min-width: 1500px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div>
                <span>基础设置</span>
            </div>
        </div>
        <div class="form_box">
            <el-form :model="ruleForm" size="small" ref="ruleForm" label-width="150px">
                <el-card shadow="never">
                    <div slot="header">
                        <div>
                            <span>打卡设置</span>
                        </div>
                    </div>
                    <div>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="启用设置">
                                    <el-switch v-model="ruleForm.is_enable" :active-value="1" :inactive-value="0"></el-switch>
                                    <div class="tips-text" style="line-height: 24px;">关闭后将无法使用此功能</div>
                                </el-form-item>

                                <el-form-item label="按等级解锁">
                                    <el-switch v-model="ruleForm.is_seniority" :active-value="1" :inactive-value="0"></el-switch>
                                    <div class="tips-text" style="line-height: 24px;">关闭后将不再限制等级参与</div>
                                </el-form-item>

                                <el-form-item label="参与资格" v-if="ruleForm.is_seniority == 1">
                                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                                    <div style="margin: 15px 0;"></div>
                                    <el-checkbox-group v-model="ruleForm.seniority" @change="handleCheckedChange">
                                        <el-checkbox v-for="item in levels" :label="item.level" :key="item.level">{{ item.name }}</el-checkbox>
                                    </el-checkbox-group>
                                    <div class="tips-text" style="line-height: 24px;">只有勾选到的会员等级才有资格参与任务打卡</div>
                                </el-form-item>

                                <el-form-item label="是否奖励">
                                    <el-switch v-model="ruleForm.is_reward" :active-value="1" :inactive-value="0"></el-switch>
                                    <div class="tips-text" style="line-height: 24px;">关闭后参与打卡的会员也不再赠送奖励</div>
                                </el-form-item>

                                <el-form-item label="默认额度设置">
                                    <div v-for="(reward_score, key) in ruleForm.default_score" :key="key">
                                        <el-input v-model="ruleForm.default_score[key]" style="width: 200px;" onInput="value=toNumber(value,2)"><template slot="append">积分</template></el-input>
                                        <el-button type="text" @click="handle('delete',key)" style="margin-left: 10px;">删除</el-button>
                                    </div>
                                    <el-button type="text" @click="handle('add')">+添加积分额度</el-button>
                                    <div class="tips-text" style="line-height: 24px;">审核通过时显示的默认奖励积分，作用仅用于方便后台审核</div>
                                </el-form-item>

                                <el-form-item label="积分奖励上限">
                                    <el-input v-model="ruleForm.reward_limit" style="width: 200px;">
                                        <template slot="append">积分</template>
                                    </el-input>
                                    <div class="tips-text" style="line-height: 24px;">会员打卡累计奖励积分达到此值的时候将不再奖励积分</div>
                                </el-form-item>
                                <el-form-item label="显示积分奖励上限">
                                    <el-switch v-model="ruleForm.is_show_reward_limit" :active-value="1" :inactive-value="0"></el-switch>
                                    <div class="tips-text" style="line-height: 24px;">关闭后前端不显示积分奖励上限</div>
                                </el-form-item>

                                <el-form-item label="上传图片数量限制">
                                    <el-input-number v-model="ruleForm.upload_limit" :min="1" :max="9" label="图片数量"></el-input-number>
                                    <div class="tips-text" style="line-height: 24px;">会员可上传的最大截图数量</div>
                                </el-form-item>

                                <el-form-item label="活动详情">
                                    <com-rich-text style="width: 750px" v-model="ruleForm.explain"></com-rich-text>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-form>
            <el-button :loading="btnLoading" class="button-item" type="primary" style="margin-top: 24px;" @click="store('ruleForm')" size="small">保存
            </el-button>
        </div>

    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                checkAll: false,
                isIndeterminate: false,
                loading: false,
                btnLoading: false,
                ruleForm: {
                    is_enable: 0,// 是否启用
                    is_seniority: 0,// 是否启用打卡资格
                    seniority: [],// 打卡资格
                    is_reward: 0,// 是否奖励奖励积分
                    is_show_reward_limit: 1,// 是否显示积分奖励上限
                    default_score: ['100', '200', '300', '400', '500'],// 默认积分额度设置
                    reward_limit: 100, //积分奖励上限
                    upload_limit: 1, //图片上传限制
                    explain: '', // 活动详情
                },
                levels: {},
                levelOptions: [],
            }
        },
        mounted: function() {
            this.loadData();
        },
        methods: {
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'clockin/default/setting',
                    },
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0 && !isEmpty(e.data.data)) {
                        this.ruleForm = Object.assign(this.ruleForm, e.data.data.config);
                        this.levels = e.data.data.levels
                        var options = []
                        this.levels.forEach(function (item, index) {
                            options.push(item.level)
                        })
                        this.levelOptions = options

                        // 全选状态
                        if (this.ruleForm.seniority.length === this.levelOptions.length) {
                            this.checkAll = true
                        }
                    }
                }).catch(e => {
                    this.loading = false;
                })
            },
            handle(type, data = null) {
                switch (type) {
                    case 'add':// 添加规格
                        this.ruleForm.default_score.push(0);
                        break;
                    case 'delete':// 删除规格
                        this.ruleForm.default_score.splice(data,1);
                        break;
                }
            },
            store(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.btnLoading = true;
                        request({
                            params: {
                                r: 'clockin/default/setting-submit',
                            },
                            method: 'post',
                            data: this.ruleForm
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code == 0) {
                                this.$message.success(e.data.msg);
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.$message.error(e);
                            this.btnLoading = false;
                        })
                    } else {
                        this.btnLoading = false;
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleCheckAllChange(val) {
                this.ruleForm.seniority = val ? this.levelOptions : [];
                this.isIndeterminate = false;
            },
            handleCheckedChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.levelOptions.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.levelOptions.length;
            }
        }
    });
</script>