feiniao-farm-h5/src/views/old_mini/mine/pages/message.vue

<template>
    <div class="message-page">
        <custom-header name="我的消息" bgColor="#f7f7f7"></custom-header>
        <div class="message-list">
            <div class="message-item" v-for="(item, index) in messageList" :key="index" @click="handleItem(item)">
                <div class="message">
                    <badge v-show="item.num" :content="item.num" max="99" :offset="[-15, 5]">
                        <img class="img" v-if="item.type!=='message'" :src="require(`@/assets/img/mine/${item.type}.png`)" alt="" />
                        <img class="img" v-else src="@/assets/img/mine/expert.png" alt="">
                    </badge>
                    <div class="info">
                        <span class="name">{{item.name}}</span>
                        <div class="van-ellipsis">{{item.desc}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { Badge } from "vant";
import { ref } from "vue";
import { useRouter } from "vue-router";
import customHeader from "@/components/customHeader.vue";
const router = useRouter();

const messageList = ref([
    {
        name: "指导专家咨询",
        type: "expert",
        desc: "从化荔博园：",
        num: 1,
    },
    {
        name: "农资农服咨询",
        type: "agricultural",
        desc: "农资农服：",
        num: 1,
    },
]);

const handleItem = ({type,name}) =>{
    if(type==='message'){
        router.push("/message_detail");
    }
}
</script>

<style lang="scss" scoped>
.message-page {
    position: relative;
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    background-color: #f7f7f7;
    .message-list {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        padding: 12px;
        box-sizing: border-box;
        .message-item {
            display: flex;
            justify-content: space-between;
            background-color: #fff;
            border-radius: 14px;
            padding: 10px;
            .message {
                width: calc(100% - 64px);
                display: flex;
                align-items: center;
                .img {
                    width: 48px;
                    height: 48px;
                    margin-right: 10px;
                }
                .info {
                    width: 100%;
                    color: #999999;
                    line-height: 24px;
                    .name {
                        color: #333333;
                        font-size: 16px;
                        font-weight: 500;
                    }
                }
            }
        }
        .message-item + .message-item {
            margin-top: 12px;
        }
    }
}
</style>