diff --git a/package.json b/package.json
index d02e40a..4955c11 100644
--- a/package.json
+++ b/package.json
@@ -28,11 +28,12 @@
"@tarojs/taro-h5": "^1.2.0-beta.3",
"@tarojs/taro-swan": "^1.2.0-beta.3",
"@tarojs/taro-weapp": "^1.2.0-beta.3",
- "nervjs": "^1.3.9",
"nerv-devtools": "^1.3.9",
+ "nervjs": "^1.3.9",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
- "redux-thunk": "^2.3.0"
+ "redux-thunk": "^2.3.0",
+ "taro-ui": "^1.5.0"
},
"devDependencies": {
"@types/react": "^16.4.8",
diff --git a/src/component/filteredShopComponent/filteredShopComponent.js b/src/component/filteredShopComponent/filteredShopComponent.js
new file mode 100644
index 0000000..691465e
--- /dev/null
+++ b/src/component/filteredShopComponent/filteredShopComponent.js
@@ -0,0 +1,80 @@
+import Taro, { Component } from '@tarojs/taro'
+import { View, Button, Text,Image } from '@tarojs/components'
+import { AtIcon } from 'taro-ui'
+
+import './filteredShopComponent.scss'
+const hornIcon = require('../../icons/horn.png')
+const houseIcon = require('../../icons/house.png')
+
+
+
+class recommondShop extends Component {
+
+ config = {
+ navigationBarTitleText: 'recommondShop'
+ }
+
+ componentWillReceiveProps(nextProps) {
+ //console.log(this.props, nextProps)
+ }
+
+ componentWillUnmount() { }
+
+ componentDidShow() { }
+
+ componentDidHide() { }
+
+ render() {
+
+ const title = this.props.shop.shop_name
+ const imgUrl = 'http://192.168.1.230/' + this.props.shop.goods[0].goods_url
+ const price = this.props.shop.goods[0].goods_price
+ const goods = this.props.shop.goods
+ const ProductName = this.props.shop.goods[0].goods_name
+ const address = this.props.shop.shop_address
+ const distance = this.props.shop.distance
+ const ads = this.props.shop.ads
+
+ // const consultText = this.props.shop.wx_open
+ const voucherLeft = this.props.shop.left_nums
+ const goodsElementsArray=goods.slice(1).map((item,index)=>{
+ return
+
+
+ })
+ return (
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+ {goods.length !== 1 ? goodsElementsArray:
+ 商品: {ProductName}
+ 价格: {price}
+ }
+
+
+
+
+
+ {address}
+ {distance}
+
+
+
+ )
+ }
+}
+
+export default recommondShop
diff --git a/src/component/filteredShopComponent/filteredShopComponent.scss b/src/component/filteredShopComponent/filteredShopComponent.scss
new file mode 100644
index 0000000..726b63e
--- /dev/null
+++ b/src/component/filteredShopComponent/filteredShopComponent.scss
@@ -0,0 +1,97 @@
+.shop-list-box{
+ border: 1px solid #ddd;
+ border-radius: 3px;
+ box-shadow: 0 5px 5px #ddd;
+ margin-bottom: 10px;
+
+ .header{
+ border-bottom:1px solid #F2F2F2;
+ display: flex;
+ .title{
+ width: 50%;
+ color: #333;
+ font-weight: bold;
+ font-size: 30px;
+ margin:20px;
+
+ }
+ .consult-voucher-button{
+ width: 50%;
+ //margin-top: 20px ;
+ margin-left: 200px;
+ display: flex;
+ //vertical-align: middle;
+ .consult-button-text{
+ color:white;
+ font-size: 28px;
+ background:#337ab7;
+ width: 100px;
+ line-height:50px;
+ height:50px;
+ margin-top:15px;
+ }
+ .voucher-button-text{
+ color:white;
+ font-size: 28px;
+ background:gray;
+ width: 100px;
+ line-height:50px;
+ height:50px;
+ margin-top:15px;
+
+ }
+ .voucher{
+ background:#337ab7;
+ }
+ }
+ }
+ .body{
+ border-bottom:1px solid #F2F2F2;
+ display: flex;
+ font-size: 35px;
+ .shop-img{
+ padding: 20px;
+ Image{
+ height: 200px;
+ width: 200px;
+ }
+ }
+ .details{
+ font-size: 30px;
+ margin-left: 30px;
+ .details-block{
+ margin-top: 30px;
+
+ .details-text{
+
+ font-weight: bold;
+ }
+ }
+ }
+ .goods-img-box{
+ display: flex;
+ flex-wrap: nowrap;
+ margin-top: 20px;
+ .goods-img{
+ border: 1px solid #ddd;
+ width: 80px;
+ height: 80px;
+ margin: 10px
+ }
+ }
+ }
+ .footer{
+ display: flex;
+ font-size: 25px;
+ padding: 20px;
+ .distance{
+ width: 30%;
+ text-align: right;
+
+ }
+ .address{
+ width:70%;
+
+ }
+ }
+}
diff --git a/src/component/recommendShop/recommendShop.js b/src/component/recommendShop/recommendShop.js
deleted file mode 100644
index 7b15255..0000000
--- a/src/component/recommendShop/recommendShop.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import Taro, { Component } from '@tarojs/taro'
-import { View, Button, Text,Image } from '@tarojs/components'
-
-
-import './recommondShop.scss'
-
-
-
-class recommondShop extends Component {
-
- config = {
- navigationBarTitleText: 'recommondShop'
- }
-
- componentWillReceiveProps(nextProps) {
- console.log(this.props, nextProps)
- }
-
- componentWillUnmount() { }
-
- componentDidShow() { }
-
- componentDidHide() { }
-
- render() {
-
- const title = this.props.shop.shop_name
- const imgUrl = 'http://192.168.1.230/' + this.props.shop.shop_logo
- const price = this.props.shop.goods[0].goods_price
- const ProductName = this.props.shop.goods_name
- const address = this.props.shop.shop_address
- const distance = this.props.shop.distance
- return (
-
-
-
- {title}
-
-
-
-
-
-
-
-
-
-
- 商品:{ProductName}
- 价格:{price}
-
-
-
-
- {address}
- {distance}
-
-
-
- )
- }
-}
-
-export default recommondShop
diff --git a/src/component/recommendShop/recommondShop.scss b/src/component/recommendShop/recommondShop.scss
deleted file mode 100644
index e551a2a..0000000
--- a/src/component/recommendShop/recommondShop.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-.shop-list-box{
- border: 1px solid #ddd;
- border-radius: 3px;
- box-shadow: 0 5px 5px #ddd;
- margin-bottom: 10px;
- .header{
- border-bottom:gray solid 1px;
- display: flex;
- .title{
- width: 50%;
- color: #333;
- font-weight: bold;
-
- }
- .ask-button{
- width: 50%;
- button{
- background-color: #337ab7;
- height: 36px;
- width:24px;
- color:white
- }
- }
- }
- .body{
- border-bottom:gray solid 1px;
- display: flex;
- font-size: 35px;
- .shop-img{
- padding: 20px;
- Image{
- height: 200px;
- width: 200px;
- }
- }
- .details{
- View{
- margin-top: 20px;
- }
- }
- }
- .footer{
- display: flex;
- .distance{
- width: 50%;
- font-size: 30px
- }
- .address{
- width:50%;
- font-size: 30px
- }
- }
-}
\ No newline at end of file
diff --git a/src/icons/horn.png b/src/icons/horn.png
new file mode 100644
index 0000000..4daa677
Binary files /dev/null and b/src/icons/horn.png differ
diff --git a/src/icons/house.png b/src/icons/house.png
new file mode 100644
index 0000000..982ce50
Binary files /dev/null and b/src/icons/house.png differ
diff --git a/src/pages/home/home.js b/src/pages/home/home.js
index c70d3f2..f181b4b 100644
--- a/src/pages/home/home.js
+++ b/src/pages/home/home.js
@@ -1,71 +1,56 @@
import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text, Swiper, SwiperItem, Image } from '@tarojs/components'
-import { connect } from '@tarojs/redux'
-import recommondShop from '../../component/recommendShop/recommendShop'
+import { AtButton } from 'taro-ui'
+import filteredShopComponent from '../../component/filteredShopComponent/filteredShopComponent'
import { add, minus, asyncAdd } from '../../actions/counter'
import './home.scss'
-
-@connect(({ counter }) => ({
- counter
-}), (dispatch) => ({
- add () {
- dispatch(add())
- },
- dec () {
- dispatch(minus())
- },
- asyncAdd () {
- dispatch(asyncAdd())
- }
-}))
class Home extends Component {
- config = {
+ config = {
navigationBarTitleText: '首页'
}
- constructor(){
- this.state={
- shops:'',
- ads:'',
- categories:'',
- demanding:''
+ constructor() {
+ this.state = {
+ shopsDetails: '',
+ ads: '',
+ categories: '',
+ demanding: '',
}
}
-//http://ihome6.com/Shop-supplyShops
- componentDidMount(){
- this.getShopInfo()
- this.getHomePageInfo()
+ componentDidMount() {
+ this.getShops()
+ this.getHomeCategoriesInfo()
}
- componentWillReceiveProps (nextProps) {
+ componentWillReceiveProps(nextProps) {
//console.log(this.props, nextProps)
}
- componentWillUnmount () { }
+ componentWillUnmount() { }
- componentDidShow () { }
+ componentDidShow() { }
- componentDidHide () { }
+ componentDidHide() { }
- getHomePageInfo(){
+ getHomeCategoriesInfo() {
Taro.request({
url: 'http://192.168.1.230/Shop-wxStore',
})
- .then(res =>{
- // console.log(res.data)
+ .then(res => {
+ console.log(res)
this.setState({
ads: res.data.data.adsLb,
categories: res.data.data.supplyClass,
- categories: res.data.data.supplyClass,
demanding: res.data.data.demand.supplys,
}, () => {
- console.log(this.state.demanding)
- })})
+ //console.log(this.state.demanding)
+ })
+ })
}
- getShopInfo(){
+ getShops(parent_supply_class = 0, supply_class = '-1', supply_level = 1) {
Taro.request({
url: 'http://192.168.1.230/Shop-supplyShops',
method: 'POST',
@@ -74,9 +59,9 @@ class Home extends Component {
param: JSON.stringify({
curr_page: 1,
page_count: 20,
- parent_supply_class: 1,
- supply_class: 1,
- supply_level: 1,
+ parent_supply_class: parent_supply_class, //父级class id
+ supply_class: supply_class,// 子级class id
+ supply_level: supply_level,// 层级
action: "2"
})
},
@@ -85,64 +70,77 @@ class Home extends Component {
}
})
.then(res => {
- this.setState({ shops: res.data.shops })
+ this.setState({ shopsDetails: res.data.shops }, () => {
+ // console.log('-----',res)
+ })
}
)
}
+ onClickParentCate(item) {
+ this.setState({ subCate: item.children })
+ this.getShops(item.parent_class_id, item.class_id)
+ }
+ onClickChildCate(item) {
+ this.getShops(item.parent_class_id, item.class_id, 2)
+ }
- render () {
-
-
- const demandingElemensArray = this.state.demanding.map((item,index)=>{
- return
-
-
- {item.class_name}
-
-
- 软件园D区
-
-
- 业主：{item.user_name}
-
-
-
-
+ render() {
+ const demandingElemensArray = this.state.demanding.map((item, index) => {
+ return < SwiperItem key={index} >
+
+
+ {item.class_name}
-
-
-
+
+ {item.sd_title}
+
+
+ {item.user_address}
+
+
+ 业主：{item.user_name}
+
+
+
+
+
+
})
- const shopCollectionElementsArray=this.state.shops.map((item,index)=>{
- return
- })
-
- const adsImgElementsArray=this.state.ads.map((item,index)=>{
- return
-
+ const adsImgElementsArray = this.state.ads.map((item, index) => {
+ return
+
})
- const categoriesElementsArray1=this.state.categories[0].map((item,index)=>{
- return
+
+ // 这里应该代码可以优化-----
+ const categoriesElementsArray1 = this.state.categories[0].map((item, index) => {
+ return
{item.class_name}
})
- const categoriesElementsArray2=this.state.categories[1].map((item,index)=>{
- return
+ const categoriesElementsArray2 = this.state.categories[1].map((item, index) => {
+ return
{item.class_name}
})
+ const shopCollectionElementsArray = this.state.shopsDetails.map((item, index) => {
+ return
+ })
-
-
+ const subCateElementsArray = this.state.subCate.map((item, index) => {
+ return
+ {item.class_name}
+
+ })
return (
-
+ {/* 第一行图片滚动条 */}
+
-
+ {/* 第二行图片滚动条 */}
+
-
-
-
-
- 业主需求
-
-
- 更多>>
-
-
-
-
- {demandingElemensArray}
-
+ {/* 第三行图片滚动条 */}
+
+
+
+
+
-
-
-
-
-
- 行业推荐
-
-
+
+
+
+
+ {subCateElementsArray}
+
+
+ {/* 业主需求和行业推荐 */}
+
+
+
+
+ 业主需求
+
+
+ 更多>>
+
+
+
+
+ {demandingElemensArray}
+
+
+
+
+
+
+
+ 行业推荐
+
+
+
{shopCollectionElementsArray}
-
+
)
diff --git a/src/pages/home/home.scss b/src/pages/home/home.scss
index 40e679f..d8a3986 100644
--- a/src/pages/home/home.scss
+++ b/src/pages/home/home.scss
@@ -1,24 +1,93 @@
-.container{
- margin-top: 100px;
- .title{
- display: flex;
- flex-wrap: nowrap;
- flex-direction: row;
- .text{
- width: 50% ;
- flex:1;
- }
- .more-link{
- width: 50% ;
- flex:1;
- text-align: right
- }
- }
- .demand{
- font-size: 30px;
+.home{
+ .banner-img{
+ width: 100%
}
}
-.main-cate{
+
+
+.container{
+ //margin-top: 30px;
+ .title{
+
+ padding:20px 20px;
+
+ .title-block{
+ background-color: #3C98FF;
+ width: 20px;
+ font-size: 50px;
+ display: inline-block;
+ height: 50px;
+ margin-right: 20px;
+ vertical-align: middle;
+ }
+ .title-text{
+
+ font-size: 50px;
+ vertical-align: middle;
+ }
+ .more-link{
+ // float: right;
+ margin-left: 50%;
+ font-size: 30px;
+ color: #ccc;
+ vertical-align: middle;
+ }
+ }
+ .customer-demanding{
+ padding:0 20px;
+ .demanding-item{
+ border: #eee solid 1px;
+ text-align: center;
+ .item-tag{
+ color:white;
+ font-size: 30px;
+ text-align: right;
+ .item-tag-text{
+ padding:5px;
+ background-color: #FF7142;
+ }
+ }
+ .item-title{
+ font-size: 50px;
+ min-height: 21px;
+ clear: both;
+ color: #FF7142;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ .item-address{
+ padding-top: 5px;
+ font-size: 35px;
+ // margin-top: 20px;
+ }
+ .item-name{
+ color: #ccc;
+ padding-top: 5px;
+ font-size: 35px;
+ // margin-top: 10px;
+ }
+ .item-button-box{
+
+ .item-button{
+ color:white;
+ font-size: 30px;
+ background:linear-gradient(to right, #FF9900, #FF7B00);
+ width: 150px;
+ margin:20px auto
+
+ }
+ }
+
+ }
+
+ }
+ .shop-box{
+ padding:0 20px;
+ }
+
+}
+.second-banner{
.categories{
display: flex;
flex-wrap: wrap;
@@ -30,4 +99,21 @@
margin-top: 20px;
}
}
+}
+.second-banner-level2{
+ .swipper{
+ height: 80px;
+ text-align: center;
+ font-size: 30px;
+ border-bottom:1px solid #F2F2F2;
+ .text{
+ margin-top: 20px
+ }
+ }
+}
+.swipper{
+ margin-bottom: 20px;
+}
+.swiper-sub{
+ margin-bottom: 0px;
}
\ No newline at end of file