YXGJ/packageA/affiche/index.vue

<template>
    <view>
        <u-tabs :list="types" :activeStyle="{ fontWeight: 'bold', color: '#C30D23' }" lineColor="#C30D23"
            keyName="classname" @change="tabsChange" />
        <view class="search-box">
            <view hover-class="navigator-hover" class="switch" @click="changeStatus">
                <view class="status" :class="activeStatus == '全部' ? 'active' : ''">
                    全部
                </view>
                <view class="status" :class="activeStatus != '全部' ? 'active' : ''">
                    未读
                </view>
            </view>
            <u-search placeholder="搜索关键字" bgColor="#fff" v-model="keyword" @search="onSearch" @clear="onSearch"
                :showAction="false" />
        </view>
        <My_listbox ref="List" @getlist="getList(true)">
            <view style="height: 5px;" />
            <navigator :url="'/packageA/affiche/detail?id=' + item.sat_noticeid" class="item" v-for="item in list"
                :key="item.sat_noticeid" hover-class="navigator-hover">
                <view class="title">{{ item.title }}</view>
                <view class="line" />
                <view class="date">{{ item.checkdate }}</view>
                <view class="readstatus" :style="{
                    color: colors[item.readstatus].color,
                    background: colors[item.readstatus].back,
                }">{{ item.readstatus }}</view>
            </navigator>

        </My_listbox>
    </view>
</template>

<script>
export default {
    data() {
        return {
            activeStatus: '全部',
            keyword: "",
            list: [],
            types: [],
            "content": {
                "where": {
                    "condition": "",
                    "sat_notice_classid": "",
                    "isread": ""//0:已读.1:已知，2：未读
                }
            },
            colors: {
                已读: {
                    color: '#E3041F',
                    back: '#FFF0F2'
                },
                未读: {
                    color: '#FFFFFF',
                    back: '#E3041F'
                },
                已知: {
                    color: '#999999',
                    back: '#EEEEEE'
                },
            }
        }
    },
    onLoad() {
        this.getTypes()
        this.getList()
    },
    methods: {
        getTypes() {
            this.$Http.basic({
                "id": "20221101094603",
                "content": {
                    "pageNumber": 1,
                    "pageSize": 9999,
                    "where": {
                        "condition": "",
                        "isenable": 1
                    }
                }
            }).then(res => {
                console.log("获取通告分类", res)
                if (this.cutoff(res.msg)) return;
                if (res.data.length > 1) {
                    res.data.unshift({
                        classname: "全部",
                        sat_notice_classid: "",
                    })
                    this.types = res.data;
                }

            })
        },
        getList(init = false) {
            if (this.paging(this.content, init)) return;
            this.$Http.basic({
                "id": "20221111090904",
                content: this.content
            }).then(res => {
                this.$refs.List.RefreshToComplete()
                console.log("获取通告列表", res)
                if (this.cutoff(res.msg)) return;
                this.list = res.data;
                this.content = this.$refs.List.paging(this.content, res)
            })
        },
        changeStatus() {
            this.activeStatus = this.activeStatus == '全部' ? '未读' : "全部";
            this.content.where.isread == this.activeStatus == '全部' ? "" : 2;
            this.getList(true);
        },
        tabsChange(e) {
            this.content.where.sat_notice_classid = e.sat_notice_classid;
            this.getList(true)
        },
        onSearch(e) {
            this.content.where.condition = e || "";
            this.getList(true)
        },
    },
}
</script>

<style lang="scss">
/deep/ .u-search__content {
    height: 30px !important;

    .uni-input-wrapper {
        font-size: 14px;
    }

    .u-icon__icon {
        font-size: 22px !important;
    }
}

.search-box {
    display: flex;
    align-items: center;
    padding: 0 10px;
    margin-top: 10px;
    margin-bottom: 5px;
    box-sizing: border-box;

    .switch {
        display: flex;
        width: 96px;
        height: 30px;
        background: #fff;
        margin-right: 10px;
        border-radius: 15px;

        .status {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 30px;
            width: 48px;
            border-radius: 15px;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 14px;
            color: #666666;
            background: #fff;
        }

        .active {
            background: #C30D23;
            color: #fff;
        }
    }
}

.item {
    position: relative;
    width: 355px;
    background: #FFFFFF;
    border-radius: 8px;
    margin: 0 auto 8px;
    padding: 15px 10px;
    box-sizing: border-box;

    .title {
        width: 281px;
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: bold;
        font-size: 14px;
        color: #333333;
    }

    .line {
        width: 335px;
        height: 1px;
        background: #eeeeee;
        margin-top: 15px;
    }

    .date {
        line-height: 20px;
        font-size: 14px;
        color: #666666;
        margin-top: 10px;
    }

    .readstatus {
        position: absolute;
        top: 10px;
        right: 0;
        width: 44px;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        text-align: center;
        border-radius: 12px 0px 0px 12px;
    }
}
</style>