JiXinHui
/
YingXingAI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新建项目首页 tabbar修改

This commit is contained in:
JiXinHui 2025-06-30 16:09:43 +08:00
parent e62f1123b4
commit abc79e407a
7 changed files with 366 additions and 303 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

168
components/custom-tab-bar/custom-tab-bar.vue Normal file
View File

@ -0,0 +1,168 @@
<template>
<view class="custom-tab-bar">
<view class="tab-bar-border"></view>
<view
class="tab-bar-item"
v-for="(item, index) in tabList"
:key="index"
@click="switchTab(item, index)"
>
<view class="item-container" :class="{ active: currentIndex === index }">
<view class="icon-container">
<image :src="currentIndex === index ? item.selectedIconPath : item.iconPath" class="tab-icon"></image>
<!-- 添加消息提示点 -->
<view v-if="item.isDot && index !== currentIndex" class="tab-badge"></view>
<view v-if="item.count && item.count > 0 && index !== currentIndex" class="tab-badge-count">{{item.count}}</view>
</view>
<text class="tab-text" :class="{ active: currentIndex === index }">{{ item.text }}</text>
<!-- 添加活跃项的动画效果 -->
<view v-if="currentIndex === index" class="active-indicator"></view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
currentIndex: 0,
tabList: []
}
},
created() {
// 从Vuex获取tabBar配置
this.tabList = this.vuex_tabbar;
// 根据当前页面路径设置激活项
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
const currentPath = '/' + currentPage.route;
this.tabList.forEach((item, index) => {
// 移除前导斜杠以匹配路由
const itemPath = item.pagePath.startsWith('/') ? item.pagePath.substring(1) : item.pagePath;
if (itemPath === currentPage.route) {
this.currentIndex = index;
}
});
},
methods: {
switchTab(item, index) {
if (this.currentIndex === index) return;
this.currentIndex = index;
// 移除前导斜杠如果存在
const pagePath = item.pagePath.startsWith('/') ? item.pagePath : '/' + item.pagePath;
uni.switchTab({
url: pagePath
});
}
}
}
</script>
<style lang="scss" scoped>
.custom-tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 56px;
background-color: #ffffff;
display: flex;
padding-bottom: env(safe-area-inset-bottom);
box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.05);
z-index: 999;
.tab-bar-border {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
background-color: #f5f5f5;
transform: scaleY(0.5);
}
.tab-bar-item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
.item-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
padding: 5px 0;
&.active {
transform: scale(1.05);
transition: all 0.2s ease;
}
.icon-container {
position: relative;
.tab-icon {
width: 24px;
height: 24px;
margin-bottom: 3px;
}
.tab-badge {
position: absolute;
top: -2px;
right: -2px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #ff5252;
}
.tab-badge-count {
position: absolute;
top: -5px;
right: -5px;
min-width: 16px;
height: 16px;
border-radius: 8px;
background-color: #ff5252;
color: #ffffff;
font-size: 10px;
line-height: 16px;
text-align: center;
padding: 0 4px;
}
}
.tab-text {
font-size: 12px;
color: #999999;
line-height: 1.2;
&.active {
color: #2979FF;
font-weight: 500;
}
}
.active-indicator {
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 16px;
height: 3px;
background-color: #2979FF;
border-radius: 3px;
}
}
}
}
</style>

4
main.js
View File

@ -8,7 +8,9 @@ import {
LogLevel,
} from "./uni_modules/Lyuan-SignalR/js_sdk/signalr";
// 导入自定义TabBar组件
import CustomTabBar from '@/components/custom-tab-bar/custom-tab-bar.vue';
Vue.component('custom-tab-bar', CustomTabBar);
Vue.config.productionTip = false;

92
pages.json
View File

@ -3,21 +3,23 @@
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
"condition": {
//模式配置，仅开发期间生效
"current": 0,
//当前激活的模式(list 的索引项)
"list": [
{
"name": "test",
//模式名称
"path": "pages/login/login/login"
//启动页面，必选
// "query": "uuid=c4bba940-f69e-11ea-a419-6bafda9d095e&__id__=1" //启动参数，在页面的onLoad函数里面得到
}
]
},
"pages": [
// 登录
{
"path": "pages/home/index/index",
"style": {
"navigationBarTitleText": "首页",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path": "pages/login/login/login",
"style": {
@ -26,115 +28,84 @@
"navigationStyle": "custom"
}
},
// 注册,
{
"path": "pages/login/register/register",
"style": {
"navigationBarTitleText": "注册",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
// 隐藏系统导航栏
}
},
//实名验证
// 完善信息
{
"path": "pages/login/perfect/perfect",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
// 隐藏系统导航栏
}
},
// 毕业生认证
{
"path": "pages/login/graduateCertification/graduateCertification",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
// 隐藏系统导航栏
}
},
// 消息列表,
{
"path": "pages/message/msgList/msgList",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
// 隐藏系统导航栏
}
},
// 对话框,
{
"path": "pages/message/dialogBox/dialogBox",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
// 隐藏系统导航栏
}
},
// 互动消息,
{
"path": "pages/message/interactionList/interactionList",
"style": {
"navigationBarTitleText": "互动消息",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
// 隐藏系统导航栏
}
},
// 管理列表,
{
"path": "pages/message/adminList/adminList",
"style": {
"navigationBarTitleText": "管理列表",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
// 隐藏系统导航栏
}
},
// 系统消息,
{
"path": "pages/message/sysList/sysList",
"style": {
"navigationBarTitleText": "系统消息",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
// 隐藏系统导航栏
}
},
// 新增关注,
{
"path": "pages/message/attentionList/attentionList",
"style": {
"navigationBarTitleText": "新增关注",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
// 隐藏系统导航栏
}
},
// 头像裁剪
{
"path": "uview-ui/components/u-avatar-cropper/u-avatar-cropper",
"path": "pages/message/adminList/adminList",
"style": {
"navigationBarTitleText": "头像裁剪",
"navigationBarBackgroundColor": "#000000",
"navigationBarTitleText": "管理列表",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
// 隐藏系统导航栏
}
},
// 忘记密码,
{
"path": "pages/login/ForgetPassword/ForgetPassword",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
// 隐藏系统导航栏
}
},
{
@ -143,7 +114,6 @@
"navigationBarTitleText": "确认密码",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
// 隐藏系统导航栏
}
},
{
@ -152,7 +122,6 @@
"navigationBarTitleText": "角色选择",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
// 隐藏系统导航栏
}
},
{
@ -163,22 +132,12 @@
"navigationStyle": "custom"
}
},
{
"path": "pages/webview/index",
"style": {
"navigationBarTitleText": "网页链接",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
// 隐藏系统导航栏
}
},
{
"path": "pages/login/recognitionResult/recognitionResult",
"style": {
"navigationBarTitleText": "提示",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
// 隐藏系统导航栏
}
},
{
@ -187,41 +146,14 @@
"navigationBarTitleText": "认证失败",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
// 隐藏系统导航栏
}
}
],
"subPackages": [],
// "preloadRule": {
// "pages/example/components": {
// "network": "all",
// "packages": ["pages/componentsA", "pages/componentsB", "pages/componentsC"]
// }
// },
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uView",
"navigationBarTitleText": "应行AI",
"navigationBarBackgroundColor": "#FFFFFF",
"backgroundColor": "#FFFFFF"
},
"tabBar": {
"color": "#909399",
"selectedColor": "#303133",
"backgroundColor": "#FFFFFF",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/home/home",
"iconPath": "/static/common/tabbar/index.png",
"selectedIconPath": "/static/common/tabbar/selectindex.png",
"text": "首页"
},
{
"pagePath": "pages/message/msgList/msgList",
"iconPath": "static/common/tabbar/message.png",
"selectedIconPath": "static/common/tabbar/selectmessage.png",
"text": "消息"
}
]
}
}

165
pages/home/home.vue
View File

@ -1,165 +0,0 @@
<template>
<view class="flex-col page">
首页11
</view>
</template>
<script>
</script>
<style scoped lang="scss">
.page {
padding-bottom: 30rpx;
background-color: rgb(255, 255, 255);
overflow-y: auto;
width: 100%;
overflow-x: hidden;
height: 100%;
background: url(/static/common/img/loginBg.png);
background-size: contain;
background-repeat: no-repeat;
background-position: top;
.img-box {
height: 420rpx;
}
.image {
flex-shrink: 0;
align-self: flex-start;
width: 102%;
}
.group {
background: #fff;
padding: 20rpx 25rpx;
width: calc(100% - 50rpx);
margin: 0 auto;
border-radius: 30rpx;
.text {
align-self: center;
color: rgb(46, 155, 255);
font-size: 32rpx;
font-family: PingFang;
line-height: 32rpx;
}
.group_7 {
margin-top: 40rpx;
.text-wrapper {
border: solid 2rpx #dcdfe6;
border-radius: 100rpx;
background: #f6f8fa;
}
.group_6 {
margin-top: 30rpx;
}
.text_1 {
margin-left: 10rpx;
align-self: flex-start;
color: rgb(51, 51, 51);
font-size: 32rpx;
font-family: PingFang;
line-height: 30rpx;
}
.view {
margin-top: 20rpx;
padding: 20rpx 50rpx !important;
}
}
.text_6 {
margin-left: 5rpx;
margin-top: 50rpx;
align-self: flex-start;
// color: rgb(25, 140, 255);
color:#1F2232;
font-size: 28rpx;
font-family: PingFang;
line-height: 28rpx;
}
.text-wrapper_1 {
margin: 50rpx 0rpx 40rpx;
padding: 50rpx 0 50rpx;
// background-image: linear-gradient(90deg, rgb(135, 230, 254) 0%, rgb(91, 192, 254) 52%, rgb(46, 155, 255) 100%);
background: #3cb4fb;
box-shadow: 0px 6rpx 9rpx rgba(38, 122, 199, 0.34);
border-radius: 100rpx;
.text_7 {
color: rgb(255, 255, 255);
font-size: 32rpx;
font-family: PingFang;
line-height: 30rpx;
}
}
.group_1 {
margin-top: 24rpx;
.text_8 {
color: #8697AC;
font-size: 30rpx;
font-family: PingFang;
line-height: 26rpx;
}
.text_9 {
margin-left: 0.035rem;
color: #2E9CFE;
font-size: 30rpx;
font-family: PingFang;
line-height: 26rpx;
}
}
.group_2 {
margin-top: 40rpx;
justify-content: center;
.section_1 {
flex-shrink: 0;
width: 34rpx;
}
.group_3 {
margin-left: 24rpx;
height: 24rpx;
font-size: 0;
.text_10 {
color: rgb(153, 153, 153);
font-size: 24rpx;
font-family: PingFang;
}
.text_11 {
color: rgb(25, 140, 255);
font-size: 24rpx;
font-family: PingFang;
}
.text_12 {
color: rgb(102, 102, 102);
font-size: 24rpx;
font-family: PingFang;
}
.text_13 {
color: rgb(25, 140, 255);
font-size: 24rpx;
font-family: PingFang;
}
}
}
}
}
</style>

128
pages/home/index/index.vue Normal file
View File

@ -0,0 +1,128 @@
<template>
<view class="home-container">
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
<view class="header">
<text class="title">应行AI</text>
</view>
<view class="content">
<text class="welcome-text">欢迎使用应行AI平台</text>
<!-- 这里可以添加首页内容 -->
<view class="feature-grid">
<view class="feature-item" v-for="(item, index) in features" :key="index">
<image :src="item.icon" class="feature-icon"></image>
<text class="feature-text">{{ item.title }}</text>
</view>
</view>
</view>
<!-- 使用自定义TabBar -->
<custom-tab-bar></custom-tab-bar>
</view>
</template>
<script>
import CustomTabBar from '@/components/custom-tab-bar/custom-tab-bar.vue';
export default {
components: {
CustomTabBar
},
data() {
return {
statusBarHeight: 0,
features: [
{
title: '功能一',
icon: '/static/common/feature/feature1.png'
},
{
title: '功能二',
icon: '/static/common/feature/feature1.png'
},
{
title: '功能三',
icon: '/static/common/feature/feature1.png'
},
{
title: '功能四',
icon: '/static/common/feature/feature1.png'
}
]
}
},
onLoad() {
// 获取状态栏高度
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.home-container {
min-height: 100vh;
background-color: #f8f8f8;
padding-bottom: calc(56px + env(safe-area-inset-bottom)); /* 为自定义tabBar预留空间 */
.status-bar {
background-color: #ffffff;
}
.header {
background-color: #ffffff;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 15px;
.title {
font-size: 18px;
font-weight: bold;
color: #333333;
}
}
.content {
padding: 20px;
.welcome-text {
font-size: 16px;
color: #333333;
text-align: center;
margin-bottom: 30px;
}
.feature-grid {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
.feature-item {
width: 50%;
padding: 10px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
.feature-icon {
width: 60px;
height: 60px;
margin-bottom: 10px;
background-color: #e1f1ff;
border-radius: 15px;
}
.feature-text {
font-size: 14px;
color: #333333;
}
}
}
}
}
</style>

72
pages/message/msgList/msgList.vue
View File

@ -15,7 +15,7 @@
style="height: calc(100vh - 2.1rem); width: 100%">
<swiper-item class="swiper-item" v-for="(item, index) in navList" :key="index"
style="height: calc(100vh - 2.1rem); width: 100%"> -->
<scroll-view scroll-y="true" style="height: calc(100vh - 2.5rem); width: 100%"
<scroll-view scroll-y="true" style="height: calc(100vh - 2.5rem - 56px); width: 100%"
@scrolltolower="onreachBottom">
<!-- 消息 -->
<view class="msg" >
@ -56,38 +56,36 @@
<view style="color:grey;margin-top: -5vh;">暂无消息</view>
</view> -->
<view v-if="UserMsgList.length">
<template v-for="(v, i) in UserMsgList" >
<view class="list-item flex-row group_5" :key="i"
@click="GoChat(v.userId, v.chatType, v.userHead)">
<u-avatar v-if='v.chatType == 0' class="image_1"
:show-sex="vuex_msgList.indexOf(v.userId + ',') >= 0" sex-icon=""
size="0.4rem" sex-bg-color="red" mode="circle"
:src="$u.http.config.imgUrl + v.userHead">
</u-avatar>
<u-avatar v-else class="image_1" :show-sex="vuex_msgList.indexOf('admin,') >= 0"
sex-icon="" size="0.4rem" sex-bg-color="red" mode="circle"
:src="$u.http.config.imgUrl + v.userHead">
</u-avatar>
<view class="right-section justify-between view_4">
<view class="top-group flex-col view_5">
<view class="text_2 flex-row view_6">
<text class="text_11">{{ v.userNetName }}</text>
<view class="right-text-wrapper flex-col items-end">
<text class="text_13">{{ v.userSchoolName }}</text>
</view>
<view v-for="(v, i) in UserMsgList" :key="i" class="list-item flex-row group_5"
@click="GoChat(v.userId, v.chatType, v.userHead)">
<u-avatar v-if='v.chatType == 0' class="image_1"
:show-sex="vuex_msgList.indexOf(v.userId + ',') >= 0" sex-icon=""
size="0.4rem" sex-bg-color="red" mode="circle"
:src="$u.http.config.imgUrl + v.userHead">
</u-avatar>
<u-avatar v-else class="image_1" :show-sex="vuex_msgList.indexOf('admin,') >= 0"
sex-icon="" size="0.4rem" sex-bg-color="red" mode="circle"
:src="$u.http.config.imgUrl + v.userHead">
</u-avatar>
<view class="right-section justify-between view_4">
<view class="top-group flex-col view_5">
<view class="text_2 flex-row view_6">
<text class="text_11">{{ v.userNetName }}</text>
<view class="right-text-wrapper flex-col items-end">
<text class="text_13">{{ v.userSchoolName }}</text>
</view>
<text class="text_4 text_15">{{ v.message }}</text>
</view>
<view style='display:none'>
{{ v.sendDate ? v.sendDate = v.sendDate.replace(/-/g, "/") : '' }}
</view>
<text
v-if='new Date(v.sendDate) - 0 + (3600000 * 24) > new Date() && new Date(v.sendDate).getDate() == new Date().getDate()'
class="text_6 text_16">{{ v.sendDate.slice(10, 16) }}</text>
<text v-else class="text_6 text_16">{{ v.sendDate.slice(5, 10) }}</text>
<text class="text_4 text_15">{{ v.message }}</text>
</view>
<view style='display:none'>
{{ v.sendDate ? v.sendDate = v.sendDate.replace(/-/g, "/") : '' }}
</view>
<text
v-if='new Date(v.sendDate) - 0 + (3600000 * 24) > new Date() && new Date(v.sendDate).getDate() == new Date().getDate()'
class="text_6 text_16">{{ v.sendDate.slice(10, 16) }}</text>
<text v-else class="text_6 text_16">{{ v.sendDate.slice(5, 10) }}</text>
</view>
</template>
</view>
</view>
<no-data v-else type="message"></no-data>
</view>
@ -96,21 +94,21 @@
</scroll-view>
<!-- </swiper-item>
</swiper> -->
<u-tabbar
:list="vuex_tabbar"
:class="{ phone: vuex_iPhone }"
:active-color="vuex_tabbar_config.activeColor"
:inactive-color="vuex_tabbar_config.inactiveColor"
></u-tabbar>
<!-- 使用自定义TabBar -->
<custom-tab-bar></custom-tab-bar>
</view>
</template>
<script>
import noData from '@/components/NoData.vue'
import CustomTabBar from '@/components/custom-tab-bar/custom-tab-bar.vue';
export default {
components: {
noData
},
noData,
CustomTabBar
},
data() {
return {
tabbar: "",

40
store/index.js
View File

@ -49,38 +49,38 @@ const store = new Vuex.Store({
inactiveColor: '#666666'
},
vuex_tabbar: [{
pagePath: "/pages/home/home/home",
pagePath: "pages/home/index/index",
iconPath: "/static/common/tabbar/index.png",
selectedIconPath: "/static/common/tabbar/selectindex.png",
text: "首页"
},
{
pagePath: "/pages/message/msgList/msgList",
pagePath: "pages/message/msgList/msgList",
iconPath: "/static/common/tabbar/message.png",
selectedIconPath: "/static/common/tabbar/selectmessage.png",
// count: 2, //提示数量
isDot: lifeData.vuex_msgList ? true : false, //显示红色小点
text: "消息"
},
{
pagePath: "/pages/main/index/index",
iconPath: "/static/common/tabbar/findFriends.png",
selectedIconPath: "/static/common/tabbar/selectFindFridend.png",
text: "找校友"
},
{
pagePath: "/pages/AlumniCircle/alumnus/alumnus",
iconPath: "/static/common/tabbar/AlumniCircle.png",
selectedIconPath: "/static/common/tabbar/selectAlumniCircle.png",
text: "校友圈"
},
// {
// pagePath: "/pages/main/index/index",
// iconPath: "/static/common/tabbar/findFriends.png",
// selectedIconPath: "/static/common/tabbar/selectFindFridend.png",
// text: "找校友"
// },
// {
// pagePath: "/pages/AlumniCircle/alumnus/alumnus",
// iconPath: "/static/common/tabbar/AlumniCircle.png",
// selectedIconPath: "/static/common/tabbar/selectAlumniCircle.png",
// text: "校友圈"
// },
{
pagePath: "/pages/my/my/my",
iconPath: "/static/common/tabbar/my.png",
selectedIconPath: "/static/common/tabbar/selectmy.png",
text: "我的"
}
// {
// pagePath: "/pages/my/my/my",
// iconPath: "/static/common/tabbar/my.png",
// selectedIconPath: "/static/common/tabbar/selectmy.png",
// text: "我的"
// }
],
vuex_education: [],
vuex_schoolName: "",