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

添加店铺页面

Browse Source
This commit is contained in:
郑茂强 2018-12-03 17:32:48 +08:00
parent c8ce8d602f
commit 215a2c5f61
11 changed files with 337 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app.js
View File

@ -20,6 +20,7 @@ class App extends Component {
pages: [
'pages/index/index',
'pages/home/home',
'pages/shop/shop',
],
window: {
backgroundTextStyle: 'light',

67
src/component/bottomNav/bottomNav.js Normal file
View File

@ -0,0 +1,67 @@
import Taro, { Component } from '@tarojs/taro'
import { View} from '@tarojs/components'
import { AtTabBar } from 'taro-ui'
import './bottomNav.scss'
class bottomNav extends Component {
config = {
navigationBarTitleText: 'bottomNav'
}
constructor(){
super(...arguments);
this.state={
current:0
}
}
handleClick(value){
this.setState({
current: value
})
let path=this.props.otherData.menu[value].url
Taro.navigateTo({
url: path,
})
}
componentWillReceiveProps(nextProps) {
//console.log(this.props, nextProps)
}
componentWillUnmount() { }
componentDidShow() { }
componentDidHide() { }
render() {
const otherDataElementsArray = this.props.otherData.menu? this.props.otherData.menu.map((item, index) => {
return { title: item.name, iconType: 'clock' }
}):null
return (
<View >
<AtTabBar className='bottom-nav'
fixed
fontSize='10'
iconSize='18'
selectedColor='#FF7142'
tabList={
otherDataElementsArray
}
onClick={this.handleClick.bind(this)}
current={this.state.current}
/>
</View>
)
}
}
export default bottomNav

0
src/component/bottomNav/bottomNav.scss Normal file
View File

20
src/component/filteredShopComponent/filteredShopComponent.js
View File

@ -3,16 +3,21 @@ import { View, Button, Text,Image } from '@tarojs/components'
import { AtIcon } from 'taro-ui'
import './filteredShopComponent.scss'
import URL from '../../serviceAPI.config'
const hornIcon = require('../../icons/horn.png')
const houseIcon = require('../../icons/house.png')
class recommondShop extends Component {
config = {
navigationBarTitleText: 'recommondShop'
}
goToShop(value) {
Taro.navigateTo({
url: '/pages/shop/shop?id='+value.shop_id+'&name='+value.shop_name
})
}
componentWillReceiveProps(nextProps) {
//console.log(this.props, nextProps)
@ -27,23 +32,22 @@ class recommondShop extends Component {
render() {
const title = this.props.shop.shop_name
const imgUrl = 'http://192.168.1.230/' + this.props.shop.goods[0].goods_url
const imgUrl = URL.Base + 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} />
<Image className='goods-img' src={URL.Base+item.goods_url} />
</View>
})
return (
<View className='shop-list-box'>
<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;'/>
@ -56,7 +60,7 @@ class recommondShop extends Component {
</View>
</View>
<View className='body'>
<View className='shop-img'>
<View className='shop-img' onClick={this.goToShop.bind(this, this.props.shop)}>
<Image src={imgUrl}/>
</View>
{goods.length !== 1 ? goodsElementsArray:<View className='details'>

4
src/component/filteredShopComponent/filteredShopComponent.scss
View File

@ -8,7 +8,7 @@
border-bottom:1px solid #F2F2F2;
display: flex;
.title{
width: 50%;
width: 55%;
color: #333;
font-weight: bold;
font-size: 30px;
@ -16,7 +16,7 @@
}
.consult-voucher-button{
width: 50%;
width: 45%;
//margin-top: 20px ;
margin-left: 200px;
display: flex;

5
src/index.html
View File

@ -8,6 +8,8 @@
<meta name="format-detection" content="telephone=no,address=no">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
<title>Taro</title>
<script>
!function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=640){r.style.fontSize="40px"}else{if(a<=320){r.style.fontSize="20px"}else{r.style.fontSize=a/320*20+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);
@ -16,4 +18,7 @@
<body>
<div id="app"></div>
</body>
<script>
</script>
</html>

99
src/pages/home/home.js
View File

@ -1,10 +1,9 @@
import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text, Swiper, SwiperItem, Image } from '@tarojs/components'
import { AtButton } from 'taro-ui'
import { AtActivityIndicator } from 'taro-ui'
import filteredShopComponent from '../../component/filteredShopComponent/filteredShopComponent'
import { add, minus, asyncAdd } from '../../actions/counter'
import bottomNav from '../../component/bottomNav/bottomNav'
import URL from '../../serviceAPI.config'
import './home.scss'
class Home extends Component {
@ -13,15 +12,22 @@ class Home extends Component {
navigationBarTitleText: '首页'
}
constructor() {
super(...arguments);
this.state = {
shopsDetails: '',
ads: '',
categories: '',
demanding: '',
otherData:''
}
}
componentWillMount(){
}
componentDidMount() {
this.getShops()
this.getHomeCategoriesInfo()
}
@ -35,9 +41,10 @@ class Home extends Component {
componentDidHide() { }
// 得到首页的信息
getHomeCategoriesInfo() {
Taro.request({
url: 'http://192.168.1.230/Shop-wxStore',
url: URL.ShopWxStore,
})
.then(res => {
console.log(res)
@ -45,14 +52,16 @@ class Home extends Component {
ads: res.data.data.adsLb,
categories: res.data.data.supplyClass,
demanding: res.data.data.demand.supplys,
otherData:res.data.otherData
}, () => {
//console.log(this.state.demanding)
})
})
}
// 得到所有商店的信息
getShops(parent_supply_class = 0, supply_class = '-1', supply_level = 1) {
Taro.request({
url: 'http://192.168.1.230/Shop-supplyShops',
url: URL.ShopSupplyShops,
method: 'POST',
dataType: 'json',
data: {
@ -66,7 +75,8 @@ class Home extends Component {
})
},
header: {
'content-type': 'application/x-www-form-urlencoded'
'content-type': 'application/x-www-form-urlencoded',
}
})
.then(res => {
@ -84,8 +94,9 @@ class Home extends Component {
this.getShops(item.parent_class_id, item.class_id, 2)
}
render() {
const demandingElemensArray = this.state.demanding.map((item, index) => {
const demandingElemensArray = this.state.demanding?this.state.demanding.map((item, index) => {
return < SwiperItem key={index} >
<View className='demanding-item'>
<View className='item-tag'>
@ -105,39 +116,44 @@ class Home extends Component {
</View>
</View>
</SwiperItem >
})
}) :null
const adsImgElementsArray = this.state.ads.map((item, index) => {
const adsImgElementsArray = this.state.ads?this.state.ads.map((item, index) => {
return <SwiperItem key={index}>
<Image className='banner-img' src={'http://192.168.1.230/' + item.ads_pic} />
<Image className='banner-img' src={URL.Base + item.ads_pic} />
</SwiperItem>
})
}):null
// 这里应该代码可以优化-----
const categoriesElementsArray1 = this.state.categories[0].map((item, index) => {
const categoriesElementsArray1 = this.state.categories?this.state.categories[0].map((item, index) => {
return <View className='category-item' key={index} onClick={this.onClickParentCate.bind(this, item)}>
<View> <Image style='height: 42px;width: 42px;' className='cate-img' src={'http://192.168.1.230/' + item.icon} /></View>
<View> <Image style='height: 42px;width: 42px;' className='cate-img' src={URL.Base + item.icon} /></View>
<View>{item.class_name}</View>
</View>
})
const categoriesElementsArray2 = this.state.categories[1].map((item, index) => {
}):null
const categoriesElementsArray2 = this.state.categories?this.state.categories[1].map((item, index) => {
return <View className='category-item' key={index} onClick={this.onClickParentCate.bind(this, item)}>
<View> <Image style='height: 42px;width: 42px;' className='cate-img' src={'http://192.168.1.230/' + item.icon} /></View>
<View> <Image style='height: 42px;width: 42px;' className='cate-img' src={URL.Base + item.icon} /></View>
<View>{item.class_name}</View>
</View>
})
const shopCollectionElementsArray = this.state.shopsDetails.map((item, index) => {
}):null
const shopCollectionElementsArray = this.state.shopsDetails?this.state.shopsDetails.map((item, index) => {
return <filteredShopComponent shop={item} key={index}></filteredShopComponent>
})
const subCateElementsArray = this.state.subCate.map((item, index) => {
}):null
const subCateElementsArray = this.state.subCate?this.state.subCate.map((item, index) => {
return <SwiperItem key={index} onClick={this.onClickChildCate.bind(this, item)}>
<View className='text'>{item.class_name}</View>
</SwiperItem>
})
}):null
return (
<View className='home'>
{/* 第一行图片滚动条 */}
<View className='first-banner'>
<Swiper
className='swipper'
@ -147,7 +163,6 @@ class Home extends Component {
circular
indicatorDots
autoplay>
{adsImgElementsArray}
</Swiper>
@ -190,17 +205,7 @@ class Home extends Component {
</Swiper>
</View>
<View className='second-banner-level2'>
<Swiper
className='swipper swiper-sub'
indicatorColor='#999'
indicatorActiveColor='#333'
horizontal
displayMultipleItems='4.5'
>
{subCateElementsArray}
</Swiper>
</View>
{/* 业主需求和行业推荐 */}
<View className='container'>
<View className='title'>
@ -226,16 +231,40 @@ class Home extends Component {
</View>
<View className='sub-cate'>
</View>
<View className='second-banner-level2'>
<Swiper
className='swipper swiper-sub'
indicatorColor='#999'
indicatorActiveColor='#333'
horizontal
displayMultipleItems='4.5'
>
{subCateElementsArray}
</Swiper>
</View>
<View className='title'>
<Text className='title-block'></Text>
<Text className='title-text'>行业推荐</Text>
</View>
<View className='shop-box'>
{shopCollectionElementsArray}
{this.state.shopsDetails.length !== 0 ? <View className='title'>
沒有更多了...
</View>: < View className='title' >
没有找到...
</View > }
</View>
</View>
<View className='bottom-nav-box'>
<bottomNav otherData={this.state.otherData}/>
</View>
</View>
)
}

13
src/pages/home/home.scss
View File

@ -1,4 +1,5 @@
.home{
overflow: hidden;
.banner-img{
width: 100%
}
@ -84,7 +85,19 @@
}
.shop-box{
padding:0 20px;
.title{
text-align: center;
color: #999;
font-size: 25px;
height: 180px
}
}
.bottom-nav-box{
.bottom-nav{
height: 20px
}
}
}
.second-banner{

132
src/pages/shop/shop.js Normal file
View File

@ -0,0 +1,132 @@
import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text, Swiper, SwiperItem, Image } from '@tarojs/components'
import { AtSearchBar, Picker } from 'taro-ui'
import URL from '../../serviceAPI.config'
import './shop.scss'
class Shop extends Component {
// 项目配置
config = {
navigationBarTitleText: '店铺'
}
constructor() {
super(...arguments)
this.state = {
value: '',
shopId:'',
shopName:''
}
}
onChange(value) {
this.setState({
value: value
})
}
onActionClick() {
console.log('开始搜索')
}
getShopInfo() {
Taro.request({
url: URL.GoodsSearch,
method:'POST',
dataType: 'json',
data:{
goods: JSON.stringify({
curr_page: 1,
page_count: 50,
shop_name: false,
shop_id: 1254,
config_id: 4,
shop_class_id: '',
order: 'g.browse_times desc',
currPage: 1,
goods_class_id: 10401
}),
goodsRegion: JSON.stringify({}),
goodsSpec: JSON.stringify([]),
goodsParam: JSON.stringify([]),
goodsParamExt: JSON.stringify([]),
},
header: {
'content-type': 'application/x-www-form-urlencoded',
'X-Requested-With':'XMLHttpRequest'
}
})
.then(res => {
console.log('res--',res)
})
}
componentWillMount() {
this.setState({ shopId: this.$router.params.id, shopName: this.$router.params.name}) // 输出 { id: 2, type: 'test' }
}
componentDidMount(){
this.getShopInfo()
}
componentDidShow() { }
componentDidHide() { }
render() {
const shopName= this.state.shopName
console.log(shopName)
return (
<View className='shop'>
<View className='searchBar-box'>
<AtSearchBar
showActionButton
value={this.state.value}
onChange={this.onChange.bind(this)}
onActionClick={this.onActionClick.bind(this)}
/>
</View>
<View className='banner-box'>
<Image src={URL.Base + 'Public/visual_editing/img/ksh_bg.jpg'} style='height:120px'/>
<View className='shop-name'>{shopName}</View>
</View>
<View className='nav-box'>
<View className='nav'>
<View className='shop-cate'>
<Text className='text'>
店铺全部分类
</Text>
</View>
<View className='home-link'>
<Text className='text'>
首页
</Text>
</View>
<View className='home-link'>
<Text className='text'>
店铺说明
</Text>
</View>
</View>
</View>
<View className='filter-box'>
</View>
<View className='container'>
</View>
</View>
)
}
}
export default Shop

30
src/pages/shop/shop.scss Normal file
View File

@ -0,0 +1,30 @@
.banner-box{
position: relative;
.shop-name{
position: absolute;
top:100px;
left:60px;
font-size: 50px
}
}
.nav-box{
background-color: black;
.nav{
display: flex;
line-height: 55px;
.text{
color:white;
font-size: 28px
}
.shop-cate{
flex:1
}
.home-link{
flex:1
}
}
}

11
src/serviceAPI.config.js Normal file
View File

@ -0,0 +1,11 @@
const LOCALURL = "http://192.168.1.230/"
const URL = {
Base:LOCALURL,
ShopWxStore: LOCALURL + 'Shop-wxStore', //商城首页信息
ShopSupplyShops: LOCALURL + 'Shop-supplyShops',// 商城店铺信息
GoodsSearch: LOCALURL + 'GoodsSearch-search',// 店铺页面的信息
}
module.exports = URL