“我的”页面

weapp/src/pages/user/index.jsx

@@ -5,16 +5,20 @@ import { logout } from '@/actions/auth';
 import { getLogoutUrl } from '@/services/api';
 import cfg from '../../config';
 import './index.scss';
-
+import headImg from '../../static/img/my/head.png';
-import Common from '../../components/echartForWx/common';
+import moreImg from '../../static/img/my/more.svg';
-
+import pswdImg from '../../static/img/my/pswd.svg';
+import reportImg from '../../static/img/my/report.svg';
 
 const { webUrl } = cfg;
 
-
 const Index = ({ ...props }) => {
   const userInfo = Taro.getStorageSync('userInfo') || {};
 
+  const goRedirect = () => {
+
+  }
+
   const onLogout = () => {
     logout(getLogoutUrl()).then(() => {
       Taro.reLaunch({
@@ -23,19 +27,33 @@ const Index = ({ ...props }) => {
     });
 
   }
-
+  console.log(userInfo)
   return (
     <View className='page'>
-      <View className='personal'>
+      <View className='myBox'>
-        <View className='info'>
+        <View className='my-top'>
-          <Image className='icon' src={webUrl + `/assets/avatar/${userInfo.avator}`} />
+          <Image className='my-portrait' src={headImg} />
-          <View className='name'>{userInfo.displayName || '----'}</View>
+          <View className='my-item'>
+            <View className='my-username'>{userInfo.displayName}</View>
+            <View className='my-phone'>{userInfo.phone}</View>
+          </View>
         </View>
       </View>
 
-      <View className='logout'>
+      <View className='box' onClick={() => goRedirect(1)}>
-        <Button className='btn' onClick={onLogout}>退出登录</Button>
+        <Image className='box-img' src={reportImg} />
+        <View className='box-txt'>我的填报</View>
+        <Image className='img' src={moreImg} />
       </View>
+
+      <View className='box' onClick={() => goRedirect(2)} style={{ marginTop: '2rpx' }}>
+        <Image className='box-img' src={pswdImg} />
+        <View className='box-txt'>修改密码</View>
+        <Image className='img' src={moreImg} />
+      </View>
+      
+      <View className='logout' onClick={onLogout}>退出登录</View>
+
     </View>
   );
 }

weapp/src/pages/user/index.scss

@@ -1,45 +1,92 @@
 .page {
   height: 100vh;
   background: #F0F2F5;
-  box-sizing: border-box;
+  display: flex;
-
+  flex-direction: column;
-  .personal {
+
-    padding: 20px;
+  .myBox {
-
+    width: 90%;
-    .info {
+    height: 300rpx;
-      border-radius: 10px;
+    margin: 30rpx auto;
-      background: #fff;
+    background: url('../../static/img/my/card-bg.svg') no-repeat;
-      height: 30vh;
+    background-size: 100%;
-      display: flex;
+    border-radius: 8rpx;
-      flex-direction: column;
+
-      align-items: center;
+    .my-top {
-      justify-content: center;
+      overflow: hidden;
-
+      padding: 70rpx 0 28rpx 30rpx;
-      .icon {
+
-        width: 150px;
+      .my-portrait {
-        height: 150px;
+        width: 120rpx;
-        border-radius: 50%;
+        height: 120rpx;
+        display: block;
+        float: left;
       }
 
-      .name {
+      .my-item {
-        font-size: 30px;
+        float: left;
-        margin-top: 30px;
+        margin-left: 32rpx;
+        width: 70%;
+
+        .my-username {
+          font-size: 32rpx;
+          color: #FFFFFF;
+          margin-bottom: 24rpx;
+          margin-top: 6rpx;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+        }
+
+        .my-phone {
+          font-size: 28rpx;
+          font-weight: bold;
+          color: #FFFFFF;
+        }
       }
     }
+  }
+
+  .box {
+    overflow: hidden;
+    background-color: #fff;
+    width: 100%;
+    height: 92rpx;
+    line-height: 92rpx;
+
+    .box-img {
+      width: 52rpx;
+      height: 52rpx;
+      display: block;
+      float: left;
+      padding: 20rpx 20rpx 20rpx 30rpx;
+    }
 
+    .box-txt {
+      float: left;
+      font-size: 28rpx;
+      color: #333333;
+    }
 
+    .img {
+      width: 52rpx;
+      height: 52rpx;
+      display: block;
+      float: right;
+      padding: 20rpx 30rpx 20rpx 0;
+    }
   }
 
   .logout {
-    box-sizing: border-box;
+    width: 550rpx;
-    width: 100vw;
+    height: 80rpx;
-    margin-top: 50px;
+    line-height: 80rpx;
-    padding: 0 20px;
+    background: #346FC2;
-
+    border-radius: 8rpx;
-    .btn {
+    font-size: 28rpx;
-      background: #fff;
+    color: #FFFFFF;
-      font-size: 28px;
+    margin: 98rpx auto 0;
-      padding: 8px 0;
+    text-align: center;
-    }
   }
 }

weapp/src/static/img/my/card-bg.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="345px" height="139px" viewBox="0 0 345 139" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>形状结合</title>
+    <defs>
+        <linearGradient x1="117.957428%" y1="37.3935291%" x2="29.6625906%" y2="56.1347143%" id="linearGradient-1">
+            <stop stop-color="#346FC2" offset="0%"></stop>
+            <stop stop-color="#50A9F3" offset="100%"></stop>
+            <stop stop-color="#50A9F3" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-2" x="0" y="0" width="345" height="139" rx="4"></rect>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="首页_我的（第三方）" transform="translate(-14.000000, -80.000000)">
+            <g id="形状结合" transform="translate(14.000000, 80.000000)">
+                <mask id="mask-3" fill="white">
+                    <use xlink:href="#path-2"></use>
+                </mask>
+                <use id="蒙版" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
+                <path d="M371,-8 L370.999465,139.158776 C298.893654,132.178406 243,82.6104154 243,22.5 C243,11.9503745 244.721619,1.72547358 247.950347,-8.00147208 L371,-8 Z" fill="#FFFFFF" opacity="0.0897274926" mask="url(#mask-3)"></path>
+            </g>
+        </g>
+    </g>
+</svg>

weapp/src/static/img/my/more.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="26px" height="26px" viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="首页_我的（第三方）" transform="translate(-334.000000, -245.000000)" stroke="#CDCDCD" stroke-width="1.65">
+            <g id="Input-/-Normal-/-文字输入框" transform="translate(0.000000, 235.000000)">
+                <g id="more" transform="translate(334.000000, 10.000000)">
+                    <polyline id="路径" transform="translate(13.000000, 13.000000) rotate(-135.000000) translate(-13.000000, -13.000000) " points="17 17 9 17 9 9"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

weapp/src/static/img/my/pswd.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="26px" height="26px" viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="首页_我的（第三方）" transform="translate(-15.000000, -291.000000)" fill="#346FC2" fill-rule="nonzero">
+            <g id="Input-/-Normal-/-文字输入框" transform="translate(0.000000, 282.000000)">
+                <g id="icon_pl" transform="translate(15.000000, 9.000000)">
+                    <g id="密码" transform="translate(4.000000, 3.000000)">
+                        <path d="M15.4545454,9.09090908 L15.4545454,18.1818182 L1.81818182,18.1818182 L1.81818182,9.09090908 L15.4545454,9.09090908 M15.4545454,7.27272727 L1.81818182,7.27272727 C0.818181816,7.27272727 0,8.09090908 0,9.09090908 L0,18.1818182 C0,19.1818182 0.818181816,20 1.81818182,20 L15.4545454,20 C16.4545454,20 17.2727273,19.1818182 17.2727273,18.1818182 L17.2727273,9.09090908 C17.2727273,8.09090908 16.4545454,7.27272727 15.4545454,7.27272727 Z" id="形状"></path>
+                        <path d="M8.4090909,1.81818182 C10.4090909,1.81818182 12.0454546,3.45454545 12.0454546,5.45454545 L12.0454546,7.27272727 L4.77272727,7.27272727 L4.77272727,5.45454545 C4.77272727,3.45454545 6.4090909,1.81818182 8.4090909,1.81818182 M8.4090909,0 C5.4090909,0 2.95454545,2.45454545 2.95454545,5.45454545 L2.95454545,9.09090908 L13.8636364,9.09090908 L13.8636364,5.45454545 C13.8636364,2.45454545 11.4090909,0 8.4090909,0 Z" id="形状"></path>
+                        <path d="M6.81818182,12.2727273 C6.81818182,13.2768814 7.63220954,14.0909091 8.63636363,14.0909091 C9.64051772,14.0909091 10.4545454,13.2768814 10.4545454,12.2727273 C10.4545454,11.2685732 9.64051772,10.4545454 8.63636363,10.4545454 C7.63220954,10.4545454 6.81818182,11.2685732 6.81818182,12.2727273 Z" id="路径"></path>
+                        <path d="M8.63636363,16.8181818 C8.13636363,16.8181818 7.72727271,16.4090909 7.72727271,15.9090909 L7.72727271,12.7272727 C7.72727271,12.2272727 8.13636363,11.8181818 8.63636363,11.8181818 C9.13636363,11.8181818 9.54545455,12.2272727 9.54545455,12.7272727 L9.54545455,15.9090909 C9.54545455,16.4090909 9.13636363,16.8181818 8.63636363,16.8181818 L8.63636363,16.8181818 Z" id="路径"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

weapp/src/static/img/my/report.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="26px" height="26px" viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="首页_我的（第三方）" transform="translate(-15.000000, -245.000000)">
+            <g id="Input-/-Normal-/-文字输入框" transform="translate(0.000000, 235.000000)">
+                <g id="icon_pl" transform="translate(15.000000, 10.000000)">
+                    <path d="M23.1,8.8 C23.7075132,8.8 24.2,9.29248678 24.2,9.9 L24.2,13.2 C24.2,13.8075132 23.7075132,14.3 23.1,14.3 L21.1669048,14.3 L21.1669048,8.8 L23.1,8.8 Z M20.0669048,14.3 L9.71859043,14.3 C9.41986798,14.3 9.13399178,14.1785088 8.92666511,13.9634489 L6.6,11.55 L8.92666511,9.13655106 C9.13399178,8.92149118 9.41986798,8.8 9.71859043,8.8 L20.0669048,8.8 L20.0669048,14.3 Z" id="形状结合" fill="#346FC2" transform="translate(15.400000, 11.550000) rotate(-45.000000) translate(-15.400000, -11.550000) "></path>
+                    <path d="M20.7625,13.5179688 L20.7625,20.075 C20.7625,21.1381481 19.9006481,22 18.8375,22 L6.325,22 C5.26185186,22 4.4,21.1381481 4.4,20.075 L4.4,8.525 C4.4,7.46185186 5.26185186,6.6 6.325,6.6 L13.784375,6.6" id="路径" stroke="#346FC2" stroke-width="1.65" stroke-linecap="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>