完善部分订单逻辑

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:
-      return {
-        ...state,
-        payList: actions.payload,
-      };
+      if (actions.payload.lastOrderId) {
+        return {
+          ...state,
+          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>
     );
   }