Browse Source

“我的”页面

release_0.0.1
liujiangyong 2 years ago
parent
commit
8164437d5f
  1. 40
      weapp/src/pages/user/index.jsx
  2. 101
      weapp/src/pages/user/index.scss
  3. 23
      weapp/src/static/img/my/card-bg.svg
  4. BIN
      weapp/src/static/img/my/head.png
  5. 13
      weapp/src/static/img/my/more.svg
  6. 18
      weapp/src/static/img/my/pswd.svg
  7. 14
      weapp/src/static/img/my/report.svg

40
weapp/src/pages/user/index.jsx

@ -5,16 +5,20 @@ import { logout } from '@/actions/auth';
import { getLogoutUrl } from '@/services/api'; import { getLogoutUrl } from '@/services/api';
import cfg from '../../config'; import cfg from '../../config';
import './index.scss'; 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 { webUrl } = cfg;
const Index = ({ ...props }) => { const Index = ({ ...props }) => {
const userInfo = Taro.getStorageSync('userInfo') || {}; const userInfo = Taro.getStorageSync('userInfo') || {};
const goRedirect = () => {
}
const onLogout = () => { const onLogout = () => {
logout(getLogoutUrl()).then(() => { logout(getLogoutUrl()).then(() => {
Taro.reLaunch({ Taro.reLaunch({
@ -23,19 +27,33 @@ const Index = ({ ...props }) => {
}); });
} }
console.log(userInfo)
return ( return (
<View className='page'> <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>
<View className='box' onClick={() => goRedirect(1)}>
<Image className='box-img' src={reportImg} />
<View className='box-txt'>我的填报</View>
<Image className='img' src={moreImg} />
</View> </View>
<View className='logout'> <View className='box' onClick={() => goRedirect(2)} style={{ marginTop: '2rpx' }}>
<Button className='btn' onClick={onLogout}>退出登录</Button> <Image className='box-img' src={pswdImg} />
<View className='box-txt'>修改密码</View>
<Image className='img' src={moreImg} />
</View> </View>
<View className='logout' onClick={onLogout}>退出登录</View>
</View> </View>
); );
} }

101
weapp/src/pages/user/index.scss

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

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

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
weapp/src/static/img/my/head.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

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

After

Width:  |  Height:  |  Size: 889 B

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

After

Width:  |  Height:  |  Size: 2.4 KiB

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

After

Width:  |  Height:  |  Size: 1.4 KiB

Loading…
Cancel
Save