meilan-app/src/pages/home-new/components/messagePush.vue

<template>
    <div class="tips" @click="navigateToMessagePush">
        <img alt="" src="@/static/images/messagePush.png">
        <div class="message-container">
            <div class="message-line message-title">近15天违禁品查获情况群体消息推送</div>
            <div class="message-line">{{ prohibitedItemText }}</div>
            <div class="message-line">{{ concealmentPositionText }}</div>
            <div class="message-line">{{ highRiskChannelText }}</div>
        </div>
    </div>
</template>

<script>
import { getPushMessage } from '@/api/home-new/home-new';
export default {
    name: 'MessagePush',
    data() {
        return {
            concealmentPositionsTop3: [],
            highRiskChannelsTop3: [],
            prohibitedItemsTop3: [],
        }
    },
    computed: {
        prohibitedItemText() {
            if (!this.prohibitedItemsTop3 || this.prohibitedItemsTop3.length === 0) {
                return '移交公安TOP1:火种/打火机';
            }
            const item = this.prohibitedItemsTop3[0];
            const nameOne = item.categoryNameOne || '';
            const nameTwo = item.categoryNameTwo || '';
            return `移交公安TOP1:${nameOne}${nameTwo ? '/' + nameTwo : ''}`;
        },
        concealmentPositionText() {
            if (!this.concealmentPositionsTop3 || this.concealmentPositionsTop3.length === 0) {
                return '藏匿部位TOP1:随身行礼物品';
            }
            const item = this.concealmentPositionsTop3[0];
            const nameOne = item.positionNameOne || '';
            const nameTwo = item.positionNameTwo || '';
            return `藏匿部位TOP1:${nameOne}${nameTwo ? '/' + nameTwo : ''}`;
        },
        highRiskChannelText() {
            if (!this.highRiskChannelsTop3 || this.highRiskChannelsTop3.length === 0) {
                return '高发通道TOP1:T1航站楼/a区域/a01';
            }
            const item = this.highRiskChannelsTop3[0];
            const terminalName = item.terminalName || '';
            const areaName = item.areaName || '';
            const channelName = item.channelName || '';
            let text = '高发通道TOP1:';
            if (terminalName) text += terminalName;
            if (areaName) text += '/' + areaName;
            if (channelName) text += '/' + channelName;
            return text;
        }
    },
    mounted() {
        this.fetchPushMessage();
    },
    methods: {
        // 获取推送消息数据
        async fetchPushMessage() {
            try {
                const response = await getPushMessage();
                console.log('推送消息响应:', response);
                if (response && response.data) {
                    const { concealmentPositionsTop3, highRiskChannelsTop3, prohibitedItemsTop3 } = response.data;
                    this.concealmentPositionsTop3 = concealmentPositionsTop3 || [];
                    this.highRiskChannelsTop3 = highRiskChannelsTop3 || [];
                    this.prohibitedItemsTop3 = prohibitedItemsTop3 || [];
                }
            } catch (error) {
                console.error('获取推送消息失败:', error);
            }
        },
        
        // 跳转到消息推送详情页面
        navigateToMessagePush() {
            uni.navigateTo({
                url: '/pages/messagePush/index'
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.tips {
    display: flex;
    align-items: center;
    padding: 20rpx 28rpx;
    background: #FFF4F4;
    border-radius: 32rpx;
    font-size: 24rpx;
    color: #222222;
    line-height: 32rpx;
    margin-bottom: 32rpx;
    cursor: pointer;
    transition: all 0.3s ease;

    img {
        width: 66rpx;
        padding-right: 28rpx;
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        margin-right: 28rpx;
        flex-shrink: 0;
        margin-top: 4rpx;
    }

    .message-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8rpx;
    }

    .message-line {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .message-title {
        font-weight: bold;
        font-size: 26rpx;
    }

    // 鼠标悬停效果
    &:hover {
        background: #FFE8E8;
        transform: scale(1.01);
    }
}
</style>