This commit is contained in:
lr
parent
b1b68d68ef
commit
307b25d08d
135
jiuyi2/App.vue
135
jiuyi2/App.vue
|
|
@ -1,59 +1,96 @@
|
|||
<script setup>
|
||||
import {
|
||||
onLaunch,
|
||||
} from '@dcloudio/uni-app'
|
||||
// 工具库
|
||||
import util from '@/common/js/util';
|
||||
//
|
||||
import api from '@/api/index.js'
|
||||
// vuex
|
||||
import store from '@/store/index.js'
|
||||
|
||||
onLaunch(() => {
|
||||
// 获取用户信息
|
||||
getUserinfo()
|
||||
// 获取系统配置
|
||||
getConfig()
|
||||
})
|
||||
import {
|
||||
onLaunch,
|
||||
} from '@dcloudio/uni-app'
|
||||
// 工具库
|
||||
import util from '@/common/js/util';
|
||||
//
|
||||
import api from '@/api/index.js'
|
||||
// vuex
|
||||
import store from '@/store/index.js'
|
||||
|
||||
onLaunch(() => {
|
||||
// 获取用户信息
|
||||
function getUserinfo() {
|
||||
// 登录令牌
|
||||
const token = uni.getStorageSync('token')
|
||||
// 用户信息
|
||||
const userinfo = uni.getStorageSync('userinfo')
|
||||
|
||||
// 如果登录保活
|
||||
if (token) {
|
||||
// 用户信息
|
||||
if (userinfo) store.commit('setState', {
|
||||
key: 'userinfo',
|
||||
value: userinfo
|
||||
})
|
||||
|
||||
//
|
||||
util.getUserinfo().then(rs => {
|
||||
// 腾讯im登录
|
||||
util.loginTencent(userinfo)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
getUserinfo()
|
||||
// 获取系统配置
|
||||
function getConfig() {
|
||||
api.getConfig().then(rs => {
|
||||
if (rs.code == 200) {
|
||||
store.commit('setState', {
|
||||
key: 'config',
|
||||
value: rs.data
|
||||
})
|
||||
return
|
||||
}
|
||||
getConfig()
|
||||
// 获取未读消息数量
|
||||
getNoReadNum()
|
||||
})
|
||||
|
||||
// 获取用户信息
|
||||
function getUserinfo() {
|
||||
// 登录令牌
|
||||
const token = uni.getStorageSync('token')
|
||||
// 用户信息
|
||||
const userinfo = uni.getStorageSync('userinfo')
|
||||
|
||||
// 如果登录保活
|
||||
if (token) {
|
||||
// 用户信息
|
||||
if (userinfo) store.commit('setState', {
|
||||
key: 'userinfo',
|
||||
value: userinfo
|
||||
})
|
||||
|
||||
//
|
||||
util.getUserinfo().then(rs => {
|
||||
// 腾讯im登录
|
||||
util.loginTencent(userinfo)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 获取系统配置
|
||||
function getConfig() {
|
||||
api.getConfig().then(rs => {
|
||||
if (rs.code == 200) {
|
||||
store.commit('setState', {
|
||||
key: 'config',
|
||||
value: rs.data
|
||||
})
|
||||
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>
|
||||
|
||||
<style lang="scss">
|
||||
/*每个页面公共css */
|
||||
@import "./common/css/style.scss";
|
||||
/*每个页面公共css */
|
||||
@import "./common/css/style.scss";
|
||||
</style>
|
||||
|
|
@ -85,6 +85,17 @@ const api = {
|
|||
method: 'GET',
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取未读消息数量
|
||||
* @param {Object} param
|
||||
*/
|
||||
getNoReadNum() {
|
||||
return util.request({
|
||||
url: '/shopify/region/all',
|
||||
method: 'GET',
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
export default api
|
||||
|
|
@ -6,8 +6,8 @@ const config = {
|
|||
// host: 'h5api',
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
host: 'http://91f.xyz:8080',
|
||||
// host: 'https://b433d23.r24.cpolar.top/',
|
||||
// host: 'http://91f.xyz:8080',
|
||||
host: 'https://b433d23.r24.cpolar.top/',
|
||||
// host: 'http://hvw2rn.natappfree.cc',
|
||||
// #endif
|
||||
// 支付方式配置
|
||||
|
|
|
|||
|
|
@ -1,220 +1,244 @@
|
|||
<script setup>
|
||||
/** 底部菜单导航
|
||||
* 底部导航的规则
|
||||
* 视频端显示：
|
||||
* 视频 商城 消息 我的(视频我的)
|
||||
* 商城端显示：
|
||||
* 视频 商城 消息 个人中心(商城我的)
|
||||
*/
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
getCurrentInstance,
|
||||
reactive,
|
||||
watch,
|
||||
} from 'vue'
|
||||
// 工具库
|
||||
import util from '@/common/js/util';
|
||||
const {
|
||||
proxy
|
||||
} = getCurrentInstance()
|
||||
// 接收参数
|
||||
const props = defineProps({
|
||||
page: {
|
||||
type: String,
|
||||
},
|
||||
// 主题 dark黑色 light白色的
|
||||
subject: {
|
||||
type: String,
|
||||
default: 'light',
|
||||
},
|
||||
})
|
||||
// 用户信息
|
||||
const userinfo = computed(() => {
|
||||
let resuilt = uni.$store.state.userinfo
|
||||
return resuilt
|
||||
})
|
||||
// 展示模式 商城shop 默认default
|
||||
const mode = computed(() => uni.$store.state.tabbarMode)
|
||||
// 底部菜单
|
||||
const menu = computed(() => {
|
||||
let arr = [{
|
||||
page: 'index',
|
||||
/** 底部菜单导航
|
||||
* 底部导航的规则
|
||||
* 视频端显示：
|
||||
* 视频 商城 消息 我的(视频我的)
|
||||
* 商城端显示：
|
||||
* 视频 商城 消息 个人中心(商城我的)
|
||||
*/
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
getCurrentInstance,
|
||||
reactive,
|
||||
watch,
|
||||
} from 'vue'
|
||||
// 工具库
|
||||
import util from '@/common/js/util';
|
||||
const {
|
||||
proxy
|
||||
} = getCurrentInstance()
|
||||
// 接收参数
|
||||
const props = defineProps({
|
||||
page: {
|
||||
type: String,
|
||||
},
|
||||
// 主题 dark黑色 light白色的
|
||||
subject: {
|
||||
type: String,
|
||||
default: 'light',
|
||||
},
|
||||
})
|
||||
// 用户信息
|
||||
const userinfo = computed(() => {
|
||||
let resuilt = uni.$store.state.userinfo
|
||||
return resuilt
|
||||
})
|
||||
// 展示模式 商城shop 默认default
|
||||
const mode = computed(() => uni.$store.state.tabbarMode)
|
||||
// 底部菜单
|
||||
const menu = computed(() => {
|
||||
let arr = [{
|
||||
page: 'index',
|
||||
type: 'option',
|
||||
name: '视频',
|
||||
labelType: 'default',
|
||||
pagePath: 'pages/index/index',
|
||||
},
|
||||
// {
|
||||
// page: '',
|
||||
// type: 'option',
|
||||
// name: '榴莲果',
|
||||
// pagePath: 'pages/index/durian',
|
||||
// },
|
||||
{
|
||||
page: 'shop',
|
||||
type: 'option',
|
||||
name: '商城',
|
||||
labelType: 'shop',
|
||||
pagePath: 'pages/shop/shop'
|
||||
},
|
||||
{
|
||||
type: 'middle',
|
||||
name: '',
|
||||
},
|
||||
{
|
||||
page: 'news',
|
||||
type: 'option',
|
||||
name: '消息',
|
||||
pagePath: 'pages/news/news',
|
||||
}
|
||||
]
|
||||
|
||||
switch (mode.value) {
|
||||
case 'default':
|
||||
arr.push({
|
||||
page: 'homepage',
|
||||
type: 'option',
|
||||
name: '视频',
|
||||
name: '我的',
|
||||
labelType: 'default',
|
||||
pagePath: 'pages/index/index',
|
||||
},
|
||||
// {
|
||||
// page: '',
|
||||
// type: 'option',
|
||||
// name: '榴莲果',
|
||||
// pagePath: 'pages/index/durian',
|
||||
// },
|
||||
{
|
||||
page: 'shop',
|
||||
pagePath: 'pages/mine/homepage',
|
||||
})
|
||||
break;
|
||||
case 'shop':
|
||||
arr.push({
|
||||
page: 'mine',
|
||||
type: 'option',
|
||||
name: '商城',
|
||||
name: '个人中心',
|
||||
labelType: 'shop',
|
||||
pagePath: 'pages/shop/shop'
|
||||
},
|
||||
{
|
||||
type: 'middle',
|
||||
name: '',
|
||||
},
|
||||
{
|
||||
page: 'news',
|
||||
type: 'option',
|
||||
name: '消息',
|
||||
pagePath: 'pages/news/news',
|
||||
}
|
||||
]
|
||||
|
||||
switch (mode.value) {
|
||||
case 'default':
|
||||
arr.push({
|
||||
page: 'homepage',
|
||||
type: 'option',
|
||||
name: '我的',
|
||||
labelType: 'default',
|
||||
pagePath: 'pages/mine/homepage',
|
||||
})
|
||||
break;
|
||||
case 'shop':
|
||||
arr.push({
|
||||
page: 'mine',
|
||||
type: 'option',
|
||||
name: '个人中心',
|
||||
labelType: 'shop',
|
||||
pagePath: 'pages/mine/mine',
|
||||
})
|
||||
break;
|
||||
}
|
||||
return arr
|
||||
})
|
||||
// 安全区高度
|
||||
let safeHeight = ref(0)
|
||||
|
||||
// 弹窗菜单
|
||||
const showMenu = computed(() => {
|
||||
let result = []
|
||||
|
||||
// 验证登录
|
||||
if (userinfo.value.id) {
|
||||
result.push({
|
||||
name: '发布视频',
|
||||
img: '/static/footerMenu1.png',
|
||||
url: '/pages/release/video',
|
||||
pagePath: 'pages/mine/mine',
|
||||
})
|
||||
}
|
||||
// 1是商家
|
||||
// if(userinfo.value.isShop == 1) {
|
||||
// result.push({
|
||||
// name: '发布商品',
|
||||
// img: '/static/footerMenu1.png',
|
||||
// url: '/pages/release/commodity',
|
||||
// })
|
||||
// }
|
||||
// 追加
|
||||
// result.push({
|
||||
// name: '打车',
|
||||
// }, {
|
||||
// name: '充电',
|
||||
// }, {
|
||||
// name: '到店美食',
|
||||
// }, {
|
||||
// name: '出行',
|
||||
// }, {
|
||||
// name: '家政',
|
||||
// })
|
||||
return result
|
||||
})
|
||||
break;
|
||||
}
|
||||
return arr
|
||||
})
|
||||
// 安全区高度
|
||||
let safeHeight = ref(0)
|
||||
|
||||
// 加载完成之后
|
||||
onMounted(() => {
|
||||
// 开启监听
|
||||
addListener()
|
||||
// 隐藏tabbar
|
||||
uni.hideTabBar()
|
||||
// 系统信息
|
||||
uni.getSystemInfo().then(rs => {
|
||||
safeHeight.value = rs.safeArea + 'px'
|
||||
// 弹窗菜单
|
||||
const showMenu = computed(() => {
|
||||
let result = []
|
||||
|
||||
// 验证登录
|
||||
if (userinfo.value.id) {
|
||||
result.push({
|
||||
name: '发布视频',
|
||||
img: '/static/footerMenu1.png',
|
||||
url: '/pages/release/video',
|
||||
})
|
||||
}
|
||||
// 1是商家
|
||||
// if(userinfo.value.isShop == 1) {
|
||||
// result.push({
|
||||
// name: '发布商品',
|
||||
// img: '/static/footerMenu1.png',
|
||||
// url: '/pages/release/commodity',
|
||||
// })
|
||||
// }
|
||||
// 追加
|
||||
// result.push({
|
||||
// name: '打车',
|
||||
// }, {
|
||||
// name: '充电',
|
||||
// }, {
|
||||
// name: '到店美食',
|
||||
// }, {
|
||||
// name: '出行',
|
||||
// }, {
|
||||
// name: '家政',
|
||||
// })
|
||||
return result
|
||||
})
|
||||
|
||||
//
|
||||
// proxy.$refs.alert.open()
|
||||
})
|
||||
|
||||
// 卸载
|
||||
onUnmounted(() => {
|
||||
uni.$off('changeMine')
|
||||
})
|
||||
// 未读数量
|
||||
const noReadNum = ref(0)
|
||||
|
||||
// 加载完成之后
|
||||
onMounted(() => {
|
||||
// 开启监听
|
||||
function addListener() {
|
||||
// 修改个人中心的状态
|
||||
uni.$on('changeMine', (value) => {
|
||||
uni.$store.commit('setState', {
|
||||
key: 'tabbarMode',
|
||||
value,
|
||||
})
|
||||
})
|
||||
}
|
||||
addListener()
|
||||
// 隐藏tabbar
|
||||
uni.hideTabBar()
|
||||
// 系统信息
|
||||
uni.getSystemInfo().then(rs => {
|
||||
safeHeight.value = rs.safeArea + 'px'
|
||||
})
|
||||
|
||||
/**
|
||||
* 点击菜单
|
||||
* @param {Object} item 当前点击的菜单项
|
||||
*/
|
||||
function handleMenu(item) {
|
||||
if (item.type != 'middle') {
|
||||
// 判断是否配置页
|
||||
if (item.page) uni.switchTab({
|
||||
url: `/${item.pagePath}`,
|
||||
})
|
||||
else uni.navigateTo({
|
||||
url: `/${item.pagePath}`,
|
||||
})
|
||||
return
|
||||
//
|
||||
// proxy.$refs.alert.open()
|
||||
|
||||
// 获取未读消息数量
|
||||
getNoReadNum()
|
||||
})
|
||||
|
||||
// 卸载
|
||||
onUnmounted(() => {
|
||||
uni.$off('changeMine')
|
||||
})
|
||||
|
||||
// 开启监听
|
||||
function addListener() {
|
||||
// 修改个人中心的状态
|
||||
uni.$on('changeMine', (value) => {
|
||||
uni.$store.commit('setState', {
|
||||
key: 'tabbarMode',
|
||||
value,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击菜单
|
||||
* @param {Object} item 当前点击的菜单项
|
||||
*/
|
||||
function handleMenu(item) {
|
||||
if (item.type != 'middle') {
|
||||
// 判断是否配置页
|
||||
if (item.page) uni.switchTab({
|
||||
url: `/${item.pagePath}`,
|
||||
})
|
||||
else uni.navigateTo({
|
||||
url: `/${item.pagePath}`,
|
||||
})
|
||||
return
|
||||
}
|
||||
//
|
||||
proxy.$refs.alert.open()
|
||||
}
|
||||
|
||||
/**
|
||||
* 内容
|
||||
* @param {Object} ev
|
||||
*/
|
||||
function handleAlert(ev) {
|
||||
const index = ev.detail.index
|
||||
const item = showMenu.value[index]
|
||||
// 验证
|
||||
util.isAuth({
|
||||
success: rs => {
|
||||
//
|
||||
if (item.url) {
|
||||
uni.navigateTo({
|
||||
url: item.url,
|
||||
})
|
||||
} else util.alert('敬请期待')
|
||||
}
|
||||
//
|
||||
proxy.$refs.alert.open()
|
||||
})
|
||||
//
|
||||
proxy.$refs.alert.close()
|
||||
}
|
||||
|
||||
// 获取未读消息数量
|
||||
function getNoReadNum() {
|
||||
// 验证sdk是否准备完毕
|
||||
let isReady = uni.$chat.isReady();
|
||||
if (!isReady) {
|
||||
setTimeout(function () {
|
||||
getNoReadNum();
|
||||
}, 800);
|
||||
return
|
||||
}
|
||||
|
||||
/**
|
||||
* 内容
|
||||
* @param {Object} ev
|
||||
*/
|
||||
function handleAlert(ev) {
|
||||
const index = ev.detail.index
|
||||
const item = showMenu.value[index]
|
||||
// 验证
|
||||
util.isAuth({
|
||||
success: rs => {
|
||||
//
|
||||
if (item.url) {
|
||||
uni.navigateTo({
|
||||
url: item.url,
|
||||
})
|
||||
} else util.alert('敬请期待')
|
||||
}
|
||||
})
|
||||
//
|
||||
proxy.$refs.alert.close()
|
||||
}
|
||||
const unreadCount = uni.$chat.getTotalUnreadMessageCount();
|
||||
|
||||
noReadNum.value = +unreadCount > 99 ? '99+' : unreadCount;
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 幽灵盒子 -->
|
||||
<view class="ghost" :style="{paddingBottom: safeHeight}"></view>
|
||||
<view class="ghost" :style="{ paddingBottom: safeHeight }"></view>
|
||||
<!-- 底部导航 -->
|
||||
<view class="menuBox" :class="subject">
|
||||
<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'">
|
||||
<text class="text">{{item.name}}</text>
|
||||
<view class="option" :class="{ active: item.page === page }" v-if="item.type == 'option'">
|
||||
<text class="text">{{ item.name }}</text>
|
||||
<span class="pot" v-if="item.page == 'news' && noReadNum != 0">{{ noReadNum }}</span>
|
||||
</view>
|
||||
|
||||
<view class="middle" v-else-if="item.type === 'middle'">
|
||||
|
|
@ -224,7 +248,7 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="safeArea" :style="{height: safeHeight}"></view>
|
||||
<view class="safeArea" :style="{ height: safeHeight }"></view>
|
||||
</view>
|
||||
|
||||
<!-- 底部菜单 -->
|
||||
|
|
@ -237,7 +261,7 @@
|
|||
<!-- <uni-icons type="image" :size="30" color="#777" /> -->
|
||||
<image class="wh80" :src="item.img" mode="aspectFill" />
|
||||
<view class="mt5">
|
||||
<text class="text f28 c333">{{item.name}}</text>
|
||||
<text class="text f28 c333">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
|
|
@ -252,97 +276,116 @@
|
|||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
$boderSize: 2rpx;
|
||||
$boderSize: 2rpx;
|
||||
|
||||
// 幽灵盒子
|
||||
.ghost {
|
||||
height: 120rpx;
|
||||
}
|
||||
// 幽灵盒子
|
||||
.ghost {
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
// 菜单
|
||||
.menuBox {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
// 菜单
|
||||
.menuBox {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
|
||||
.menu {
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
flex-direction: row;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.menu {
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
flex-direction: row;
|
||||
/* #endif */
|
||||
}
|
||||
.item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
// 黑色的
|
||||
&.dark {
|
||||
border-top: 1rpx solid #999;
|
||||
background-color: #161616;
|
||||
|
||||
.active {
|
||||
.text {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
// 黑色的
|
||||
&.dark {
|
||||
border-top: 1rpx solid #999;
|
||||
background-color: #161616;
|
||||
|
||||
.active {
|
||||
.text {
|
||||
color: #999;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// 浅色的
|
||||
&.light {
|
||||
box-shadow: 0px 8px 20px rgba(0, 0, 0, .3);
|
||||
background-color: #fff;
|
||||
.text {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
.text {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
// 浅色的
|
||||
&.light {
|
||||
box-shadow: 0px 8px 20px rgba(0, 0, 0, .3);
|
||||
background-color: #fff;
|
||||
|
||||
.active {
|
||||
.text {
|
||||
color: #999;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.middle {
|
||||
.img {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
.text {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 弹窗
|
||||
.alert {
|
||||
margin-bottom: 120rpx;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 30rpx;
|
||||
|
||||
// 滚动块
|
||||
.scroll {
|
||||
height: 350rpx;
|
||||
}
|
||||
|
||||
//
|
||||
.itemBox {
|
||||
// padding: 30rpx;
|
||||
.middle {
|
||||
.img {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 弹窗
|
||||
.alert {
|
||||
margin-bottom: 120rpx;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 30rpx;
|
||||
|
||||
// 滚动块
|
||||
.scroll {
|
||||
height: 350rpx;
|
||||
}
|
||||
|
||||
//
|
||||
.itemBox {
|
||||
// padding: 30rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -54,17 +54,32 @@ const systemRightOption = [{
|
|||
backgroundColor: '#00ADEE'
|
||||
},
|
||||
},]
|
||||
// 传入参数
|
||||
const props = defineProps({
|
||||
// 类型
|
||||
type: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
})
|
||||
|
||||
// 用户列表
|
||||
const list = reactive([])
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
if (props.type == 0) {
|
||||
getList()
|
||||
} else if(props.type == 1) {
|
||||
// 视频消息
|
||||
} else if (props.type == 2) {
|
||||
// 商城消息
|
||||
}
|
||||
|
||||
addListener()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
removeListener()
|
||||
// removeListener()
|
||||
})
|
||||
|
||||
// 开启监听消息
|
||||
|
|
@ -81,7 +96,7 @@ function removeListener() {
|
|||
uni.$chat.on(TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED);
|
||||
}
|
||||
|
||||
// 获取朋友列表
|
||||
// 获取消息列表
|
||||
function getList() {
|
||||
api.news.getMessageList({
|
||||
query: {
|
||||
|
|
@ -97,6 +112,17 @@ function getList() {
|
|||
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) {
|
||||
setTimeout(function () {
|
||||
getGroupNoReadNum(groupId);
|
||||
}, 200);
|
||||
}, 800);
|
||||
return
|
||||
}
|
||||
|
||||
|
|
@ -187,7 +213,8 @@ function handleChat(item) {
|
|||
param.msgId = `${item.groupId}`
|
||||
param.num = `${item.groupChatDTO.memberCount}`
|
||||
}
|
||||
//
|
||||
|
||||
setRead(item)
|
||||
util.toChat(param)
|
||||
}
|
||||
|
||||
|
|
@ -209,7 +236,7 @@ function delMsg(item) {
|
|||
if (!isReady) {
|
||||
setTimeout(function () {
|
||||
delMsg(item);
|
||||
}, 200);
|
||||
}, 800);
|
||||
return
|
||||
}
|
||||
|
||||
|
|
@ -227,7 +254,7 @@ function setRead(item) {
|
|||
if (!isReady) {
|
||||
setTimeout(function () {
|
||||
setRead(item);
|
||||
}, 200);
|
||||
}, 800);
|
||||
return
|
||||
}
|
||||
|
||||
|
|
@ -297,7 +324,7 @@ function setRead(item) {
|
|||
|
||||
<uni-swipe-action-item :right-options="rightOption" v-for="(item, index) in list.data" :key="index"
|
||||
@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">
|
||||
<template v-if="item.groupId == null">
|
||||
<image class="cir wh90" :src="item.callbackJson.from_url" mode="aspectFill" />
|
||||
|
|
|
|||
|
|
@ -1,159 +1,162 @@
|
|||
<script setup>
|
||||
// 消息
|
||||
// 消息
|
||||
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
computed,
|
||||
} from 'vue'
|
||||
import {
|
||||
useStore,
|
||||
} from 'vuex'
|
||||
import {
|
||||
onLoad,
|
||||
onUnload,
|
||||
} from '@dcloudio/uni-app'
|
||||
// 腾讯云聊天
|
||||
import TencentCloudChat from '@tencentcloud/chat';
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
computed,
|
||||
} from 'vue'
|
||||
import {
|
||||
useStore,
|
||||
} from 'vuex'
|
||||
import {
|
||||
onLoad,
|
||||
onUnload,
|
||||
} from '@dcloudio/uni-app'
|
||||
// 腾讯云聊天
|
||||
import TencentCloudChat from '@tencentcloud/chat';
|
||||
|
||||
// 头部导航栏
|
||||
import apex from '@/components/header/apex'
|
||||
// 未登录
|
||||
import noLogin from '@/components/login/noLogin.vue'
|
||||
// 通讯录
|
||||
import book from '@/components/news/book'
|
||||
// 群聊列表
|
||||
import groupList from '@/components/news/groupList'
|
||||
// 消息列表
|
||||
import msgList from '@/components/news/msgList'
|
||||
// 底部菜单
|
||||
import footerMneu from '@/components/footerMenu/footerMenu'
|
||||
// 工具库
|
||||
import util from '@/common/js/util.js'
|
||||
// vuex
|
||||
const store = useStore()
|
||||
// 菜单列表
|
||||
const menuList = reactive([{
|
||||
key: 'friend',
|
||||
name: '通讯录',
|
||||
load: false,
|
||||
},
|
||||
{
|
||||
key: 'group',
|
||||
name: '即时消息',
|
||||
load: false,
|
||||
},
|
||||
{
|
||||
key: 'video',
|
||||
name: '视讯消息',
|
||||
load: false,
|
||||
},
|
||||
// {
|
||||
// key: 'video',
|
||||
// name: '商城消息',
|
||||
// load: false,
|
||||
// },
|
||||
])
|
||||
// 菜单下标
|
||||
const menuIndex = ref('')
|
||||
// 是否显示搜索菜单
|
||||
const showSearch = ref(false)
|
||||
// im加载
|
||||
const imLoad = ref(false)
|
||||
// 用户信息
|
||||
const userinfo = computed(() => {
|
||||
return store.state.userinfo
|
||||
})
|
||||
// 当前选中的菜单
|
||||
const menuCurrent = computed(() => {
|
||||
return menuList[menuIndex.value]
|
||||
})
|
||||
// 头部导航栏
|
||||
import apex from '@/components/header/apex'
|
||||
// 未登录
|
||||
import noLogin from '@/components/login/noLogin.vue'
|
||||
// 通讯录
|
||||
import book from '@/components/news/book'
|
||||
// 群聊列表
|
||||
import groupList from '@/components/news/groupList'
|
||||
// 消息列表
|
||||
import msgList from '@/components/news/msgList'
|
||||
// 底部菜单
|
||||
import footerMneu from '@/components/footerMenu/footerMenu'
|
||||
// 工具库
|
||||
import util from '@/common/js/util.js'
|
||||
// vuex
|
||||
const store = useStore()
|
||||
// 菜单列表
|
||||
const menuList = reactive([
|
||||
{
|
||||
key: 'group',
|
||||
name: '即时消息',
|
||||
load: true,
|
||||
}, {
|
||||
key: 'friend',
|
||||
name: '通讯录',
|
||||
load: false,
|
||||
},
|
||||
{
|
||||
key: 'video',
|
||||
name: '视讯消息',
|
||||
load: false,
|
||||
},
|
||||
{
|
||||
key: 'store',
|
||||
name: '商城消息',
|
||||
load: false,
|
||||
},
|
||||
])
|
||||
// 菜单下标
|
||||
const menuIndex = ref('')
|
||||
// 是否显示搜索菜单
|
||||
const showSearch = ref(false)
|
||||
// im加载
|
||||
const imLoad = ref(false)
|
||||
// 用户信息
|
||||
const userinfo = computed(() => {
|
||||
return store.state.userinfo
|
||||
})
|
||||
// 当前选中的菜单
|
||||
const menuCurrent = computed(() => {
|
||||
return menuList[menuIndex.value]
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
// 初始化菜单
|
||||
handleMenuIndex(0)
|
||||
|
||||
// 开启监听
|
||||
addListener()
|
||||
})
|
||||
|
||||
onUnload(() => {
|
||||
// 移除监听
|
||||
removeListener()
|
||||
})
|
||||
onLoad(() => {
|
||||
// 初始化菜单
|
||||
handleMenuIndex(0)
|
||||
|
||||
// 开启监听
|
||||
function addListener() {
|
||||
uni.$chat.on(TencentCloudChat.EVENT.SDK_READY, imLoading);
|
||||
}
|
||||
|
||||
// im加载完成
|
||||
function imLoading() {
|
||||
imLoad.value = true
|
||||
}
|
||||
addListener()
|
||||
})
|
||||
|
||||
onUnload(() => {
|
||||
// 移除监听
|
||||
function removeListener() {
|
||||
uni.$chat.off(TencentCloudChat.EVENT.SDK_READY);
|
||||
}
|
||||
removeListener()
|
||||
})
|
||||
|
||||
/**
|
||||
* 切换下标
|
||||
* @param {Number} index
|
||||
*/
|
||||
function handleMenuIndex(index) {
|
||||
if (menuIndex.value === index) return
|
||||
menuIndex.value = index
|
||||
if (!menuList[index].load) menuList[index].load = true
|
||||
}
|
||||
// 开启监听
|
||||
function addListener() {
|
||||
uni.$chat.on(TencentCloudChat.EVENT.SDK_READY, imLoading);
|
||||
}
|
||||
|
||||
// 打开菜单
|
||||
function showActionSheet() {
|
||||
uni.showActionSheet({
|
||||
itemList: ['扫一扫', '添加好友', '发起群聊', '我的二维码'],
|
||||
success: rs => {
|
||||
switch (rs.tapIndex) {
|
||||
case 0:
|
||||
util.scan()
|
||||
break;
|
||||
case 1:
|
||||
uni.navigateTo({
|
||||
// url: '/pages/news/addFriend'
|
||||
url: '/pages/news/newFriend'
|
||||
});
|
||||
break;
|
||||
case 2:
|
||||
uni.navigateTo({
|
||||
url: '/pages/news/group-chat/index'
|
||||
});
|
||||
break;
|
||||
case 3:
|
||||
uni.navigateTo({
|
||||
url: '/pages/news/myQr'
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
// im加载完成
|
||||
function imLoading() {
|
||||
imLoad.value = true
|
||||
}
|
||||
|
||||
function getUserInfos(userRecommend) {
|
||||
videoApi.getUserInfo({
|
||||
query: {
|
||||
userRecommend: userRecommend,
|
||||
// 移除监听
|
||||
function removeListener() {
|
||||
uni.$chat.off(TencentCloudChat.EVENT.SDK_READY);
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换下标
|
||||
* @param {Number} index
|
||||
*/
|
||||
function handleMenuIndex(index) {
|
||||
if (menuIndex.value === index) return
|
||||
menuList.forEach(item => {
|
||||
item.load = false;
|
||||
});
|
||||
menuList[index].load = true;
|
||||
menuIndex.value = index
|
||||
}
|
||||
|
||||
// 打开菜单
|
||||
function showActionSheet() {
|
||||
uni.showActionSheet({
|
||||
itemList: ['扫一扫', '添加好友', '发起群聊', '我的二维码'],
|
||||
success: rs => {
|
||||
switch (rs.tapIndex) {
|
||||
case 0:
|
||||
util.scan()
|
||||
break;
|
||||
case 1:
|
||||
uni.navigateTo({
|
||||
// url: '/pages/news/addFriend'
|
||||
url: '/pages/news/newFriend'
|
||||
});
|
||||
break;
|
||||
case 2:
|
||||
uni.navigateTo({
|
||||
url: '/pages/news/group-chat/index'
|
||||
});
|
||||
break;
|
||||
case 3:
|
||||
uni.navigateTo({
|
||||
url: '/pages/news/myQr'
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}).then(rs => {
|
||||
if (rs.data !== null) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/beInvited?header=' + rs.data.userPortrait + '&userId=' + rs.data
|
||||
.userId + '&userNickname=' +
|
||||
rs.data.userNickname
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function getUserInfos(userRecommend) {
|
||||
videoApi.getUserInfo({
|
||||
query: {
|
||||
userRecommend: userRecommend,
|
||||
}
|
||||
}).then(rs => {
|
||||
if (rs.data !== null) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/beInvited?header=' + rs.data.userPortrait + '&userId=' + rs.data
|
||||
.userId + '&userNickname=' +
|
||||
rs.data.userNickname
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -194,27 +197,27 @@
|
|||
|
||||
<!-- 轮播图 -->
|
||||
<swiper class="swiper" :current="menuIndex" disable-touch="true">
|
||||
<!-- 通讯录 -->
|
||||
<!-- 群组 -->
|
||||
<swiper-item>
|
||||
<book v-if="menuList[0].load" />
|
||||
<msgList v-if="menuList[0].load" :type="menuIndex" />
|
||||
<view class="loading" v-else>正在加载</view>
|
||||
</swiper-item>
|
||||
|
||||
<!-- 群组 -->
|
||||
<!-- 通讯录 -->
|
||||
<swiper-item>
|
||||
<msgList v-if="menuList[1].load" />
|
||||
<book v-if="menuList[1].load" />
|
||||
<view class="loading" v-else>正在加载</view>
|
||||
</swiper-item>
|
||||
|
||||
<!-- 视频消息 -->
|
||||
<swiper-item>
|
||||
<msgList v-if="menuList[2].load" />
|
||||
<msgList v-if="menuList[2].load" :type="menuIndex" />
|
||||
<view class="loading" v-else>正在加载</view>
|
||||
</swiper-item>
|
||||
|
||||
<!-- 商城消息 -->
|
||||
<swiper-item>
|
||||
<msgList />
|
||||
<msgList v-if="menuList[3].load" :type="menuIndex" />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
|
@ -224,70 +227,70 @@
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
//
|
||||
.headMenu {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-gap: 25rpx;
|
||||
margin: 20rpx;
|
||||
//
|
||||
.headMenu {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-gap: 25rpx;
|
||||
margin: 20rpx;
|
||||
|
||||
// 单项
|
||||
.option {
|
||||
height: 120rpx;
|
||||
background-color: #E2E2E2;
|
||||
border-radius: 15rpx;
|
||||
transition: .3s;
|
||||
|
||||
// 激活的
|
||||
&.active {
|
||||
color: #fff;
|
||||
|
||||
// 朋友
|
||||
&.friend,
|
||||
&.group,
|
||||
&.video {
|
||||
background-image: linear-gradient(126deg, #27EFE2 0%, #A45EFF 43%, #FF004F 100%);
|
||||
}
|
||||
|
||||
// 商城消息
|
||||
&.store {
|
||||
background-image: linear-gradient(270deg, #FF9B27 20%, #FDC123 103%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 卡通
|
||||
.cartoon {
|
||||
margin-top: -15rpx;
|
||||
margin-right: -25rpx;
|
||||
width: 194rpx;
|
||||
height: 175rpx;
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索条
|
||||
.searchBox {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
// 单项
|
||||
.option {
|
||||
height: 120rpx;
|
||||
background-color: #E2E2E2;
|
||||
border-radius: 15rpx;
|
||||
transition: .3s;
|
||||
|
||||
// 激活的
|
||||
&.active {
|
||||
height: 80rpx;
|
||||
color: #fff;
|
||||
|
||||
// 朋友
|
||||
&.friend,
|
||||
&.group,
|
||||
&.video {
|
||||
background-image: linear-gradient(126deg, #27EFE2 0%, #A45EFF 43%, #FF004F 100%);
|
||||
}
|
||||
|
||||
// 商城消息
|
||||
&.store {
|
||||
background-image: linear-gradient(270deg, #FF9B27 20%, #FDC123 103%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 容器
|
||||
.swiper {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
// 卡通
|
||||
.cartoon {
|
||||
margin-top: -15rpx;
|
||||
margin-right: -25rpx;
|
||||
width: 194rpx;
|
||||
height: 175rpx;
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
}
|
||||
|
||||
// 正在加载
|
||||
.loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
// 搜索条
|
||||
.searchBox {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
transition: .3s;
|
||||
|
||||
&.active {
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 容器
|
||||
.swiper {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// 正在加载
|
||||
.loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue