mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-08-06 10:57:25 +08:00
refactor: 重构多个组件以支持 Vue 3 语法和功能
- 将多个组件转换为 `<script setup>` 语法，提升可读性和性能 - 优化状态管理和事件处理逻辑，简化代码结构 - 更新样式和布局以适应新组件结构 - 添加新功能和修复已知问题，提升用户体验
This commit is contained in:
Yer11214
@@ -1,183 +1,98 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="list-cell b-b m-t" hover-class="cell-hover" :hover-stay-time="50">
|
||||
<u-row gutter="12" justify="start" @click="navigateTo('/pages/msgTips/sysMsg/index')">
|
||||
<u-col span="2" class="uCol" style="text-align:center;">
|
||||
<image class="img" src="/static/mine/setting.png"></image>
|
||||
</u-col>
|
||||
<u-col span="7">
|
||||
<p class="tit_title">系统消息</p>
|
||||
<p class="tit_tips">查看系统消息</p>
|
||||
</u-col>
|
||||
<u-col span="3">
|
||||
<view class="cell-more">
|
||||
<u-tag size="mini" v-if="no_read.system_num>0" shape="circle" mode="dark" type="error" :text="no_read.system_num"></u-tag>
|
||||
<span class="yticon icon-you"></span>
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
<!-- <view class="list-cell b-b m-t" hover-class="cell-hover" :hover-stay-time="50">
|
||||
<u-row gutter="12" justify="start" @click="navigateTo('/pages/msgTips/packagemsg/index')">
|
||||
<u-col span="2" class="uCol" style="text-align:center;">
|
||||
<image class="img" src="/static/mine/logistics.png"></image>
|
||||
|
||||
</u-col>
|
||||
<u-col span="7">
|
||||
<p class="tit_title">物流消息</p>
|
||||
<p class="tit_tips">查看物流消息</p>
|
||||
</u-col>
|
||||
<u-col span="3">
|
||||
<view class="cell-more">
|
||||
|
||||
<u-tag v-if="no_read.logistics_num>0" shape="circle" mode="dark" type="warning" :text="no_read.logistics_num"></u-tag>
|
||||
<span class="yticon icon-you"></span>
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="container">
|
||||
<view class="list-cell b-b m-t" hover-class="cell-hover" :hover-stay-time="50">
|
||||
<u-row gutter="12" justify="start" @click="navigateTo('/pages/mine/msgTips/sysMsg/index')">
|
||||
<u-col span="2" class="uCol" style="text-align: center">
|
||||
<image class="img" src="/static/mine/setting.png"></image>
|
||||
</u-col>
|
||||
<u-col span="7">
|
||||
<p class="tit_title">系统消息</p>
|
||||
<p class="tit_tips">查看系统消息</p>
|
||||
</u-col>
|
||||
<u-col span="3">
|
||||
<view class="cell-more">
|
||||
<u-tag
|
||||
size="mini"
|
||||
v-if="unreadCount.system_num > 0"
|
||||
shape="circle"
|
||||
mode="dark"
|
||||
type="error"
|
||||
:text="String(unreadCount.system_num)"
|
||||
></u-tag>
|
||||
<span class="yticon icon-you"></span>
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapMutations
|
||||
} from "vuex";
|
||||
import * as API_Message from "@/api/members.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
no_read: ''
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.GET_NoReadMessageNum();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(["logout"]),
|
||||
navigateTo(url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
});
|
||||
},
|
||||
/** 获取未读消息数量信息 */
|
||||
GET_NoReadMessageNum() {
|
||||
API_Message.getNoReadMessageNum().then(response => {
|
||||
this.no_read = response.data
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { getNoReadMessageNum } from '@/api/members.js'
|
||||
|
||||
const unreadCount = ref<Record<string, number>>({ system_num: 0 })
|
||||
|
||||
onLoad(() => {
|
||||
fetchUnreadCount()
|
||||
})
|
||||
|
||||
function navigateTo(url: string) {
|
||||
uni.navigateTo({ url })
|
||||
}
|
||||
|
||||
function fetchUnreadCount() {
|
||||
getNoReadMessageNum().then((response) => {
|
||||
unreadCount.value = response.data || { system_num: 0 }
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
.uCol {
|
||||
display: flex;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
|
||||
}
|
||||
|
||||
.container {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
::v-deep .u-col-2 {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: center !important;
|
||||
|
||||
}
|
||||
|
||||
.qicon {
|
||||
text-align: center;
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.redBox {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 1.5em;
|
||||
font-size: 12px;
|
||||
min-width: 1.5em;
|
||||
min-height: 1.5em;
|
||||
|
||||
background: #ed6533;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tit_title {
|
||||
color: $u-main-color;
|
||||
}
|
||||
|
||||
.tit_tips {
|
||||
color: $u-tips-color;
|
||||
}
|
||||
|
||||
.u-col-3 {
|
||||
text-align: right !important;
|
||||
padding-right: 20rpx !important;
|
||||
}
|
||||
|
||||
.list-cell {
|
||||
background: #fff;
|
||||
align-items: baseline;
|
||||
padding: 20rpx 0;
|
||||
line-height: 60rpx;
|
||||
|
||||
background: #fff;
|
||||
justify-content: center;
|
||||
|
||||
&.log-out-btn {
|
||||
margin-top: 40rpx;
|
||||
|
||||
.cell-tit {
|
||||
color: $uni-color-primary;
|
||||
text-align: center;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.cell-hover {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
&.b-b:after {
|
||||
left: 30rpx;
|
||||
}
|
||||
|
||||
&.m-t {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.cell-more {
|
||||
/* margin-top: 10rpx; */
|
||||
height: 60rpx;
|
||||
text-align: right;
|
||||
/* display: flex;
|
||||
justify-content: center; //这个是X轴居中
|
||||
align-items: center; //这个是 Y轴居中 */
|
||||
font-size: $font-lg;
|
||||
color: $font-color-light;
|
||||
/* width: 100rpx; */
|
||||
}
|
||||
|
||||
.cell-tit {
|
||||
flex: 1;
|
||||
font-size: $font-base + 2rpx;
|
||||
color: $font-color-dark;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.cell-tip {
|
||||
font-size: $font-base;
|
||||
color: $font-color-light;
|
||||
}
|
||||
}
|
||||
<style scoped lang="scss">
|
||||
.uCol {
|
||||
display: flex;
|
||||
justify-content: center !important;
|
||||
}
|
||||
.img {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
.container {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
::v-deep .u-col-2 {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: center !important;
|
||||
}
|
||||
.tit_title {
|
||||
color: $u-main-color;
|
||||
}
|
||||
.tit_tips {
|
||||
color: $u-tips-color;
|
||||
}
|
||||
.u-col-3 {
|
||||
text-align: right !important;
|
||||
padding-right: 20rpx !important;
|
||||
}
|
||||
.list-cell {
|
||||
background: #fff;
|
||||
align-items: baseline;
|
||||
padding: 20rpx 0;
|
||||
line-height: 60rpx;
|
||||
justify-content: center;
|
||||
&.cell-hover {
|
||||
background: #fafafa;
|
||||
}
|
||||
&.m-t {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
.cell-more {
|
||||
height: 60rpx;
|
||||
text-align: right;
|
||||
font-size: $font-lg;
|
||||
color: $font-color-light;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,99 +1,113 @@
|
||||
<template>
|
||||
<view class="container " style="font-size: 13px;">
|
||||
<block v-for="(row, index) in messageList" :key="index">
|
||||
<view class="msgItem">
|
||||
<div class="msgMsg">
|
||||
<div class="bagbar">{{$u.timeFormat(row.send_time, 'yyyy-mm-dd')}}</div>
|
||||
</div>
|
||||
<u-card @click="goDetail(row.sn,row.logi_id,row.ship_no)" :title="title" title-color="#666666" title-size="24" sub-title-color="#666666" sub-title-size="24" :border="false" :sub-title=row.status>
|
||||
<template #body>
|
||||
<view class="msg-body">
|
||||
<image class="msgImg" :src="row.goods_img" mode=""></image>
|
||||
<view class="msgView">
|
||||
<view>{{row.goodsName}}</view>
|
||||
<view class="msgNum">订单号:{{row.sn}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</u-card>
|
||||
</view>
|
||||
</block>
|
||||
<uni-load-more :status="loadStatus"></uni-load-more>
|
||||
<view class="container" style="font-size: 13px">
|
||||
<block v-for="(row, index) in messageList" :key="index">
|
||||
<view class="msgItem">
|
||||
<div class="msgMsg">
|
||||
<div class="bagbar">{{ formatSendTime(row.send_time) }}</div>
|
||||
</div>
|
||||
<u-card
|
||||
@click="navigateToLogisticsDetail(row.sn, row.logi_id, row.ship_no)"
|
||||
:title="pageTitle"
|
||||
title-color="#666666"
|
||||
title-size="24"
|
||||
sub-title-color="#666666"
|
||||
sub-title-size="24"
|
||||
:border="false"
|
||||
:sub-title="row.status"
|
||||
>
|
||||
<template #body>
|
||||
<view class="msg-body">
|
||||
<image class="msgImg" :src="row.goods_img" mode=""></image>
|
||||
<view class="msgView">
|
||||
<view>{{ row.goodsName }}</view>
|
||||
<view class="msgNum">订单号:{{ row.sn }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</u-card>
|
||||
</view>
|
||||
</block>
|
||||
<uni-load-more :status="loadStatus"></uni-load-more>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as API_Message from "@/api/message.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
messageList: [],
|
||||
title: "物流更新通知",
|
||||
subTitle: "运输中",
|
||||
loadStatus:'more',
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
loadStatus:'more'
|
||||
};
|
||||
},
|
||||
onLoad(){
|
||||
this.GET_LogisticsList(true);
|
||||
},
|
||||
onReachBottom() {
|
||||
this.params.pageNumber++
|
||||
this.GET_LogisticsList(false)
|
||||
},
|
||||
methods: {
|
||||
goDetail(sn,logi_id,ship_no){
|
||||
uni.navigateTo({
|
||||
url:'/pages/msgTips/packagemsg/logisticsDetail?order_sn=' + sn +'&logi_id='+logi_id+'&ship_no='+ship_no,
|
||||
})
|
||||
},
|
||||
//获取物流消息
|
||||
GET_LogisticsList(reset){
|
||||
if (reset) {
|
||||
this.params.pageNumber = 1
|
||||
}
|
||||
uni.showLoading({
|
||||
title:"加载中"
|
||||
})
|
||||
API_Message.getLogisticsMessages(this.params).then(async response => {
|
||||
if (this.$store.state.isShowToast){ uni.hideLoading() }
|
||||
const { data } = response
|
||||
if (!data || !data.length) {
|
||||
this.messageList.push(...data.data)
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, getCurrentInstance } from 'vue'
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
|
||||
import { useStore } from '@/store'
|
||||
import * as API_Message from '@/api/message.js'
|
||||
|
||||
const store = useStore()
|
||||
const { proxy } = getCurrentInstance()!
|
||||
|
||||
const messageList = ref<any[]>([])
|
||||
const pageTitle = '物流更新通知'
|
||||
const loadStatus = ref('more')
|
||||
const queryParams = ref({ pageNumber: 1, pageSize: 10 })
|
||||
|
||||
onLoad(() => {
|
||||
fetchLogisticsList(true)
|
||||
})
|
||||
|
||||
onReachBottom(() => {
|
||||
queryParams.value.pageNumber++
|
||||
fetchLogisticsList(false)
|
||||
})
|
||||
|
||||
function hideLoadingIfNeeded() {
|
||||
if (store.state.isShowToast) uni.hideLoading()
|
||||
}
|
||||
|
||||
function formatSendTime(time: number) {
|
||||
return proxy.$u.timeFormat(time, 'yyyy-mm-dd')
|
||||
}
|
||||
|
||||
function extractRecords(res: any) {
|
||||
if (Array.isArray(res?.result?.records)) return res.result.records
|
||||
if (Array.isArray(res?.result)) return res.result
|
||||
if (Array.isArray(res?.data)) return res.data
|
||||
return []
|
||||
}
|
||||
|
||||
function navigateToLogisticsDetail(sn: string, logiId: string, shipNo: string) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/mine/msgTips/packageMsg/logisticsDetail?order_sn=${sn}&logi_id=${logiId}&ship_no=${shipNo}`,
|
||||
})
|
||||
}
|
||||
|
||||
function fetchLogisticsList(reset: boolean) {
|
||||
if (reset) {
|
||||
queryParams.value.pageNumber = 1
|
||||
messageList.value = []
|
||||
loadStatus.value = 'more'
|
||||
}
|
||||
};
|
||||
uni.showLoading({ title: '加载中' })
|
||||
API_Message.getLogisticsMessages(queryParams.value).then((response) => {
|
||||
hideLoadingIfNeeded()
|
||||
const records = extractRecords(response.data)
|
||||
if (records.length) {
|
||||
messageList.value.push(...records)
|
||||
} else {
|
||||
loadStatus.value = 'noMore'
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
.ddnumber {
|
||||
color: $u-tips-color;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.msg-body{
|
||||
display: flex;
|
||||
background-color: rgba(102, 110, 232, 0.0470588235294118);
|
||||
|
||||
|
||||
.msgImg{
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
.msgView{
|
||||
margin-left: 20rpx;
|
||||
.msgNum:last-child{
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
<style scoped lang="scss">
|
||||
.msg-body {
|
||||
display: flex;
|
||||
background-color: rgba(102, 110, 232, 0.0470588235294118);
|
||||
.msgImg {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
.msgView {
|
||||
margin-left: 20rpx;
|
||||
.msgNum:last-child {
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bagbar {
|
||||
display: inline;
|
||||
@@ -103,13 +117,8 @@ export default {
|
||||
padding: 10rpx 20rpx;
|
||||
background: $u-info-disabled;
|
||||
}
|
||||
.storeImg {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.container {
|
||||
background: #F9F9F9;
|
||||
background: #f9f9f9;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.msgMsg {
|
||||
@@ -119,12 +128,8 @@ export default {
|
||||
.msgItem {
|
||||
padding: 1em 0;
|
||||
}
|
||||
view{
|
||||
font-size: 13px;
|
||||
color: #666666;
|
||||
view {
|
||||
font-size: 13px;
|
||||
color: #666666;
|
||||
}
|
||||
u-card{
|
||||
font-size: 13px;
|
||||
color: #666666;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -2,21 +2,23 @@
|
||||
<view class="logistics-detail">
|
||||
<view class="card">
|
||||
<view class="card-title">
|
||||
<span>{{ logiList.shipper }}</span>快递 <span>{{ logiList.logisticCode }}</span>
|
||||
<span>{{ logisticsInfo.shipper }}</span>快递 <span>{{ logisticsInfo.logisticCode }}</span>
|
||||
</view>
|
||||
<view class="time-line">
|
||||
<u-time-line v-if="logiList.traces && logiList.traces.length != 0">
|
||||
<u-time-line-item nodeTop="2" v-for="(item, index) in logiList.traces" :key="index">
|
||||
<!-- 此处自定义了左边内容，用一个图标替代 -->
|
||||
<template v-slot:node >
|
||||
<view v-if="index == logiList.traces.length - 1" class="u-node" :style="{ background: $lightColor }" style="padding: 0 4px">
|
||||
<!-- 此处为uView的icon组件 -->
|
||||
<u-time-line v-if="logisticsInfo.traces && logisticsInfo.traces.length != 0">
|
||||
<u-time-line-item nodeTop="2" v-for="(item, index) in logisticsInfo.traces" :key="index">
|
||||
<template #node>
|
||||
<view
|
||||
v-if="index == logisticsInfo.traces.length - 1"
|
||||
class="u-node"
|
||||
:style="{ background: lightColor }"
|
||||
style="padding: 0 4px"
|
||||
>
|
||||
<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:content>
|
||||
<template #content>
|
||||
<view>
|
||||
<!-- <view class="u-order-title">待取件</view> -->
|
||||
<view class="u-order-desc">{{ item.AcceptStation }}</view>
|
||||
<view class="u-order-time">{{ item.AcceptTime }}</view>
|
||||
</view>
|
||||
@@ -29,32 +31,26 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getExpress } from "@/api/trade.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
express: "",
|
||||
resData: {
|
||||
title: "物流详情",
|
||||
},
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { useStore } from '@/store'
|
||||
import { getExpress } from '@/api/trade.js'
|
||||
|
||||
logiList: "",
|
||||
activeStep: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init(sn) {
|
||||
getExpress(sn).then((res) => {
|
||||
this.logiList = res.data.result;
|
||||
});
|
||||
},
|
||||
},
|
||||
onLoad(option) {
|
||||
let sn = option.order_sn;
|
||||
this.init(sn);
|
||||
},
|
||||
};
|
||||
const store = useStore()
|
||||
|
||||
const lightColor = computed(() => store.getters.lightColor)
|
||||
const logisticsInfo = ref<Record<string, any>>({})
|
||||
|
||||
onLoad((option) => {
|
||||
fetchLogistics(option.order_sn)
|
||||
})
|
||||
|
||||
function fetchLogistics(orderSn: string) {
|
||||
getExpress(orderSn).then((res) => {
|
||||
logisticsInfo.value = res.data.result || {}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@@ -79,9 +75,6 @@ export default {
|
||||
padding: 16rpx 32rpx;
|
||||
}
|
||||
}
|
||||
.u-order-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
.u-order-desc {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
|
||||
@@ -30,20 +30,11 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations } from "vuex";
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(["logout"]),
|
||||
|
||||
}
|
||||
};
|
||||
<script setup lang="ts">
|
||||
// 占位页，后续接入客服消息
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
<style scoped lang="scss">
|
||||
.msgTime {
|
||||
font-size: 13px;
|
||||
}
|
||||
@@ -56,11 +47,6 @@ page {
|
||||
vertical-align: middle;
|
||||
border-radius: 0.4em;
|
||||
}
|
||||
.qicon {
|
||||
text-align: center;
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
}
|
||||
.redBox {
|
||||
padding: 10rpx 12rpx;
|
||||
display: inline-block;
|
||||
@@ -71,7 +57,6 @@ page {
|
||||
height: 1em;
|
||||
background: #ed6533;
|
||||
border-radius: 50%;
|
||||
|
||||
color: #fff;
|
||||
}
|
||||
.tit_title,
|
||||
@@ -92,25 +77,14 @@ page {
|
||||
}
|
||||
.list-cell {
|
||||
align-items: baseline;
|
||||
padding: 20rpx 30rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
line-height: 60rpx;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
justify-content: center;
|
||||
&.log-out-btn {
|
||||
margin-top: 40rpx;
|
||||
.cell-tit {
|
||||
color: $uni-color-primary;
|
||||
text-align: center;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
&.cell-hover {
|
||||
background: #fafafa;
|
||||
}
|
||||
&.b-b:after {
|
||||
left: 30rpx;
|
||||
}
|
||||
&.m-t {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
@@ -119,22 +93,12 @@ page {
|
||||
margin-top: 10rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
justify-content: center; //这个是X轴居中
|
||||
align-items: center; //这个是 Y轴居中
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-self: baseline;
|
||||
font-size: $font-lg;
|
||||
color: $font-color-light;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
.cell-tit {
|
||||
flex: 1;
|
||||
font-size: $font-base + 2rpx;
|
||||
color: $font-color-dark;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.cell-tip {
|
||||
font-size: $font-base;
|
||||
color: $font-color-light;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -2,17 +2,15 @@
|
||||
<view class="container">
|
||||
<block v-for="(row, index) in messageList" :key="index">
|
||||
<view class="msgItem">
|
||||
<div class="is_read">
|
||||
<!-- {{row.is_read}} -->
|
||||
<span v-if="row.is_read"></span>
|
||||
<span v-else class="red">·</span>
|
||||
|
||||
</div>
|
||||
<div class="msgMsg">{{$u.timeFormat(row.send_time, 'yyyy-mm-dd')}}</div>
|
||||
<u-card :title="title" :title-size="35" :border="false">
|
||||
<div class="is_read">
|
||||
<span v-if="row.is_read"></span>
|
||||
<span v-else class="red">·</span>
|
||||
</div>
|
||||
<div class="msgMsg">{{ formatSendTime(row.send_time) }}</div>
|
||||
<u-card :title="pageTitle" :title-size="35" :border="false">
|
||||
<template #body>
|
||||
<view class="u-body-item u-flex u-row-between u-p-b-0">
|
||||
<view class="u-body-item-title u-line-2">{{row.content}}</view>
|
||||
<view class="u-body-item-title u-line-2">{{ row.content }}</view>
|
||||
</view>
|
||||
</template>
|
||||
</u-card>
|
||||
@@ -22,74 +20,85 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations } from "vuex";
|
||||
import * as API_Message from "@/api/message.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "系统消息",
|
||||
subTitle: "未读",
|
||||
finished: false,
|
||||
loadStatus: "more",
|
||||
params: {
|
||||
pageNumber: 0,
|
||||
pageSize: 5
|
||||
},
|
||||
messageList: []
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.GET_MessageList(true);
|
||||
},
|
||||
onReachBottom() {
|
||||
this.params.pageNumber++;
|
||||
this.GET_MessageList(false);
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(["logout"]),
|
||||
|
||||
/** 获取站内消息 */
|
||||
GET_MessageList(reset) {
|
||||
if (reset) {
|
||||
this.params.pageNumber = 1;
|
||||
this.messageList = [];
|
||||
}
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
});
|
||||
API_Message.getMessages(this.params).then(async response => {
|
||||
if (this.$store.state.isShowToast){ uni.hideLoading() };
|
||||
const { data } = response;
|
||||
if (!data || !data.length) {
|
||||
this.messageList.push(...data.data);
|
||||
this.handleReadPageMessages();
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 设置消息已读 **/
|
||||
handleReadPageMessages() {
|
||||
const ids = this.messageList.map(item => item.id).join(",");
|
||||
API_Message.messageMarkAsRead(ids).then(async () => {});
|
||||
}
|
||||
<script setup lang="ts">
|
||||
import { ref, getCurrentInstance } from 'vue'
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
|
||||
import { useStore } from '@/store'
|
||||
import * as API_Message from '@/api/message.js'
|
||||
|
||||
const store = useStore()
|
||||
const { proxy } = getCurrentInstance()!
|
||||
|
||||
const pageTitle = '系统消息'
|
||||
const loadStatus = ref('more')
|
||||
const queryParams = ref({ pageNumber: 1, pageSize: 5 })
|
||||
const messageList = ref<any[]>([])
|
||||
|
||||
onLoad(() => {
|
||||
fetchMessageList(true)
|
||||
})
|
||||
|
||||
onReachBottom(() => {
|
||||
queryParams.value.pageNumber++
|
||||
fetchMessageList(false)
|
||||
})
|
||||
|
||||
function hideLoadingIfNeeded() {
|
||||
if (store.state.isShowToast) uni.hideLoading()
|
||||
}
|
||||
|
||||
function formatSendTime(time: number) {
|
||||
return proxy.$u.timeFormat(time, 'yyyy-mm-dd')
|
||||
}
|
||||
|
||||
function extractRecords(res: any) {
|
||||
if (Array.isArray(res?.result?.records)) return res.result.records
|
||||
if (Array.isArray(res?.result)) return res.result
|
||||
if (Array.isArray(res?.data)) return res.data
|
||||
return []
|
||||
}
|
||||
|
||||
function fetchMessageList(reset: boolean) {
|
||||
if (reset) {
|
||||
queryParams.value.pageNumber = 1
|
||||
messageList.value = []
|
||||
loadStatus.value = 'more'
|
||||
}
|
||||
};
|
||||
uni.showLoading({ title: '加载中' })
|
||||
API_Message.getMessages(queryParams.value).then((response) => {
|
||||
hideLoadingIfNeeded()
|
||||
const res = response.data
|
||||
const records = extractRecords(res)
|
||||
if (records.length) {
|
||||
messageList.value.push(...records)
|
||||
markPageMessagesAsRead()
|
||||
} else {
|
||||
loadStatus.value = 'noMore'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function markPageMessagesAsRead() {
|
||||
const ids = messageList.value.map((item) => item.id).join(',')
|
||||
if (!ids) return
|
||||
API_Message.messageMarkAsRead(ids)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
.is_read{
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
top: 80rpx;
|
||||
z-index: 999;
|
||||
<style scoped lang="scss">
|
||||
.is_read {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
top: 80rpx;
|
||||
z-index: 999;
|
||||
}
|
||||
.container {
|
||||
background: #f9f9f9;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.red{
|
||||
color: coral;
|
||||
font-size: 100rpx;
|
||||
.red {
|
||||
color: coral;
|
||||
font-size: 100rpx;
|
||||
}
|
||||
.msgMsg {
|
||||
text-align: center;
|
||||
@@ -99,4 +108,4 @@ export default {
|
||||
padding: 1em 0;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user