xx-worker-applets/src/pages/message/message.vue

<template>
    <app-layout v-model="bodyPt" title="消息" btnType="unset">
        <scroll-view class="tab-cate-group" :style="{ top: bodyPt + 'px' }" scroll-x>
            <view class="cate-item" :class="{ active: tabIndex == 0 }" @click="tabIndex = 0">公告</view>
            <view class="cate-item" :class="{ active: tabIndex == 1 }" @click="tabIndex = 1">平台规则</view>
            <view class="cate-item" :class="{ active: tabIndex == 2 }" @click="tabIndex = 2">帮助中心</view>
            <view class="cate-item" :class="{ active: tabIndex == 3 }" @click="tabIndex = 3">平台消息</view>
        </scroll-view>
        <view class="message-container">
            <swiper :current="tabIndex" :style="{ height: tabHeight + 'px' }" @change="changeTab">
                <swiper-item>
                    <view class="tab0">
                        <view class="message-item" v-for="(item, index) in list" :key="index">
                            <text class="title limit-line clamp-1" :class="{ active: !item.read }">{{ item.title }}</text>
                            <text class="date">{{ item.date }}</text>
                        </view>
                    </view>
                </swiper-item>
                <swiper-item>
                    <view class="tab1">
                        <view class="message-item" v-for="(item, index) in list" :key="index">
                            <text class="title limit-line clamp-1" :class="{ active: !item.read }">{{ item.title }}</text>
                            <text class="date">{{ item.date }}</text>
                        </view>
                    </view>
                </swiper-item>
                <swiper-item>
                    <view class="tab2">
                        <view class="message-item" v-for="(item, index) in list" :key="index">
                            <text class="title limit-line clamp-1" :class="{ active: !item.read }">{{ item.title }}</text>
                            <text class="date">{{ item.date }}</text>
                        </view>
                    </view>
                </swiper-item>
                <swiper-item>
                    <view class="tab3">
                        <view class="message-item" v-for="(item, index) in list" :key="index">
                            <text class="title limit-line clamp-1" :class="{ active: !item.read }">{{ item.title }}</text>
                            <text class="date">{{ item.date }}</text>
                        </view>
                    </view>
                </swiper-item>
            </swiper>
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
export default {
    name: "message",
    data() {
        return {
            utils: this.$utils,
            bodyPt: 0,
            tabIndex: 0,
            tabHeight: 0,
            list: [
                {
                    id: 1,
                    title: "接单后要求多久与客户预约安装时间？",
                    date: "2022-11-01 18:14",
                    read: false,
                },
                {
                    id: 2,
                    title: "接单后要求多久与客户预约安装时间？",
                    date: "2022-11-01 18:14",
                    read: true,
                },
                {
                    id: 3,
                    title: "接单后要求多久与客户预约安装时间？",
                    date: "2022-11-01 18:14",
                    read: true,
                },
                {
                    id: 4,
                    title: "接单后要求多久与客户预约安装时间？",
                    date: "2022-11-01 18:14",
                    read: true,
                },
            ],
        };
    },
    components: {
        AppLayout,
    },
    computed: {},
    onLoad() {
        this.$nextTick(() => {
            this.setTabHeight();
        });
    },
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        switchTab(index) {
            this.tabIndex = index;
            this.$nextTick(() => {
                this.setTabHeight();
            });
        },
        changeTab(e) {
            this.switchTab(e.detail.current);
        },
        setTabHeight() {
            let element = ".tab" + this.tabIndex;
            let query = uni.createSelectorQuery().in(this);
            query.select(element).boundingClientRect();
            query.exec((res) => {
                if (res && res[0]) {
                    this.tabHeight = res[0].height;
                }
            });
        },
    },
};
</script>

<style lang="less" scoped>
.tab-cate-group {
    z-index: 15;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0 40rpx;
    background-color: #ffffff;
    .cate-item {
        display: inline-block;
        width: 167rpx;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        font-size: 30rpx;
        font-weight: bold;
        color: #999999;
        box-sizing: border-box;
    }
    .cate-item.active {
        color: #8b9aeb;
        border-bottom: 7rpx solid #8b9aeb;
    }
}
.message-container {
    z-index: 10;
    position: relative;
    top: 100rpx;
    padding: 20rpx 0;
    .message-item:first-child {
        margin-top: 0;
    }
    .message-item {
        width: 670rpx;
        margin: 20rpx auto 0 auto;
        background-color: #ffffff;
        font-weight: bold;
        font-size: 30rpx;
        line-height: 30rpx;
        box-sizing: border-box;
        padding: 30rpx;
        .title {
            color: #999999;
        }
        .title.active {
            color: #333333;
        }
        .date {
            display: block;
            color: #999999;
            margin-top: 24rpx;
        }
    }
}
</style>