qimall/addons/Course/backend/views/setting/index-bak.php

<div id="app" v-cloak>
    <el-card class="box-card" 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" v-loading="formLoading">
                        <el-tabs v-model="activeName" type="card">
                            <el-tab-pane label="基本设置" name="basic">
                                <el-row style="height:50vh">
                                    <el-col :span="24">
                                        <el-form-item label="启用视频课程">
                                            <div>
                                                <el-tooltip effect="dark" content="是否启用插件" placement="top">
                                                    <i class="el-icon-info"></i>
                                                </el-tooltip>
                                                <el-switch v-model="ruleForm.basic.is_enable" :active-value="1" :inactive-value="0" style="margin-left: 20px;">
                                                </el-switch>
                                                <br/>
                                                <div class="tips-text" style="line-height: 24px;">
                                                    开启后前端才能看到课程视频页面
                                                </div>
                                            </div>
                                        </el-form-item>
                                        <el-form-item label="首页链接">
                                            <el-col :span="12">
                                                <el-input v-model="ruleForm.basic.index_link" :disabled="false">
                                                    <el-button slot="append" icon="el-icon-document-copy" @click="copyLink(ruleForm.basic.index_link)"></el-button>
                                                </el-input>
                                            </el-col>
                                        </el-form-item>
                                        <el-form-item label="首页标题">
                                            <el-col :span="12">
                                                <el-input v-model="ruleForm.basic.index_title"> </el-input>
                                            </el-col>
                                        </el-form-item>
                                        <el-form-item label="支付完成自定义" style="margin-bottom: 0">
                                            <div>
                                                <el-tooltip effect="dark" content="自定义的图片和文字描述将展示在支付完成页面" placement="top">
                                                    <i class="el-icon-info"></i>
                                                </el-tooltip>
                                                <el-switch v-model="ruleForm.basic.is_pay_success_customize" :active-value="1" :inactive-value="0" style="margin-left: 20px;">
                                                </el-switch>
                                            </div>

                                        </el-form-item>

                                        <el-form-item prop="pay_success_picture" v-if="ruleForm.basic.is_pay_success_customize==1">
                                            <label slot="label">
                                                <span>上传图片</span>
                                            </label>
                                            <com-attachment v-model="ruleForm.basic.pay_success_picture" :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.basic.pay_success_picture ? ruleForm.basic.pay_success_picture : ''"></com-image>
                                                <el-button v-if="ruleForm.basic.pay_success_picture" class="del-btn" size="mini" type="danger" icon="el-icon-close" circle @click="ruleForm.basic.pay_success_picture = ''"></el-button>
                                            </div>
                                            <!-- <el-button @click="app_share.dialog = true;app_share.type = 'pic_bg'" type="text">查看图例
                                            </el-button>
                                            <div class="customize-share-title">
                                                <com-image mode="aspectFill" width='80px' height='80px' :src="formRules.logo ? formRules.logo : ''"></com-image>
                                                <el-button v-if="formRules.logo" class="del-btn" size="mini" type="danger" icon="el-icon-close" circle @click="formRules.logo = ''"></el-button>
                                            </div>
                                            <el-button @click="app_share.dialog = true;app_share.type = 'pic_bg'" type="text">查看图例 </el-button> -->
                                        </el-form-item>
                                        <el-form-item label="文字描述" v-if="ruleForm.basic.is_pay_success_customize==1">
                                            <el-col :span="12">
                                                <el-input type="textarea" v-model="ruleForm.basic.pay_success_text" autosize resize="none" :row="4"></el-input>
                                            </el-col>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                        </el-tabs>
                        <el-button v-loading="btnLoading" class="button-item" type="primary" style="margin-top: 24px;" size="small" @click="save('ruleForm')">保存</el-button>
                    </el-form>
                </el-card>
            </template>
        </div>
        <!-- 这个是复制用的容器，已隐藏 -->
        <textarea id="inputs" style="opacity: 0;width: 0;height: 0;">复制内容</textarea>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                btnLoading: false,
                formLoading: false,
                activeName: 'basic',
                ruleForm: {
                    basic: {
                        index_link: 'plugins/course/index',
                        is_pay_success_customize: 0,
                        pay_success_text: '',
                        pay_success_picture: '',
                        index_title: '',
                        is_enable: 0
                    }
                }
            }
        },
        methods: {
            // 复制首页链接
            copyLink(link) {
                link = localStorage.getItem('h5_domain') + link + '?sign=' + localStorage.getItem('mall_sign');
                // console.log('123');
                var input = document.getElementById("inputs");
                input.value = link; // 修改文本框的内容
                input.select(); // 选中文本
                document.execCommand("copy"); // 执行浏览器复制命令
                this.$message.success('复制成功');
            },
            getInfo() {
                var self = this;
                self.formLoading = true;
                request({
                    params: {
                        r: 'course/default/settings',
                        group: 'basic'
                    },
                    method: 'get'
                }).then(e => {
                    self.formLoading = false;
                    if (0 == e.data.code) {
                        // console.log(e);
                        if (e.data.data.basic) {
                            self.ruleForm = e.data.data;
                        }
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    self.formLoading = false;
                    self.$message.error('网络错误');
                });

            },
            save(formName) {
                this.$refs[formName].validate((valid, obj) => {
                    if (valid) {
                        // this.btnLoading = true;
                        request({
                            params: {
                                r: 'course/default/settings',
                            },
                            data: this.ruleForm,
                            method: 'post'
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code == 0) {
                                this.$message({
                                    message: e.data.msg,
                                    type: 'success'
                                });
                            } else {
                                this.$message({
                                    message: e.data.msg,
                                    type: 'error'
                                });
                            }
                        }).catch(e => {
                            this.btnLoading = false;
                            self.$message.error('网络错误');
                        });
                    } else {
                        this.btnLoading = false;
                        var msg = '';
                        for (let index in obj) {
                            msg = msg + '*' + obj[index][0].message + '　';
                        }
                        this.$message({
                            message: msg,
                            type: 'error'
                        });
                        return false;
                    }
                });
            }
        },
        mounted() {
            this.getInfo();
        }
    });
</script>