caiyunyi/pages/highwayHeadlines/attractInvestment.vue

<template>
    <div class="main">
        <div class="contentList" :style="{ height: `calc(100vh - ${safeHeight}px)` }">
            <div class="contentItem" v-for="(item, index) in messageList" :key="index" @click="handleGoDetail(item)">
                <div class="left">
                    <div class="title">{{ item.title || item.NOTICEINFO_TITLE || "" }}</div>
                    <div class="content">{{ item.NOTICEINFO_CONTENT || "" }}</div>
                    <div class="descBox">
                        <span class="name">{{ item.author || item.STAFF_NAME || "-" }}</span>
                        <span class="time">{{ item.publishTime || item.START_DATE || "-" }}</span>
                    </div>
                </div>
                <div class="right">
                    <image class="leftIcon" v-if="item.ImageList && item.ImageList.length > 0"
                        :src="item.ImageList[0].ImageUrl" />
                    <image v-else class="leftIcon" :src="item.coverImg
                        ? item.coverImg
                        : 'https://eshangtech.com/ShopICO/no-picture.png'
                        " />
                </div>
            </div>
            <div v-if="!(messageList && messageList.length > 0)">
                <no-data text="暂无内容" />
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import { handleFormatDate } from '../../utils/publicMethods'
import NoData from "../../components/noData.vue";
export default {
    data() {
        return {
            safeHeight: {},
            tabList: [],
            selectTab: 0,
            messageList: [], // 当前显示的数据
            allMessageList: {},// 全部种类的数据
        };
    },
    components: {
        NoData,
    },
    computed: {
        ...mapGetters({
            user: "user",
        }),
    },
    onLoad() {
        let systemInfo = uni.getSystemInfoSync();
        let height = systemInfo.safeAreaInsets.bottom;
        this.safeHeight = Number(height);

        this.handleGetHighwayHeadlines()
        this.$utils.addUserBehaviorNew();
    },

    methods: {
        // 拿到消息列表
        async handleGetHighwayHeadlines() {
            let newReq = {
                SearchParameter: {
                    PROVINCE_CODE: this.user.PROVINCE_CODE || "530000",
                    NOTICEINFO_STATE: 1,
                },
                PageIndex: 1,
                PageSize: 999999,
                appId: "wxee018fb96955552a",
            };
            const newData = await this.$api.$post(
                "/EShangApiMain/Notice/GetNOTICEINFOList",
                newReq
            );
            let uselist = newData.Result_Data.List;
            if (uselist && uselist.length > 0) {
                uselist.forEach((item) => {
                    item.START_DATE = handleFormatDate(item.START_DATE)
                })
            }

            this.messageList = uselist
            console.log("this.messageList", this.messageList);
        },
        // 跳转查看招商项目详情
        handleGoDetail(obj) {
            console.log("obj", obj);
            uni.navigateTo({
                url: `/pages/highwayHeadlines/attractInvestmentDetail?id=${obj.id || obj.NOTICEINFO_ID}&type=${obj.NOTICEINFO_TYPE ? true : false}`,
            });
        },
    },
};
</script>
<style scoped lang="less">
.main {
    width: 100%;
    height: 100vh;

    .contentList {
        width: 100%;
        overflow-y: auto;
        background: #f8f9fa;

        .contentItem {
            width: 100%;
            box-sizing: border-box; 
            padding: 32rpx;
            display: flex;
            align-items: flex-start;
            background: white;
            margin-bottom: 16rpx;
            border-radius: 16rpx;
            box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);

            .left {
                width: calc(100% - 240rpx);
                margin-right: 20rpx;
 
                .title {
                    font-size: 28rpx;
                    font-weight: 600;
                    color: #1f2937;
                    line-height: 38rpx;
                    margin-bottom: 16rpx;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    -webkit-line-clamp: 2;
                    text-overflow: ellipsis;
                }

                .content {
                    font-size: 24rpx;
                    color: #6b7280;
                    line-height: 30rpx;
                    margin-bottom: 20rpx;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    -webkit-line-clamp: 2;
                    text-overflow: ellipsis;
                }

                .descBox {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .name {
                        font-size: 24rpx;
                        color: #374151;
                        font-weight: 500;
                    }

                    .time {
                        font-size: 24rpx;
                        color: #9ca3af;
                    }
                }
            }

            .right {
                width: 220rpx;
                height: 160rpx;
                border-radius: 12rpx;
                overflow: hidden;
                flex-shrink: 0;

                .leftIcon {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}
</style>