日历bug修复，状态管理开发，个人信息开发
blak-kong
3 years ago
parent
e4ab393441
commit
0c10eb610c
@ -0,0 +1,49 @@
|
||||
.toolbar {
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
background: #fff;
|
||||
padding: 20rpx 30rpx;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.toolbar .toolbar_title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.toolbar .select_box .text {
|
||||
color: #cccccc;
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.toolbar .select_box .date {
|
||||
color: #000;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn_confirm {
|
||||
height: 90rpx;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 90rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
margin: 0 30rpx 40rpx;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
|
||||
.van-picker__toolbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.popup-date-close {
|
||||
position: absolute;
|
||||
right: 50rpx;
|
||||
top: 50rpx;
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
.flex-justify-sb {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
@ -0,0 +1,334 @@
|
||||
.infobox1 {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 0 0 30rpx 30rpx;
|
||||
padding: 19rpx 29rpx 44rpx 29rpx;
|
||||
box-shadow: -2.6rpx 0 11rpx 0.5rpx rgba(129, 129, 129, 0.05);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.infobox1 .selectbox {
|
||||
margin-top: 38rpx;
|
||||
}
|
||||
.infobox1 .selectbox .block {
|
||||
position: relative;
|
||||
}
|
||||
.infobox1 .selectbox .block picker,
|
||||
.infobox1 .selectbox .block picker view {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
opacity: 0;
|
||||
}
|
||||
.infobox1 .selectbox .block .title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
font-family: Poppins;
|
||||
}
|
||||
.infobox1 .selectbox .block .icon {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-left: 35rpx;
|
||||
}
|
||||
|
||||
.right_icon {
|
||||
width: 10rpx;
|
||||
height: 20rpx;
|
||||
margin-left: 14rpx;
|
||||
}
|
||||
|
||||
.calendar_view {
|
||||
margin-top: 44rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.calendar_views {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.calendar_view > view,
|
||||
.calendar_views > view {
|
||||
text-align: center;
|
||||
color: #666666;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
width: 98rpx;
|
||||
height: 60rpx;
|
||||
position: relative;
|
||||
}
|
||||
.calendar_views .block {
|
||||
text-align: center;
|
||||
width: 49rpx;
|
||||
height: 49rpx;
|
||||
border-radius: 50%;
|
||||
color: #000000;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
line-height: 49rpx;
|
||||
}
|
||||
|
||||
.calendar_views .blockstatus1 {
|
||||
width: 6rpx;
|
||||
height: 6rpx;
|
||||
background: #e9cd9e;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 14rpx;
|
||||
margin-left: -3rpx;
|
||||
}
|
||||
|
||||
.statubox {
|
||||
justify-content: flex-end;
|
||||
padding: 0 0 14rpx 0;
|
||||
border-bottom: 1rpx solid rgba(105, 100, 96, 0.1);
|
||||
}
|
||||
.statubox .status1 {
|
||||
}
|
||||
.statubox .status1 .block {
|
||||
width: 18rpx;
|
||||
height: 18rpx;
|
||||
border-radius: 50%;
|
||||
background: #f1ece6;
|
||||
}
|
||||
.statubox .status1 .title {
|
||||
font-size: 22rpx;
|
||||
color: #202020;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
.statubox .status2 {
|
||||
margin-left: 26rpx;
|
||||
}
|
||||
.statubox .status2 .block {
|
||||
width: 6rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 50%;
|
||||
background: #e9cd9e;
|
||||
}
|
||||
.statubox .status2 .title {
|
||||
font-size: 22rpx;
|
||||
color: #202020;
|
||||
margin-left: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.calendar_views .status1 {
|
||||
border: 2rpx solid #eecda1;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.calendar_views .cur_day {
|
||||
background: linear-gradient(0deg, #fff0da, #ffe4c0);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.calendar_views .status4 {
|
||||
border: 2rpx solid #f2f2f2;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.calendar_views .no_cur_month {
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.menubox {
|
||||
color: #202020;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
margin-top: 44rpx;
|
||||
}
|
||||
.menubox .record {
|
||||
background: #e2c6a3;
|
||||
border-radius: 22rpx;
|
||||
color: #202020;
|
||||
font-size: 24rpx;
|
||||
height: 44rpx;
|
||||
line-height: 44rpx;
|
||||
width: 120rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.van-tabs__scroll--line {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.color {
|
||||
color: #f1ab15;
|
||||
}
|
||||
|
||||
.ellipsis2 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.nodata {
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
margin-top: 50rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.MT30 {
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.submitbtn {
|
||||
position: absolute;
|
||||
bottom: 100rpx;
|
||||
width: 400rpx;
|
||||
left: 50%;
|
||||
margin-left: -200rpx;
|
||||
}
|
||||
.submitbtn .btn {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.aitems {
|
||||
align-items: center;
|
||||
}
|
||||
.jcenter {
|
||||
justify-content: center;
|
||||
}
|
||||
.sb {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.sa {
|
||||
justify-content: space-around;
|
||||
}
|
||||
.wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.echartsboxs {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.echartsboxs .blockbox {
|
||||
width: 98rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.echartsboxs .blockbox .title {
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
font-size: 24rpx;
|
||||
margin: 20rpx auto 0;
|
||||
width: 49rpx;
|
||||
height: 49rpx;
|
||||
line-height: 49rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.echartsboxs .blockbox .cur_day {
|
||||
background: linear-gradient(0deg, #fff0da, #ffe4c0);
|
||||
}
|
||||
|
||||
.echartsboxs .blockbox .status1 {
|
||||
border: 2rpx solid #eecda1;
|
||||
}
|
||||
|
||||
.echartsboxs .blockbox .status4 {
|
||||
border: 2rpx solid #f2f2f2;
|
||||
}
|
||||
|
||||
.arrow_box {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translate(-50%);
|
||||
/*width: 100%;*/
|
||||
height: 13rpx;
|
||||
padding: 40rpx 80rpx 14rpx;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
transform: rotate(180deg);
|
||||
transition-property: all;
|
||||
transition-duration: 0.5s;
|
||||
width: 24rpx;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.toolbar .toolbar_title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.toolbar .select_box .text {
|
||||
color: #cccccc;
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.toolbar .select_box .date {
|
||||
color: #000;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn_confirm {
|
||||
height: 90rpx;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 90rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
margin: 0 30rpx 40rpx;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
export default {
|
||||
component: true,
|
||||
};
|
||||
@ -1 +0,0 @@
|
||||
@import "~taro-ui/dist/style/components/modal.scss";
|
||||
@ -0,0 +1,95 @@
|
||||
import { Component } from "react";
|
||||
|
||||
import { Dialog } from "@antmjs/vantui";
|
||||
const Dialog_ = Dialog.createOnlyDialog();
|
||||
|
||||
/*** redux ***/
|
||||
import { connect } from "react-redux";
|
||||
import { setColor, resetColor } from "../../../store/features/navigation";
|
||||
import { userRefresh } from "../../../store/features/userInfo";
|
||||
/*** redux end ***/
|
||||
|
||||
import "./registerModal.less";
|
||||
import { Block } from "@tarojs/components";
|
||||
import { go } from "../../../utils/traoAPI";
|
||||
|
||||
class RegisterModal extends Component<any, any> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
name: "导航组件",
|
||||
statusBarHeight: 40, // 状态栏高度
|
||||
navigationBarHeight: 0, // 导航栏高度
|
||||
navHeight: 40,
|
||||
};
|
||||
this.initData();
|
||||
}
|
||||
|
||||
async onLoad() {
|
||||
// // 状态栏高度
|
||||
}
|
||||
componentDidMount() {}
|
||||
|
||||
componentWillUnmount() {}
|
||||
|
||||
componentDidShow() {}
|
||||
|
||||
componentDidHide() {}
|
||||
|
||||
async initData() {
|
||||
this.alertRegister();
|
||||
}
|
||||
|
||||
public alertRegister = () => {
|
||||
if (!this.props.mobile) {
|
||||
this.setColor("#4C4C4C");
|
||||
setTimeout(() => {
|
||||
Dialog_.alert({
|
||||
title: "提示",
|
||||
message: "暂未授权注册，请点击注册",
|
||||
}).then((value) => {
|
||||
this.resetColor();
|
||||
this.goRegister();
|
||||
});
|
||||
}, 300);
|
||||
} else {
|
||||
go("/pages/instrument/instrument");
|
||||
}
|
||||
};
|
||||
|
||||
setColor = (color) => {
|
||||
this.props.setColor(color);
|
||||
};
|
||||
resetColor = () => {
|
||||
this.props.resetColor();
|
||||
};
|
||||
|
||||
goRegister() {
|
||||
go("/pages/register/register");
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Block>
|
||||
<Dialog_ />
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
mobile: state.userInfo.mobile,
|
||||
});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
setColor(color) {
|
||||
dispatch(setColor(color));
|
||||
},
|
||||
resetColor() {
|
||||
dispatch(resetColor());
|
||||
},
|
||||
userRefresh(data) {
|
||||
dispatch(userRefresh(data));
|
||||
},
|
||||
});
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(RegisterModal);
|
||||
@ -1,3 +1,4 @@
|
||||
export default {
|
||||
component: true,
|
||||
lazyCodeLoading: "requiredComponents",
|
||||
};
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: "重新登录",
|
||||
});
|
||||
@ -0,0 +1,74 @@
|
||||
import { WCUserLogin } from "../../utils/Interface";
|
||||
import { Component, PropsWithChildren, useEffect, useState } from "react";
|
||||
import Taro from "@tarojs/taro";
|
||||
// 引入 Swiper, SwiperItem 组件
|
||||
import { Block, View, Text, Image, Input, Button } from "@tarojs/components";
|
||||
|
||||
/*** redux ***/
|
||||
import { connect } from "react-redux";
|
||||
import { setMobile } from "../../store/features/userInfo";
|
||||
/*** redux end ***/
|
||||
|
||||
import { go } from "../../utils/traoAPI";
|
||||
|
||||
import "taro-ui/dist/style/components/button.scss"; // 按需引入
|
||||
import "./login.less";
|
||||
|
||||
class Login extends Component<any, any> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
name: "重新登录",
|
||||
};
|
||||
}
|
||||
|
||||
async onLoad() {}
|
||||
componentDidMount() {}
|
||||
|
||||
componentWillUnmount() {}
|
||||
|
||||
componentDidShow() {}
|
||||
|
||||
componentDidHide() {}
|
||||
|
||||
async initData() {}
|
||||
|
||||
WCUserLogin = async () => {
|
||||
const { code } = await Taro.login();
|
||||
const { data } = await WCUserLogin({ code });
|
||||
if (data.code === 200) {
|
||||
Taro.setStorageSync("token", data.data.token);
|
||||
this.props.setMobile(data.data.mobile);
|
||||
go("/pages/index/index");
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
let { name } = this.state;
|
||||
return (
|
||||
<Block>
|
||||
<Image
|
||||
src="https://oss.flossom.com/miniapp/img/logo.png"
|
||||
mode="widthFix"
|
||||
></Image>
|
||||
<View className="submitbtn" onClick={this.WCUserLogin}>
|
||||
<Image
|
||||
src="https://oss.flossom.com/miniapp/img/btn_bg.png"
|
||||
mode="widthFix"
|
||||
></Image>
|
||||
<View className="btn">重新登录</View>
|
||||
</View>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
mobile: state.userInfo.mobile,
|
||||
});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
setMobile(value) {
|
||||
dispatch(setMobile(value));
|
||||
},
|
||||
});
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Login);
|
||||
@ -0,0 +1,190 @@
|
||||
page {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.nav_bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.info_box {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
background: #ffffff;
|
||||
border-radius: 50rpx 50rpx 0rpx 0rpx;
|
||||
padding: 0 0 150rpx;
|
||||
}
|
||||
|
||||
.infobox1 {
|
||||
border-radius: 20rpx;
|
||||
margin-top: 140rpx;
|
||||
/*height: 490rpx;*/
|
||||
}
|
||||
.infobox1 .info1 {
|
||||
/*padding: 70rpx 48rpx 0;*/
|
||||
}
|
||||
.infobox1 .img {
|
||||
position: absolute;
|
||||
top: -83rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.infobox1 .info1 .tipbox {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin-top: 85rpx;
|
||||
}
|
||||
.infobox1 .info1 .tipbox .tip1 .name {
|
||||
font-size: 44rpx;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
line-height: 1;
|
||||
}
|
||||
.infobox1 .info1 .tipbox .tip1 .level {
|
||||
color: #ffffff;
|
||||
font-size: 30rpx;
|
||||
background: #e1c5a2;
|
||||
height: 32rpx;
|
||||
line-height: 32rpx;
|
||||
padding: 0 4rpx;
|
||||
border-radius: 6rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
.infobox1 .info1 .tipbox .tip2 {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
line-height: 1;
|
||||
margin-top: 25rpx;
|
||||
}
|
||||
.infobox1 .info2 {
|
||||
border-radius: 20rpx;
|
||||
height: 200rpx;
|
||||
margin: 40rpx 28rpx 0;
|
||||
}
|
||||
.infobox1 .info3 {
|
||||
margin: 22rpx 30rpx 0;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
background: #f8f8f8;
|
||||
border-radius: 30rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
}
|
||||
.infobox1 .info2 .block {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 36rpx 0 26rpx 36rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.infobox1 .info2 .block .bg_img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
|
||||
.infobox1 .info2 .block:first-child {
|
||||
margin-right: 23rpx;
|
||||
}
|
||||
|
||||
.infobox1 .info2 .block .num {
|
||||
font-size: 48rpx;
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.infobox1 .info2 .block .txt {
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
color: #a58e6d;
|
||||
}
|
||||
|
||||
.infobox1 .info2 .block .tip .tip1 {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.infobox1 .info2 .block .tip .right image {
|
||||
width: 10rpx;
|
||||
height: 20rpx;
|
||||
}
|
||||
|
||||
.infobox1 .info2 .border {
|
||||
width: 2px;
|
||||
height: 86rpx;
|
||||
}
|
||||
.infobox2 {
|
||||
margin: 64rpx 34rpx 0;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
.infobox2 .title {
|
||||
font-size: 32rpx;
|
||||
line-height: 1;
|
||||
font-weight: bold;
|
||||
color: #030000;
|
||||
}
|
||||
.infobox2 .info {
|
||||
margin-top: 56rpx;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.infobox2 .info .block {
|
||||
width: 25%;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.infobox2 .info .block .img image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.infobox2 .info .block .num {
|
||||
position: absolute;
|
||||
top: -5rpx;
|
||||
right: -15rpx;
|
||||
border-radius: 50%;
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
background: #eb5858;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
.infobox2 .info .block .img {
|
||||
position: relative;
|
||||
/*width: 64rpx;*/
|
||||
/*height: 70rpx;*/
|
||||
/*margin: auto;*/
|
||||
}
|
||||
.infobox2 .info .block .tip1 {
|
||||
margin-top: 36rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
}
|
||||
@ -0,0 +1,179 @@
|
||||
page {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.infobox1 {
|
||||
margin: 30rpx;
|
||||
border-radius: 30rpx;
|
||||
/*box-shadow: 0px 1px 8px #E5E5E5;*/
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 34rpx;
|
||||
background: #fff;
|
||||
}
|
||||
/* 去掉背景色和内外边距 */
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: inherit;
|
||||
position: static;
|
||||
}
|
||||
button:after {
|
||||
content: none;
|
||||
}
|
||||
/* 去掉边框 */
|
||||
button::after {
|
||||
border: none;
|
||||
}
|
||||
.infobox1 .avatar_box {
|
||||
width: max-content;
|
||||
}
|
||||
.infobox1 .avatar_box .headimg {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.nickname {
|
||||
margin-left: 32rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.infobox2 {
|
||||
margin: 30rpx;
|
||||
border-radius: 30rpx;
|
||||
/*box-shadow: 0px 1px 8px #E5E5E5;*/
|
||||
background: #fff;
|
||||
}
|
||||
.infobox2 > .title {
|
||||
padding: 39rpx 34rpx 62rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
line-height: 1;
|
||||
}
|
||||
.infobox2 > .block_list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 34rpx 60rpx;
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
font-weight: 500;
|
||||
}
|
||||
.infobox2 > .block_list > .label {
|
||||
/*color: #3D3E3E;*/
|
||||
}
|
||||
.infobox2 > .block_list > .label > text {
|
||||
color: #eb5858;
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
.infobox2 > .block_list > .value {
|
||||
margin-left: 45rpx;
|
||||
/*color: #666666;*/
|
||||
position: relative;
|
||||
}
|
||||
.infobox2 > .block_list > .getmobile {
|
||||
background: #d3bc8d;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
padding: 14rpx 28rpx;
|
||||
border-radius: 30rpx;
|
||||
margin-left: 50rpx;
|
||||
position: relative;
|
||||
}
|
||||
.infobox2 > .block_list > .getmobile > .mobilebtn {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.infobox3 {
|
||||
margin: 30rpx;
|
||||
border-radius: 30rpx;
|
||||
/*box-shadow: 0px 1px 8px #E5E5E5;*/
|
||||
background: #fff;
|
||||
}
|
||||
.infobox3 > .title {
|
||||
padding: 39rpx 33rpx 62rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
line-height: 1;
|
||||
}
|
||||
.infobox3 > .block_list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 30rpx 35rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.infobox3 > .block_list > .label {
|
||||
color: #030000;
|
||||
}
|
||||
.infobox3 > .block_list > .label > text {
|
||||
color: #eb5858;
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
.infobox3 > .block_list > .value {
|
||||
color: #000000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.infobox3 > .block_list > .value > .picker {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.infobox3 > .block_list > .value > .input input {
|
||||
text-align: right;
|
||||
}
|
||||
.infobox3 > .block_list > .value > .righticon {
|
||||
width: 10rpx;
|
||||
height: 20rpx;
|
||||
margin-left: 22rpx;
|
||||
}
|
||||
|
||||
.submitbtn {
|
||||
position: absolute;
|
||||
bottom: 100rpx;
|
||||
width: 400rpx;
|
||||
left: 50%;
|
||||
margin-left: -200rpx;
|
||||
}
|
||||
|
||||
.btn_box {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 153rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: 0rpx -3rpx 7rpx 1rpx rgba(173, 191, 207, 0.21);
|
||||
padding-bottom: 21rpx;
|
||||
}
|
||||
|
||||
.btn_box .btn {
|
||||
width: 690rpx;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
background: #000000;
|
||||
border-radius: 45rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
}
|
||||
@ -0,0 +1,402 @@
|
||||
import dayjs from "dayjs";
|
||||
import {
|
||||
UpdateUser,
|
||||
GetProvince,
|
||||
GetAreaListByPid,
|
||||
} from "../../utils/Interface";
|
||||
import { Component } from "react";
|
||||
import Taro from "@tarojs/taro";
|
||||
// 引入 Swiper, SwiperItem 组件
|
||||
import {
|
||||
Block,
|
||||
View,
|
||||
Text,
|
||||
Image,
|
||||
Input,
|
||||
Button,
|
||||
// Picker,
|
||||
} from "@tarojs/components";
|
||||
import { Toast, Picker, Popup, DatetimePicker } from "@antmjs/vantui";
|
||||
|
||||
import "./userInfoDetail.less";
|
||||
|
||||
/*** redux ***/
|
||||
import { connect } from "react-redux";
|
||||
import { userRefresh } from "../../store/features/userInfo";
|
||||
/*** redux end ***/
|
||||
|
||||
/** 自定义组件 **/
|
||||
import Navbar from "../../components/navbar/navbar";
|
||||
/** 自定义组件 **/
|
||||
|
||||
import { getGlobalData, setGlobalData } from "../../utils/global";
|
||||
import { loading, msg } from "../../utils/traoAPI";
|
||||
import FormData from "../../utils/wx-formdata/formData";
|
||||
|
||||
class UserInfoDetail extends Component<any, any> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
name: "用户信息",
|
||||
menu: {},
|
||||
titleHeight: "",
|
||||
style: "font-size: 26rpx; font-weight: 500; color: #ccc",
|
||||
userInfo: {
|
||||
mobile: this.props.mobile,
|
||||
nickname: this.props.nickname,
|
||||
headimg: this.props.headimg,
|
||||
birthday: this.props.birthday,
|
||||
},
|
||||
cityShow: false,
|
||||
timeShow: false,
|
||||
columns: [
|
||||
{
|
||||
values: [],
|
||||
classNameName: "column1",
|
||||
defaultIndex: 0,
|
||||
},
|
||||
{
|
||||
values: [],
|
||||
classNameName: "column2",
|
||||
defaultIndex: 0,
|
||||
},
|
||||
{
|
||||
values: [],
|
||||
classNameName: "column3",
|
||||
defaultIndex: 0,
|
||||
},
|
||||
],
|
||||
leve1region: [],
|
||||
leve2region: [],
|
||||
leve3region: [],
|
||||
loading: true,
|
||||
form: {
|
||||
nickname: "", // 昵称
|
||||
provinceId: "", // 省份
|
||||
cityId: "", // 市
|
||||
areaId: "", // 县区
|
||||
file: null,
|
||||
},
|
||||
// maxDate: new Date().getTime(),
|
||||
// minDate: new Date("1949-10-01").getTime(),
|
||||
currentDate: new Date().getTime(),
|
||||
minDate: new Date("1949-10-01").getTime(),
|
||||
};
|
||||
}
|
||||
|
||||
async onLoad() {
|
||||
if (!getGlobalData("token")) {
|
||||
// await this.WCUserLogin();
|
||||
}
|
||||
const menu = Taro.getMenuButtonBoundingClientRect();
|
||||
const titleHeight =
|
||||
"height:" + (Number(menu.top) + Number(menu.height) + 10) + "px;";
|
||||
this.setState({ titleHeight, menu });
|
||||
|
||||
this.initData();
|
||||
}
|
||||
componentDidMount() {}
|
||||
|
||||
componentWillUnmount() {}
|
||||
|
||||
componentDidShow() {
|
||||
console.log("this.props", this.props);
|
||||
}
|
||||
|
||||
componentDidHide() {}
|
||||
|
||||
async initData() {
|
||||
await this.getProvince();
|
||||
}
|
||||
|
||||
getProvince = async () => {
|
||||
let res = await GetProvince();
|
||||
if (res.data.code === 200) {
|
||||
let { columns } = this.state;
|
||||
let values = res.data.data.map((item: any) => item.name);
|
||||
columns[0].values = values;
|
||||
this.setState({ leve1region: res.data.data, columns });
|
||||
|
||||
this.GetAreaListByPid_level2(res.data.data[0].id);
|
||||
}
|
||||
};
|
||||
|
||||
GetAreaListByPid_level2 = async (level2) => {
|
||||
let res = await GetAreaListByPid({ pid: level2 });
|
||||
if (res.data.code === 200) {
|
||||
let { columns } = this.state;
|
||||
let values = res.data.data.map((item: any) => item.name);
|
||||
columns[1].values = values;
|
||||
this.setState({ leve2region: res.data.data, columns });
|
||||
|
||||
this.GetAreaListByPid_level3(res.data.data[0].id);
|
||||
}
|
||||
};
|
||||
|
||||
GetAreaListByPid_level3 = async (level3) => {
|
||||
let res = await GetAreaListByPid({ pid: level3 });
|
||||
if (res.data.code === 200) {
|
||||
let { columns } = this.state;
|
||||
let values = res.data.data.map((item: any) => item.name);
|
||||
columns[2].values = values;
|
||||
this.setState({ leve3region: res.data.data, columns });
|
||||
}
|
||||
};
|
||||
|
||||
UpdateUser = async () => {
|
||||
let { form, userInfo } = this.state;
|
||||
let formData = new FormData();
|
||||
formData.append("provinceId", form.provinceId);
|
||||
formData.append("cityId", form.cityId);
|
||||
formData.append("areaId", form.areaId);
|
||||
formData.append("birthday", userInfo.birthday);
|
||||
formData.append("nickname", userInfo.nickname);
|
||||
// formData.appendFile("file", userInfo.headimg, "avatar.png");
|
||||
console.log("form userInfo", form, userInfo);
|
||||
// console.log("formData",formData.)
|
||||
let data = formData.getData();
|
||||
console.log("data", data.contentType);
|
||||
let res = await UpdateUser(data);
|
||||
console.log("UpdateUser", res);
|
||||
};
|
||||
|
||||
getChooseAvatar = (event) => {
|
||||
let { userInfo } = this.state;
|
||||
userInfo.headimg = event.detail.avatarUrl;
|
||||
this.setState({ userInfo });
|
||||
};
|
||||
|
||||
onSubmit = async () => {
|
||||
const { userInfo, form } = this.state;
|
||||
console.log(userInfo, form);
|
||||
if (!userInfo.headimg) return msg("请点击授权头像");
|
||||
if (!userInfo.nickname) return msg("请输入昵称");
|
||||
if (!form.provinceId) return msg("请选择您所在的地区");
|
||||
if (!userInfo.birthday) return msg("请选择您的生日");
|
||||
loading("提交中");
|
||||
|
||||
// @ts-ignore
|
||||
await this.UpdateUser();
|
||||
};
|
||||
|
||||
onSkip = () => {};
|
||||
|
||||
pickerChange = (event) => {
|
||||
console.log("pickerChange", event);
|
||||
};
|
||||
|
||||
onPickerColumnChange = (event) => {
|
||||
console.log("onPickerColumnChange", event);
|
||||
};
|
||||
|
||||
onCityChange = async (picker) => {
|
||||
if (picker.detail.index === 0) {
|
||||
this.setState({ loading: true });
|
||||
|
||||
let { leve1region } = this.state;
|
||||
let obj = leve1region.find(
|
||||
(item: any) => item.name === picker.detail.value[0]
|
||||
);
|
||||
await this.GetAreaListByPid_level2(obj.id);
|
||||
this.setState({ loading: false });
|
||||
return false;
|
||||
}
|
||||
if (picker.detail.index === 1) {
|
||||
this.setState({ loading: true });
|
||||
let { leve2region } = this.state;
|
||||
let obj = leve2region.find(
|
||||
(item: any) => item.name === picker.detail.value[1]
|
||||
);
|
||||
await this.GetAreaListByPid_level3(obj.id);
|
||||
this.setState({ loading: false });
|
||||
}
|
||||
};
|
||||
|
||||
onCityConfirm = (picker) => {
|
||||
const index = picker.detail.index;
|
||||
let { form } = this.state;
|
||||
form.province = picker.detail.value[0];
|
||||
form.provinceId = this.state.leve1region[index[0]].id;
|
||||
form.city = picker.detail.value[1];
|
||||
form.cityId = this.state.leve2region[index[1]].id;
|
||||
form.area = picker.detail.value[2];
|
||||
form.areaId = this.state.leve3region[index[2]].id;
|
||||
this.setState({ form });
|
||||
this.onCityCancel();
|
||||
};
|
||||
|
||||
onCityCancel = () => {
|
||||
this.setState({ cityShow: false });
|
||||
};
|
||||
|
||||
onCityShow = () => {
|
||||
this.setState({ cityShow: true });
|
||||
};
|
||||
closeShow = () => {
|
||||
this.setState({ cityShow: false });
|
||||
};
|
||||
|
||||
onTimeShow = () => {
|
||||
this.setState({ timeShow: true });
|
||||
};
|
||||
closeTime = () => {
|
||||
this.setState({ timeShow: false });
|
||||
};
|
||||
onTimePickerCancel = () => {
|
||||
console.log("onTimePickerCancel");
|
||||
this.closeTime();
|
||||
};
|
||||
onTimePickerConfirm = (picker) => {
|
||||
let { userInfo } = this.state;
|
||||
userInfo.birthday = dayjs(picker.detail.value).format("YYYY-MM-DD");
|
||||
if (picker.detail.value) {
|
||||
this.setState({ userInfo });
|
||||
}
|
||||
this.closeTime();
|
||||
};
|
||||
|
||||
onNicknameChange = (event) => {
|
||||
console.log("onNicknameChange", event);
|
||||
let { userInfo } = this.state;
|
||||
userInfo.nickname = event.detail.value;
|
||||
this.setState({ userInfo });
|
||||
};
|
||||
onNickNameReView = (event) => {
|
||||
console.log("onNickNameReView", event);
|
||||
};
|
||||
|
||||
render() {
|
||||
let { userInfo, columns, cityShow, timeShow, form, minDate } = this.state;
|
||||
|
||||
console.log("userInfo", userInfo);
|
||||
|
||||
const formatter = (type, value) => {
|
||||
if (type === "year") {
|
||||
return `${value}年`;
|
||||
}
|
||||
if (type === "month") {
|
||||
return `${value}月`;
|
||||
}
|
||||
return `${value}日`;
|
||||
};
|
||||
return (
|
||||
<Block>
|
||||
<Navbar></Navbar>
|
||||
<View className="infobox1">
|
||||
<Button
|
||||
className="avatar_box"
|
||||
open-type="chooseAvatar"
|
||||
onChooseAvatar={this.getChooseAvatar}
|
||||
hover-className="none"
|
||||
>
|
||||
{userInfo.headimg ? (
|
||||
<Image className="headimg" src={userInfo.headimg}></Image>
|
||||
) : (
|
||||
<Image
|
||||
className="headimg"
|
||||
src={require("../../img/welcome/avatar.png")}
|
||||
></Image>
|
||||
)}
|
||||
</Button>
|
||||
<Input
|
||||
type="nickname"
|
||||
className="nickname"
|
||||
placeholder="请填写您的昵称"
|
||||
value={userInfo.nickname}
|
||||
onInput={this.onNicknameChange}
|
||||
></Input>
|
||||
</View>
|
||||
|
||||
<View className="infobox2">
|
||||
<View className="title border">绑定手机</View>
|
||||
<View className="block_list flex aitems sb">
|
||||
<View className="label">
|
||||
手机号<text>*</text>
|
||||
</View>
|
||||
<View className="value">{userInfo.mobile}</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="infobox3">
|
||||
<View className="title border">基础信息</View>
|
||||
<View className="block_list" onClick={this.onCityShow}>
|
||||
<View className="label">
|
||||
地区(省市区)<text>*</text>
|
||||
</View>
|
||||
<View className="value">
|
||||
<View>
|
||||
{form.province}
|
||||
{form.city}
|
||||
{form.area}
|
||||
</View>
|
||||
<View className="righticon">
|
||||
<Image
|
||||
src={require("../../img/user/right.png")}
|
||||
mode="aspectFill"
|
||||
></Image>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className="block_list" onClick={this.onTimeShow}>
|
||||
<View className="label">
|
||||
生日<text>*</text>
|
||||
</View>
|
||||
<View className="value">
|
||||
{/* <picker className="picker" mode="date" bindchange="bindbirthdayPickerChange" end="{{dateend}}" value="{{ageindex}}" range="{{age}}">picker</picker> */}
|
||||
<View>{userInfo.birthday}</View>
|
||||
<View className="righticon">
|
||||
<Image
|
||||
src={require("../../img/user/right.png")}
|
||||
mode="aspectFill"
|
||||
></Image>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="btn_box flex aitems jcenter">
|
||||
<View className="btn" onClick={this.onSubmit}>
|
||||
保存
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Popup show={cityShow} position={"bottom"} onClose={this.closeShow}>
|
||||
<Picker
|
||||
showToolbar
|
||||
title="请选择您所在的地区"
|
||||
defaultIndex={0}
|
||||
columns={columns}
|
||||
onChange={this.onCityChange}
|
||||
onCancel={this.onCityCancel}
|
||||
onConfirm={this.onCityConfirm}
|
||||
/>
|
||||
</Popup>
|
||||
|
||||
<Popup show={timeShow} position={"bottom"} onClose={this.closeTime}>
|
||||
<DatetimePicker
|
||||
type="date"
|
||||
value={dayjs(userInfo.birthday).valueOf()}
|
||||
minDate={minDate}
|
||||
maxDate={Date.now()}
|
||||
onCancel={this.onTimePickerCancel}
|
||||
onConfirm={this.onTimePickerConfirm}
|
||||
/>
|
||||
</Popup>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
mobile: state.userInfo.mobile,
|
||||
nickname: state.userInfo.nickname,
|
||||
headimg: state.userInfo.headimg,
|
||||
birthday: state.userInfo.birthday,
|
||||
});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
userRefresh(data) {
|
||||
dispatch(userRefresh(data));
|
||||
},
|
||||
});
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(UserInfoDetail);
|
||||
@ -0,0 +1,37 @@
|
||||
import Taro from "@tarojs/taro";
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
|
||||
import { RefreshWxUserInfo } from "../../utils/Interface";
|
||||
|
||||
const userInfoReducer = createSlice({
|
||||
name: "userInfo", // store的名字
|
||||
initialState: {
|
||||
mobile: "",
|
||||
nickname: "",
|
||||
headimg: "",
|
||||
birthday: "",
|
||||
},
|
||||
reducers: {
|
||||
setMobile(state, { payload }) {
|
||||
state.mobile = payload;
|
||||
},
|
||||
setNickname(state, { payload }) {
|
||||
state.nickname = payload;
|
||||
},
|
||||
setHeadimg(state, { payload }) {
|
||||
state.headimg = payload;
|
||||
},
|
||||
|
||||
userRefresh(state, { payload }) {
|
||||
console.log("userRefresh payload", payload);
|
||||
state.mobile = payload.mobile || "";
|
||||
state.nickname = payload.nickname || "";
|
||||
state.headimg = payload.headimg || "";
|
||||
state.birthday = payload.birthday || "";
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const { setMobile, setNickname, setHeadimg, userRefresh } =
|
||||
userInfoReducer.actions;
|
||||
export default userInfoReducer.reducer;
|
||||
@ -0,0 +1 @@
|
||||
Subproject commit e2aefc2d1059cb09b17c3dc9a132b0db92cdcdfb
|
||||
Loading…
Reference in New Issue