15 changed files with 372 additions and 115 deletions
@ -0,0 +1,13 @@ |
|||
"use strict"; |
|||
Component({ |
|||
properties: { |
|||
loadType: { |
|||
type: String, |
|||
value: 'more' |
|||
}, |
|||
loadVisible: { |
|||
type: Boolean, |
|||
value: false |
|||
} |
|||
} |
|||
}); |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"component": true |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
<view class="load-more" style="visibility: {{ loadVisible ? 'visible': 'hidden'}}"> |
|||
<view class="more-data" wx:if="{{loadType === 'more'}}"> |
|||
<!-- <image src="../../images/loading.gif" /> --> |
|||
<view class="content">加载中...</view> |
|||
</view> |
|||
<view class="no-data" wx:elif="{{loadType === 'none'}}"> |
|||
<view class="content">没有更多了~</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,33 @@ |
|||
.load-more { |
|||
width: 100%; |
|||
height: 100rpx; |
|||
} |
|||
|
|||
.load-more .more-data { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.load-more .more-data image { |
|||
width: 35rpx; |
|||
height: 35rpx; |
|||
margin-right: 10rpx; |
|||
} |
|||
.load-more .more-data .content { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
.load-more .no-data { |
|||
width: 100%; |
|||
height: 100%; |
|||
text-align: center; |
|||
line-height: 100rpx; |
|||
} |
|||
.load-more .no-data .content { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
|
After Width: | Height: | Size: 3.1 KiB |
@ -1,66 +1,85 @@ |
|||
// pages/message/message.js
|
|||
const app = getApp() |
|||
import {message} from "../../api/index" |
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() { |
|||
|
|||
pageSize:10, |
|||
pageNo:1, |
|||
tableData:[], |
|||
lowerThreshold:'5', |
|||
loadMoreVisible:false, |
|||
loadMoreType: "none", |
|||
nodata:false, |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide() { |
|||
// 事件处理函数
|
|||
onLoad: async function () { |
|||
|
|||
}, |
|||
onShow(){ |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
this.getIntelligentMessage() |
|||
}, |
|||
onPullDownRefresh() { |
|||
|
|||
this.setData({ |
|||
pageNo:1, |
|||
tableData:[] |
|||
}) |
|||
this.getIntelligentMessage() |
|||
}, |
|||
|
|||
onScrollToLower(e){ |
|||
console.log(e); |
|||
if (this.data.loadMoreType === 'more') { |
|||
this.setData({ |
|||
loadMoreVisible: true, |
|||
}) |
|||
this.data.pageNo += 1 |
|||
this.getIntelligentMessage() |
|||
} |
|||
}, |
|||
getIntelligentMessage(){ |
|||
this.setData({ |
|||
loadMoreVisible: true, |
|||
nodata: false, |
|||
loadMoreType: "more", |
|||
}) |
|||
const parm = { |
|||
limit:this.data.pageSize, |
|||
pageNum:this.data.pageNo |
|||
} |
|||
if(!parm.type) delete parm.type |
|||
message(parm).then(res=>{ |
|||
this.setData({ |
|||
loadMoreType: res.data.records.length === this.data.pageSize ? 'more' : 'none', |
|||
tableData: this.data.tableData.concat(res.data.records), |
|||
}) |
|||
if (this.data.tableData.length == 0) { |
|||
this.setData({ |
|||
loadMoreVisible: false, |
|||
nodata: true |
|||
}) |
|||
} |
|||
}).catch(err=>{ |
|||
console.log(err); |
|||
this.setData({ |
|||
loadMoreVisible: false, |
|||
nodata: true, |
|||
}) |
|||
}) |
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom() { |
|||
|
|||
|
|||
handelClickClear(){ |
|||
clearMessage().then(res=>{ |
|||
this.setData({ |
|||
tableData:[], |
|||
pageNo:1 |
|||
}) |
|||
this.getIntelligentMessage() |
|||
}).catch(err=>{ |
|||
console.log(err); |
|||
}) |
|||
}, |
|||
}) |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage() { |
|||
|
|||
} |
|||
}) |
|||
@ -1,3 +1,10 @@ |
|||
{ |
|||
"usingComponents": {} |
|||
"usingComponents": { |
|||
"load-more": "/components/loadMore/loadMore", |
|||
"van-empty": "@vant/weapp/empty/index" |
|||
}, |
|||
"navigationBarTitleText": "消息", |
|||
"enablePullDownRefresh": true, |
|||
"backgroundColor": "#f8f8f8", |
|||
"backgroundTextStyle": "dark" |
|||
} |
|||
@ -1,2 +1,25 @@ |
|||
<!--pages/message/message.wxml--> |
|||
<text>pages/message/message.wxml</text> |
|||
<view class="content"> |
|||
<scroll-view class="scroll" scroll-y="{{true}}" lower-threshold="{{ lowerThreshold }}" bindscrolltolower="onScrollToLower"> |
|||
<view class="box"> |
|||
<view class="card" wx:for="{{tableData}}" wx:key="index" data-item="{{item}}" data-index="{{index}}"> |
|||
<view class="left"> |
|||
<image src="/images/icon/notice.png" class="icon-56" mode="" /> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="top"><text class="title">{{item.title}}</text> |
|||
<text class="{{item.readFlag != '1'?'':'gray'}}" style="font-size: 26rpx; font-weight: 300;">{{item.createTime}}</text> |
|||
</view> |
|||
<view class="bottom"> |
|||
<view class=" ellipsis-2"> |
|||
{{item.content}} |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<load-more loadVisible="{{loadMoreVisible}}" loadType="{{loadMoreType}}"></load-more> |
|||
<van-empty description="描述文字" wx:if="{{nodata}}" /> |
|||
</scroll-view> |
|||
</view> |
|||
<custom-tab-bar></custom-tab-bar> |
|||
@ -1 +1,153 @@ |
|||
/* pages/message/message.wxss */ |
|||
page { |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
overflow: hidden; |
|||
background-color: #f7f7f7; |
|||
} |
|||
|
|||
.select{ |
|||
width: 100%; |
|||
height: 90rpx; |
|||
background-color: #fff; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
box-sizing: border-box; |
|||
padding: 0 40rpx; |
|||
align-items: center; |
|||
} |
|||
.select view { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 30rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #3A80E7; |
|||
} |
|||
.select view image{ |
|||
width: 16rpx; |
|||
height: 16rpx; |
|||
margin: 0 9rpx; |
|||
} |
|||
.select .delete { |
|||
font-size: 28rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #999999; |
|||
} |
|||
.select .delete image{ |
|||
width: 30rpx; |
|||
height: 30rpx; |
|||
} |
|||
.content{ |
|||
width: 100%; |
|||
padding:0 20rpx ; |
|||
margin-top: 20rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
.content .scroll { |
|||
height: calc(100vh - 130rpx); |
|||
} |
|||
|
|||
.content .scroll .box{ |
|||
border-radius: 20rpx; |
|||
overflow-y: auto; |
|||
} |
|||
.content .card{ |
|||
width: 100%; |
|||
background-color: #fff; |
|||
display: flex; |
|||
padding: 20rpx 30rpx; |
|||
box-sizing: border-box; |
|||
overflow: hidden; |
|||
position: relative; |
|||
} |
|||
|
|||
.content .card::before{ |
|||
content: ""; |
|||
position: absolute; |
|||
left: 30rpx; /* 调整间距 */ |
|||
right: 30rpx; /* 调整间距 */ |
|||
bottom: 0; |
|||
border-bottom: 2rpx solid #EAEAEA; |
|||
} |
|||
|
|||
.blue{ |
|||
color:#5693EE; |
|||
} |
|||
.yellow{ |
|||
color:#E2944D; |
|||
} |
|||
.cyan{ |
|||
color: #2EB4F2 ; |
|||
} |
|||
.cyanBg{ |
|||
background: rgba(56,189,253,0.1); |
|||
} |
|||
.yellowBg{ |
|||
background: rgba(248,188,122,0.1); |
|||
} |
|||
.blueBg{ |
|||
background: rgba(86,147,238,0.1); |
|||
} |
|||
.gray{ |
|||
color: #999999 !important; |
|||
} |
|||
|
|||
.content .card .right{ |
|||
flex: 1; |
|||
overflow: hidden; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
overflow: hidden; |
|||
|
|||
} |
|||
.content .card .right .top{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.content .card .right .title{ |
|||
font-size: 32rpx; |
|||
font-weight: 300; |
|||
overflow: hidden; |
|||
font-weight: 600; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
width: calc(100% - 250rpx); |
|||
} |
|||
|
|||
|
|||
.content .card .right .bottom{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
font-size: 28rpx; |
|||
font-family: PingFang SC; |
|||
color: #999999; |
|||
} |
|||
.textOver{ |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
max-width: 250rpx; |
|||
font-weight: 300; |
|||
} |
|||
.content .card .right .bottom .flex_box{ |
|||
display: flex; |
|||
justify-content: left; |
|||
} |
|||
.left{ |
|||
margin-right: 28rpx; |
|||
} |
|||
.bgBule{ |
|||
background-color: #dfebfb; |
|||
border: 1px solid #3A80E7; |
|||
border-radius: 32rpx; |
|||
padding:10rpx 20rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
.bgBule image{ |
|||
margin-left: 50rpx !important; |
|||
} |
|||
|
|||
Loading…
Reference in new issue