demingshangjia/pages/messages/list.vue

<template>
    <view class="box">
        <view class="item" v-for="(item,index) in list" :key="index" @click="navto(item.id)">
            <view class="time">{{item.addtime}}</view>
            <view class="info">
                <image class="img" :src="item.picture"></image>
                <view class="title u-line-2">{{item.title}}</view>
                <view class="next">
                    <text>查看详情</text>
                    <image class="right" src="@/static/image/user/1.png"></image>
                </view>
            </view>
            
        </view>
    </view>
</template>
<style lang="scss" scoped>
.box{
    min-height: 100vh;
    background-color: #EAEAEA;
    .item{
        display: flex;
        flex-direction: column;
        align-items: center;
        .time{
            font-size: 28rpx;
            color: #666;
            padding: 30rpx 0;
        }
        .info{
            width: 690rpx;
            // height: 489rpx;
            border-radius: 20rpx;
            overflow: hidden;
            background-color: #fff;
            .img{
                width: 100%;
                height: 280rpx;
            }
            .title{
                height: 80rpx;
                margin: 30rpx 25rpx;
                font-size: 26rpx;
                line-height: 40rpx;
            }
            .next{
                display: flex;
                height: 84rpx;
                align-items: center;
                justify-content: space-between;
                padding: 0 25rpx;
                border-top: 1rpx solid #ebebeb;
                >text{
                    font-size: 26rpx;
                    color:#666;
                }
                >image{
                    width: 9rpx;
                    height: 17rpx;
                }
            }
            
        }
    }
}
</style>
<script>
export default {
    data(){
        return {
            list:[]
        }
    },
    onLoad(){
        this.$u.api.messageList({page:1}).then((res)=>{
            console.log(res)
            this.list = res.data
        })
    },
    methods:{
        navto(id){
            console.log(id)
            this.$u.route({
                url:"/pages/messages/info",
                params:{
                    id
                }
            })
        }
    }
}
</script>