feat(mine): 添加通知公告功能并优化个人中心入口

- 新增通知公告详情页面和列表页面
- 更新个人中心网格布局，修复公告入口链接
- 添加充值记录功能
- 优化登录逻辑，暂时注释掉实际登录操作

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",
+       "path": "pages/weeklyMenu/index",
-    //   "style": {
+       "style": {
-    //     "navigationBarTitleText": "一周菜谱"
+         "navigationBarTitleText": "一周菜谱"
-    //   }
+       }
-    // },
+     },
     {
       "path": "pages/advanceOrder/index",
       "style": {
         "navigationBarTitleText": "预订单"
       }
+    },
+    {
+      "path": "pages/remainingSum/rechargeRecord",
+      "style": {
+        "navigationStyle": "custom"
+      }
     }
   ],
   "tabBar": {

pages/login.vue

@@ -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
+      // this.$store
-        .dispatch('Login', this.loginForm)
+      //   .dispatch('Login', this.loginForm)
-        .then(() => {
+      //   .then(() => {
-          this.$modal.closeLoading() // 关闭加载框
+      //     this.$modal.closeLoading() // 关闭加载框
-          this.loginSuccess()
+      //     this.loginSuccess()
-        })
+      //   })
-        .catch(() => {
+      //   .catch(() => {
-          // if (this.captchaEnabled) {
+      //     // if (this.captchaEnabled) {
-          //   this.getCode()
+      //     //   this.getCode()
-          // }
+      //     // }
-        })
+      //   })
+      this.$tab.reLaunch('/pages/system')
     },
     // 登录成功后，处理函数
     loginSuccess(result) {

pages/mine/announcement/aDetails.vue

@@ -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>

pages/mine/announcement/index.vue

@@ -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>

pages/mine/index.vue

@@ -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>

pages/remainingSum/index.vue

@@ -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({
+      uni.navigateTo({
-      //   url: ''
+        url: '/pages/remainingSum/rechargeRecord'
-      // })
+      })
     },
     // 获取余额
     async getBalance() {

pages/remainingSum/rechargeRecord.vue

@@ -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>