From b50f6e4d9b20a46629f993d2cc4c45c12189cf61 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 04 三月 2026 10:56:23 +0800
Subject: [PATCH] 公司app 1.添加商机管理功能 2.app部署修改
---
src/pages/message.vue | 940 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 940 insertions(+), 0 deletions(-)
diff --git a/src/pages/message.vue b/src/pages/message.vue
new file mode 100644
index 0000000..879ea5c
--- /dev/null
+++ b/src/pages/message.vue
@@ -0,0 +1,940 @@
+<template>
+ <view class="message-page">
+ <!-- 椤甸潰澶撮儴 -->
+ <!-- <PageHeader title="娑堟伅涓績"
+ :showBack="false" /> -->
+ <!-- 绛涢�夋爣绛� -->
+ <view class="tabs-container">
+ <up-tabs v-model="activeTab"
+ @change="handleTabChange"
+ :list="tabList"
+ :current="activeTab"
+ itemStyle="width: 50%;height: 80rpx;"></up-tabs>
+ </view>
+ <!-- 娑堟伅鍒楄〃 -->
+ <scroll-view class="message-list"
+ scroll-y="true"
+ refresher-enabled="true"
+ :refresher-triggered="triggered"
+ :refresher-threshold="100"
+ refresher-background="#f5f7fa"
+ @refresherrefresh="onRefresh"
+ @scrolltolower="loadMore">
+ <!-- 鍔犺浇鐘舵�� -->
+ <view v-if="loading"
+ class="loading-state">
+ <text class="loading-text">鍔犺浇涓�...</text>
+ </view>
+ <!-- 娑堟伅鍒楄〃 -->
+ <view v-else
+ v-for="(item) in messageList"
+ :key="item.id"
+ class="message-item"
+ :class="{
+ 'unread': !item.read,
+ [getApprovalTypeClass(item.noticeTitle)]: true
+ }">
+ <view class="message-content">
+ <view class="message-header">
+ <text class="message-title">{{ item.noticeTitle }}</text>
+ <text class="message-time">{{ formatTime(item.createTime) }}</text>
+ </view>
+ <text class="message-desc">{{ item.noticeContent }}</text>
+ <view v-if="activeTab === 0"
+ class="message-footer">
+ <text class="message-view"
+ @click="goToDetail(item)">
+ 纭娑堟伅
+ </text>
+ </view>
+ </view>
+ </view>
+ <!-- 绌虹姸鎬� -->
+ <view v-if="!loading && messageList.length === 0"
+ class="empty-state">
+ <text class="empty-text">鏆傛棤娑堟伅</text>
+ </view>
+ <!-- 鍔犺浇鏇村鐘舵�� -->
+ <view v-if="loadingMore"
+ class="loading-more-state">
+ <text class="loading-more-text">鍔犺浇鏇村...</text>
+ </view>
+ </scroll-view>
+ </view>
+</template>
+
+<script setup>
+ import { ref, reactive, onMounted } from "vue";
+ import { onShow } from "@dcloudio/uni-app";
+ import { listNotice, confirmMessage, getNoticeCount } from "@/api/login.js";
+ import useUserStore from "@/store/modules/user";
+
+ // 鏍囩椤垫暟鎹�
+ const tabList = [
+ { name: "鏈", id: 0 },
+ { name: "宸茶", id: 1 },
+ ];
+
+ // 褰撳墠婵�娲荤殑鏍囩
+ const activeTab = ref(0);
+
+ // 娑堟伅鍒楄〃鏁版嵁
+ const messageList = ref([]);
+ const loading = ref(false);
+ const loadingMore = ref(false);
+ const total = ref(0);
+ const triggered = ref(false);
+
+ // 鍒嗛〉鍙傛暟
+ const page = reactive({
+ current: 1,
+ size: 10,
+ });
+
+ // 鏍煎紡鍖栨椂闂�
+ const formatTime = time => {
+ if (!time) return "";
+ const date = new Date(time);
+ const Y = date.getFullYear();
+ const M = String(date.getMonth() + 1).padStart(2, "0");
+ const D = String(date.getDate()).padStart(2, "0");
+ const h = String(date.getHours()).padStart(2, "0");
+ const m = String(date.getMinutes()).padStart(2, "0");
+ return `${Y}-${M}-${D} ${h}:${m}`;
+ };
+
+ // 鏍规嵁鏍囬鑾峰彇瀹℃壒绫诲瀷瀵瑰簲鐨勬牱寮忕被鍚�
+ const getApprovalTypeClass = (title) => {
+ if (!title) return 'type-default';
+ const titleStr = title.toString().trim();
+
+ if (titleStr.includes('閲囪喘瀹℃壒') || titleStr.includes('閲囪喘')) {
+ return 'type-purchase';
+ } else if (titleStr.includes('鎶ヤ环瀹℃壒') || titleStr.includes('鎶ヤ环')) {
+ return 'type-quotation';
+ } else if (titleStr.includes('鍙戣揣瀹℃壒') || titleStr.includes('鍙戣揣')) {
+ return 'type-shipment';
+ } else if (titleStr.includes('鍏嚭') || titleStr.includes('鍏嚭绠＄悊')) {
+ return 'type-business-trip';
+ } else if (titleStr.includes('璇峰亣') || titleStr.includes('璇峰亣绠＄悊')) {
+ return 'type-leave';
+ } else if (titleStr.includes('鍑哄樊') || titleStr.includes('鍑哄樊绠＄悊')) {
+ return 'type-travel';
+ } else if (titleStr.includes('鎶ラ攢') || titleStr.includes('鎶ラ攢绠＄悊')) {
+ return 'type-reimbursement';
+ } else if (titleStr.includes('鍗遍櫓浣滀笟')) {
+ return 'type-dangerous';
+ }
+
+ return 'type-default';
+ };
+
+ // 鏍规嵁 noticeTitle 鍒ゆ柇璺宠浆椤甸潰
+ const getJumpPathByTitle = (title, appJumpPath) => {
+ if (!title) return null;
+
+ const titleStr = title.toString().trim();
+
+ // 灏濊瘯浠� appJumpPath 涓彁鍙� approveId
+ let approveId = null;
+ if (appJumpPath) {
+ const queryIndex = appJumpPath.indexOf('?');
+ if (queryIndex !== -1) {
+ const queryString = appJumpPath.substring(queryIndex + 1);
+ const params = queryString.split('&');
+ params.forEach(param => {
+ const [key, value] = param.split('=');
+ if (key === 'approveId' && value) {
+ approveId = decodeURIComponent(value);
+ }
+ });
+ }
+ // 濡傛灉娌℃湁鍦ㄦ煡璇㈠弬鏁颁腑鎵惧埌锛屽皾璇曚粠璺緞涓彁鍙栵紙濡� /pages/xxx/xxx/123锛�
+ if (!approveId) {
+ const pathParts = appJumpPath.split('/');
+ const lastPart = pathParts[pathParts.length - 1];
+ if (lastPart && !lastPart.includes('?') && !lastPart.includes('.')) {
+ approveId = lastPart;
+ }
+ }
+ }
+
+ // 鏍规嵁鏍囬鍒ゆ柇瀹℃壒绫诲瀷鍜岃烦杞矾寰�
+ if (titleStr.includes('閲囪喘瀹℃壒') || titleStr.includes('閲囪喘')) {
+ if (approveId) {
+ uni.setStorageSync('approveId', approveId);
+ uni.setStorageSync('approveType', '5');
+ return `/pages/cooperativeOffice/collaborativeApproval/approve?approveType=5`;
+ }
+ return `/pages/cooperativeOffice/collaborativeApproval/index5`;
+ } else if (titleStr.includes('鎶ヤ环瀹℃壒') || titleStr.includes('鎶ヤ环')) {
+ if (approveId) {
+ uni.setStorageSync('approveId', approveId);
+ uni.setStorageSync('approveType', '6');
+ return `/pages/cooperativeOffice/collaborativeApproval/approve?approveType=6`;
+ }
+ return `/pages/cooperativeOffice/collaborativeApproval/index6`;
+ } else if (titleStr.includes('鍙戣揣瀹℃壒') || titleStr.includes('鍙戣揣')) {
+ if (approveId) {
+ uni.setStorageSync('approveId', approveId);
+ uni.setStorageSync('approveType', '7');
+ return `/pages/cooperativeOffice/collaborativeApproval/approve?approveType=7`;
+ }
+ return `/pages/cooperativeOffice/collaborativeApproval/index7`;
+ } else if (titleStr.includes('鍏嚭') || titleStr.includes('鍏嚭绠＄悊')) {
+ if (approveId) {
+ uni.setStorageSync('approveId', approveId);
+ uni.setStorageSync('approveType', '1');
+ return `/pages/cooperativeOffice/collaborativeApproval/approve?approveType=1`;
+ }
+ return `/pages/cooperativeOffice/collaborativeApproval/index1`;
+ } else if (titleStr.includes('璇峰亣') || titleStr.includes('璇峰亣绠＄悊')) {
+ if (approveId) {
+ uni.setStorageSync('approveId', approveId);
+ uni.setStorageSync('approveType', '2');
+ return `/pages/cooperativeOffice/collaborativeApproval/approve?approveType=2`;
+ }
+ return `/pages/cooperativeOffice/collaborativeApproval/index2`;
+ } else if (titleStr.includes('鍑哄樊') || titleStr.includes('鍑哄樊绠＄悊')) {
+ if (approveId) {
+ uni.setStorageSync('approveId', approveId);
+ uni.setStorageSync('approveType', '3');
+ return `/pages/cooperativeOffice/collaborativeApproval/approve?approveType=3`;
+ }
+ return `/pages/cooperativeOffice/collaborativeApproval/index3`;
+ } else if (titleStr.includes('鎶ラ攢') || titleStr.includes('鎶ラ攢绠＄悊')) {
+ if (approveId) {
+ uni.setStorageSync('approveId', approveId);
+ uni.setStorageSync('approveType', '4');
+ return `/pages/cooperativeOffice/collaborativeApproval/approve?approveType=4`;
+ }
+ return `/pages/cooperativeOffice/collaborativeApproval/index4`;
+ } else if (titleStr.includes('鍗遍櫓浣滀笟')) {
+ if (approveId) {
+ uni.setStorageSync('approveId', approveId);
+ uni.setStorageSync('approveType', '8');
+ return `/pages/cooperativeOffice/collaborativeApproval/approve?approveType=8`;
+ }
+ return `/pages/cooperativeOffice/collaborativeApproval/index8`;
+ }
+
+ // 濡傛灉閮戒笉鍖归厤锛屽皾璇曚娇鐢ㄥ師濮嬬殑 appJumpPath
+ if (appJumpPath) {
+ let jumpPath = appJumpPath;
+ if (jumpPath.indexOf("/") !== 0) {
+ jumpPath = "/" + jumpPath;
+ }
+ return jumpPath;
+ }
+
+ return null;
+ };
+
+ // 鏇存柊 tab 鏍忚鏍�
+ const updateTabBarBadge = () => {
+ if (userId.value) {
+ getNoticeCount(userId.value)
+ .then(res => {
+ const count = res.data || 0;
+ // 鏇存柊tabbar鐨勮鏍�
+ if (count > 0) {
+ uni.setTabBarBadge({
+ index: 1, // 娑堟伅鏍囩椤电殑绱㈠紩
+ text: count.toString(),
+ });
+ } else {
+ uni.removeTabBarBadge({
+ index: 1,
+ });
+ }
+ })
+ .catch(error => {
+ console.error("鑾峰彇鏈娑堟伅鏁伴噺澶辫触:", error);
+ });
+ }
+ };
+
+ // 璺宠浆鍒拌鎯呴〉
+ const goToDetail = item => {
+ confirmMessage(item.noticeId, 1).then(res => {
+ if (res.code === 200) {
+ // uni.showToast({ title: "纭鎴愬姛", icon: "success" });
+ loadMessages(false);
+
+ // 鏇存柊 tab 鏍忚鏍�
+ updateTabBarBadge();
+
+ // 鏍规嵁 noticeTitle 鍒ゆ柇璺宠浆椤甸潰
+ const jumpPath = getJumpPathByTitle(item.noticeTitle, item.appJumpPath);
+
+ if (jumpPath) {
+ console.log('璺宠浆璺緞:', jumpPath);
+ console.log('娑堟伅鏍囬:', item.noticeTitle);
+ console.log('娑堟伅鏁版嵁:', item);
+
+ uni.navigateTo({
+ url: jumpPath,
+ fail: (err) => {
+ console.error('璺宠浆澶辫触:', err);
+ uni.showToast({
+ title: "璺宠浆澶辫触锛岃妫�鏌ヨ矾寰�",
+ icon: "none",
+ });
+ }
+ });
+ } else {
+ console.warn('鏃犳硶鏍规嵁鏍囬鍒ゆ柇璺宠浆椤甸潰:', item.noticeTitle);
+ uni.showToast({
+ title: "鏃犳硶璺宠浆锛岃鎵嬪姩杩涘叆",
+ icon: "none",
+ });
+ }
+ } else {
+ uni.showToast({ title: "纭澶辫触", icon: "none" });
+ }
+ });
+ };
+ const userStore = useUserStore();
+ const userId = ref("");
+ const getUserId = () => {
+ return userStore.getInfo().then(res => {
+ console.log(res.user.userId, "res@@@@@@@@@@@2");
+ userId.value = res.user.userId;
+ });
+ };
+
+ // 澶勭悊鏍囩椤靛垏鎹�
+ const handleTabChange = val => {
+ console.log(val);
+ activeTab.value = val.id;
+ page.current = 1;
+ loadMessages(false);
+ };
+
+ // 鍔犺浇娑堟伅鍒楄〃
+ const loadMessages = (append = false) => {
+ if (append) {
+ loadingMore.value = true;
+ } else {
+ loading.value = true;
+ }
+
+ // 鏋勫缓鏌ヨ鍙傛暟
+ const params = {
+ consigneeId: userId.value,
+ current: page.current,
+ size: page.size,
+ status: activeTab.value,
+ };
+ console.log(params, "===========");
+ return listNotice(params)
+ .then(res => {
+ const records = res?.data?.records || [];
+ total.value = res?.data?.total || 0;
+
+ if (append) {
+ messageList.value = [...messageList.value, ...records];
+ } else {
+ messageList.value = records;
+ }
+ })
+ .catch(error => {
+ console.error("鑾峰彇娑堟伅澶辫触:", error);
+ uni.showToast({ title: "鑾峰彇娑堟伅澶辫触锛岃閲嶈瘯", icon: "none" });
+ })
+ .finally(() => {
+ loading.value = false;
+ loadingMore.value = false;
+ });
+ };
+
+ // 鍔犺浇鏇村
+ const loadMore = () => {
+ console.log("===========");
+ if (loading.value || loadingMore.value) return;
+ if (messageList.value.length >= total.value) return;
+
+ page.current++;
+ loadMessages(true);
+ };
+
+ // 涓嬫媺鍒锋柊
+ const onRefresh = () => {
+ triggered.value = true;
+ // 閲嶇疆椤电爜
+ page.current = 1;
+ // 閲嶆柊鍔犺浇娑堟伅
+ loadMessages(false).finally(() => {
+ // 鍏抽棴鍒锋柊鐘舵��
+ setTimeout(() => {
+ triggered.value = false;
+ }, 500);
+ });
+ };
+
+ // 椤甸潰鍔犺浇鏃惰幏鍙栨秷鎭垪琛�
+ onMounted(() => {
+ getUserId().then(() => {
+ loadMessages();
+ // 鏇存柊 tab 鏍忚鏍�
+ updateTabBarBadge();
+ });
+ });
+
+ // 椤甸潰鏄剧ず鏃朵篃鏇存柊瑙掓爣锛堜粠鍏朵粬椤甸潰杩斿洖鏃讹級
+ onShow(() => {
+ if (userId.value) {
+ updateTabBarBadge();
+ }
+ });
+</script>
+
+<style scoped lang="scss">
+ // 鍏ㄥ眬鍙橀噺
+ $primary-color: #2979ff;
+ $primary-light: #4a90e2;
+ $success-color: #4cd964;
+ $warning-color: #ff9500;
+ $danger-color: #ff3b30;
+ $text-primary: #1f2937;
+ $text-secondary: #6b7280;
+ $text-tertiary: #9ca3af;
+ $bg-color: #f9fafb;
+ $card-bg: #ffffff;
+ $border-color: #e5e7eb;
+ $shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+ $shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+ $shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+
+ .message-page {
+ min-height: 100vh;
+ background: linear-gradient(180deg, #f9fafb 0%, #ffffff 100%);
+ padding-bottom: 30rpx;
+ }
+
+ /* 鏍囩椤靛鍣� */
+ .tabs-container {
+ background-color: #ffffff;
+ margin-bottom: 12rpx;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+ position: sticky;
+ top: 0;
+ z-index: 10;
+ }
+
+ /* 娑堟伅鍒楄〃 */
+ .message-list {
+ padding: 0 24rpx 24rpx;
+ min-height: 600rpx;
+ height: calc(100vh - 200rpx);
+ box-sizing: border-box;
+ }
+
+ /* 鍔犺浇鐘舵�� */
+ .loading-state {
+ background-color: $card-bg;
+ border-radius: 20rpx;
+ box-shadow: $shadow-sm;
+ text-align: center;
+ padding: 120rpx 0;
+ margin: 0 0 24rpx 0;
+ border: 1px solid rgba(0, 0, 0, 0.05);
+ width: 100%;
+ box-sizing: border-box;
+ }
+
+ .loading-text {
+ font-size: 14px;
+ color: $text-tertiary;
+ margin-top: 24rpx;
+ font-weight: 500;
+ }
+
+ /* 娑堟伅椤� */
+ .message-item {
+ display: flex;
+ align-items: flex-start;
+ background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
+ border-radius: 20rpx;
+ box-shadow: $shadow-sm;
+ padding: 32rpx;
+ margin: 0 0 24rpx 0;
+ border: 1px solid rgba(0, 0, 0, 0.05);
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ position: relative;
+ overflow: hidden;
+ width: 100%;
+ box-sizing: border-box;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 6rpx;
+ height: 100%;
+ background: linear-gradient(180deg, $primary-color 0%, $primary-light 100%);
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ }
+ }
+
+ .message-item:active {
+ transform: scale(0.98);
+ box-shadow: $shadow-md;
+ }
+
+ .message-item.unread {
+ &::before {
+ opacity: 1;
+ }
+
+ .message-title {
+ font-weight: 700;
+ }
+
+ .message-title::before {
+ content: '';
+ display: inline-block;
+ width: 12rpx;
+ height: 12rpx;
+ border-radius: 50%;
+ margin-right: 12rpx;
+ vertical-align: middle;
+ animation: pulse 2s infinite;
+ }
+ }
+
+ // 閲囪喘瀹℃壒 - 钃濊壊
+ .message-item.type-purchase.unread {
+ background: linear-gradient(135deg, #ffffff 0%, #e3f2fd 100%);
+ border: 1px solid rgba(33, 150, 243, 0.2);
+ box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15);
+
+ &::before {
+ background: linear-gradient(180deg, #2196f3 0%, #1976d2 100%);
+ }
+
+ .message-title {
+ color: #1976d2;
+ }
+
+ .message-title::before {
+ background: #1976d2;
+ }
+
+ .message-view {
+ background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
+ box-shadow: 0 4rpx 12rpx rgba(33, 150, 243, 0.3);
+ }
+ }
+
+ // 鎶ヤ环瀹℃壒 - 缁胯壊
+ .message-item.type-quotation.unread {
+ background: linear-gradient(135deg, #ffffff 0%, #e8f5e9 100%);
+ border: 1px solid rgba(76, 175, 80, 0.2);
+ box-shadow: 0 2px 8px rgba(76, 175, 80, 0.15);
+
+ &::before {
+ background: linear-gradient(180deg, #4caf50 0%, #388e3c 100%);
+ }
+
+ .message-title {
+ color: #388e3c;
+ }
+
+ .message-title::before {
+ background: #388e3c;
+ }
+
+ .message-view {
+ background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
+ box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
+ }
+ }
+
+ // 鍙戣揣瀹℃壒 - 姗欒壊
+ .message-item.type-shipment.unread {
+ background: linear-gradient(135deg, #ffffff 0%, #fff3e0 100%);
+ border: 1px solid rgba(255, 152, 0, 0.2);
+ box-shadow: 0 2px 8px rgba(255, 152, 0, 0.15);
+
+ &::before {
+ background: linear-gradient(180deg, #ff9800 0%, #f57c00 100%);
+ }
+
+ .message-title {
+ color: #f57c00;
+ }
+
+ .message-title::before {
+ background: #f57c00;
+ }
+
+ .message-view {
+ background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
+ box-shadow: 0 4rpx 12rpx rgba(255, 152, 0, 0.3);
+ }
+ }
+
+ // 鍏嚭绠＄悊 - 绱壊
+ .message-item.type-business-trip.unread {
+ background: linear-gradient(135deg, #ffffff 0%, #f3e5f5 100%);
+ border: 1px solid rgba(156, 39, 176, 0.2);
+ box-shadow: 0 2px 8px rgba(156, 39, 176, 0.15);
+
+ &::before {
+ background: linear-gradient(180deg, #9c27b0 0%, #7b1fa2 100%);
+ }
+
+ .message-title {
+ color: #7b1fa2;
+ }
+
+ .message-title::before {
+ background: #7b1fa2;
+ }
+
+ .message-view {
+ background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
+ box-shadow: 0 4rpx 12rpx rgba(156, 39, 176, 0.3);
+ }
+ }
+
+ // 璇峰亣绠＄悊 - 闈掕壊
+ .message-item.type-leave.unread {
+ background: linear-gradient(135deg, #ffffff 0%, #e0f2f1 100%);
+ border: 1px solid rgba(0, 150, 136, 0.2);
+ box-shadow: 0 2px 8px rgba(0, 150, 136, 0.15);
+
+ &::before {
+ background: linear-gradient(180deg, #009688 0%, #00796b 100%);
+ }
+
+ .message-title {
+ color: #00796b;
+ }
+
+ .message-title::before {
+ background: #00796b;
+ }
+
+ .message-view {
+ background: linear-gradient(135deg, #009688 0%, #00796b 100%);
+ box-shadow: 0 4rpx 12rpx rgba(0, 150, 136, 0.3);
+ }
+ }
+
+ // 鍑哄樊绠＄悊 - 绾㈣壊
+ .message-item.type-travel.unread {
+ background: linear-gradient(135deg, #ffffff 0%, #ffebee 100%);
+ border: 1px solid rgba(244, 67, 54, 0.2);
+ box-shadow: 0 2px 8px rgba(244, 67, 54, 0.15);
+
+ &::before {
+ background: linear-gradient(180deg, #f44336 0%, #d32f2f 100%);
+ }
+
+ .message-title {
+ color: #d32f2f;
+ }
+
+ .message-title::before {
+ background: #d32f2f;
+ }
+
+ .message-view {
+ background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
+ box-shadow: 0 4rpx 12rpx rgba(244, 67, 54, 0.3);
+ }
+ }
+
+ // 鎶ラ攢绠＄悊 - 绮夎壊
+ .message-item.type-reimbursement.unread {
+ background: linear-gradient(135deg, #ffffff 0%, #fce4ec 100%);
+ border: 1px solid rgba(233, 30, 99, 0.2);
+ box-shadow: 0 2px 8px rgba(233, 30, 99, 0.15);
+
+ &::before {
+ background: linear-gradient(180deg, #e91e63 0%, #c2185b 100%);
+ }
+
+ .message-title {
+ color: #c2185b;
+ }
+
+ .message-title::before {
+ background: #c2185b;
+ }
+
+ .message-view {
+ background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
+ box-shadow: 0 4rpx 12rpx rgba(233, 30, 99, 0.3);
+ }
+ }
+
+ // 鍗遍櫓浣滀笟 - 娣辩孩鑹�
+ .message-item.type-dangerous.unread {
+ background: linear-gradient(135deg, #ffffff 0%, #ffebee 100%);
+ border: 1px solid rgba(211, 47, 47, 0.3);
+ box-shadow: 0 2px 8px rgba(211, 47, 47, 0.2);
+
+ &::before {
+ background: linear-gradient(180deg, #d32f2f 0%, #b71c1c 100%);
+ }
+
+ .message-title {
+ color: #b71c1c;
+ }
+
+ .message-title::before {
+ background: #b71c1c;
+ }
+
+ .message-view {
+ background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
+ box-shadow: 0 4rpx 12rpx rgba(211, 47, 47, 0.4);
+ }
+ }
+
+ // 榛樿绫诲瀷 - 钃濊壊锛堝師鑹诧級
+ .message-item.type-default.unread {
+ background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
+ border: 1px solid rgba(41, 121, 255, 0.15);
+ box-shadow: 0 2px 8px rgba(41, 121, 255, 0.1);
+
+ &::before {
+ background: linear-gradient(180deg, $primary-color 0%, $primary-light 100%);
+ }
+
+ .message-title {
+ color: $primary-color;
+ }
+
+ .message-title::before {
+ background: $primary-color;
+ }
+ }
+
+ @keyframes pulse {
+ 0%, 100% {
+ opacity: 1;
+ transform: scale(1);
+ }
+ 50% {
+ opacity: 0.6;
+ transform: scale(1.2);
+ }
+ }
+
+ /* 娑堟伅鍐呭 */
+ .message-content {
+ flex: 1;
+ position: relative;
+ z-index: 1;
+ }
+
+ /* 娑堟伅澶撮儴 */
+ .message-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 16rpx;
+ gap: 16rpx;
+ }
+
+ .message-title {
+ font-size: 32rpx;
+ font-weight: 600;
+ color: $text-primary;
+ flex: 1;
+ line-height: 1.5;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ }
+
+ .message-time {
+ font-size: 24rpx;
+ color: $text-tertiary;
+ white-space: nowrap;
+ flex-shrink: 0;
+ padding: 4rpx 12rpx;
+ background: rgba(0, 0, 0, 0.03);
+ border-radius: 12rpx;
+ }
+
+ /* 娑堟伅鎻忚堪 */
+ .message-desc {
+ font-size: 28rpx;
+ color: $text-secondary;
+ line-height: 1.6;
+ margin-bottom: 20rpx;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-height: 2.4em;
+ }
+
+ /* 娑堟伅搴曢儴 */
+ .message-footer {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ margin-top: 16rpx;
+ padding-top: 16rpx;
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
+ }
+
+ .message-view {
+ padding: 12rpx 32rpx;
+ background: linear-gradient(135deg, $primary-color 0%, $primary-light 100%);
+ color: #ffffff;
+ border-radius: 24rpx;
+ font-size: 26rpx;
+ font-weight: 500;
+ box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
+ transition: all 0.3s ease;
+ position: relative;
+ overflow: hidden;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 0;
+ height: 0;
+ border-radius: 50%;
+ background: rgba(255, 255, 255, 0.3);
+ transform: translate(-50%, -50%);
+ transition: width 0.6s, height 0.6s;
+ }
+
+ &:active {
+ transform: scale(0.95);
+ box-shadow: 0 2rpx 8rpx rgba(41, 121, 255, 0.4);
+
+ &::before {
+ width: 300rpx;
+ height: 300rpx;
+ }
+ }
+ }
+
+ /* 绌虹姸鎬� */
+ .empty-state {
+ background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
+ border-radius: 20rpx;
+ box-shadow: $shadow-sm;
+ text-align: center;
+ padding: 160rpx 40rpx;
+ margin: 60rpx 0 0 0;
+ border: 1px solid rgba(0, 0, 0, 0.05);
+ width: 100%;
+ box-sizing: border-box;
+ }
+
+ .empty-text {
+ font-size: 28rpx;
+ color: $text-tertiary;
+ margin-top: 24rpx;
+ font-weight: 500;
+ }
+
+ /* 鍔犺浇鏇村鐘舵�� */
+ .loading-more-state {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 40rpx 0;
+ margin-top: 20rpx;
+ }
+
+ .loading-more-text {
+ font-size: 26rpx;
+ color: $text-tertiary;
+ margin-left: 12rpx;
+ }
+
+ /* 鍔ㄧ敾鏁堟灉 */
+ @keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(30rpx);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ .message-item {
+ animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
+ }
+
+ .message-item:nth-child(1) {
+ animation-delay: 0.05s;
+ }
+
+ .message-item:nth-child(2) {
+ animation-delay: 0.1s;
+ }
+
+ .message-item:nth-child(3) {
+ animation-delay: 0.15s;
+ }
+
+ .message-item:nth-child(4) {
+ animation-delay: 0.2s;
+ }
+
+ .message-item:nth-child(5) {
+ animation-delay: 0.25s;
+ }
+
+ /* 鍝嶅簲寮忎紭鍖� */
+ @media (prefers-color-scheme: dark) {
+ .message-page {
+ background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
+ }
+
+ .tabs-container {
+ background-color: #1f2937;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .message-item {
+ background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
+ border-color: rgba(255, 255, 255, 0.1);
+ }
+
+ .message-item.unread {
+ background: linear-gradient(135deg, #1f2937 0%, #1e3a5f 100%);
+ border-color: rgba(41, 121, 255, 0.3);
+ }
+
+ .message-title {
+ color: #f3f4f6;
+ }
+
+ .message-desc {
+ color: #d1d5db;
+ }
+
+ .message-time {
+ background: rgba(255, 255, 255, 0.1);
+ color: #9ca3af;
+ }
+
+ .empty-state {
+ background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
+ border-color: rgba(255, 255, 255, 0.1);
+ }
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3