free-sun
/
Highways4Good
14
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

“我的”页面

release_0.0.1
liujiangyong 2 years ago
parent
4134c92daf
commit
8164437d5f
7 changed files with 175 additions and 42 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 40
      weapp/src/pages/user/index.jsx
  2. 109
      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
View File

@ -5,16 +5,20 @@ import { logout } from '@/actions/auth';
import { getLogoutUrl } from '@/services/api';
import cfg from '../../config';
import './index.scss';
import Common from '../../components/echartForWx/common';
import headImg from '../../static/img/my/head.png';
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='info'>
<Image className='icon' src={webUrl + `/assets/avatar/${userInfo.avator}`} />
<View className='name'>{userInfo.displayName || '----'}</View>
<View className='myBox'>
<View className='my-top'>
<Image className='my-portrait' src={headImg} />
<View className='my-item'>
<View className='my-username'>{userInfo.displayName}</View>
<View className='my-phone'>{userInfo.phone}</View>
</View>
</View>
</View>
<View className='logout'>
<Button className='btn' onClick={onLogout}>退出登录</Button>
<View className='box' onClick={() => goRedirect(1)}>
<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>
);
}

109
weapp/src/pages/user/index.scss
View File

@ -1,45 +1,92 @@
.page {
height: 100vh;
background: #F0F2F5;
box-sizing: border-box;
.personal {
padding: 20px;
.info {
border-radius: 10px;
background: #fff;
height: 30vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.icon {
width: 150px;
height: 150px;
border-radius: 50%;
display: flex;
flex-direction: column;
.myBox {
width: 90%;
height: 300rpx;
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;
}
.name {
font-size: 30px;
margin-top: 30px;
.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;
}
.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: 100vw;
margin-top: 50px;
padding: 0 20px;
.btn {
background: #fff;
font-size: 28px;
padding: 8px 0;
}
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
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

13
weapp/src/static/img/my/more.svg
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 889 B

18
weapp/src/static/img/my/pswd.svg
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

14
weapp/src/static/img/my/report.svg
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

Write Preview
Loading…
Cancel
Save