xl-mobile/src/components/MessageCard.vue

<script setup>
import {computed} from 'vue';
import messageIcon from "../static/icons/messageIcon.png";
import XActionsheet from "./XActionsheet.vue";
import OpenTypeFun from "./OpenTypeFun.js";
import {toPage} from "../utils/uils.js";

const itemList = computed(() => {
    const item = [];
    true ?
        item.push({text: '标记未读', type: 0}) :
        item.push({text: '标记已读', type: 1});
    return item;
})
const {contextRow, type, data} = defineProps({
    contextRow: {
        type: String,
        default: 'ellipsis-1'
    },
    type: {
        type: Number,
        default: 0
    },
    data: {
        type: Object,
        default: null
    }
});

const selectActionsheet = (e) => {
    console.log(e);
}
</script>

<template>
    <x-actionsheet
        @success="selectActionsheet"
        :itemList="itemList">
        <view
            @click.stop="type === 0 ? toPage(`/pages/taskDetails/index?id=${data.task_id}&task_children_id=${data.task_children_id}&tab=3`) : OpenTypeFun(data)"
            class="!py-[30rpx] !px-[24rpx] bg-[#fff] rounded-[8rpx] !flex items-center gap-[20rpx] overflow-hidden relative !mb-[20rpx]">
            <image class="!size-[72rpx] flex-shrink-0" mode="aspectFill" :src="messageIcon"></image>
            <view class="flex-grow !flex flex-col gap-[12rpx]">
                <view class="!flex justify-between items-center">
                    <view class="bh">{{ type === 0 ? '任务编号: DF12122' : data.title }}</view>
                    <view class="time">2024-01-26 14:00</view>
                </view>
                <view :class="['context', contextRow]">
                    {{ data.content }}
                </view>
            </view>

            <view class="status" v-if="data.is_top === 1">置顶</view>
        </view>
    </x-actionsheet>
</template>

<style lang="scss" scoped>
.status {
    padding: 5rpx 16rpx;
    background: rgb(253, 244, 191);
    border-bottom-left-radius: 8rpx;
    position: absolute;
    right: 0;
    top: 0;
    color: rgb(162, 109, 10);
    font-size: 11px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 0;
    text-align: center;
}

.context {
    color: rgb(78, 89, 105);
    font-size: 12px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0;
    text-align: left;
}

.bh {
    color: rgb(29, 33, 41);
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0;
    text-align: left;
}

.time {
    color: rgb(134, 144, 156);
    font-size: 12px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0;
    text-align: left;
}
</style>