mirror of
http://36.133.248.69:3088/admin/RentWeAppFront.git
synced 2026-03-08 01:42:28 +08:00
完成大体功能和样式
This commit is contained in:
168
pages-biz/message/message.vue
Normal file
168
pages-biz/message/message.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<view class="message-page">
|
||||
|
||||
<!-- 顶部导航栏 -->
|
||||
<u-navbar title="消息中心" bg-color="#fff" title-color="#111" :border-bottom="true" @leftClick="goBack">
|
||||
<view slot="left">
|
||||
<u-icon name="arrow-left" size="44" color="#111"></u-icon>
|
||||
</view>
|
||||
</u-navbar>
|
||||
|
||||
<!-- 消息列表 -->
|
||||
<scroll-view scroll-y class="message-list" @scrolltolower="loadMore" @refresherrefresh="refresh"
|
||||
:refresher-enabled="true" :refresher-triggered="isRefreshing">
|
||||
<view v-for="(msg,index) in flowList" :key="index" class="msg-item u-flex u-row-between" @click="viewMessage(msg)">
|
||||
<view class="u-flex">
|
||||
<image :src="staticHost + '/public' + msg.icon"></image>
|
||||
<view class="msg-content u-m-l-20">
|
||||
<view class="msg-title u-font-16">{{ msg.title }}</view>
|
||||
<view class="msg-desc u-tips-color u-font-12 u-line-2">{{ msg.desc }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="msg-right u-text-right">
|
||||
<view class="msg-time u-font-12 u-tips-color">{{ msg.time }}</view>
|
||||
<view v-if="!msg.read" class="unread-dot"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-loadmore :status="loadStatus" :loading-text="'加载中...'" :nomore-text="'没有更多消息了'"></u-loadmore>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
flowList: [],
|
||||
pageNo:1,
|
||||
pageSize:10,
|
||||
isRefreshing: false,
|
||||
loadStatus: 'loadmore'
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.$checkToken(this.$getToken())
|
||||
},
|
||||
onload(){
|
||||
this.loadMore();
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack();
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url:'/pages/index/index'
|
||||
})
|
||||
}
|
||||
},
|
||||
getIconUrl(type) {
|
||||
if(type === 'BILL') {
|
||||
return this.$config.staticUrl + '/static/icon/msg-1.png'
|
||||
}
|
||||
if(type === 'SIGN') {
|
||||
return this.$config.baseUrl + '/static/icon/msg-2.png'
|
||||
}
|
||||
},
|
||||
fetchMessageList(){
|
||||
if (this.loadStatus !== 'loadmore') return;
|
||||
this.loadStatus = 'loading';
|
||||
let url = '/message/queryPage'
|
||||
this.$u.post(url, {
|
||||
pageNo: this.pageNo,
|
||||
pageSize: this.pageSize
|
||||
}, {
|
||||
WT: this.$getToken()
|
||||
}).then(res => {
|
||||
const rows = res.data.result || [];
|
||||
console.log(rows)
|
||||
if (this.pageNo === 1) this.flowList = [];
|
||||
this.flowList = this.flowList.concat(rows);
|
||||
if (rows.length < this.pageSize) {
|
||||
this.loadStatus = 'nomore';
|
||||
} else {
|
||||
this.pageNo++;
|
||||
this.loadStatus = 'loadmore';
|
||||
}
|
||||
}).catch(err => {
|
||||
console.log("获取消息列表失败：", err)
|
||||
this.loadStatus = 'loadmore';
|
||||
})
|
||||
},
|
||||
loadMore() {
|
||||
// 只有在 loadStatus 为 'loadmore' 时才触发
|
||||
if (this.loadStatus !== 'loadmore') return;
|
||||
this.fetchMessageList()
|
||||
},
|
||||
viewMessage(msg) {
|
||||
this.$u.route({url:'/pages-biz/message/messageDetail',params:{
|
||||
id: msg.id,
|
||||
read: msg.read
|
||||
}});
|
||||
},
|
||||
refresh() {
|
||||
this.isRefreshing = true;
|
||||
setTimeout(() => {
|
||||
this.isRefreshing = false;
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.message-page {
|
||||
background-color: #ffffff;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.message-list {
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.msg-item {
|
||||
padding: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #E6E6E6;
|
||||
|
||||
image{
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.msg-content {
|
||||
width: 500rpx;
|
||||
}
|
||||
|
||||
.msg-title {
|
||||
font-weight: bold;
|
||||
color: #111;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.msg-right {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.msg-time{
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.unread-dot {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
background-color: #ff4d4f;
|
||||
border-radius: 50%;
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
</style>
|
||||
73
pages-biz/message/messageDetail.vue
Normal file
73
pages-biz/message/messageDetail.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<view class="msg-detail-page">
|
||||
<u-navbar title="消息详情" bg-color="#fff" title-color="#111" :border-bottom="true" @leftClick="goBack">
|
||||
<view slot="left">
|
||||
<u-icon name="arrow-left" size="44" color="#111"></u-icon>
|
||||
</view>
|
||||
</u-navbar>
|
||||
|
||||
<view class="msg-detail u-p-40">
|
||||
<view class="msg-title u-font-20 u-m-b-20">{{ title }}</view>
|
||||
<view class="msg-desc u-font-14 u-tips-color">{{ desc }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id:null,
|
||||
title: '',
|
||||
desc: ''
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.$checkToken(this.$getToken())
|
||||
},
|
||||
onLoad(e) {
|
||||
this.id = e.id
|
||||
this.getDetail()
|
||||
},
|
||||
methods: {
|
||||
getDetail(){
|
||||
this.$u.get(`/message/detail?id=${this.id}`,{},{
|
||||
WT: this.$getToken()
|
||||
}).then(res=>{
|
||||
if(res.flag) {
|
||||
this.title = res.data.title;
|
||||
this.desc = res.data.messageContent;
|
||||
}
|
||||
})
|
||||
},
|
||||
read(){
|
||||
this.$u.get(`/message/read?id=${this.id}`,{},{
|
||||
WT: this.$getToken()
|
||||
})
|
||||
},
|
||||
goBack() {
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack();
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url:'/pages/index/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.msg-detail-page {
|
||||
background: #fff;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.msg-detail {
|
||||
line-height: 1.8;
|
||||
}
|
||||
.msg-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user