wxgzh/resources/views/psycenter/video.blade.php

<!-- resources/views/lectures/index.blade.php -->
@extends('layouts.app')

@section('title', 'Lecture List')



@section('tab_nav')
<li class="active" style ="border-radius:10px 10px 0 0;">
    <a href="https://whdx-psy.qingerai.com/index.php?op=team&amp;task=team&amp;mk=4">
        <div id="menu_25" style="display:none;"><div class="number">0</div></div>
        健康科普
    </a>
</li>
<!-- <li>
    <a href="https://whdx-psy.qingerai.com/index.php?op=test&amp;task=testList&amp;mk=4">
        <div id="menu_39" style="display:none;"><div class="number">0</div></div>
        
    </a>
</li> -->
@endsection

@section('content')
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="{{asset('css/list.css')}}">
<div class="container">
        <!-- 左侧分类区域 -->
        <div class="left">
            <div class="head">
                <div class="title">分类</div>
                <div class="add" onclick="handleAdd()">新增</div>
            </div>
            <div class="search">
                <input type="text" id="searchInput" placeholder="搜索分类名称" onkeyup="filterCategories()">
            </div>
            <div class="list" id="categoryList">
                <!-- 分类列表将通过JS动态渲染 -->
                @foreach ($categories as $category)
                    <!-- <div class="item " 
                        onclick="">
                        <img src="https://teen.qingerai.com/js/zTree/css/metroStyle/img/icon-file.gif" alt="icon">
                        <span style="font-size: 12px;">{{$category['name']}}</span>
                        
                            <div class="operations">
                                <div class="edit" onclick="event.stopPropagation();handleEdit({{$category['id']}})">
                                    <img src="https://teen.qingerai.com/js/zTree/css/metroStyle/img/icon21.png" alt="edit">
                                </div>
                                <div class="delete" onclick="event.stopPropagation();handleDelete({{$category['id']}})">
                                    <img src="https://teen.qingerai.com/js/zTree/css/metroStyle/img/icon23.png" alt="delete">
                                </div>
                            </div>
                    </div> -->
                @endforeach
            </div>
        </div>

        <!-- 右侧内容区域 -->
        <div class="right" >
            <div class="head">
                <div class="plate-bt">
                    <div class="plate-bt-item" onclick="handleAddCourse()">新增课程</div>
                    <div class="plate-bt-item" onclick="handleBatchDelete()">批量删除</div>
                </div>
                <div class="plate-nr">

                    <div class="plate-nr-item">
                        <input type="text" id="courseSearchInput" value ="{{$condition['keywords']}}" placeholder="请输入课程名称">
                    </div>
                    <div class="plate-nr-item">
                        <div class="search-btn" onclick="searchCourses()">搜索</div>
                    </div>
                </div>
            </div>
            <div class="main">
                <div class="main-wrap" id="courseList">
                    <!-- 课程列表将通过JS动态渲染 -->
                </div>
                <div id="paginationContainer"></div>
            </div>
        </div>

        <!-- 分类编辑弹窗 -->
        <div class="dialog" id="categoryDialog">
            <div class="dialog-content">
                <h3 id="categoryDialogTitle">新增分类</h3>
                <form id="categoryForm">
                    <div class="form-item">
                        <label>分类标题</label>
                        <input type="text" name="title" placeholder="请输入分类标题">
                    </div>
                    <div class="form-item">
                        <label>排序</label>
                        <input type="number" name="sort" min="0">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                    </div>
                    <div class="dialog-footer">
                        <button type="button" onclick="closeDialog('categoryDialog')">取消</button>
                        <button type="button" onclick="submitCategoryForm()">确定</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 课程编辑弹窗 -->
        <div class="dialog" id="courseDialog">
            <div class="dialog-content">
                <h3 id="courseDialogTitle">新增课程</h3>
                <form id="courseForm">
                    <div class="form-item">
                        <label>文章分类</label>
                        <select name="categoryId" required>
                            <!-- 分类选项将通过JS动态渲染 -->
                        </select>
                    </div>
                    <div class="form-item">
                        <label>文章标题</label>
                        <input type="text" name="title" required placeholder="请输入文章标题">
                    </div>
                    <div class="form-item">
                        <label>封面图</label>
                        <div class="upload-box">
                            <label class="upload-btn" id="coverUploadBtn">
                                <input type="file" name="coverImage" accept="image/*" style="display: none;" onchange="handleImageUpload(this)">
                                <i class="el-icon-upload"></i> 点击上传封面图
                            </label>
                            <input type="hidden" id="coverImageUrl" name="cover">
                            <div class="preview-box" id="previewBox" style="display: none;">
                                <img id="previewImage" src="" alt="预览图">
                                <div class="remove-btn" onclick="removeImage()" title="删除图片">×</div>
                            </div>
                        </div>
                    </div>
                    <div class="form-item">
                        <label>视频文件</label>
                        <div class="upload-box">
                            <label class="upload-btn" id="videoUploadBtn">
                                <input type="file" name="videoFile" accept="video/*" style="display: none;" onchange="handleVideoUpload(this)">
                                <i class="el-icon-upload"></i> 点击上传视频
                            </label>
                            <input type="hidden" id="videoUrl" name="video_url">
                            <div class="video-preview" id="videoPreviewBox" style="display: none;">
                                <video id="previewVideo" controls style="width: 100%; max-width: 400px;"></video>
                                <div class="remove-btn" onclick="removeVideo()" title="删除视频">×</div>
                                <div class="upload-progress" id="videoProgress" style="display: none;">
                                    <div class="progress-bar"></div>
                                    <span class="progress-text">0%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-item">
                        <label>文章内容</label>
                        <textarea name="content" rows="6" required placeholder="请输入文章内容"></textarea>
                    </div>
                    <div class="form-item">
                        <label>排序</label>
                        <input type="number" name="sort" min="0">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}" />

                    </div>
                    <div class="dialog-footer">
                        <button type="button" onclick="closeDialog('courseDialog')">取消</button>
                        <button type="button" onclick="submitCourseForm()">确定</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 课程详情弹窗 -->
        <div class="dialog" id="viewDialog">
            <div class="dialog-content">
                <h3>课程详情</h3>
                <div class="course-detail" id="courseDetail">
                    <!-- 课程详情将通过JS动态渲染 -->
                </div>
                <div class="dialog-footer">
                    <button onclick="closeDialog('viewDialog')">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        var categoryData = @json($categories);
        var currentCategoryId = {{ $condition['category_id'] }};
        var videoData = @json($video['list']);
    </script>
    <script src="{{asset('js/script.js')}}"></script>

@endsection