Prechádzať zdrojové kódy

feat(personCenter): 个人中心页面,还带完成

yizhiyang 1 rok pred
rodič
commit
98e365362a

+ 24 - 12
src/pages.json

@@ -59,18 +59,6 @@
             "navigationBarTitleText": "全部评论"
           }
         },
-        {
-          "path": "settings/index",
-          "style": {
-            "navigationBarTitleText": "设置"
-          }
-        },
-        {
-          "path": "personalCenter/index",
-          "style": {
-            "navigationBarTitleText": "个人中心"
-          }
-        },
         {
           "path": "checkIn/index",
           "style": {
@@ -280,6 +268,30 @@
           "style": {
             "navigationBarTitleText": "我的积分"
           }
+        },
+        {
+          "path": "myOrder/index",
+          "style": {
+            "navigationBarTitleText": "我的订单"
+          }
+        },
+        {
+          "path": "personalCenter/index",
+          "style": {
+            "navigationBarTitleText": "个人中心"
+          }
+        },
+        {
+          "path": "editData/index",
+          "style": {
+            "navigationBarTitleText": "编辑资料"
+          }
+        },
+        {
+          "path": "settings/index",
+          "style": {
+            "navigationBarTitleText": "设置"
+          }
         }
       ]
     }

+ 9 - 0
src/pages/my/editData/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <view>编辑资料</view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

+ 0 - 0
src/pages/client/personalCenter/index.vue → src/pages/my/personalCenter/index copy.vue


+ 126 - 0
src/pages/my/personalCenter/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <view>
+    <view class="person">
+      <view class="image-box">
+        <Image src="https://cdn.uviewui.com/uview/album/1.jpg" />
+      </view>
+
+      <!-- 个人信息中心 -->
+      <view class="info-box">
+        <view class="info-avatar">
+          <Image src="https://cdn.uviewui.com/uview/album/1.jpg" />
+          <view class="edit" @tap="$Router.push('/pages/my/editData/index')">
+            <u-icon name="edit-pen" color="#4688b6" />
+            <view> 编辑资料</view>
+          </view>
+        </view>
+        <view class="nickname">yizhiyang</view>
+        <view class="follow">
+          <view>关注<text>3</text></view>
+          <view>粉丝<text>3</text></view>
+          <view>好友<text>331</text></view>
+        </view>
+      </view>
+
+      <!-- 个人动态 -->
+      <u-tabs
+        :list="list2"
+        lineWidth="70"
+        lineColor="#347caf"
+        :scrollable="false"
+        :activeStyle="{
+          color: '#347caf',
+          fontWeight: 'bold',
+          transform: 'scale(1.05)',
+        }"
+        :inactiveStyle="{
+          color: '#b7b6b8',
+          transform: 'scale(1)',
+        }"
+        itemStyle="padding-left: 90rpx; padding-right: 80rpx; height: 120rpx;"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list2: [
+        {
+          name: '主页',
+        },
+        {
+          name: '动态',
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.person {
+  height: 100vh;
+  background-color: #efefef;
+  .image-box {
+    width: 100%;
+    height: 340rpx;
+    > Image {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  }
+
+  /* 个人信息中心 */
+  .info-box {
+    height: 280rpx;
+    padding: 20rpx;
+    margin: -140rpx 30rpx 30rpx 30rpx;
+    border-radius: 40rpx;
+    box-sizing: border-box;
+    background-color: #fff;
+    .info-avatar {
+      display: flex;
+      justify-content: space-between;
+      > Image {
+        width: 180rpx;
+        height: 180rpx;
+        border-radius: 90rpx;
+        display: block;
+        margin-top: -90rpx;
+        margin-left: 80rpx;
+      }
+      .edit {
+        display: flex;
+        width: 180rpx;
+        height: 80rpx;
+        line-height: 80rpx;
+        padding-left: 20rpx;
+        margin: 15rpx 15rpx 0 0;
+        color: #4688b6;
+        border: 1px solid #4688b6;
+      }
+    }
+    .nickname {
+      font-size: 40rpx;
+      margin: 20rpx;
+    }
+    .follow {
+      display: flex;
+      font-size: 26rpx;
+      color: #565656;
+      > view {
+        margin-right: 20rpx;
+        > text {
+          font-size: 36rpx;
+          color: #333;
+          margin-left: 5rpx;
+        }
+      }
+    }
+  }
+}
+</style>

+ 0 - 0
src/pages/client/settings/index.vue → src/pages/my/settings/index.vue


+ 6 - 3
src/pages/tabbar/mine/index.vue

@@ -4,7 +4,7 @@
       <view class="content">
         <view
           class="avatar-wrap"
-          @tap="$Router.push('/pages/client/personalCenter/index')"
+          @tap="$Router.push('/pages/my/personalCenter/index')"
         >
           <u-avatar :src="user_info.avatar" size="80"></u-avatar>
         </view>
@@ -15,7 +15,7 @@
             <view class="btn-wrap">
               <view
                 class="btn-content"
-                @tap="$Router.push('/pages/client/settings/index')"
+                @tap="$Router.push('/pages/my/settings/index')"
                 >设置</view
               >
               <view class="btn-content">认证</view>
@@ -53,7 +53,10 @@
       </view>
 
       <!-- 我的订单 -->
-      <view class="order-out-box">
+      <view
+        class="order-out-box"
+        @tap="$Router.push('/pages/my/myOrder/index')"
+      >
         <view class="order-inner-box">
           <u-grid :border="false" col="4" style="background-color: #fff">
             <u-grid-item