dataCenter.vue

<template>
    <div class="container dataCenter form-table">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>当前位置</el-breadcrumb-item>
            <el-breadcrumb-item>{{this.$route.name[0]}}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="assetsContent">
            <div class="formDiv">
                <el-form :inline="true" :model="formInline" class="search-form-inline">
                    <el-form-item label="用户ID:">
                        <el-input v-model="formInline.userId" placeholder="精准查询" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <div class="btn-group marginL10">
                            <button class="vpnButton primary" type="button" @click="search" size="mini">查询</button >
                            <button class="vpnButton cancel" type="button" @click="cancel" size="mini">清空</button>
                        </div>
                    </el-form-item>
                    <el-form-item class="pull-right">
                        <div class="btn-group marginL10">
                            <button class="vpnButton primary" type="button"  style="width: 95px" @click="newFiles" >添加视频资讯</button>
                            <!--<button class="vpnButton cancel" type="button" @click="delSelect">批量删除</button>-->
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <div class="assetsList">
                <el-scrollbar>
                    <el-table :data="tableData"style="width: 100%"size="mini"class="commonTable"height="627px">
                        <el-table-column prop="userId" label="用户ID" align="center" min-width="6%"></el-table-column>
                        <el-table-column prop="zxid" label="资讯ID" align="center" min-width="8%"  :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="zxLikes" label="获赞数" align="center" min-width="8%"  :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="auditStatus" label="审核" align="center" min-width="8%"  :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span v-if="scope.row.auditStatus == '0'">未审核</span>
                                <span v-if="scope.row.auditStatus == '1'">已审核</span>
                                <span v-if="scope.row.auditStatus == '2'">驳回</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="zxField" label="资讯内容" align="center" min-width="8%"  :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="zxDate" label="创建时间" align="center" min-width="8%"  :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column label="操作"align="center"min-width="15%" >
                            <template slot-scope="scope">
                                <el-button type="text"size="small"style="color: #70B603"  @click="editDetail(scope.row)">审核</el-button>
                                <el-button type="text"size="small"style="color: #ff190c" @click="deleteDetail(scope.row)">驳回</el-button>
                                <el-button type="text"size="small" @click="upDetail(scope.row)">查看详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-scrollbar>
            </div>
            <el-pagination background class="alignc" @current-change="handleCurrentChange" :current-page="page.currentPage" :page-size="page.pageSize" layout="total, prev, pager, next, jumper" :total="page.total">
            </el-pagination>
        </div>
        <el-dialog class="appFormCommon"  :close-on-click-modal="false"  :visible.sync="dialogDataDetail"  @close="resetForm('formDataApp')" >
            <div class="managerInfo">
                <div class="message-box">
                    <div class="message-box-header">
                        <div class="message-box-title">
                            <span>{{title}}</span>
                        </div>
                        <i class="icon icon-close" @click="dialogDataDetail = false"></i>
                    </div>
                    <div class="message-box-content">
                        <el-form class="demoFormApp" ref="formDataApp" :model="formDataApp"  label-width="125px">
                            <el-form-item v-if="!displayType" label="邀请码：">
                                <el-input  v-model="formDataApp.inviteCode "></el-input>
                            </el-form-item>
                            <el-form-item  v-if="displayType"  label="用户ID：">
                                <el-input :disabled="true"  v-model="formDataApp.userId "></el-input>
                            </el-form-item>
                            <el-form-item  v-if="displayType"  label="资讯ID：">
                                <el-input :disabled="true"  v-model="formDataApp.zxid "></el-input>
                            </el-form-item>
                            <el-upload
                                    class="avatar-uploader"
                                    action=""
                                    :disabled="distype"
                                    v-bind:show-file-list="false"
                                    :http-request="handleUploadImg"
                                    v-bind:before-upload="beforeUploadVideo">
                                <video v-if="videoForm.showVideoPath !='' && !videoFlag"
                                v-bind:src="videoForm.showVideoPath"
                                class="avatar video-avatar"
                                controls="controls" style="width: 300px">
                                您的浏览器不支持视频播放
                                </video>
                                <i v-else-if="videoForm.showVideoPath =='' && !videoFlag"
                                   class="el-icon-plus avatar-uploader-icon"></i>
                                <el-progress style="margin-left: 64px"
                                             v-bind:percentage="videoUploadPercent"
                                             type="circle" v-if="videoFlag == true"
                                             :percentage="0"></el-progress>
                            </el-upload>
                        </el-form>
                    </div>
                    <div class="message-box-footer" slot="footer" >
                        <div class="message-box-btn btn-group">
                                <button  class="vpnButton primary" @click="submitForm('formDataApp')" type="button">确定</button>
                                <button  class="vpnButton cancel" @click="resetForm('formDataApp')" type="button">取消</button>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>


<script>
    import "../../../style/table.scss"
    //删除弹框
    import dialogDel from '../../../components/dialog/dialogDel'
    import workService from '../../../services/fos/work.service'
    let workHttps = new workService()
    import qs from "qs";
    export default {
        data() {
            return {
                dialogDataDetail:false,
                formDataApp:{
                },
                page: {currentPage: 1, pageSize: 14, total: 1},
                formInline: {
                    userId: '',
                },
                displayType:true,
                tableData:[],
                visible: false,
                cheackAllChecked: false,
                clCode:0,
                videoFlag: false,
                distype:false,
                //是否显示进度条
                videoUploadPercent: "",
                //进度条的进度，
                isShowUploadVideo: false,
                //显示上传按钮
                videoForm: {
                    showVideoPath: ''
                },
                title:'',
                dataList:[],
                files:'',
                param:'',
                playVideoUrl:'',
                objurl:'',
            }
        },
        components: {},
        mounted() {
            this.search()
        },
        methods: {
            handleCurrentChange(val) {
                this.page.currentPage = val;
                let param = this.getSearchQuery()
                this.getDataDetail(param)
            },

            //查询
            search(){
                let vm = this;
                let param = vm.getSearchQuery()
                vm.getDataDetail(param)
            },
            cancel(){
                this.formInline = {}
                this.search()
            },
            //获取当前参数
            getSearchQuery(){
                let vm = this
                let searchObj = {
                    "pageNo":vm.page.currentPage,
                    "pageSize":vm.page.pageSize
                }
                for(let key in vm.formInline){
                    if(vm.formInline[key]){
                        //key是名称
                        searchObj[key] = vm.formInline[key]
                    }
                }
                return searchObj
            },
            //获取信息列表
            getDataDetail(param) {
                //请求接口的方法
                let vm = this;
                //请求接口的方法
                //  let requestObj = {page: 1,limit: 100000000}
                workHttps.getShopZx(param).then((res)=>{
                    vm.tableData = res.data.list
                    vm.page.total = Number(res.data.total)
                }).catch((err=>{
                    console.log(err)
                }))
            },

            //审核通过
            editDetail(val){
                let vm = this;
                let obj = {
                    approval:1,
                    zxid:val.zxid
                }
                var param = qs.stringify(obj)
                workHttps.setToExamine(param).then((res)=>{
                   if(res.code == 0){
                     vm.search()
                     vm.$message.success(res.msg)
                   }
                }).catch((err=>{
                    console.log(err)
                }))
            },

            //驳回
            deleteDetail(val){
                let vm = this;
                let obj = {
                    approval:2,
                    zxid:val.zxid
                }
                var param = qs.stringify(obj)
                workHttps.setToExamine(param).then((res)=>{
                    if(res.code == 0){
                        vm.search()
                        vm.$message.success(res.msg)
                    }
                }).catch((err=>{
                    console.log(err)
                }))
            },


            //获取信息列表
            upDetail(val) {
                //请求接口的方法
                let vm = this;
                vm.distype = true
                vm.displayType = true
                this.title = "查看视频资讯"
                let obj = {
                    pageNo:1,
                    pageSize:1,
                    userId:val.userId
                }
                //请求接口的方法
                workHttps.getShopZx(obj).then((res)=>{
                    if(res.code == 0){
                        vm.dialogDataDetail= true
                        vm.videoForm.showVideoPath="https://www.xitiansen.com/" + res.data.list[0].zxUrl;
                        // var url = URL.createObjectURL(res.data.list[0].zxUrl);
                        // document.getElementById("aa").src=url;
                        // let player = document.querySelector('#root')
                        // var str= res.data.list[0].zxUrl;
                        // player.src = str
                        // player.play()
                       // vm.videoForm.showVideoPath = str
                        vm.formDataApp = res.data.list[0]
                    }
                }).catch((err=>{
                    console.log(err)
                }))
            },

            newFiles(){
                let vm = this
                vm.dialogDataDetail = true
                vm.title = "添加视频资讯"
                vm.displayType = false
                vm.distype = false
            },
            //取消按钮
            resetForm(formData){
                this.$refs[formData].resetFields();
                this.dialogDataDetail = false
                this.formDataApp = {}
                this.videoForm.showVideoPath = ""
            },

            //上传前回调
            beforeUploadVideo(file) {
                var fileSize = file.size / 1024 / 1024 < 50;
                if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) == -1) {
                    layer.msg("请上传正确的视频格式");
                    return false;
                }
                if (!fileSize) {
                    layer.msg("视频大小不能超过50MB");
                    return false;
                }
                this.videoForm.showVideoPath = file
                this.imagePreview(this.videoForm.showVideoPath, 2)
                this.isShowUploadVideo = false;
            },

            imagePreview(file) {
                var self = this
                //定义一个文件阅读器
                var reader = new FileReader()
                //文件装载后将其显示在图片预览里
                reader.onload = function (e) {
                    //将bade64位图片保存至数组里供上面图片显示
                        self.videoForm.showVideoPath = e.target.result
                }
                reader.readAsDataURL(file)
            },


            handleUploadImg(file){
                let vm = this;
                let obj = {
                    inviteCode:this.formDataApp.inviteCode
                }
                 vm.files = new FormData();
                vm.files.append("files", file.file);
                 vm.param = qs.stringify(obj)
                // workHttps.setupload(formData,param).then((res)=>{
                //     if(res.code == 0){
                //         vm.distype = true
                //        // vm.videoForm.showVideoPath = res.videoUrl
                //         vm.$message.success(res.msg)
                //     }
                // }).catch((err=>{
                //     console.log(err)
                // }))
            },

            submitForm(){
                let vm = this
                workHttps.setupload(vm.files,vm.param).then((res)=>{
                    if(res.code == 0){
                        vm.distype = true
                       // vm.videoForm.showVideoPath = res.videoUrl
                        this.dialogDataDetail = false
                        vm.search()
                        vm.$message.success(res.msg)
                    }
                }).catch((err=>{
                    console.log(err)
                }))
            },

        },

    }
</script>

<style lang="scss" scoped>

                     /*.el-upload {*/
                        /*border: 1px dashed #6e6e6a;*/
                        /*border-radius: 6px;*/
                        /*cursor: pointer;*/
                        /*position: relative;*/
                        /*overflow: hidden;*/
                         /*width: 300px;*/
                    /*}*/
                    /*.avatar-uploader .el-upload:hover {*/
                        /*border-color: #409EFF;*/
                    /*}*/
                    /*.avatar-uploader-icon {*/
                        /*font-size: 28px;*/
                        /*color: #8c939d;*/
                        /*width: 300px;*/
                        /*height: 178px;*/
                        /*line-height: 178px;*/
                        /*text-align: center;*/
                        /*border: 1px dashed #080408;*/

                    /*}*/
                    /*.avatar {*/
                        /*width: 178px;*/
                        /*height: 178px;*/
                        /*display: block;*/
                        /*border: 1px dashed #ff190c;*/
                    /*}*/

                    /*.el-progress el-progress--circle{*/
                        /*.el-progress__text{*/
                            /*padding-left: 64px!important;*/
                        /*}*/
                    /*}*/

                     .avatar-uploader .el-upload {
                         border: 1px dashed #d9d9d9;
                         border-radius: 6px;
                         cursor: pointer;
                         position: relative;
                         overflow: hidden;
                         padding-left: 125px;
                     }
                     .avatar-uploader .el-upload:hover {
                         border-color: #409EFF;
                     }
                     .avatar-uploader{
                         padding-left: 125px;
                     }
                     .avatar-uploader-icon {
                         font-size: 28px;
                         color: #8c939d;
                         width: 300px;
                         height: 178px;
                         line-height: 178px;
                         text-align: center;
                         border: 1px dashed #6e6e6a;
                     }
                     .avatar {
                         width: 178px;
                         height: 178px;
                         display: block;
                     }

</style>