zx_flk_app/pages/message/index.vue

<template>
    <view class="message-page">
        <view class="device-msg-wrap base-wrap" v-for="(item, index) in deviceList" :key="index"  @tap="toDeviceMsgPage(item)">
            <view class="row">
                <view class="title">
                    <view>{{ $t('设备消息') }}</view>
                    <view class="bage">{{ item.unread }}</view>
                </view>
                <view class="time">{{item.message_date}}</view>
            </view>
            <view class="device-info">
                <image class="img" :src="item.image" />
                <view class="info">
                    <view class="name">{{ item.car_name }}</view>
                    <view class="status">{{item.message_overview}}</view>
                </view>
            </view>
        </view>
        
        <view class="sys-msg-wrap base-wrap">
            <view class="title">{{ $t('系统消息') }}</view>
            <view class="msg-item" v-for="(item, index) in sysMsgList" :key="index">
                <view class="msg">
                    {{ item.title }}
                    <view v-if="item.type === 1" class="btn">绑定设备</view>
                </view>
                <view class="time">{{ item.ctime }}</view>
                <view class="dtl">{{ item.overview }}</view>
            </view>
        </view>
    </view>
</template>

<script>
const config = require('@/common/config.js');
const http = require('@/common/http.js');
const common = require('@/common/common.js');
export default {
    data() {
        return {
            value: 10,
            sysMsgList: [],
            deviceList: [],
            deviceInfo: {}
        }
    },
    created() {
        this.querySysMsgList()
        this.queryDeviceMsg()
        // http.postApi(config.API_MESSAGE_DTL, { id: '7' }, res => {
        // })
    },
    methods: {
        toDeviceMsgPage(itemData) {
            const { car_id } = itemData
            uni.navigateTo({ url: `/pages/message/deviceInfo?car_id=${car_id}` })
        },
        queryDeviceMsg() {
            http.postApi(config.API_DEVICE_MSG, {}, res => {
                if (res.succeed) {
                    this.deviceList = res.body.data
                    this.deviceList.map(item => {
                        item.message_date = common.formatTime(item.message_date)
                    })
                }
            })
        },
        querySysMsgList() {
            http.postApi(config.API_MESSAGE_LIST, { msg_type: 'PLAT' }, res => {
                if (res.succeed) {
                    this.sysMsgList= res.body.data.list
                    this.sysMsgList.map(item => {
                        item.ctime = common.formatTime(item.ctime)
                    })
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.message-page {
    width: 100%;
    min-height: 100vh;
    overflow: auto;
    background: #F1F3F4;
    padding: 0 24rpx;

    .base-wrap {
        background: #FFFFFF;
        border-radius: 40rpx;
        padding: 40rpx 32rpx 32rpx 32rpx;
        width: 100%;
    }

    .device-msg-wrap {
        margin: 24rpx 0;

        .row {
            margin-bottom: 40rpx;
            display: flex;
            justify-content: space-between;

            .title {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 36rpx;
                color: #060809;
                position: relative;

                .bage {
                    position: absolute;
                    left: 96%;
                    top: -12rpx;
                    background: #FA2918;
                    font-family: Futura, Futura;
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #FFFFFF;
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;
                    line-height: 16px;
                    padding: 0 5px;
                    border-radius: 68rpx;
                    z-index: 9;
                }
            }

            .time {
                font-family: Futura, Futura;
                font-weight: 500;
                font-size: 32rpx;
                color: #060809;
            }
        }

        .device-info {
            display: flex;
            align-items: center;

            .img {
                width: 128rpx;
                height: 128rpx;
                background: #f2f2f2;
                margin-right: 24rpx;
            }

            .info {
                .name {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: bold;
                    font-size: 40rpx;
                    color: #060809;
                    margin-bottom: 32rpx;
                }

                .status {
                    font-family: PingFangSC, PingFang SC;
                    font-size: 32rpx;
                    color: #426BF2;
                    display: flex;

                    &::before {
                        content: "";
                        width: 40rpx;
                        height: 40rpx;
                        margin-right: 16rpx;
                        border-radius: 50%;
                        background: url('https://qiniu.bms16.com/Foxu2x1lQKqT5K4LqrUtWIA6Lbw8');
                        background-size: 100%;
                    }
                }
            }
        }
    }

    .sys-msg-wrap {
        .title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 36rpx;
            color: #060809;
        }

        .msg-item {
            padding: 40rpx 0;
            border-bottom: 1px solid #F1F4F5;
            &:last-child {
                border-bottom: none;
            }

            .msg {
                font-family: PingFangSC, PingFang SC;
                font-weight: bold;
                font-size: 36rpx;
                color: #060809;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .btn {
                    width: 192rpx;
                    height: 64rpx;
                    background: #060809;
                    border-radius: 32rpx;
                    color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-family: AlibabaPuHuiTiM;
                    font-size: 32rpx;

                    &:active {
                        opacity: 0.8;
                    }
                }
            }

            .time {
                font-family: Futura, Futura;
                font-weight: 500;
                font-size: 24rpx;
                color: #060809;
                margin: 16rpx 0 24rpx;
            }

            .dtl {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #060809;
            }
        }
    }
}
</style>