静态页面

src/pages/mine/components/EditUserDetailBasicInfo/index.jsx

-import React, { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import './index.scss'
-import Taro from '@tarojs/taro'
-import { ScrollView, Image, Input } from '@tarojs/components'
+import { ScrollView, Input, Picker } from '@tarojs/components'
 
 export default function EditUserDetailBasicInfo (props) {
-  const { Data = {}, close = () => {} } = props
+  const { Data = {}, close = () => { } } = props
+
+  const [FormData, setFormData] = useState({ ...Data })
+
+  const [SexList] = useState([
+    {name: '男', id: 1},
+    {name: '女', id: 2}
+  ])
+  const [AgeRange] = useState(['18-25', '26-30', '30-35', '36-45', '46-50', '50-60', '60以上'])
+  const [IncomeRange] = useState(['10万以下', '10-15万', '15-20万', '20-30万', '30-50万', '50-75万', '75-100万', '100万以上'])
+  const [BuyTimeRange] = useState(['1月以内', '1至3月', '半年以内', '一年以内', '一年以上'])
+
+  const PickerChange = (e, type) => {
+
+  }
 
   return (
     <view className='components EditUserDetailBasicInfo'>
-      <ScrollView scroll-y={true} refresher-enabled={false} refresher-background='#fff'>
+      <ScrollView scroll-y refresher-enabled={false} refresher-background='#fff'>
         <view className='PageContent'>
 
           <text>姓名</text>
           <text>性别</text>
           <view className='FormLine flex-h'>
             <view className='flex-item'>
-              <text>请选择</text>
+              <Picker range-key='name' onChange={PickerChange.bind(this, 'sex')} value={0} range={SexList}>
+                <text>请选择</text>
+              </Picker>
             </view>
             <text className='iconfont icon-jiantoudown'></text>
           </view>
           <text>年龄段</text>
           <view className='FormLine flex-h'>
             <view className='flex-item'>
-              <text>请选择</text>
+              <Picker onChange={PickerChange.bind(this, 'age')} value={0} range={AgeRange}>
+                <text>请选择</text>
+              </Picker>
             </view>
             <text className='iconfont icon-jiantoudown'></text>
           </view>
           <text>家庭年收入范围</text>
           <view className='FormLine flex-h'>
             <view className='flex-item'>
-              <text>请选择</text>
+              <Picker onChange={PickerChange.bind(this, 'income')} value={0} range={IncomeRange}>
+                <text>请选择</text>
+              </Picker>
             </view>
             <text className='iconfont icon-jiantoudown'></text>
           </view>
           <text>预计购房时间</text>
           <view className='FormLine flex-h'>
             <view className='flex-item'>
-              <text>请选择</text>
+              <Picker onChange={PickerChange.bind(this, 'time')} value={0} range={BuyTimeRange}>
+                <text>请选择</text>
+              </Picker>
             </view>
             <text className='iconfont icon-jiantoudown'></text>
           </view>
           <text>客户咨询重点</text>
           <view className='FormLine flex-h'>
             <view className='flex-item'>
-              <Input placeholder='请填写  如：地段、交通、社区配套、户型、价格等；'></Input>
+              <Input placeholder='请填写  如：地段、交通、社区配套、户型、价格等'></Input>
             </view>
           </view>
 
           <text>购房动机</text>
           <view className='FormLine flex-h'>
             <view className='flex-item'>
-              <text>请选择</text>
+              <Input placeholder='请填写 如结婚、养老、二孩、改善、学区、投资等'></Input>
             </view>
-            <text className='iconfont icon-jiantoudown'></text>
           </view>
 
           <text>客户抗性分析</text>
           <view className='FormLine flex-h'>
             <view className='flex-item'>
-              <Input placeholder='请填写  如：地段、交通、社区配套、户型、价格等；'></Input>
+              <Input placeholder='请填写  如：地段、交通、社区配套、户型、价格等'></Input>
             </view>
           </view>