You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
570 lines
16 KiB
TypeScript
570 lines
16 KiB
TypeScript
import dayjs from "dayjs";
|
|
import {
|
|
// MpSplashDetail,
|
|
// UpUserNick,
|
|
// UserInfoUp,
|
|
// WCUserLogin,
|
|
UpdateUser,
|
|
UpdateUserUploadFile,
|
|
GetProvince,
|
|
GetAreaListByPid,
|
|
} 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";
|
|
import { Toast, Popup, Picker, DatetimePicker } from "@antmjs/vantui";
|
|
|
|
import "taro-ui/dist/style/components/button.scss"; // 按需引入
|
|
import "./userInfo.less";
|
|
|
|
/*** redux ***/
|
|
import { connect } from "react-redux";
|
|
import { userRefresh } from "../../store/features/userInfo";
|
|
/*** redux end ***/
|
|
|
|
/** 自定义组件 **/
|
|
import Navbar from "../../components/navbar/navbar";
|
|
import PopupAlert from "../../components/popup/popup-alert";
|
|
/** 自定义组件 **/
|
|
|
|
import { loading, msg, go } from "../../utils/traoAPI";
|
|
import FormData from "../../utils/wxFormdata/formData";
|
|
|
|
// 仅注册成功后进入此页面
|
|
|
|
class UserInfo extends Component<any, any> {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
name: "用户信息",
|
|
style: "font-size: 26rpx; font-weight: 400; color: #ccc",
|
|
userInfo: {
|
|
...this.props.userInfo,
|
|
},
|
|
isShowIntegralText: false,
|
|
cityShow: false,
|
|
timeShow: false,
|
|
columns: [
|
|
{
|
|
values: [],
|
|
className: "column1",
|
|
defaultIndex: 0,
|
|
},
|
|
{
|
|
values: [],
|
|
className: "column2",
|
|
defaultIndex: 0,
|
|
},
|
|
{
|
|
values: [],
|
|
className: "column3",
|
|
defaultIndex: 0,
|
|
},
|
|
],
|
|
leve1region: [],
|
|
leve2region: [],
|
|
leve3region: [],
|
|
loading: true,
|
|
form: {
|
|
nickname: "", // 昵称
|
|
province: "",
|
|
city: "", // 市
|
|
area: "", // 县区
|
|
provinceId: "", // 省份
|
|
cityId: "", // 市
|
|
areaId: "", // 县区
|
|
headimg: null,
|
|
},
|
|
// maxDate: new Date().getTime(),
|
|
// minDate: new Date("1949-10-01").getTime(),
|
|
minDate: new Date("1949-10-01").getTime(),
|
|
birthday: this.props.userInfo.birthday
|
|
? dayjs(this.props.userInfo.birthday).valueOf()
|
|
: dayjs().valueOf(),
|
|
isSubmit: false, // 是否允许提交
|
|
};
|
|
}
|
|
|
|
async onLoad() {
|
|
if (!Taro.getStorageSync("token")) {
|
|
// await this.WCUserLogin();
|
|
}
|
|
|
|
this.initData();
|
|
}
|
|
componentDidMount() {}
|
|
|
|
componentWillUnmount() {}
|
|
|
|
componentDidShow() {}
|
|
|
|
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 isTmpFile = userInfo.headimg.indexOf("//tmp") > -1;
|
|
let isWXFile = userInfo.headimg.indexOf("wxfile://") > -1;
|
|
if (isTmpFile || isWXFile) {
|
|
let formData = {
|
|
province: form.province,
|
|
city: form.city,
|
|
area: form.area,
|
|
provinceId: form.provinceId,
|
|
cityId: form.cityId,
|
|
areaId: form.areaId,
|
|
birthday: userInfo.birthday,
|
|
nickname: userInfo.nickname,
|
|
headimg: userInfo.headimg,
|
|
file: userInfo.headimg || null,
|
|
};
|
|
let res = await UpdateUserUploadFile(formData);
|
|
console.log("Res", res);
|
|
if (res.code === 200) {
|
|
userInfo.province = res.data.province;
|
|
userInfo.city = res.data.city;
|
|
userInfo.area = res.data.area;
|
|
userInfo.provinceId = res.data.provinceId;
|
|
userInfo.cityId = res.data.cityId;
|
|
userInfo.areaId = res.data.areaId;
|
|
userInfo.nickname = res.data.nickname;
|
|
userInfo.headimg = res.data.headimg;
|
|
userInfo.integralText = res.data.integralText;
|
|
this.props.userRefresh(userInfo);
|
|
this.setState({ userInfo: userInfo });
|
|
if (res.data.integralText) {
|
|
this.setState({ isShowIntegralText: true });
|
|
} else {
|
|
msg("更新成功");
|
|
this.onSkip();
|
|
}
|
|
}
|
|
} else {
|
|
let formData = new FormData();
|
|
formData.append("province", form.province);
|
|
formData.append("city", form.city);
|
|
formData.append("area", form.area);
|
|
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.append("headimg", userInfo.headimg);
|
|
formData.append("file", null);
|
|
let data = formData.getData();
|
|
let res = await UpdateUser(data);
|
|
if (res.data.code === 200) {
|
|
userInfo.province = res.data.data.province;
|
|
userInfo.city = res.data.data.city;
|
|
userInfo.area = res.data.data.area;
|
|
userInfo.provinceId = res.data.data.provinceId;
|
|
userInfo.cityId = res.data.data.cityId;
|
|
userInfo.areaId = res.data.data.areaId;
|
|
userInfo.nickname = res.data.data.nickname;
|
|
userInfo.headimg = res.data.data.headimg;
|
|
userInfo.integralText = res.data.data.integralText;
|
|
this.props.userRefresh(userInfo);
|
|
this.setState({ userInfo: userInfo });
|
|
|
|
if (res.data.data.integralText) {
|
|
this.setState({ isShowIntegralText: true });
|
|
} else {
|
|
msg("更新成功");
|
|
this.onSkip();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
getChooseAvatar = (event) => {
|
|
console.log("getChooseAvatar", event);
|
|
|
|
let { userInfo } = this.state;
|
|
userInfo.headimg = event.detail.avatarUrl;
|
|
this.setState({ userInfo });
|
|
|
|
this.isSubmitCheck();
|
|
};
|
|
|
|
onSubmit = async () => {
|
|
const { userInfo, form } = this.state;
|
|
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();
|
|
|
|
// // @ts-ignore
|
|
// UpUserNick({
|
|
// headimg: userInfo.headimg,
|
|
// nickname: userInfo.nickname,
|
|
// }).then((res) => {
|
|
// loading("请稍等");
|
|
// const data = {
|
|
// birthday,
|
|
// province: form.provinceId,
|
|
// city: form.cityId,
|
|
// area: form.areaId,
|
|
// };
|
|
// // @ts-ignore
|
|
// UserInfoUp(data).then((res) => {
|
|
// msg(res.data.msg);
|
|
// this.onSkip();
|
|
// });
|
|
// });
|
|
};
|
|
|
|
onSkip = () => {
|
|
// 仅注册账号进入个人信息完善页。此时判断是否扫码进入的小程序，如果是扫码进入，提交与跳过都是回到主页
|
|
const isScan = Taro.getStorageSync("isScan");
|
|
if (isScan) {
|
|
// Taro.setStorageSync("isScanNotRegisterSkip", true);
|
|
Taro.switchTab({
|
|
url: "/pages/index/index",
|
|
});
|
|
return;
|
|
}
|
|
let isInstrumentJump = Taro.getStorageSync("isInstrumentJump");
|
|
if (isInstrumentJump === "true") {
|
|
go("/pages/instrument/instrument");
|
|
} else {
|
|
Taro.switchTab({
|
|
url: "/pages/user/user",
|
|
});
|
|
}
|
|
};
|
|
|
|
pickerChange = (event) => {
|
|
console.log("pickerChange", event);
|
|
};
|
|
|
|
onPickerColumnChange = (event) => {
|
|
console.log("onPickerColumnChange", event);
|
|
};
|
|
|
|
onCityChange = async (picker) => {
|
|
console.log("onCityChange", 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();
|
|
|
|
this.isSubmitCheck();
|
|
};
|
|
|
|
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();
|
|
|
|
this.isSubmitCheck();
|
|
};
|
|
|
|
onNicknameChange = (event) => {
|
|
let { userInfo } = this.state;
|
|
userInfo.nickname = event.detail.value;
|
|
this.setState({ userInfo });
|
|
|
|
this.isSubmitCheck();
|
|
};
|
|
onNickNameReview = (event) => {
|
|
console.log("onNickNameReview", event);
|
|
};
|
|
|
|
isSubmitCheck() {
|
|
let { userInfo, form } = this.state;
|
|
|
|
if (
|
|
userInfo.nickname &&
|
|
userInfo.headimg &&
|
|
form.province &&
|
|
form.city &&
|
|
form.area &&
|
|
userInfo.birthday
|
|
) {
|
|
this.setState({ isSubmit: true });
|
|
} else {
|
|
this.setState({ isSubmit: false });
|
|
}
|
|
}
|
|
|
|
closeIntegralText = () => {
|
|
this.setState({ isShowIntegralText: false });
|
|
setTimeout(() => {
|
|
this.onSkip();
|
|
}, 600);
|
|
};
|
|
|
|
onDateChange = (e) => {
|
|
console.log("onDateChange", e);
|
|
};
|
|
|
|
render() {
|
|
let {
|
|
style,
|
|
userInfo,
|
|
columns,
|
|
cityShow,
|
|
timeShow,
|
|
form,
|
|
minDate,
|
|
isSubmit,
|
|
isShowIntegralText,
|
|
birthday,
|
|
} = this.state;
|
|
const formatter = (type, value) => {
|
|
if (type === "year") {
|
|
return `${value}年`;
|
|
}
|
|
if (type === "month") {
|
|
return `${value}月`;
|
|
}
|
|
return `${value}日`;
|
|
};
|
|
|
|
return (
|
|
<Block>
|
|
<PopupAlert
|
|
isShow={isShowIntegralText}
|
|
isClose={true}
|
|
title="提示"
|
|
content={userInfo.integralText}
|
|
confirmButtonText="确定"
|
|
textAlgin="center"
|
|
close={this.closeIntegralText}
|
|
confirm={this.closeIntegralText}
|
|
/>
|
|
<Navbar></Navbar>
|
|
<View className="main">
|
|
<View className="title">个人信息</View>
|
|
<View className="txt">请完善您的个人信息</View>
|
|
<View className="txt">为您提供针对性的服务内容和指引</View>
|
|
<Button
|
|
className="avatar_box"
|
|
open-type="chooseAvatar"
|
|
onChooseAvatar={this.getChooseAvatar}
|
|
>
|
|
{!userInfo.headimg ? (
|
|
<Block>
|
|
<Image
|
|
className="avatar"
|
|
src={require("../../img/welcome/avatar.png")}
|
|
/>
|
|
<View className="btn_avatar">点击授权头像</View>
|
|
</Block>
|
|
) : (
|
|
<Image className="avatar" src={userInfo.headimg}></Image>
|
|
)}
|
|
</Button>
|
|
<View className="form">
|
|
<View className="form_item">
|
|
<View className="label">昵称</View>
|
|
<Input
|
|
type="nickname"
|
|
className="ipt nickname"
|
|
placeholder="请填写您的昵称"
|
|
placeholder-style={style}
|
|
value={userInfo.nickname}
|
|
maxlength={20}
|
|
onInput={this.onNicknameChange}
|
|
onNickNameReview={this.onNickNameReview}
|
|
></Input>
|
|
</View>
|
|
<View className="form_item">
|
|
<View className="label">地区/省市区</View>
|
|
<Input
|
|
onClick={this.onCityShow}
|
|
disabled
|
|
className="ipt"
|
|
placeholder="请选择您所在的地区/省市区"
|
|
value={form.province + form.city + form.area}
|
|
></Input>
|
|
<Image
|
|
className="arrow"
|
|
src={require("../../img/welcome/arrow-down.png")}
|
|
></Image>
|
|
</View>
|
|
<View className="form_item">
|
|
<View className="label">生日</View>
|
|
<Input
|
|
onClick={this.onTimeShow}
|
|
disabled
|
|
className="ipt"
|
|
placeholder="请选择您的生日"
|
|
placeholder-style={style}
|
|
value={userInfo.birthday}
|
|
></Input>
|
|
{/* <Picker
|
|
mode="date"
|
|
value={userInfo.birthday}
|
|
onChange={this.onDateChange}
|
|
>
|
|
<Input
|
|
// onClick={this.onTimeShow}
|
|
disabled
|
|
className="ipt"
|
|
placeholder="请选择您的生日"
|
|
placeholder-style={style}
|
|
value={userInfo.birthday}
|
|
></Input>
|
|
</Picker> */}
|
|
<Image
|
|
className="arrow"
|
|
src={require("../../img/welcome/arrow-down.png")}
|
|
></Image>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View className="footer">
|
|
{isSubmit ? (
|
|
<View className="btn" onClick={this.onSubmit}>
|
|
确认提交
|
|
</View>
|
|
) : (
|
|
<View className="btn btn-disable" onClick={this.onSubmit}>
|
|
确认提交
|
|
</View>
|
|
)}
|
|
|
|
<View className="text" onClick={this.onSkip}>
|
|
<Text style="margin-right: 6rpx;">跳过</Text>
|
|
<Image
|
|
src={require("../../img/right.png")}
|
|
style="width: 30rpx;height:30rpx"
|
|
mode="aspectFit"
|
|
/>
|
|
</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"
|
|
formatter={formatter}
|
|
value={birthday}
|
|
minDate={minDate}
|
|
maxDate={Date.now()}
|
|
onCancel={this.onTimePickerCancel}
|
|
onConfirm={this.onTimePickerConfirm}
|
|
/>
|
|
</Popup>
|
|
</Block>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => ({
|
|
userInfo: state.userInfo,
|
|
});
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
userRefresh(data) {
|
|
dispatch(userRefresh(data));
|
|
},
|
|
});
|
|
export default connect(mapStateToProps, mapDispatchToProps)(UserInfo);
|