消息

src/components/ChatInfo.vue

@@ -5,16 +5,25 @@
         <div class="chat-content" v-else>
             <div class="chat-box">
                 <div class="chat-name" v-if="flow == 'in'">{{ info.fromNick }}</div>
-                <div class="chat-message">{{ info.body }}</div>
+                <div class="chat-message" v-if="type === 'text'">{{ info.body }}</div>
+                <van-image
+                    :src="attach.url"
+                    @click="preview(0, [attach.url])"
+                    :width="width"
+                    :height="height"
+                    fit="scale-down"
+                    v-else
+                ></van-image>
             </div>
 
-            <van-image width="36" height="36" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
+            <van-image width="36" height="36" round :src="info.fromIcon" />
         </div>
     </div>
 </template>
 <script setup>
 import { defineProps, computed } from 'vue';
 import dayjs from 'dayjs';
+import { ImagePreview } from 'vant';
 
 const props = defineProps({
     info: {
@@ -40,6 +49,49 @@ const type = computed(() => {
     return props.info.type || 'text';
 });
 
+const attach = computed(() => {
+    return props.info.attach || {};
+});
+function accMul(arg1, arg2) {
+    var m = 0,
+        s1 = arg1.toString(),
+        s2 = arg2.toString();
+    try {
+        m += s1.split('.')[1].length;
+    } catch (e) {}
+    try {
+        m += s2.split('.')[1].length;
+    } catch (e) {}
+    return (Number(s1.replace('.', '')) * Number(s2.replace('.', ''))) / Math.pow(10, m);
+}
+const width = computed(() => {
+    if (attach.value.w) {
+        if (attach.value.w <= attach.value.h) {
+            let width = accMul(accMul(120, attach.value.w), 1 / attach.value.h);
+            console.log(width);
+            if (Number(width) > 200) {
+                width = 120;
+            }
+            return width;
+        }
+    }
+    return '';
+});
+
+const height = computed(() => {
+    if (attach.value.w) {
+        if (attach.value.w > attach.value.h) {
+            let height = accMul(accMul(120, attach.value.h), 1 / attach.value.w);
+            console.log(height);
+            if (Number(height) > 200) {
+                height = 120;
+            }
+            return height;
+        }
+    }
+    return '';
+});
+
 const noticeStr = computed(() => {
     if (type.value === 'notification') {
         if (props.info.attach.type === 'updateTeam') {
@@ -79,6 +131,15 @@ const timeStr = computed(() => {
         sameElse: 'DD/MM/YYYY HH:mm' // Everything else ( 7/10/2011 )
     });
 });
+
+const preview = (index = 0, list = []) => {
+    ImagePreview({
+        images: [...list].map(item => {
+            return item;
+        }),
+        startPosition: index
+    });
+};
 </script>
 
 <style lang="less" scoped>

src/components/TeamInfo.vue

@@ -0,0 +1,136 @@
+<template>
+    <div class="chat-info" @click="goTeam">
+        <van-image width="50" height="50" round :src="info.icon" />
+
+        <div class="chat-content">
+            <div class="text1">{{ info.name }}</div>
+            <div class="text2">{{ info.intro }}</div>
+            <!-- <div class="text2">{{ msg.type ? (msg.type == 'text' ? msg.body : '[图片]') : '' }}</div> -->
+        </div>
+        <div class="chat-right" v-if="info.inTeam">
+            <div class="text1">{{ msg.time }}</div>
+            <!-- <van-badge :content="1" max="99" /> -->
+        </div>
+        <van-button v-else type="primary" size="mini" round @click.stop="join">申请加入</van-button>
+    </div>
+</template>
+<script setup>
+import { defineProps, computed, getCurrentInstance, defineEmits, onMounted } from 'vue';
+import dayjs from 'dayjs';
+import { useRouter } from 'vue-router';
+
+const props = defineProps({
+    info: {
+        type: Object,
+        default: () => {
+            return {};
+        }
+    }
+});
+
+const msg = computed(() => {
+    if (props.info.msg) {
+        let day1 = dayjs(props.info.msg.time);
+        return {
+            ...props.info.msg,
+            time: day1.calendar(dayjs(), {
+                sameDay: 'HH:mm ', // The same day ( Today at 2:30 AM )
+                nextDay: '[明天] HH:mm', // The next day ( Tomorrow at 2:30 AM )
+                nextWeek: '[下周] DD HH:mm', // The next week ( Sunday at 2:30 AM )
+                lastDay: '[昨天]', // The day before ( Yesterday at 2:30 AM )
+                lastWeek: '[上周] DD', // Last week ( Last Monday at 2:30 AM )
+                sameElse: 'MM[月]DD[日]' // Everything else ( 7/10/2011 )
+            })
+        };
+    } else {
+        return {};
+    }
+});
+
+const {
+    appContext: {
+        config: { globalProperties: global }
+    }
+} = getCurrentInstance();
+
+const emits = defineEmits(['update:info']);
+function join() {
+    global.$http
+        .post('/team/invite?userId=' + global.$store.state.userInfo.id + '&tid=' + props.info.tid)
+        .then(res => {
+            global.$toast.success('加入成功');
+            console.log(res);
+            emits('update:info', { ...res, inTeam: true });
+        })
+        .catch(e => {
+            if (e.error) {
+                global.$toast(e.error);
+            }
+        });
+}
+
+const router = new useRouter();
+function goTeam() {
+    if (props.info.inTeam) {
+        router.push({
+            name: 'chatDetail',
+            query: {
+                teamId: props.info.tid
+            }
+        });
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.chat-info {
+    background: #222426;
+    .flex();
+    align-items: stretch;
+    padding: 15px;
+    .van-image {
+        flex-shrink: 0;
+    }
+
+    .chat-content {
+        flex-grow: 1;
+        padding: 0 12px;
+        .text1 {
+            font-size: 14px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 24px;
+        }
+
+        .text2 {
+            font-size: 12px;
+            color: #939599;
+            line-height: 24px;
+        }
+    }
+    .chat-right {
+        .flex-col();
+        align-items: flex-end;
+        .text1 {
+            font-size: 12px;
+            color: #939599;
+            line-height: 24px;
+        }
+        .van-badge {
+            transform: translate(0, 0);
+            --van-badge-border-width: 0;
+            --van-badge-font-size: 10px;
+            --van-badge-padding: 0 5px;
+            line-height: 16px;
+            box-sizing: border-box;
+            margin-top: 5px;
+        }
+    }
+
+    .van-button {
+        align-self: center;
+        --van-button-mini-padding: 0 10px;
+        --van-button-mini-font-size: 12px;
+    }
+}
+</style>

src/plugins/chat.js

@@ -4,6 +4,19 @@ import http from './http';
 import store from '../store';
 var data = {};
 
+const images = [
+    'https://cdn.raex.vip/nft/2022-12-15-15-53-11SalztwsE.jpg',
+    'https://cdn.raex.vip/nft/2022-12-14-16-26-04uDhOZUZG.jpg',
+    'https://cdn.raex.vip/nft/2022-11-30-14-05-53IvdKPUqD.jpg',
+    'https://cdn.raex.vip/nft/僵尸/U/bj01_zt01_bq01_yf06_ts02_ls02_ss10_hk01.png',
+    'https://cdn.raex.vip/thumb_image/2022-06-17-22-27-50ABPKthLW.jpg',
+    'https://cdn.raex.vip/thumb_image/2022-12-06-14-21-19xesksFXt.jpg',
+    'https://cdn.raex.vip/nft/PFA1/bj51_t26_yf71_ts46_es13_ys9_qt7_z4.png',
+    'https://cdn.raex.vip/user/undefined/2022-11-09-15-40-15Cocfjrgz.png',
+    'https://cdn.raex.vip/image/2022-10-12-14-52-19IDjxOfox.jpg',
+    'https://cdn.raex.vip/image/2022-10-12-14-53-04eGNedNUK.jpg'
+];
+
 //msg
 // scene: 消息场景
 // from: 消息发送方, 帐号或群id
@@ -57,8 +70,8 @@ var data = {};
 // isUnreadable: 是否计入消息未读数
 // isLocal: 是否是本地消息, 请查阅发送本地消息
 // yidunAntiSpamRes: 易盾反垃圾返回的结果。当开启易盾反垃圾服务，并且匹配消息体命中到易盾的反垃圾规则，会返回此结果。
-
 var nim = null;
+var avatars = {};
 
 // teamId='7748093008'
 
@@ -73,6 +86,7 @@ function initChat() {
             return http.http.post('/neteaseUser/create?userId=' + store.state.userInfo.id);
         })
         .then(res => {
+            store.commit('setNeteaseUser', res);
             nim = new NIM({
                 debugLevel: 'debug', // 是否开启日志，将其打印到console。集成开发阶段建议打开。
                 appkey: '872dd9d0a0f8eda25b579654745db459',
@@ -80,6 +94,7 @@ function initChat() {
                 token: res.token,
                 db: true //若不要开启数据库请设置false。SDK默认为true。
             });
+            avatars[store.state.userInfo.id] = store.state.userInfo.avatar;
 
             nim.connect().then(() => {
                 getTeams();
@@ -152,7 +167,7 @@ async function sendMsg(msg = '', toTeamId, onSendBefore, type = 'Text', scene =
                 console.log('Upload done!', file);
             },
             onSendBefore: function (msg) {
-                console.log('Get msg before send', msg);
+                onSendBefore(msg);
             }
         });
     }
@@ -172,8 +187,23 @@ function getPushMsg(msgs, oldMsgs = []) {
     let _back = [...msgs, ...oldMsgs].sort((a, b) => {
         return a.time - b.time;
     });
+    _back = _back.map(item => {
+        return {
+            ...item,
+            fromIcon: getAvatar(item.from)
+        };
+    });
+    console.log(_back);
 
     return _back;
 }
 
-export { initChat, getTeam, getHistroy, sendMsg, getPushMsg };
+function getAvatar(account) {
+    if (!avatars[account]) {
+        avatars[account] = images[Math.floor(Math.random() * 10)];
+    }
+
+    return avatars[account];
+}
+
+export { nim, initChat, getTeam, getHistroy, sendMsg, getPushMsg };

src/router/index.js

@@ -121,18 +121,18 @@ const routes = [
                     pageType: Page.Every,
                     menuPage: true
                 }
-            },
-            {
-                path: '/starMap',
-                name: 'starMap',
-                component: () => import('../views/StarMap.vue'),
-                meta: {
-                    pageType: Page.Every,
-                    menuPage: true
-                }
             }
         ]
     },
+    {
+        path: '/starMap',
+        name: 'starMap',
+        component: () => import('../views/StarMap.vue'),
+        meta: {
+            pageType: Page.Every,
+            menuPage: true
+        }
+    },
     {
         path: '/hall',
         name: 'hall',

src/store/index.js

@@ -25,7 +25,8 @@ export default createStore({
         platform: '',
         darkTheme: false,
         starPage: false,
-        inviteType: 'NORMAL'
+        inviteType: 'NORMAL',
+        neteaseUser: null
     },
     mutations: {
         setFinished(state, finished) {
@@ -90,6 +91,9 @@ export default createStore({
         },
         setInviteType(state, inviteType) {
             state.inviteType = inviteType;
+        },
+        setNeteaseUser(state, neteaseUser) {
+            state.neteaseUser = neteaseUser;
         }
     },
     actions: {

src/views/Index.vue

@@ -45,10 +45,10 @@ export default {
                     preIcon: require('@assets/tabbar_icon_02_pre.png')
                 },
                 {
-                    name: 'starMap',
-                    title: '星图',
-                    icon: require('@assets/tabbar_icon_05.png'),
-                    preIcon: require('@assets/tabbar_icon_05_pre.png')
+                    name: 'chatList',
+                    title: '群组',
+                    icon: require('@assets/tabbar_icon_06.png'),
+                    preIcon: require('@assets/tabbar_icon_06_pre.png')
                 },
                 {
                     name: 'store',

src/views/StarMap.vue

@@ -15,6 +15,9 @@
                 <div class="text2">链上星图</div>
             </div> -->
         </div>
+        <div class="back-content" @click="$router.go(-1)">
+            <img src="@assets/icon_fanhui2.png" alt="" />
+        </div>
 
         <div class="content">
             <div class="tips">
@@ -237,4 +240,23 @@ export default {
     display: block;
     z-index: 20;
 }
+
+.back-content {
+    width: 34px;
+    height: 34px;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(1px);
+    .flex();
+    justify-content: center;
+    border-radius: 100px;
+    box-sizing: border-box;
+    img {
+        width: 18px;
+        height: 18px;
+    }
+    position: fixed;
+    left: 16px;
+    top: calc(var(--safe-top) + 16px);
+    z-index: 20;
+}
 </style>

src/views/chat/Detail.vue

@@ -6,7 +6,7 @@
             <van-empty :image="require('@assets/empty_img_asset.png')" v-if="empty" description="没有任何藏品哦~" />
         </van-list> -->
         <van-sticky>
-            <van-nav-bar :title="title" left-text="" right-text="按钮" left-arrow @click-left="$router.go(-1)" />
+            <van-nav-bar :title="title" left-text="" right-text="" left-arrow @click-left="$router.go(-1)" />
         </van-sticky>
 
         <div
@@ -43,7 +43,10 @@
 
                 <div class="btn-content" :style="{ width: message ? '60px' : '28px' }">
                     <van-button size="mini" v-if="message" @click="send" type="primary">发送</van-button>
-                    <img class="file-btn" v-else src="@assets/icon_liaotian_gengduo.png" alt="" />
+                    <div class="file-upload" v-else>
+                        <img class="file-btn" src="@assets/icon_liaotian_tupian.png" alt="" />
+                        <van-uploader :after-read="afterRead" result-type="file" />
+                    </div>
                 </div>
             </div>
             <div class="emoji-list" v-if="showEmoji">
@@ -56,12 +59,15 @@
 </template>
 
 <script setup>
-import { ref, onMounted, computed } from 'vue';
+import { ref, onMounted, computed, getCurrentInstance } from 'vue';
 import ChatInfo from '../../components/ChatInfo.vue';
 import emojis from '../../emojis.json';
 import { useToggle } from '@vant/use';
-import { getTeam, getHistroy, sendMsg, getPushMsg } from '../../plugins/chat';
+import { nim, getTeam, getHistroy, sendMsg, getPushMsg } from '../../plugins/chat';
 import { nextTick } from 'process';
+import { useRoute } from 'vue-router';
+import { useStore } from 'vuex';
+import store from '../../store';
 
 const emojisPeople = Object.keys(emojis)
     .filter(key => {
@@ -71,6 +77,12 @@ const emojisPeople = Object.keys(emojis)
         return emojis[key];
     });
 
+const {
+    appContext: {
+        config: { globalProperties: global }
+    }
+} = getCurrentInstance();
+
 const message = ref('');
 const teamInfo = ref({});
 const list = ref([]);
@@ -112,19 +124,59 @@ function submit(e) {
     }
 }
 
-onMounted(() => {
-    setTimeout(() => {
-        getTeam(teamId.value).then(value => {
-            teamInfo.value = value;
-        });
-        getHistroy(teamId.value).then(value => {
-            console.log(value);
-            list.value = value;
+function afterRead(e) {
+    sendMsg(
+        e.file,
+        teamId.value,
+        msg => {
+            console.log(msg);
+            list.value = getPushMsg(msg, list.value);
+
             nextTick(() => {
                 goBottom();
             });
-        });
-    }, 1000);
+        },
+        'Image'
+    );
+}
+
+const route = new useRoute();
+onMounted(() => {
+    if (route.query.teamId) {
+        teamId.value = route.query.teamId;
+    }
+
+    setTimeout(
+        () => {
+            global.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            getTeam(teamId.value).then(value => {
+                teamInfo.value = value;
+            });
+            getHistroy(teamId.value).then(value => {
+                console.log(value);
+                list.value = getPushMsg(value, list.value);
+                nextTick(() => {
+                    global.$toast.clear();
+                    goBottom();
+                });
+            });
+
+            nim.on('msg', msg => {
+                console.log(msg);
+                if (msg.to === teamId.value) {
+                    list.value = getPushMsg(msg, list.value);
+
+                    nextTick(() => {
+                        goBottom();
+                    });
+                }
+            });
+        },
+        store.state.neteaseUser ? 50 : 1000
+    );
 });
 </script>
 <style lang="less" scoped>
@@ -193,4 +245,31 @@ onMounted(() => {
         font-size: 24px;
     }
 }
+
+.file-upload {
+    position: relative;
+    .van-uploader {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        opacity: 0;
+    }
+}
+
+/deep/input:-webkit-autofill {
+    box-shadow: 0 0 0px 1000px #222426 inset;
+    -webkit-text-fill-color: #898989;
+}
+
+.van-nav-bar {
+    --van-nav-bar-background-color: #1c1c1c;
+    --van-nav-bar-icon-color: #fff;
+    --van-nav-bar-title-text-color: #fff;
+    --van-nav-bar-text-color: #fff;
+    --van-border-color: #1c1c1c;
+    --van-nav-bar-title-font-size: 16px;
+    --van-font-weight-bold: bold;
+}
 </style>

src/views/chat/List.vue

@@ -6,86 +6,67 @@
         v-model="isLoading"
         @refresh="onRefresh"
     >
-        <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
-            <template v-for="(item, index) in list" :key="index"> </template>
-            <div class="chat-info" v-for="i in 5" :key="i">
-                <van-image width="50" height="50" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
+        <van-list
+            v-model:loading="loading"
+            :immediate-check="false"
+            :finished="finished"
+            finished-text=""
+            @load="getData"
+        >
+            <template v-for="(item, index) in list" :key="index">
+                <team-info v-model:info="list[index]"></team-info>
+            </template>
 
-                <div class="chat-content">
-                    <div class="text1">绿洲会员群</div>
-                    <div class="text2">管理员：新进群的宝宝吧里备注改一下…</div>
-                </div>
-
-                <div class="chat-right">
-                    <div class="text1">20:56</div>
-                    <van-badge :content="1" max="99" />
-                </div>
-            </div>
-            <van-empty :image="require('@assets/empty_img_asset.png')" v-if="empty" description="没有任何藏品哦~" />
+            <van-empty
+                :image="require('@assets/empty_img_asset_dark.png')"
+                v-if="empty"
+                description="没有任何群组哦~"
+            />
         </van-list>
     </van-pull-refresh>
 </template>
 
 <script setup>
+import { onMounted, getCurrentInstance } from 'vue';
 import useList from '../../plugins/list';
+import teamInfo from '../../components/TeamInfo.vue';
+import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
 let beforeData = {
     query: {
-        onShelf: true,
-        del: false,
-        type: 'PICTURE'
-    },
-    sort: 'id,desc'
+        del: false
+    }
 };
-const { empty, loading, finished, list, getData } = useList('/collection/all', beforeData);
+const { empty, loading, finished, list, getData } = useList('/team/all', beforeData);
+
+const store = new useStore();
+const {
+    appContext: {
+        config: { globalProperties: global }
+    }
+} = getCurrentInstance();
+const router = useRouter();
+onMounted(() => {
+    if (store.state.userInfo) {
+        getData(true);
+    } else {
+        global.$dialog
+            .confirm({
+                title: '提示',
+                message: '用户未登录,是否立即登录',
+                confirmButtonText: '立即登录'
+            })
+            .then(() => {
+                router.push('/login');
+            });
+        empty.value = true;
+    }
+});
 </script>
 
 <style lang="less" scoped>
 .chat-page {
+    padding-top: var(--safe-top);
     background: #1c1c1c;
 }
-
-.chat-info {
-    background: #222426;
-    .flex();
-    align-items: stretch;
-    padding: 15px;
-    .van-image {
-        flex-shrink: 0;
-    }
-
-    .chat-content {
-        flex-grow: 1;
-        padding: 0 12px;
-        .text1 {
-            font-size: 14px;
-            font-weight: bold;
-            color: #ffffff;
-            line-height: 24px;
-        }
-
-        .text2 {
-            font-size: 12px;
-            color: #939599;
-            line-height: 24px;
-        }
-    }
-    .chat-right {
-        .flex-col();
-        align-items: flex-end;
-        .text1 {
-            font-size: 12px;
-            color: #939599;
-            line-height: 24px;
-        }
-        .van-badge {
-            transform: translate(0, 0);
-            --van-badge-border-width: 0;
-            --van-badge-font-size: 10px;
-            --van-badge-padding: 0 5px;
-            line-height: 16px;
-            box-sizing: border-box;
-            margin-top: 5px;
-        }
-    }
-}
 </style>