update

src/components/MessageCard.vue

@@ -0,0 +1,89 @@
+<script setup>
+import {computed} from 'vue';
+import messageIcon from "../static/icons/messageIcon.png";
+import XActionsheet from "./XActionsheet.vue";
+
+const itemList = computed(() => {
+    const item = [];
+    true ?
+        item.push({text: '标记未读', type: 0}) :
+        item.push({text: '标记已读', type: 1});
+    return item;
+})
+const {contextRow} = defineProps({
+    contextRow: {
+        type: String,
+        default: 'ellipsis-1'
+    }
+});
+
+const selectActionsheet = (e) => {
+    console.log(e);
+}
+</script>
+
+<template>
+    <x-actionsheet
+        @success="selectActionsheet"
+        :itemList="itemList">
+        <view
+            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">任务编号: DF12122</view>
+                    <view class="time">2024-01-26 14:00</view>
+                </view>
+                <view :class="['context', contextRow]">
+                    商家:您的回填数据1由于***未通过，请按照文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档中操作
+                </view>
+            </view>
+
+            <view class="status">置顶</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>

src/components/XActionsheet.vue

@@ -0,0 +1,28 @@
+<script setup>
+import {ref} from "vue";
+
+const emits = defineEmits(['success']);
+const show = ref(false);
+
+const success = (e) => {
+    emits('success', e);
+}
+</script>
+
+<template>
+    <view @longpress="show=true">
+        <slot></slot>
+    </view>
+
+    <tui-actionsheet
+        v-bind="$attrs"
+        :show="show"
+        @click="success"
+        @cancel="show=false">
+
+    </tui-actionsheet>
+</template>
+
+<style scoped>
+
+</style>

src/components/XInput.vue

@@ -1,8 +1,12 @@
 <script setup>
-const {placeholder} = defineProps({
+const {placeholder, height} = defineProps({
     placeholder: {
         type: String,
         default: "",
+    },
+    height: {
+        type: String,
+        default: "96rpx",
     }
 });
 
@@ -10,7 +14,8 @@ const modelValue = defineModel();
 </script>
 
 <template>
-    <view class="x-input h-[96rpx] rounded-[12rpx] !flex items-center px-[32rpx]">
+    <view class="x-input rounded-[12rpx] !flex items-center px-[32rpx]">
+        <slot name="prefix"></slot>
         <input v-model="modelValue" :placeholder="placeholder"></input>
         <slot name="suffix"></slot>
     </view>
@@ -19,6 +24,7 @@ const modelValue = defineModel();
 <style lang="scss" scoped>
 .x-input {
     background-color: #F2F3F5;
+    height: v-bind(height);
 
     :deep(input) {
         background-color: rgba(0,0,0,0);

src/pages/messageCenter/index.vue

@@ -1,9 +1,51 @@
 <script setup>
+import XNav from "../../components/XNav.vue";
+import {ref} from "vue";
+import XInput from "../../components/XInput.vue";
+import XLink from "../../components/XLink.vue";
+import MessageCard from "../../components/MessageCard.vue";
 
+const currentTab = ref(0);
+const tabs = [
+    {
+        name: '任务消息',
+    },
+    {
+        name: '平台消息',
+    },
+];
 </script>
 
 <template>
     <!--消息中心-->
+    <XNav :show-back="false"></XNav>
+
+    <view class="w-full bg-[#fff]">
+        <tui-tabs :tabs="tabs" :currentTab="currentTab" @change="({index}) => currentTab=index" height="90"></tui-tabs>
+
+        <view class="!pt-[24rpx] !pb-[28rpx] !px-[32rpx] !flex gap-[32rpx] items-center">
+            <view class="flex-grow">
+                <x-input height="72rpx" placeholder="请输入要查询的内容">
+                    <template #prefix>
+                        <tui-icon name="search" size="18" class="!mr-[12rpx]"></tui-icon>
+                    </template>
+                </x-input>
+            </view>
+
+            <x-link>搜索</x-link>
+        </view>
+    </view>
+
+    <view class="!px-[20rpx] !py-[16rpx]">
+        <radio>只看未读</radio>
+    </view>
+
+    <view class="!flex flex-col !px-[20rpx]">
+        <MessageCard
+            :context-row="currentTab === 0 ? 'ellipsis-1': 'ellipsis-2'"
+            v-for="item in 100">
+        </MessageCard>
+    </view>
 </template>
 
 <style scoped>

src/scss/global.scss

@@ -16,7 +16,29 @@ $primary-color: #2D5CF6;
 .tui-alert-box {
     border-radius: 16rpx !important;
     overflow: hidden;
+
     .tui-alert-content {
         padding: 40rpx 32rpx !important;
     }
 }
+
+.tui-actionsheet {
+    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
+    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+}
+
+.ellipsis-1 {
+    display: -webkit-box; /* 创建一个伸缩容器 */
+    -webkit-box-orient: vertical; /* 设置伸缩容器的方向为垂直 */
+    -webkit-line-clamp: 1; /* 限制显示的行数为2行 */
+    overflow: hidden; /* 超出内容隐藏 */
+    text-overflow: ellipsis; /* 超出部分显示省略号 */
+}
+
+.ellipsis-2 {
+    display: -webkit-box; /* 创建一个伸缩容器 */
+    -webkit-box-orient: vertical; /* 设置伸缩容器的方向为垂直 */
+    -webkit-line-clamp: 2; /* 限制显示的行数为2行 */
+    overflow: hidden; /* 超出内容隐藏 */
+    text-overflow: ellipsis; /* 超出部分显示省略号 */
+}