Skip to content

W
wx-school-app
Commit ac0c5f21 by kuangshu
Options

完善部分订单逻辑

parent 7f26b12b
Showing with 569 additions and 88 deletions
src/api/customer.ts
......@@ -31,10 +31,8 @@ export class PwdParams {
}
export const changePwdByCellphone = (data: PwdParams) =>
customerFetch({
url: `/app/customer/apwd/${data.loginAccount}/${data.password}/${
data.verification
}`,
method: 'PUT',
url: '/app/customer/forget/pwd',
method: 'POST',
});
type RegisiterPramas = {};
......@@ -46,3 +44,22 @@ export const wxUserRegister = (entity: RegisiterPramas) =>
method: 'POST',
data: entity,
});
type perfectionCustomerParams = {
birthDay?: string;
customerHead?: string;
customerId: number;
customerName: string;
customerSex: string;
email?: string;
entranceDate?: string;
idCard?: string;
studentNo?: string;
};
export const perfectionUserInfo = (entity: perfectionCustomerParams) =>
customerFetch({
url: '/app/customer/perfection/customer',
method: 'POST',
data: entity,
});
src/api/order.ts
......@@ -18,9 +18,7 @@ export const fetchAllOrder = (params: Params) =>
data: params,
});
export const fetchPayOrder = (
params: Params,
): Promise<ResponseDataEntity<ConsumeOrder[]>> =>
export const fetchPayOrder = (params: Params) =>
customerFetch({
url: '/consumeOrder/pageList',
data: {
......
src/app.scss
......@@ -89,3 +89,14 @@ button[disabled]:not([type]) {
width: 100%;
height: 100%;
}
.mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-color: rgba(25, 25, 25, 0.2);
z-index: 99;
}
\ No newline at end of file
src/app.tsx
......@@ -25,10 +25,10 @@ class App extends Component {
config: Config = {
pages: [
'pages/index/index',
'pages/Home/Home',
'pages/Order/OrderPay/OrderPay',
'pages/Order/OrderList/OrderList',
'pages/BarCode/BarCode',
'pages/Home/Home',
'pages/Announcement/Announcement',
'pages/UserSetting/UserSetting',
'pages/ResetPwd/ResetPwd',
......
src/components/Modal/Modal.scss
.Modal {
.mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-color: rgba(25, 25, 25, 0.2);
z-index: 99;
}
.Modal-Dialog {
position: absolute;
top: 208px;
......
src/components/ToastBox/ToastBox.scss
......@@ -15,6 +15,6 @@
opacity: 0;
}
.ToastBox.show {
top: 30px;
top: 100px;
opacity: 1;
}
src/pages/BarCode/BarCode.scss
.BarCode {
.OrderBox {
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
padding: 0 32px;
z-index: 2;
background-color: rgba(255, 255, 255, 0.5);
}
.blur {
filter: blur(10px);
}
.BarCodeBox {
position: relative;
width: 100%;
......
src/pages/BarCode/BarCode.tsx
......@@ -9,13 +9,39 @@ import wxbarcode from 'wxbarcode';
import './BarCode.scss';
import { UserState } from '../../store/rootReducers/userinfo';
import { connect } from '@tarojs/redux';
import OrderPay from '../Order/OrderPay/OrderPay';
import {
fetchPayOrder,
fetchOrderDetailAndPay,
fetchDeductionInfo,
} from '../../api/order';
import OrderInfo from '../Order/components/OrderInfo/OrderInfo';
import OrderTitle from '../Order/components/OrderTitle/OrderTitle';
import { ConsumeOrder, PaymentAndActiveInfo } from '../../api/baseClass';
type PageStateProps = {
userinfo: UserState;
};
type PageOwnProps = {};
type PageState = {
showPayOrder: boolean;
showBig: boolean;
orderInfo: ConsumeOrder;
payInfos: {
paymentAndActiveInfos: PaymentAndActiveInfo[];
paymentConfId: number;
};
deductionInfos: {
amiAccount: number;
beanAccount: number;
deductionMoney: number;
deductionType: string;
orderMoney: number;
payMoney: number;
payType: string;
remainAccount: number;
titlePerfix: string;
};
};
type IProps = PageStateProps & PageOwnProps;
......@@ -31,15 +57,106 @@ class BarCode extends Component {
constructor(props: PageOwnProps) {
super(props);
this.state = {
showPayOrder: false,
showBig: false,
orderInfo: {
actualMoney: undefined,
areaId: undefined,
areaName: '',
consumeType: '',
createAt: '',
customerCellphone: '',
customerId: undefined,
customerName: '',
deductionBean: undefined,
deductionMoney: undefined,
equipmentNum: '',
equipmentPosition: '',
id: undefined,
operateId: undefined,
operateName: '',
operationMode: '',
orderName: '',
orderNumber: '',
orderState: '',
outTradeNo: '',
payType: '',
payableMoney: undefined,
serviceId: undefined,
serviceName: '',
thirdDiscountMoney: undefined,
thirdTradeNumber: '',
updateDate: '',
},
payInfos: {
paymentAndActiveInfos: [],
paymentConfId: 0,
},
deductionInfos: {
amiAccount: 0,
beanAccount: 0,
deductionMoney: 0,
deductionType: '',
orderMoney: 0,
payMoney: 0,
payType: '',
remainAccount: 0,
titlePerfix: '',
},
};
}
componentWillMount() {
const { userinfo } = this.props;
fetchPayOrder({
customerId: userinfo.customerId,
})
.then(res => {
if (res.data.length) {
this.fetchOrder(res.data[0].id);
this.setState({ showPayOrder: true });
}
})
.catch(err => {
console.log(err);
});
wxbarcode.barcode('BarCode', userinfo.idBar, 646, 188);
}
fetchOrder(id: number) {
return fetchOrderDetailAndPay({
id,
})
.then(res => {
const { accounts, orderInfo, payInfos } = res;
this.setState({
accounts: accounts,
orderInfo: orderInfo,
payInfos: payInfos,
});
fetchDeductionInfo({
orderId: orderInfo.id,
payType: '',
paymentConfId: payInfos.paymentConfId,
})
.then(res => {
this.setState({
deductionInfos: res.data,
});
})
.catch(err => {
console.log(err);
Taro.showToast({
title: '获取抵扣信息失败',
icon: 'none',
});
});
})
.catch(err => {
console.log(err);
});
}
drawBarCode(showBig: boolean) {
const { userinfo } = this.props;
if (showBig) {
......@@ -58,10 +175,40 @@ class BarCode extends Component {
}
render() {
const { showBig } = this.state;
const {
showPayOrder,
showBig,
orderInfo: {
payableMoney,
serviceName,
createAt,
orderNumber,
areaName,
equipmentNum,
equipmentPosition,
},
} = this.state;
return (
<View className='BarCode'>
<View className={`BarCodeBox ${showBig ? 'BarCodeBoxBig' : ''}`}>
{showPayOrder && (
<View className='OrderBox'>
<OrderTitle price={payableMoney} />
<OrderInfo
serviceName={serviceName}
createAt={createAt}
orderNumber={orderNumber}
areaName={areaName}
equipmentNum={equipmentNum}
equipmentPosition={equipmentPosition}
/>
</View>
)}
<View
className={`BarCodeBox ${showPayOrder ? 'blur' : ''} ${
showBig ? 'BarCodeBoxBig' : ''
}`}
>
{showBig ? (
<Image className='bg' src={BarCodeBoxBigBg} />
) : (
......
src/pages/Home/Home.scss
.Home {
padding: 0 32px;
.Home-BarMenu {
position: absolute;
right: 26px;
top: 74px;
z-index: 100;
width: 260px;
height: 180px;
.Home-BarMenu-Content {
position: relative;
background-color: #fff;
border-radius: 24px;
margin-top: 4px;
height: 176px;
font-size: 28px;
text-align: center;
line-height: 88px;
}
.Home-BarMenu-Content::before {
content: '';
position: absolute;
right: 40px;
top: -12px;
border-left: 8px solid transparent;
border-bottom: 16px solid #fff;
border-right: 8px solid transparent;
}
}
.Home-UserBox {
position: relative;
width: 100%;
......
src/pages/Home/Home.tsx
......@@ -25,6 +25,7 @@ type PageStateProps = {
userinfo: UserState;
};
type PageState = {
barMenuVisiable: boolean;
commBean: number;
hairDryerBean: number;
annItem: SectionItem;
......@@ -41,6 +42,7 @@ class Home extends Component {
constructor(props) {
super(props);
this.state = {
barMenuVisiable: false,
commBean: 0.0,
hairDryerBean: 0.0,
annItem: {
......@@ -100,6 +102,11 @@ class Home extends Component {
url: '/pages/UserSetting/UserSetting',
});
}
goFeedback() {
Taro.navigateTo({
url: '/pages/Feedback/Feedback',
});
}
goAnn() {
Taro.navigateTo({
url: '/pages/Announcement/Announcement',
......@@ -117,6 +124,12 @@ class Home extends Component {
url: '/pages/BarCode/BarCode',
});
}
toggleBarMenu() {
this.setState(({ barMenuVisiable }: PageState) => ({
barMenuVisiable: !barMenuVisiable,
}));
}
logoutHandle() {
appLogout()
.then(() => {
......@@ -129,14 +142,25 @@ class Home extends Component {
render() {
const { userinfo } = this.props;
const { commBean, hairDryerBean, annItem } = this.state;
const { commBean, hairDryerBean, annItem, barMenuVisiable } = this.state;
return (
<View className='Home'>
{barMenuVisiable ? (
<View>
<View className='mask' onClick={this.toggleBarMenu} />
<View className='Home-BarMenu'>
<View className='Home-BarMenu-Content'>
<View onClick={this.goFeedback}>意见反馈</View>
<View onClick={this.logoutHandle}>切换账号</View>
</View>
</View>
</View>
) : null}
<View className='Home-UserBox'>
<Image
className='Home-UserBox-Setting'
src={SettingIcon}
onClick={this.logoutHandle}
onClick={this.toggleBarMenu}
/>
<Image className='bg' src={UserBoxBg} />
<View className='Home-UserBox-info'>
......@@ -146,9 +170,17 @@ class Home extends Component {
<View className='Home-UserBox-addr'>{userinfo.areaName}</View>
</View>
{userinfo.customerSex === '2' ? (
<Image className='Home-UserBox-headimg' src={UserHeaderF} />
<Image
className='Home-UserBox-headimg'
src={UserHeaderF}
onClick={this.goSetting}
/>
) : (
<Image className='Home-UserBox-headimg' src={UserHeaderM} />
<Image
className='Home-UserBox-headimg'
src={UserHeaderM}
onClick={this.goSetting}
/>
)}
</View>
<View className='Home-UserBox-line' />
......
src/pages/Order/OrderList/OrderList.scss
......@@ -24,9 +24,8 @@
}
}
.OrderList-Content {
box-sizing: border-box;
height: 100%;
padding-top: 80px;
height: calc(100vh - 80px);
margin-top: 80px;
background-color: #eee;
}
.OrderList-Group {
......
src/pages/Order/OrderList/OrderList.tsx
......@@ -11,6 +11,7 @@ import {
toggleOrderState,
updatePayOrderList,
updateAllOrderList,
UpdateOrderParams,
} from './actions';
import { StoreState } from './store';
import { fetchAllOrder, fetchPayOrder } from '../../../api/order';
......@@ -24,8 +25,8 @@ type PageStateProps = {
};
type PageDispatchProps = {
toggleOrderState: (state: String) => void;
updatePayOrder: (list: Order[]) => void;
updateAllOrder: (list: AllOrderItem[]) => void;
updatePayOrder: (entity: UpdateOrderParams<Order>) => void;
updateAllOrder: (entity: UpdateOrderParams<AllOrderItem>) => void;
};
type PageOwnProps = {};
......@@ -45,17 +46,18 @@ interface OrderList {
toggleOrderState(state: String) {
dispatch(toggleOrderState(state));
},
updatePayOrder(data: Order[]) {
updatePayOrder(data) {
dispatch(updatePayOrderList(data));
},
updateAllOrder(data: AllOrderItem[]) {
updateAllOrder(data) {
dispatch(updateAllOrderList(data));
},
}),
})
)
class OrderList extends Component {
config: Config = {
navigationBarTitleText: '订单',
enablePullDownRefresh: true,
};
constructor(props: PageProps) {
super(props);
......@@ -65,9 +67,25 @@ class OrderList extends Component {
this.getPayOrderHandle();
}
onPullDownRefresh() {
console.log('in onPullDownRefresh');
const {
orderList: { orderState },
} = this.props;
if (orderState === '1') {
this.getPayOrderHandle().then(() => {
Taro.stopPullDownRefresh();
});
} else {
this.getAllOrderHandle().then(() => {
Taro.stopPullDownRefresh();
});
}
}
getPayOrderHandle(lastOrderId?: number) {
const { userinfo, updatePayOrder } = this.props;
fetchPayOrder(
return fetchPayOrder(
lastOrderId
? {
customerId: userinfo.customerId,
......@@ -77,11 +95,11 @@ class OrderList extends Component {
: {
customerId: userinfo.customerId,
pageSize: 10,
},
}
)
.then(res => {
console.log(res);
updatePayOrder(res.data);
updatePayOrder({ list: res.data, lastOrderId: lastOrderId });
})
.catch(console.error);
}
......@@ -91,7 +109,7 @@ class OrderList extends Component {
userinfo: { customerId },
updateAllOrder,
} = this.props;
fetchAllOrder(
return fetchAllOrder(
lastOrderId
? {
customerId: customerId,
......@@ -101,11 +119,11 @@ class OrderList extends Component {
: {
customerId: customerId,
pageSize: 10,
},
}
)
.then(res => {
console.log(res);
updateAllOrder(res.data);
updateAllOrder({ list: res.data, lastOrderId: lastOrderId });
})
.catch(console.error);
}
......@@ -137,6 +155,28 @@ class OrderList extends Component {
toggleOrderState(type);
}
refreshList() {
console.log('in refreshList');
// Taro.startPullDownRefresh({
// success: this.onPullDownRefresh,
// });
}
fetchMoreList() {
const {
orderList: { orderState, payList, allList },
} = this.props;
console.log('in moreList ' + orderState);
if (orderState === '1') {
this.getPayOrderHandle(payList[payList.length - 1].id);
} else {
const itemIdx = allList.length - 1;
const orderIdx = allList[itemIdx].data.length - 1;
console.log(itemIdx, orderIdx);
this.getAllOrderHandle(allList[itemIdx].data[orderIdx].id);
}
}
render() {
const {
orderList: { orderState, payList, allList },
......@@ -147,20 +187,27 @@ class OrderList extends Component {
<View className='Tab'>
<Text
className={`Tab-item ${orderState === '1' ? 'active' : ''}`}
onClick={() => this.toggleStateHandle('1')}>
onClick={() => this.toggleStateHandle('1')}
>
待付款
</Text>
<Text
className={`Tab-item ${orderState === 'all' ? 'active' : ''}`}
onClick={() => this.toggleStateHandle('all')}>
onClick={() => this.toggleStateHandle('all')}
>
全部
</Text>
</View>
<ScrollView
className='OrderList-Content'
scrollY
onScrollToUpper={this.refreshList}
onScrollToLower={this.fetchMoreList}
upperThreshold={-100}
lowerThreshold={70}
scrollWithAnimation
scrollTop={0}>
scrollTop={0}
>
{orderState === '1'
? payList.map(order => (
<OrderItem
......
src/pages/Order/OrderList/actions.ts
......@@ -4,15 +4,25 @@ export const TOGGLE_ORDER_STATE = 'TOGGLE_ORDER_STATE';
export const UPDATE_PAY_LIST = 'UPDATE_PAY_LIST';
export const UPDATE_ALL_LIST = 'UPDATE_ALL_LIST';
export type UpdateOrderParams<T> = {
lastOrderId?: number;
list: T[];
};
export const toggleOrderState = (state: String): Actions => ({
type: TOGGLE_ORDER_STATE,
payload: state,
});
export const updatePayOrderList = (state: Order[]): Actions => ({
export const updatePayOrderList = (
state: UpdateOrderParams<Order>
): Actions => ({
type: UPDATE_PAY_LIST,
payload: state,
});
export const updateAllOrderList = (state: AllOrderItem[]): Actions => ({
export const updateAllOrderList = (
state: UpdateOrderParams<AllOrderItem>
): Actions => ({
type: UPDATE_ALL_LIST,
payload: state,
});
src/pages/Order/OrderList/store.ts
import Actions from '../../../types/Store/Actions';
import Order from '../../../types/Order/Order';
import Order, { AllOrderItem } from '../../../types/Order/Order';
import {
TOGGLE_ORDER_STATE,
UPDATE_PAY_LIST,
......@@ -9,7 +9,7 @@ import {
export interface StoreState {
orderState: String;
payList: Order[];
allList: Order[];
allList: AllOrderItem[];
}
const INITIAL_STATE = {
......@@ -20,7 +20,7 @@ const INITIAL_STATE = {
export default function OrderList(
state: StoreState = INITIAL_STATE,
actions: Actions,
actions: Actions
) {
switch (actions.type) {
case TOGGLE_ORDER_STATE:
......@@ -29,14 +29,49 @@ export default function OrderList(
orderState: actions.payload,
};
case UPDATE_PAY_LIST:
if (actions.payload.lastOrderId) {
return {
...state,
payList: actions.payload,
payList: [...state.payList, ...actions.payload.list],
};
} else {
return {
...state,
payList: actions.payload.list,
};
}
case UPDATE_ALL_LIST:
if (actions.payload.lastOrderId) {
if (actions.payload.list.length) {
let key = actions.payload.list[0].groupName;
let index = state.allList.findIndex(item => item.groupName == key);
if (index > -1) {
return {
...state,
allList: [
...state.allList.slice(0, index),
{
groupName: state.allList[index].groupName,
data: [
...state.allList[index].data,
...actions.payload.list[0].data,
],
},
...actions.payload.list.slice(1),
],
};
}
return {
...state,
allList: [...state.allList, ...actions.payload.list],
};
}
return state;
}
return {
...state,
allList: actions.payload,
allList: actions.payload.list,
};
default:
return state;
......
src/pages/Order/OrderPay/OrderPay.tsx
......@@ -34,7 +34,9 @@ import PaddingPkcs7 from 'crypto-js/pad-pkcs7';
type PageStateProps = {
userinfo: UserState;
};
type PageProps = {};
type PageProps = {
id?: number;
};
type PageState = {
prePay: boolean;
payWay: {
......@@ -137,10 +139,15 @@ class OrderPay extends Component {
}
componentWillMount() {
console.log('preload: ', this.$router.preload);
const data = this.$router.preload;
fetchOrderDetailAndPay({
id: data.id,
if (data) {
this.fetchOrder(data.id);
}
}
fetchOrder(id: number) {
return fetchOrderDetailAndPay({
id,
})
.then(res => {
const { accounts, orderInfo, payInfos } = res;
......@@ -173,7 +180,7 @@ class OrderPay extends Component {
}
changePayState() {
const { payWay, orderInfo, payInfos } = this.state;
const { payWay } = this.state;
if (payWay) {
this.setState({
prePay: false,
......@@ -214,7 +221,7 @@ class OrderPay extends Component {
AES.decrypt(payStr, Utf8.parse(key), {
mode: ECBmode,
padding: PaddingPkcs7,
}).toString(Utf8),
}).toString(Utf8)
);
console.log(payData);
......@@ -273,7 +280,7 @@ class OrderPay extends Component {
item.payType === '2' ||
item.payType === '6' ||
item.payType === '7' ||
item.payType === '8',
item.payType === '8'
);
const payInfo = prePay
? {}
......@@ -296,7 +303,8 @@ class OrderPay extends Component {
<View
key={index}
className='OrderPay-payway'
onClick={() => this.changePayWay(payway)}>
onClick={() => this.changePayWay(payway)}
>
{payway.payType === '2' ? (
<Image className='OrderPay-icon' src={payWayWxLogo} />
) : payway.payType === '6' ? (
......@@ -377,7 +385,8 @@ class OrderPay extends Component {
{prePay ? (
<Button
className='button OrderPay-next'
onClick={this.changePayState}>
onClick={this.changePayState}
>
下一步
</Button>
) : (
......
src/pages/ResetPwd/ResetPwd.tsx
......@@ -111,7 +111,7 @@ class ResetPwd extends Component {
}
}
render() {
const { cellphone, vcode, showPwd, pwd, checkPwd } = this.state;
const { cellphone, vcode, showPwd, pwd,showCheckPwd, checkPwd } = this.state;
return (
<View className='ResetPwd'>
<ToastBox ref='ToastBox' />
......@@ -179,7 +179,7 @@ class ResetPwd extends Component {
<Input
className='loginBox-input'
placeholderClass='loginBox-placeholder'
password={!showPwd}
password={!showCheckPwd}
placeholder='确认6-20位新密码'
maxLength={20}
value={checkPwd}
......@@ -192,7 +192,7 @@ class ResetPwd extends Component {
/>
<Image
className='registerBox-pwdIcon'
src={showPwd ? pwdShowIcon : pwdHideIcon}
src={showCheckPwd ? pwdShowIcon : pwdHideIcon}
onClick={this.togglePwdCheckBox}
/>
</View>
......
src/pages/UserSetting/UserSetting.tsx
import { Component, Config } from '@tarojs/taro';
import Taro, { Component, Config } from '@tarojs/taro';
import { ComponentClass } from 'react';
import { View, Image, Text, Input, Picker, Button } from '@tarojs/components';
import ToastBox from '../../components/ToastBox/ToastBox';
import HeaderIcon from '../../images/home/img_girl_touxiang@2x.png';
import UserHeaderM from '../../images/home/img_boy_touxiang@2x.png';
import UserHeaderF from '../../images/home/img_girl_touxiang@2x.png';
import InfoIcon from '../../images/user/pc_minel_icon@2x.png';
import SchoolIcon from '../../images/user/pc_school_icon@2x.png';
import radioIcon from '../../images/login/pc_nor_icon@2x.png';
import radioCheckIcon from '../../images/login/pc_sel_icon@2x.png';
import './UserSetting.scss';
import { connect } from '@tarojs/redux';
import { UserState, updateUserInfo } from '../../store/rootReducers/userinfo';
import { perfectionUserInfo } from '../../api/customer';
type PageStateProps = {
userinfo: UserState;
};
type PageDispatchProps = {
updateUserInfo: (e: UserState) => void;
};
type PageOwnProps = {};
type PageState = {
birthday: string;
sex: string;
birthDay: string;
customerHead: string;
customerName: string;
customerSex: string;
entranceDate: string;
studentNo: string;
};
type IProps = PageStateProps & PageDispatchProps & PageOwnProps;
interface UserSetting {
props: PageOwnProps;
props: IProps;
state: PageState;
}
@connect(
({ userinfo }) => ({
userinfo,
}),
dispatch => ({
updateUserInfo(entity: UserState) {
dispatch(updateUserInfo(entity));
},
})
)
class UserSetting extends Component {
config: Config = {
navigationBarBackgroundColor: '#6180f4',
navigationBarTitleText: '',
};
constructor(props) {
constructor(props: IProps) {
super(props);
const {
userinfo: {
birthDay,
customerHead,
customerName,
customerSex,
entranceDate,
studentNo,
},
} = props;
this.state = {
birthday: '1945-10-01',
sex: 'Male',
birthDay: birthDay,
customerHead: customerHead,
customerName: customerName,
customerSex: customerSex,
entranceDate: entranceDate,
studentNo: studentNo,
};
}
setSex(sex: string) {}
updateBirthday() {}
validateSaveForm(): boolean {
const { customerName } = this.state;
if (!customerName) {
Taro.showToast({
title: '请输入姓名',
});
return false;
}
return true;
}
saveHandle() {
if (this.validateSaveForm()) {
Taro.showLoading();
const {
userinfo: { customerId },
updateUserInfo,
} = this.props;
const {
customerName,
customerSex,
birthDay,
studentNo,
entranceDate,
} = this.state;
const entity = {
customerId: customerId,
customerName,
customerSex,
birthDay,
studentNo,
entranceDate,
};
perfectionUserInfo(entity)
.then(() => {
Taro.hideLoading();
updateUserInfo(entity);
this.refs.ToastBox.showToast('已保存');
})
.catch(err => {
console.log(err);
Taro.showToast({
title: err.msg || '保存失败',
icon: 'none',
});
});
}
}
render() {
const { sex, birthday } = this.state;
const { userinfo } = this.props;
const {
customerName,
customerSex,
birthDay,
studentNo,
entranceDate,
} = this.state;
return (
<View className='UserSetting'>
<ToastBox ref='ToastBox' />
<View className='UserSetting-Header'>
<View className='UserSetting-HeaderIconBox'>
<Image className='UserSetting-HeaderIcon' src={HeaderIcon} />
{userinfo.customerSex === '1' ? (
<Image className='UserSetting-HeaderIcon' src={UserHeaderM} />
) : (
<Image className='UserSetting-HeaderIcon' src={UserHeaderF} />
)}
</View>
</View>
<View className='UserSetting-name'>小众</View>
<View className='UserSetting-name'>{userinfo.customerName}</View>
<View className='UserSetting-Content'>
<View className='UserSetting-title'>
<Image className='UserSetting-titleIcon' src={InfoIcon} />
......@@ -55,23 +150,45 @@ class UserSetting extends Component {
</View>
<View className='UserSetting-ContentItem'>
<Text>姓名：</Text>
<Input className='UserSetting-ContentItem-input' value={'ds'} />
<Input
className='UserSetting-ContentItem-input'
maxLength={20}
value={customerName}
onInput={({ detail: { value } }) => {
this.setState({
customerName: value.trim(),
});
return value.trim();
}}
/>
</View>
<View className='UserSetting-ContentItem'>
<Text>性别：</Text>
<View className='loginBox-input sexBox'>
<View
className='sexBox-item'
onClick={() => this.setSex('Female')}>
{sex === 'Female' ? (
onClick={() =>
this.setState({
customerSex: '2',
})
}
>
{customerSex === '2' ? (
<Image className='sexBox-icon' src={radioCheckIcon} />
) : (
<Image className='sexBox-icon' src={radioIcon} />
)}
<Text>女</Text>
</View>
<View className='sexBox-item' onClick={() => this.setSex('Male')}>
{sex === 'Male' ? (
<View
className='sexBox-item'
onClick={() =>
this.setState({
customerSex: '1',
})
}
>
{customerSex === '1' ? (
<Image className='sexBox-icon' src={radioCheckIcon} />
) : (
<Image className='sexBox-icon' src={radioIcon} />
......@@ -82,8 +199,16 @@ class UserSetting extends Component {
</View>
<View className='UserSetting-ContentItem'>
<Text>出生日期：</Text>
<Picker value={birthday} mode='date' onChange={this.updateBirthday}>
<View>{birthday}</View>
<Picker
value={birthDay}
mode='date'
onChange={({ detail: { value } }) =>
this.setState({
birthDay: value,
})
}
>
<View>{birthDay}</View>
</Picker>
</View>
<View className='UserSetting-ContentItem Disabled'>
......@@ -101,18 +226,39 @@ class UserSetting extends Component {
</View>
<View className='UserSetting-ContentItem Disabled'>
<Text>学校：</Text>
<Text>1855</Text>
<Text>{userinfo.areaName}</Text>
</View>
<View className='UserSetting-ContentItem'>
<Text>学号：</Text>
<Input className='UserSetting-ContentItem-input' value={'ds'} />
<Input
className='UserSetting-ContentItem-input'
value={studentNo}
onInput={({ detail: { value } }) => {
this.setState({
studentNo: value.trim(),
});
return value.trim();
}}
/>
</View>
<View className='UserSetting-ContentItem'>
<Text>入学日期：</Text>
<Text>2019-05-30</Text>
<Picker
value={entranceDate}
mode='date'
onChange={({ detail: { value } }) =>
this.setState({
entranceDate: value,
})
}
>
<View>{entranceDate}</View>
</Picker>
</View>
</View>
<Button className='UserSetting-save'>保存</Button>
<Button className='UserSetting-save' onClick={this.saveHandle}>
保存
</Button>
</View>
);
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment