添加优惠卷 询价 api

.vscode/settings.json

@@ -0,0 +1 @@
+{}

src/app.js

@@ -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 () {}

src/component/bottomNav/bottomNav.js

@@ -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: '' },
         ]

src/component/filteredShopComponent/filteredShopComponent.js

@@ -1,28 +1,170 @@
 import Taro, { Component } from '@tarojs/taro'
-import { View, Button, Text,Image } from '@tarojs/components'
+import { View, Button, Text, Image } from '@tarojs/components'
-import { AtIcon } from 'taro-ui'
+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() {
-        
+        // console.log('店铺',this.props.shop)
-        const title = this.props.shop?this.props.shop.shop_name:null
+
+        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 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 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 slicedGoods = goods !== null ? goods.slice(1) : null
-        const goodsElementsArray = goods !== null ? slicedGoods.map((item,index)=>{
+        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 onClick={this.isOpenVoucher.bind(this)} 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.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'>
+                    {goods.length !== 1 ? <View className='images'>{goodsElementsArray}</View> : <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> {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>
         )

src/component/filteredShopComponent/filteredShopComponent.scss

@@ -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{
+        .images{
-            font-size: 30px;
+            flex:3;
-            margin-left: 30px;
+             display: flex;
-            .details-block{
+        flex-wrap: nowrap;
-                margin-top: 30px;
+            .goods-img-box{
-                .details-text{
+            width:25%;
-                font-weight: bold;
-            }
-            }
-            }
-        .goods-img-box{
-            flex:1;
             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;

src/component/searchBarComponent/searchBarComponent.js

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

src/component/searchBarComponent/searchBarComponent.scss

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

src/component/shopItemComponent/shopItemComponent.js

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

src/pages/allDemanding/allDemanding.js

@@ -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:[], // 需求列表
+            supplys: [], // 需求列表
-            isMore:'more', // 上拉加载状态
+            isMore: 'more', // 上拉加载状态
-            demandingState: [ '需求', '供应', '人才'], // 供求状态选择
+            demandingState: ['全部', '在用', '已抢单', '已抢光'], // 供求状态选择
-            demandingStateSelected:'全部', // 当前供求状态
+            demandingStateSelected: '全部', // 当前供求状态
-            industryCate: ['制定家具', '成品家具', '办公家具','设计'], // 行业分类状态选择
+            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){
+                if (res.data.supplys.length) {
-                const newSupplys=this.state.supplys.concat(res.data.supplys)
+                    const newSupplys = this.state.supplys.concat(res.data.supplys)
-                    this.setState({ supplys: newSupplys, isMore: 'more'})
+                    this.setState({ supplys: newSupplys, isMore: 'more' })
-            }else{
+                } else {
-                    this.setState({ isMore:'noMore'})
+                    this.setState({ isMore: 'noMore' })
-            }
+                }
             })
     }
 
     // 向上拉升延迟一秒加载数据
-    handleLoadMore(){
+    handleLoadMore() {
-        this.setState({isMore:'loading'})
+        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>
-                        <View className='image-container'>
+                <View className='body'>
+                    <View className='image-container'>
                         <Image style='width:90px;height:60px' src={URL.Base + item.file_path[0].thumb_path} />
-                        </View>
+                    </View>
-                        <View className='detail'>
+                    <View className='detail'>
                         <View className='title'>{item.sd_title}</View>
                         <View className='para'>{item.sd_desc}</View>
-                            <View className='button'>
+                        <View className='button'>
-                                <AtButton type='primary' size='small'>
+                            <AtButton type='primary' size='small'>
-                                    抢单</AtButton>
+                                抢单</AtButton>
-                            </View>
                         </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>

src/pages/goods/goods.js

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

src/pages/goods/goods.scss

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

src/pages/home/home.js

@@ -1,6 +1,6 @@
 import Taro, { Component } from '@tarojs/taro'
-import { View, Button, Text, Swiper, SwiperItem, Image } from '@tarojs/components'
+import { View, Button, Text, Swiper, SwiperItem, Image, } from '@tarojs/components'
-import { AtActivityIndicator } from 'taro-ui'
+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() { }
+//api  得到首页的信息
-
-  componentDidHide() { }
-
-// 得到首页的信息
   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'>

src/pages/home/home.scss

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

src/pages/index/index.js

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

src/pages/mySupplyDemand/mySupplyDemand.js

@@ -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() { }

src/pages/shop/shop.js

@@ -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, // 是否显示店铺说明页面
+            isShopDetailsOn: false, // 是否显示店铺说明页面
-            shopItem:'',         // 所有商品
+            shopItem: [],         // 所有商品
             value: '',           // 搜索框的值   
-            shopId:'',          // 店铺的id
+            shopId: '',          // 店铺的id
-            shopName:'',          // 店铺名
+            shopName: '',          // 店铺名
-            FilterText:'',        // 筛选的可选项  
+            FilterText: '',        // 筛选的可选项  
-            filterBar:['综合排序','销量','新品','价格','人气'],
+            filterBar: ['all', 'amount', 'newProduct', 'price', 'popularity'],
-            selectedFilterValue:0,   //筛选项
+            filterBarKeys: { all: '综合排序', amount: '销量', newProduct: '新品', price: '价格', popularity: '人气' },
-            isShowFilter:false,        //是否显示侧边筛选
+            selectedFilterValue: 0,   //筛选项
-            综合排序:true,      
+            isShowFilter: false,        //是否显示侧边筛选
-            销量:false,
+            showShopHomePage: false,// 是否显示首页页面 
-            新品:false,
+            shopDescriptionData: '',// 店铺详情信息
-            价格:false,
+            shopName: '',//店铺名称
-            人气:false,
+            shopAddress: '',//店铺地址
-            cate:{
+            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)
         })
     }
-    // 搜索栏的方法
+    //api 搜索栏的方法请求
-   getSearchBarkeyWords(){
+    getSearchBarkeyWords() {
-    Taro.request({
+        Taro.request({
-        url: URL.SearchBarKeyWords,
+            url: URL.SearchBarKeyWords,
-        method: 'POST',
+            method: 'POST',
-        dataType: 'json',
+            dataType: 'json',
-        data:{
+            data: {
-            searchContent: '背板',
+                searchContent: '背板',
-            searchType: 1
+                searchType: 1
-        },
+            },
-        header: {
+            header: {
-            'content-type': 'application/x-www-form-urlencoded',
+                'content-type': 'application/x-www-form-urlencoded',
-            'X-Requested-With': 'XMLHttpRequest'
+                'X-Requested-With': 'XMLHttpRequest'
-        }
+            }
-    }).then(res => {
+        }).then(res => {
-        console.log('搜索栏的搜索结果',res)
+            console.log('搜索栏的搜索结果', res)
-    })
+        })
 
-   }
+    }
 
-   // 得到筛选的标签
+    // api 得到筛选的标签请求
-    getSearchParams({shop_name = false, shop_id = 1305, shop_class_id = "", goods_class_id=0,class_filter=0}){
+    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_name: shop_name,
-                    shop_id: shop_id, 
+                    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 })
             })
     }
-    
+
-   // 得到所有的产品
+    // api 得到所有的产品请求
-    goodsSearch({ curr_page = 1, page_count = 50, shop_name = false, shop_id = 1305, config_id = 4, shop_class_id = '', order = '', currPage = 1 }) {
+    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:{
+            data: {
-                goods: JSON.stringify({ 
+                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.goods, total: res.data.goodsCount, filterCondition: order })
-                this.setState({ shopItem:res.data})
+
             })
     }
-    // 产品排序
+   
-    accendingDescending(value){
+    // api 得到店铺详情请求
-        this.setState({selectedFilterValue:value})
+    getShopDescription({ shopID = 808 }) {
-       if(value==0){
+        Taro.request({
-           this.setState({ 综合排序: !this.state.综合排序 })
+            url: URL.Base + 'shop-wxShopInfo',
-           this.goodsSearch({})
+            method: 'POST',
-       }
+            dataType: 'json',
-       if(value==1){
+            data: {
-           this.setState({ 销量: !this.state.销量 },()=>{
+                shopID: shopID,
-               this.state.销量 ? this.goodsSearch({ order: "g.sales_volume desc" }) : this.goodsSearch({ order: "g.sales_volume" }) 
+            },
-           })
+            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" }) 
+     accendingDescending(value) {
-           })
+        this.setState({ selectedFilterValue: value })
-       }
+        if (value == 0) {
-       if(value==3){
+            this.setState({
-           this.setState({ 价格: !this.state.价格 },()=>{
+                currentPage: 1,
-               this.state.价格 ? this.goodsSearch({ order: "g.goods_price desc" }) : this.goodsSearch({ order: "g.goods_price" })
+                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) {
 
-       }
+            this.setState({
-       if(value==4){
+                currentPage: 1,
-           this.setState({ 人气: !this.state.人气 },()=>{
+                filterOptions: {
-               this.state.人气 ? this.goodsSearch({ order: "g.browse_times desc" }) : this.goodsSearch({ order: "g.browse_times" })
+                    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){
+    selectTag(value) {
-      for(let item in this.state.cate){
+        for (let item in this.state.cate) {
-          if(value===item){
+            if (value === item) {
-              this.setState(prevState => ({
+                this.setState(prevState => ({
-                  cate: {
+                    cate: {
-                      ...prevState.cate,
+                        ...prevState.cate,
-                      [item]:!this.state.cate[item]
+                        [item]: !this.state.cate[item]
-                  }
+                    }
-              }),()=>{
+                }), () => {
-                    this.getSearchParams({ goods_class_id: value , class_filter :1})
+                    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> 
+            </View>
-        }):null
+        }) : null
-         
+
-        const filterElementsArray=this.state.filterBar.map((item,index)=>{
+        const filterElementsArray = this.state.filterBar.map((item, index) => {
-           let isTure=this.state[item]
+            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'}>
+
+            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)}
+                name={JSON.stringify(item)}
-              type='primary'
+                type='primary'
-              active={isTrue}
+                active={isTrue}
-              onClick={this.selectTag.bind(this, item.class_id)}
+                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])}
+                name={JSON.stringify(object[key])}
-              type='primary'
+                type='primary'
-              active={this.state.isActive}
+                active={this.state.isActive}
-              onClick={this.selectTag.bind(this)}
+                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])}
+                        name={JSON.stringify(object[key])}
-                      type='primary'
+                        type='primary'
-                      active={this.state.isActive}
+                        active={this.state.isActive}
-                      onClick={this.selectTag.bind(this)}
+                        onClick={this.selectTag.bind(this)}
                     >{object[key].param_value[0]}</AtTag>
                 </View>
             </View>
-        }):null
+        }) : null
 
-        return (
+        // 店铺页面/店铺主页
-           <View className='shop'>
+        const shopHomepageElement = <View className='shop-home-page'>
-             <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>
             <View className='filter-box'>
-                    {filterElementsArray}
+                {filterElementsArray}
-                    <View onClick={this.showAndHideFilter.bind(this)} className='filter-title' >
+                <View onClick={this.showAndHideFilter.bind(this)} className='filter-title' >
-                        <Text className='text'>
+                    <Text className='text'>
-                            筛选
+                        筛选
                         </Text>
-                
+
-                    </View> 
+                </View>
             </View>
-            <View className={this.state.isShowFilter ? 'side-filter show' :'side-filter'}>
+            <View className={this.state.isShowFilter ? 'side-filter show' : 'side-filter'}>
-                    <View className='left' onClick={this.showAndHideFilter.bind(this)}></View>
+                <View className='left' onClick={this.showAndHideFilter.bind(this)}></View>
-        {/* 侧边筛选 */}
+                {/* 侧边筛选 */}
                 <View className='right'>
-                        <View className='filter-box'>
+                    <View className='filter-box'>
-                            <View className='title'>分类</View>
+                        <View className='title'>分类</View>
-                            <View className='button-box'>{goodsClassElementsArray}</View>
+                        <View className='button-box'>{goodsClassElementsArray}</View>
-                            <View className='title'>商品类型</View>
+                        <View className='title'>商品类型</View>
-                            <View className='button-box'>{goodsTypeElementsArray}</View>
+                        <View className='button-box'>{goodsTypeElementsArray}</View>
-                            {goodsParamElementsArray}
+                        {goodsParamElementsArray}
-                            <View className='title'>宽度</View>
+                        <View className='title'>宽度</View>
-                            <View className='button-box'>
+                        <View className='button-box'>
-                                {/* <AtTag style='margin-left:5px'
+                            {/* <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>
         )
     }
 }

src/pages/shop/shop.scss

@@ -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;
+    left:100%;
-    width:0%;
+   // 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;
+            
+        }
+    }
+}

src/serviceAPI.config.js

@@ -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',// 购买咨询
    
 }