qimall/backend/modules/mall/views/setting/memory.php

<?php
use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-image');
ComponentHelper::loadComponentView('com-attachment');
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: 1200px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div class="form_box">
            <template>
                <el-card>
                    <el-form :model="ruleForm" size="small" ref="ruleForm" label-width="150px">
                        <el-tabs v-model="activeName" type="card">
                            <el-tab-pane label="存储设置" name="storage">
                                <?=ComponentHelper::loadComponentView('storage', __DIR__ . '/storage/'); ?>
                            </el-tab-pane>
                            <el-tab-pane label="超限设置" name="limit">
                                <?=ComponentHelper::loadComponentView('limit', __DIR__ . '/storage/'); ?>
                            </el-tab-pane>
                        </el-tabs>
                        <el-button :loading="btnLoading" class="button-item" type="primary" style="margin-top: 24px;" @click="submit" size="small">保存
                        </el-button>
                    </el-form>
                </el-card>
            </template>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                btnLoading: false,
                params: {},

                activeName: 'storage',
                setting_group_name:{
                    storage:'存储设置',
                    limit:'超限设置'
                },
                ruleForm: {
                    storage:{
                        driver:{
                            title:'存储方式',
                            value:'oss',
                            extra:{
                                local:'本地存储',
                                cos:'腾讯云存储',
                                oss:'阿里云存储',
                                qiniu:'七牛云存储'
                            }
                        }
                    },
                    storage_driver:{
                        local:{title:'本地存储',value:'',remark:'本地服务器存储无需额外配置'},
                        cos:{
                            title:'腾讯云存储',
                            value:{
                                bucket: '',
                                area:'',
                                domain:'',
                                secret_id:'',
                                secret_key:'',
                            }
                        },
                        oss:{
                            title:'阿里云存储',
                            value:{
                                storage_aliyun_bucket: '',
                                storage_aliyun_endpoint:'',
                                storage_aliyun_accesskeyid:'',
                                storage_aliyun_accesskeysecret:'',
                                storage_aliyun_user_url:'',
                                storage_aliyun_transport_protocols:'',
                                img_style_interface:'',
                                arn: '',
                            }
                        },
                        qiniu:{
                            title:'七牛云存储',
                            value:{
                                bucket: '',
                                domain:'',
                                access_key_id:'',
                                access_key_secret:'',
                                img_style_interface:'',
                            }
                        }
                    },
                    limit:{
                        img:{title:'上传图片限制',value:'',remark: '-1:表示无限制，单位:MB'},
                        upload_images_compress:{title:'上传图片是否压缩',value:0,remark: '开启上传图片会按比例进行压缩'},
                        video:{title:'上传视频限制',value:'',remark: '-1:表示无限制，单位:MB'},
                        diy:{title:'diy组件限制',value:'',remark: '-1:表示无限制，单位:个'}
                    }
                }
            }
        },
        mounted: function() {
            this.loadData();
        },
        methods: {
            loadData() {
                if(this.loading === true) return;
                this.loading = true;
                request({
                    params: {
                        r: 'mall/setting/get-memory',
                        type: 'mall_storage'
                    },
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        if(e.data.data){//有选中的

                            var data = e.data.data;

                            Object.keys(this.ruleForm).forEach((key) => {
                                Object.keys(this.ruleForm[key]).forEach((k) => {
                                    if (data[key][k]) {
                                        if (typeof data[key][k].value == 'string' && data[key][k].value.indexOf("{") !== -1) {
                                            // 将json字符串转为对象
                                            this.ruleForm[key][k].value = JSON.parse(data[key][k].value);
                                        }else{
                                            this.ruleForm[key][k].value = data[key][k].value;
                                        }
                                    }
                                });
                            });
                        }
                    }
                }).catch(e => {
                    this.loading = false;
                })
            },
            submit() {
                this.btnLoading = true;
                this.$request({
                    params: {
                        r: 'mall/setting/get-memory',
                    },
                    method: 'post',
                    data: {
                        setting: 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.btnLoading = false;
                });
            },
            updateSuccess(e) {
                this.$message.success('上传成功')
            }
        }
    });
</script>