差没有搜索结果UI

src/common/VList/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import './index.scss'
 
 const VList = (props) => {
-    console.log(props)
     return (
         <li className='v-list-item' onClick={e=>props.handleClick(props.id)}>
             <div className="content">

src/components/search/search-result.js

 import React, { PureComponent } from 'react';
 import SearchHeader from './searchHead'
+import VList from '@/common/VList'
+import { http, api, getParam } from '@/utils'
+import './search-result.scss'
+
+
+const Bottom = ({item}) => {
+    return (
+        <div className='bottom'>
+            <span className='price'>¥{item.price1}</span>
+            <span className='stale-price'>¥{item.price0}</span>
+        </div>
+    )
+}
 
 class SearchResult extends PureComponent {
 
-    componentDidMount(){
+    state = {
+        courseList: []
+    }
+
+    componentDidMount() {
+        http.get(`${api['search-api']}/search/${encodeURIComponent(getParam('word'))}?type=course&page=1`)
+            .then(res => {
+                const data = res.data
 
+                if (data.errno === 0) {
+                    this.setState({
+                        courseList: data.data.info.search_data.course
+                    });
+                }
+            })
     }
 
     render() {
+        const {courseList} = this.state
+
         return (
             <div className='search-result'>
                 <SearchHeader/>
+                <ul>
+                    {
+
+                        courseList && courseList.length > 0 ?
+                            courseList.map(item => {
+                                const Info = (
+                                    <div className="info">
+                                        <p className='title'>{item.course_title}</p>
+                                        <p className='des'>{item.simpledescription}</p>
+                                        <Bottom
+                                            item={item}
+                                        />
+                                    </div>
+                                )
+                                return (
+                                    <VList img={item.image_name}
+                                           handleClick={this.handleClick}
+                                           key={item.course_id}
+                                           info={Info}/>
+                                )
+                            }) : null
+                    }
+
+                </ul>
             </div>
         );
     }

src/components/search/search-result.scss

 .search-result {
+    ul {
+        list-style: none;
+    }
 
+    .info {
+        display: flex;
+        flex-wrap: wrap;
+
+        .des {
+            font-size: $font_14;
+            line-height: 16px;
+            align-self: flex-start;
+
+        }
+
+        .price {
+            color: $red;
+            font-size: $font_16;
+            margin-right: 14px;
+        }
+
+        .stale-price {
+            text-decoration: line-through;
+            color: $color_999;
+            font-size: $font_12;
+        }
+        .bottom{
+            align-self: flex-end;
+        }
+    }
 }
\ No newline at end of file

src/components/search/searchHead.js

 import React, { PureComponent } from 'react'
 import { SearchBar } from 'antd-mobile'
+import { withRouter } from 'react-router-dom'
 
 import './search_header.scss'
 
@@ -15,7 +16,7 @@ class SearchHead extends PureComponent {
 
     // 返回某个页面
     returnPage() {
-        console.log(111);
+        this.props.history.go(-1)
     }
 
     //组件装载完毕
@@ -58,4 +59,4 @@ class SearchHead extends PureComponent {
     }
 }
 
-export default SearchHead
\ No newline at end of file
+export default withRouter(SearchHead)
\ No newline at end of file