add:自定义导航栏，个人信息页
blak-kong
2 years ago
parent
db7336cd5a
commit
6e9da4052a
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: "隐私政策",
|
||||
});
|
||||
@ -0,0 +1,43 @@
|
||||
import { MpSplashDetail, WCUserLogin } from "../../utils/Interface";
|
||||
import { Component, PropsWithChildren, useEffect, useState } from "react";
|
||||
import Taro from "@tarojs/taro";
|
||||
// 引入 Swiper, SwiperItem 组件
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
Image,
|
||||
Video,
|
||||
Swiper,
|
||||
SwiperItem,
|
||||
} from "@tarojs/components";
|
||||
|
||||
import "./template.less";
|
||||
|
||||
const app = Taro.getApp();
|
||||
|
||||
export default class Index extends Component<any, any> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
name: "隐私政策",
|
||||
};
|
||||
}
|
||||
|
||||
async onLoad() {
|
||||
console.log("app", app);
|
||||
}
|
||||
componentDidMount() {}
|
||||
|
||||
componentWillUnmount() {}
|
||||
|
||||
componentDidShow() {}
|
||||
|
||||
componentDidHide() {}
|
||||
|
||||
async initData() {}
|
||||
|
||||
render() {
|
||||
let { name } = this.state;
|
||||
return <View>{name}</View>;
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: "注册",
|
||||
navigationBarTitleText: "注册登录",
|
||||
});
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: "模板页",
|
||||
});
|
||||
@ -0,0 +1,149 @@
|
||||
/* pages/userInfo/userInfo.wxss */
|
||||
page {
|
||||
background: #f3f3f3;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.nav .logo {
|
||||
width: 223rpx;
|
||||
}
|
||||
|
||||
.nav .nav_box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.main {
|
||||
text-align: center;
|
||||
padding-bottom: 153rpx;
|
||||
}
|
||||
|
||||
.main .title {
|
||||
font-size: 48rpx;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
margin: 73rpx auto 48rpx;
|
||||
}
|
||||
|
||||
.main .txt {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.main .avatar_box {
|
||||
position: relative;
|
||||
width: max-content;
|
||||
margin: 78rpx auto 59rpx;
|
||||
}
|
||||
|
||||
.main .avatar_box .avatar {
|
||||
width: 147rpx;
|
||||
height: 147rpx;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 13rpx;
|
||||
}
|
||||
|
||||
.main .avatar_box .btn_avatar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 去掉背景色和内外边距 */
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: inherit;
|
||||
position: static;
|
||||
}
|
||||
button:after {
|
||||
content: none;
|
||||
}
|
||||
/* 去掉边框 */
|
||||
button::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.main .avatar_box .btn_avatar::after {
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.form {
|
||||
text-align: left;
|
||||
margin: 0 30rpx 0;
|
||||
}
|
||||
|
||||
.form .form_item {
|
||||
position: relative;
|
||||
margin-bottom: 35rpx;
|
||||
}
|
||||
|
||||
.form_item .arrow {
|
||||
position: absolute;
|
||||
bottom: 30rpx;
|
||||
right: 51rpx;
|
||||
width: 30rpx;
|
||||
height: 20rpx;
|
||||
}
|
||||
|
||||
.form .form_item .label {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #030000;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.form .form_item .label::after {
|
||||
content: "*";
|
||||
color: #eb5858;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.form .form_item .ipt {
|
||||
width: 90%;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dddddd;
|
||||
border-radius: 3rpx;
|
||||
padding-left: 28rpx;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
width: 100%;
|
||||
height: 153rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: 0rpx -3rpx 7rpx 1rpx rgba(173, 191, 207, 0.21);
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 540rpx;
|
||||
height: 90rpx;
|
||||
background: #000;
|
||||
border-radius: 45rpx;
|
||||
color: #fff;
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
margin: 21rpx 49rpx 42rpx 30rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
@ -0,0 +1,230 @@
|
||||
import {
|
||||
MpSplashDetail,
|
||||
UpUserNick,
|
||||
UserInfoUp,
|
||||
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";
|
||||
|
||||
import "taro-ui/dist/style/components/button.scss"; // 按需引入
|
||||
import "./userInfo.less";
|
||||
|
||||
import { getGlobalData, setGlobalData } from "../../utils/global";
|
||||
import { loading, msg } from "../../utils/traoAPI";
|
||||
|
||||
const app = Taro.getApp();
|
||||
|
||||
export default class UserInfo extends Component<any, any> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
name: "用户信息",
|
||||
menu: {},
|
||||
titleHeight: "",
|
||||
style: "font-size: 26rpx; font-weight: 500; color: #ccc",
|
||||
userInfo: {},
|
||||
cityShow: false,
|
||||
columns: [
|
||||
{
|
||||
values: [],
|
||||
className: "column1",
|
||||
defaultIndex: 0,
|
||||
},
|
||||
{
|
||||
values: [],
|
||||
className: "column2",
|
||||
defaultIndex: 0,
|
||||
},
|
||||
{
|
||||
values: [],
|
||||
className: "column3",
|
||||
defaultIndex: 0,
|
||||
},
|
||||
],
|
||||
leve1region: [],
|
||||
leve2region: [],
|
||||
leve3region: [],
|
||||
loading: true,
|
||||
form: {
|
||||
province: "",
|
||||
provinceId: null,
|
||||
city: "",
|
||||
cityId: null,
|
||||
area: "",
|
||||
areaId: null,
|
||||
},
|
||||
formatter(type, value) {
|
||||
if (type === "year") {
|
||||
return `${value}年`;
|
||||
}
|
||||
if (type === "month") {
|
||||
return `${value}月`;
|
||||
}
|
||||
return `${value}日`;
|
||||
},
|
||||
dateShow: false,
|
||||
maxDate: new Date().getTime(),
|
||||
minDate: new Date("1949-10-01").getTime(),
|
||||
birthday: "",
|
||||
};
|
||||
}
|
||||
|
||||
async onLoad() {
|
||||
console.log("app", app);
|
||||
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 });
|
||||
}
|
||||
componentDidMount() {}
|
||||
|
||||
componentWillUnmount() {}
|
||||
|
||||
componentDidShow() {}
|
||||
|
||||
componentDidHide() {}
|
||||
|
||||
async initData() {}
|
||||
|
||||
onChooseAvatar = (event) => {
|
||||
console.log("onChooseAvatar", event);
|
||||
};
|
||||
|
||||
onNicknameChange = (event) => {
|
||||
this.setState({ "userInfo.nickname": event.detail.value });
|
||||
};
|
||||
|
||||
onSubmit() {
|
||||
const { userInfo, form, birthday } = this.state;
|
||||
console.log(userInfo, form, birthday);
|
||||
if (!userInfo.headimg) return msg("请点击授权头像");
|
||||
if (!userInfo.nickname) return msg("请输入昵称");
|
||||
if (!form.provinceId) return msg("请选择您所在的地区");
|
||||
if (!birthday) return msg("请选择您的生日");
|
||||
loading("提交中");
|
||||
|
||||
// @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 = () => {};
|
||||
|
||||
onCityShow = () => {
|
||||
this.setState({ cityShow: true });
|
||||
};
|
||||
|
||||
onDateShow = () => {
|
||||
this.setState({ dateShow: true });
|
||||
};
|
||||
|
||||
render() {
|
||||
let { titleHeight, style, birthday, userInfo, form, menu } = this.state;
|
||||
return (
|
||||
<Block>
|
||||
<View style={"background:#fff;" + titleHeight} className="nav">
|
||||
<View
|
||||
className="nav_box"
|
||||
style={"top:" + menu.top + "px;height:" + menu.height + "px"}
|
||||
>
|
||||
<View className="logo">
|
||||
<Image src="https://oss.flossom.com/logo2.png" mode="widthFix" />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={titleHeight}></View>
|
||||
<View className="main">
|
||||
<View className="title">个人信息</View>
|
||||
<View className="txt">请完善您的个人信息</View>
|
||||
<View className="txt">为您提供针对性的服务内容和指引</View>
|
||||
<Button
|
||||
className="avatar_box"
|
||||
open-type="chooseAvatar"
|
||||
onChooseAvatar={this.onChooseAvatar}
|
||||
>
|
||||
{!userInfo.headimg ? (
|
||||
<Block>
|
||||
<Image className="avatar" src="/img/welcome/avatar.png"></Image>
|
||||
<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"
|
||||
placeholder="请填写您的昵称"
|
||||
placeholder-style={style}
|
||||
value={userInfo.nickname}
|
||||
onInput={this.onNicknameChange}
|
||||
></Input>
|
||||
</View>
|
||||
<View className="form_item">
|
||||
<View className="label">地区/省市区</View>
|
||||
<Input
|
||||
onClick={this.onCityShow}
|
||||
disabled
|
||||
className="ipt"
|
||||
placeholder="请选择您所在的地区/省市区"
|
||||
placeholder-style="{{ style }}"
|
||||
value={form.province + form.city + form.area}
|
||||
></Input>
|
||||
<Image
|
||||
className="arrow"
|
||||
src="/img/welcome/arrow-down.png"
|
||||
></Image>
|
||||
</View>
|
||||
<View className="form_item">
|
||||
<View className="label">生日</View>
|
||||
<Input
|
||||
onClick={this.onDateShow}
|
||||
disabled
|
||||
className="ipt"
|
||||
placeholder="请选择您的生日"
|
||||
placeholder-style="{{ style }}"
|
||||
value={birthday}
|
||||
></Input>
|
||||
<Image
|
||||
className="arrow"
|
||||
src="/img/welcome/arrow-down.png"
|
||||
></Image>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className="footer">
|
||||
<View className="btn" onClick={this.onSubmit}>
|
||||
确认提交
|
||||
</View>
|
||||
<View className="text" onClick={this.onSkip}>
|
||||
跳过{" "}
|
||||
</View>
|
||||
</View>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,55 @@
|
||||
const globalData = {
|
||||
// domain:'https://flossom.ecolite.com.cn',
|
||||
// domain: "https://project10.xlovery.com",
|
||||
// domain: "https://flossom.gzlingren.com",
|
||||
domain: "http://192.168.10.147:8080",
|
||||
imgUrl: "https://oss.flossom.com",
|
||||
imgUrl2: "https://oss.flossom.com",
|
||||
token: "",
|
||||
userinfo: {},
|
||||
params: {
|
||||
params: "",
|
||||
},
|
||||
bindid: "", //当前点击的进入主页的设备id
|
||||
bindinfo: {}, //当前点击的进入设备信息
|
||||
connection: 0, //连接秒速
|
||||
deviceName: "WM100",
|
||||
bluetoothinfo: {},
|
||||
matrixid: "", //头模仪器切换到fr200
|
||||
deviceInfo: {},
|
||||
InstrumentTypeEnum: {
|
||||
//仪器类型
|
||||
FR200: 1,
|
||||
MATRIX: 2,
|
||||
WL200: 3,
|
||||
FR380: 4,
|
||||
FR390: 5,
|
||||
M01: 6,
|
||||
},
|
||||
OtaDeviceTypeEnum: {
|
||||
WL200: "WL200",
|
||||
WE100: "WE100",
|
||||
FACIALMASK: "FacialMask",
|
||||
STAND: "Stand",
|
||||
},
|
||||
needAuthorization: false, // 是否需要授权隐私
|
||||
requestUrlList: [],
|
||||
safeAreaBottom: 0,
|
||||
deviceChineseName: {
|
||||
FR100: "",
|
||||
FR200: "",
|
||||
FR380: "",
|
||||
FR390: "",
|
||||
WL200: "",
|
||||
M01: "",
|
||||
WE100: "",
|
||||
WL200Stand: "舱体",
|
||||
},
|
||||
};
|
||||
|
||||
export function setGlobalData(key, val) {
|
||||
globalData[key] = val;
|
||||
}
|
||||
export function getGlobalData(key) {
|
||||
return globalData[key];
|
||||
}
|
||||
Binary file not shown.
Loading…
Reference in New Issue