Merge branch 'search-result' into dev

# Conflicts:
#	public/api.js

.storybook/preview.js

-import './style.scss'
\ No newline at end of file
+import './style.scss'
+import '../src/assets/font/iconfont.css'
+import '@csstools/normalize.css/normalize.css'
\ No newline at end of file

public/api.js

 var API = {
-  'www': 'http://www-test.julyedu.com',
-  'home': 'http://fast-test.julyedu.com',
-  'search-api': 'https://search.julyedu.com',
-  'passport-api': 'http://passport-test.julyedu.com',
-  'base-api': 'http://api-test.julyedu.com',
-  'record': 'record.julyedu.com:8001',
-  'process-api': 'ws:process-test.julyedu.com:9502',
-  'm': 'http://m-test.julyedu.com',
-  //terminal
-  'ws': 'ws://47.93.119.175:8888/ws',
+    'www': 'http://www-test.julyedu.com',
+    'home': 'http://fast-test.julyedu.com',
+    'search-api': 'http://search-test.julyedu.com',
+    'passport-api': 'http://passport-test.julyedu.com',
+    'base-api': 'http://api-test.julyedu.com',
+    'record': 'record.julyedu.com:8001',
+    'process-api': 'ws:process-test.julyedu.com:9502',
+    'm': 'http://m-test.julyedu.com',
+    'ws': 'ws://47.93.119.175:8888/ws',
 }

src/common/address/address.stories.tsx

+import React from 'react'
+import Address from "./index";
+import {text, boolean, withKnobs} from '@storybook/addon-knobs'
+import {action} from '@storybook/addon-actions'
+
+
+export default {
+    title: 'address',
+    component: Address,
+    decorators: [withKnobs]
+}
+
+let visible = true,
+    title = '收货地址',
+    subtitle = '获奖用户（以最终榜单为准）请及时填写收货信息',
+    address = '金域国际中心',
+    phone = '1331234123',
+    name = '某某某'
+
+export const Default = () => {
+    visible = boolean('visible', visible)
+    name = text('name', name)
+    phone = text('phone', phone)
+    address = text('address', address)
+    title = text('title(optional)', title)
+    subtitle = text('subtitle(optional)', subtitle)
+
+    return <Address visible={visible}
+                    subtitle={subtitle}
+                    title={title}
+                    name={name}
+                    phone={phone}
+                    address={address}
+                    onClose={action('onClose')}
+                    validate={() => ({name: '姓名'})}
+                    onError={(errors) => {
+                        console.log(errors);}}
+                    onSubmit={(values, formikHelpers) => {
+                        console.log(formikHelpers);
+                    }}
+    />
+}
\ No newline at end of file

src/common/address/index.scss

+.common-address-container {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 300px;
+  padding: 20px 25px;
+  background: #fff;
+  border-radius: 10px;
+  box-sizing: border-box;
+  text-align: center;
 
+  .title {
+    margin-bottom: 8px;
+    color: #525C65;
+    font-size: 16px;
+  }
+
+  .subtitle {
+    margin-bottom: 15px;
+    font-size: 13px;
+    color: #ED6A1D;
+    text-align: left;
+  }
+
+  input {
+    width: 250px;
+    height: 40px;
+    line-height: 40px;
+    border: 1px solid #DDD;
+    font-size: 13px;
+    color: #999;
+    outline: 0;
+    -webkit-appearance: none;
+
+    &:nth-child(n+2) {
+      margin-top: 10px;
+    }
+
+    &::placeholder {
+      color: #999;
+    }
+  }
+
+  .submit {
+    margin-top: 18px;
+    width: 121px;
+    height: 33px;
+    background: #09f;
+    border-radius: 17px;
+    font-size: 15px;
+    color: #fff;
+    -webkit-appearance: none;
+    outline: 0;
+    border: 0;
+  }
+
+  .close{
+    position: absolute;
+    left: 50%;
+    bottom: -56px;
+    transform: translateX(-50%);
+    font-size: 26px;
+    color: #fff;
+  }
+}
\ No newline at end of file

src/common/address/index.tsx

 import React, {Component} from 'react'
 import './index.scss'
 import MaskCover from "../cover";
+import {Formik, Form, Field, FormikHelpers, FormikErrors} from "formik";
 
 interface PersonalInfo {
     name: string
@@ -9,20 +10,51 @@ interface PersonalInfo {
 }
 
 interface Props extends PersonalInfo {
-    subtitle: string
+    subtitle?: string
     title?: string
-    onSubmit?: () => PersonalInfo
+    onClose: () => void
+    visible: boolean
+    validate: () => void
+    onSubmit: (values: PersonalInfo, formikHelpers: FormikHelpers<PersonalInfo>) => void
+    onError: (errors: FormikErrors<PersonalInfo>) => void
 }
 
-class Address extends Component<Props> {
-    render() {
-        return <MaskCover>
-            <div className="address-container">
-                <div className="title"></div>
-                <div className="subtitle"></div>
-            </div>
-        </MaskCover>
-    }
+const Address: React.FC<Props> = ({name, phone, address, title, subtitle, visible, onClose, validate, onSubmit, onError}) => {
+    return (
+        visible ?
+            <MaskCover>
+                <div className="common-address-container">
+                    <div className="title">{title}</div>
+                    <div className="subtitle">{subtitle}</div>
+                    <Formik initialValues={{name, phone, address}}
+                            enableReinitialize={true}
+                            onSubmit={onSubmit}
+                            validate={validate}
+                    >
+                        {
+                            (props) => {
+                                if (props.errors) {
+                                    onError(props.errors)
+                                }
+                                return <Form className={'form'}>
+                                    <Field placeholder={'姓名'} name='name'></Field>
+                                    <Field placeholder={'手机号'} name='phone'></Field>
+                                    <Field placeholder={'地址'} name='address'></Field>
+                                    <button type={'submit'} className={'submit'}>提交</button>
+                                </Form>
+                            }
+                        }
+                    </Formik>
+                    <i className={'iconfont iconiconfront-2 close'} onClick={onClose}></i>
+                </div>
+            </MaskCover>
+            : null
+    )
+}
+
+Address.defaultProps = {
+    title: '收货信息',
+    subtitle: '获奖用户（以最终榜单为准）请及时填写收货信息'
 }
 
 export default Address

src/components/search/search-result.scss

-@import "src/assets/css/variable";
+@import 'src/assets/css/variable';
 .search-result {
-    padding-top: 44px;
+  padding-top: 44px;
 
-    .search-head {
-        // position: absolute;
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        z-index: 10;
-        transition: top 0.5 ease;
+  .search-head {
+    // position: absolute;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 10;
+    transition: top 0.5 ease;
 
-        &.hide {
-            top: -44px;
-        }
+    &.hide {
+      top: -44px;
     }
+  }
 
-    ul {
-        list-style: none;
-        border-top:1px solid #ddd;
-    }
+  .result-count {
+    width: 375px;
+    height: 30px;
+    background: #f7f7fb;
+    border-top: 1px solid #ddd;
+    color: #333;
+    font-size: 12px;
+    text-align: center;
+    line-height: 30px;
+  }
 
-    .v-list-item{
-        .content{
-            width: 100%;
-        }
-    }
+  ul {
+    list-style: none;
+  }
 
-    .info {
-        width: 50%;
-        position: relative;
-        display: block;
-        .title{
-            font-size: $font_16;
-            color:#525C65;
-        }
+  .v-list-item {
+    .content {
+      width: 100%;
+    }
+  }
 
-        .des {
-            font-size: $font_14;
-            color:#777;
-            margin-top: 10px;
-        }
+  .info {
+    width: 50%;
+    position: relative;
+    display: block;
+    .title {
+      font-size: $font_16;
+      color: #525c65;
+      em {
+          color: #09f;
+      }
+    }
 
-        .price {
-            color: $red;
-            font-size: $font_16;
-            margin-right: 14px;
-        }
+    .des {
+      font-size: $font_14;
+      color: #777;
+      margin-top: 10px;
+    }
 
-        .stale-price {
-            text-decoration: line-through;
-            color: $color_999;
-            font-size: $font_12;
-        }
+    .price {
+      color: $red;
+      font-size: $font_16;
+      margin-right: 14px;
+    }
 
-        .bottom {
-            position: absolute;
-            bottom: 0;
-        }
+    .stale-price {
+      text-decoration: line-through;
+      color: $color_999;
+      font-size: $font_12;
     }
 
-    .empty {
-        font-size: 12px;
-        color: #777;
-        padding: 50px 0 30px 0;
-        text-align: center;
-        background-color: #fff;
-        border-top: 1px solid #ddd;
-        img {
-            width: 100px;
-            height: 81px;
-            display: block;
-            margin: 0 auto 15px auto;
-        }
+    .bottom {
+      position: absolute;
+      bottom: 0;
     }
+  }
 
-    .status {
-        width: 100%;
-        position: absolute;
-        bottom: -2px;
-        left: 0;
-        height: 24px;
-        text-align: center;
-        line-height: 24px;
-        font-size: 13px;
-        color: $white;
-        background-color: rgba(224, 46, 36, 0.6);
-        border-radius: 0 0 4px 4px;
+  .empty {
+    font-size: 12px;
+    color: #777;
+    padding: 50px 0 30px 0;
+    text-align: center;
+    background-color: #fff;
+    border-top: 1px solid #ddd;
+    img {
+      width: 100px;
+      height: 81px;
+      display: block;
+      margin: 0 auto 15px auto;
     }
-}
\ No newline at end of file
+  }
+
+  .status {
+    width: 100%;
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    height: 24px;
+    text-align: center;
+    line-height: 24px;
+    font-size: 13px;
+    color: $white;
+    background-color: rgba(224, 46, 36, 0.6);
+    border-radius: 0 0 4px 4px;
+  }
+}