crm/resources/wechat/src/components/approverecord.vue

<template>
<div @click="approvetap" class="approverecord">
    <div @click.stop="dothis" class="approverecordlayer">
        <div class="titlebox">
            <div class="staffmsgbox clearfix fontfpr font28 center">
                <div @click="setlastypetap(1)" :class="{'nowstafftit':lastype=='1'}" class="pull-left center width50_ ">话术审核</div>
                <div @click="setlastypetap(2)" :class="{'nowstafftit':lastype=='2'}" class="pull-left width50_ relative ">回答审核</div>
            </div>
            <div  class="clearfix teamerbox fontfpr font28 color384855">
                <div @click="setwordtap('0')" :class="{'nowteam':skillstate==0}" class="pull-left relative ">全部</div>
                <div @click="setwordtap('1')" :class="{'nowteam':skillstate==1}" class="pull-left relative ">通过</div>
                <div @click="setwordtap('2')" :class="{'nowteam':skillstate==2}" class="pull-left relative ">驳回</div>
            </div>
            <div class="bgbox bgF0F4F7"></div>
        </div>
        <mescroll-vue ref="wordListBox" class="managementmescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
            <div v-if='lastype==1'>
                <div v-for="item in wordlist"  :key="item.id">
                    <div class="everyshareword" >
                        <div class="myquestion clearfix">
                            <div class="answerlogo font28 fontfpr colorfff lh36 center pull-left">问</div>
                            <div class="pull-left rightanswerbox">
                                <div class="font28 fontfpr lh40 color384855">{{item.title}}</div>
                                <div v-show="!!item.imgs" class="imgarrbox clearfix">
                                    <img v-for="(imgitem,idx) in item.imgs" @click.stop="lookimgtap(imgitem)" :key="idx" class="pull-left" :src="imgitem"  />
                                </div>
                            </div>
                        </div>
                        <div class="myanswerbox clearfix">
                            <div class="answerlogo font28 fontfpr colorfff lh36 center pull-left">答</div>
                            <div class="pull-left rightanswerbox">
                                <div class="ellipsisTwo fontfpr font28 color384855 lh40">{{item.content}}</div>
                                <div class="clearfix relative font24 fontfpr colorB6CADE lh48 otherfootbox">
                                    <div class="pull-left">上传时间：{{item.addtime.split(' ')[0]}}</div>
                                    <div class="pull-right approvebtn" :class="{'color249EFB':item.status=='审核通过','colorF54D64':item.status=='被驳回'}">{{item.status}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bgbox"></div>
                </div>
                <nonedata :datashow="datashow" :len="wordlist.length"></nonedata>
            </div>
                
            <div v-if='lastype==2'>
                <div v-for="item in commentlist"  :key="item.id">
                    <div class="everyanswerbox clearfix relative">
                        <div class="answerlogo font28 fontfpr colorfff lh36 center pull-left">答</div>
                        <div class="pull-left rightanswerbox">
                            <div class="ellipsisTwo fontfpr font28 color384855 lh40">{{item.comments}}</div>
                            <div class="questionmsg">
                                <div class="font24 fontfpr lh34 color9DB6CF">问题：{{item.title}}</div>
                                <div v-show="!!item.imgs" class="imgarrbox clearfix">
                                    <img v-for="(imgitem,idx) in item.imgs" @click.stop="lookimgtap(imgitem)" :key="idx" class="pull-left" :src="imgitem"  />
                                </div>
                            </div>
                            <div class="clearfix relative font24 fontfpr colorB6CADE lh48">
                                <div class="pull-left">回答时间：{{item.addtime.split(' ')[0]}}</div>
                                <div class="pull-right approvebtn" :class="{'color249EFB':item.status=='审核通过','colorF54D64':item.status=='被驳回'}">{{item.status}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="bgbox"></div>
                </div>
                <nonedata :datashow="datashow" :len="commentlist.length"></nonedata>
            </div>
        </mescroll-vue>
    </div>
</div>
</template>
<script>
import MescrollVue from "mescroll.js/mescroll.vue";
import nonedata from "@/components/nonedata";
import { ImagePreview } from 'vant';
import { approveTalkskill,approveTalkskillComment} from '@/api/mine/management';
export default {
   name:'approverecord',
    data(){
        return {
            lastype:1,
            skillstate:0,
            datashow:false,
            wordlist:[],
            commentlist:[],
            mescroll: null, // mescroll实例对象
            mescrollDown: {}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
            mescrollUp: {
                // 上拉加载的配置.
                callback: this.recordfun, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
                //以下是一些常用的配置,当然不写也可以的.
                page: {
                    num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                    size: 10, //每页数据条数,默认10
                },
                htmlNodata:'',
                noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
                // 避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
                // 这就是为什么无更多数据有时候不显示的原因
            },
        };
    },
    components: {
        MescrollVue,
        [ImagePreview.Component.name]: ImagePreview.Component,
        nonedata:nonedata
    },
    created(){
    },
    methods:{
        dothis(){},
        approvetap(){
            this.$emit('approvetap1');
        },
        setlastypetap:function (num) {
            this.lastype=num;
            this.datashow=false;
            if(this.lastype==1&&this.wordlist.length==0){
                this.mescroll.resetUpScroll();
            }else if(this.lastype==2&&this.commentlist.length==0){
                this.mescroll.resetUpScroll();
            }
        },
        lookimgtap(img){
            ImagePreview([
                img,
            ]);
        },
        setwordtap(num){
            
            if(this.skillstate!=num){
                this.skillstate=num;
                this.mescroll.resetUpScroll();
            }
            
        },
        mescrollInit(mescroll) {
            this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
        },
        recordfun(page, mescroll){
            const that=this;
            let data={
                page:page.num,
                limit:10,
                status:that.skillstate
            };
            let urlstr=this.lastype==1?approveTalkskill:approveTalkskillComment;
            urlstr(data).then(res=>{
                if(res.data.code==0){
                    if(that.lastype==1){
                        if (page.num === 1){
                            that.wordlist=[];
                        }
                        
                        that.datashow=true;
                        that.wordlist = that.wordlist.concat(res.data.data);
                        // 数据渲染成功后,隐藏下拉刷新的状态
                        that.$nextTick(() => {
                            mescroll.endSuccess(res.data.data.length);
                        });
                    }else{
                        if (page.num === 1){
                            that.commentlist=[];
                        }
                        
                        that.datashow=true;
                        that.commentlist = that.commentlist.concat(res.data.data);
                        // 数据渲染成功后,隐藏下拉刷新的状态
                        that.$nextTick(() => {
                            mescroll.endSuccess(res.data.data.length);
                        });
                    }
                    

                }
            })
        },

    },
    mounted(){
    }
}
</script>
<style lang="less" scoped>
.approverecord{
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.35);  
}
.approverecordlayer{
    display: block;
    width: 710px;
    height: 80%;
    overflow: hidden;
    padding-top: 200px;
    position: absolute;
    left: 20px;
    top: 50%;
    box-sizing: border-box;
    background: #ffffff;
    transform: translateY(-50%);
}
.titlebox{
    position: fixed;
    width: 100%;
    height: 208px;
    background: #ffffff;
    z-index: 8;
    top: 0;
    left: 0;
}
.staffmsgbox {
    display: block;
    width: 100%;
    height: 98px;
    box-sizing: content-box;
    border-bottom: 2px solid #B6CADE;
    color: rgba(0, 0, 0, 0.85);
}

.staffmsgbox div {
    position: relative;
    line-height: 98px;
}

.staffmsgbox div.nowstafftit {
    position: relative;
    color: #249EFB;
    font-size: 36px;
}

.staffmsgbox div.nowstafftit::before {
    content: " ";
    display: block;
    width: 100%;
    height: 2px;
    background-color: #249EFB;
    position: absolute;
    bottom: -2px;
    left: 0%;
}

.staffmsgbox div span {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #F54D64;
    border-radius: 50%;
    top: 24px;
    right: 52px;
}

.teamerbox {
    display: block;
    width: 100%;
    padding: 22px 0;
    div.recordbox{
        margin-right: 40px;
    }
}

.teamerbox div {
    display: block;
    min-width: 128px;
    padding: 0 16px;
    text-align: center;
    height: 48px;
    line-height: 48px;
    background: #D4E4ED;
    border-radius: 2px;
    margin-left: 40px;
}

.teamerbox div.nowteam {
    background-color: #249EFB;
    border-radius: 4px;
    color: #ffffff;
}
.everyshareword{
    display: block;
    width: 100%;
    padding: 36px 20px 24px;
    position: relative;
    .myquestion{
        display: block;
        width: 100%;
        border-bottom: 1px solid #DDEEFB;/*no*/
        padding-right: 20px;
        padding-bottom: 24px;
        padding-left: 42px;
        box-sizing: border-box;
        position: relative;
        .answerlogo{
            display:block;
            width: 32px;
            height: 32px;
            background: #249efb;
            border-radius: 4px;
            position: absolute;
            top: 4px;
            left: 4px;
        }
        .rightanswerbox{
            display:block;
            width: 100%;
        }
        .imgarrbox{
            display:block;
            margin-top:18px;
        }
        .imgarrbox img{
            display:block;
            width: 76px;
            height: 76px;
            border: 1px solid #F0F4F7;/*no*/
            margin-right:12px;
        }
    }
    .myanswerbox{
        display: block;
        width: 100%;
        padding: 20px 20px 0 42px;
        position: relative;
        .answerlogo{
            display:block;
            width: 32px;
            height: 32px;
            background: #F54D64;
            border-radius: 4px;
            position: absolute;
            top: 20px;
            left: 4px;
        }
        .rightanswerbox{
            display:block;
            width: 100%;
        }
        .otherfootbox{
            margin-top: 20px;
        }
        .approvebtn{
            display:block;
            padding: 0 16px;
            height:48px;
            font-size:26px;
            line-height:48px;
        }
    }
}
.everyanswerbox{
    display:block;
    width:100%;
    padding: 36px 20px 24px;
    .answerlogo{
        display:block;
        width: 32px;
        height: 32px;
        background: #F54D64;
        border-radius: 4px;
        position: relative;
        top: 4px;
    }
    .rightanswerbox{
        display:block;
        margin-left:10px;
        width:620px;
    }
    .questionmsg{
        display:block;
        width:100%;
        padding: 16px 20px;
        background: #F0F4F7;
        border-radius: 6px;
        margin:18px 0;
        .imgarrbox{
            display:block;
            margin-top:18px;
            img{
                display:block;
                width: 76px;
                height: 76px;
                border: 1px solid #F0F4F7;/*no*/
                margin-right:12px;
            }
        }
    }
    .approvebtn{
        display:block;
        height:48px;
        font-size:26px;
        line-height:48px;
    }
}
</style>