qimall/addons/Course/backend/views/course/index.php

<style>
    .table-body {
        padding: 20px;
        background-color: #fff;
    }

    .input-item {
        display: inline-block;
        width: 250px;
        margin: 0 0 20px;
    }

    .input-item .el-input__inner {
        border-right: 0;
    }

    .input-item .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        margin: 0;
    }

    .table-body .el-button {
        padding: 0 !important;
        border: 0;
        margin: 0 5px;
    }



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

    .el-tabs__header {
        background-color: #fff;
    }

    .el-tabs__item {
        width: 100px;
        text-align: center;
    }

    .el-table th>.cell {
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }

    .el-table__footer-wrapper,
    .el-table__header-wrapper {
        border-bottom: 1.4px solid #D6D6D6;
    }

    .input-search {
        margin-right: 30px;
        flex-shrink: 0;
    }
</style>
<div id="app" v-cloak>
    <el-card shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div>
                <span>课程列表</span>
                <div style="float: right">
                    <el-button type="primary" size="small" style="padding: 9px 15px !important;" @click="edit">创建课程
                    </el-button>
                </div>
            </div>
        </div>
        <div class="table-body">
            <div style="margin-bottom: 15px;" flex>
                <div flex>
                    <div flex="cross:center" class="input-search">
                        <!-- <div style="flex-shrink: 0;">课程名称：</div> -->
                        <el-input @keyup.enter.native="search" size="small" placeholder="请输入课程名称" v-model="searchData.keyword" @clear="search"></el-input>
                    </div>
                    <!-- <div flex="cross:center" class="input-search">
                        <div class="input-item-name">状态：</div>
                        <div>
                            <el-select v-model="searchData.status" placeholder="请选择" size="small">
                                <el-option label="全部" :value="0"></el-option>
                                <el-option v-for="(item,index) in status_text" :key="index" :label="item" :value="index">{{item}}
                                </el-option>
                            </el-select>
                        </div>
                    </div> -->
                </div>
                <div>
                    <el-button type="primary" size="small" @click="search" style="padding: 9px 15px !important;">搜索</el-button>
                    <el-button type="warning" @click="clereSearch" v-if="searchData.keyword || searchData.start_time || searchData.end_time || searchData.cate_id" style="padding: 9px 15px !important;">清除搜索条件</el-button>
                </div>
            </div>
            <el-table v-loading="listLoading" :data="list" stripe style="width: 100%">
                <el-table-column label="课程 ID" prop="id" min-width="80" align="center">
                    <template slot-scope="scope"> {{scope.row.id}} </template>
                </el-table-column>
                <el-table-column label="课程封面" prop="logo" min-width="80" align="center">
                    <template slot-scope="scope">
                        <div style="display: flex;align-items: center;">
                            <div style="padding-right: 10px;">
                                <com-image mode="aspectFill" :src="scope.row.logo"></com-image>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="课程名称" prop="name" min-width="180">
                    <template slot-scope="scope">
                        <div size="small">{{scope.row.name}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="课程分类" prop="cat_id" min-width="180" align="center">
                    <template slot-scope="scope">
                        <div size="small" v-if="scope.row.cat_id == 0"></div>
                        <div size="small" v-else>{{scope.row.cat_name}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="课程售价" prop="price" min-width="180" align="center">
                    <template slot-scope="scope">
                        <div size="small" v-if="scope.row.sell_type==3">免费</div>
                        <div size="small" v-else-if="scope.row.sell_type==1">￥{{scope.row.price}}</div>
                        <div size="small" v-else-if="scope.row.sell_type==2">特定会员身份：{{scope.row.allow_member_levels_name}}</div>
                        <div size="small" v-if="scope.row.sell_type==4">转发观看</div>
                    </template>
                </el-table-column>
                <el-table-column label="销量" prop="sales" min-width="180" align="center">
                    <template slot-scope="scope">
                        <div size="small">{{scope.row.sales}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="观看数" prop="views" min-width="90" align="center">
                    <template slot-scope="scope">
                        <div size="small">实际：{{scope.row.views}}</div>
                        <div size="small">虚拟：{{scope.row.vm_views}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="点赞数" prop="likes" min-width="80" align="center">
                    <template slot-scope="scope">
                        <div size="small">实际：{{scope.row.likes}}</div>
                        <div size="small">虚拟：{{scope.row.vm_likes}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="评论数" prop="comments" min-width="80" align="center">
                    <template slot-scope="scope">
                        <div size="small">实际：{{scope.row.comments}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="排序" prop="sales" width="150" align="center">
                    <template slot-scope="scope">
                        <div v-if="sort_id != scope.row.id">
                            <el-tooltip class="item" effect="dark" content="排序" placement="top">
                                <span>{{scope.row.sort}}</span>
                            </el-tooltip>
                            <el-button class="edit-sort" type="text" @click="edits(scope.row,'sort')">
                                <img src="resources/img/mall/order/edit.png" alt="">
                            </el-button>
                        </div>
                        <div style="display: flex;align-items: center" v-else>
                            <el-input style="min-width: 70px" type="number" size="mini" class="change" v-model="sort" autocomplete="off"></el-input>
                            <el-button class="change-quit" type="text" style="color: #F56C6C;padding: 0 5px" icon="el-icon-error" circle @click="cancelEdit('sort')"></el-button>
                            <el-button class="change-success" type="text" style="margin-left: 0;color: #67C23A;padding: 0 5px" icon="el-icon-success" circle @click="do_sort(scope.row)">
                            </el-button>
                        </div>
                    </template>

                </el-table-column>
<!--                <el-table-column label="状态" prop="status" min-width="80" align="center">-->
<!--                    <template slot-scope="scope">-->
<!--                        <com-ellipsis :line="1">{{scope.row.status==1?'已上架':'已下架'}}</com-ellipsis>-->
<!--                    </template>-->
<!--                </el-table-column>-->
                <el-table-column align="center" label="上架状态" min-width="100">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="点击更改状态" placement="top">
                            <el-switch
                                    @change="((val)=>{switchFun(val,scope.row)})"
                                    v-model="scope.row.status"
                                    :active-value="1"
                                    :inactive-value="0"
                            >
                            </el-switch>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="created_at" min-width="110" align="center">
                    <template slot-scope="scope">
                        <div size="small">{{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}</div>
                    </template>
                </el-table-column>

                <el-table-column label="操作" min-width="250" align="center">
                    <template slot-scope="scope">
                        <el-button circle size="mini" type="text" @click="giveCourse(scope.row.id)"> 发放课程 </el-button>
                        <el-button circle size="mini" type="text" @click="editDistribution(scope.row.id)"> 分佣设置 </el-button>
                        <el-button circle size="mini" type="text" @click="chapters(scope.row.id)"> 内容管理 </el-button>
<!--                        <el-button v-if="scope.row.status==0" circle size="mini" type="text" @click.stop="putOn(scope.row)"> 立即上架 </el-button>-->
<!--                        <el-button v-if="scope.row.status==1" circle size="mini" type="text" @click.stop="putOff(scope.row)"> 立即下架 </el-button>-->
                        <el-button v-if="scope.row.status==1" circle size="mini" type="text" @click="copy(scope.row)" class="copy_btn"> 复制链接 </el-button>
                        <el-button circle size="mini" type="text" @click="courseDelete(scope.row, scope.$index)"> 删除 </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div style="text-align: right;margin: 20px 0;">
                <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
            </div>
        </div>
    </el-card>
    <!-- 这个是立即下架弹窗 -->
    <!-- 这个是立即上架弹窗 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" v-loading="dialogLoading2">
        <span>{{dialogText}}</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="noConfirm">取 消</el-button>
            <el-button type="primary" @click="comfirm">确 定</el-button>
        </span>
    </el-dialog>
    
    <!-- 这个是复制链接弹窗 -->
    <el-dialog :visible.sync="showGiveCourse" width="20%" title="选择发放用户">
        <div>
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" size="small" label-width="150px">
                <el-form-item label="用户:" prop="user_id">
                    <el-autocomplete size="small" v-model="ruleForm.nickname" value-key="nickname"
                                    @keyup.enter.native="keyUp"
                                    :fetch-suggestions="querySearchAsync" placeholder="请输入用户昵称/id/手机号"
                                    @select="areaClick"></el-autocomplete>
                </el-form-item>
                <el-form-item label="用户信息:" prop='' v-if="ruleForm.user_id != ''">
                    <div style="display: flex;align-items:center;">
                        <el-image class="table-info-img circle" :src="ruleForm.avatar_url" style="width:50px;">
                            <div slot="error" class="image-slot">
                                <com-image src="/resources/img/common/default-avatar.png"></com-image>
                            </div>
                        </el-image>
                        <span style="margin-left:10px;">{{ruleForm.nickname}}</span>
                    </div>
                </el-form-item>
            </el-form>
            </template>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="showGiveCourse = false" type="default" size="small">取消</el-button>
            <el-button type="primary" :loading="btnLoading" style="margin-bottom: 10px;" size="small"
                    @click="giveUserCourse">发放课程</el-button>
        </span>
    </el-dialog>
</div>
<script src="/resources/unpkg/clipboard@1.0.0/dist/clipboard.min.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                status: 0,
                list: [],
                listLoading: false,
                page: 1,
                pageCount: 0,
                lableLoading: false,
                btnLoading: false,
                dialogLoading2: false,
                dialogText: '',
                dialogVisible: false,
                searchData: {
                    keyword: '',
                    start_time: null,
                    end_time: null,
                    cate_id: null,
                },
                sort:0,
                sort_id: 0,
                ruleForm: {
                    id: '',
                    user_id: '',
                },
                showGiveCourse: false,
                rules: {
                    user_id: [
                        {
                            required: true,
                            validator: (rule, value, callback) => {},
                            trigger: 'blur'
                        },
                    ],
                },
            };
        },



        methods: {
            search() {
                this.page = 1;
                this.getList();
            },
            clereSearch() {
                this.searchData.keyword = '';
                this.searchData.start_time = null;
                this.searchData.end_time = null;
                this.searchData.cate_id = null;
                this.getList();
            },

            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getList();
            },

            // 0.1 获取课程列表
            getList() {
                let self = this;
                self.listLoading = true;
                request({
                    params: {
                        r: 'course/default/index',
                        page: self.page,
                        ...this.searchData
                    },
                    method: 'get',
                }).then(e => {
                    self.listLoading = false;
                    self.list = e.data.data.list;
                    self.pageCount = e.data.data.page_count;
                    localStorage.setItem('h5_domain', e.data.data.h5_domain)
                    localStorage.setItem('mall_sign', e.data.data.mall_sign)
                }).catch(e => {
                    console.log(e);
                });
            },
            //管理章节
            chapters(id) {
                if (id) {
                    navigateTo({
                        r: 'course/course/chapter-list',
                        id: id,
                    });
                } else {
                    navigateTo({
                        r: 'course/course/chapter-list',
                    });
                }
            },
            // 新建或编辑
            edit(id) {
                if (!id) {
                    id = 0;
                }
                navigateTo({
                    r: 'course/course/course-edit',
                    id: id,
                });
            },

            // 新建或编辑
            editDistribution(id) {
                if (!id) {
                    id = 0;
                }
                navigateTo({
                    r: 'course/course/course-edit',
                    id: id,
                    activeName: 'distribution_setting',
                });
            },
            //删除
            courseDelete(row, index) {
                let self = this;
                self.$confirm('删除该课程, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.listLoading = true;
                    request({
                        params: {
                            r: 'course/course/delete',
                        },
                        method: 'post',
                        data: {
                            id: row.id,
                        }
                    }).then(e => {
                        self.listLoading = false;
                        if (e.data.code === 0) {
                            self.$message.success(e.data.msg);
                            self.list.splice(index, 1);
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        console.log(e);
                    });
                }).catch(() => {
                    self.$message.info('已取消删除')
                });
            },
            switchFun(event,row){
               if (event == 1) {
                    this.putOn(row);
               } else {
                   this.putOff(row);
               }
            },
            //立即下架
            putOff(row) {
                this.dialogText = "是否设置该课程立即下架?"
                this.status = 0;
                this.id = row.id;
                this.dialogVisible = true;
            },
            //立即上架
            putOn(row) {
                this.dialogText = "是否设置该课程立即上架?"
                this.status = 1;
                this.id = row.id;
                this.dialogVisible = true;
            },
            comfirm() {
                let obj = {
                    id: this.id,
                    status: this.status
                }
                this.dialogLoading2 = true;
                //console.log("请求前得参数="+JSON.stringify(obj))
                request({
                    method: 'post',
                    params: {
                        r: 'course/course/switch-status',
                    },
                    data: obj
                }).then(e => {
                    this.dialogVisible = false;
                    this.dialogLoading2 = false;
                    //console.log("请求结果="+JSON.stringify(e))
                    this.getList();
                    if (e.data.code === 0) {
                        this.$message.success(e.data.msg);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.$message.error('网络错误');
                });
            },
            noConfirm() {
                this.getList();
                this.dialogVisible = false;
            },
            //复制链接
            copy(row) {
                var id = row.id;
                //复制链接
                var url = localStorage.getItem('h5_domain');
                var clipboard = new ClipboardJS('.copy_btn', {
                    text: function() {
                        return url + 'plugins/course/details?courseId=' + id + '&sign=' + localStorage.getItem('mall_sign');
                    }
                });
                var self = this;
                clipboard.on('success', function(e) {
                    self.$message.success('复制成功');
                    e.clearSelection();
                    clipboard.destroy()
                });
                clipboard.on('error', function(e) {
                    self.$message.error('复制失败，请手动复制');
                });
            },
            edits(row, type) {
                switch (type) {
                    case 'sort':
                        this.sort = row.sort;
                        this.sort_id = row.id;
                        break;

                }
            },
            cancelEdit(type) {
                switch (type) {
                    case 'sort':
                        this.sort = 0;
                        this.sort_id = 0;
                        break;
                }
            },
            do_sort(data) {
                let self = this;
                let id = data ? parseInt(data.id) : '';
                request({
                    params: {
                        r: 'course/course/update-sort',
                    },
                    method: 'post',
                    data: {
                        id: id,
                        sort: this.sort
                    }
                }).then(e => {
                    if (e.data.code == 0) {
                        this.sort_id = 0;
                        self.$message.success(e.data.msg);
                        self.getList();
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            giveCourse(id) {
                this.ruleForm = {
                    id: id,
                    user_id: '',
                    nickname: '',
                };
                this.ruleForm.id = id;
                this.showGiveCourse = true;
            },
            querySearchAsync(queryString, cb) {
                this.ruleForm.user_id = 0;
                this.ruleForm.keyword = queryString;
                this.get_user(cb);
            },
            get_user(cb) {
                request({
                    params: {
                        r: 'course/default/search-user',
                        keyword: this.ruleForm.keyword
                    }
                }).then(res => {
                    if (res.data.code == 0) {
                        cb(res.data.data.list)
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
            },
            areaClick(row) {
				//console.log('选择了用户row='+JSON.stringify(row))
                this.ruleForm = {...this.ruleForm, ...row};
                if (row.mobile != '') this.mobile = row.mobile
                this.$refs.ruleForm.rules.user_id[0].validator = (rule, value, callback) => {
                    if (this.ruleForm.user_id != '') {
                        callback();
                    } else {
                        callback(new Error('请选择用户'));
                    }
                }
                console.log('ruleForm', this.ruleForm);
            },
            //发放课程
            giveUserCourse() {
                this.$refs.ruleForm.rules.user_id[0].validator = (rule, value, callback) => {
                    if (this.ruleForm.user_id != '') {
                        callback();
                    } else {
                        callback(new Error('请选择用户'));
                    }
                }
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        this.btnLoading = true;

                        request({
                            params: {
                                r: 'course/default/give-user-course',
                            },
                            method: 'post',
                            data: this.ruleForm
                        }).then(e => {
                            this.btnLoading = false;
                            this.showGiveCourse = false;
                            if (e.data.code == 0) {
                                this.$message.success(e.data.msg);
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.$message.error(e);
                            this.btnLoading = false;
                        })
                    } else {
                        this.btnLoading = false;
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        },
        mounted: function() {
            this.getList();
        }
    });
</script>