140 lines
4.0 KiB
Vue
140 lines
4.0 KiB
Vue
<script setup>
|
|
import {computed, onMounted} from 'vue';
|
|
import messageIcon from "../static/icons/messageIcon.png";
|
|
import XActionsheet from "./XActionsheet.vue";
|
|
import OpenTypeFun from "./OpenTypeFun.js";
|
|
import {showToast, toPage} from "../utils/uils.js";
|
|
import {useSystemStore} from "../pinia/SystemStore/index.js";
|
|
import Api from "../api/index.js";
|
|
|
|
const SystemStore = useSystemStore();
|
|
const emits = defineEmits(['success']);
|
|
const {contextRow, type, data} = defineProps({
|
|
contextRow: {
|
|
type: String,
|
|
default: 'ellipsis-1'
|
|
},
|
|
type: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
data: {
|
|
type: Object,
|
|
default: null
|
|
}
|
|
});
|
|
|
|
const itemList = computed(() => {
|
|
const list = type === 0 ? [
|
|
{text: '置顶', type: 1, hide: data.is_top === 1},
|
|
{text: '取消置顶', type: 0, hide: data.is_top === 0},
|
|
{text: '标记已读', type: 0, hide: data.is_read === 0},
|
|
{text: '标记未读', type: 1, hide: data.is_read === 1},
|
|
] : [
|
|
{text: '标记已读', type: 0, hide: data.is_read === 0},
|
|
{text: '标记未读', type: 1, hide: data.is_read === 1},
|
|
]
|
|
return list.filter(v => !v.hide);
|
|
})
|
|
|
|
const selectActionsheet = async (e) => {
|
|
if (type === 0) {
|
|
const {msg} = await Api.system.setExchangeTop({
|
|
id: data.id,
|
|
type: e.type,
|
|
});
|
|
showToast(msg);
|
|
emits('success');
|
|
} else {
|
|
const index = SystemStore.message.findIndex(v => v.id === data.id);
|
|
SystemStore.message[index].is_read = true;
|
|
}
|
|
}
|
|
|
|
const openOpenTypeFun = () => {
|
|
const index = SystemStore.message.findIndex(v => v.id === data.id);
|
|
SystemStore.message[index].is_read = true;
|
|
OpenTypeFun(data);
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (type === 1) {
|
|
const now = SystemStore.message.find(v => v.id === data.id);
|
|
console.log(now);
|
|
if (!now) SystemStore.message.push({...data, is_read: false});
|
|
}
|
|
});
|
|
</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`) : openOpenTypeFun()"
|
|
class="!py-[30rpx] !px-[24rpx] bg-[#fff] rounded-[8rpx] !flex items-center gap-[20rpx] overflow-hidden relative !mb-[20rpx]">
|
|
<view class="relative">
|
|
<image class="!size-[72rpx] flex-shrink-0" mode="aspectFill" :src="messageIcon"></image>
|
|
<view v-if="type === 0 ? data.is_read===0 : !SystemStore.message.find(v => v.id===data.id).is_read"
|
|
class="size-[20rpx] bg-[#f00] absolute right-0 top-0 rounded-[50%]"></view>
|
|
</view>
|
|
|
|
<view class="flex-grow !flex flex-col gap-[12rpx]">
|
|
<view class="!flex justify-between items-center">
|
|
<view class="bh">{{ 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>
|