换一换 功能

<!--  -->
<template>
    <div class="">
        <div class="lun-top clearfix">
            {{lunData.title}}
            <div class="l-top-right" @click="exchange">
                <em>换一换</em>
                <i ></i>
            </div>
        </div>
        <div v-show="flag==1">
            <ul class="text-list" v-if="(lunData.bidList).length>0" >
                <li v-for="(item3,index) in lunData.bidList.slice(0,3)" :key="index" :id="addId(index)" v-if="index<3">
                    <el-row :gutter="20">
                        <el-col :span="17">
                            <div class="grid-content bg-purple">
                                <nuxt-link :to="/recrt/+item3.id">
                                    {{FILTER_FORMATER.wordNum(item3.bidTitle,15)}}
                                </nuxt-link>
                                <p class="xm-details" v-if="item3.bidInfo!=undefined&&item3.bidInfo!=''">
                                    {{FILTER_FORMATER.wordNum(item3.bidInfo,20)}}
                                </p>
                            </div>
                        </el-col>
                        <el-col :span="7"><div class="grid-content bg-purple">
                            <p class="text-time">截止时间</p>
                            <h5 v-if="item3&&item3.ycgBidTime!=undefined&&item3.ycgBidTime!=undefined!=''&&item3.ycgBidTime.bidEvaluationDeadlineTime!=undefined&&item3.ycgBidTime.bidEvaluationDeadlineTime!=''">{{formatDateTime(item3.ycgBidTime.bidEvaluationDeadlineTime).slice(0,10)}}</h5>
                        </div></el-col>
                    </el-row>
                </li>
            </ul>
            <ul class="text-list no-data" style="min-height: 309px; padding: 0" v-else>
                <img src="~static/img/error/no_data.png" alt="" style="margin-top: 80px">
            </ul>
        </div>
        <div v-show="flag==2">
            <ul class="text-list" v-if="(lunData.bidList).length>0 && (lunData.bidList).length>3">
                <li v-for="(item3,index) in lunData.bidList.slice(3,6)" :key="index" :id="addId(index)" v-if="index<3">
                    <el-row :gutter="20">
                        <el-col :span="17">
                            <div class="grid-content bg-purple">
                                <nuxt-link :to="/recrt/+item3.id">
                                    {{FILTER_FORMATER.wordNum(item3.bidTitle,15)}}
                                </nuxt-link>
                                <p class="xm-details" v-if="item3.bidInfo!=undefined&&item3.bidInfo!=''">
                                    {{FILTER_FORMATER.wordNum(item3.bidInfo,20)}}
                                </p>
                            </div>
                        </el-col>
                        <el-col :span="7"><div class="grid-content bg-purple">
                            <p class="text-time">截止时间</p>
                            <h5 v-if="item3&&item3.ycgBidTime!=undefined&&item3.ycgBidTime!=undefined!=''&&item3.ycgBidTime.bidEvaluationDeadlineTime!=undefined&&item3.ycgBidTime.bidEvaluationDeadlineTime!=''">{{formatDateTime(item3.ycgBidTime.bidEvaluationDeadlineTime).slice(0,10)}}</h5>
                        </div></el-col>
                    </el-row>
                </li>
            </ul>
            <ul class="text-list no-data" style="min-height: 309px; padding: 0" v-else>
                <img src="~static/img/error/no_data.png" alt="" style="margin-top: 80px">
            </ul>
        </div>
        <div v-show="flag==3">
            <ul class="text-list" v-if="(lunData.bidList).length>0 && (lunData.bidList).length>6" >
                <li v-for="(item3,index) in lunData.bidList.slice(6,9)" :key="index" :id="addId(index)" v-if="index<3">
                    <el-row :gutter="20">
                        <el-col :span="17">
                            <div class="grid-content bg-purple">
                                <nuxt-link :to="/recrt/+item3.id">
                                    {{FILTER_FORMATER.wordNum(item3.bidTitle,15)}}
                                </nuxt-link>
                                <p class="xm-details" v-if="item3.bidInfo!=undefined&&item3.bidInfo!=''">
                                    {{FILTER_FORMATER.wordNum(item3.bidInfo,20)}}
                                </p>
                            </div>
                        </el-col>
                        <el-col :span="7"><div class="grid-content bg-purple">
                            <p class="text-time">截止时间</p>
                            <h5 v-if="item3&&item3.ycgBidTime!=undefined&&item3.ycgBidTime!=undefined!=''&&item3.ycgBidTime.bidEvaluationDeadlineTime!=undefined&&item3.ycgBidTime.bidEvaluationDeadlineTime!=''">{{formatDateTime(item3.ycgBidTime.bidEvaluationDeadlineTime).slice(0,10)}}</h5>
                        </div></el-col>
                    </el-row>
                </li>
            </ul>
            <ul class="text-list no-data" style="min-height: 309px; padding: 0" v-else>
                <img src="~static/img/error/no_data.png" alt="" style="margin-top: 80px">
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    props: ['lunData'],
    components: {},
    data () {
        return {
            pageNumber: 1,
            pageSize: 3,
            total: 0,
            flag: 1,
            count: 1
        }
    },
    watch: {},
    computed: {},
    methods: {
        exchange () { // 备注
            this.count++
            if (this.count > 3) {
                this.count = 1
            }
            this.flag = this.count
        },

        addId (index) {
            return 'listId_' + index
        },

        replaceHtml (params) { //  去掉html 标签
            return params.replace(/</?.+?>/g, '').replace(/ /ig, '')
        },
        formatDateTime (unix) { // 转换时间戳
            var date = new Date(unix)// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-'
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
            var D = date.getDate() + ' '
            var h = date.getHours() + ':'
            var m = date.getMinutes() + ':'
            var s = date.getSeconds()
            return Y + M + D + h + m + s
        }
    },
    created () {
    },
    mounted () {
    }
}
</script>

<style lang="scss">
    .lun-top{
        padding: 0 10px;
        height: 50px;
        //padding-top: 13px;
        line-height: 50px;
        background: $leftBgColor;
        color: $white;
        font-size: $max-font-size;
        .l-top-right{
            float: right;
            font-size: $default-font-size;
            color: $huanyihuan;
            cursor: pointer;
            em,i{
                display: inline-block;
                vertical-align: middle;
                cursor: pointer;
            }
            i{
                 20px;
                height: 15px;
                background: url("~static/img/ycg_icon.png") 2px -20px no-repeat;
            }
            button{
                i{
                    margin-top: 17px;
                }
            }
        }
    }
    .text-list{
        height: 309px;
        border: 1px solid $inputBor;
        border-top: none;
        //border-bottom: none;
        li{
            padding: 20px 10px;
            border-bottom: 1px solid $inputBor;
            a{
                color: $titleColor;
            }
            a:hover{
                color: $leftBgColor;
            }
            .xm-details{
                margin-top: 10px;
                font-size: $min-font-size;
                min-height: 32.75px;
            }
            h5{
                margin-top: 10px;
                font-size: $default-font-size;
                color: $titleColor;
            }
        }
        #listId_2{
            border-bottom: none;
        }
    }
</style>