修改约车处理选择样式

src/containers/PublicCarDeal/Select.js

+import React, { Component } from 'react';
+import styles from './style.css';
+import SelectIcon from './images/more_item_btn@2x.png';
+
+class Select extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showOptions: false,
+    };
+  }
+
+  componentWillMount() {
+    console.log(this.props.children);
+    if (this.props.children.length) {
+      this.props.onChange(this.props.children[0].props.value);
+    }
+  }
+
+  toggleOptions = () => {
+    console.log('in click');
+
+    this.setState(({ showOptions }) => ({
+      showOptions: !showOptions,
+    }));
+  };
+  selectHandle = (e, val) => {
+    e.preventDefault();
+    e.stopPropagation();
+    console.log(val);
+    this.setState({
+      showOptions: false,
+    });
+    this.props.onChange(val);
+  };
+  render() {
+    const { showOptions } = this.state;
+    const { value } = this.props;
+    return (
+      <div className={styles.selectWrap} onClick={this.toggleOptions}>
+        <div className={styles.selectValue}>
+          <div className={styles.selectOption}>{value}</div>
+          {showOptions && (
+            <div className={styles.selectOptionsBox}>
+              {this.props.children.map((i, idx) => (
+                <div
+                  className={styles.selectOption}
+                  key={idx}
+                  onClick={e => this.selectHandle(e, i.props.value)}
+                >
+                  {i}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className={styles.selectIcon}>
+          <img src={SelectIcon} alt="" />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Select;

src/containers/PublicCarDeal/index.js

@@ -8,10 +8,10 @@ import {
   fetchCarPlateList,
 } from '../../api/index';
 // import Select from '../../components/Input/Select/Select';
-import SelectIcon from './images/more_item_btn@2x.png';
 import offCheckIcon from '../../images/Check/radio_off_btn@2x.png';
 import onCheckIcon from '../../images/Check/radio_on_btn@2x.png';
 import UserInfoContext from '../../context/userinfo-context';
+import Select from './Select';
 
 class PublicCarDeal extends Component {
   constructor(props) {
@@ -181,9 +181,7 @@ class PublicCarDeal extends Component {
         Toast.fail(err.msg || '处理失败！');
       });
   };
-  onSelectHandle = e => {
-    console.log(e);
-    const val = e.target.value;
+  onSelectHandle = val => {
     this.setState(({ selected }) => ({
       selected: {
         ...selected,
@@ -201,7 +199,7 @@ class PublicCarDeal extends Component {
   };
   render() {
     const {
-      selected: { value, dealOpinion },
+      selected: { value, dealOpinion, carPlate },
       dealDialogVisible,
       carPlateList,
     } = this.state;
@@ -273,22 +271,18 @@ class PublicCarDeal extends Component {
             {value === 2 ? (
               <div key="agree" className={styles.agree}>
                 <span className={styles.dialogAgreeLabel}>派车车牌</span>
-                <div className={styles.selectWrap}>
-                  <div className={styles.selectIcon}>
-                    <img src={SelectIcon} alt="" />
-                  </div>
-                  <select
+                <div className={styles.selectWrapBox}>
+                  <Select
                     className={styles.select}
                     onChange={this.onSelectHandle}
-                    defaultValue="-1"
+                    value={carPlate}
                   >
-                    <option disabled value="-1" >请选择</option>
                     {carPlateList.map(i => (
-                      <option key={i.value} value={i.lable}>
+                      <div key={i.value} value={i.lable}>
                         {i.lable}
-                      </option>
+                      </div>
                     ))}
-                  </select>
+                  </Select>
                 </div>
               </div>
             ) : value === 3 ? (

src/containers/PublicCarDeal/style.css

@@ -46,22 +46,39 @@
   font-size: 26px;
   color: #333;
 }
+.selectWrapBox {
+  width: 310px;
+  /* height: 60px; */
+  height: auto;
+}
 .selectWrap {
+  box-sizing: border-box;
   position: relative;
-  width: 310px;
-  height: 60px;
+  width: 100%;
+  height: 100%;
   line-height: 60px;
-  background-color: #f2f2f2;
   border-radius: 8px;
+  display: flex;
+}
+.selectValue {
   padding-left: 26px;
+  flex: 1;
+  background-color: #f2f2f2;
 }
 .selectIcon {
-  position: absolute;
-  right: 0;
-  top: 0;
   width: 46px;
   height: 60px;
 }
+.selectOptionsBox {
+  z-index: 999;
+  width: 100%;
+  text-align: left;
+}
+.selectOption {
+  text-align: left;
+  height: 60px;
+  border-bottom: 1px solid #fff;
+}
 .select {
   border: none;
   appearance: none;