From 2b8ef76798e26371baf2eb96a931a64f7c27bc6b Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Mon, 23 Dec 2024 10:10:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B6=88=E6=81=AF=E7=AD=89=E9=9D=99=E6=80=81?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages.json                    |  11 ++-
 src/pages/message-pages/index.vue | 158 ++++++++++++++++++++++++++++++
 src/pages/message/index.vue       | 105 +++++++++++++++++++-
 3 files changed, 267 insertions(+), 7 deletions(-)
 create mode 100644 src/pages/message-pages/index.vue

diff --git a/src/pages.json b/src/pages.json
index 494d007..d40209c 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -42,11 +42,18 @@
                 "navigationStyle": "custom"
             }
         },
-
+        // 消息
         {
             "path": "pages/message/index",
             "style": {
-                "navigationBarTitleText": "消息"
+                "navigationStyle": "custom"
+            }
+        },
+        // 消息 -- 聊天页面
+        {
+            "path": "pages/message-pages/index",
+            "style": {
+                "navigationStyle": "custom"
             }
         },
         // 个人中心
diff --git a/src/pages/message-pages/index.vue b/src/pages/message-pages/index.vue
new file mode 100644
index 0000000..0b83269
--- /dev/null
+++ b/src/pages/message-pages/index.vue
@@ -0,0 +1,158 @@
+<template>
+    <!-- 聊天页面 -->
+    <view class="h5-container message-pages">
+        <view style="padding: 15px">
+            <van-icon name="arrow-left" @click="onClickLeft" />
+            <text style="color: #000"> 老张租赁 </text>
+        </view>
+
+        <scroll-view scroll-y style="padding-bottom: 60px">
+            <van-cell-group inset style="flex: 1">
+                <view v-for="item in 20" :key="item">
+                    <view class="message-items left-message" v-if="item === 2 || item === 4">
+                        <view style="flex: 1">
+                            <text> 你还有货吗 </text>
+                        </view>
+                        <van-image
+                            round
+                            fit="cover"
+                            width="30px"
+                            height="30px"
+                            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+                        />
+                    </view>
+                    <view class="message-items right-message" v-if="item === 3 || item === 5">
+                        <van-image
+                            round
+                            fit="cover"
+                            width="30px"
+                            height="30px"
+                            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+                        />
+                        <view style="flex: 1">
+                            <text> 你还有货吗 </text>
+                        </view>
+                    </view>
+                </view>
+            </van-cell-group>
+        </scroll-view>
+
+        <view class="message-ipt">
+            <van-field rows="1" autosize type="textarea" />
+            <van-icon name="guide-o" color="#22ab9a" size="24" />
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useMemberStore } from '@/stores/index.js'
+import { onLoad } from '@dcloudio/uni-app'
+const memberStore = useMemberStore()
+const userName = ref('')
+const userAccount = ref('')
+
+const onClickLeft = () => {
+    uni.navigateBack()
+}
+
+onLoad(() => {
+    userName.value = memberStore.userInfo.nickName
+    userAccount.value = memberStore.userInfo.userName
+})
+</script>
+
+<style lang="scss" scoped>
+.message-pages {
+    position: relative;
+    padding: 10px 0;
+    color: #333;
+    box-sizing: border-box;
+    background: linear-gradient(to bottom, #c0e9ce, #e4f2f2, #f9f9f9);
+}
+
+:deep(.van-cell-group--inset) {
+    padding: 15px;
+}
+.message-items {
+    padding: 4px 0;
+    display: flex;
+    align-items: center;
+
+    .message-list {
+        width: 100%;
+        padding: 4px 0 4px 10px;
+        display: flex;
+        align-items: center;
+
+        .message-count {
+            width: 20px;
+            height: 20px;
+            line-height: 20px;
+            text-align: center;
+            border-radius: 10px;
+            background-color: #df534d;
+            color: #fff;
+        }
+    }
+
+    .message-info {
+        font-size: 14px;
+        color: #ccc;
+    }
+}
+.left-message view {
+    margin-right: 8px;
+    text-align: right;
+    text {
+        height: 28px;
+        padding: 0 6px;
+        display: inline-block;
+        background-color: #22ab9a;
+        line-height: 28px;
+        color: #fff;
+        border-top-left-radius: 14px;
+        border-bottom-left-radius: 14px;
+        border-bottom-right-radius: 14px;
+    }
+}
+.right-message view {
+    margin-left: 8px;
+    text-align: left;
+    text {
+        height: 28px;
+        padding: 0 6px;
+        display: inline-block;
+        background-color: #fff;
+        line-height: 28px;
+        color: #000;
+        border-top-right-radius: 14px;
+        border-bottom-right-radius: 14px;
+        border-bottom-left-radius: 14px;
+        border: 1px solid #eee;
+    }
+}
+
+.message-ipt {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    padding: 12px 0;
+    height: 60px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+
+    .van-field {
+        height: auto;
+        padding: 0;
+        margin-right: 6px;
+        border: 1px solid #22ab9b;
+        width: 80%;
+        border-radius: 6px;
+        caret-color: transparent;
+    }
+}
+</style>
diff --git a/src/pages/message/index.vue b/src/pages/message/index.vue
index a06d3d1..10a1e09 100644
--- a/src/pages/message/index.vue
+++ b/src/pages/message/index.vue
@@ -1,15 +1,110 @@
 <template>
     <!-- 消息 -->
+    <view class="h5-container message">
+        <view
+            style="
+                padding: 15px;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            "
+        >
+            <view>
+                <text style="color: #000"> 消息 </text>
+                <text> (3) </text>
+            </view>
+            <view>
+                <van-icon name="guide-o" />
+                <text> 清除未读 </text>
+            </view>
+        </view>
+
+        <scroll-view scroll-y>
+            <van-cell-group inset style="flex: 1">
+                <view
+                    class="message-items"
+                    v-for="item in 20"
+                    :key="item"
+                    @click="onJumpToMessagePages"
+                >
+                    <van-image
+                        round
+                        fit="cover"
+                        width="48px"
+                        height="48px"
+                        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+                    />
+
+                    <view style="flex: 1">
+                        <view class="message-list">
+                            <text style="font-weight: bold"> 老张租赁 </text>
+                            <text> 9：12 </text>
+                        </view>
+                        <view class="message-list message-info">
+                            <text> 公司洽谈··· </text>
+                            <text class="message-count"> 2 </text>
+                        </view>
+                    </view>
+                </view>
+            </van-cell-group>
+        </scroll-view>
+    </view>
 </template>
 
 <script setup>
 import { ref } from 'vue'
+import { useMemberStore } from '@/stores/index.js'
+import { onLoad } from '@dcloudio/uni-app'
+const memberStore = useMemberStore()
+const userName = ref('')
+const userAccount = ref('')
+
+onLoad(() => {
+    userName.value = memberStore.userInfo.nickName
+    userAccount.value = memberStore.userInfo.userName
+})
+const onJumpToMessagePages = () => {
+    uni.navigateTo({ url: '/pages/message-pages/index' })
+}
 </script>
 
-<style>
-.content {
-    width: 100%;
-    height: 100%;
-    text-align: center;
+<style lang="scss" scoped>
+.message {
+    padding: 10px 0;
+    color: #333;
+    box-sizing: border-box;
+    background: linear-gradient(to bottom, #c0e9ce, #e4f2f2, #f9f9f9);
+}
+
+:deep(.van-cell-group--inset) {
+    padding: 15px;
+}
+.message-items {
+    padding: 4px 0;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #ccc;
+
+    .message-list {
+        width: 100%;
+        padding: 4px 0 4px 10px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .message-count {
+            width: 20px;
+            height: 20px;
+            line-height: 20px;
+            text-align: center;
+            border-radius: 10px;
+            background-color: #df534d;
+            color: #fff;
+        }
+    }
+    .message-info {
+        font-size: 14px;
+        color: #ccc;
+    }
 }
 </style>