feat(mine): 添加通知公告功能并优化个人中心入口
- 新增通知公告详情页面和列表页面 - 更新个人中心网格布局，修复公告入口链接 - 添加充值记录功能 - 优化登录逻辑，暂时注释掉实际登录操作
This commit is contained in:
parent
51834358a4
commit
fd4cca8fe5
30
pages.json
30
pages.json
|
|
@ -47,6 +47,18 @@
|
|||
"navigationBarTitleText": "个人信息"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/announcement/aDetails",
|
||||
"style": {
|
||||
"navigationBarTitleText": "通知公告"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/announcement/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "通知公告详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/me/basicInfo",
|
||||
"style": {
|
||||
|
|
@ -143,17 +155,23 @@
|
|||
"navigationBarTitleText": "个人二维码"
|
||||
}
|
||||
},
|
||||
// {
|
||||
// "path": "pages/weeklyMenu/index",
|
||||
// "style": {
|
||||
// "navigationBarTitleText": "一周菜谱"
|
||||
// }
|
||||
// },
|
||||
{
|
||||
"path": "pages/weeklyMenu/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "一周菜谱"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/advanceOrder/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "预订单"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/remainingSum/rechargeRecord",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"tabBar": {
|
||||
|
|
|
|||
|
|
@ -117,23 +117,24 @@ export default {
|
|||
// } else if (this.loginForm.code === "" && this.captchaEnabled) {
|
||||
// this.$modal.msgError("请输入验证码")
|
||||
} else {
|
||||
this.$modal.loading('登录中，请耐心等待...')
|
||||
// this.$modal.loading('登录中，请耐心等待...')
|
||||
this.pwdLogin()
|
||||
}
|
||||
},
|
||||
// 密码登录
|
||||
async pwdLogin() {
|
||||
this.$store
|
||||
.dispatch('Login', this.loginForm)
|
||||
.then(() => {
|
||||
this.$modal.closeLoading() // 关闭加载框
|
||||
this.loginSuccess()
|
||||
})
|
||||
.catch(() => {
|
||||
// if (this.captchaEnabled) {
|
||||
// this.getCode()
|
||||
// }
|
||||
})
|
||||
// this.$store
|
||||
// .dispatch('Login', this.loginForm)
|
||||
// .then(() => {
|
||||
// this.$modal.closeLoading() // 关闭加载框
|
||||
// this.loginSuccess()
|
||||
// })
|
||||
// .catch(() => {
|
||||
// // if (this.captchaEnabled) {
|
||||
// // this.getCode()
|
||||
// // }
|
||||
// })
|
||||
this.$tab.reLaunch('/pages/system')
|
||||
},
|
||||
// 登录成功后，处理函数
|
||||
loginSuccess(result) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<view class="notice-detail">
|
||||
<!-- 标题区域 -->
|
||||
<view class="notice-title">
|
||||
<text class="title">{{ noticeData.title }}</text>
|
||||
<text class="time">{{ noticeData.time }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<view class="notice-content">
|
||||
<u-read-more>
|
||||
<rich-text :nodes="noticeData.content"></rich-text>
|
||||
</u-read-more>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UReadMore from '../../../uni_modules/uview-ui/components/u-read-more/u-read-more.vue'
|
||||
|
||||
export default {
|
||||
name: 'NoticeDetail',
|
||||
components: { UReadMore },
|
||||
data() {
|
||||
return {
|
||||
noticeData: {
|
||||
title: '',
|
||||
time: '',
|
||||
content: '',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchNoticeDetail() {
|
||||
// 假设接口返回的数据如下
|
||||
const apiResponse = {
|
||||
title: '"皖送e餐"弱口令问题整改工作',
|
||||
time: '2024-12-26 01:46:44',
|
||||
content:
|
||||
'接受公司通知，"皖送e餐"APP需针对弱口令问题开展整改工作，更新计划于11月13日13时整实施。届时，初始密码将由888888修改为Bd@19901，需要注意的是，即使用户此前已自行修改过初始密码且于系统判定机制的限制，这部分用户的密码也会被重置。同时，本次更新还新增了记住密码功能，若未出现"记住密码"功能的情况，建议下载APP(此方法速度最快)。',
|
||||
};
|
||||
|
||||
this.noticeData = apiResponse;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fetchNoticeDetail();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.notice-detail {
|
||||
padding: 16px;
|
||||
background-color: #fff;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.notice-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.notice-content {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
<template>
|
||||
<view class="message-page">
|
||||
<!-- 搜索框 -->
|
||||
<u-search
|
||||
v-model="searchText"
|
||||
placeholder="输入搜索关键词"
|
||||
:show-action="false"
|
||||
:clearabled="true"
|
||||
shape="round"
|
||||
bg-color="#f5f5f5"
|
||||
></u-search>
|
||||
|
||||
<!-- 标签页 -->
|
||||
<div style="margin-top: 4%;">
|
||||
<Tabs :tabList="tabList" @changeTab="handleTabChange" />
|
||||
</div>
|
||||
|
||||
<!-- 消息列表 -->
|
||||
<view class="message-list">
|
||||
<view
|
||||
class="message-item"
|
||||
v-for="(item, index) in messageList"
|
||||
:key="index"
|
||||
@click="handleMessageClick(item)"
|
||||
>
|
||||
<!-- 左侧图标 -->
|
||||
<view class="icon-wrapper" :class="item.type">
|
||||
<u-icon
|
||||
:name="item.icon"
|
||||
color="#fff"
|
||||
size="24"
|
||||
></u-icon>
|
||||
</view>
|
||||
|
||||
<!-- 消息内容 -->
|
||||
<view class="content">
|
||||
<view class="title">{{ item.title }}</view>
|
||||
<view class="desc">{{ item.description }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 右侧信息 -->
|
||||
<view class="right-info">
|
||||
<view class="time">{{ item.time }}</view>
|
||||
<view v-if="!item.isRead" class="unread-dot"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UTabs from '../../../uni_modules/uview-ui/components/u-tabs/u-tabs.vue'
|
||||
import Tabs from '../../components/Tabs.vue'
|
||||
import UIcon from '../../../uni_modules/uview-ui/components/u-icon/u-icon.vue'
|
||||
|
||||
export default {
|
||||
name: 'index',
|
||||
components: { UIcon, Tabs, UTabs },
|
||||
data() {
|
||||
return {
|
||||
searchText: '',
|
||||
currentTab: 0,
|
||||
tabList: ['全部', '已查看', '未查看'],
|
||||
messageList: [
|
||||
{
|
||||
type: 'upgrade',
|
||||
icon: 'arrow-upward',
|
||||
title: '升级通知',
|
||||
description: '系统维护将于明天下午4点进行，期间可能无法正常使用...',
|
||||
time: '10分钟前',
|
||||
isRead: false
|
||||
},
|
||||
{
|
||||
type: 'upgrade',
|
||||
icon: 'arrow-upward',
|
||||
title: '升级通知',
|
||||
description: '系统维护将于明天下午4点进行，期间可能无法正常使用...',
|
||||
time: '1小时前',
|
||||
isRead: false
|
||||
},
|
||||
{
|
||||
type: 'read',
|
||||
icon: 'warning',
|
||||
title: '故障通知',
|
||||
description: '系统维护将于明天下午4点进行，期间可能无法正常使用...',
|
||||
time: '2024/10/8',
|
||||
isRead: true
|
||||
},
|
||||
{
|
||||
type: 'read',
|
||||
icon: 'arrow-upward',
|
||||
title: '升级通知',
|
||||
description: '系统维护将于明天下午4点进行，期间可能无法正常使用...',
|
||||
time: '2024/10/8',
|
||||
isRead: true
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTabChange(index) {
|
||||
console.log('🚀 ~ changeTab ~ index:', index)
|
||||
this.currentTab = index
|
||||
},
|
||||
|
||||
handleMessageClick(item) {
|
||||
console.log('🚀 ~ handleMessageClick ~ ', item)
|
||||
uni.navigateTo({
|
||||
url: '/pages/mine/announcement/aDetails'
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
.message-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.message-list {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
background-color: #ffffff;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.upgrade {
|
||||
background-color: #2ed573;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background-color: #ff7f50;
|
||||
}
|
||||
|
||||
.read {
|
||||
background-color: #b5bec9;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.right-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.unread-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #ff0000;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
</view>
|
||||
|
||||
<!-- 通知公告 -->
|
||||
<view class="grid-item" @click="navigateTo('/pages/mine/me/index')">
|
||||
<view class="grid-item" @click="navigateTo('/pages/mine/announcement/index')">
|
||||
<view class="icon-wrapper">
|
||||
<!-- <uni-icons type="notification" size="24" color="#666"></uni-icons>-->
|
||||
<image style="width: 28px;height: 28px;" src="/static/images/my/notice.png"></image>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
<div class="up">快捷充值</div>
|
||||
<div class="box">
|
||||
<div class="box-item" :class="{ active: active == 1 }" @click="handleRecharge(1)">
|
||||
<div class="box-item" :class= "{ active: active == 1 }" @click="handleRecharge(1)">
|
||||
<span>￥</span>
|
||||
<span>50.00</span>
|
||||
<u-icon v-if="active == 1" class="icon" name="../../static/images/active.png" size="12" />
|
||||
|
|
@ -67,7 +67,6 @@ import { getAccountBalance } from '@/api/dining-hall'
|
|||
import uIcon from '../../uni_modules/uview-ui/components/u-icon/u-icon.vue'
|
||||
|
||||
export default {
|
||||
components: { uIcon },
|
||||
data() {
|
||||
return {
|
||||
// 余额
|
||||
|
|
@ -91,9 +90,9 @@ export default {
|
|||
methods: {
|
||||
handleRightText() {
|
||||
console.log('🚀 ~ handleRightText ~ ')
|
||||
// uni.navigateTo({
|
||||
// url: ''
|
||||
// })
|
||||
uni.navigateTo({
|
||||
url: '/pages/remainingSum/rechargeRecord'
|
||||
})
|
||||
},
|
||||
// 获取余额
|
||||
async getBalance() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,301 @@
|
|||
<template>
|
||||
<view>
|
||||
<Navbar
|
||||
title="充值记录"
|
||||
:goTo="paths.remainingSum"
|
||||
:showRightText="true"
|
||||
:isBack="false"
|
||||
:text="'充值日期'"
|
||||
@clickIcon="handleRightText"
|
||||
/>
|
||||
<u-datetime-picker
|
||||
:show="show5"
|
||||
v-model="value5"
|
||||
title="选择日期"
|
||||
:filter="filter"
|
||||
mode="date"
|
||||
:formatter="formatter"
|
||||
closeOnClickOverlay
|
||||
@confirm="confirm"
|
||||
@cancel="cancel"
|
||||
@change="change"
|
||||
@close="close"
|
||||
></u-datetime-picker>
|
||||
<div class="recharge-history">
|
||||
<!-- 顶部标签导航 -->
|
||||
<div class="tab-navigation">
|
||||
<!-- <div-->
|
||||
<!-- v-for="tab in tabs"-->
|
||||
<!-- :key="tab.id"-->
|
||||
<!-- :class="['tab', { 'active': activeTab === tab.id }]"-->
|
||||
<!-- @click="setActiveTab(tab.id)"-->
|
||||
<!-- >-->
|
||||
<!-- {{ tab.name }}-->
|
||||
<!-- </div>-->
|
||||
<Tabs :tabList="tabList" @changeTab="changeTab" />
|
||||
</div>
|
||||
|
||||
<!-- 充值记录列表 -->
|
||||
<div class="record-list">
|
||||
<div
|
||||
v-for="(record, index) in rechargeRecords"
|
||||
:key="index"
|
||||
class="record-item"
|
||||
>
|
||||
<!-- 左侧图标 -->
|
||||
<u-icon
|
||||
:name="getIconClass(record.type)"
|
||||
size="42"
|
||||
></u-icon>
|
||||
|
||||
<!-- 中间充值详情 -->
|
||||
<div class="record-details">
|
||||
<div class="status">{{ record.status }}</div>
|
||||
<div class="time">{{ record.time }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧金额信息 -->
|
||||
<div class="amount-info">
|
||||
<div class="amount">¥{{ record.amount }}</div>
|
||||
<div class="balance">余额: {{ record.balance }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Tabs from '@/pages/components/Tabs.vue'
|
||||
import UIcon from '../../uni_modules/uview-ui/components/u-icon/u-icon.vue'
|
||||
|
||||
export default {
|
||||
name: 'rechargeRecord',
|
||||
components: { UIcon, Tabs },
|
||||
data() {
|
||||
return {
|
||||
paths: {
|
||||
remainingSum: '/pages/remainingSum/index'
|
||||
},
|
||||
current: 0,
|
||||
show5: false,
|
||||
value5: Number(new Date()),
|
||||
activeTab: 'all',
|
||||
tabs: [
|
||||
{ id: 'all', name: '全部' },
|
||||
{ id: 'success', name: '充值成功' },
|
||||
{ id: 'failed', name: '充值失败' },
|
||||
{ id: 'timeout', name: '充值超时' }
|
||||
],
|
||||
tabList: ['全部', '充值成功', '充值失败', '充值失败'],
|
||||
rechargeRecords: [
|
||||
{
|
||||
type: 'default',
|
||||
status: '充值成功',
|
||||
time: '2024-12-31 15:50:12',
|
||||
amount: '50.00',
|
||||
balance: '51.03'
|
||||
},
|
||||
{
|
||||
type: 'default',
|
||||
status: '充值成功',
|
||||
time: '2024-12-31 15:50:12',
|
||||
amount: '50.00',
|
||||
balance: '51.03'
|
||||
},
|
||||
{
|
||||
type: 'default',
|
||||
status: '充值成功',
|
||||
time: '2024-12-31 15:50:12',
|
||||
amount: '50.00',
|
||||
balance: '51.03'
|
||||
},
|
||||
{
|
||||
type: 'default',
|
||||
status: '充值成功',
|
||||
time: '2024-12-31 15:50:12',
|
||||
amount: '50.00',
|
||||
balance: '51.03'
|
||||
},
|
||||
{
|
||||
type: 'wechat',
|
||||
status: '充值成功',
|
||||
time: '2024-12-31 15:50:12',
|
||||
amount: '50.00',
|
||||
balance: '51.03'
|
||||
},
|
||||
{
|
||||
type: 'wallet',
|
||||
status: '充值成功',
|
||||
time: '2024-12-31 15:50:12',
|
||||
amount: '50.00',
|
||||
balance: '51.03'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeTab(index) {
|
||||
console.log('🚀 ~ changeTab ~ index:', index)
|
||||
this.tabIndex = index
|
||||
},
|
||||
filter(type, options) {
|
||||
if (type === 'year') {
|
||||
return options.filter((option) => option % 2 === 0)
|
||||
}
|
||||
|
||||
return options
|
||||
},
|
||||
confirm(e) {
|
||||
this[`show${this.current}`] = false
|
||||
this.result(e.value, e.mode)
|
||||
},
|
||||
cancel() {
|
||||
this[`show${this.current}`] = false
|
||||
},
|
||||
change(e) {
|
||||
console.log('change', e)
|
||||
},
|
||||
close() {
|
||||
this[`show${this.current}`] = false
|
||||
},
|
||||
formatter(type, value) {
|
||||
if (type === 'year') {
|
||||
return `${value}年`
|
||||
}
|
||||
if (type === 'month') {
|
||||
return `${value}月`
|
||||
}
|
||||
if (type === 'day') {
|
||||
return `${value}日`
|
||||
}
|
||||
return value
|
||||
},
|
||||
handleRightText() {
|
||||
console.log('🚀 ~ handleRightText ~ ')
|
||||
this.current = 5
|
||||
this.show5 = true
|
||||
},
|
||||
setActiveTab(tabId) {
|
||||
this.activeTab = tabId
|
||||
},
|
||||
getIconClass(type) {
|
||||
switch (type) {
|
||||
case 'wechat':
|
||||
return require('../../static/images/successful.png')
|
||||
case 'wallet':
|
||||
return require('../../static/images/lose.png')
|
||||
default:
|
||||
return require('../../static/images/delay.png')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.recharge-history {
|
||||
background: #fff;
|
||||
//background-color: #f3f4f6;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.tab-navigation {
|
||||
display: flex;
|
||||
background-color: white;
|
||||
padding: 15px 16px 0 16px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 12px 16px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.tab.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #f97316;
|
||||
}
|
||||
|
||||
.record-list {
|
||||
//padding: 0 16px;
|
||||
}
|
||||
|
||||
.record-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
margin-top: 8px;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.inner-circle {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.default-icon {
|
||||
background-color: #3b82f6;
|
||||
}
|
||||
|
||||
.wechat-icon {
|
||||
background-color: #22c55e;
|
||||
}
|
||||
|
||||
.wallet-icon {
|
||||
background-color: #f97316;
|
||||
}
|
||||
|
||||
.record-details {
|
||||
flex: 1;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.amount-info {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.amount {
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.balance {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Loading…
Reference in New Issue