inqueryList.vue

<template>
    <section  class="inquery-list">
        <div class="o-tabnav">
            <van-tabs :active="tab" :line-width="lineWidth" @change="tabChange">
                <van-tab title="全部"></van-tab>
                <van-tab title="待处理"></van-tab>
                <van-tab title="已答复"></van-tab>
            </van-tabs>
        </div>
        <div class="in-data" v-if="lists.length>0">
            <div class="in-group" v-for="item in lists">
                <div class="ig-t">{{item.create_time}}<span class="f-rrr fr" :class="{'f-rrr':item.status==0,'f-gree':item.status==1}">{{item.status_name}}</span></div>
                <p>{{item.content}}</p>
            </div>
        </div>
        <div v-else>
            <van-empty image="http://img.ichunt.com/images/ichunt/h5_public/icon_1.png"   description="抱歉，暂无询价结果！" />
        </div>
         <van-loading type="spinner" color="#000" class="loading-background" v-if="loading" />
    </section>
</template>

<script>
    import Vue from 'vue';
    import {mapState} from 'vuex'
    import { Loading,Tab,Tabs,Empty} from 'vant';

    Vue.use(Loading).use(Tab).use(Tabs).use(Empty)
   

    export default {
        name: 'inqueryList',
        data() {
            return {
               lineWidth:55,
               tab:"0",
               status:""
            }
        },
        computed: {
            ...mapState({
                loading: state => state.inqueryList.loading,
                lists: state => state.inqueryList.lists,
              
            })
        },
        watch: {

        },
        created() {
            this.$store.dispatch({
                type: 'getInqueryList'
            })
           
        },
        methods: {
             tabChange(index) {
                console.log(index)
                if(index==1){
                    this.status=0
                }else if(index==2){
                    this.status=1
                }else{
                    this.status=99
                }
                this.$store.dispatch({
                    type: 'getInqueryList',
                    status:this.status
                })
            },
        },
        components: {
            
        }
    }
</script>


<style scoped>
    @import "../../assets/css/user/inqueryList.min.css";
</style>