feat: 通知、我的信息静态页开发

src/pages.json

@@ -104,6 +104,15 @@
         "navigationStyle": "custom"
       }
     },
+    {
+      "path": "pages/mine/myProfile",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationBarTitleText": "My Profile",
+        "navigationBarBackgroundColor": "#fff"
+      }
+    },
     {
       "path": "pages/missionCenter/missionCenter",
       "type": "page",
@@ -131,6 +140,15 @@
         "navigationBarBackgroundColor": "#fff"
       }
     },
+    {
+      "path": "pages/notifications/notifications",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationBarTitleText": "Notifications",
+        "navigationBarBackgroundColor": "#fff"
+      }
+    },
     {
       "path": "pages/productDetail/checkOut",
       "type": "page",

src/pages/index/index.vue

@@ -169,6 +169,11 @@ function toProductDetail(item) {
     url: `/pages/productDetail/productDetail?data=${encodeURIComponent(data)}`,
   })
 }
+function toNotifications() {
+  uni.navigateTo({
+    url: '/pages/notifications/notifications',
+  })
+}
 </script>
 
 <template>
@@ -181,7 +186,7 @@ function toProductDetail(item) {
         <image src="/static/header-logo.png" class="h-54rpx w-250rpx" />
         <view class="flex items-center">
           <wd-icon custom-class="mr-20rpx" name="search1" size="38rpx" @click="toSearch" />
-          <wd-icon name="notification" size="38rpx" />
+          <wd-icon name="notification" size="38rpx" @click="toNotifications" />
         </view>
       </view>
     </template>

src/pages/mine/mine.vue

@@ -36,6 +36,16 @@ function queryList(pageNo, pageSize) {
     ]
   }, 1000)
 }
+
+// 简单的模拟数据
+const menuList = ref([
+  { name: 'My Profile', url: '/pages/mine/myProfile' },
+  { name: 'Address Book' },
+  { name: 'Share' },
+  { name: 'My Favorite' },
+  { name: 'Live Chat' },
+  { name: 'Activity Group' },
+])
 </script>
 
 <template>
@@ -44,7 +54,7 @@ function queryList(pageNo, pageSize) {
     :style="{ paddingTop: `${safeAreaInsets?.top + 3}px` }"
   >
     <view class="flex items-center">
-      <wd-img width="96rpx" height="96rpx" round src="https://picsum.photos/96" />
+      <wd-img width="96rpx" height="96rpx" round src="/static/images/avatar.jpg" />
       <!-- 已登录 -->
       <!-- <view class="ml-24rpx text-32rpx font-bold">
         Aamir Khan
@@ -69,7 +79,7 @@ function queryList(pageNo, pageSize) {
       class="flex items-center justify-between rounded-12rpx bg-[rgba(var(--wot-color-theme-rgb),0.1)] px-16rpx py-22rpx"
     >
       <view class="flex items-center" @click="toPage('/pages/wallet/myWallet')">
-        <wd-img width="84rpx" height="84rpx" round src="https://picsum.photos/84" />
+        <wd-img width="84rpx" height="84rpx" round src="/static/images/avatar.jpg" />
         <view class="ml-18rpx">
           <view class="text-22rpx text-#595959">
             Wallet Balance
@@ -103,7 +113,7 @@ function queryList(pageNo, pageSize) {
     </view>
     <view class="grid grid-cols-4 gap-24rpx">
       <view v-for="i in 4" :key="i" class="flex flex-col items-center">
-        <wd-img width="48rpx" height="48rpx" src="https://picsum.photos/48" />
+        <wd-img width="48rpx" height="48rpx" src="/static/images/avatar.jpg" />
         <view class="mt-18rpx text-22rpx text-#3A444C">
           To Pay
         </view>
@@ -111,10 +121,10 @@ function queryList(pageNo, pageSize) {
     </view>
   </view>
   <view class="grid grid-cols-3 gap-24rpx bg-white py-45rpx">
-    <view v-for="i in 6" :key="i" class="flex flex-col items-center">
-      <wd-img width="48rpx" height="48rpx" src="https://picsum.photos/48" />
+    <view v-for="(item, index) in menuList" :key="index" class="flex flex-col items-center" @click="toPage(item.url)">
+      <wd-img width="48rpx" height="48rpx" src="/static/images/avatar.jpg" />
       <view class="mt-18rpx text-22rpx text-#3A444C">
-        To Pay
+        {{ item.name }}
       </view>
     </view>
   </view>

src/pages/mine/myProfile.vue

@@ -0,0 +1,66 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationBarTitleText: 'My Profile',
+    navigationBarBackgroundColor: '#fff',
+  },
+}
+</route>
+
+<script lang="ts" setup>
+// 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
+// eslint-disable-next-line unused-imports/no-unused-imports
+import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
+import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
+
+defineOptions({
+  name: 'MyProfile', // 我的资料
+})
+// z-paging
+const paging = ref(null)
+// 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
+useZPaging(paging)
+// 搜索结果
+const dataList = ref([])
+function queryList(pageNo, pageSize) {
+  // 此处请求仅为演示，请替换为自己项目中的请求
+  setTimeout(() => {
+    dataList.value = [
+      { title: '123' },
+      { title: '123' },
+      { title: '123' },
+      { title: '12345' },
+    ]
+    paging.value.complete(dataList.value)
+  }, 1000)
+}
+</script>
+
+<template>
+  <z-paging ref="paging" refresher-only use-page-scroll @query="queryList">
+    <view class="py-20rpx">
+      <wd-cell-group custom-class="mb-20rpx" border>
+        <wd-cell title="Avatar" center>
+          <view class="flex items-center justify-end">
+            <wd-img width="64rpx" height="64rpx" custom-class="mr-18rpx" round src="/static/images/avatar.jpg" />
+            <wd-icon name="arrow-right" size="36rpx" />
+          </view>
+        </wd-cell>
+        <wd-cell title="User ID" value="123456" />
+        <wd-cell title="User Name" value="Aamir Khan" />
+        <wd-cell title="Full Name" value="Aamir Khan" />
+        <wd-cell title="Mobile Number" value="88017123456789" />
+      </wd-cell-group>
+      <wd-cell-group custom-class="mb-20rpx" border>
+        <wd-cell title="Bank Name" value="Aamir Khan" />
+        <wd-cell title="Bank Account Name" value="Aamir Khan" />
+        <wd-cell title="Bank Account No." value="88017123456789" />
+      </wd-cell-group>
+    </view>
+  </z-paging>
+</template>
+
+<style lang="scss" scoped>
+//
+</style>

src/pages/notifications/notifications.vue

@@ -0,0 +1,74 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationBarTitleText: 'Notifications',
+    navigationBarBackgroundColor: '#fff',
+  },
+}
+</route>
+
+<script lang="ts" setup>
+// 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
+// eslint-disable-next-line unused-imports/no-unused-imports
+import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
+import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
+
+defineOptions({
+  name: 'Notifications', // 通知
+})
+// z-paging
+const paging = ref(null)
+// 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
+useZPaging(paging)
+
+const tab = ref<number>(0)
+
+// 搜索结果
+const dataList = ref([])
+function queryList(pageNo, pageSize) {
+  // 此处请求仅为演示，请替换为自己项目中的请求
+  setTimeout(() => {
+    dataList.value = [
+      { title: '123' },
+      { title: '123' },
+      { title: '123' },
+      { title: '12345' },
+    ]
+    paging.value.complete(dataList.value)
+  }, 1000)
+}
+</script>
+
+<template>
+  <wd-tabs v-model="tab" swipeable sticky custom-class="bg-transparent!">
+    <wd-tab v-for="item in 4" :key="item" :title="`标签${item}`">
+      <z-paging ref="paging" refresher-only use-page-scroll @query="queryList">
+        <view class="py-20rpx">
+          <view class="bg-white px-22rpx py-18rpx">
+            <view class="mb-8rpx flex items-center justify-between">
+              <view class="flex items-center">
+                <wd-icon name="view-module" size="36rpx" />
+                <text class="ml-8rpx text-24rpx font-bold">
+                  Order Payment Successful
+                </text>
+              </view>
+              <text class="text-22rpx text-#3A444C">
+                12:30
+              </text>
+            </view>
+            <view class="flex items-center text-22rpx text-#3A444C">
+              <view class="truncate">
+                The product you purchased [20250505123030120] has been paid..
+              </view>
+            </view>
+          </view>
+        </view>
+      </z-paging>
+    </wd-tab>
+  </wd-tabs>
+</template>
+
+<style lang="scss" scoped>
+//
+</style>

src/style/index.scss

@@ -18,6 +18,7 @@ page {
   --wot-color-theme: #e61b28;
   --wot-color-theme-rgb: 230, 27, 40; // RGB值分解，对应#e61b28
   --wot-navbar-title-font-size: 32rpx;
+  --wot-size-side-padding: 24rpx;
   // 修改按钮背景色
   // --wot-button-primary-bg-color: green;
 }
@@ -26,3 +27,13 @@ page {
   background: #e1e1e1 !important;
   transform: scaleY(1) !important;
 }
+.wd-cell {
+  padding-right: var(--wot-size-side-padding) !important;
+  .wd-cell__wrapper {
+    padding-right: 0 !important;
+    &::after {
+      background: #e1e1e1 !important;
+      transform: scaleY(1) !important;
+    }
+  }
+}