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

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-dialog-select');
?>
<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;
    }
</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="toLook(false,0)">创建章节
                    </el-button>
                </div>
            </div>
        </div>
        <div class="table-body">
            <div flex style="margin-bottom: 15px;">
                <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"></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>
                    <el-button type="primary" size="small" @click="search" style="padding: 9px 15px !important;margin-left:15px;">搜索</el-button>
                    <el-button type="warning" @click="clereSearch" v-if="searchData.keyword || searchData.start_time || searchData.end_time" style="padding: 9px 15px !important;">清除搜索条件</el-button>
                </div>
            </div>
            <el-table v-loading="listLoading" :data="list" stripe style="width: 100%">
                I<el-table-column label="ID" prop="logo" min-width="80" align="center">
                    <template slot-scope="scope">
                        <div size="small">{{scope.row.id}}</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="course_name" min-width="180">

                    <template slot-scope="scope">
                        <el-tag size="small" type="info" v-if="scope.row.course_id == 0"></el-tag>
                        <el-tag size="small" v-else>{{scope.row.course_name}}</el-tag>
                    </template>

                </el-table-column>
                <el-table-column label="排序" prop="logo" min-width="80" align="center">
                    <template slot-scope="scope">
                        <div size="small">{{scope.row.sort}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="thumb_url,video_url" label="视频" width="120" align="center">
                    <template slot-scope="scope">
                        <div flex="box:first">
                            <div style="padding-right: 10px; ">
                                <el-tooltip placement="top" effect="light">
                                    <div class="index-video-url" slot="content">
                                        <video :src="scope.row.video_url" controls="controls" style="width: 300px;height: 300px;">
                                        </video>
                                    </div>
                                    <com-image mode="aspectFill" :src="scope.row.thumb_url"></com-image>
                                </el-tooltip>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="关联商品" min-width="180" align="center">
                    <template slot-scope="scope">
                        <div flex="box:first" v-if="scope.row.goods_info.length">
                            <div style="padding-right: 10px;">
                                <com-image mode="aspectFill" :src="scope.row.goods_info[0].cover_pic"></com-image>
                            </div>
                            <div flex="cross:top cross:top">
                                {{scope.row.goods_info[0].name}}<br />&yen;{{scope.row.goods_info[0].price}}
                            </div>

                        </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>
                    </template>
                </el-table-column>
                <el-table-column label="是否试看" width="120" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.can_see == 0" type="danger">禁止试看</el-tag>
                        <el-tooltip v-if="scope.row.can_see == 1" :content="scope.row.can_see_time == 0 ? '全程可试看' : '试看时长：' + scope.row.can_see_time + '秒'" placement="top" effect="light">
                            <el-tag type="success">允许试看</el-tag>
                        </el-tooltip>
                    </template>
                </el-table-column>

                <el-table-column label="操作" min-width="200" align="center">
                    <template slot-scope="scope">
                        <el-button circle size="mini" type="text" @click="toLook(scope.row,scope.row.id)">
                            编辑
                        </el-button>

                        <el-button circle size="mini" type="text" @click="chapterDelete(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="dialogText" :visible.sync="dialogFormVisible" center width="40%" :destroy-on-close="true">
        <el-form ref="ruleForm" :rules="rules" :model="ruleForm" label-width="100px" size="small">

            <el-form-item label="关联课程" prop="course_id">
                <el-select class="select" size="small" v-model="ruleForm.course_id" @change="getDirList" filterable placeholder="请选择课程">
                    <!-- <el-option key="all" label="请选择课程" value=""></el-option> -->
                    <el-option :key="item.id" :label="item.name" :value="item.id" v-for="(item, index) in courseList"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属目录" prop="dir_id">
                <el-select class="select" size="small" v-model="ruleForm.dir_id" filterable placeholder="请选择目录">
                    <el-option key="0" label="未分类" :value="0">未分类</el-option>
                    <el-option :key="item.id" :label="item.name" :value="item.id" v-for="(item, index) in directory_list">{{item.name}}</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input type="number" :min="1" v-model="ruleForm.sort" placeholder="请输入章节排序" style="width: 50%" @blur="blurInput">
                    <!-- <template slot="append">元</template> -->
                </el-input>
            </el-form-item>

            <el-form-item label="章节名称" prop="name">
                <el-input type="text" v-model="ruleForm.name" placeholder="请输入章节名称" style="width: 50%">
                </el-input>
            </el-form-item>

            <el-form-item label="视频类型" prop="type">
                <el-radio-group v-model="ruleForm.type">
                    <el-radio :label="1">视频 </el-radio>
                    <el-radio :label="2">音频 </el-radio>
                </el-radio-group>
            </el-form-item>
            <template v-if="ruleForm.type==1">
                <el-form-item label="视频上传方式">
                    <el-radio-group v-model="ruleForm.select_type">
                        <el-radio :label="1">选择文件</el-radio>
                        <el-radio :label="2">输入链接</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- 直接输入链接 -->
                <el-form-item label="视频" prop="video_url" v-if="ruleForm.select_type==2">
                    <label slot="label">视频
                        <el-tooltip class="item" effect="dark" content="支持格式mp4;支持编码H.264;视频大小不能超过50 MB,文件过大建议使用外链，请点击 输入链接" placement="top">
                            <i class="el-icon-info"></i>
                        </el-tooltip>
                    </label>
                    <el-input type="text" v-model="ruleForm.video_url" placeholder="请输入完整的视频链接" style="width: 80%" ></el-input>
                </el-form-item>
                <!-- 选择上传文件 -->
                <el-form-item label="视频" prop="video_url" v-if="ruleForm.select_type==1">
                    <label slot="label">视频
                        <el-tooltip class="item" effect="dark" content="支持格式mp4;支持编码H.264;视频大小不能超过50 MB,文件过大建议使用外链，请点击 输入链接" placement="top">
                            <i class="el-icon-info"></i>
                        </el-tooltip>
                    </label>
                    <com-attachment :type="'videos'" :multiple="false" :max="1" v-model="ruleForm.video_url" @selected="handleSelected">
                        <el-button size="mini">选择文件</el-button>
                        <span style="margin-left: 15px;">{{selectedVideo}}</span>
                    </com-attachment>
                </el-form-item>
            </template>
            <template v-else>
                <el-form-item label="音频上传方式">
                    <el-radio-group v-model="ruleForm.select_type">
                        <el-radio :label="1">选择文件</el-radio>
                        <el-radio :label="2">输入链接</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- 直接输入链接 -->
                <el-form-item label="音频" prop="video_url" v-if="ruleForm.select_type==2">
                    <label slot="label">音频
                        <el-tooltip class="item" effect="dark" content="支持格式mp3;音频大小不能超过50 MB,文件过大建议使用外链，请点击 输入链接" placement="top">
                            <i class="el-icon-info"></i>
                        </el-tooltip>
                    </label>
                    <el-input type="text" v-model="ruleForm.video_url" placeholder="请输入完整的音频链接" style="width: 80%"></el-input>
                </el-form-item>
                <!-- 选择上传文件 -->
                <el-form-item label="音频" prop="video_url" v-if="ruleForm.select_type==1">
                    <label slot="label">音频
                        <el-tooltip class="item" effect="dark" content="支持格式mp4;音频大小不能超过50 MB,文件过大建议使用外链，请点击 输入链接" placement="top">
                            <i class="el-icon-info"></i>
                        </el-tooltip>
                    </label>
                    <com-attachment :type="'voices'" :multiple="false" :max="1" v-model="ruleForm.video_url" @selected="handleSelected">
                        <el-button size="mini">选择文件</el-button>
                        <span style="margin-left: 15px;">{{selectedVideo}}</span>
                    </com-attachment>
                </el-form-item>
            </template>
            <el-form-item label="关联商品" prop="goods_list">
                <div style="display: inline-block;">
                    <div flex="cross:center">
                        <div style="margin-left: 10px;">
                            <com-dialog-select :multiple="true" @selected="goodsSelect" title="商品选择">
                                <el-button type="text">选择商品</el-button>
                            </com-dialog-select>
                        </div>
                    </div>
                </div>
            </el-form-item>

            <el-form-item prop="goods">
                <template>
                    <div style="color: #ff4544;">最多可添加5个商品</div>
                    <div style="max-height: 300px;overflow-y: auto">
                        <el-table :data="ruleForm.goods" :show-header="false" border>
                            <el-table-column label="">
                                <template slot-scope="scope">
                                    <div flex>
                                        <div style="padding-right: 10px;flex-grow: 0">
                                            <com-image mode="aspectFill" :src="scope.row.cover_pic"></com-image>
                                        </div>
                                        <div style="flex-grow: 1;">
                                            <com-ellipsis :line="2">{{scope.row.name}}
                                            </com-ellipsis>
                                        </div>
                                        <div style="flex-grow: 0;">
                                            <el-button @click="deleteGoods(scope.$index)" type="text" circle size="mini">
                                                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                                    <img src="/resources/img/common/del.png" alt="">
                                                </el-tooltip>
                                            </el-button>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </template>
            </el-form-item>

            <el-form-item label="是否试看" prop="can_see">
                <el-switch v-model="ruleForm.can_see" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>

            <el-form-item v-if="ruleForm.can_see == 1" label="试看时长" prop="can_see_time">
                <el-input placeholder="请输入试看时长" v-model="ruleForm.can_see_time" style="width: 200px; onInput="value=toNumber(value,0)">
                    <template slot="append">秒</template>
                </el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="display: flex;justify-content: center;">
            <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
            <el-button size="small" type="primary" @click="editSave('ruleForm')" :loading="editBtnLoading">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                can_see: 0,
                list: [],
                courseList: [],
                directory_list: [],
                searchData: {
                    keyword: '',
                    start_time: null,
                    end_time: null,
                },
                listLoading: false,
                editBtnLoading: false,
                page: 1,
                pageCount: 0,
                dialogLoading2: false,
                dialogText: '',
                edit: {
                    show: false,
                },
                dialogVisible: false, //充值弹窗
                lableLoading: false,
                dialogFormVisible: false,
                btnLoading: false,
                addStatus: 1, //默认是增加
                selectIndex: 0, //充值item的索引
                selectRow: {},

                ruleForm: {
                    goods_list: [],
                    goods: [],
                    sort: 1,
                    name: '',
                    video_url: '',
                    video_length: '',
                    type: 1,
                    select_type: 2,
                    can_see: 0,
                    course_id: "",
                    id: 0,
                    thumb_url: '',
                    can_see_time: 0
                },
                rules: {
                    name: [{
                        required: true,
                        message: '请输入章节名称',
                        trigger: 'blur'
                    }, ],
                    sort: [{
                        required: true,
                        message: '请输入章节排序',
                        trigger: 'blur'
                    }, ],
                    course_id: [{
                        required: true,
                        message: "请选择课程章节",
                        trigger: 'blur'
                    }, ]
                },
                selectedVideo: '', // 已选择的视频文件
                select_type: 1, // 是否直接输入视频链接
            };
        },

        methods: {
            // 课程联动获取目录列表
            getDirList(course_id) {
                var self = this;
                // console.log(course_id);
                request({
                    params: {
                        r: 'course/directory/list',
                        course_id: course_id,
                        list_type: 1
                    },
                    method: 'get',
                }).then(e => {
                    // console.log('directory_list: ', e); return null;
                    self.listLoading = false;
                    if (0 == e.data.code) {
                        self.directory_list = e.data.data;
                    } else {
                        this.$message({
                            message: e.data.msg,
                            type: 'error'
                        });
                    }
                }).catch(e => {
                    this.$message({
                        message: '网络错误',
                        type: 'error'
                    });
                });
            },
            handleSelected(res) {
                // console.log('视频信息：', res);
                // console.log("视频首图地址：", res[0].thumb_url)
                if (res.length) {
                    this.ruleForm.thumb_url = res[0].thumb_url;
                    this.selectedVideo = '已选择： ' + res[0].name;
                } else {
                    this.ruleForm.thumb_url = '';
                    this.selectedVideo = '';
                }
            },
            search() {
                this.page = 1;
                this.getList();
            },
            clereSearch() {
                this.searchData.keyword = '';
                this.searchData.start_time = null;
                this.searchData.end_time = null;
                this.page = 1;
                this.getList();
            },

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

            // 0.1 获取章节列表
            getList() {
                let self = this;
                self.listLoading = true;
                var course_id = getQuery('course_id');

                var params = {
                    r: 'course/default/chapters',
                    page: self.page,
                    ...this.searchData,
                }

                if (course_id) {
                    params.course_id = course_id;
                }
                console.log("params  :", params)
                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    console.log(e);
                    self.listLoading = false;
                    if (e.data.code == 0) {
                        self.list = e.data.data.list;
                        self.pageCount = e.data.data.page_count;
                    } else {
                        this.$message({
                            message: e.data.msg,
                            type: 'error'
                        });
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            //删除
            chapterDelete(row, index) {
                let self = this;
                self.$confirm('删除该章节, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.listLoading = true;
                    request({
                        params: {
                            r: 'course/chapter/delete',
                        },
                        method: 'post',
                        data: {
                            chapter_id: row.id,
                            course_id: row.course_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('已取消删除')
                });
            },
            switchStatus(row) {
                this.dialogLoading2 = true;
                //console.log("请求前得参数="+JSON.stringify(obj))
                request({
                    method: 'post',
                    params: {
                        r: 'course/chapter/switch-status',
                    },
                    data: {
                        id: row.id,
                        can_see: row.can_see,
                    }
                }).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 => {});
            },

            // 查看不可编辑
            toLook(row, index) {
                // console.log(row, index);
                this.selectIndex = index;
                this.selectRow = row;
                this.dialogFormVisible = true;
                for (key in row) {
                    for (key1 in this.ruleForm) {
                        if (key1 == key) {
                            this.ruleForm[key1] = row[key]
                        }
                    }
                }

                if (index == 0) {
                    console.log("add");
                    let self = this;
                    self.listLoading = true;
                    self.ruleForm = {
                        goods_list: [],
                        goods: [],
                        sort: 1,
                        name: '',
                        video_url: '',
                        type: 1,
                        can_see: 0,
                        course_id: "",
                        id: 0,
                        thumb_url: '',
                    };
                    self.ruleForm.goods_list = []
                    self.ruleForm.goods = []
                    self.dialogText = '创建章节';
                    request({
                        params: {
                            r: 'course/chapter/storage',
                            page: self.page,
                            keyword: this.keyword
                        },
                        method: 'get',
                    }).then(e => {
                        self.listLoading = false;
                        self.courseList = e.data.data.course_list;
                        console.log('=======')
                    }).catch(e => {
                        console.log(e);
                    });
                } else {
                    // console.log("edit");
                    let self = this;
                    self.listLoading = true;
                    self.dialogText = '编辑章节';
                    self.ruleForm = row;
                    self.ruleForm.select_type = 2;
                    // console.log("goods_list:", self.ruleForm.goods_list)
                    // console.log("goods:", self.ruleForm.goods)
                    self.ruleForm.goods_list = []
                    self.ruleForm.goods = []
                    request({
                        params: {
                            r: 'course/chapter/storage',
                            id: row.id,
                            course_id: row.course_id
                        },
                        method: 'get',
                    }).then(e => {
                        self.listLoading = false;
                        self.courseList = e.data.data.course_list;
                        self.ruleForm.goods = e.data.data.goods;
                        // console.log("goods:", self.ruleForm.goods, " type:", typeof self.ruleForm.goods)
                        self.ruleForm.goods_list = e.data.data.goods_list;
                        // console.log("goods_list:", self.ruleForm.goods_list, "type:", typeof self.ruleForm.goods_list)
                        console.log(self.ruleForm, '11');
                        self.directory_list = e.data.data.directory_list;
                    }).catch(e => {
                        console.log(e);
                    });
                }
                return false;
            },

            deleteGoods(index) {
                this.ruleForm.goods.splice(index, 1);
                console.log("goods_list:", this.ruleForm.goods_list, " typeof :", typeof this.ruleForm.goods_list)
                this.ruleForm.goods_list.splice(index, 1);
                console.log("deleteGoods:", this.ruleForm.goods_list)
            },
            goodsSelect(list) {
                // console.log("goodsSelect:", list, this.ruleForm, this.ruleForm.goods_list)
                for (let j in list) {
                    let item = list[j];
                    if (this.ruleForm.goods_list.length >= 5) {
                        this.$message.error('指定商品不能大于5个');
                        return;
                    }
                    let flag = true;
                    for (let i in this.ruleForm.goods_list) {
                        if (this.ruleForm.goods_list[i] == item.id) {
                            flag = false;
                            break;
                        }
                    }
                    if (flag) {
                        this.ruleForm.goods_list.push(item.id);
                        console.log("goods:", this.ruleForm.goods, " typeof:", typeof this.ruleForm.goods)
                        this.ruleForm.goods.push({
                            id: item.id,
                            name: item.name,
                            cover_pic: item.cover_pic,
                        });
                    }
                }

            },
            editSave(formName) {
                if (this.ruleForm.video_url == '' && this.ruleForm.audio_url == '') {
                    this.$message.error('请上传视频文件或音频文件');
                    return;
                }
                if (this.ruleForm.can_see === 1 && (this.ruleForm.can_see_time <= 0 || isEmpty(this.ruleForm.can_see_time))) {
                    this.$message.error('请设置试看时长');
                    return;
                }
                if (!this.ruleForm.dir_id) {
                    this.ruleForm.dir_id = 0;
                }
                // this.editBtnLoading = true;

                var params = {};
                var id = this.ruleForm.id;
                params = {
                    r: 'course/chapter/storage',
                };
                if (id) {
                    params.id = id;
                }
                var self = this;
                // console.log(self.ruleForm);return null;
                self.$refs[formName].validate((valid, obj) => {
                    if (valid) {
                        request({
                            params: params,
                            method: 'post',
                            data: self.ruleForm
                        }).then(response => {
                            self.editBtnLoading = false;
                            if (response.data.code == 0) {
                                self.$message.success(response.data.msg);
                                self.dialogFormVisible = false;
                                var video_url = self.ruleForm.video_url
                                var id = response.data.data.id
                                var type = self.ruleForm.type
                                self.ruleForm = {
                                    goods_list: [],
                                    goods: [],
                                    sort: 1,
                                    name: '',
                                    video_url: '',
                                    audio_url: '',
                                    can_see: 0,
                                    course_id: 0,
                                    id: 0,
                                }
                                self.goods = null;
                                self.level_list = [];
                                self.editCancel();
                                self.$emit('success', true);
                                console.log(111111)
                                console.log(type)
                                console.log(video_url)
                                console.log(id)
                                if(type==1){
                                    self.updateChapterDuration(video_url,id);
                                }
                                self.getList();


                            } else {
                                self.$message.error(response.data.msg);
                            }
                        }).catch(response => {
                            self.edit.btnLoading = false;
                        });
                    } else {
                        self.btnLoading = false;
                        var msg = '';
                        for (let index in obj) {
                            msg = msg + '*' + obj[index][0].message + ' ';
                        }
                        this.$message({
                            message: msg,
                            type: 'error'
                        });
                        return false;
                    }
                });
            },
            editCancel() {
                this.$emit('input', false);
            },

            blurInput(event) {
                event.target.value = Math.abs(parseInt(event.target.value));
            },
            closeAddChapter() {
                console.log('RRRRRRRRRRRRR');
            },
            updateChapterDuration(url,id){
                var audio = new Audio(url);
                    audio.addEventListener('loadedmetadata', function (e) {
                        console.log('时长为：',parseInt(audio.duration))
                        request({
                            params: {
                                r: 'course/chapter/update-chapter-duration',
                            },
                            method: 'post',
                            data: {
                                id:id,
                                duration:parseInt(audio.duration)
                            }
                        }).then(response => {
                            console.log(response.data);
                        }).catch(response => {
                        });
                    })
            }
        },

        mounted: function() {
            this.getList();
        }
    });
</script>