austin
/
staff
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

消息列表完成，替换tabbar图标，优化缺省页等

This commit is contained in:
张文涛 2025-03-04 22:33:23 +08:00
parent 462ca4ae21
commit 1e987bd5ca
17 changed files with 276 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
api/login.ts
View File

@ -1,14 +1,17 @@
import { get, post, put, del } from '../utils/request';
/*
请求示例
*/
// export const register = (data : any) => post('/power/drv', data);
// export const updateUser = (data : any) => put('/power/drv', data);
// export const deleteUser = (data : any) => del('/power/drv', data);
export const userInfo = (data : any) => get('v1/info', data);
export const register = (data : any) => post('/power/drv', data);
export const updateUser = (data : any) => put('/power/drv', data);
export const deleteUser = (data : any) => del('/power/drv', data);
export const captcha = (data : any) => get('v1/captcha', data);
export const login = (data : any) => post('v1/login', data);

24
pages.json
View File

@ -11,12 +11,12 @@
}
},
{
"path": "pages/message/index",
"path": "pages/chat/index",
"style": {
"enablePullDownRefresh": true,
"navigationBarTextStyle": "black",
"navigationStyle": "custom",
"navigationBarTitleText": "消息页"
"navigationBarTitleText": "会话页"
}
},
{
@ -49,6 +49,7 @@
"backgroundColor": "#fff",
"color": "#989898",
"selectedColor": "#37A5FF",
"fontSize": "12px",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/tabbar/home.png",
@ -56,10 +57,10 @@
"text": "首页"
},
{
"pagePath": "pages/message/index",
"iconPath": "static/tabbar/message.png",
"selectedIconPath": "static/tabbar/message_select.png",
"text": "消息"
"pagePath": "pages/chat/index",
"iconPath": "static/tabbar/chat.png",
"selectedIconPath": "static/tabbar/chat_select.png",
"text": "会话"
},
{
"pagePath": "pages/mine/index",
@ -120,6 +121,15 @@
"navigationStyle": "custom",
"navigationBarTitleText": "核销详情"
}
},
{
"path": "message/index",
"style": {
"enablePullDownRefresh": true,
"navigationBarTextStyle": "black",
"navigationStyle": "custom",
"navigationBarTitleText": "消息列表"
}
}
]
}],
@ -127,7 +137,7 @@
"current": 0, // 当前激活的条件，默认为 0
"list": [{
"name": "", // 条件名称
"path": "pages/index/index", // 要打开的页面路径
"path": "pagesA/message/index", // 要打开的页面路径
"query": "" // 可选的页面参数
}]
}

19
pages/message/index.vue → pages/chat/index.vue
View File

@ -5,7 +5,7 @@
custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;"
safeAreaInsetTop fixed placeholder>
<template #left>
<text class="li-text-42 li-ml-25">消息</text>
<text class="li-text-42 li-ml-25">聊天</text>
</template>
<!-- #ifdef MP-WEIXIN -->
<template #title>
@ -40,8 +40,8 @@
</wd-notice-bar>
<!-- list -->
<view>
<wd-swipe-action v-for="(item,index) in 6">
<view v-if="messageList.length>0">
<wd-swipe-action v-for="(item,index) in messageList">
<view @click="chatDetail" class="li-bg-white li-px-30">
<view class="li-flex li-items-center li-bottom-border1 li-py-20">
<wd-badge modelValue="12" top='10' right="2" :max='99'>
@ -64,15 +64,26 @@
<view class="button" style="background: #E2231A;" @click="handleAction('操作3')">删除</view>
</view>
</template>
</wd-swipe-action>
</view>
<view v-if="messageList.length==0" class="!li-mt-300">
<wd-status-tip image="message" tip="暂无待处理会话" />
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const messageList = ref([])
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
onPullDownRefresh(() => {
uni.stopPullDownRefresh()
})
onReachBottom(() => {
})
const handleAction = (action : string) => {
console.log(action);

14
pages/index/index.vue
View File

@ -12,7 +12,7 @@
<template #right>
<view class="li-flex-center li-mr-25">
<text @click="toPages({type:'verification'})" class="ri-qr-scan-2-line li-text-48"></text>
<view class="li-ml-25 pt-10">
<view @click="toPages({type:'message'})" class="li-ml-25 pt-10">
<wd-badge :hidden="messageCount > 0 ? false:true" :modelValue="messageCount" top='15' right="-4"
:max='99'>
<text class="ri-notification-line li-text-48"></text>
@ -183,7 +183,7 @@
{
image: uni.$globalData?.RESOURCE_URL + 'home/grid/xiaoxi.png',
title: '通知消息',
type: ''
type: 'message'
}
// #endif
@ -241,7 +241,6 @@
});
break;
case 'my_order':
console.log('00000');
// 工单大厅
uni.navigateTo({
url: '/pagesA/my_order/list'
@ -259,6 +258,11 @@
url: '/pagesA/verification/index'
});
break;
case 'message':
// 消息夜
uni.navigateTo({
url: '/pagesA/message/index'
});
default:
break;
}
@ -286,7 +290,7 @@
messageCount.value = mess.data.count
// 轮播加载
const banner = await bannerList({ position: 5 })
swiperList.value = banner.data.map((item: { image: String; })=>item.image)
swiperList.value = banner.data.map((item : { image : String; }) => item.image)
})
onLoad(() => {
@ -340,4 +344,4 @@
border: none !important;
margin: 0 !important;
}
</style>
</style>

192
pagesA/message/index.vue Normal file
View File

@ -0,0 +1,192 @@
<template>
<view class="li-message-page">
<!-- 自定义导航栏 -->
<wd-navbar :bordered="false"
custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;"
safeAreaInsetTop fixed placeholder>
<template #left>
<view class="li-flex li-items-center">
<text v-if="hasMultiplePages" class="ri-arrow-left-s-line li-text-70"
@click="toPages({type:'nav'})"></text>
<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mr-6 li-mb-8"
@click="toPages({type:'home'})"></text>
<text class="li-text-42">消息</text>
</view>
</template>
<!-- #ifdef MP-WEIXIN -->
<template #title>
<view class="li-flex-center li-ml-200">
<text class="ri-brush-3-line li-text-47"></text>
</view>
</template>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<template #right>
<view class="li-flex-center li-mr-25">
<text class="ri-brush-3-line li-text-52 li-pt-2"></text>
</view>
</template>
<!-- #endif -->
</wd-navbar>
<!-- 导航栏背景 -->
<view class="nav-bg-layer"></view>
<!-- 通知栏 -->
<wd-notice-bar class="li-mt-20" :scrollable="false" color="#37A5FF"
background-color="rgba(217, 237, 255, 0.35)">
<template #prefix>
<text class="ri-volume-up-fill li-text-35 li-mr-10 li-ml-20"></text>
</template>
向左滑动可删除消息，删除后无法恢复。
<template #suffix>
<text class="ri-close-line li-text-38 li-mr-10 li-text-#B1B0B0"></text>
</template>
</wd-notice-bar>
<!-- list -->
<view v-if="messageList.length>0">
<wd-swipe-action v-for="(item,index) in messageList" :key="index">
<view class="li-bg-white li-px-30">
<view class="li-flex li-items-center li-bottom-border1 li-py-20">
<wd-badge modelValue="1" top='10' right="2" :max='99'>
<image class="li-w-90 li-h-90 li-rd-20 " :src="item.image" mode=""></image>
</wd-badge>
<view class=" li-ml-30 li-w-80%">
<view class="li-flex li-justify-between li-items-center">
<text class="li-text-30 li-single-line">{{item.title}}</text>
<text class="li-text-26 li-text-#B1B0B0">{{item.time}}</text>
</view>
<view class="li-single-line li-text-25 li-text-#B1B0B0 li-mt-10">
1.15新版出炉，足迹"随笔功能"上线，记录线，记录线，记录1.15新版出炉，足迹"随笔功能"上线，记录线，记录线，记录
</view>
</view>
</view>
</view>
<template #right>
<view class="action">
<view class="button" style="background: #E2231A;" @click="handleAction('操作3')">删除</view>
</view>
</template>
</wd-swipe-action>
</view>
<view v-if="messageList.length==0" class="!li-mt-300">
<wd-status-tip image="message" tip="暂无待处理会话" />
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import { useNavigation } from '@/hooks/useNavigation'
// 使用导航 composable
const {
hasMultiplePages, // 是否有多个页面在路由栈中
isTabBarPage, // 当前页面是否为 tabBar 页面
checkRouteStack // 检查当前路由栈状态的方法
} = useNavigation()
const messageList = ref([
{
image: '/static/message/icon.png',
title: '订单提醒',
time: '2025/12/12',
content: "1.15新版出炉，足迹'随笔功能'上线，记录线，记录线，记录1.15新版出炉，足迹"
}, {
image: '/static/message/icon1.png',
title: '订单提醒',
time: '2025/12/12',
content: "1.15新版出炉，足迹'随笔功能'上线，记录线，记录线，记录1.15新版出炉，足迹"
}
])
onLoad(() => {
checkRouteStack()
})
onPullDownRefresh(() => {
uni.stopPullDownRefresh()
})
onReachBottom(() => {
})
const handleAction = (action : string) => {
console.log(action);
}
const toPages = (item : any) => {
console.log(item);
switch (item.type) {
case 'nav':
uni.navigateBack({
delta: 1
});
break;
case 'home':
uni.switchTab({
url: '/pages/index/index'
})
break;
case 'detail':
uni.navigateTo({
url: '/pagesA/my_order/detail'
})
break;
default:
break;
}
}
</script>
<style lang="scss">
.li-message-page {
width: 100%;
min-height: 100vh;
background: linear-gradient(to bottom,
rgba(217, 237, 255, 0.9) 0%,
rgba(255, 255, 255, 1) 20%,
rgba(255, 255, 255, 1) 40%,
rgba(255, 255, 255, 1) 60%,
rgba(255, 255, 255, 1) 80%,
rgba(255, 255, 255, 1) 100%);
background-attachment: fixed;
}
// 导航栏背景层
.nav-bg-layer {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--window-top);
background: linear-gradient(to bottom,
rgba(217, 237, 255, 0.95),
rgba(217, 237, 255, 0.85));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 998;
}
::v-deep .wd-navbar {
z-index: 999;
}
.action {
height: 100%;
border-radius: 4rpx 0 0 4rpx;
overflow: hidden;
}
.button {
display: inline-block;
padding: 0 30rpx;
height: 100%;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
}
</style>

BIN
static/code.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.8 KiB

BIN
static/message/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 775 B

BIN
static/message/icon1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
static/tabbar/chat.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 904 B

BIN
static/tabbar/chat_select.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
static/tabbar/home.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
static/tabbar/home_select.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
static/tabbar/message.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 KiB

BIN
static/tabbar/message_select.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

BIN
static/tabbar/mine.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
static/tabbar/mine_select.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

64
unocss/a-hua-unocss/index.scss
View File

@ -51,22 +51,39 @@
.li-w-58{width:58rpx}
.li-w-full-70{width:70%}
.li-w-full-88{width:88%}
.li-font-550{font-weight:550}
.li-h-68{height:68rpx}
.li-mt-100{margin-top:100rpx}
.li-mt-28{margin-top:28rpx}
.li-mt-32{margin-top:32rpx}
.li-mt-90{margin-top:90rpx}
.li-mx-10{margin-left:10rpx;margin-right:10rpx}
.li-pt-270{padding-top:270rpx}
.li-rd-40{border-radius:40rpx}
.li-text-000000-color{color:rgb(0,0,0)}
.li-text-2EA1EA-color{color:rgb(46,161,234)}
.li-text-38{font-size:38rpx}
.li-text-a5a5a5-color{color:rgb(165,165,165)}
.li-w-150{width:150rpx}
.li-w-420{width:420rpx}
.li-w-full-80{width:80%}
.li-w-full-85{width:85%}
.li-w-full-90{width:90%}
.li-h-100{height:100rpx}
.li-ml-20{margin-left:20rpx}
.li-ml-200{margin-left:200rpx}
.li-ml-30{margin-left:30rpx}
.li-mr-10{margin-right:10rpx}
.li-mr-30{margin-right:30rpx}
.li-mt-300-important{margin-top:300rpx !important}
.li-pt-2{padding-top:2rpx}
.li-py-20{padding-top:20rpx;padding-bottom:20rpx}
.li-rd-full-50{border-radius:50%}
.li-text-25{font-size:25rpx}
.li-text-35{font-size:35rpx}
.li-text-38{font-size:38rpx}
.li-text-42{font-size:42rpx}
.li-text-46{font-size:46rpx}
.li-w-100{width:100rpx}
.li-w-full-80{width:80%}
.bg-FFFFFF{background-color:rgb(255,255,255)}
.bg-f9f9f9{background-color:rgb(249,249,249)}
.border-4-white{border-style:solid;border-color:rgb(255,255,255);border-width:4rpx}
@ -94,7 +111,6 @@
.li-rd-20{border-radius:20rpx}
.li-rd-tl-30-important{border-top-left-radius:30rpx !important}
.li-rd-tr-30-important{border-top-right-radius:30rpx !important}
.li-text-000000-color{color:rgb(0,0,0)}
.li-text-19171B-color{color:rgb(25,23,27)}
.li-text-20{font-size:20rpx}
.li-text-32{font-size:32rpx}
@ -110,35 +126,27 @@
.li-w-50{width:50rpx}
.li-w-60{width:60rpx}
.li-w-full-94{width:94%}
.li-mb-25{margin-bottom:25rpx}
.li-mb-8{margin-bottom:8rpx}
.li-ml-15{margin-left:15rpx}
.li-ml-6{margin-left:6rpx}
.li-mr-6{margin-right:6rpx}
.li-p-15{padding:15rpx}
.li-pb-15{padding-bottom:15rpx}
.li-pb-30{padding-bottom:30rpx}
.li-pt-25{padding-top:25rpx}
.li-text-009aff-color{color:rgb(0,154,255)}
.li-pt-4{padding-top:4rpx}
.li-text-323232-color{color:rgb(50,50,50)}
.li-text-333333-color{color:rgb(51,51,51)}
.li-text-36{font-size:36rpx}
.li-text-55{font-size:55rpx}
.li-text-70{font-size:70rpx}
.li-text-999-color{color:rgb(153,153,153)}
.li-text-9a9a9a-color{color:rgb(154,154,154)}
.li-w-full-90{width:90%}
.li-text-ff0000-color{color:rgb(255,0,0)}
.li-w-full-100{width:100%}
.li-w-full-92{width:92%}
.li-font-550{font-weight:550}
.li-h-68{height:68rpx}
.li-mt-100{margin-top:100rpx}
.li-mt-28{margin-top:28rpx}
.li-mt-32{margin-top:32rpx}
.li-mt-90{margin-top:90rpx}
.li-mx-10{margin-left:10rpx;margin-right:10rpx}
.li-pt-270{padding-top:270rpx}
.li-rd-40{border-radius:40rpx}
.li-text-2EA1EA-color{color:rgb(46,161,234)}
.li-text-a5a5a5-color{color:rgb(165,165,165)}
.li-w-150{width:150rpx}
.li-w-420{width:420rpx}
.li-w-full-85{width:85%}
.li-mb-25{margin-bottom:25rpx}
.li-text-009aff-color{color:rgb(0,154,255)}
.li-text-999-color{color:rgb(153,153,153)}
.li-font-400{font-weight:400}
.li-m-30{margin:30rpx}
.li-text-595959-color{color:rgb(89,89,89)}
@ -165,19 +173,15 @@
.li-text-right{text-align:right}
.li-w-110{width:110rpx}
.li-w-400{width:400rpx}
.li-w-full-100{width:100%}
.overflow-hidden{overflow:hidden}
.li-ml-6{margin-left:6rpx}
.li-pt-4{padding-top:4rpx}
.li-text-323232-color{color:rgb(50,50,50)}
.li-text-333333-color{color:rgb(51,51,51)}
.li-text-36{font-size:36rpx}
.li-text-ff0000-color{color:rgb(255,0,0)}
.li-mr-40{margin-right:40rpx}
.li-text-a3a3a3-color{color:rgb(163,163,163)}
.li-h-90{height:90rpx}
.li-text-52{font-size:52rpx}
.li-w-90{width:90rpx}