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>
|
||||
|
||||
Reference in New Issue
Block a user