init
This commit is contained in:
shuhongfan
@@ -0,0 +1,106 @@
|
||||
<!-- 公告 -->
|
||||
<template>
|
||||
<!-- 垂直滚动区域 scroll和swiper的高度都要给且是一样的高度-->
|
||||
<scroll-view scroll-y="true" @scrolltolower="lower">
|
||||
<view v-if="itemData.length > 0">
|
||||
<view class="boxCon">
|
||||
<view class="tabConList">
|
||||
<view class="item" v-for="(item, index) in itemData" :key="index">
|
||||
<view @click="handleClick(item)">
|
||||
<view class="text" :class="item.isRead===0 ? 'active' : ''">
|
||||
<icon></icon>
|
||||
{{ item.title }}
|
||||
</view>
|
||||
<text class="time">{{ item.created }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 暂时先不做，后期做 -->
|
||||
<!-- <ReachBottom v-if="loading" :loadingText="loadingText"></ReachBottom> -->
|
||||
</view>
|
||||
|
||||
<!-- 无数据显示 -->
|
||||
<view v-else>
|
||||
<EmptyPage :emptyInfo="emptyData"></EmptyPage>
|
||||
</view>
|
||||
<!-- end -->
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { taskTimeFormat } from '@/utils/index.js';
|
||||
// 接口api
|
||||
import { getNewList, msgRead } from '@/pages/api/news.js';
|
||||
// 导入组件
|
||||
//空页面
|
||||
import EmptyPage from '@/components/EmptyPage/index.vue';
|
||||
// 下拉提示
|
||||
import ReachBottom from '@/components/reach-bottom/index.vue';
|
||||
// ------定义变量------
|
||||
let loadingText = ref('');
|
||||
let loading = ref(false);
|
||||
let itemData = ref([]); //列表数据
|
||||
const emptyData = '暂无数据'
|
||||
// 获取父组件数据
|
||||
const props = defineProps({
|
||||
scrollH: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
});
|
||||
// ------定义变量------
|
||||
const emit = defineEmits(['handleSearch']); //子组件向父组件事件传递
|
||||
// ------生命周期------
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
// ------定义方法------
|
||||
const init = () => {
|
||||
getList();
|
||||
};
|
||||
// 请求参数
|
||||
const params = ref({
|
||||
contentType: '200',
|
||||
page: 1,
|
||||
pageSize: 10
|
||||
})
|
||||
// 获取系统通知列表
|
||||
const getList = async () => {
|
||||
await getNewList(params.value)
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
itemData.value = res.data.items;
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
return uni.showToast({
|
||||
title: err.msg,
|
||||
duration: 1000,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
};
|
||||
const dataAdd = () => {
|
||||
this.loadingText = '没有更多了';
|
||||
this.loading = true;
|
||||
};
|
||||
// 下拉加载
|
||||
const lower = () => {
|
||||
loadingText.value = '数据加载中...';
|
||||
loading.value = true;
|
||||
dataAdd();
|
||||
};
|
||||
// 标记已读
|
||||
const handleClick = async item => {
|
||||
await msgRead(item.id)
|
||||
};
|
||||
//把数据、方法暴漏给父组件
|
||||
defineExpose({
|
||||
getList
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,147 @@
|
||||
<!-- 系统通知 -->
|
||||
<template>
|
||||
<!-- 垂直滚动区域 scroll和swiper的高度都要给且是一样的高度-->
|
||||
<scroll-view scroll-y="true" class="scrollSet">
|
||||
<!-- 列表 -->
|
||||
<view class=" newBox">
|
||||
<scroll-view scroll-y="true" :style="{ height: scrollH + 'px' }" v-if="itemData.length>0">
|
||||
<view class="systemList">
|
||||
<view class="boxBg item" v-for="(item, index) in itemData" :key="index">
|
||||
<view class="tit" :class="item.isRead === 0 ? 'active' : ''">
|
||||
您有一个新的运输任务
|
||||
<icon></icon>
|
||||
</view>
|
||||
<view class="address" v-html="item.content"></view>
|
||||
<view class="time">
|
||||
<text> {{item.created}}</text>
|
||||
<button class="uni-btn redBtn" @click="handleDetail(item)">查看详情</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 50rpx;">
|
||||
<!-- 下面的加载更多有问题 先占位 -->
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view v-else><EmptyPage :emptyData="emptyData"></EmptyPage></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, nextTick } from 'vue';
|
||||
import { onReachBottom } from '@dcloudio/uni-app';
|
||||
import { taskTimeFormat } from '@/utils/index.js';
|
||||
// 接口 api
|
||||
import { getNewList, msgRead, msgAllRead } from '@/pages/api/news.js';
|
||||
// 导入组件
|
||||
//空页面
|
||||
import EmptyPage from '@/components/EmptyPage/index.vue';
|
||||
// 下拉提示
|
||||
import ReachBottom from '@/components/reach-bottom/index.vue';
|
||||
// ------定义变量------
|
||||
const pages = getCurrentPages(); //获取加载的页面，获取当前页面路由信息uniapp 做安卓不支持 vue-router
|
||||
const currentPage = pages[pages.length - 1].$page.options; //获取当前页面的对象
|
||||
const title = currentPage.title; //nav标题
|
||||
const type = currentPage.type; //当前派件类型
|
||||
const loadMore = ref(); //定义子组件的ref,可以调取子组件的值
|
||||
const emptyData = ref('暂无消息');
|
||||
const rithtText = ref('全部已读');
|
||||
let pageNumber = ref(1);
|
||||
let pageSize = ref(10);
|
||||
let totalPage = ref(0);
|
||||
let reload = ref(false);
|
||||
let scrollH = ref(null); //滚动高度
|
||||
let currentPageData = ref([]);
|
||||
let itemData = ref([]);
|
||||
let ids = ref([])
|
||||
// 监听上拉触底事件
|
||||
onReachBottom(() => {
|
||||
totalPage.value = Math.ceil(itemData.value.length / pageSize.value); //计算总页数
|
||||
totalPage.value = totalPage.value == 0 ? 1 : totalPage.value;
|
||||
if (pageNumber.value >= totalPage.value) {
|
||||
loadMore.value.status= 'noMore';
|
||||
|
||||
return false;
|
||||
} else {
|
||||
loadMore.value.status = 'loading';
|
||||
let times = setTimeout(() => {
|
||||
pageNumber.value++;
|
||||
let begin = (pageNumber.value - 1) * pageSize.value;
|
||||
let end = pageNumber.value * pageSize.value;
|
||||
currentPageData.value = [...currentPageData.value, ...itemData.value.slice(begin, end)];
|
||||
}, 1000); //因为接口没做分页，所以做了数据分页处理，这里延时一秒在加载方法有个loading效果
|
||||
}
|
||||
});
|
||||
|
||||
// ------生命周期------
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
// ------定义方法------
|
||||
const params = ref({
|
||||
contentType: '201',
|
||||
page: 1,
|
||||
pageSize: 10
|
||||
})
|
||||
// 获取系统通知列表
|
||||
const getList = async () => {
|
||||
await getNewList(params.value)
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
itemData.value = res.data.items;
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
return uni.showToast({
|
||||
title: err.msg,
|
||||
duration: 1000,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
};
|
||||
// 进入详情，标记已读
|
||||
const handleDetail = async item => {
|
||||
await msgRead(item.id)
|
||||
.then(res => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/message/details?obj=' + JSON.stringify(item)
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
|
||||
return uni.showToast({
|
||||
title: err.msg,
|
||||
duration: 1000,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
};
|
||||
// 全部已读 - 功能暂未实现
|
||||
const handleAll = async () => {
|
||||
itemData.value.map(val => {
|
||||
if(val.isRead===0){
|
||||
ids.value.push(val.id);
|
||||
}
|
||||
});
|
||||
await msgAllRead(ids.value)
|
||||
.then(res => {
|
||||
getList(type)
|
||||
})
|
||||
.catch(err => {
|
||||
return uni.showToast({
|
||||
title: err.msg,
|
||||
duration: 1000,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
};
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
uni.redirectTo({
|
||||
url: '/pages/news/index?tabIndex=1'
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style src="./../index.scss" lang="scss"></style>
|
||||
66
project-wl-siji-uniapp-vue3/pages/message/details.vue
Normal file
66
project-wl-siji-uniapp-vue3/pages/message/details.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<!-- 消息的详情 -->
|
||||
<template>
|
||||
<!-- 自定义头部 -->
|
||||
<DetailsNav :title="title"></DetailsNav>
|
||||
<!-- end -->
|
||||
<!-- 正文 -->
|
||||
<view class=" newDetail">
|
||||
<view class="tit">{{ objData.title }}</view>
|
||||
<view class="time">{{ taskTimeFormat(objData.created) }}</view>
|
||||
<view>{{ objData.content }}</view>
|
||||
</view>
|
||||
<!-- end -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { taskTimeFormat } from '@/utils/index.js';
|
||||
// 接口api
|
||||
import { getNewList } from '@/pages/api/news.js';
|
||||
// 导入组件
|
||||
// 导航组件
|
||||
import DetailsNav from '@/components/DetailsNav/index.vue'
|
||||
|
||||
// ------定义变量------
|
||||
const title = ref('详情'); //nav标题
|
||||
const pages = getCurrentPages(); //获取加载的页面，获取当前页面路由信息uniapp 做安卓不支持 vue-router
|
||||
const currentPage = pages[pages.length - 1]; //获取当前页面的对象
|
||||
let objData = ref(JSON.parse(currentPage.$page.options.obj)); //基本数据 获取列表页传过来的详情页，此页没有详情接口
|
||||
// ------生命周期------
|
||||
onMounted(e => {});
|
||||
// ------定义方法------
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
uni.redirectTo({
|
||||
url: '/pages/news/index'
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
body,
|
||||
uni-page-body,
|
||||
uni-page-head,
|
||||
.uni-page-head {
|
||||
background-color:#fff !important;
|
||||
}
|
||||
.pageBox{
|
||||
box-shadow: inset 0 22rpx 22rpx 0 rgba(162,162,162,0.06);
|
||||
}
|
||||
.newDetail{
|
||||
padding: 40rpx 32rpx 60rpx 32rpx;
|
||||
color: var(--neutral-color-font);
|
||||
line-height: 48rpx;
|
||||
font-size: var(--font-size-13);
|
||||
.tit{
|
||||
line-height: 60rpx;
|
||||
font-size: var(--font-size-16);
|
||||
color: var(--neutral-color-main);
|
||||
font-weight: 600;
|
||||
}
|
||||
.time{
|
||||
font-size: var(--font-size-12);
|
||||
padding: 4rpx 0 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
130
project-wl-siji-uniapp-vue3/pages/message/index.scss
Normal file
130
project-wl-siji-uniapp-vue3/pages/message/index.scss
Normal file
@@ -0,0 +1,130 @@
|
||||
body,
|
||||
uni-page-body {
|
||||
background: var(--neutral-color-background) !important;
|
||||
}
|
||||
.newBox {
|
||||
.tabScroll {
|
||||
background: var(--neutral-color-white);
|
||||
::v-deep .uni-scroll-view-content {
|
||||
font-size: var(--font-size-14) !important;
|
||||
.scroll-row-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .newConBox {
|
||||
.item {
|
||||
line-height: 40rpx;
|
||||
padding: 0 28rpx;
|
||||
color: var(--neutral-color-font);
|
||||
position: relative;
|
||||
font-size: var(--font-size-12);
|
||||
.navigator-wrap{
|
||||
uni-navigator{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
padding: 32rpx 0 28rpx;
|
||||
border-bottom: 1px solid var(--neutral-color-background);
|
||||
view{
|
||||
&:first-child{
|
||||
color: var(--neutral-color-main);
|
||||
font-size: var(--font-size-14);
|
||||
padding-bottom: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
margin-right: 36rpx;
|
||||
position: relative;
|
||||
&.send {
|
||||
// background: url(@/static/icon17.png);
|
||||
background-size: contain;
|
||||
}
|
||||
&.income {
|
||||
// background: url(@/static/icon18.png);
|
||||
background-size: contain;
|
||||
|
||||
}
|
||||
&.cancel {
|
||||
// background: url(@/static/icon19.png);
|
||||
background-size: contain;
|
||||
}
|
||||
&.active {
|
||||
color: var(--neutral-color-main);
|
||||
icon {
|
||||
position: absolute;
|
||||
right: -14rpx;
|
||||
top: 2rpx;
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 12rpx;
|
||||
background: var(--essential-color-red);
|
||||
}
|
||||
}
|
||||
}
|
||||
.time{
|
||||
position: absolute;
|
||||
top: 32rpx;
|
||||
right: 44rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
// 详情
|
||||
.scrollSet{
|
||||
height: calc(100vh - 300rpx);
|
||||
}
|
||||
|
||||
// 系统列表
|
||||
.systemList{
|
||||
.item{
|
||||
padding:32rpx 32rpx 40rpx 32rpx;
|
||||
color: var(--neutral-color-font);
|
||||
line-height: 52rpx;
|
||||
margin-top: 40rpx;
|
||||
.tit{
|
||||
line-height: 40rpx;
|
||||
padding-bottom: 26rpx;
|
||||
color: var(--neutral-color-main);
|
||||
border-bottom: 1px solid #f4f4f4;
|
||||
margin-bottom: 26rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.time{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
text{
|
||||
flex:1
|
||||
}
|
||||
.redBtn{
|
||||
display: inline-block;
|
||||
width: 162rpx;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
border: 2rpx solid #EF4F3F;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
.address{
|
||||
font-size: 26rpx;
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
108
project-wl-siji-uniapp-vue3/pages/message/index.vue
Normal file
108
project-wl-siji-uniapp-vue3/pages/message/index.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<!-- 消息页面 -->
|
||||
<template>
|
||||
<!-- 自定义头部 -->
|
||||
<view class="navHead"></view>
|
||||
<!-- end -->
|
||||
|
||||
<!-- 列表 -->
|
||||
<view class="pageBox newBox">
|
||||
<!-- 搜索列表 -->
|
||||
<scroll-view scroll-x="true" class="tabScroll" :scroll-into-view="scrollinto" :scroll-with-animation="true">
|
||||
<view v-for="(item, index) in tabBars" :key="index" :id="'tab' + index" class="scroll-row-item" >
|
||||
<view :class="tabIndex == index ? 'scroll-row-item-act' : ''" @click="changeTab(index)">
|
||||
<text class="line"></text>
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- 滑块内容 对应的是顶部选项卡的切换 :current="tabIndex" 设置的是y方向上可以滚动-->
|
||||
<view class="homeSwiper">
|
||||
<!-- 公告 -->
|
||||
<Announcement v-show="tabIndex == 0" ref="announcement"></Announcement>
|
||||
<!-- end -->
|
||||
<!-- 系统通知 -->
|
||||
<Notification v-show="tabIndex == 1" ref="notificat" @getTabIndex="getTabIndex"></Notification>
|
||||
<!-- end -->
|
||||
<!-- </swiper> -->
|
||||
</view>
|
||||
<!-- end -->
|
||||
</view>
|
||||
<!-- footer -->
|
||||
<UniFooter :pagePath="'pages/index/index'" ></UniFooter>
|
||||
<!-- end -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import {taskTimeFormat} from '@/utils/index.js';
|
||||
// 导入组件
|
||||
// 导航组件
|
||||
//空页面
|
||||
import EmptyPage from '@/components/EmptyPage/index.vue';
|
||||
// 下拉提示
|
||||
import ReachBottom from '@/components/reach-bottom/index.vue'
|
||||
// 公告列表
|
||||
import Announcement from './components/announcement.vue';
|
||||
// 系统通知
|
||||
import Notification from './components/notification.vue';
|
||||
// 底部导航
|
||||
import UniFooter from '@/components/Footer/index.vue';
|
||||
// ------定义变量------
|
||||
const announcement = ref()//定义ref
|
||||
const notificat = ref()
|
||||
const title = ref('消息'); //nav标题
|
||||
const emptyInfo = ref('- 没有找到相关内容 -');
|
||||
const tabBars = reactive(['公告', '系统通知']);
|
||||
let scrollinto = ref('tab0'); //tab切换
|
||||
let tabIndex = ref(1); //当前tab
|
||||
let scrollH = ref(0); //滚动高度
|
||||
|
||||
// ------生命周期------
|
||||
onMounted(() => {
|
||||
// init()
|
||||
// 获取屏幕信息
|
||||
uni.getSystemInfo({
|
||||
success: res => {
|
||||
scrollH.value = res.windowHeight - uni.upx2px(630);
|
||||
}
|
||||
});
|
||||
});
|
||||
// ------定义方法------
|
||||
const init = () => {
|
||||
getList()
|
||||
};
|
||||
|
||||
// tab选项卡切换轮播
|
||||
const changeTab = index => {
|
||||
// 点击的还是当前数据的时候直接return
|
||||
if (tabIndex.value == index) {
|
||||
return;
|
||||
}
|
||||
// 触发tab切换接口
|
||||
if(index===0){
|
||||
announcement.value.getList()
|
||||
}else{
|
||||
// notificat.value.getOjb()
|
||||
}
|
||||
tabIndex.value = index;
|
||||
// 滑动
|
||||
scrollinto.value = 'tab' + index;
|
||||
};
|
||||
|
||||
// 触发选项卡事件
|
||||
const onChangeSwiperTab = e => {
|
||||
changeTab(e.detail.current);
|
||||
};
|
||||
// 获取子组件传来的tabindex
|
||||
const getTabIndex =(val)=>{
|
||||
tabIndex.value = val
|
||||
}
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
uni.redirectTo({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style src="./index.scss" lang="scss"></style>
|
||||
Reference in New Issue
Block a user