From f0adffacc59a23ebb73b027cc9d444e9cfcf4a73 Mon Sep 17 00:00:00 2001 From: Maoqiang Zheng Date: Mon, 14 Jan 2019 17:04:08 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A1=B6=E9=83=A8=E6=8C=89=E9=94=AE=20?= =?UTF-8?q?=E4=B8=8B=E6=8B=89=E5=8A=A0=E8=BD=BD=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app.js | 3 +- src/app.scss | 16 + src/component/bottomNav/bottomNav.js | 1 - .../copyrightComponent/copyrightComponent.js | 4 - .../copyrightComponent.scss | 5 +- .../filteredShopComponent.js | 11 +- .../filteredShopComponent.scss | 14 +- .../voucherPosterComponent.js | 40 +- .../voucherPosterComponent.scss | 10 +- .../scrollToTopComponent.js | 56 ++ .../scrollToTopComponent.scss | 18 + src/pages/allDemanding/allDemanding.js | 63 +- src/pages/allDemanding/allDemanding.scss | 2 +- src/pages/goods/goods.js | 1 + src/pages/goodsPublish/goodsPublish.js | 3 +- src/pages/goodsPublish/goodsPublish.scss | 2 +- src/pages/home/home.js | 97 ++- .../myDemandSupplyEdit.scss | 2 +- src/pages/myGoodList/myGoodList.js | 621 +++++++------- src/pages/myGoodList/myGoodList.scss | 4 + src/pages/myGoodsEdit/myGoodsEdit.js | 81 +- src/pages/myGoodsEdit/myGoodsEdit.scss | 2 +- src/pages/myNeeds/myNeeds.js | 87 +- src/pages/myNeeds/myNeeds.scss | 6 +- src/pages/myNeedsEdit/myNeedsEdit.scss | 2 +- src/pages/myNeedsPublish/myNeedsPublish.scss | 2 +- src/pages/myNeedsView/myNeedsView.scss | 20 +- src/pages/mySupplyDemand/mySupplyDemand.js | 68 +- src/pages/mySupplyDemand/mySupplyDemand.scss | 18 +- src/pages/shop/shop.js | 115 +-- src/pages/shop/shop.scss | 4 + .../supplyDemandPublish.js | 2 - .../supplyDemandPublish.scss | 2 +- .../supplyDemandView/supplyDemandView.scss | 2 +- src/todo list.txt | 785 +++++++++++++++++- 35 files changed, 1549 insertions(+), 620 deletions(-) create mode 100644 src/component/scrollToTopComponent/scrollToTopComponent.js create mode 100644 src/component/scrollToTopComponent/scrollToTopComponent.scss diff --git a/src/app.js b/src/app.js index 7aa3e9f..a66ee7d 100644 --- a/src/app.js +++ b/src/app.js @@ -42,7 +42,8 @@ class App extends Component { navigationBarBackgroundColor: '#fff', navigationBarTitleText: 'WeChat', navigationBarTextStyle: 'black', - enablePullDownRefresh:true + // enablePullDownRefresh:true + onReachBottomDistance: 0 } , diff --git a/src/app.scss b/src/app.scss index b7f8ea7..d0d61d3 100644 --- a/src/app.scss +++ b/src/app.scss @@ -4,6 +4,8 @@ $themeColor: #FF7142; $linearOrange:linear-gradient(to right, #FF7142, #FF7142); $linearDarkRed:linear-gradient(to right, #d9534f, #d9534f);; $linearGreen:linear-gradient(to right, #5cb85c, #5cb85c);; +$linearBlue:linear-gradient(to right, #337ab7, #337ab7); + .input-index--at-input__title{ font-weight: bold @@ -39,6 +41,20 @@ $linearGreen:linear-gradient(to right, #5cb85c, #5cb85c);; background:$linearOrange; margin:20px auto } +.button-blue{ + color:white; + font-size: 28px; + background:$linearBlue; + margin:20px auto +} +.blur{ + opacity: 0.5; +} + +// .button-blue-mini{ +// color:white; +// background:$linearBlue; +// } .button-no-margin{ margin:10px 0 } \ No newline at end of file diff --git a/src/component/bottomNav/bottomNav.js b/src/component/bottomNav/bottomNav.js index 302939b..639155a 100644 --- a/src/component/bottomNav/bottomNav.js +++ b/src/component/bottomNav/bottomNav.js @@ -32,7 +32,6 @@ class bottomNav extends Component { }) let path = this.state.otherData[value].url - console.log('path',path) Taro.navigateTo({ url: path, }) diff --git a/src/component/copyrightComponent/copyrightComponent.js b/src/component/copyrightComponent/copyrightComponent.js index 1413b9b..08494b3 100644 --- a/src/component/copyrightComponent/copyrightComponent.js +++ b/src/component/copyrightComponent/copyrightComponent.js @@ -20,10 +20,6 @@ class CopyrightComponent extends Component { Copyright © 晨丰全屋定制商城 闽ICP备16007300号-2 - - - - ) diff --git a/src/component/copyrightComponent/copyrightComponent.scss b/src/component/copyrightComponent/copyrightComponent.scss index e466605..246c48e 100644 --- a/src/component/copyrightComponent/copyrightComponent.scss +++ b/src/component/copyrightComponent/copyrightComponent.scss @@ -1,6 +1,7 @@ .copyright-box{ padding:0 20px; + margin:5% 0; .title{ text-align: center; line-height: 100px; @@ -9,7 +10,3 @@ } } -.gap{ - - height:150px; - } \ No newline at end of file diff --git a/src/component/filteredShopComponent/filteredShopComponent.js b/src/component/filteredShopComponent/filteredShopComponent.js index 98b09b9..9662587 100644 --- a/src/component/filteredShopComponent/filteredShopComponent.js +++ b/src/component/filteredShopComponent/filteredShopComponent.js @@ -198,6 +198,7 @@ class recommondShop extends Component { }) : null + // 优惠卷和咨询元素 // const voucherModalElement = // 优惠卷须知： @@ -277,13 +278,13 @@ class recommondShop extends Component { {voucherLeft ? - - : - + : + } - - diff --git a/src/component/filteredShopComponent/filteredShopComponent.scss b/src/component/filteredShopComponent/filteredShopComponent.scss index 0addb56..1d88faa 100644 --- a/src/component/filteredShopComponent/filteredShopComponent.scss +++ b/src/component/filteredShopComponent/filteredShopComponent.scss @@ -36,16 +36,22 @@ $linearBlue:linear-gradient(to right, #337ab7, #337ab7); // padding:20px 0; margin-top:2%; .button{ - flex:1; // margin-left:2%; text-align: center; - margin-left:8%; + margin-left:25%; } - .button-blue{ - color:white; + .blur{ + opacity: 0.5; + } + .contult-button{ + margin-left:5%; + } + .button-blue-mini{ font-size: 22px; + color:white; background:$linearBlue; } + } .title{ flex:1; diff --git a/src/component/filteredShopComponent/voucherPosterComponent/voucherPosterComponent.js b/src/component/filteredShopComponent/voucherPosterComponent/voucherPosterComponent.js index d569331..d441fa8 100644 --- a/src/component/filteredShopComponent/voucherPosterComponent/voucherPosterComponent.js +++ b/src/component/filteredShopComponent/voucherPosterComponent/voucherPosterComponent.js @@ -17,7 +17,7 @@ class VoucherPoster extends Component { this.state = { voucherName: '', voucherPhone: '', - voucherPosterImage:'background-image:url('+URL.Base+'/Public/images/store/m_yhq.png);' + voucherPosterImage: 'background-image:url(' + URL.Base + '/Public/images/store/m_yhq.png);' } } // api 购买咨询 BuyConsult @@ -44,7 +44,12 @@ class VoucherPoster extends Component { .then(res => { console.log('购买咨询请求成功', res) if (res.statusCode === 200) { - Taro.showToast({ title: '咨询成功', icon: 'success' }) + Taro.showToast({ title: '领取成功', icon: 'success',duration:1500}) + + setTimeout(() => { + this.passDataToParent() + }, 1500); + } else { Taro.showToast({ title: res.data.err_msg, icon: 'none' }) @@ -59,26 +64,21 @@ class VoucherPoster extends Component { } //名字输入 handleNameChange(value) { - this.setState({ voucherName: value }) + this.setState({ voucherName: value.detail.value }) } //号码输入 handlePhoneChange(value) { - this.setState({ voucherPhone: value }) + this.setState({ voucherPhone: value.detail.value }) } passDataToParent() { this.props.onPassDataToChild(false) } componentDidMount() { - console.log('poster did mount') this.setState({ voucherName: Taro.getStorageSync('user_identity').username, voucherPhone: Taro.getStorageSync('user_identity').userphone, }) } - componentWillReceiveProps(nextProps) { - console.log(this.props, nextProps) - } - componentWillUnmount() { } componentDidShow() { } @@ -86,41 +86,37 @@ class VoucherPoster extends Component { componentDidHide() { } render() { - + return ( - {/* */} - - - - - + + - + 当前优惠卷{this.props.voucherLeft}张 联系人： - + 联系电话： - + - {this.props.voucherResponseMsg} - + {this.props.voucherResponseMsg} + - + diff --git a/src/component/filteredShopComponent/voucherPosterComponent/voucherPosterComponent.scss b/src/component/filteredShopComponent/voucherPosterComponent/voucherPosterComponent.scss index 9cb9631..d3ff9fe 100644 --- a/src/component/filteredShopComponent/voucherPosterComponent/voucherPosterComponent.scss +++ b/src/component/filteredShopComponent/voucherPosterComponent/voucherPosterComponent.scss @@ -30,12 +30,16 @@ $linearOrange:linear-gradient(to right, #FF7142, #FF7142); animation-duration: 0.4s; height:80%; overflow-y: scroll; + .absolute{ position:absolute; + } .container{ top:0px; background-size:100% 100%; + min-height:100%; + .close-icon{ margin-left:88%; @@ -43,7 +47,7 @@ $linearOrange:linear-gradient(to right, #FF7142, #FF7142); } .voucher-left{ - margin-top:55%; + margin-top:40%; width: 100%; text-align: center; color:white; @@ -71,7 +75,7 @@ $linearOrange:linear-gradient(to right, #FF7142, #FF7142); } .input-info{ flex:2; - margin-top:1.5% + margin-top:3.5% } } @@ -92,7 +96,7 @@ $linearOrange:linear-gradient(to right, #FF7142, #FF7142); } .input-info{ flex:2; - margin-top:1.5% + margin-top:3.5% } } diff --git a/src/component/scrollToTopComponent/scrollToTopComponent.js b/src/component/scrollToTopComponent/scrollToTopComponent.js new file mode 100644 index 0000000..46de29a --- /dev/null +++ b/src/component/scrollToTopComponent/scrollToTopComponent.js @@ -0,0 +1,56 @@ +//scrollToTopComponent +import Taro, { Component } from '@tarojs/taro' +import { View, Text } from '@tarojs/components' +import { AtIcon } from 'taro-ui' + + +import './scrollToTopComponent.scss' + + + + +class ScrollToTopComponent extends Component { + config = { + navigationBarTitleText: '顶部' + } + + scrollToTop() { + Taro.pageScrollTo({ + scrollTop: 0, + duration: 300 + }) + } + + onPageScroll(location) { + console.log(location) + } + + + componentDidMount() { + + } + componentWillReceiveProps(nextProps) { + // console.log(this.props, nextProps) + } + + componentWillUnmount() { } + + componentDidShow() { } + + componentDidHide() { } + + render() { + return ( + + + + 顶部 + + + + + ) + } +} + +export default ScrollToTopComponent diff --git a/src/component/scrollToTopComponent/scrollToTopComponent.scss b/src/component/scrollToTopComponent/scrollToTopComponent.scss new file mode 100644 index 0000000..855d3d2 --- /dev/null +++ b/src/component/scrollToTopComponent/scrollToTopComponent.scss @@ -0,0 +1,18 @@ +.scrollToTopComponent{ + height:100rpx; + width:100rpx; + border: 1px solid #ddd; + background-color: white; + border-radius:50%; + text-align:center; + position:fixed; + bottom:8%; + right:5%; + font-size:25rpx; + .box{ + margin-top:6%; + + } + + +} \ No newline at end of file diff --git a/src/pages/allDemanding/allDemanding.js b/src/pages/allDemanding/allDemanding.js index 9028501..8d3a70d 100644 --- a/src/pages/allDemanding/allDemanding.js +++ b/src/pages/allDemanding/allDemanding.js @@ -1,6 +1,6 @@ import Taro, { Component } from '@tarojs/taro' import { View, Text, Image, Button } from '@tarojs/components' -import { AtInput, AtButton, Picker, AtIcon, AtModal, AtToast, AtModalHeader, AtModalContent, AtModalAction, AtPagination } from 'taro-ui' +import { AtInput, Picker, AtIcon, AtModal, AtToast, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui' import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent' import InteractionComponent from '../../component/interactionComponent/interactionComponent' @@ -11,7 +11,8 @@ import './allDemanding.scss' import eyeIcon from '../../icons/eye.png' -let currentPage = 1 +let loadMorePageIndex = 1 // 底部加载接口请求参数 + class AllDemanding extends Component { config = { navigationBarTitleText: '全部业主需求' @@ -30,15 +31,17 @@ class AllDemanding extends Component { grabOrderId: '',//抢到订单的id isGrabOrderSuccess: false,// 是否显示轻提示 grabOrderSuccess: '无法显示绑定后的字段',// 抢单成功返回字段 - totalDemandings: 0, - currentPage: 1 + currentPage: 1, + isAddToList: false,// / 请求业主需求的时候是否添加到旧列表里 } } - + // 搜索业主需求函数 - searchDemanding({ curr_page = 1, page_count = 10, + searchDemanding({ + curr_page = 1, + page_count = 10, sd_title = this.state.title, state = this.state.demandingStateSelected.id, update_dateL = this.state.startDateSel, @@ -67,12 +70,20 @@ class AllDemanding extends Component { } }) .then(res => { - Taro.hideLoading() if (res.data.err_msg === 'success') { - const total = Number(res.data.count) - this.setState({ supplys: res.data.supplys, totalDemandings: total }) - + if (res.data.supplys.length) { + if (this.state.isAddToList) { + this.setState({ supplys: this.state.supplys.concat(res.data.supplys) }) + } else { + this.setState({ supplys: res.data.supplys }) + } + } else { + Taro.showToast({ + title: '没有更多了', + icon: 'none' + }) + } } else { Taro.showToast({ title: res.data.err_msg, @@ -80,11 +91,9 @@ class AllDemanding extends Component { duration: 1500 }) } - - }) } - + // 改变需求选项 changeDemandingState = e => { this.setState({ @@ -182,7 +191,8 @@ class AllDemanding extends Component { }) this.setState({ currentPage: type.current, }, () => { this.searchDemanding({ - curr_page: this.state.currentPage, page_count: 10, + curr_page: this.state.currentPage, + page_count: 10, sd_title: this.state.title, state: this.state.demandingStateSelected.id, update_dateL: this.state.startDateSel, @@ -210,6 +220,18 @@ class AllDemanding extends Component { componentDidHide() { } + // 底部加载 + onReachBottom() { + Taro.showLoading({ + title: '加载中' + }) + loadMorePageIndex += 1 + this.setState({ isAddToList: true }, () => { + this.searchDemanding({ curr_page: loadMorePageIndex }) + }) + + } + render() { // 提示模态弹窗element @@ -249,7 +271,7 @@ class AllDemanding extends Component { {item.state_name === '在用' ? : - + } @@ -332,16 +354,7 @@ class AllDemanding extends Component { {allDemandingElementArray} - - - - - + ) diff --git a/src/pages/allDemanding/allDemanding.scss b/src/pages/allDemanding/allDemanding.scss index 860e0a5..fb9cbee 100644 --- a/src/pages/allDemanding/allDemanding.scss +++ b/src/pages/allDemanding/allDemanding.scss @@ -61,7 +61,7 @@ $themeColor: #FF7142; display: flex; flex-wrap: nowrap; flex-direction: row; - margin: 40px 0; + margin: 40px 0 0; padding: 0 120px; .button{ diff --git a/src/pages/goods/goods.js b/src/pages/goods/goods.js index 1875a2b..ebfade6 100644 --- a/src/pages/goods/goods.js +++ b/src/pages/goods/goods.js @@ -6,6 +6,7 @@ import CopyrightComponent from '../../component/copyrightComponent/copyrightComp import URL from '../../serviceAPI.config' import './goods.scss' + class Goods extends Component { config = { diff --git a/src/pages/goodsPublish/goodsPublish.js b/src/pages/goodsPublish/goodsPublish.js index 29ac6d1..3585a2e 100644 --- a/src/pages/goodsPublish/goodsPublish.js +++ b/src/pages/goodsPublish/goodsPublish.js @@ -1,6 +1,7 @@ import Taro, { Component } from '@tarojs/taro' import { View, Text, Button } from '@tarojs/components' import { AtInput, AtImagePicker, AtTextarea, AtForm } from 'taro-ui' +import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent' import ShopTypeInteractionComp from '../../component/shopTypeInteractionComp/shopTypeInteractionComp' @@ -358,7 +359,7 @@ class GoodsPublish extends Component { - + ) diff --git a/src/pages/goodsPublish/goodsPublish.scss b/src/pages/goodsPublish/goodsPublish.scss index c43e807..00474d8 100644 --- a/src/pages/goodsPublish/goodsPublish.scss +++ b/src/pages/goodsPublish/goodsPublish.scss @@ -76,7 +76,7 @@ $themeColor:#FF7142; display: flex; flex-wrap: nowrap; flex-direction: row; - margin: 40px 0; + margin: 40px 0 0; padding: 0 120px; .button{ flex:1; diff --git a/src/pages/home/home.js b/src/pages/home/home.js index dc3203d..297daa7 100644 --- a/src/pages/home/home.js +++ b/src/pages/home/home.js @@ -1,12 +1,16 @@ import Taro, { Component } from '@tarojs/taro' import { View, Button, Text, Swiper, SwiperItem, Image, } from '@tarojs/components' -import { AtModal, AtModalHeader, AtModalContent, AtModalAction, AtLoadMore } from 'taro-ui' +import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui' import FilteredShopComponent from '../../component/filteredShopComponent/filteredShopComponent' import BottomNav from '../../component/bottomNav/bottomNav' +import ScrollToTopComponent from '../../component/scrollToTopComponent/scrollToTopComponent' +import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent' + import URL from '../../serviceAPI.config' import './home.scss' -let currentPage = 1 + +let loadMorePageIndex = 1 // 底部加载接口请求参数 class Home extends Component { config = { @@ -24,24 +28,22 @@ class Home extends Component { otherData: [], // 底部导航栏 isOpen: false, // 抢单消息提示 grabOrderId: '',//抢到订单的id - isMore: 'noMore',// 加载更多店铺 userName: '',//用户名字 userPhone: '',// 用户电话 - + isShowTopNav: false, } } - onPullDownRefresh() { - Taro.showLoading({ title: '加载中' }) + // onPullDownRefresh() { + // Taro.showLoading({ title: '加载中' }) - this.login().then(() => { - this.getShops({}) - this.getHomeCategoriesInfo() - }).catch(err => console.log('微信登入失败：', err)) - - Taro.stopPullDownRefresh() - } + // this.login().then(() => { + // this.getShops({}) + // this.getHomeCategoriesInfo() + // }).catch(err => console.log('微信登入失败：', err)) + // Taro.stopPullDownRefresh() + // } //api得到首页的信息 @@ -76,7 +78,7 @@ class Home extends Component { } // api 得到推荐商店的信息 getShops({ parent_supply_class = 0, supply_class = '-1', supply_level = 1, curr_page = 1, - page_count = 20, action = "2" }) { + page_count = 5, action = "2" }) { Taro.request({ url: URL.ShopSupplyShops, method: 'POST', @@ -101,12 +103,12 @@ class Home extends Component { Taro.hideLoading() if (res.data.err_msg === 'success') { if (res.data.shops.length) { - this.setState({ shopsDetails: this.state.shopsDetails.concat(res.data.shops), isMore: 'more' }, () => { - }) - + this.setState({ shopsDetails: this.state.shopsDetails.concat(res.data.shops) }) } else { - this.setState({ isMore: 'noMore' }, () => { - console.log('ismore?', this.state.isMore) + Taro.showToast({ + title: '没有更多了', + icon: 'none', + duration: 1500 }) } @@ -148,7 +150,7 @@ class Home extends Component { console.log('所有店铺的信息', res) Taro.hideLoading() if (res.data.err_msg === 'success') { - + this.setState({ shopsDetails: res.data.shops }) Taro.hideLoading() @@ -273,10 +275,10 @@ class Home extends Component { const childClass = item.class_id this.setState({ subCate: item.children }) Taro.showLoading({ - title:'加载中' + title: '加载中' }) this.getShopsInfo({ parent_supply_class: parentClass, supply_class: childClass }) - + } // 点击子类 onClickChildCate(item) { @@ -284,7 +286,7 @@ class Home extends Component { const childClass = item.class_id // this.getShops(item.parent_class_id, item.class_id, 2) Taro.showLoading({ - title:'加载中' + title: '加载中' }) this.getShopsInfo({ parent_supply_class: parentClass, supply_class: childClass, supply_level: 2 }) } @@ -294,7 +296,6 @@ class Home extends Component { duration: 300 }) this.onClickParentCate(item) - } // 转到其他页面 goToAllDemandingPage() { @@ -317,15 +318,7 @@ class Home extends Component { // 确认抢单之后 this.GrabDemand({ demandId: this.state.grabOrderId }) } - // 向上拉升延迟一秒加载数据 - handleLoadMore() { - this.setState({ isMore: 'loading' }) - setTimeout(() => { - currentPage += 1 - this.getShops({ curr_page: currentPage }) - }, 1000); - } // 导航去抢单页面 goToGrabOrderPage(orderId) { @@ -334,7 +327,7 @@ class Home extends Component { url: '/pages/grabOrderPage/grabOrderPage?orderId=' + orderId }) } - goToMyNeedsPublish(){ + goToMyNeedsPublish() { Taro.navigateTo({ url: '/pages/myNeedsPublish/myNeedsPublish' @@ -368,6 +361,25 @@ class Home extends Component { console.log(e.detail.userInfo) console.log(e.detail.rawData) } + // 页面位置 + onPageScroll(location) { + if (location.scrollTop <= 300&&this.state.isShowTopNav) { + this.setState({ isShowTopNav: false }) + } else if(location.scrollTop >300&&!this.state.isShowTopNav) { + this.setState({ isShowTopNav: true }) + } + } + // 底部加载 + onReachBottom() { + Taro.showLoading({ + title: '加载中' + }) + setTimeout(() => { + loadMorePageIndex += 1 + this.getShops({ curr_page: loadMorePageIndex }) + }, 1000); + } + @@ -383,10 +395,6 @@ class Home extends Component { - - - - const demandingElemensArray = this.state.demanding.length ? this.state.demanding.map((item, index) => { return @@ -504,7 +512,7 @@ class Home extends Component { - + @@ -555,25 +563,22 @@ class Home extends Component { {shopCollectionElementsArray} - - - + {this.state.isShowTopNav ? : null} + + + + ) } diff --git a/src/pages/myDemandSupplyEdit/myDemandSupplyEdit.scss b/src/pages/myDemandSupplyEdit/myDemandSupplyEdit.scss index cf285ad..9a97cbf 100644 --- a/src/pages/myDemandSupplyEdit/myDemandSupplyEdit.scss +++ b/src/pages/myDemandSupplyEdit/myDemandSupplyEdit.scss @@ -25,7 +25,7 @@ $themeColor:#FF7142; display: flex; flex-wrap: nowrap; flex-direction: row; - margin: 40px 0; + margin: 40px 0 0; padding: 0 120px; .button{ flex:1; diff --git a/src/pages/myGoodList/myGoodList.js b/src/pages/myGoodList/myGoodList.js index b17e217..54d7ce8 100644 --- a/src/pages/myGoodList/myGoodList.js +++ b/src/pages/myGoodList/myGoodList.js @@ -1,14 +1,13 @@ import Taro, { Component } from '@tarojs/taro' -import { View, Radio,Button } from '@tarojs/components' -import { AtInput, Text, AtIcon, Picker, Image, AtPagination, AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui' +import { View, Radio, Button } from '@tarojs/components' +import { AtInput, Text, AtIcon, Picker, Image, AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui' import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent' import URL from '../../serviceAPI.config' import './myGoodList.scss' - - +let loadMorePageIndex = 1 // 底部加载接口请求参数 class MyGoodList extends Component { config = { navigationBarTitleText: '商品列表' @@ -37,12 +36,13 @@ class MyGoodList extends Component { myGoodListTotal: 0,// 后台的商品总数 currentPage: 1, goodsStateParam: 1,//商品状态参数 - pageCountParam: 5,// 商品数量参数 + pageCountParam: 2,// 商品数量参数 currPageParam: 1,// 当前页面 参数 isCheckAll: false,// 是否checked goodsIdList: [],//商品Id 列表 isOpenDeleteModal: false,// 是否显示删除模态框 isOpenOffStockModal: false,// 是否显示下架模态框 + isAddToList: false,// 是否下拉加载 如果是 就添加商品到我的商品列表 @@ -126,25 +126,32 @@ class MyGoodList extends Component { if (res.statusCode === 200) { console.log('我的商品列表', JSON.parse(res.data)) const data = JSON.parse(res.data) - if (data.goods) { + Taro.hideLoading() + if (data.goods.length) { data.goods.forEach(item => { item.checked = false }); const goodCount = Number(data.goodsCount) - this.setState({ - myGoodList: data.goods, - myGoodListTotal: goodCount + if (this.state.isAddToList) { + this.setState({ myGoodList: this.state.myGoodList.concat(data.goods) }, () => { + this.setState({ isAddToList: false }) + }) + } else { + this.setState({ + myGoodList: data.goods, + myGoodListTotal: goodCount + }) + + } + } else { + Taro.showToast({ + title: '没有更多了', + icon: 'none' }) - } - - - } else { console.log('我的商品列表获取失败') } - - }) } @@ -158,7 +165,6 @@ class MyGoodList extends Component { goodsSalesL = this.state.minimumSold, goodsSalesU = this.state.maximumSold, shopClassID = this.state.productId, - goodsState = this.state.goodsStateParam, pageCount = this.state.pageCountParam, currPage = this.state.currPageParam, @@ -300,7 +306,7 @@ class MyGoodList extends Component { Taro.showLoading({ title: '加载中', }) - this.setState({ currentPage: 1 ,isCheckAll:false}, () => { + this.setState({ currentPage: 1, isCheckAll: false }, () => { this.getGoodListResultApi({}) }) } @@ -317,8 +323,8 @@ class MyGoodList extends Component { productId: '', productCateSelected: { id: '', name: '全部类目' }, }, () => { - - this.setState({isCheckAll:false,currentPage: 1},()=>{ + + this.setState({ isCheckAll: false, currentPage: 1 }, () => { this.getMyGoodListApi({}) }) Taro.showToast({ @@ -414,134 +420,156 @@ class MyGoodList extends Component { } else { this.setState({ - isCheckAll:true - },()=>{ - this.setState({isCheckAll:false}) + isCheckAll: true + }, () => { + this.setState({ isCheckAll: false }) }) Taro.showToast({ title: '全选无效', icon: 'none', duration: 1500 - }).then(()=>{ - + }).then(() => { + }) - - }} - - - // 单个商品选择 - handleCheckChange(Id) { - //如果goodid 一样的那么checked 就取反 - const newMyGoodList = this.state.myGoodList.map((item) => { - if (item.goods_id === Id) { - item.checked = !item.checked - } - return item - }) - this.setState({ myGoodList: newMyGoodList }) - } - // 删除商品 - deleteGoodsHandler() { - const checkedGoodsId = [] - this.state.myGoodList.forEach(item => { - if (item.checked) { - checkedGoodsId.push(item.goods_id) - } - }); - checkedGoodsId.length ? this.setState({ isOpenDeleteModal: true }) : Taro.showToast({ - title: '请选择要删除的商品', - icon: 'none', - duration: 1500 - }) - // // this.deleteGood({ goodsID: checkedGoodsId }) - - } - // 改变商品状态 - offStockGoodHandler() { - const checkedGoodsId = [] - this.state.myGoodList.forEach(item => { - if (item.checked) { - checkedGoodsId.push(item.goods_id) - } - }); - //this.changeGoodState({ goodsID: checkedGoodsId }) - checkedGoodsId.length ? this.setState({ isOpenOffStockModal: true }) : Taro.showToast({ - title: '请选择要下架的商品', - icon: 'none', - duration: 1500 - }) - } - // 导航到商品编辑页面myGoodsEdit - goToGoodEditPage(goodId) { - Taro.navigateTo({ - url: '/pages/myGoodsEdit/myGoodsEdit?id=' + goodId - }) - } - goToGoodspage(goodId){ - Taro.navigateTo({ - url: '/pages/goods/goods?id=' + goodId - }) - } + } - DeleteConfirm(){ - this.setState({ - isOpenDeleteModal: false - }) - const checkedGoodsId = [] - this.state.myGoodList.forEach(item => { - if (item.checked) { - checkedGoodsId.push(item.goods_id) - } - }); - this.deleteGood({ goodsID: checkedGoodsId }) - } - deleteModalClose(){ - this.setState({ - isOpenDeleteModal: false - }) - } - OffStockConfirm(){ - this.setState({ - isOpenOffStockModal: false - }) - const checkedGoodsId = [] - this.state.myGoodList.forEach(item => { - if (item.checked) { - checkedGoodsId.push(item.goods_id) - } - }); - this.changeGoodState({ goodsID: checkedGoodsId }) - } - offStockModalClose(){ - this.setState({ - isOpenOffStockModal: false - }) - } + // 单个商品选择 + handleCheckChange(Id) { + //如果goodid 一样的那么checked 就取反 + const newMyGoodList = this.state.myGoodList.map((item) => { + if (item.goods_id === Id) { + item.checked = !item.checked + } + return item + }) + this.setState({ myGoodList: newMyGoodList }) + } + // 删除商品 + deleteGoodsHandler() { + const checkedGoodsId = [] + this.state.myGoodList.forEach(item => { + if (item.checked) { + checkedGoodsId.push(item.goods_id) + } + }); + checkedGoodsId.length ? this.setState({ isOpenDeleteModal: true }) : Taro.showToast({ + title: '请选择要删除的商品', + icon: 'none', + duration: 1500 + }) + // // this.deleteGood({ goodsID: checkedGoodsId }) - componentDidMount() { - this.getMyGoodListApi({}) - this.getBaoBeiCateList() - } - componentWillReceiveProps(nextProps) { - console.log(this.props, nextProps) - } - componentWillUnmount() { } - componentDidShow() { } + } + // 改变商品状态 + offStockGoodHandler() { + const checkedGoodsId = [] + this.state.myGoodList.forEach(item => { + if (item.checked) { + checkedGoodsId.push(item.goods_id) + } + }); + //this.changeGoodState({ goodsID: checkedGoodsId }) + checkedGoodsId.length ? this.setState({ isOpenOffStockModal: true }) : Taro.showToast({ + title: '请选择要下架的商品', + icon: 'none', + duration: 1500 + }) + } + // 导航到商品编辑页面myGoodsEdit + goToGoodEditPage(goodId) { + Taro.navigateTo({ + url: '/pages/myGoodsEdit/myGoodsEdit?id=' + goodId + }) + } + // 导航到商品发布页面 - componentDidHide() { } + goToGoodsPublishPage() { + Taro.navigateTo({ + url: '/pages/goodsPublish/goodsPublish' + }) + } + goToGoodspage(goodId) { + Taro.navigateTo({ + url: '/pages/goods/goods?id=' + goodId + }) + } - render() { + DeleteConfirm() { + this.setState({ + isOpenDeleteModal: false + }) + const checkedGoodsId = [] + this.state.myGoodList.forEach(item => { + if (item.checked) { + checkedGoodsId.push(item.goods_id) + } + }); + this.deleteGood({ goodsID: checkedGoodsId }) + } + deleteModalClose() { + this.setState({ + isOpenDeleteModal: false + }) + } + OffStockConfirm() { - //等待接口数据 - const goodListElementArray = this.state.myGoodList.map((item, index) => { - return - - + this.setState({ + isOpenOffStockModal: false + }) + const checkedGoodsId = [] + this.state.myGoodList.forEach(item => { + if (item.checked) { + checkedGoodsId.push(item.goods_id) + } + }); + this.changeGoodState({ goodsID: checkedGoodsId }) + } + offStockModalClose() { + this.setState({ + isOpenOffStockModal: false + }) + } + + componentDidMount() { + this.getMyGoodListApi({}) + this.getBaoBeiCateList() + } + componentWillReceiveProps(nextProps) { + console.log(this.props, nextProps) + } + + componentWillUnmount() { } + + componentDidShow() { } + + componentDidHide() { } + + // 底部加载 + onReachBottom() { + Taro.showLoading({ + title: '加载中' + }) + + loadMorePageIndex += 1 + this.setState({ isAddToList: true }, () => { + this.getMyGoodListApi({ currPage: loadMorePageIndex }) + }) + + + } + + render() { + + //等待接口数据 + const goodListElementArray = this.state.myGoodList.map((item, index) => { + return + + @@ -549,183 +577,174 @@ class MyGoodList extends Component { ￥{item.goods_price} {item.sales_volume} - - - - - - }) - // 筛选项目排序element - const filterElementsArray = this.state.filterBar.map((item, index) => { - let isTure = this.state.filterOptions[item] - return - - {this.state.filterBarKeys[item]} - - {isTure ? : } + + - }) - // 删除提示模态弹窗element - const modalMessageDeleteElement = - 提示 - - 确定要删除已选商品？ + + }) + // 筛选项目排序element + const filterElementsArray = this.state.filterBar.map((item, index) => { + let isTure = this.state.filterOptions[item] + + return + + {this.state.filterBarKeys[item]} + + {isTure ? : } + + }) + // 删除提示模态弹窗element + const modalMessageDeleteElement = + 提示 + + 确定要删除已选商品？ - - - // 下架提示模态弹窗element - const modalMessageOffStockElement = - 提示 - - 确定要下架已选商品？ + + + // 下架提示模态弹窗element + const modalMessageOffStockElement = + 提示 + + 确定要下架已选商品？ - - + + - return ( - - {/* 删除模态提示框 */} - {modalMessageDeleteElement} - {/* 下架模态框提示 */} - {modalMessageOffStockElement} + return ( + + {/* 删除模态提示框 */} + {modalMessageDeleteElement} + {/* 下架模态框提示 */} + {modalMessageOffStockElement} - - - - - - - - - - - - - - - - - - - - 宝贝类目: - - {this.state.productCateSelected.name} - - - - - - - - - - - - - - - - 出售中的宝贝{this.state.myGoodListTotal}条记录 - - - - {filterElementsArray} - - - - 全选 - - - - - - - - - - - - - {this.state.myGoodList.length ? goodListElementArray : - 没有更多了.... - } - - - - - - - - - - + + - ) - } + + + + + + + + + + + + + + + + + 宝贝类目: + + {this.state.productCateSelected.name} + + + + + + + + + + + + + + + + + + + 出售中的宝贝{this.state.myGoodListTotal}条记录 + + + + {filterElementsArray} + + + + 全选 + + + + + + + + + + + + {goodListElementArray} + + + + + ) } +} - export default MyGoodList +export default MyGoodList diff --git a/src/pages/myGoodList/myGoodList.scss b/src/pages/myGoodList/myGoodList.scss index 9ac6717..53d95e5 100644 --- a/src/pages/myGoodList/myGoodList.scss +++ b/src/pages/myGoodList/myGoodList.scss @@ -131,6 +131,9 @@ $themeColor:#FF7142; .button-box1{ flex:1; margin-top: 7%; + .button-orange{ + font-size: 27rpx + } } .good-container-a{ flex:3; @@ -166,6 +169,7 @@ $themeColor:#FF7142; } + } diff --git a/src/pages/myGoodsEdit/myGoodsEdit.js b/src/pages/myGoodsEdit/myGoodsEdit.js index dc7e550..b208e73 100644 --- a/src/pages/myGoodsEdit/myGoodsEdit.js +++ b/src/pages/myGoodsEdit/myGoodsEdit.js @@ -1,8 +1,9 @@ import Taro, { Component } from '@tarojs/taro' import { View, Text } from '@tarojs/components' -import { AtInput, AtImagePicker, AtTextarea, Button, } from 'taro-ui' +import { AtInput, AtImagePicker, AtTextarea, Button, } from 'taro-ui' import ShopTypeInteractionComp from '../../component/shopTypeInteractionComp/shopTypeInteractionComp' +import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent' import URL from '../../serviceAPI.config' @@ -16,7 +17,7 @@ class MyGoodsEdit extends Component { constructor() { super(...arguments) this.state = { - shopTypeSelected:{name:'全部',id:''}, + shopTypeSelected: { name: '全部', id: '' }, shopTypeList: {},//店铺分类列表 productName: '', productPrice: '', @@ -56,7 +57,7 @@ class MyGoodsEdit extends Component { for (let key in this.state.shopTypeList) { for (let item of this.state.shopTypeList[key].c) { if (item.id === shopTypeId) { - shopTypeSelected = {name:item.n,id:item.id} + shopTypeSelected = { name: item.n, id: item.id } } } } @@ -335,37 +336,37 @@ class MyGoodsEdit extends Component { * * * {/* 图片上传 */} @@ -376,18 +377,19 @@ class MyGoodsEdit extends Component { {/* 店铺分类 */} - + {/* 店铺分类结束 */} @@ -397,27 +399,28 @@ class MyGoodsEdit extends Component { - + {/* */} - + - + + ) diff --git a/src/pages/myGoodsEdit/myGoodsEdit.scss b/src/pages/myGoodsEdit/myGoodsEdit.scss index ece2140..d7de9fa 100644 --- a/src/pages/myGoodsEdit/myGoodsEdit.scss +++ b/src/pages/myGoodsEdit/myGoodsEdit.scss @@ -76,7 +76,7 @@ $themeColor:#FF7142; display: flex; flex-wrap: nowrap; flex-direction: row; - margin: 40px 0; + margin: 40px 0 0; padding: 0 120px; .button{ flex:1; diff --git a/src/pages/myNeeds/myNeeds.js b/src/pages/myNeeds/myNeeds.js index 8572c90..0b9ff1f 100644 --- a/src/pages/myNeeds/myNeeds.js +++ b/src/pages/myNeeds/myNeeds.js @@ -1,7 +1,7 @@ //myNeeds import Taro, { Component } from '@tarojs/taro' import { View, Text, Button } from '@tarojs/components' -import { AtInput, Picker, AtIcon, AtModal, AtModalHeader, AtModalContent, AtModalAction, AtPagination } from 'taro-ui' +import { AtInput, Picker, AtIcon, AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui' import URL from '../../serviceAPI.config' import InteractionComponent from '../../component/interactionComponent/interactionComponent' @@ -10,6 +10,7 @@ import CopyrightComponent from '../../component/copyrightComponent/copyrightComp import './myNeeds.scss' +let loadMorePageIndex = 1 // 底部加载接口请求参数 class MyNeeds extends Component { @@ -38,6 +39,8 @@ class MyNeeds extends Component { currentPage: 1, needsItem: '',// 确认框提示时 使用的供求名 isDeleteModal:false, + isAddToList: false,// 请求需求的时候是否添加到旧列表里 + } } @@ -45,7 +48,7 @@ class MyNeeds extends Component { //请求我的需求列表 api GetMyNeedsList getMyNeedsList({ curr_page = 1, - page_count = 20, + page_count = 10, sd_type = '4', sd_title = '', update_dateL = '', @@ -84,15 +87,37 @@ class MyNeeds extends Component { 'X-Requested-With': 'XMLHttpRequest' } }).then(res => { + Taro.hideLoading() + console.log('我的需求列表', res) if (res.data.err_msg === "success") { - // 判断是否有res.data.supplys ， 如果没有就是空数组[] - Taro.hideLoading() - console.log('我的需求列表', res) + if(res.data.supplys.length){ + if(this.state.isAddToList){ + this.setState({ + allNeedsList:this.state.allNeedsList.concat(res.data.supplys) + },()=>{ + this.setState({isAddToList:false}) + }) - this.setState({ - allNeedsList: res.data.supplys || [], - totalNeeds: Number(res.data.count) + }else{ + this.setState({ + allNeedsList: res.data.supplys || [], + totalNeeds: Number(res.data.count) + }) + + } + + + }else{ + Taro.showToast({ + title: '没有更多了', + icon: 'none' }) + } + }else{ + Taro.showToast({ + title: res.data.err_msg, + icon: 'none' + }) } }) @@ -144,7 +169,7 @@ class MyNeeds extends Component { Taro.showLoading({ title: '加载中' }).then(() => { setTimeout(() => { this.getMyNeedsList({ - curr_page: this.currentPage, + curr_page: this.state.currentPage, page_count: this.state.pageCount, sd_type: this.state.needsTypeSelected.id, sd_title: this.state.title, @@ -228,24 +253,7 @@ class MyNeeds extends Component { } - // 翻页导航 - paginationNav(type) { - Taro.showLoading({ - title:'加载中' - }) - this.setState({ currentPage: type.current, }, () => { - this.getMyNeedsList({ - curr_page: this.state.currentPage, - page_count: this.state.pageCount, - sd_type: this.state.needsTypeSelected.id, - sd_title: this.state.title, - update_dateL: this.state.startDateSel, - update_dateU: this.state.endDateSel, - class_id: this.state.industryTypeSelected.id, - state: this.state.needsStateSelected.id - }) - }) - } + componentDidMount() { @@ -262,6 +270,18 @@ class MyNeeds extends Component { componentDidHide() { } + // 底部加载 + onReachBottom() { + Taro.showLoading({ + title: '加载中' + }) + loadMorePageIndex += 1 + this.setState({ isAddToList: true }, () => { + this.getMyNeedsList({ curr_page: loadMorePageIndex }) + }) + +} + getDataFromChild(value){ console.log('从子组件传回来的值',value) @@ -408,17 +428,8 @@ class MyNeeds extends Component { 没有更多了.... } - - - - - - + + ) diff --git a/src/pages/myNeeds/myNeeds.scss b/src/pages/myNeeds/myNeeds.scss index 0526241..1a97fd7 100644 --- a/src/pages/myNeeds/myNeeds.scss +++ b/src/pages/myNeeds/myNeeds.scss @@ -88,9 +88,9 @@ $themeColor:#FF7142; .button{ flex:1; text-align: center; - - - + } + .button-orange, .button-dark-red,.button-green{ + font-size:28rpx; } } diff --git a/src/pages/myNeedsEdit/myNeedsEdit.scss b/src/pages/myNeedsEdit/myNeedsEdit.scss index c0cc8ab..ddcaa43 100644 --- a/src/pages/myNeedsEdit/myNeedsEdit.scss +++ b/src/pages/myNeedsEdit/myNeedsEdit.scss @@ -25,7 +25,7 @@ $themeColor:#FF7142; display: flex; flex-wrap: nowrap; flex-direction: row; - margin: 40px 0; + margin: 40px 0 0; padding: 0 120px; .button{ flex:1; diff --git a/src/pages/myNeedsPublish/myNeedsPublish.scss b/src/pages/myNeedsPublish/myNeedsPublish.scss index be7c17e..b4b9da8 100644 --- a/src/pages/myNeedsPublish/myNeedsPublish.scss +++ b/src/pages/myNeedsPublish/myNeedsPublish.scss @@ -25,7 +25,7 @@ $themeColor:#FF7142; display: flex; flex-wrap: nowrap; flex-direction: row; - margin: 40px 0; + margin: 40px 0 0; padding: 0 120px; .button{ flex:1; diff --git a/src/pages/myNeedsView/myNeedsView.scss b/src/pages/myNeedsView/myNeedsView.scss index 7600cfc..c3eab0d 100644 --- a/src/pages/myNeedsView/myNeedsView.scss +++ b/src/pages/myNeedsView/myNeedsView.scss @@ -15,22 +15,24 @@ $themeColor:#FF7142; display: flex; flex-wrap: nowrap; flex-direction: row; - margin: 40px 0; + margin: 40px 0 0; padding: 0 20px; + .button{ flex:1; text-align: center; - // margin:2%; - // justify-content:center; + .button-green{ + font-size: 25rpx; - .at-button--primary{ - background-color:$themeColor; - border:1PX solid $themeColor; } - .button-a{ - background-color:#d9534f; - border:1PX solid #d9534f; + .button-orange{ + font-size: 25rpx; + + } + .button-dark-red{ + font-size: 25rpx; + } } } diff --git a/src/pages/mySupplyDemand/mySupplyDemand.js b/src/pages/mySupplyDemand/mySupplyDemand.js index 78c262e..9be69cd 100644 --- a/src/pages/mySupplyDemand/mySupplyDemand.js +++ b/src/pages/mySupplyDemand/mySupplyDemand.js @@ -1,6 +1,6 @@ import Taro, { Component } from '@tarojs/taro' import { View, Text, Button } from '@tarojs/components' -import { AtInput, Picker, AtIcon, AtModal, AtModalHeader, AtModalContent, AtModalAction, AtPagination } from 'taro-ui' +import { AtInput, Picker, AtIcon, AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui' import URL from '../../serviceAPI.config' import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent' @@ -8,6 +8,7 @@ import CopyrightComponent from '../../component/copyrightComponent/copyrightComp import './mySupplyDemand.scss' +let loadMorePageIndex = 1 // 底部加载接口请求参数 class MySupplyDemand extends Component { @@ -30,8 +31,6 @@ class MySupplyDemand extends Component { demandSupplyId: '',// 删除我的供求时的供求id totalDemandSupply: 0,//所有供求 currentPage: 1 //当前页数 - - } } //获取我的供求列表API @@ -53,11 +52,31 @@ class MySupplyDemand extends Component { 'X-Requested-With': 'XMLHttpRequest' } }).then(res => { + Taro.hideLoading() + console.log('我的供求列表', res) if (res.data.err_msg === "success") { // 判断是否有res.data.supplys ， 如果没有就是空数组[] - Taro.hideLoading() - const totalCount = Number(res.data.count) - this.setState({ allDemandSupply: res.data.supplys || [], totalDemandSupply: totalCount }) + if (res.data.supplys.length) { + if (this.state.isAddToList) { + this.setState({ allDemandSupply: this.state.allDemandSupply.concat(res.data.supplys) }, () => { + this.setState({ isAddToList: false }) + }) + } else { + this.setState({ allDemandSupply: res.data.supplys || [], totalDemandSupply: res.data.count }) + } + } else { + Taro.showToast({ + title: '没有更多了', + icon: 'none' + }) + } + + } else { + Taro.showToast({ + title: res.data.err_msg, + icon: 'none', + duration: 1500 + }) } }) @@ -243,7 +262,7 @@ class MySupplyDemand extends Component { Taro.showLoading({ title: '加载中' }) this.setState({ currentPage: type.current, }, () => { this.getMySupplyDemand({ curr_page: this.state.currentPage }) - + }) } @@ -264,6 +283,18 @@ class MySupplyDemand extends Component { componentDidHide() { } + // 底部加载 + onReachBottom() { + Taro.showLoading({ + title: '加载中' + }) + loadMorePageIndex += 1 + this.setState({ isAddToList: true }, () => { + this.getMySupplyDemand({ curr_page: loadMorePageIndex }) + }) + + } + render() { @@ -309,13 +340,13 @@ class MySupplyDemand extends Component { - + - + - + @@ -393,17 +424,17 @@ class MySupplyDemand extends Component { - - - @@ -413,16 +444,7 @@ class MySupplyDemand extends Component { {demandSupplyElementArray} - - - - - + diff --git a/src/pages/mySupplyDemand/mySupplyDemand.scss b/src/pages/mySupplyDemand/mySupplyDemand.scss index cf9c3ba..9b952fa 100644 --- a/src/pages/mySupplyDemand/mySupplyDemand.scss +++ b/src/pages/mySupplyDemand/mySupplyDemand.scss @@ -80,21 +80,9 @@ $themeColor:#FF7142; flex:1; text-align: center; - - .at-button--primary{ - background-color:$themeColor; - border:1PX solid $themeColor; - } - .button-a{ - - background-color:#5cb85c; - border:1PX solid #5cb85c; - } - .button-b{ - - background-color:#d9534f; - border:1PX solid #d9534f; - } + } + .button-orange, .button-dark-red,.button-green{ + font-size:28rpx; } } diff --git a/src/pages/shop/shop.js b/src/pages/shop/shop.js index 8006782..49a7c23 100644 --- a/src/pages/shop/shop.js +++ b/src/pages/shop/shop.js @@ -1,6 +1,6 @@ import Taro, { Component } from '@tarojs/taro' import { View, Button, Text, Image } from '@tarojs/components' -import { AtTag, AtIcon, AtPagination, } from 'taro-ui' +import { AtTag, AtIcon, } from 'taro-ui' import URL from '../../serviceAPI.config' @@ -8,7 +8,8 @@ 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'; + +let loadMorePageIndex = 1 // 底部加载接口请求参数 class Shop extends Component { // 项目配置 @@ -42,10 +43,7 @@ class Shop extends Component { price: false, popularity: false, }, - filterCondition: '',// 筛选条件 - total: 0,// 信息条数 - currentPage: 1,// 当前页 isShowShopAllCate: false, shopAllInnerCate: '',// 店铺内部分类 isBlurWindow: false, @@ -54,7 +52,7 @@ class Shop extends Component { otherType: [],//侧边其他类型 widthType: [],// 侧边宽度类型 checkedFilterIdList: [],//已选的筛选id - + isAddToList: false,// 请求店铺商品的时候是否添加到旧列表里 // 下面是函数的默认参数 curr_page: 1, page_count: 10, @@ -63,7 +61,6 @@ class Shop extends Component { config_id: 4, shop_class_id: '', order: '', - currPage: 1, goods_class_id: '', goodsSpec: [], goodsParam: [], @@ -142,7 +139,7 @@ class Shop extends Component { } //侧边筛选商品类型 if (data.goods_type) { - // console.log('数据',data.goods_type) + // console.log('数据',data.goods_type) let goodTypeArray = [] Object.keys(data.goods_type).forEach(key => { goodTypeArray.push({ id: data.goods_type[key].goods_type_id, name: data.goods_type[key].goods_type_ch_name, checked: false }) @@ -222,11 +219,25 @@ class Shop extends Component { } }) .then(res => { - console.log('searchGood',res) + console.log('searchGood', res) Taro.hideLoading() - this.setState({ shopItem: res.data.goods, total: res.data.goodsCount, filterCondition: order }, () => { + if (res.data.goods.length) { + if (this.state.isAddToList) { + this.setState({ + shopItem: this.state.shopItem.concat(res.data.goods) + }, () => { + this.setState({ isAddToList: false }) + }) + } else { + this.setState({ shopItem: res.data.goods, filterCondition: order }) + } + } else { + Taro.showToast({ + title: '没有更多了', + icon: 'none' + }) + } - }) }) } @@ -246,7 +257,7 @@ class Shop extends Component { }) .then(res => { Taro.hideLoading() - + this.setState({ shopDescriptionData: res.data, shopName: res.data.data.shop_name, @@ -278,7 +289,7 @@ class Shop extends Component { .then(res => { if (res.statusCode === 200) { Taro.hideLoading() - + const originalData = res.data.data const sortedData = [] for (let item in originalData) { @@ -473,7 +484,7 @@ class Shop extends Component { } handleShopInnerCate(id) { - + Taro.showLoading({ title: '加载中' }) this.setState({ isShowShopAllCate: false, isBlurWindow: false @@ -488,7 +499,7 @@ class Shop extends Component { //重置按键筛选 resetFilterList() { - + Taro.showLoading({ title: '加载中' }) this.setState({ checkedFilterIdList: [], curr_page: 1, @@ -522,9 +533,9 @@ class Shop extends Component { } componentDidMount() { - + Taro.showLoading({ title: '加载中' }) - console.log('this.$router.params.id',this.$router.params.id) + console.log('this.$router.params.id', this.$router.params.id) //页面加载之后 得到指定店铺的商品 和 筛选标签 this.goodsSearch({ shop_id: this.$router.params.id }) // 加载店铺商品 this.getSearchParams({})// 加载筛选项 @@ -537,8 +548,20 @@ class Shop extends Component { componentDidHide() { } + // 底部加载 + onReachBottom() { + Taro.showLoading({ + title: '加载中' + }) + loadMorePageIndex += 1 + this.setState({ isAddToList: true }, () => { + this.goodsSearch({ curr_page: loadMorePageIndex }) + }) + + } + render() { - + const ShopItemElementsArray = this.state.shopItem.length ? this.state.shopItem.map((item, index) => { return @@ -558,9 +581,9 @@ class Shop extends Component { // 侧边已选项 const checkedFilterElementsArray = this.state.checkedFilterIdList.map((item, index) => { return {item.name} }) @@ -570,19 +593,19 @@ class Shop extends Component { // 侧边筛选的分类项 const goodsClassElementsArray = this.state.mainType.map((item, index) => { return {item.name} }) // 侧边筛选的商品类型项 const goodsTypeElementsArray = this.state.goodType.map((item, index) => { return {item.name} }) @@ -596,10 +619,10 @@ class Shop extends Component { let isCheck = subItem.checked return {name} })} @@ -609,10 +632,10 @@ class Shop extends Component { // 侧边筛选宽度选项 const widthnessElementsArray = this.state.widthType.map((item, index) => { return {item.name} }) // 店铺页面/店铺主页 @@ -633,12 +656,12 @@ class Shop extends Component { {this.state.checkedFilterIdList.length ? 已选择 : null} {checkedFilterElementsArray} - {this.state.mainType.length?分类:null} + {this.state.mainType.length ? 分类 : null} {goodsClassElementsArray} - {this.state.goodType.length?商品类型:null} + {this.state.goodType.length ? 商品类型 : null} {goodsTypeElementsArray} {goodsParamElementsArray} - {this.state.widthType.length?宽度:null} + {this.state.widthType.length ? 宽度 : null} {widthnessElementsArray} @@ -654,16 +677,7 @@ class Shop extends Component { {ShopItemElementsArray} - - - - // 店铺详情 const shopDescriptionElement = @@ -689,6 +703,7 @@ class Shop extends Component { 店铺介绍： {this.state.shopDescription} + @@ -704,7 +719,7 @@ class Shop extends Component { }) return ( - + diff --git a/src/pages/shop/shop.scss b/src/pages/shop/shop.scss index 8ce4d7d..c9b4c94 100644 --- a/src/pages/shop/shop.scss +++ b/src/pages/shop/shop.scss @@ -212,6 +212,10 @@ $themeColor:#FF7142; .description{ margin-top: 5%; margin-left: 15%; + height: auto; + word-wrap:break-word; + word-break:break-all; + overflow: hidden; .title-sub{ font-weight: bold } diff --git a/src/pages/supplyDemandPublish/supplyDemandPublish.js b/src/pages/supplyDemandPublish/supplyDemandPublish.js index 7d3777e..f2fd650 100644 --- a/src/pages/supplyDemandPublish/supplyDemandPublish.js +++ b/src/pages/supplyDemandPublish/supplyDemandPublish.js @@ -30,8 +30,6 @@ class SupplyDemand extends Component { content: '', pickerImageUrl: [], // 上传的图片 ImagesInfo: [],// 后台传回来的图片信息 - - } } diff --git a/src/pages/supplyDemandPublish/supplyDemandPublish.scss b/src/pages/supplyDemandPublish/supplyDemandPublish.scss index 01b41e0..6ebc29d 100644 --- a/src/pages/supplyDemandPublish/supplyDemandPublish.scss +++ b/src/pages/supplyDemandPublish/supplyDemandPublish.scss @@ -25,7 +25,7 @@ $themeColor:#FF7142; display: flex; flex-wrap: nowrap; flex-direction: row; - margin: 40px 0; + margin: 40px 0 0; padding: 0 120px; .button{ flex:1; diff --git a/src/pages/supplyDemandView/supplyDemandView.scss b/src/pages/supplyDemandView/supplyDemandView.scss index 9c400cb..c204053 100644 --- a/src/pages/supplyDemandView/supplyDemandView.scss +++ b/src/pages/supplyDemandView/supplyDemandView.scss @@ -18,7 +18,7 @@ $themeColor:#FF7142; display: flex; flex-wrap: nowrap; flex-direction: row; - margin: 40px 0; + margin: 40px 0 0; padding: 0 20px; .button{ diff --git a/src/todo list.txt b/src/todo list.txt index 51c5b10..e7eb4e3 100644 --- a/src/todo list.txt +++ b/src/todo list.txt @@ -1,36 +1,789 @@ todo list： 首页： 商品发布页面： - 商品分类三级联动 // 有bug - 店铺分类选项 二级联动// 需要修改 - 商品价格无法设定为数字 // 有bug 供求发布页面 - 联系电话无法设置为数字 // 有bug type=‘password’ 可以 全部业主需求页面： - 行业分类--等待后台接口--搜索 二级联动-- - 我的供求页面： - - 我的商品列表页面 - 商品价格无法设定为数字 // 有bug - 商品编辑页面 - 店铺分类--二级联动 -我的需求列表页面 - 搜索栏的 行业分类--三级联动 +我的需求列表页面: 接口问题： 优惠卷和询价 - - bug： 商品编辑 增加图片后 图片顺序乱了 - 我的商品 删除提示 等待后台--- 单个我的商品页面的图片顺序，单个我的需求页面的接口, 当个我哦的需求编辑页面的接口 +import Taro, { Component } from '@tarojs/taro' +import { View, Radio, Button } from '@tarojs/components' +import { AtInput, Text, AtIcon, Picker, Image, AtPagination, AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui' +import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent' +import URL from '../../serviceAPI.config' + +import Taro, { Component } from '@tarojs/taro' +import { View, Button, Text, Image } from '@tarojs/components' +import { 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'; + +let currentPage = 1 + +class Shop extends Component { + // 项目配置 + config = { + navigationBarTitleText: '店铺' + } + constructor() { + super(...arguments) + this.state = { + isShopDetailsOn: false, // 是否显示店铺说明页面 + shopItem: [], // 所有商品 + value: '', // 搜索框的值 + shopId: '', // 店铺的id + shopName: '', // 店铺名 + FilterText: '', // 筛选的可选项 + filterBar: ['all', 'amount', 'newProduct', 'price', 'popularity'], //筛选选项 + filterBarKeys: { all: '综合排序', amount: '销量', newProduct: '新品', price: '价格', popularity: '人气' }, // 筛选选项对应值 + selectedFilterValue: 0, //筛选项 + isShowFilter: false, //是否显示侧边筛选 + showShopHomePage: true,// 是否显示首页页面 + shopDescriptionData: '',// 店铺详情信息 + shopName: '',//店铺名称 + shopAddress: '',//店铺地址 + contactName: '',//联系人 + contactNumber: '',//联系电话 + shopDescription: '',//店铺简介 + filterOptions: { + all: true, + amount: false, + newProduct: false, + price: false, + popularity: false, + }, + filterCondition: '',// 筛选条件 + total: 0,// 信息条数 + currentPage: 1,// 当前页 + isShowShopAllCate: false, + shopAllInnerCate: '',// 店铺内部分类 + isBlurWindow: false, + mainType: [],// 侧边筛选分类 + goodType: [],//侧边商品类型 + otherType: [],//侧边其他类型 + widthType: [],// 侧边宽度类型 + checkedFilterIdList: [],//已选的筛选id + isAddToList:false,// 请求店铺商品的时候是否添加到旧列表里 + // 下面是函数的默认参数 + curr_page: 1, + page_count: 10, + shop_name: false, + shop_id: this.$router.params.id, + config_id: 4, + shop_class_id: '', + order: '', + currPage: 1, + goods_class_id: '', + goodsSpec: [], + goodsParam: [], + goodsParamExt: [], + + } + } + + // api 得到筛选的标签请求 + getSearchParams({ + shop_name = this.state.shop_name, + shop_id = this.state.shop_id, + shop_class_id = this.state.shop_class_id, + goods_class_id = this.state.goods_class_id, + class_filter = this.state.class_filter, + goods_type = this.state.goods_type, + goodsSpec = this.state.goodsSpec, + goodsParam = this.state.goodsParam, + goodsParamExt = this.state.goodsParamExt }) { + Taro.request({ + url: URL.GetSearchParam, + method: 'POST', + dataType: 'json', + data: { + goods: JSON.stringify({ + shop_name: shop_name, + shop_id: shop_id, + shop_class_id: shop_class_id, + goods_class_id: goods_class_id, + class_filter: class_filter, + goods_type: goods_type, + + }), + goodsSpec: JSON.stringify(goodsSpec), + goodsParam: JSON.stringify(goodsParam), + goodsParamExt: JSON.stringify(goodsParamExt), + + }, + header: { + 'content-type': 'application/x-www-form-urlencoded', + 'X-Requested-With': 'XMLHttpRequest' + } + }) + .then(res => { + if (res.statusCode === 200) { + console.log('筛选项目成功', res) + Taro.hideLoading() + this.formatFilterData(res.data).then(data => { + this.setState({ + sideFilterdata: data, + mainType: data.mainType || [], + goodType: data.goodType || [], + otherType: data.otherType || [], + widthType: data.widthType || [], + }) + console.log('formated data', data) + }) + } else { + console.log('筛选项目获取失败') + } + + + + }) + } + + async formatFilterData(data) { + const formatedFilterOptions = {} + //侧边筛选分类 + if (data.goods_class) { + let typeArray = [] + data.goods_class.forEach(item => { + typeArray.push({ id: item.class_id, name: item.class_name, checked: false }) + }); + formatedFilterOptions.mainType = typeArray + } + //侧边筛选商品类型 + if (data.goods_type) { + // console.log('数据',data.goods_type) + let goodTypeArray = [] + Object.keys(data.goods_type).forEach(key => { + goodTypeArray.push({ id: data.goods_type[key].goods_type_id, name: data.goods_type[key].goods_type_ch_name, checked: false }) + }); + formatedFilterOptions.goodType = goodTypeArray + } + //侧边筛选其他类型 + if (data.goodsParam) { + let goodsParamArray = [] + + Object.keys(data.goodsParam).forEach(key => { + const value = data.goodsParam[key] + const subArray = value.param_value.map(item => { + return { id: value.param_id, name: item, checked: false } + }) + goodsParamArray.push({ [value.param_name]: subArray }) + }); + formatedFilterOptions.otherType = goodsParamArray + } + //侧边筛选宽度类型 + if (data.goodsParamExt) { + let goodsParamExtArray = [] + Object.keys(data.goodsParamExt).forEach(key => { + const value = data.goodsParamExt[key] + const keyId = value.param_id + Object.keys(value.param_value).forEach(item => { + const name = value.param_value[item].value_desc + const value1 = value.param_value[item] + + goodsParamExtArray.push({ name: name, value: value1, checked: false, id: keyId }) + }); + }); + formatedFilterOptions.widthType = goodsParamExtArray + + } + + return formatedFilterOptions + } + + + // api 得到所有的产品请求 + goodsSearch({ + curr_page = this.state.curr_page, + page_count = this.state.page_count, + shop_name = this.state.shop_name, + shop_id = this.state.shop_id, + config_id = this.state.config_id, + shop_class_id = this.state.shop_class_id, + order = this.state.order, + goods_class_id = this.state.goods_class_id, + goodsSpec = this.state.goodsSpec, + goodsParam = this.state.goodsParam, + goodsParamExt = this.state.goodsParamExt }) { + Taro.request({ + url: URL.GoodsSearch, + method: 'POST', + dataType: 'json', + data: { + goods: JSON.stringify({ + curr_page: curr_page, + page_count: page_count, + shop_name: shop_name, + shop_id: shop_id, + config_id: config_id, + shop_class_id: shop_class_id, + order: order, + goods_class_id: goods_class_id, + }), + goodsRegion: JSON.stringify({}), + goodsSpec: JSON.stringify(goodsSpec), + goodsParam: JSON.stringify(goodsParam), + goodsParamExt: JSON.stringify(goodsParamExt), + }, + header: { + 'content-type': 'application/x-www-form-urlencoded', + 'X-Requested-With': 'XMLHttpRequest' + } + }) + .then(res => { + console.log('searchGood', res) + Taro.hideLoading() + this.setState({ shopItem: res.data.goods, total: res.data.goodsCount, filterCondition: order }, () => { + + }) + + }) + } + + // api 得到店铺详情请求 + getShopDescription({ shopID = 808 }) { + Taro.request({ + url: URL.ShopDescription, + method: 'POST', + dataType: 'json', + data: { + shopID: shopID, + }, + header: { + 'content-type': 'application/x-www-form-urlencoded', + } + }) + .then(res => { + Taro.hideLoading() + + 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) + }) + + } + ) + } + // api 获取店铺内的店铺分类请求 GetShopCategoryList + getShopInnerCate({ id = 808 }) { + Taro.request({ + url: URL.GetShopCategoryList, + method: 'POST', + dataType: 'json', + data: { + id: id, + }, + header: { + 'content-type': 'application/x-www-form-urlencoded', + 'X-Requested-With': 'XMLHttpRequest' + } + }) + .then(res => { + if (res.statusCode === 200) { + Taro.hideLoading() + + const originalData = res.data.data + const sortedData = [] + for (let item in originalData) { + let each = originalData[item] + each['id'] = item + sortedData.push(each) + } + // console.log('sorteddata', sortedData) + this.setState({ shopAllInnerCate: sortedData }) + + } else { + console.log('获取店铺内部分类失败') + } + + + } + ) + } + + + + + // 产品排序 + accendingDescending(value) { + Taro.showLoading({ title: '加载中' }) + 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) { + + 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() { + this.setState({ isShowFilter: !this.state.isShowFilter }) + } + // 选择侧边筛选的标签 + selectTag(name) { + const id = name.name + Taro.showLoading({ title: '加载中' }) + // 处理分类筛选项 + const newMainType = this.state.mainType.map((item) => { + if (item.id === id) { + item.checked = !item.checked + setTimeout(() => { + this.setState({ goods_class_id: id, checkedFilterIdList: this.state.checkedFilterIdList.concat([item]) }, () => { + this.getSearchParams({ goods_class_id: this.state.goods_class_id }) + this.goodsSearch({ goods_class_id: this.state.goods_class_id }) + }) + }, 1000); + } + return item + }) + // 处理商品类型筛选项 + const newGoodType = this.state.goodType.map((item) => { + if (item.id === id) { + item.checked = !item.checked + + setTimeout(() => { + this.setState({ goods_type: id, checkedFilterIdList: this.state.checkedFilterIdList.concat([item]) }, () => { + this.getSearchParams({ goods_type: this.state.goods_type }) + this.goodsSearch({ goods_type: this.state.goods_type }) + }) + + }, 1000); + } + return item + }) + // 处理其他筛选项 + const newOtherType = this.state.otherType.map(item => { + const value = Object.values(item)[0] + for (let each in value) { + if (value[each].name === id) { + value[each].checked = !value[each].checked + + setTimeout(() => { + + this.setState({ checkedFilterIdList: this.state.checkedFilterIdList.concat(value[each]), goodsParam: [{ param_id: value[each].name.id, param_value: value[each].name }] }, () => { + this.getSearchParams({ goodsParam: this.state.goodsParam }) + this.goodsSearch({ goodsParam: this.state.goodsParam }) + }) + }, 1000); + } + } + return item + }) + // 处理宽度筛选项 + const newWidthType = this.state.widthType.map((item) => { + if (item.name === id) { + item.checked = !item.checked + setTimeout(() => { + this.setState({ checkedFilterIdList: this.state.checkedFilterIdList.concat(item), goodsParamExt: [{ param_id: item.id, param_ext: [item.value] }] }, () => { + this.getSearchParams({ goodsParamExt: this.state.goodsParamExt }) + this.goodsSearch({ goodsParamExt: this.state.goodsParamExt }) + }) + }, 1000); + } + return item + }) + this.setState({ mainType: newMainType, goodType: newGoodType, widthType: newWidthType, otherType: newOtherType }, () => { + // console.log(this.state.mainType) + }) + } + + handleOnPageChange(value) { + Taro.showLoading({ title: '加载中' }) + this.goodsSearch({ curr_page: value.current, order: this.state.filterCondition }) + } + showHomePage() { + this.setState({ showShopHomePage: true }) + } + showDescriptionPage() { + this.setState({ showShopHomePage: false }) + } + isShowShopAllCate() { + this.setState({ isShowShopAllCate: !this.state.isShowShopAllCate, isBlurWindow: true }) + + } + handleShopInnerCate(id) { + + Taro.showLoading({ title: '加载中' }) + this.setState({ + isShowShopAllCate: false, isBlurWindow: false + }) + this.goodsSearch({ shop_class_id: id, shop_id: this.$router.params.id }) + + } + // 确认筛选 + submitFilter() { + this.setState({ isShowFilter: false }) + } + + //重置按键筛选 + resetFilterList() { + + Taro.showLoading({ title: '加载中' }) + this.setState({ + checkedFilterIdList: [], curr_page: 1, + page_count: 10, + shop_name: false, + shop_id: 1305, + config_id: 4, + shop_class_id: '', + order: '', + currPage: 1, + goods_class_id: '', + goodsSpec: [], + goodsParam: [], + goodsParamExt: [], + }, () => { + this.getSearchParams({}) + this.goodsSearch({}) + }) + + + } + + // 关闭背景window + closeBgWindow() { + this.setState({ + isShowShopAllCate: false, isBlurWindow: false + }) + } + + componentWillMount() { + + } + componentDidMount() { + + Taro.showLoading({ title: '加载中' }) + console.log('this.$router.params.id', this.$router.params.id) + //页面加载之后 得到指定店铺的商品 和 筛选标签 + this.goodsSearch({ shop_id: this.$router.params.id }) // 加载店铺商品 + this.getSearchParams({})// 加载筛选项 + this.getShopDescription({ shopID: this.$router.params.id }) // 加载店铺说明 + // this.getSearchBarkeyWords() + this.getShopInnerCate({ id: this.$router.params.id }) + } + + componentDidShow() { } + + componentDidHide() { } + + // 底部加载 + onReachBottom() { + Taro.showLoading({ + title: '加载中' + }) + + currentPage += 1 + this.setState({ isAddToList: true }, () => { + this.goodsSearch({ curr_Page: currentPage }) + }) + + + } + + render() { + + const ShopItemElementsArray = this.state.shopItem.length ? this.state.shopItem.map((item, index) => { + return + + + }) : null + + const filterElementsArray = this.state.filterBar.map((item, index) => { + let isTure = this.state.filterOptions[item] + + return + + {this.state.filterBarKeys[item]} + + {index !== 0 && index !== 5 && (isTure ? : )} + + }) + // 侧边已选项 + const checkedFilterElementsArray = this.state.checkedFilterIdList.map((item, index) => { + return {item.name} + }) + + + + // 侧边筛选的分类项 + const goodsClassElementsArray = this.state.mainType.map((item, index) => { + return {item.name} + }) + // 侧边筛选的商品类型项 + const goodsTypeElementsArray = this.state.goodType.map((item, index) => { + return {item.name} + }) + + // 侧边筛选的其他项 + const goodsParamElementsArray = this.state.otherType.map((item, index) => { + let titleKey = Object.keys(item)[0] + let values = item[titleKey] + return {titleKey} + {values.map((subItem, subIndex) => { + let name = subItem.name + let isCheck = subItem.checked + return + {name} + + })} + + }) + + // 侧边筛选宽度选项 + const widthnessElementsArray = this.state.widthType.map((item, index) => { + return {item.name} + }) + // 店铺页面/店铺主页 + const shopHomepageElement = + + {filterElementsArray} + + + 筛选 + + + + + + + {/* 侧边筛选 */} + + + {this.state.checkedFilterIdList.length ? 已选择 : null} + {checkedFilterElementsArray} + {this.state.mainType.length ? 分类 : null} + {goodsClassElementsArray} + {this.state.goodType.length ? 商品类型 : null} + {goodsTypeElementsArray} + {goodsParamElementsArray} + {this.state.widthType.length ? 宽度 : null} + {widthnessElementsArray} + + + + + + + + + + + {/* 店铺的商品列表 */} + + {ShopItemElementsArray} + + {/* + + + + */} + + // 店铺详情 + const shopDescriptionElement = + + + + + {this.state.shopName} + + + {this.state.shopAddress} + + + 联系人:{this.state.contactName} + 联系电话：{this.state.contactNumber} + + + + + + 店铺简介 + + + 店铺介绍： + {this.state.shopDescription} + + + + + + + + + + + const shopAllCateElementArray = this.state.shopAllInnerCate.map((item, index) => { + return {item.n} + }) + return ( + + + + + + {this.state.shopName} + + + + + + 店铺全部分类 + + + + + {shopAllCateElementArray} + + + 首页 + + + + + 店铺说明 + + + + + {/* 显示店铺首页或者店铺详情 */} + {this.state.showShopHomePage ? shopHomepageElement : shopDescriptionElement} + + + + + + + ) + } +} + +export default Shop