qimall/addons/Xhs/backend/views/setting/index.php

<style>
    @media screen and (min-width: 1370px) {
        .form-body {
            padding: 20px 0;
            padding-right: 50%;
            min-width: 1400px;
        }
    }

    @media screen and (max-width: 1369px) {
        .form-body {
            padding: 20px 0;
            padding-right: 20%;
        }
    }

    .form-body {
        background-color: #fff;
        margin-bottom: 20px;
    }

    .form-button {
        margin: 0 !important;
    }

    .form-button .el-form-item__content {
        margin-left: 0 !important;
    }

    .samp-mb {
        background: #FFF;
        border: 1px solid #DCDFE6;
        color: #606266;
        padding: 8px 22px;
    }

    .check-all {
        float: left;
        margin-right: 25px!important;
    }

    .checkbox-item {
        float: left;
    }

</style>
<div id="app" v-cloak>
    <el-card style="border:0;min-width: 1000px;" shadow="never"
             body-style="background-color: #f3f3f3;padding: 10px 0 0;" v-loading="loading">
        <div slot="header">基础设置</div>
        <div v-if="load">
            <div class="form-body">
                <el-form ref="ruleForm" :model="ruleForm"  label-width="120px" style="padding-left: 20px;" size="small">
                    <el-form-item label="素材中心" prop="material_link">
                        <el-input v-model.number="material_link" style="width: 50%" disabled type="text" placeholder="种草链接"></el-input>
                        <el-button class="button-item" v-on:click="copyText">复制链接</el-button>
                        <br/>
                        <div class="tips-text" style="line-height: 24px;">
                            小红书种草功能页面链接
                        </div>
                    </el-form-item>

                    <el-form-item label="用户权限发布">
                        <el-checkbox class="check-all" :indeterminate="isIndeterminate" v-model="checkAll"
                                     @change="handleCheckAllChange">全选
                        </el-checkbox>
                        <el-checkbox-group class="checkbox-item" v-model="checkedCities" @change="handleCheckedCitiesChange">
                            <el-checkbox v-for="item in userLevelList" :label="item.level + ''" :key="item.id + ''">
                                {{item.name}}
                            </el-checkbox>
                        </el-checkbox-group>
                        <br/>
                        <div class="tips-text" style="line-height: 24px;">
                            勾选指定会员等级的用户才有发布种草素材的权限
                        </div>
                    </el-form-item>
                    <el-form-item label="内容敏感词过滤" prop="is_filter">
                        <el-switch v-model="ruleForm.is_filter" :active-value="1" :inactive-value="0"></el-switch>
                        <br/>
                        <div class="tips-text" style="line-height: 24px;">
                            需在设置功能-商城设置-敏感词过滤-配置key
                        </div>
                    </el-form-item>
                    <el-form-item label="是否审核" prop="is_audit">
                        <el-switch v-model="ruleForm.is_audit" :active-value="1" :inactive-value="0"></el-switch>
                        <br/>
                        <div class="tips-text" style="line-height: 24px;">
                            前端用户发布种草素材是否需要审核
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <el-button class="button-item" :loading="btnLoading" type="primary" size="small" @click="store('ruleForm')">保存
            </el-button>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                userLevelList: [],
                loading: false,
                load: false,
                btnLoading: false,
                ruleForm : {
                    mall_id : '',
                    user_level_limit : 0,
                    is_filter : 0,
                    is_audit : 1,
                    upload_vedio_size:50,
                    upload_image_size:50,
                },
                material_link : "/plugins/littleRedBook/index",
                checkAll: false,//是否全选
                isIndeterminate: false,//未全选样式
                checkedCities: [],//已勾选的
            };
        },
        created() {
            this.loadData();
        },
        methods: {
            store(formName) {
                this.$refs[formName].validate((valid) => {
                    let self = this;
                    this.ruleForm.user_level_limit = self.checkedCities;
                    console.log(this.ruleForm.is_audit);
                    if (valid) {
                        self.btnLoading = true;
                        request({
                            params: {
                                r: 'xhs/setting/index'
                            },
                            method: 'post',
                            data: self.ruleForm,
                        }).then(e => {
                            self.btnLoading = false;
                            if (e.data.code == 0) {
                                self.$message.success(e.data.msg);
                                // navigateTo({
                                //     r: 'material/setting/index'
                                // })
                            } else {
                                self.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            self.$message.error(e.data.msg);
                            self.btnLoading = false;
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //获取页面信息
            loadData() {
                this.loading = true;
                this.load = true;
                request({
                    params: {
                        r: 'xhs/setting/index'
                    }
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        var data = e.data.data;
                        this.userLevelList = data.user_level_list;
                        this.ruleForm = data.config;
                        this.material_link = data.config['web_url'] + '/#/plugins/littleRedBook/index'+'?sign='+data.config['mall_sign'];
                        var userlevelLimit = data.config.user_level_limit;
                        if(!(userlevelLimit == null || userlevelLimit === "")){
                            if(userlevelLimit.toString().indexOf(',')>0) {
                                this.checkedCities = userlevelLimit.split(',');
                            }else{
                                this.checkedCities.push(userlevelLimit.toString());
                            }
                        }
                        if(this.checkedCities.length==this.userLevelList.length) this.checkAll = true;else this.checkAll = false;
                        this.load = true;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.$message.error(e);
                    this.btnLoading = false;
                });
            },
            //复制素材中心链接
            copyText(){
                if (!this.material_link) {
                    alert('请输入要复制的内容')
                } else {
                    var url = this.material_link;
                    // createElement() 方法通过指定名称创建一个元素
                    var copyInput = document.createElement('input')
                    copyInput.setAttribute('value', url)
                    document.body.appendChild(copyInput)
                    copyInput.select()

                    try {
                        var copyed = document.execCommand('copy')
                        if (copyed) {
                            document.body.removeChild(copyInput)
                            this.$message.success('复制成功')
                        }
                    } catch {
                        this.$message.success('复制失败，请检查浏览器兼容')
                    }
                }

            },
            // 全选事件
            handleCheckAllChange(val) {
                let self = this;
                self.checkedCities = [];
                if (val) {
                    this.userLevelList.forEach(function (item, index) {
                        self.checkedCities.push(item.level + '')
                    });
                }
                self.isIndeterminate = false;
            },
            // 单选事件
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.userLevelList.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.userLevelList.length;
            }
        }
    });
</script>