From c689574b2c5446bb69fbe9b4bffc772eee1f4cec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9A=E5=95=A6C=E6=A2=A6?= <15709267061@163.com>
Date: Fri, 28 Mar 2025 10:48:50 +0800
Subject: [PATCH] update

---
 src/components/MessageCard.vue    |  89 ++++++++++++++++++++++++++++++
 src/components/XActionsheet.vue   |  28 ++++++++++
 src/components/XInput.vue         |  10 +++-
 src/pages/messageCenter/index.vue |  42 ++++++++++++++
 src/scss/global.scss              |  22 ++++++++
 src/static/icons/messageIcon.png  | Bin 0 -> 3314 bytes
 6 files changed, 189 insertions(+), 2 deletions(-)
 create mode 100644 src/components/MessageCard.vue
 create mode 100644 src/components/XActionsheet.vue
 create mode 100644 src/static/icons/messageIcon.png

diff --git a/src/components/MessageCard.vue b/src/components/MessageCard.vue
new file mode 100644
index 0000000..a6e02a5
--- /dev/null
+++ b/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>
diff --git a/src/components/XActionsheet.vue b/src/components/XActionsheet.vue
new file mode 100644
index 0000000..32443ca
--- /dev/null
+++ b/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>
diff --git a/src/components/XInput.vue b/src/components/XInput.vue
index 90320c9..0f9e460 100644
--- a/src/components/XInput.vue
+++ b/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);
diff --git a/src/pages/messageCenter/index.vue b/src/pages/messageCenter/index.vue
index d9ff771..d112253 100644
--- a/src/pages/messageCenter/index.vue
+++ b/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>
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 1b79ef9..7c89ced 100644
--- a/src/scss/global.scss
+++ b/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; /* 超出部分显示省略号 */
+}
diff --git a/src/static/icons/messageIcon.png b/src/static/icons/messageIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..b2612076a3b7fadc1f95932fc9b4c2250bc0c0df
GIT binary patch
literal 3314
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

literal 0
HcmV?d00001