mteacher/src/views/visitManager/visitList.vue

<template>
    <div class="visitList">
        <van-sticky>
            <m-header v-if="headerStatus" :isFixed="false" />
            <van-tabs v-model="active" @change="tabChange" title-active-color="#000000" title-inactive-color="#808080" color="#01C1B5" class="van-hairline--bottom">
                <van-tab title="待回访列表" name="all">
                  <beforeVisitList />
                </van-tab>
                <van-tab title="回访记录" name="visited">
                  <afterVisitList />
                </van-tab>
            </van-tabs>
        </van-sticky>
    </div>
</template>
<script>
import MHeader from "@/components/MHeader";
import { browser } from "@/common/common";
import afterVisitList from './afterVisitList.vue';
import beforeVisitList from './beforeVisitList.vue';
export default {
    components: { MHeader, afterVisitList, beforeVisitList },
    data() {
        const activeType = sessionStorage.getItem('visited')
        sessionStorage.removeItem('visited')
        return {
            headerStatus: true,
            active: activeType || 'all',
            list: [],
            loading: false,
            finished: false,
            params: {
                page: 1,
                rows: 20,
            },
            dataShow: true,
            // 类型为回访学员时
            formatEndTime: null,
            formatStartTime: null,
            trainNum: 0,
            playTime: 0,
        };
    },
    created() {
		this.tenantId = sessionStorage.getItem('tenantId') || null
	},
    async mounted() {
        let params = this.$route.query;
        if (params.Authorization) {
            localStorage.setItem("Authorization", decodeURI(params.Authorization));
            localStorage.setItem("userInfo", decodeURI(params.Authorization));
        }
        if (browser().android || browser().iPhone) {
            this.headerStatus = false;
        }
        document.title = '回访记录'
    },
    methods: {
      tabChange(val) {
        sessionStorage.setItem('visited', val)
      }
    },
};
</script>
<style lang="less" scoped>
@import url("../../assets/commonLess/variable.less");

.visitList {
    min-height: 100vh;
    // .visitTime {
    //     .van-cell__right-icon{
    //     // line-height: .36rem;
    //     }
    // }
    /deep/.van-dropdown-menu__bar {
        box-shadow: none;
    }
}

/deep/.van-tab {
    font-size: .16rem;
}
/deep/.search .van-search {
    margin: 10px 0 ;
}

.data-content {
    margin: .1rem .15rem 0;
    border-radius: .1rem;
    overflow: hidden;
    .logo {
        width: 0.40rem;
        height: 0.4rem;
        // margin-right: 0.12rem;
        border-radius: 100%;
    }
    &:first-child {
        margin-top: 0;
    }
    .van-row-item {
        display: flex;
        align-items: center;
    }
    /deep/.van-grid-item__content {
        padding: .03rem
    }
    /deep/.van-grid-item__content {
        background-color: transparent;
    }
    /deep/.van-grid-item__icon-wrapper {
        font-size: .15rem;
        font-weight: 500;
        color: #000;
    }
    /deep/.van-grid-item__text {
        padding-top: .03rem;
        font-size: .12rem;
        color: #808080;
    }
    .teacher_info {
        display: flex;
        align-items: center;
        img {
            margin-right: .1rem;
            width: .4rem;
            height: .4rem;
            border-radius: 50%;
        }
    }
}
.btnWrap {
  display: flex;
  flex-direction: row;
  .cancelBtn {
    height: 48px;
    line-height: 48px;
    background: #eeeff3;
    color: @mColor;
    text-align: center;
    width: 100%;
  }
  .okBtn {
    width: 100%;
    height: 48px;
    line-height: 48px;
    background: @mColor;
    color: #fff;
    text-align: center;
  }
}

</style>