✨ feat(客户端): 新增我的页面

@@ -40,7 +40,9 @@ export default {
       });
       });
     },
     },
     toMe () {
     toMe () {
-      alert('me')
+      this.$router.push({
+        path: '/me/index'
+      });
     }
     }
   }
   }
 }
 }

 import { createApp } from 'vue';
 import { createApp } from 'vue';
-import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper } from 'vant';
+import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag } from 'vant';
 import router from './router';
 import router from './router';
 import App from './App.vue';
 import App from './App.vue';
 import axios from './utils/axios';
 import axios from './utils/axios';
@@ -32,6 +32,7 @@ app.use(Popup);
 app.use(Picker);
 app.use(Picker);
 app.use(Sticky);
 app.use(Sticky);
 app.use(Stepper);
 app.use(Stepper);
+app.use(Tag);
 
 
 app.use(ConfigProvider);
 app.use(ConfigProvider);
 
 

@@ -93,6 +93,22 @@ export default [{
   },
   },
   children: []
   children: []
 }, {
 }, {
+  path: '/client/personIndex',
+  name: '个人首页',
+  component: () => import('./views/client/personIndex.vue'),
+  meta: {
+    title: '个人首页'
+  },
+  children: []
+}, {
+  path: '/me/index',
+  name: '我的',
+  component: () => import('./views/me/index.vue'),
+  meta: {
+    title: '我的'
+  },
+  children: []
+}, {
   path: '/image',
   path: '/image',
   name: 'html转图片',
   name: 'html转图片',
   component: () => import('./views/html2canvas.vue'),
   component: () => import('./views/html2canvas.vue'),

+<template>
+  <div class="me-index-page">
+    <div class="header-wrapper">
+      <div class="info">
+        <van-row>
+          <van-col>
+            <van-image round width="50" height="50" src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+              style="padding-right: 1rem;" />
+          </van-col>
+          <van-col class="text-wrapper" span="18">
+            <div>
+              <div class="username">瑟日古娜</div>
+              <div class="toggle-user">切换儿童</div>
+            </div>
+            <div class="address">呼和浩特市新城区蒙古族幼儿园</div>
+          </van-col>
+        </van-row>
+      </div>
+
+      <div class="sub-data">
+        <van-row>
+          <van-col span="5" offset="1" class="un-tap-color">
+            <p>获赞</p>
+            <p>25478</p>
+          </van-col>
+          <van-col span="1" class="divide">|</van-col>
+          <van-col span="5" class="un-tap-color">
+            <p>粉丝</p>
+            <p>45</p>
+          </van-col>
+          <van-col span="1" class="divide">|</van-col>
+          <van-col span="5">
+            <p class="tap-color">关注</p>
+            <p>26</p>
+          </van-col>
+          <van-col span="1" class="divide">|</van-col>
+          <van-col span="5">
+            <p class="tap-color">未看</p>
+            <p><van-tag round color="red">28</van-tag></p>
+          </van-col>
+        </van-row>
+      </div>
+    </div>
+
+    <div class="van-hairline--bottom sub-handle">
+      <div>
+        <my-button type="custom" :custom-style="styleObject1" @on-click="">实名认证</my-button>
+      </div>
+      <div>
+        <my-button type="custom" :custom-style="styleObject2" @on-click="">新增儿童</my-button>
+      </div>
+    </div>
+
+    <template v-for="(item, key) in itemList" :key="key">
+      <div class="van-hairline--bottom item-list">
+        <van-row>
+          <van-col span="12">{{ item.name }}</van-col>
+          <van-col span="12" style="text-align: right; color: #777777;">
+            <span v-if="!item.tag">{{ item.sum }}&nbsp;&nbsp;</span>
+            <span v-else><van-tag round color="red">{{ item.sum }}</van-tag>&nbsp;&nbsp;</span>
+          <van-icon name="arrow" /></van-col>
+        </van-row>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import MyButton from '@/components/MyButton/index.vue'
+
+import { ref, reactive, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import axios from '@/utils/axios';
+import $ from 'jquery'
+import { Toast } from 'vant';
+const $route = useRoute();
+const $router = useRouter();
+
+// 自定义按钮颜色样式
+const styleObject1 = reactive({
+  backgroundColor: '#FFFFFF',
+  color: '#713610',
+  borderColor: '#713610'
+})
+const styleObject2 = reactive({
+  backgroundColor: '#FFFFFF',
+  color: '#0B3A72',
+  borderColor: '#0B3A72'
+})
+
+const itemList = [
+  {
+    name: '我的捐赠',
+    sum: '5',
+    to: '/'
+  },
+  {
+    name: '我的作品',
+    sum: '5',
+    to: '/'
+  },
+  {
+    name: '我的订阅',
+    sum: '5',
+    to: '/'
+  },
+  {
+    name: '我的收藏',
+    sum: '5',
+    to: '/'
+  },
+  {
+    name: '我的点赞',
+    sum: '5',
+    to: '/'
+  },
+  {
+    name: '我的留言',
+    sum: '2',
+    tag: true,
+    to: '/'
+  },
+  {
+    name: '@我的',
+    sum: '2',
+    tag: true,
+    to: '/'
+  },
+]
+
+onMounted(() => {
+
+})
+</script>
+
+<script>
+import mixin from 'common/mixin';
+
+export default {
+  mixins: [mixin.init],
+  data() {
+    return {
+
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.me-index-page {
+  .header-wrapper {
+    background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%);
+    .info {
+      padding: 2rem; 
+      padding-right: 0;
+      .text-wrapper {
+        line-height: 1.5;
+        .username {
+          display: inline-block; 
+          overflow: auto; 
+          font-size: 1.15rem; 
+          color: #222222;
+        }
+        .toggle-user {
+          float: right;
+          font-size: 0.8rem; 
+          background-color: white; 
+          border-radius: 15px; 
+          padding: 5px 10px; 
+          color: #713610;
+        }
+      }
+      .address {
+        font-size: 0.85rem; 
+        color: #999999;
+      }
+    }
+    .sub-data {
+      text-align: center; 
+      overflow: auto; 
+      padding-bottom: 1rem;
+      .un-tap-color {
+        color: #666666;
+      }
+      .tap-color {
+        color: #713610;
+      }
+      .divide {
+        line-height: 2.5; 
+        color: #BCB4C9; 
+        font-size: 1rem;
+      }
+    }
+  }
+  .sub-handle {
+    padding: 1rem 0; 
+    margin: 0 1rem; 
+    overflow: auto;
+    div:first-child {
+      width: 48%; 
+      float: left; 
+      margin-right: 2%;
+    }
+    div:last-child {
+      width: 48%; 
+      float: left; 
+      margin-left: 2%;
+    }
+  }
+  .item-list {
+    padding: 1rem 0; 
+    margin: 0 1rem;
+  }
+}
+</style>
\ No newline at end of file