qimall/backend/modules/admin/views/setting/course.php

<?php
use common\helpers\ComponentHelper;
?>
<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="system">
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="教程链接">
                                            <el-col :span="12">
                                                <el-input v-model="ruleForm.system.course_url.value"></el-input>
                                                <div class="tips-text" v-if="ruleForm.system.course_url.remark">{{ruleForm.system.course_url.remark}}</div>
                                            </el-col>
                                        </el-form-item>
                                        <el-form-item label="常见问题">
                                            <el-col :span="12">
                                                <el-input v-model="ruleForm.system.question_url.value"></el-input>
                                                <div class="tips-text" v-if="ruleForm.system.question_url.remark">{{ruleForm.system.question_url.remark}}</div>
                                            </el-col>
                                        </el-form-item>
                                        <el-form-item label="APP对接">
                                            <el-col :span="12">
                                                <el-input v-model="ruleForm.system.app_url.value"></el-input>
                                                <div class="tips-text" v-if="ruleForm.system.app_url.remark">{{ruleForm.system.question_url.remark}}</div>
                                            </el-col>
                                        </el-form-item>
                                        <el-form-item label="公众号对接">
                                            <el-col :span="12">
                                                <el-input v-model="ruleForm.system.wx_url.value"></el-input>
                                                <div class="tips-text" v-if="ruleForm.system.wx_url.remark">{{ruleForm.system.wx_url.remark}}</div>
                                            </el-col>
                                        </el-form-item>
                                        <el-form-item label="小程序对接">
                                            <el-col :span="12">
                                                <el-input v-model="ruleForm.system.mini_app.value"></el-input>
                                                <div class="tips-text" v-if="ruleForm.system.mini_app.remark">{{ruleForm.system.mini_app.remark}}</div>
                                            </el-col>
                                        </el-form-item>
                                        <el-form-item label="视频教程">
                                            <el-col :span="12">
                                                <el-switch v-model="ruleForm.system.is_show_video_tutorials.value" :active-value="1" :inactive-value="0">
                                                </el-switch>
                                            </el-col>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                            <el-tab-pane label="视频教程" name="video_tutorials">
                                <template>
                                    <el-table :data="video_tutorials"  border style="width: 100%">
                                        <el-table-column prop="id" label="视频id" width="100" align="center"></el-table-column>
                                        <el-table-column prop="name" label="视频名称" width="180" align="center">
                                            <template slot-scope="scope">
                                                <span class="over2">{{scope.row.name}}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="url" label="视频链接" align="center">
                                        </el-table-column>
                                        <el-table-column label="操作" align="center">
                                            <template slot-scope="scope">
                                                <el-button type="text" @click="handle(scope.row)">编辑</el-button>
                                            </template>
                                        </el-table-column>

                                    </el-table>
                                </template>
                            </el-tab-pane>

                        </el-tabs>
                        <el-button :loading="btnLoading" class="button-item" type="primary" style="margin-top: 24px;" @click="submit" size="small" v-if="activeName=='system'">保存
                        </el-button>
                    </el-form>
                </el-card>
            </template>
        </div>
        <el-dialog
                title="编辑视频教程" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="视频名称">
                    <el-input v-model="name" placeholder="视频名称"></el-input>
                </el-form-item>
                <el-form-item label="视频文件">
                    <com-attachment :type="'videos'" :multiple="false" :max="1" v-model="video_url" @selected="handleSelected">
                        <el-button size="mini">选择文件</el-button>
                        <span style="margin-left: 15px;">{{selectedVideo}}</span>
                    </com-attachment>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="url" placeholder="视频链接"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitUpdate">确 定</el-button>
              </span>
        </el-dialog>

    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                btnLoading: false,
                params: {},
                activeName: 'system',
                setting_group_name:{
                    system:'教程设置',
                    video_tutorials:'视频教程',
                },
                ruleForm: {
                    // 基础设置
                    system: {
                        course_url:{title:'教程链接',value:'',remark: ''},
                        question_url:{title:'常见问题',value:'',remark: ''},
                        app_url:{title:'app对接',value:'',remark: ''},
                        wx_url:{title:'微信对接',value:'',remark: ''},
                        mini_app:{title:'小程序对接',value:'',remark: ''},
                        is_show_video_tutorials:{title:'是否显示视频教程',value:0,remark: ''},
                    }
                },
                form:{},
                dialogVisible: false,
                video_tutorials:[],
                video_url:"",
                selectedVideo: '', // 已选择的视频文件
                name:"",
                id:"",
                url: '', // 已选择的视频文件

            }
        },
        mounted: function() {
            this.loadData();
        },
        methods: {
            loadData() {
                if(this.loading === true) return;
                this.loading = true;
                request({
                    params: {
                        r: 'admin/setting/course',
                    },
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        if(e.data.data){//有选中的
                            var data = e.data.data;
                            this.video_tutorials = data.video_tutorials;
                            if(data.question_url){
                                this.ruleForm.system.question_url= data.question_url;
                            }
                            if(data.course_url){
                                this.ruleForm.system.course_url = data.course_url;
                            }
                            if(data.app_url){
                                this.ruleForm.system.app_url = data.app_url;
                            }
                            if(data.wx_url){
                                this.ruleForm.system.wx_url = data.wx_url;
                            }
                            if(data.mini_app){
                                this.ruleForm.system.mini_app = data.mini_app;
                            }
                            if(data.is_show_video_tutorials){
                                this.ruleForm.system.is_show_video_tutorials = data.is_show_video_tutorials;
                            }

                        }
                    }
                }).catch(e => {
                    this.loading = false;
                })

            },
            submit() {
                this.btnLoading = true;
                this.$request({
                    params: {
                        r: 'admin/setting/course',
                    },
                    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;
                });
            },
            handleSelected(res) {
                this.url = res[0].url;
                this.selectedVideo = '已选择： ' + res[0].name;
            },

            handle(row){
                this.dialogVisible = true;
                this.id = row.id
                this.name = row.name;
                this.url = row.url;
            },
            handleClose(done) {
                this.dialogVisible = false;
                this.name='';
                this.id='';
                this.url='';
                this.selectedVideo='';
            },
            submitUpdate(){
                this.btnLoading = true;
                this.$request({
                    params: {
                        r: 'admin/setting/course-video',
                    },
                    method: 'post',
                    data: {
                        id: this.id,
                        name: this.name,
                        url: this.url,
                    },
                }).then(e => {
                    this.btnLoading = false;
                    if (e.data.code === 0) {
                        this.dialogVisible = false;
                        this.name='';
                        this.id='';
                        this.url='';
                        this.selectedVideo='';
                        this.$message.success(e.data.msg);
                        this.loadData();
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.btnLoading = false;
                });
            }

        }
    });
</script>