1111

Web/src/components/Base/Pagination.vue

@@ -1,31 +1,26 @@
 <template>
-  <div class="pagination">
+  <div class="pagination" v-if="totalPages > 1">
     <!-- 第一行：导航按钮 -->
     <div class="pagination-nav">
       <span v-if="currentPage > 1" @click="changePage('first')">首页</span>
+      <span v-if="currentPage > 1">&nbsp;.&nbsp;</span>
       <span v-if="currentPage > 1" @click="changePage('prev')">上一页</span>
+      <span v-if="currentPage > 1 && currentPage < totalPages">&nbsp;.&nbsp;</span>
       <span v-if="currentPage < totalPages" @click="changePage('next')">下一页</span>
-      <span v-if="currentPage < totalPages" @click="changePage('last')">尾页</span>      
+      <span v-if="currentPage < totalPages">&nbsp;.&nbsp;</span>
+      <span v-if="currentPage < totalPages" @click="changePage('last')">尾页</span>
     </div>
     <!-- 第二行：页码信息与跳转 -->
-    <div class="pagination-info">
+    <div class="pagination-info" style="margin-top: 0px;">
       <span>第{{ currentPage }}/{{ totalPages }}页</span>
-      <input 
-        v-model.number="goPage" 
-        type="number" 
-        min="1" 
-        :max="totalPages" 
-        class="page-input"
-        @keyup.enter="changePage('input')" 
-      />
-      <button @click="changePage('input')">跳转</button>
+      <input v-model.number="goPage" type="number" min="1" :max="totalPages" class="page-input"
+        @keyup.enter="changePage('input')" />
+      <button @click="changePage('input')" style="padding: 0px 10px;  font-size: 15px; ">跳转</button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-
 // 定义Props
 interface Props {
   currentPage: number;  // 当前页
@@ -75,7 +70,7 @@ const scrollToTop = () => {
 // 分页切换方法
 const changePage = (type: 'first' | 'prev' | 'next' | 'last' | 'input') => {
   const pages = totalPages.value
-  
+
   if (type === 'input') {
     // 输入跳转：边界校验
     let page = goPage.value
@@ -103,7 +98,7 @@ const changePage = (type: 'first' | 'prev' | 'next' | 'last' | 'input') => {
   goPage.value = currentPage.value
   // 向父组件抛出最新页码
   emit('pageChange', currentPage.value)
-    scrollToTop();
+  scrollToTop();
 }
 </script>
 
@@ -114,10 +109,7 @@ const changePage = (type: 'first' | 'prev' | 'next' | 'last' | 'input') => {
   margin: 16px 0;
 }
 
-.pagination-nav {
-  display: flex;
-  gap: 12px;
-}
+.pagination-nav {}
 
 .pagination-nav span {
   display: inline-block;
@@ -128,7 +120,8 @@ const changePage = (type: 'first' | 'prev' | 'next' | 'last' | 'input') => {
 .pagination-nav span.disabled {
   color: #999;
   cursor: not-allowed;
-  pointer-events: none; /* 禁用点击 */
+  pointer-events: none;
+  /* 禁用点击 */
 }
 
 .pagination-info {
@@ -140,7 +133,8 @@ const changePage = (type: 'first' | 'prev' | 'next' | 'last' | 'input') => {
 
 .page-input {
   width: 46px;
-  padding: 4px 6px;
+  font-size: 14px;
+  padding: 0px 6px;
   text-align: center;
   border: 1px solid #ccc;
   border-radius: 4px;

Web/src/components/Business/GameChat.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="chat">
+        <div class="item" v-for="(item, index) in data" :key="index">
+            <span>[{{ GetChatType(item.chat.code) }}]</span>
+            <span>
+                <GameUser :data="item.user" :show-icon="1"></GameUser>:
+                <span>
+                    {{ item.chat.sign }}
+                </span>
+                <span v-if="showTime == 1">
+                    ({{ TimeExtend.StrToFormat(item.chat.addTime, "dd日HH:mm") }})
+                </span>
+            </span>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+const props = defineProps({
+    // 字段名、类型、默认值
+    data: Array<any>,
+    showTime: Number,
+    page: Number,
+    limit: Number
+})
+
+const GetChatType = (type: string) => {
+    let result = "";
+    switch (type) {
+        case "Public":
+            result = "公共";
+            break;
+        case "Team":
+            result = "队伍";
+            break;
+        case "Group":
+            result = "帮派";
+            break;
+        case "Region":
+            result = "全区";
+            break;
+        case "Dress":
+            result = "全服";
+            break;
+        case "System":
+            result = "系统";
+            break;
+
+    }
+    return result;
+}
+</script>

Web/src/components/Business/GameUser.vue

@@ -0,0 +1,10 @@
+<template>    
+    <Abar href="">{{data.nick}}</Abar>    
+</template>
+<script lang="ts" setup>
+const props = defineProps({
+    // 字段名、类型、默认值
+    data: null,
+    showIcon: Number
+})
+</script>

Web/src/extends/TimeExtend.ts

@@ -69,4 +69,31 @@ export class TimeExtend {
     public static GetTimeStr(): string {
         return this.Now('HH:mm:ss')
     }
+
+        /**
+     * 时间字符串 转换为 指定格式字符串
+     * 场景：把 "2025-01-01 12:30:45" 转成 "2025年01月01日" / "01-01 12:30" 等
+     * @param timeStr 时间字符串（如 2025-01-01、2025/01/01 12:30、2025-01-01 12:30:45）
+     * @param format 目标格式
+     */
+    public static StrToFormat(timeStr: string, format = 'yyyy-MM-dd HH:mm:ss'): string {
+        return this.Format(timeStr, format);
+    }
+    /**
+     * 时间字符串 转 日期对象
+     * @param timeStr 时间字符串
+     */
+    public static StrToDate(timeStr: string): Date | null {
+        const date = new Date(timeStr);
+        return isNaN(date.getTime()) ? null : date;
+    }
+
+    /**
+     * 时间字符串 转 秒级时间戳
+     * @param timeStr 时间字符串
+     */
+    public static StrToSecondStamp(timeStr: string): number | null {
+        const date = this.StrToDate(timeStr);
+        return date ? Math.floor(date.getTime() / 1000) : null;
+    }
 }

Web/src/pages/chat/index.vue

@@ -4,26 +4,53 @@
         <Abar href="/news">*更新内容早知道</Abar>
     </div>
     <div class="title">
-        <Acheak @click="BindData('')" :on-value="type" on-cheak="">公共</Acheak>.
+        <Acheak @click="BindData('0')" :on-value="type" on-cheak="0">公共</Acheak>.
         <Acheak @click="BindData('1')" :on-value="type" on-cheak="1">队伍</Acheak>.
         <Acheak @click="BindData('2')" :on-value="type" on-cheak="2">帮派</Acheak>.
         <Acheak @click="BindData('3')" :on-value="type" on-cheak="3">全区</Acheak>.
-        <Acheak @click="BindData('4')" :on-value="type" on-cheak="4">系统</Acheak>.
-        <Acheak @click="BindData('5')" :on-value="type" on-cheak="5">全服</Acheak>
+        <Acheak @click="BindData('4')" :on-value="type" on-cheak="4">全服</Acheak>.
+        <Acheak @click="BindData('5')" :on-value="type" on-cheak="5">系统</Acheak>
     </div>
-    <div class="chat">
-        <div class="item">
-            暂无发言.
+    <div class="content">
+        <GameChat :data="data" :show-time="1"></GameChat>
+        <span v-if="data.length == 0">暂无发言.</span>
+    </div>
+    <div class="content">
+        <Pagination :currentPage="currentPage" :limit="10" :total="total" @pageChange="handlePageChange" />
+    </div>
+    <div class="content" v-if="type != '5'">
+        <span>请输入聊天信息:</span><br>
+        <div v-if="goodsName != ''">
+            {{ goodsName }}：{{ goodsCount }} <span style="font-size: 18px;">(每次发言需要1个哦)</span>
         </div>
+        <div>
+            <textarea name="sign" id="sign" rows="2" cols="20" maxlength="80" class="ipt emojiTxt"
+                v-model="sign"></textarea>
+        </div>
+        <div>
+            <input type="submit" value="发言" class="btn btn-danger" @click="SendChat" />.
+            <Abutton @click="Refresh">刷新</Abutton>
+        </div>
+    </div>
+    <div class="content">
+        <Abar href="/">*公聊频道发言规范</Abar><br />
+        <Abar href="/">*游戏用户守则规范</Abar>
     </div>
 </template>
 <script setup lang="ts">
+
 definePageMeta({
     layout: layout.default,
     middleware: 'page-loading'
 })
 
-const type = ref('');
+const type = ref('0');
+const currentPage = ref<number>(1);
+const total = ref<number>(0);
+const data = ref<Array<any>>([]);
+const goodsCount = ref(0);
+const goodsName = ref('');
+const sign = ref('');
 
 onMounted(async () => {
     try {
@@ -38,6 +65,16 @@ const BindData = async (typeid: string): Promise<void> => {
     if (type.value != typeid) {
         type.value = typeid;
     }
+    let result = await ChatService.GetChatData(Number(typeid), currentPage.value);
+    if (result.code == 0) {
+        data.value = result.data.data;
+        goodsCount.value = result.data.sendGoodsCount
+        goodsName.value = result.data.sendGoodsName
+        total.value = result.data.total;
+    }
+    else {
+        MessageExtend.ShowDialog("提示", result.msg);
+    }
 };
 
 /**刷新 */
@@ -48,4 +85,35 @@ const Refresh = async (): Promise<void> => {
     MessageExtend.Notify("刷新成功!", "success");
     PageExtend.ScrollToTop();
 }
+
+/**翻页 */
+const handlePageChange = async (page: number): Promise<void> => {
+    currentPage.value = page;
+    await BindData(type.value);
+};
+
+/**发送消息 */
+let send = true;
+const SendChat = async (): Promise<void> => {
+    if (sign.value == '' || sign.value == null) {
+        MessageExtend.ShowToast('聊天内容不能为空!');
+        return;
+    }
+    if (send) {
+        send = false;
+        //发送消息请求
+        let result = await ChatService.SendChat(Number(type.value), sign.value);
+        send = true;
+        if (result.code == 0) {
+            sign.value = '';
+            await BindData(type.value);
+            PageExtend.ScrollToTop();
+        }
+        else {
+            MessageExtend.ShowDialog("提示", result.msg);
+        }
+    }
+
+}
+
 </script>

Web/src/pages/map/index.vue

@@ -10,26 +10,7 @@
     </div>
 
     <div class="notification">
-        <div class="chat">
-            <div class="item">
-                [公共]
-                <span><img src='http://gree.pccsh.com/res/badge/9001.gif' class='user-head' alt='头像' /><a
-                        class='a-nodec' href='/User/Index/Home/250822?sid=W6Wg8iH9gY7wIBNSEdtFcQ3KbI5YiKDo'><span
-                            class='Nick-Gold'>　　　航海百曉生　　　　</span></a><img src='http://gree.pccsh.com/res/badge/9001.gif'
-                        alt='vip' class='vip' />&nbsp;<span class='icon-cry'><i
-                            class='icon-crystal liangHao'></i></span><img src='http://gree.pccsh.com/res/badge/9001.gif'
-                        alt='心愿星河' class='badge' />&nbsp;</span>
-                :
-                <span class=''>出身上天魔套15，复仇8，白副手10块，白四象5块，4级审判20，一套5级房子材料20</span>
-            </div>
-            <div class="item">
-                [公共]
-                <span><a class='a-nodec'
-                        href='/User/Index/Home/14637160?sid=W6Wg8iH9gY7wIBNSEdtFcQ3KbI5YiKDo'>长剑小苍穹失散多年的亲爹</a></span>
-                :
-                <span class=''><img src='http://r.kexunkeji.cn/em/unit/1.png' alt='嘟嘴' class='em' /></span>
-            </div>
-        </div>
+        <GameChat :data="chatData" :show-time="0"></GameChat>     
     </div>
     <div class="content">
         您看到:
@@ -38,8 +19,8 @@
     </div>
     <div class="content">
         <div class="item" v-for="item in npcData">
-            <Abar href="">{{item.npcName}}{{item.tips}}</Abar>
-        </div>       
+            <Abar href="">{{ item.npcName }}{{ item.tips }}</Abar>
+        </div>
     </div>
     <div class="content">
     </div>
@@ -73,6 +54,7 @@ definePageMeta({
 const mapInfo = ref<any>({});
 const cityInfo = ref<any>({});
 const npcData = ref<Array<any>>([]);
+const chatData = ref<Array<any>>([]);
 
 onMounted(async () => {
     try {
@@ -90,6 +72,7 @@ const BindData = async (map: string): Promise<void> => {
         mapInfo.value = result.data.mapInfo;
         cityInfo.value = result.data.cityInfo;
         npcData.value = result.data.npcData;
+        chatData.value = result.data.chatData;
         MapVent(result.data.mapInfo.near);
         console.log(result.data);
 

Web/src/services/Index/ChatService.ts

@@ -0,0 +1,19 @@
+export class ChatService {
+    /**
+     * 获取公聊信息
+     * GET /Chat/Chat/GetChatData
+     */
+    static async GetChatData(type: number, page: number) {
+        return await ApiService.Request("get", "/Chat/Chat/GetChatData", { type, page });
+    }
+
+    /**
+     * 发言
+     * POST /Chat/Chat/SendChat
+     * @param type body
+     * @param sign body
+     */
+    static async SendChat(type: number, sign: string) {
+        return await ApiService.Request("post", "/Chat/Chat/SendChat", { type, sign });
+    }
+}