sx
/
jiuyiUniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

消息

This commit is contained in:
lr 2025-02-19 16:36:12 +08:00
parent b1b68d68ef
commit 307b25d08d
6 changed files with 652 additions and 531 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
jiuyi2/App.vue
View File

@ -1,23 +1,25 @@
<script setup> <script setup>
import { import {
onLaunch, onLaunch,
} from '@dcloudio/uni-app' } from '@dcloudio/uni-app'
// 工具库 // 工具库
import util from '@/common/js/util'; import util from '@/common/js/util';
// //
import api from '@/api/index.js' import api from '@/api/index.js'
// vuex // vuex
import store from '@/store/index.js' import store from '@/store/index.js'
onLaunch(() => { onLaunch(() => {
// 获取用户信息 // 获取用户信息
getUserinfo() getUserinfo()
// 获取系统配置 // 获取系统配置
getConfig() getConfig()
}) // 获取未读消息数量
getNoReadNum()
})
// 获取用户信息 // 获取用户信息
function getUserinfo() { function getUserinfo() {
// 登录令牌 // 登录令牌
const token = uni.getStorageSync('token') const token = uni.getStorageSync('token')
// 用户信息 // 用户信息
@ -37,10 +39,10 @@
util.loginTencent(userinfo) util.loginTencent(userinfo)
}) })
} }
} }
// 获取系统配置 // 获取系统配置
function getConfig() { function getConfig() {
api.getConfig().then(rs => { api.getConfig().then(rs => {
if (rs.code == 200) { if (rs.code == 200) {
store.commit('setState', { store.commit('setState', {
@ -50,10 +52,45 @@
return return
} }
}) })
} }
// 获取未读消息数量
async function getNoReadNum() {
// uni.removeTabBarBadge({
// index: 2,
// text: "",
// });
// api.getNoReadNum().then(rs => {
// if (rs.code == 200) {
// uni.setTabBarBadge({
// index: 0,
// text: "11",
// });
// }
// })
// uni.setTabBarBadge({
// index: 2,
// text: "11",
// });
// const res = await uni.request({ url: 'API_URL' });
// const count = res.data.unread;
// setTimeout(() => {
// uni.setTabBarBadge({
// index: 1,
// text: '10',
// success: function () {
// console.log(11111);
// },
// })
// }, 1000)
}
</script> </script>
<style lang="scss"> <style lang="scss">
/*每个页面公共css */ /*每个页面公共css */
@import "./common/css/style.scss"; @import "./common/css/style.scss";
</style> </style>

11
jiuyi2/api/index.js
View File

@ -85,6 +85,17 @@ const api = {
method: 'GET', method: 'GET',
}) })
}, },
/**
* 获取未读消息数量
* @param {Object} param
*/
getNoReadNum() {
return util.request({
url: '/shopify/region/all',
method: 'GET',
})
},
} }
export default api export default api

4
jiuyi2/common/js/config.js
View File

@ -6,8 +6,8 @@ const config = {
// host: 'h5api', // host: 'h5api',
// #endif // #endif
// #ifndef H5 // #ifndef H5
host: 'http://91f.xyz:8080', // host: 'http://91f.xyz:8080',
// host: 'https://b433d23.r24.cpolar.top/', host: 'https://b433d23.r24.cpolar.top/',
// host: 'http://hvw2rn.natappfree.cc', // host: 'http://hvw2rn.natappfree.cc',
// #endif // #endif
// 支付方式配置 // 支付方式配置

149
jiuyi2/components/footerMenu/footerMenu.vue
View File

@ -1,12 +1,12 @@
<script setup> <script setup>
/** 底部菜单导航 /** 底部菜单导航
* 底部导航的规则 * 底部导航的规则
* 视频端显示： * 视频端显示：
* 视频 商城 消息 我的(视频我的) * 视频 商城 消息 我的(视频我的)
* 商城端显示： * 商城端显示：
* 视频 商城 消息 个人中心(商城我的) * 视频 商城 消息 个人中心(商城我的)
*/ */
import { import {
ref, ref,
computed, computed,
onMounted, onMounted,
@ -14,14 +14,14 @@
getCurrentInstance, getCurrentInstance,
reactive, reactive,
watch, watch,
} from 'vue' } from 'vue'
// 工具库 // 工具库
import util from '@/common/js/util'; import util from '@/common/js/util';
const { const {
proxy proxy
} = getCurrentInstance() } = getCurrentInstance()
// 接收参数 // 接收参数
const props = defineProps({ const props = defineProps({
page: { page: {
type: String, type: String,
}, },
@ -30,16 +30,16 @@
type: String, type: String,
default: 'light', default: 'light',
}, },
}) })
// 用户信息 // 用户信息
const userinfo = computed(() => { const userinfo = computed(() => {
let resuilt = uni.$store.state.userinfo let resuilt = uni.$store.state.userinfo
return resuilt return resuilt
}) })
// 展示模式 商城shop 默认default // 展示模式 商城shop 默认default
const mode = computed(() => uni.$store.state.tabbarMode) const mode = computed(() => uni.$store.state.tabbarMode)
// 底部菜单 // 底部菜单
const menu = computed(() => { const menu = computed(() => {
let arr = [{ let arr = [{
page: 'index', page: 'index',
type: 'option', type: 'option',
@ -93,12 +93,12 @@
break; break;
} }
return arr return arr
}) })
// 安全区高度 // 安全区高度
let safeHeight = ref(0) let safeHeight = ref(0)
// 弹窗菜单 // 弹窗菜单
const showMenu = computed(() => { const showMenu = computed(() => {
let result = [] let result = []
// 验证登录 // 验证登录
@ -130,10 +130,13 @@
// name: '家政', // name: '家政',
// }) // })
return result return result
}) })
// 加载完成之后 // 未读数量
onMounted(() => { const noReadNum = ref(0)
// 加载完成之后
onMounted(() => {
// 开启监听 // 开启监听
addListener() addListener()
// 隐藏tabbar // 隐藏tabbar
@ -145,15 +148,18 @@
// //
// proxy.$refs.alert.open() // proxy.$refs.alert.open()
})
// 卸载 // 获取未读消息数量
onUnmounted(() => { getNoReadNum()
})
// 卸载
onUnmounted(() => {
uni.$off('changeMine') uni.$off('changeMine')
}) })
// 开启监听 // 开启监听
function addListener() { function addListener() {
// 修改个人中心的状态 // 修改个人中心的状态
uni.$on('changeMine', (value) => { uni.$on('changeMine', (value) => {
uni.$store.commit('setState', { uni.$store.commit('setState', {
@ -161,13 +167,13 @@
value, value,
}) })
}) })
} }
/** /**
* 点击菜单 * 点击菜单
* @param {Object} item 当前点击的菜单项 * @param {Object} item 当前点击的菜单项
*/ */
function handleMenu(item) { function handleMenu(item) {
if (item.type != 'middle') { if (item.type != 'middle') {
// 判断是否配置页 // 判断是否配置页
if (item.page) uni.switchTab({ if (item.page) uni.switchTab({
@ -180,13 +186,13 @@
} }
// //
proxy.$refs.alert.open() proxy.$refs.alert.open()
} }
/** /**
* 内容 * 内容
* @param {Object} ev * @param {Object} ev
*/ */
function handleAlert(ev) { function handleAlert(ev) {
const index = ev.detail.index const index = ev.detail.index
const item = showMenu.value[index] const item = showMenu.value[index]
// 验证 // 验证
@ -202,19 +208,37 @@
}) })
// //
proxy.$refs.alert.close() proxy.$refs.alert.close()
}
// 获取未读消息数量
function getNoReadNum() {
// 验证sdk是否准备完毕
let isReady = uni.$chat.isReady();
if (!isReady) {
setTimeout(function () {
getNoReadNum();
}, 800);
return
} }
const unreadCount = uni.$chat.getTotalUnreadMessageCount();
noReadNum.value = +unreadCount > 99 ? '99+' : unreadCount;
}
</script> </script>
<template> <template>
<!-- 幽灵盒子 --> <!-- 幽灵盒子 -->
<view class="ghost" :style="{paddingBottom: safeHeight}"></view> <view class="ghost" :style="{ paddingBottom: safeHeight }"></view>
<!-- 底部导航 --> <!-- 底部导航 -->
<view class="menuBox" :class="subject"> <view class="menuBox" :class="subject">
<view class="menu"> <view class="menu">
<view class="item" v-for="(item,index) in menu" :key="index" @click="handleMenu(item)"> <view class="item" v-for="(item, index) in menu" :key="index" @click="handleMenu(item)">
<view class="option" :class="{active: item.page === page}" v-if="item.type == 'option'"> <view class="option" :class="{ active: item.page === page }" v-if="item.type == 'option'">
<text class="text">{{item.name}}</text> <text class="text">{{ item.name }}</text>
<span class="pot" v-if="item.page == 'news' && noReadNum != 0">{{ noReadNum }}</span>
</view> </view>
<view class="middle" v-else-if="item.type === 'middle'"> <view class="middle" v-else-if="item.type === 'middle'">
@ -224,7 +248,7 @@
</view> </view>
</view> </view>
</view> </view>
<view class="safeArea" :style="{height: safeHeight}"></view> <view class="safeArea" :style="{ height: safeHeight }"></view>
</view> </view>
<!-- 底部菜单 --> <!-- 底部菜单 -->
@ -237,7 +261,7 @@
<!-- <uni-icons type="image" :size="30" color="#777" /> --> <!-- <uni-icons type="image" :size="30" color="#777" /> -->
<image class="wh80" :src="item.img" mode="aspectFill" /> <image class="wh80" :src="item.img" mode="aspectFill" />
<view class="mt5"> <view class="mt5">
<text class="text f28 c333">{{item.name}}</text> <text class="text f28 c333">{{ item.name }}</text>
</view> </view>
</view> </view>
</uni-grid-item> </uni-grid-item>
@ -252,15 +276,15 @@
</template> </template>
<style lang="scss"> <style lang="scss">
$boderSize: 2rpx; $boderSize: 2rpx;
// 幽灵盒子 // 幽灵盒子
.ghost { .ghost {
height: 120rpx; height: 120rpx;
} }
// 菜单 // 菜单
.menuBox { .menuBox {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -319,6 +343,25 @@
.text { .text {
color: #999; color: #999;
} }
.option {
position: relative;
.pot {
position: absolute;
top: -16rpx;
right: -30rpx;
height: 24rpx;
min-width: 24rpx;
line-height: 24rpx;
border-radius: 24rpx;
background: #FF6B17;
color: #fff;
font-size: 20rpx;
padding: 4rpx;
text-align: center;
}
}
} }
.middle { .middle {
@ -327,10 +370,10 @@
height: 80rpx; height: 80rpx;
} }
} }
} }
// 弹窗 // 弹窗
.alert { .alert {
margin-bottom: 120rpx; margin-bottom: 120rpx;
background-color: #f8f8f8; background-color: #f8f8f8;
border-radius: 30rpx; border-radius: 30rpx;
@ -344,5 +387,5 @@
.itemBox { .itemBox {
// padding: 30rpx; // padding: 30rpx;
} }
} }
</style> </style>

41
jiuyi2/components/news/msgList.vue
View File

@ -54,17 +54,32 @@ const systemRightOption = [{
backgroundColor: '#00ADEE' backgroundColor: '#00ADEE'
}, },
},] },]
// 传入参数
const props = defineProps({
// 类型
type: {
type: Number,
default: 0,
},
})
// 用户列表 // 用户列表
const list = reactive([]) const list = reactive([])
onMounted(() => { onMounted(() => {
if (props.type == 0) {
getList() getList()
} else if(props.type == 1) {
// 视频消息
} else if (props.type == 2) {
// 商城消息
}
addListener() addListener()
}) })
onUnmounted(() => { onUnmounted(() => {
removeListener() // removeListener()
}) })
// 开启监听消息 // 开启监听消息
@ -81,7 +96,7 @@ function removeListener() {
uni.$chat.on(TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED); uni.$chat.on(TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED);
} }
// 获取朋友列表 // 获取消息列表
function getList() { function getList() {
api.news.getMessageList({ api.news.getMessageList({
query: { query: {
@ -97,6 +112,17 @@ function getList() {
showCancel: false, showCancel: false,
}) })
}) })
// // 验证sdk是否准备完毕
// let isReady = uni.$chat.isReady();
// if (!isReady) {
// setTimeout(function () {
// getList();
// }, 1000);
// return
// }
// uni.$chat.getMessageList({})
} }
/** /**
@ -144,7 +170,7 @@ function getGroupNoReadNum(groupId) {
if (!isReady) { if (!isReady) {
setTimeout(function () { setTimeout(function () {
getGroupNoReadNum(groupId); getGroupNoReadNum(groupId);
}, 200); }, 800);
return return
} }
@ -187,7 +213,8 @@ function handleChat(item) {
param.msgId = `${item.groupId}` param.msgId = `${item.groupId}`
param.num = `${item.groupChatDTO.memberCount}` param.num = `${item.groupChatDTO.memberCount}`
} }
//
setRead(item)
util.toChat(param) util.toChat(param)
} }
@ -209,7 +236,7 @@ function delMsg(item) {
if (!isReady) { if (!isReady) {
setTimeout(function () { setTimeout(function () {
delMsg(item); delMsg(item);
}, 200); }, 800);
return return
} }
@ -227,7 +254,7 @@ function setRead(item) {
if (!isReady) { if (!isReady) {
setTimeout(function () { setTimeout(function () {
setRead(item); setRead(item);
}, 200); }, 800);
return return
} }
@ -297,7 +324,7 @@ function setRead(item) {
<uni-swipe-action-item :right-options="rightOption" v-for="(item, index) in list.data" :key="index" <uni-swipe-action-item :right-options="rightOption" v-for="(item, index) in list.data" :key="index"
@click="handleMenu($event, item)"> @click="handleMenu($event, item)">
<view class="item rows ptb20 plr30" @click="handleChat(item)"> <view class="item rows ptb20 plr30" @click.stop="handleChat(item)">
<view class="image wh90 pr"> <view class="image wh90 pr">
<template v-if="item.groupId == null"> <template v-if="item.groupId == null">
<image class="cir wh90" :src="item.callbackJson.from_url" mode="aspectFill" /> <image class="cir wh90" :src="item.callbackJson.from_url" mode="aspectFill" />

181
jiuyi2/pages/news/news.vue
View File

@ -1,46 +1,46 @@
<script setup> <script setup>
// 消息 // 消息
import { import {
ref, ref,
reactive, reactive,
computed, computed,
} from 'vue' } from 'vue'
import { import {
useStore, useStore,
} from 'vuex' } from 'vuex'
import { import {
onLoad, onLoad,
onUnload, onUnload,
} from '@dcloudio/uni-app' } from '@dcloudio/uni-app'
// 腾讯云聊天 // 腾讯云聊天
import TencentCloudChat from '@tencentcloud/chat'; import TencentCloudChat from '@tencentcloud/chat';
// 头部导航栏 // 头部导航栏
import apex from '@/components/header/apex' import apex from '@/components/header/apex'
// 未登录 // 未登录
import noLogin from '@/components/login/noLogin.vue' import noLogin from '@/components/login/noLogin.vue'
// 通讯录 // 通讯录
import book from '@/components/news/book' import book from '@/components/news/book'
// 群聊列表 // 群聊列表
import groupList from '@/components/news/groupList' import groupList from '@/components/news/groupList'
// 消息列表 // 消息列表
import msgList from '@/components/news/msgList' import msgList from '@/components/news/msgList'
// 底部菜单 // 底部菜单
import footerMneu from '@/components/footerMenu/footerMenu' import footerMneu from '@/components/footerMenu/footerMenu'
// 工具库 // 工具库
import util from '@/common/js/util.js' import util from '@/common/js/util.js'
// vuex // vuex
const store = useStore() const store = useStore()
// 菜单列表 // 菜单列表
const menuList = reactive([{ const menuList = reactive([
key: 'friend',
name: '通讯录',
load: false,
},
{ {
key: 'group', key: 'group',
name: '即时消息', name: '即时消息',
load: true,
}, {
key: 'friend',
name: '通讯录',
load: false, load: false,
}, },
{ {
@ -48,67 +48,70 @@
name: '视讯消息', name: '视讯消息',
load: false, load: false,
}, },
// { {
// key: 'video', key: 'store',
// name: '商城消息', name: '商城消息',
// load: false, load: false,
// }, },
]) ])
// 菜单下标 // 菜单下标
const menuIndex = ref('') const menuIndex = ref('')
// 是否显示搜索菜单 // 是否显示搜索菜单
const showSearch = ref(false) const showSearch = ref(false)
// im加载 // im加载
const imLoad = ref(false) const imLoad = ref(false)
// 用户信息 // 用户信息
const userinfo = computed(() => { const userinfo = computed(() => {
return store.state.userinfo return store.state.userinfo
}) })
// 当前选中的菜单 // 当前选中的菜单
const menuCurrent = computed(() => { const menuCurrent = computed(() => {
return menuList[menuIndex.value] return menuList[menuIndex.value]
}) })
onLoad(() => { onLoad(() => {
// 初始化菜单 // 初始化菜单
handleMenuIndex(0) handleMenuIndex(0)
// 开启监听 // 开启监听
addListener() addListener()
}) })
onUnload(() => { onUnload(() => {
// 移除监听 // 移除监听
removeListener() removeListener()
}) })
// 开启监听 // 开启监听
function addListener() { function addListener() {
uni.$chat.on(TencentCloudChat.EVENT.SDK_READY, imLoading); uni.$chat.on(TencentCloudChat.EVENT.SDK_READY, imLoading);
} }
// im加载完成 // im加载完成
function imLoading() { function imLoading() {
imLoad.value = true imLoad.value = true
} }
// 移除监听 // 移除监听
function removeListener() { function removeListener() {
uni.$chat.off(TencentCloudChat.EVENT.SDK_READY); uni.$chat.off(TencentCloudChat.EVENT.SDK_READY);
} }
/** /**
* 切换下标 * 切换下标
* @param {Number} index * @param {Number} index
*/ */
function handleMenuIndex(index) { function handleMenuIndex(index) {
if (menuIndex.value === index) return if (menuIndex.value === index) return
menuList.forEach(item => {
item.load = false;
});
menuList[index].load = true;
menuIndex.value = index menuIndex.value = index
if (!menuList[index].load) menuList[index].load = true }
}
// 打开菜单 // 打开菜单
function showActionSheet() { function showActionSheet() {
uni.showActionSheet({ uni.showActionSheet({
itemList: ['扫一扫', '添加好友', '发起群聊', '我的二维码'], itemList: ['扫一扫', '添加好友', '发起群聊', '我的二维码'],
success: rs => { success: rs => {
@ -137,9 +140,9 @@
} }
} }
}) })
} }
function getUserInfos(userRecommend) { function getUserInfos(userRecommend) {
videoApi.getUserInfo({ videoApi.getUserInfo({
query: { query: {
userRecommend: userRecommend, userRecommend: userRecommend,
@ -153,7 +156,7 @@
}); });
} }
}) })
} }
</script> </script>
<template> <template>
@ -194,27 +197,27 @@
<!-- 轮播图 --> <!-- 轮播图 -->
<swiper class="swiper" :current="menuIndex" disable-touch="true"> <swiper class="swiper" :current="menuIndex" disable-touch="true">
<!-- 通讯录 --> <!-- 群组 -->
<swiper-item> <swiper-item>
<book v-if="menuList[0].load" /> <msgList v-if="menuList[0].load" :type="menuIndex" />
<view class="loading" v-else>正在加载</view> <view class="loading" v-else>正在加载</view>
</swiper-item> </swiper-item>
<!-- 群组 --> <!-- 通讯录 -->
<swiper-item> <swiper-item>
<msgList v-if="menuList[1].load" /> <book v-if="menuList[1].load" />
<view class="loading" v-else>正在加载</view> <view class="loading" v-else>正在加载</view>
</swiper-item> </swiper-item>
<!-- 视频消息 --> <!-- 视频消息 -->
<swiper-item> <swiper-item>
<msgList v-if="menuList[2].load" /> <msgList v-if="menuList[2].load" :type="menuIndex" />
<view class="loading" v-else>正在加载</view> <view class="loading" v-else>正在加载</view>
</swiper-item> </swiper-item>
<!-- 商城消息 --> <!-- 商城消息 -->
<swiper-item> <swiper-item>
<msgList /> <msgList v-if="menuList[3].load" :type="menuIndex" />
</swiper-item> </swiper-item>
</swiper> </swiper>
</view> </view>
@ -224,8 +227,8 @@
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
// //
.headMenu { .headMenu {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
grid-gap: 25rpx; grid-gap: 25rpx;
@ -264,10 +267,10 @@
height: 175rpx; height: 175rpx;
transform: rotate(-5deg); transform: rotate(-5deg);
} }
} }
// 搜索条 // 搜索条
.searchBox { .searchBox {
overflow: hidden; overflow: hidden;
height: 0; height: 0;
transition: .3s; transition: .3s;
@ -275,19 +278,19 @@
&.active { &.active {
height: 80rpx; height: 80rpx;
} }
} }
// 容器 // 容器
.swiper { .swiper {
flex: 1; flex: 1;
width: 100%; width: 100%;
} }
// 正在加载 // 正在加载
.loading { .loading {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%; height: 100%;
} }
</style> </style>