mqzheng/cf-wx-app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

home page intiially done

Browse Source
This commit is contained in:
郑茂强
2018-11-30 17:30:16 +08:00
parent 379d337dde
commit c8ce8d602f
9 changed files with 423 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/component/filteredShopComponent/filteredShopComponent.js Normal file
View File

@@ -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 <View className='goods-img-box' key={index}>
<Image className='goods-img' src={'http://192.168.1.230/'+item.goods_url} />
</View>
})
return (
<View className='shop-list-box'>
<View className='header'>
<View className='title'>
<Image src={ads==0 ? hornIcon :houseIcon} style='width:12px; height:12px; vertical-align: middle;'/>
<Text style='margin-left:2px; vertical-align: middle;'> {title}</Text>
</View>
<View className='consult-voucher-button' >
<Button style='padding:0' className={voucherLeft ? 'voucher-button-text voucher' : 'voucher-button-text'} >优惠卷</Button>
<Button style='padding:0' className='consult-button-text'>咨询</Button>
</View>
</View>
<View className='body'>
<View className='shop-img'>
<Image src={imgUrl}/>
</View>
{goods.length !== 1 ? goodsElementsArray:<View className='details'>
<View className='details-block'><Text className='details-text'>商品:</Text> <Text>{ProductName}</Text></View>
<View className='details-block'><Text className='details-text'>价格: </Text><Text>{price}</Text></View>
</View>}
</View>
<View className='footer'>
<View className='address'>
<AtIcon value='map-pin' size='15' color='#FF7142'></AtIcon>
{address} </View>
<View className='distance'><Text>{distance}</Text></View>
</View>
</View>
)
}
}
export default recommondShop

97
src/component/filteredShopComponent/filteredShopComponent.scss Normal file
View File

@@ -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%;
}
}
}

65
src/component/recommendShop/recommendShop.js
View File

@@ -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 (
<View className='shop-list-box'>
<View className='header'>
<View className='title'>
{title}
</View>
<View className='ask-button'>
<Button>咨询</Button>
</View>
</View>
<View className='body'>
<View className='shop-img'>
<Image
src={imgUrl}
/>
</View>
<View className='details'>
<View><Text>商品:{ProductName}</Text> </View>
<View><Text>价格:{price}</Text></View>
</View>
</View>
<View className='footer'>
<View className='address'><Text>{address}</Text> </View>
<View className='distance'><Text>{distance}</Text></View>
</View>
</View>
)
}
}
export default recommondShop

53
src/component/recommendShop/recommondShop.scss
View File

@@ -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
}
}
}