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({
|
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