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

添加优惠卷 询价 api

Browse Source
This commit is contained in:
郑茂强 2018-12-14 17:10:23 +08:00
parent 161862d12f
commit 6bacc5be25
19 changed files with 924 additions and 311 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1 @@
{}

8
src/app.js
View File

@ -26,15 +26,23 @@ class App extends Component {
'pages/supplyDemandPublish/supplyDemandPublish',
'pages/mySupplyDemand/mySupplyDemand',
'pages/allDemanding/allDemanding',
'pages/shopDescription/shopDescription',
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
}
,
}
componentDidMount () {}
componentDidShow () {}

BIN
src/assets/img/errorimg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

2
src/component/bottomNav/bottomNav.js
View File

@ -26,7 +26,7 @@ class bottomNav extends Component {
const otherData = [
{ name: '首页', url: '/pages/home/home' },
{ name: '商品发布', url: '/pages/goodsPublish/goodsPublish' },
{ name: '供求发布', url: '/pages/supplyDemandPubish/supplyDemandPubish' },
{ name: '供求发布', url: '/pages/supplyDemandPublish/supplyDemandPublish' },
{ name: '我的供求', url: '/pages/mySupplyDemand/mySupplyDemand' },
{ name: '更多', url: '' },
]

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

@ -1,28 +1,170 @@
import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text,Image } from '@tarojs/components'
import { AtIcon } from 'taro-ui'
import { View, Button, Text, Image } from '@tarojs/components'
import { AtIcon, AtModal, AtModalHeader, AtModalContent, AtModalAction, AtInput, AtToast, AtNoticebar } 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'
}
constructor() {
super(...arguments);
this.state = {
isOpenVouhcer: false,
isOpenConsult: false,
consultTip: '',
isToast: false,
consultResponseMsg: '',
voucherResponseMsg: '',
voucherCanConsult: false,
}
}
goToShop(value) {
Taro.navigateTo({
url: '/pages/shop/shop?id='+value.shop_id+'&name='+value.shop_name
url: '/pages/shop/shop?id=' + value.shop_id + '&name=' + value.shop_name
})
}
// api 优惠卷请求
getVoucherInfo( {user="杨夕兵",phone="18950295811",shops=["808"],source_type=4,flag=false,source_class="1",source_level=1}) {
Taro.request({
url: URL.GetVoucherInfo,
method: 'POST',
dataType: 'json',
data: {
user: user,
phone: phone,
shops: shops,
source_type: source_type,
flag: flag,
source_class:source_class,
source_level: source_level
},
header: {
'content-type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(res => {
this.setState({
voucherResponseMsg: res.data.tips,
voucherCanConsult: res.data.canConsult
})
console.log('优惠卷请求', res)
})
}
// api 咨询信息
getConsultInfo({ user = "杨夕兵", phone = "18950295811", shops = ["1306"], source_type = "2", flag = false, source_level = 1 }) {
Taro.request({
url: URL.GetConsultInfo,
method: 'POST',
dataType: 'json',
data: {
user: user,
phone: phone,
shops: shops,
source_type: source_type,
flag: flag,
source_level: source_level
},
header: {
'content-type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(res => {
this.setState({ consultTip: res.data.tips })
console.log('咨询请求', res)
})
}
// api 购买咨询 BuyConsult
buyConsult({ user = "杨夕兵", phone = "18950295811", shops = ["1306"], source_type = "2", source_level = 1, coupons_flag = 0 }) {
Taro.request({
url: URL.BuyConsult,
method: 'POST',
dataType: 'json',
data: {
data: JSON.stringify({
user: user,
phone: phone,
shops: shops,
source_type: source_type,
source_level: source_level,
coupons_flag: coupons_flag,
})
},
header: {
'content-type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(res => {
console.log('购买咨询请求', res)
if (res.err_code === 0 && res.err_msg === "success") {
this.setState({ consultResponseMsg: '成功' }, () => {
this.setState({ isToast: true })
})
// 延迟3秒 后将toast 关掉
setTimeout(() => {
this.setState({ isToast: false })
}, 3000);
} else {
this.setState({ consultResponseMsg: res.data.err_msg }, () => {
this.setState({ isToast: true })
})
setTimeout(() => {
this.setState({ isToast: false })
}, 3000);
}
})
}
// 优惠卷弹框。取消。确认
isOpenVoucher() {
this.setState({ isOpenVouhcer: true })
this.getVoucherInfo({})
}
voucherModalClose() {
this.setState({ isOpenVouhcer: false })
}
voucherModalConfirm() {
this.setState({ isOpenVouhcer: false })
this.buyConsult({})
}
// 咨询弹框。取消。确认
isOpenConsult() {
this.setState({ isOpenConsult: true })
this.getConsultInfo({})
}
consultModalClose() {
this.setState({ isOpenConsult: false })
}
consultModalConfirm() {
this.setState({ isOpenConsult: false })
this.buyConsult({})
}
componentWillReceiveProps(nextProps) {
//console.log(this.props, nextProps)
}
componentDidMount() {
}
componentWillUnmount() { }
componentDidShow() { }
@ -30,52 +172,112 @@ class recommondShop extends Component {
componentDidHide() { }
render() {
const title = this.props.shop?this.props.shop.shop_name:null
// console.log('店铺',this.props.shop)
const title = this.props.shop ? this.props.shop.shop_name : null
const imgUrl = this.props.shop ? URL.Base + this.props.shop.goods[0].goods_url : null
const price = this.props.shop ? this.props.shop.goods[0].goods_price : null
const goods = this.props.shop ? this.props.shop.goods : null
const ProductName = this.props.shop ? this.props.shop.goods[0].goods_name : null
const address = this.props.shop ? this.props.shop.shop_address : null
const distance = this.props.shop ? this.props.shop.distance : null
const ads = this.props.shop ? this.props.shop.ads:null
// const consultText = this.props.shop.wx_open
const voucherLeft = this.props.shop?this.props.shop.left_nums:null
const slicedGoods = goods !==null?goods.slice(1):null
const goodsElementsArray = goods !== null ? slicedGoods.map((item,index)=>{
const ads = this.props.shop ? this.props.shop.ads : null
const voucherLeft = this.props.shop ? this.props.shop.left_nums : null
// const consultText = this.props.shop.wx_open
const slicedGoods = goods !== null ? goods.slice(1) : null
const goodsElementsArray = goods !== null ? slicedGoods.map((item, index) => {
return <View className='goods-img-box' key={index}>
<Image className='goods-img' onClick={this.goToShop.bind(this, this.props.shop)} mode='aspectFit' style='max-height: 100%; max-width: 100%;'src={URL.Base+item.goods_url} />
<Image className='goods-img' onClick={this.goToShop.bind(this, this.props.shop)} mode='aspectFit' style='max-height: 100%; max-width: 100%;' src={URL.Base + item.goods_url} />
</View>
}):null
}) : null
// 优惠卷和咨询元素
const voucherModalElement = <AtModal className='voucher-modal' isOpened={this.state.isOpenVouhcer}>
<AtModalHeader>优惠卷须知：</AtModalHeader>
<AtModalContent>
<AtNoticebar className='warning' icon='volume-plus'>
提示：具体可以前往实体店进行领取优惠卷或通过电话进行咨询
</AtNoticebar>
<View className='voucher-left'>当前优惠卷{voucherLeft}张</View>
<AtInput
disabled
name='value'
title='联系人：'
type='text'
placeholder='123'
/>
<AtInput
disabled
name='value'
title='联系电话：'
type='number'
placeholder='需求标题'
/>
{!this.state.voucherCanConsult ? <View className='voucher-ResponseMsg'>{this.state.voucherResponseMsg}</View> : null}
</AtModalContent>
<AtModalAction> <Button onClick={this.voucherModalClose.bind(this)} >取消</Button> <Button onClick={this.voucherModalConfirm.bind(this)}>确定</Button> </AtModalAction>
</AtModal>
const consultModalElement = <AtModal isOpened={this.state.isOpenConsult}>
<AtModalHeader>咨询</AtModalHeader>
<AtModalContent>
<View className='tip'> <Text>提示:</Text><Text className='tip-info'>{this.state.consultTip}</Text></View>
<AtInput
name='value'
title='联系人：'
type='text'
placeholder='123'
/>
<AtInput
name='value'
title='联系电话：'
type='number'
placeholder='需求标题'
/>
</AtModalContent>
<AtModalAction> <Button onClick={this.consultModalClose.bind(this)} >取消</Button> <Button onClick={this.consultModalConfirm.bind(this)}>确定</Button> </AtModalAction>
</AtModal>
// 请提示元素
const toast = <AtToast
isOpened={this.state.isToast}
text={this.state.consultResponseMsg}
// iconSize={iconSize}
// iconType={iconType}
// iconColor={iconColor}
// isHiddenIcon={isHiddenIcon}
></AtToast>
return (
<View className='shop-list-box' >
{voucherModalElement}
{consultModalElement}
{toast}
<View className='header'>
<View className='title'>
<Image src={ads==0 ? hornIcon :houseIcon} style='width:12px; height:12px; vertical-align: middle;'/>
<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>
<Button onClick={this.isOpenVoucher.bind(this)} style='padding:0' className={voucherLeft ? 'voucher-button-text voucher' : 'voucher-button-text'} >优惠卷</Button>
<Button onClick={this.isOpenConsult.bind(this)} style='padding:0' className='consult-button-text'>询价</Button>
</View>
</View>
<View className='body'>
<View className='shop-img' onClick={this.goToShop.bind(this, this.props.shop)}>
<Image mode='aspectFit' style=' max-height: 100%; max-width: 100%;' src={imgUrl}/>
<Image mode='aspectFit' style=' max-height: 100%; max-width: 100%;' src={imgUrl} />
</View>
{goods.length !== 1 ? goodsElementsArray:<View className='details'>
<View className='details-block'><Text className='details-text'>商品:</Text> <Text>{ProductName}</Text></View>
{goods.length !== 1 ? <View className='images'>{goodsElementsArray}</View> : <View className='details'>
<View className='details-block'><Text className='details-text'>商品:</Text> {ProductName}</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>
{address} </View>
<View className='distance'><Text>{distance}</Text></View>
</View>
</View>
)

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

@ -3,6 +3,26 @@
border-radius: 3px;
box-shadow: 0 5px 5px #ddd;
margin-bottom: 10px;
.voucher-modal{
background-color: black;
.at-modal-content{
background-color: black
}
}
.tip-info{
color:#a94442
}
.warning, .voucher-left, .voucher-ResponseMsg{
color:#a94442
}
.voucher-left{
margin-top: 20px;
text-align: center;
}
.header{
border-bottom:1px solid #F2F2F2;
@ -21,6 +41,7 @@
margin-left: 200px;
display: flex;
//vertical-align: middle;
.consult-button-text{
color:white;
font-size: 28px;
@ -28,7 +49,7 @@
width: 100px;
line-height:50px;
height:50px;
margin-top:15px;
margin-top:20px;
}
.voucher-button-text{
color:white;
@ -37,7 +58,7 @@
width: 100px;
line-height:50px;
height:50px;
margin-top:15px;
margin-top:20px;
}
.voucher{
@ -51,24 +72,19 @@
flex-wrap: nowrap;
font-size: 35px;
.shop-img{
flex:1;
margin:20px;
text-align: center;
height: 200px;
width: 200px;
}
.details{
font-size: 30px;
margin-left: 30px;
.details-block{
margin-top: 30px;
.details-text{
font-weight: bold;
}
}
}
.goods-img-box{
flex:1;
.images{
flex:3;
display: flex;
flex-wrap: nowrap;
.goods-img-box{
width:25%;
margin-top: 20px;
.goods-img{
@ -78,6 +94,24 @@
margin: 10px
}
}
}
.details{
flex:3;
font-size: 30px;
padding: 30px 30px;
overflow: hidden;
.details-block{
margin-top: 30px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.details-text{
font-weight: bold;
}
}
}
}
.footer{
display: flex;

12
src/component/searchBarComponent/searchBarComponent.js
View File

@ -1,6 +1,6 @@
import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text } from '@tarojs/components'
import { View } from '@tarojs/components'
import { AtSearchBar } from 'taro-ui'
@ -9,13 +9,17 @@ import './searchBarComponent.scss'
class SearchBarComponent extends Component {
config = {
navigationBarTitleText: 'searchBarComponent'
}
constructor() {
super(...arguments)
this.state = {
value: ''
@ -30,6 +34,7 @@ class SearchBarComponent extends Component {
render() {
return (
<View className='searchBarComponent'>
<View className='searchBar-box'>
<AtSearchBar className='search-button'
actionName='搜索'
@ -38,6 +43,7 @@ class SearchBarComponent extends Component {
onActionClick={this.onActionClick.bind(this)}
/>
</View>
</View>
)
}

19
src/component/searchBarComponent/searchBarComponent.scss
View File

@ -1,8 +1,19 @@
// 整个样式和shoppage 一样但是不生效
// .searchBarComponent{
// .search-button{
// .at-search-bar__action{
// background-color:#FF9900
// }
// }
// }
//
.search-button{
.at-search-bar__action{
background-color: #FF9900
background-color:#FF9900
}
}
}

18
src/component/shopItemComponent/shopItemComponent.js
View File

@ -3,19 +3,33 @@ import { View, Image, Text } from '@tarojs/components'
import eyeIcon from '../../icons/eye.png'
import cartIcon from '../../icons/cart.png'
import errorImg from '../../assets/img/errorimg.png'
import './shopItemComponent.scss'
import URL from '../../serviceAPI.config'
class ShopItem extends Component {
// errorImg:'this.src="' + require('@/assets/images/errorimg.png') + '"' , //错误图片显示路径
constructor() {
super(...arguments)
this.state = {
}}
shopOnClickHanlder(){
Taro.navigateTo({
url: '/pages/goods/goods?id=123&name=michael'
})
}
// 当图片无效的时候 的方法 （为什么不起作用？？）
onError(e){
e.target.onerror = null;
e.target.src = 'https://raw.githubusercontent.com/shenghy/SmileVue/master/src/assets/images/errorimg.png'
}
render() {
const imgURL =this.props.item? URL.Base +this.props.item.goods_url:null
const newPrice = this.props.item ? this.props.item.goods_price : null
@ -29,7 +43,7 @@ class ShopItem extends Component {
{goodType}
</View>
<View className='image-box'>
<Image mode='aspectFit' style=' max-height: 100%; max-width: 100%;' className='img' src={imgURL}/>
<Image mode='aspectFit' style=' max-height: 100%; max-width: 100%;' alt={name} className='img' src={imgURL} onError={this.onError.bind(this)} />
</View>
<View className='price-box'>
<Text class='new-price'>￥{newPrice+' '}</Text>

82
src/pages/allDemanding/allDemanding.js
View File

@ -9,7 +9,7 @@ import './allDemanding.scss'
import eyeIcon from '../../icons/eye.png'
let currentPage=1
let currentPage = 1
class AllDemanding extends Component {
config = {
navigationBarTitleText: '全部业主需求'
@ -17,17 +17,17 @@ class AllDemanding extends Component {
constructor() {
super(...arguments)
this.state = {
supplys:[], // 需求列表
isMore:'more', // 上拉加载状态
demandingState: [ '需求', '供应', '人才'], // 供求状态选择
demandingStateSelected:'全部', // 当前供求状态
industryCate: ['制定家具', '成品家具', '办公家具','设计'], // 行业分类状态选择
supplys: [], // 需求列表
isMore: 'more', // 上拉加载状态
demandingState: ['全部', '在用', '已抢单', '已抢光'], // 供求状态选择
demandingStateSelected: '全部', // 当前供求状态
industryCate: ['全部', '制定家具', '成品家具', '办公家具', '设计'], // 行业分类状态选择
industryCateSelected: '全部', // 当前行业分类状态
startDateSel: '2018-04-22',
endDateSel: '2018-04-22',
}
}
GetAllDemanding({ curr_page=1, page_count=20}) {
GetAllDemanding({ curr_page = 1, page_count = 20 }) {
Taro.request({
url: URL.GetAllDemanding,
method: 'POST',
@ -44,22 +44,22 @@ class AllDemanding extends Component {
}
})
.then(res => {
if (res.data.supplys.length){
const newSupplys=this.state.supplys.concat(res.data.supplys)
this.setState({ supplys: newSupplys, isMore: 'more'})
}else{
this.setState({ isMore:'noMore'})
}
if (res.data.supplys.length) {
const newSupplys = this.state.supplys.concat(res.data.supplys)
this.setState({ supplys: newSupplys, isMore: 'more' })
} else {
this.setState({ isMore: 'noMore' })
}
})
}
// 向上拉升延迟一秒加载数据
handleLoadMore(){
this.setState({isMore:'loading'})
handleLoadMore() {
this.setState({ isMore: 'loading' })
setTimeout(() => {
currentPage += 1
this.GetAllDemanding({ curr_page: currentPage })
}, 1000);
}
// 改变需求选项
@ -74,13 +74,13 @@ class AllDemanding extends Component {
industryCateSelected: this.state.industryCate[e.detail.value]
})
}
//改变开始日期
//改变开始日期
onStartDateChange = e => {
this.setState({
startDateSel: e.detail.value
})
}
// 改变结束日期
// 改变结束日期
onEndDateChange = e => {
this.setState({
endDateSel: e.detail.value
@ -91,10 +91,10 @@ class AllDemanding extends Component {
componentWillReceiveProps(nextProps) {
console.log(this.props, nextProps)
}
componentDidMount(){
componentDidMount() {
// 得到第一页需求数据
this.GetAllDemanding({})
}
componentWillUnmount() { }
@ -104,39 +104,39 @@ class AllDemanding extends Component {
componentDidHide() { }
render() {
const allDemandingElementArray=this.state.supplys?this.state.supplys.map((item,index)=>{
const allDemandingElementArray = this.state.supplys ? this.state.supplys.map((item, index) => {
return <View className='demanding-info' key={index}>
<View className='header'>
<View className='header'>
<AtIcon value='user' size='12' color='#2196F3'></AtIcon>
<View className='name'> 业主:{item.user_name}</View>
<View className='others'>
<Text className='cate'>{item.class_name+' '} </Text>
|
<Text className='cate'>{item.class_name + ' '} </Text>
|
<Image src={eyeIcon} style='width:12px; height:12px; vertical-align:middle;' />
<Text className='watch'>{item.browse_times}</Text>
</View>
</View>
<View className='body'>
<View className='image-container'>
</View>
<View className='body'>
<View className='image-container'>
<Image style='width:90px;height:60px' src={URL.Base + item.file_path[0].thumb_path} />
</View>
<View className='detail'>
</View>
<View className='detail'>
<View className='title'>{item.sd_title}</View>
<View className='para'>{item.sd_desc}</View>
<View className='button'>
<AtButton type='primary' size='small'>
抢单</AtButton>
</View>
<View className='button'>
<AtButton type='primary' size='small'>
抢单</AtButton>
</View>
</View>
<View className='footer'>
<View className='location'><AtIcon value='map-pin' size='12' color='black'></AtIcon>没有数据</View>
<View className='time'>更新日期:{item.update_date}</View>
</View>
</View>
}):null
<View className='footer'>
<View className='location'><AtIcon value='map-pin' size='12' color='black'></AtIcon>没有数据</View>
<View className='time'>更新日期:{item.update_date}</View>
</View>
</View>
}) : null
return (
<View className='allDemanding'>
<View className='page-section'>
@ -201,13 +201,15 @@ class AllDemanding extends Component {
搜索</AtButton>
</View>
</View>
{/* 供求页面的数据加载 */}
{/* 供求页面的数据加载 */}
<View className='demanding-box'>
{allDemandingElementArray}
</View>
<AtLoadMore
onClick={this.handleLoadMore.bind(this)}
status={this.state.isMore}
loadingText='加载中'
noMoreText='没有更多了'
/>
<copyrightComponent></copyrightComponent>
</View>

2
src/pages/goods/goods.js
View File

@ -138,7 +138,7 @@ class Goods extends Component {
{/* 详情和评论区 */}
<View className='details-box'>
{/* 大类 */}
<AtTabs color='#FF9500' className='alltabs' animated={false} current={this.state.current} tabList={mainTabList} onClick={this.handleClick.bind(this)}>
<AtTabs selectedColor='#FF7142' className='alltabs' animated={false} current={this.state.current} tabList={mainTabList} onClick={this.handleClick.bind(this)}>
<AtTabsPane current={this.state.current} index={0} >
<View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;' >商品细节：</View>
</AtTabsPane>

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

@ -119,6 +119,17 @@
}
//------------------------------
.details-box{
.at-tabs{
.at-tabs__item--active{
color:#FF7142
}
}
}
//------------------------------
.copyright-box{
padding:0 20px;
@ -137,6 +148,7 @@
position: fixed;
bottom: 0;
width: 100%;
z-index: 600;
.shop-bottom-nav{
display: flex;
flex-wrap: nowrap;
@ -145,6 +157,7 @@
height: 90px;
line-height: 90px;
font-size: 30px;
.to-shop{
flex:1;

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

@ -1,6 +1,6 @@
import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text, Swiper, SwiperItem, Image } from '@tarojs/components'
import { AtActivityIndicator } from 'taro-ui'
import { View, Button, Text, Swiper, SwiperItem, Image, } from '@tarojs/components'
import { AtModal } from 'taro-ui'
import filteredShopComponent from '../../component/filteredShopComponent/filteredShopComponent'
import bottomNav from '../../component/bottomNav/bottomNav'
import URL from '../../serviceAPI.config'
@ -11,6 +11,7 @@ class Home extends Component {
config = {
navigationBarTitleText: '首页'
}
constructor() {
super(...arguments);
this.state = {
@ -19,7 +20,8 @@ class Home extends Component {
categories: [],// 大类
subCate:[], //小类
demanding: [],// 业主需求
otherData:[] // 底部导航栏
otherData:[], // 底部导航栏
isOpen:false, // 抢单消息提示
}
}
componentWillMount(){
@ -27,17 +29,14 @@ class Home extends Component {
}
componentDidMount() {
// 页面加载后 得到首页的基本信息和推荐店铺的信息
Taro.showLoading({ title: '加载中' })
this.getShops()
this.getHomeCategoriesInfo()
}
componentWillUnmount() { }
componentDidShow() { }
componentDidHide() { }
// 得到首页的信息
//api 得到首页的信息
getHomeCategoriesInfo() {
Taro.request({
url: URL.ShopWxStore,
@ -52,7 +51,7 @@ class Home extends Component {
})
})
}
// 得到推荐商店的信息
// api 得到推荐商店的信息
getShops(parent_supply_class = 0, supply_class = '-1', supply_level = 1) {
Taro.request({
url: URL.ShopSupplyShops,
@ -70,17 +69,36 @@ class Home extends Component {
},
header: {
'content-type': 'application/x-www-form-urlencoded',
}
})
.then(res => {
console.log('所有店铺的信息', res)
Taro.hideLoading()
this.setState({ shopsDetails: res.data.shops }, () => {
})
}
)
}
// 点击大类
// api 抢单请求
GrabDemand({demandId=218}){
Taro.request({
url: URL.GrabDemand,
method: 'POST',
dataType: 'json',
data: {
demandId: demandId
},
header: {
'content-type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(res => {
console.log('抢单请求：',res)
})
}
// 点击大类icon
onClickParentCate(item) {
this.setState({ subCate: item.children })
this.getShops(item.parent_class_id, item.class_id)
@ -95,8 +113,40 @@ class Home extends Component {
url: '/pages/allDemanding/allDemanding'
})
}
grabOrder(){
this.setState({isOpen:true})
}
handleGrabModalClose(){
this.setState({isOpen:false})
}
handleGrabModalCancel(){
this.setState({isOpen:false})
}
handleGrabConfirm(){
this.setState({isOpen:false})
// 确认抢单之后
this.GrabDemand({})
}
componentWillUnmount() { }
componentDidShow() { }
componentDidHide() { }
render() {
// 提示弹窗element
const modalMessage = <AtModal className='modal'
isOpened={this.state.isOpen}
title='提示'
cancelText='取消'
confirmText='确认'
onClose={this.handleGrabModalClose}
onCancel={this.handleGrabModalCancel}
onConfirm={this.handleGrabConfirm.bind(this)}
content='确认抢单？\n'
/>
const demandingElemensArray = this.state.demanding.length?this.state.demanding.map((item, index) => {
return < SwiperItem key={index} >
<View className='demanding-item'>
@ -112,7 +162,7 @@ class Home extends Component {
<View className='item-name'>
业主：{item.user_name}
</View>
<View className='item-button-box'>
<View className='item-button-box' onClick={this.grabOrder.bind(this)}>
<Button className='item-button' >{item.state_name}</Button>
</View>
</View>
@ -126,7 +176,7 @@ class Home extends Component {
}):null
// 这里应该代码可以优化-----
const categoriesElementsArray1 = this.state.categories[0].length?this.state.categories[0].map((item, index) => {
const categoriesElementsArray1 = this.state.categories.length?this.state.categories[0].map((item, index) => {
return <View className='category-item' key={index} onClick={this.onClickParentCate.bind(this, item)}>
<Image className='cate-img' src={URL.Base + item.icon} />
<View>{item.class_name}</View>
@ -151,6 +201,7 @@ class Home extends Component {
return (
<View className='home'>
{modalMessage}
{/* 第一行图片滚动条 */}
<View className='first-banner'>

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

@ -10,6 +10,16 @@
}
.modalBox{
.at-modal-footer--simple{
.at-modal-action{
button:last-child:nth-child(2){
color:#FF7142
}
}
}
}
.container{
//margin-top: 30px;

4
src/pages/index/index.js
View File

@ -29,8 +29,8 @@ class Index extends Component {
componentDidMount(){
Taro.navigateTo({
// url: '/pages/home/home'
// url: '/pages/goodsPublish/goodsPublish'
url: '/pages/home/home'
// url: '/pages/goodsPublish/goodsPublish'
url: '/pages/home/home'
})
}
componentWillReceiveProps (nextProps) {

27
src/pages/mySupplyDemand/mySupplyDemand.js
View File

@ -1,6 +1,7 @@
import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtInput, AtButton, Picker,AtIcon } from 'taro-ui'
import URL from '../../serviceAPI.config'
import copyrightComponent from '../../component/copyrightComponent/copyrightComponent'
import searchBarComponent from '../../component/searchBarComponent/searchBarComponent'
@ -28,6 +29,26 @@ class MySupplyDemand extends Component {
}
}
//MySupplyDemand
getMySupplyDemand({ curr_page=1, page_count=20}) {
Taro.request({
url: URL.MySupplyDemand,
method: 'POST',
dataType: 'json',
data: {
curr_page: curr_page,
page_count: page_count
},
header: {
'content-type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest'
}
}).then(res => {
console.log('个人供求=》暂时无数据， 后台需要权限验证')
})
}
//修改供求类型
demSupplyCateChange = e => {
this.setState({
@ -55,13 +76,13 @@ class MySupplyDemand extends Component {
endDateSel: e.detail.value
})
}
componentWillReceiveProps(nextProps) {
console.log(this.props, nextProps)
}
componentDidMount () {
this.getMySupplyDemand({})
}
componentWillUnmount() { }
componentDidShow() { }

556
src/pages/shop/shop.js
View File

@ -1,12 +1,14 @@
import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text, Image } from '@tarojs/components'
import { AtSearchBar, AtTag, AtIcon } from 'taro-ui'
import { AtSearchBar, AtTag, AtIcon, AtPagination } from 'taro-ui'
import URL from '../../serviceAPI.config'
import './shop.scss'
import ShopItem from '../../component/shopItemComponent/shopItemComponent'
import bottomNav from '../../component/bottomNav/bottomNav'
import copyrightComponent from '../../component/copyrightComponent/copyrightComponent'
import ShopDescription from '../shopDescription/shopDescription';
class Shop extends Component {
// 项目配置
@ -16,21 +18,31 @@ class Shop extends Component {
constructor() {
super(...arguments)
this.state = {
isShopDetailsOn:false, // 是否显示店铺说明页面
shopItem:'', // 所有商品
isShopDetailsOn: false, // 是否显示店铺说明页面
shopItem: [], // 所有商品
value: '', // 搜索框的值
shopId:'', // 店铺的id
shopName:'', // 店铺名
FilterText:'', // 筛选的可选项
filterBar:['综合排序','销量','新品','价格','人气'],
selectedFilterValue:0, //筛选项
isShowFilter:false, //是否显示侧边筛选
综合排序:true,
销量:false,
新品:false,
价格:false,
人气:false,
cate:{
shopId: '', // 店铺的id
shopName: '', // 店铺名
FilterText: '', // 筛选的可选项
filterBar: ['all', 'amount', 'newProduct', 'price', 'popularity'],
filterBarKeys: { all: '综合排序', amount: '销量', newProduct: '新品', price: '价格', popularity: '人气' },
selectedFilterValue: 0, //筛选项
isShowFilter: false, //是否显示侧边筛选
showShopHomePage: false,// 是否显示首页页面
shopDescriptionData: '',// 店铺详情信息
shopName: '',//店铺名称
shopAddress: '',//店铺地址
contactName: '',//联系人
contactNumber: '',//联系电话
shopDescription: '',//店铺简介
filterOptions: {
all: true,
amount: false,
newProduct: false,
price: false,
popularity: false,
},
cate: {
10101: false,// "橱柜"
10102: false,// "衣柜"
10106: false,// "装饰柜"
@ -38,49 +50,54 @@ class Shop extends Component {
20103: false,// "产品设计"
30101: false,// "橱柜"
30102: false,// "衣柜"
}
},
filterCondition: '',// 筛选条件
total: 0,// 信息条数
currentPage: 1,// 当前页
}
}
// 搜索栏值的改变方法
onChange(value) {
this.setState({
value: value
},()=>{
}, () => {
console.log(this.state.value)
})
}
// 搜索栏的方法
getSearchBarkeyWords(){
Taro.request({
url: URL.SearchBarKeyWords,
method: 'POST',
dataType: 'json',
data:{
searchContent: '背板',
searchType: 1
},
header: {
'content-type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest'
}
}).then(res => {
console.log('搜索栏的搜索结果',res)
})
//api 搜索栏的方法请求
getSearchBarkeyWords() {
Taro.request({
url: URL.SearchBarKeyWords,
method: 'POST',
dataType: 'json',
data: {
searchContent: '背板',
searchType: 1
},
header: {
'content-type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest'
}
}).then(res => {
console.log('搜索栏的搜索结果', res)
})
}
}
// 得到筛选的标签
getSearchParams({shop_name = false, shop_id = 1305, shop_class_id = "", goods_class_id=0,class_filter=0}){
// api 得到筛选的标签请求
getSearchParams({ shop_name = false, shop_id = 1305, shop_class_id = "", goods_class_id = 0, class_filter = 0 }) {
Taro.request({
url: URL.GetSearchParam,
method: 'POST',
dataType: 'json',
data: {
goods: JSON.stringify({
shop_name: shop_name,
shop_id: shop_id,
shop_name: shop_name,
shop_id: shop_id,
shop_class_id: shop_class_id,
goods_class_id: goods_class_id,
class_filter: class_filter,
@ -100,15 +117,15 @@ class Shop extends Component {
this.setState({ FilterText: res.data })
})
}
// 得到所有的产品
goodsSearch({ curr_page = 1, page_count = 50, shop_name = false, shop_id = 1305, config_id = 4, shop_class_id = '', order = '', currPage = 1 }) {
// api 得到所有的产品请求
goodsSearch({ curr_page = 1, page_count = 10, shop_name = false, shop_id = 1305, config_id = 4, shop_class_id = '', order = '', currPage = 1 }) {
Taro.request({
url: URL.GoodsSearch,
method:'POST',
method: 'POST',
dataType: 'json',
data:{
goods: JSON.stringify({
data: {
goods: JSON.stringify({
curr_page: curr_page,
page_count: page_count,
shop_name: shop_name,
@ -117,233 +134,380 @@ class Shop extends Component {
shop_class_id: shop_class_id,
order: order,
currPage: currPage
}),
}),
goodsRegion: JSON.stringify({}),
goodsSpec: JSON.stringify([]),
goodsParam: JSON.stringify([]),
goodsParamExt: JSON.stringify([]),
},
header: {
'content-type': 'application/x-www-form-urlencoded',
'X-Requested-With':'XMLHttpRequest'
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(res => {
// console.log(res)
this.setState({ shopItem:res.data})
this.setState({ shopItem: res.data.goods, total: res.data.goodsCount, filterCondition: order })
})
}
// 产品排序
accendingDescending(value){
this.setState({selectedFilterValue:value})
if(value==0){
this.setState({ 综合排序: !this.state.综合排序 })
this.goodsSearch({})
}
if(value==1){
this.setState({ 销量: !this.state.销量 },()=>{
this.state.销量 ? this.goodsSearch({ order: "g.sales_volume desc" }) : this.goodsSearch({ order: "g.sales_volume" })
})
// api 得到店铺详情请求
getShopDescription({ shopID = 808 }) {
Taro.request({
url: URL.Base + 'shop-wxShopInfo',
method: 'POST',
dataType: 'json',
data: {
shopID: shopID,
},
header: {
'content-type': 'application/x-www-form-urlencoded',
}
})
.then(res => {
this.setState({
shopDescriptionData: res.data,
shopName: res.data.data.shop_name,
shopAddress: res.data.data.shop_address,
contactName: res.data.userRes.name,
contactNumber: res.data.userRes.phone,
shopDescription: res.data.data.shop_desc
}, () => {
console.log(this.state.shopDescriptionData)
})
}
)
}
if(value==2){
this.setState({ 新品: !this.state.新品 },()=>{
this.state.新品 ? this.goodsSearch({ order: "g.create_date desc" }) : this.goodsSearch({ order: "g.create_date" })
})
}
if(value==3){
this.setState({ 价格: !this.state.价格 },()=>{
this.state.价格 ? this.goodsSearch({ order: "g.goods_price desc" }) : this.goodsSearch({ order: "g.goods_price" })
// 产品排序
accendingDescending(value) {
this.setState({ selectedFilterValue: value })
if (value == 0) {
this.setState({
currentPage: 1,
filterOptions: {
all: true,
amount: false,
newProduct: false,
price: false,
popularity: false
}
}
)
this.goodsSearch({})
}
if (value == 1) {
this.setState({
currentPage: 1,
filterOptions: {
all: false,
amount: !this.state.filterOptions.amount,
newProduct: false,
price: false,
popularity: false
}
}, () => {
this.state.filterOptions.amount ? this.goodsSearch({ order: "g.sales_volume desc" }) : this.goodsSearch({ order: "g.sales_volume" })
}
)
}
if (value == 2) {
this.setState({
currentPage: 1,
filterOptions: {
all: false,
amount: false,
newProduct: !this.state.filterOptions.newProduct,
price: false,
popularity: false
}
}, () => {
this.state.filterOptions.newProduct ? this.goodsSearch({ order: "g.create_date desc" }) : this.goodsSearch({ order: "g.create_date" })
}
)
})
}
if (value == 3) {
}
if(value==4){
this.setState({ 人气: !this.state.人气 },()=>{
this.state.人气 ? this.goodsSearch({ order: "g.browse_times desc" }) : this.goodsSearch({ order: "g.browse_times" })
this.setState({
currentPage: 1,
filterOptions: {
all: false,
amount: false,
newProduct: false,
price: !this.state.filterOptions.price,
popularity: false
}
}, () => {
this.state.filterOptions.price ? this.goodsSearch({ order: "g.goods_price desc" }) : this.goodsSearch({ order: "g.goods_price" })
}
)
})
}
}
if (value == 4) {
this.setState({
currentPage: 1,
filterOptions: {
all: false,
amount: false,
newProduct: false,
price: false,
popularity: !this.state.filterOptions.popularity
}
}, () => {
this.state.filterOptions.popularity ? this.goodsSearch({ order: "g.browse_times desc", }) : this.goodsSearch({ order: "g.browse_times" })
}
)
}
}
// 是否显示侧边筛选
showAndHideFilter(){
showAndHideFilter() {
this.setState({ isShowFilter: !this.state.isShowFilter })
}
// 选择侧边筛选的标签
selectTag(value){
for(let item in this.state.cate){
if(value===item){
this.setState(prevState => ({
cate: {
...prevState.cate,
[item]:!this.state.cate[item]
}
}),()=>{
this.getSearchParams({ goods_class_id: value , class_filter :1})
})
}
}
selectTag(value) {
for (let item in this.state.cate) {
if (value === item) {
this.setState(prevState => ({
cate: {
...prevState.cate,
[item]: !this.state.cate[item]
}
}), () => {
this.getSearchParams({ goods_class_id: value, class_filter: 1 })
})
}
}
}
handleOnPageChange(value) {
this.setState({ currentPage: value.current })
// console.log('currentPage', currentPage ,'condition',this.state.filterCondition)
this.goodsSearch({ curr_page: value.current, order: this.state.filterCondition })
}
showHomePage() {
this.setState({ showShopHomePage: true })
}
showDescriptionPage() {
this.setState({ showShopHomePage: false })
}
componentWillMount() {
this.setState({ shopId: this.$router.params.id, shopName: this.$router.params.name}) // 输出 { id: 2, type: 'test' }
}
componentDidMount(){
componentDidMount() {
this.setState({ shopId: this.$router.params.id, shopName: this.$router.params.name }) // 输出 { id: 2, type: 'test' }
//页面加载之后 得到指定店铺的商品 和 筛选标签
this.goodsSearch({})
this.getSearchParams({})
this.getShopDescription({})
// this.getSearchBarkeyWords()
}
componentDidShow() { }
componentDidHide() { }
render() {
// const shopName= this.state.shopName
const ShopItemElementsArray =this.state.shopItem? this.state.shopItem.goods.map((item,index)=>{
const ShopItemElementsArray = this.state.shopItem.length ? this.state.shopItem.map((item, index) => {
return <View key={index} className='shop-item' >
<ShopItem item={item}></ShopItem>
</View>
}):null
const filterElementsArray=this.state.filterBar.map((item,index)=>{
let isTure=this.state[item]
return <View key={index} onClick={this.accendingDescending.bind(this, index)} className={index===this.state.selectedFilterValue ? 'filter-title actived' : 'filter-title'}>
</View>
}) : null
const filterElementsArray = this.state.filterBar.map((item, index) => {
let isTure = this.state.filterOptions[item]
return <View key={index} onClick={this.accendingDescending.bind(this, index)} className={index === this.state.selectedFilterValue ? 'filter-title actived' : 'filter-title'}>
<Text className='text'>
{item}
{this.state.filterBarKeys[item]}
</Text>
{index!==0&&index!==5&&(isTure? <AtIcon value='chevron-down' size='10' color='#F00'></AtIcon> : <AtIcon value='chevron-up' size='10' color='#F00'></AtIcon>)}
{index !== 0 && index !== 5 && (isTure ? <AtIcon value='chevron-down' size='10' color='#F00'></AtIcon> : <AtIcon value='chevron-up' size='10' color='#F00'></AtIcon>)}
</View>
})
// const widthness = this.state.FilterText ? this.state.FilterText.goodsParamExt[5].param_value[0] : null // filter 宽度选项
// const widthness = this.state.FilterText ? this.state.FilterText.goodsParamExt[5].param_value[0] : null // filter 宽度选项
// 侧边筛选的分类项
const goodsClassElementsArray = this.state.FilterText.goods_class ? this.state.FilterText.goods_class.map((item, index) => {
let isTrue = this.state.cate[item.class_id]
return <AtTag style='margin-left:5px' key={index}
name={JSON.stringify(item)}
type='primary'
active={isTrue}
onClick={this.selectTag.bind(this, item.class_id)}
name={JSON.stringify(item)}
type='primary'
active={isTrue}
onClick={this.selectTag.bind(this, item.class_id)}
>{item.class_name}</AtTag>
}):null
}) : null
// 侧边筛选的商品类型项
const goodsTypeKeyArray = this.state.FilterText.goods_type ? Object.keys(this.state.FilterText.goods_type):null
const goodsTypeKeyArray = this.state.FilterText.goods_type ? Object.keys(this.state.FilterText.goods_type) : null
const goodsTypeElementsArray = goodsTypeKeyArray ? goodsTypeKeyArray.map((key, index) => {
let object = this.state.FilterText.goods_type
return <AtTag style='margin-left:5px' key={index}
name={JSON.stringify(object[key])}
type='primary'
active={this.state.isActive}
onClick={this.selectTag.bind(this)}
name={JSON.stringify(object[key])}
type='primary'
active={this.state.isActive}
onClick={this.selectTag.bind(this)}
>{object[key].goods_type_ch_name}</AtTag>
}):null
}) : null
// 侧边筛选的其他项
const goodsParamKeyArray = this.state.FilterText.goodsParam ? Object.keys(this.state.FilterText.goodsParam):null
const goodsParamKeyArray = this.state.FilterText.goodsParam ? Object.keys(this.state.FilterText.goodsParam) : null
const goodsParamElementsArray = goodsParamKeyArray ? goodsParamKeyArray.map((key, index) => {
let object = this.state.FilterText.goodsParam
return <View key={index}><View className='title' >{object[key].param_name}</View>
return <View key={index}><View className='title' >{object[key].param_name}</View>
<View className='button-box'>
<AtTag style='margin-left:5px'
name={JSON.stringify(object[key])}
type='primary'
active={this.state.isActive}
onClick={this.selectTag.bind(this)}
name={JSON.stringify(object[key])}
type='primary'
active={this.state.isActive}
onClick={this.selectTag.bind(this)}
>{object[key].param_value[0]}</AtTag>
</View>
</View>
}):null
}) : null
return (
<View className='shop'>
<View className='searchBar-box'>
<AtSearchBar className='search-button'
actionName='搜索'
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'} mode='aspectFill' 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>
<AtIcon value='menu' size='10' color='white'></AtIcon>
</View>
<View className='homepage-link'>
<Text className='text'>
首页
</Text>
</View>
<View className='shoppage-link'>
<Text className='text'>
店铺说明
</Text>
</View>
</View>
</View>
// 店铺页面/店铺主页
const shopHomepageElement = <View className='shop-home-page'>
<View className='filter-box'>
{filterElementsArray}
<View onClick={this.showAndHideFilter.bind(this)} className='filter-title' >
<Text className='text'>
筛选
{filterElementsArray}
<View onClick={this.showAndHideFilter.bind(this)} className='filter-title' >
<Text className='text'>
筛选
</Text>
</View>
</View>
</View>
<View className={this.state.isShowFilter ? 'side-filter show' :'side-filter'}>
<View className='left' onClick={this.showAndHideFilter.bind(this)}></View>
{/* 侧边筛选 */}
<View className={this.state.isShowFilter ? 'side-filter show' : 'side-filter'}>
<View className='left' onClick={this.showAndHideFilter.bind(this)}></View>
{/* 侧边筛选 */}
<View className='right'>
<View className='filter-box'>
<View className='title'>分类</View>
<View className='button-box'>{goodsClassElementsArray}</View>
<View className='title'>商品类型</View>
<View className='button-box'>{goodsTypeElementsArray}</View>
{goodsParamElementsArray}
<View className='title'>宽度</View>
<View className='button-box'>
{/* <AtTag style='margin-left:5px'
<View className='filter-box'>
<View className='title'>分类</View>
<View className='button-box'>{goodsClassElementsArray}</View>
<View className='title'>商品类型</View>
<View className='button-box'>{goodsTypeElementsArray}</View>
{goodsParamElementsArray}
<View className='title'>宽度</View>
<View className='button-box'>
{/* <AtTag style='margin-left:5px'
name={JSON.stringify(widthness)}
type='primary'
active={this.state.isActive}
onClick={this.selectTag.bind(this)}
>{widthness.value_desc}</AtTag> */}
</View>
<View className='confirm-button'>
<Button className='button' type='primary' size='mini' style='background-color:#FF9900' >确认</Button>
<Button className='button' type='primary' size='mini' style='background-color:#FF9900'>重置</Button>
<View className='gap'></View>
</View>
</View>
<View className='confirm-button'>
<Button className='button' type='primary' size='mini' style='background-color:#FF9900' >确认</Button>
<Button className='button' type='primary' size='mini' style='background-color:#FF9900'>重置</Button>
<View className='gap'></View>
</View>
</View>
</View>
</View>
{/* 店铺的商品列表 */}
{/* 店铺的商品列表 */}
<View className='container'>
{ShopItemElementsArray}
{ShopItemElementsArray}
</View>
<View className='pagination'>
<AtPagination
total={Number(this.state.total)}
pageSize={10}
current={this.state.currentPage}
onPageChange={this.handleOnPageChange.bind(this)}
>
</AtPagination>
</View>
</View>
// 店铺详情
const shopDescriptionElement = <View className='shop-description'>
<View className='img-box'>
<Image mode='aspectFill' src={URL.Base + 'Public/images/shop/bg_banner.png'} style='height:150px' />
<View className='content'>
<View className='shop-name'>
{this.state.shopName}
</View>
<View className='shop-address'>
{this.state.shopAddress}
</View>
<View className='contact'>
<Text className='contact-name'>联系人:{this.state.contactName}</Text>
<Text className='contact-number'>联系电话：{this.state.contactNumber}</Text>
</View>
</View>
</View>
<View className='shop-description2'>
<View className='title'>
店铺简介
</View>
<View className='description'>
<Text className='title-sub'>店铺介绍：</Text>
<Text className='detail'>{this.state.shopDescription}</Text>
</View>
</View>
<View className='description-img'>
<View className='img-box'> <Image mode='aspectFit' src={URL.Base + 'Public/images/shop/bg_banner.png'} style='max-width: 100%; max-height:100%;' /></View>
<View className='img-box'> <Image mode='aspectFit' src={URL.Base + 'Public/images/shop/bg_banner.png'} style='max-width: 100%;max-height:100%;' /></View>
<View className='img-box'> <Image mode='aspectFit' src={URL.Base + 'Public/images/shop/bg_banner.png'} style='max-width: 100%;max-height:100%;' /></View>
</View>
</View>
return (
<View className='shop' >
<View className='searchBar-box'>
<AtSearchBar className='search-button'
actionName='搜索'
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'} mode='aspectFill' 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>
<AtIcon value='menu' size='10' color='white'></AtIcon>
</View>
<View className='homepage-link' onClick={this.showHomePage.bind()}>
<Text className='text'>
首页
</Text>
</View>
<View className='shoppage-link' onClick={this.showDescriptionPage.bind()}>
<Text className='text'>
店铺说明
</Text>
</View>
</View>
</View>
{/* 显示店铺首页或者店铺详情 */}
{this.state.showShopHomePage ? shopHomepageElement : shopDescriptionElement}
<copyrightComponent></copyrightComponent>
<View className='bottom-nav-box'>
<bottomNav otherData={{menu:[{ name: '首页' }, { name: '分类' }, { name: '购物车' }, { name: '教程软件' }, { name:'更多'}]}} />
<bottomNav otherData={{ menu: [{ name: '首页' }, { name: '分类' }, { name: '购物车' }, { name: '教程软件' }, { name: '更多' }] }} />
</View>
</View>
</View>
)
}
}

82
src/pages/shop/shop.scss
View File

@ -12,7 +12,8 @@
position: absolute;
top:100px;
left:60px;
font-size: 50px
font-size: 50px;
}
}
.nav-box{
@ -21,6 +22,7 @@
.nav{
display: flex;
line-height: 55px;
text-align: center;
.text{
color:white;
font-size: 28px;
@ -34,6 +36,7 @@
.homepage-link{
flex:1;
margin-left: 10%;
text-align: left;
}
.shoppage-link{
flex:1;
@ -64,14 +67,14 @@
z-index: 10;
position: fixed;
top:0;
right:0;
width:0%;
left:100%;
// width:0%;
height:100%;
transition:width 1s;
transition: left 0.5s ease;
display: flex;
.left{
width:30%;
background-color: rgba(0,0,0,.3)
}
.right{
width: 70%;
@ -103,7 +106,7 @@
}
.show{
width: 100%
left:0px
}
@ -119,6 +122,10 @@
}
}
.pagination{
margin-top: 50px;
margin-bottom: 50px;
}
.copyright-box{
padding:0 20px;
@ -134,3 +141,66 @@
height:150px;
}
//--------- 店铺说明样式
.shop-description{
.img-box{
position: relative;
.content{
position: absolute;
font-size: 30px;
color: white;
width: 100%;
top:20%;
text-align: center;
.shop-name{
font-size: 60px;
// font-weight: bold;
}
.shop-address, .contact{
margin-top: 20px;
.contact-number{
display: inline-block;
margin-left: 20px;
}
}
}
}
.shop-description2{
border: 1px solid #e5e5e5;
font-size: 30px;
padding: 20px 30px;
color: #888;
line-height: 32px;
box-shadow: 0 1px 4px 0 #d7d7d7;
margin-bottom: 10px;
height: 200px;
.title{
font-weight: bold;
font-size: 40px;
color:black;
margin-top: 5%;
margin-left: 8%;
}
.description{
margin-top: 5%;
margin-left: 15%;
.title-sub{
font-weight: bold
}
}
}
.description-img{
margin:20px;
.img-box{
border: 1px solid #ccc;
text-align: center;
font-size: 0;
margin-bottom: 5px;
}
}
}

6
src/serviceAPI.config.js
View File

@ -9,6 +9,12 @@ const URL = {
SearchResult: LOCALURL + 'GoodsSearch-search',// 得到搜索结果
SearchBarKeyWords: LOCALURL + 'Search-getKeywords',// 搜索栏接口
GetAllDemanding: LOCALURL + 'supply-allDemandList',// 获取所有业主需求
MySupplyDemand: LOCALURL + 'Supply-myList',// 获取所有业主需求
ShopDescription: LOCALURL + 'shop-wxShopInfo',// 获取店铺详情
GrabDemand: LOCALURL + 'Supply-grabDemand',// 抢单接口
GetVoucherInfo: LOCALURL + 'Shop-couponsTips',// 优惠卷信息
GetConsultInfo: LOCALURL + 'Shop-consultTips',// 咨询信息
BuyConsult: LOCALURL + 'Shop-consult',// 购买咨询
}