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

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-rich-text');

?>
<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"  :rules="rule" label-width="120px" style="padding-left: 20px;" size="small">
                    <el-form-item label="官方头像" prop="user_avatar_url">
                        <template slot="label">
                            <span>官方头像</span>
                            <el-tooltip effect="dark" content="默认读取商城logo"
                                        placement="top">
                                <i class="el-icon-info"></i>
                            </el-tooltip>
                        </template>
                        <div style="float: left;">
                            <com-attachment v-model="ruleForm.user_avatar_url" :multiple="false" :max="1">
                                <el-tooltip class="item" effect="dark" content="建议尺寸:420 * 336" placement="top">
                                    <el-button size="mini">选择图片</el-button>
                                </el-tooltip>
                            </com-attachment>
                            <div class="customize-share-title">
                                <com-image mode="aspectFill" width='80px' height='80px' :src="ruleForm.user_avatar_url ? ruleForm.user_avatar_url : ''"></com-image>
                                <el-button v-if="ruleForm.user_avatar_url" class="del-btn-pro" size="mini" type="danger" icon="el-icon-close" circle @click="ruleForm.user_avatar_url = ''"></el-button>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="官方昵称" prop="user_name">
                        <template slot="label">
                            <span>官方昵称</span>
                            <el-tooltip effect="dark" content="默认读取商城昵称"
                                        placement="top">
                                <i class="el-icon-info"></i>
                            </el-tooltip>
                        </template>
                        <el-input v-model="ruleForm.user_name" prop="user_name" style=" width: 150px; float: left; " placeholder="请输入用户名称"></el-input>
                    </el-form-item>
                    <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>
                    </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>
                        <div class="tips-text" style="line-height: 24px;">
                            开启敏感词汇，规避色情、暴力人内容
                        </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>
                        <div class="tips-text" style="line-height: 24px;">
                            用户发素材是否需要审核
                        </div>

                    </el-form-item>
                    <el-form-item label="下载标语" :label-width="formLabelWidth" prop="content">
                        <el-input style="width: 750px" v-model="ruleForm.download_slogans"></el-input>
                    </el-form-item>

                    <el-form-item label="显示下载按钮" prop="is_show_download">
                        <el-switch v-model="ruleForm.is_show_download" :active-value="1" :inactive-value="0"></el-switch>
                        <div class="tips-text" style="line-height: 24px;">
                            素材列表页是否显示“一键下载”按钮，注意：开启后一键下载的所有图片不会加上分享的二维码
                        </div>
                    </el-form-item>

                    <el-form-item v-if="ruleForm.is_show_download == 1" label="下载类型" :label-width="formLabelWidth" prop="content">
                        <el-radio-group v-model="ruleForm.download_type" size="mini">
                            <el-radio :label="0" border>原图下载</el-radio>
                            <el-radio :label="1" border>海报下载</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="分享设置" :label-width="formLabelWidth" prop="share_style">
                        <el-radio-group v-model="ruleForm.share_style" size="mini">
                            <el-radio :label="0" border>当前素材</el-radio>
                            <el-radio :label="1" border>首页</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="是否显示商城底部导航栏" prop="is_show_mall_bottom_nav">
                        <el-switch v-model="ruleForm.is_show_mall_bottom_nav" :active-value="1" :inactive-value="0"></el-switch>
                        <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 : {
                    user_level_limit : 1,
                    is_filter : 1,
                    is_audit : 1,
                    download_slogans : '',
                    is_show_download : 0,
                    download_type : 0,
                    share_style : 0,
                    is_show_mall_bottom_nav: 0,
                    user_name: '',
                    user_avatar_url: '',
                },
                material_link : "/plugins/material/index",
                rule : {
                    api_key: [
                        {required: true, message: '请填写Api-key', trigger: 'change'},
                    ],
                    secret_key: [
                        {required: true, message: '请填写Secret-key', trigger: 'change'},
                    ],
                },
                checkAll: false,//是否全选
                isIndeterminate: false,//未全选样式
                checkedCities: [],//已勾选的
            };
        },
        created() {
            this.loadData();
        },
        methods: {
            store(formName) {
                if(isEmpty(this.ruleForm.is_show_download)) this.ruleForm.is_show_download = 0
                this.$refs[formName].validate((valid) => {
                    let self = this;
                    this.ruleForm.user_level_limit = self.checkedCities;
                    console.log(this.ruleForm);
                    if (valid) {
                        self.btnLoading = true;
                        request({
                            params: {
                                r: 'material/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: 'material/setting/index'
                    }
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        var data = e.data.data;
                        this.userLevelList = data.user_level_list;
                        if(data.config) this.ruleForm = data.config;
                        var userlevelLimit = data.config.user_level_limit;
                        this.material_link = data.config['web_url'] + '/#/plugins/material/index'+'?sign='+data.config['mall_sign'];
                        if(userlevelLimit !== null && userlevelLimit !== ''){
                            console.log(88);
                            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>