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

顶部按键 下拉加载功能

Browse Source
This commit is contained in:
郑茂强 2019-01-14 17:04:08 +08:00
parent f4936692f0
commit f0adffacc5
35 changed files with 1549 additions and 620 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app.js
View File

@ -42,7 +42,8 @@ class App extends Component {
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black',
enablePullDownRefresh:true
// enablePullDownRefresh:true
onReachBottomDistance: 0
}
,

16
src/app.scss
View File

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

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

@ -32,7 +32,6 @@ class bottomNav extends Component {
})
let path = this.state.otherData[value].url
console.log('path',path)
Taro.navigateTo({
url: path,
})

4
src/component/copyrightComponent/copyrightComponent.js
View File

@ -20,10 +20,6 @@ class CopyrightComponent extends Component {
<View className='title'>
Copyright &copy; 晨丰全屋定制商城 闽ICP备16007300号-2
</View>
</View>
<View className='gap'>
</View>
</View>
)

5
src/component/copyrightComponent/copyrightComponent.scss
View File

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

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

@ -198,6 +198,7 @@ class recommondShop extends Component {
<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
// 优惠卷和咨询元素
// const voucherModalElement = <AtModal className='voucher-modal' isOpened={this.state.isOpenVoucher}>
// <AtModalHeader>优惠卷须知：</AtModalHeader>
@ -277,13 +278,13 @@ class recommondShop extends Component {
<View className='button-container' style='margin-right:5px'>
{voucherLeft ? <View className='button' onClick={this.isOpenVoucher.bind(this)} >
<Button size='mini' className='button-blue'>
<Button size='mini' className='button-blue-mini'>
优惠卷</Button>
</View> : <View className='button' >
<Button disabled={true} size='mini' className='button-blue'>优惠卷</Button>
</View> : <View className='button blur' >
<Button size='mini' className='button-blue-mini'>优惠卷</Button>
</View>}
<View className='button' onClick={this.isOpenConsult.bind(this)} >
<Button size='mini' className='button-blue'>
<View className='button contult-button' onClick={this.isOpenConsult.bind(this)} >
<Button size='mini' className='button-blue-mini'>
询价</Button>
</View>

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

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

40
src/component/filteredShopComponent/voucherPosterComponent/voucherPosterComponent.js
View File

@ -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 (
<View className='voucherEventPopUpComponent'>
{/* <!-- The Modal --> */}
<View className='modal myModal' style={this.props.isVoucherPoster ? 'display:block' : 'display:none'}>
<View className='modal-content' >
<View className=' absolute container' style={this.state.voucherPosterImage}>
<View className='modal-content' >
<View className=' absolute container' style={this.state.voucherPosterImage} >
<View className='close-icon ' onClick={this.passDataToParent.bind(this)}>
<AtIcon value='close-circle' size='30' color='#3F536E'></AtIcon>
</View>
<View className='voucher-left '>
当前优惠卷<Text class='left-amount'>{this.props.voucherLeft}</Text>张
</View>
<View className='input-name ' >
<View className='title'> <Text>联系人：</Text></View>
<Input class='input-info' type='text' value={this.state.voucherName} onChange={this.handleNameChange.bind(this)} />
<Input class='input-info' type='text' value={this.state.voucherName} onInput={this.handleNameChange.bind(this)} />
</View>
<View className='input-number ' >
<View className='title'> <Text>联系电话：</Text></View>
<Input class='input-info' type='text' value={this.state.voucherPhone} onChange={this.handleNumberChange.bind(this)} />
<Input class='input-info' type='text' value={this.state.voucherPhone} onInput={this.handleNumberChange.bind(this)} />
</View>
<View className='tips'>
{this.props.voucherResponseMsg}
</View>
{this.props.voucherResponseMsg}
</View>
<View className='button ' >
<Button size='default' className='button-orange' onClick={this.onClickUploadGoods.bind(this)}>预约领取</Button>
<Button size='default' className='button-orange' onClick={this.voucherModalConfirm.bind(this)}>预约领取</Button>
</View>
<View className='declare '>

10
src/component/filteredShopComponent/voucherPosterComponent/voucherPosterComponent.scss
View File

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

56
src/component/scrollToTopComponent/scrollToTopComponent.js Normal file
View File

@ -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 (
<View className='scrollToTopComponent' onClick={this.scrollToTop.bind(this)}>
<View className='box'>
<AtIcon value='chevron-up' size='20' color='#3F536E'></AtIcon>
<View>顶部</View>
</View>
</View>
)
}
}
export default ScrollToTopComponent

18
src/component/scrollToTopComponent/scrollToTopComponent.scss Normal file
View File

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

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

@ -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 === '在用' ? <View className='button' onClick={this.grabOrder.bind(this, item.sd_id)}>
<Button size='mini' className='button-orange'>抢单</Button>
</View> : <View className='button' >
<Button size='mini' disabled={true} className='button-orange'> 已抢单</Button>
<Button size='mini' className='button-orange blur'> 已抢单</Button>
</View>
}
</View>
@ -332,16 +354,7 @@ class AllDemanding extends Component {
<View className='demanding-box'>
{allDemandingElementArray}
</View>
<View className='pagination-box'>
<AtPagination
total={this.state.totalDemandings}
pageSize={10}
current={this.state.currentPage}
onPageChange={this.state.paginationNav.bind(this)}
>
</AtPagination>
</View>
<CopyrightComponent></CopyrightComponent>
</View>
)

2
src/pages/allDemanding/allDemanding.scss
View File

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

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

@ -6,6 +6,7 @@ import CopyrightComponent from '../../component/copyrightComponent/copyrightComp
import URL from '../../serviceAPI.config'
import './goods.scss'
class Goods extends Component {
config = {

3
src/pages/goodsPublish/goodsPublish.js
View File

@ -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 {
</View>
<copyrightComponent></copyrightComponent>
<CopyrightComponent></CopyrightComponent>
</View>
)

2
src/pages/goodsPublish/goodsPublish.scss
View File

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

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

@ -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 {
<AtModalAction> <Button onClick={this.handleGrabModalCancel.bind(this)}>取消</Button> <Button className='orange' onClick={this.handleGrabConfirm.bind(this)}>确定</Button> </AtModalAction>
</AtModal>
const demandingElemensArray = this.state.demanding.length ? this.state.demanding.map((item, index) => {
return <SwiperItem key={index} >
<View className='demanding-item' >
@ -504,7 +512,7 @@ class Home extends Component {
<SwiperItem onClick={this.goToMyNeedsPublish.bind(this)}>
<Image className='banner-img' src={URL.Base + 'Public/images/xgt.png'} />
</SwiperItem>
</Swiper>
</View>
@ -555,25 +563,22 @@ class Home extends Component {
<View className='shop-box'>
{shopCollectionElementsArray}
<AtLoadMore
onClick={this.handleLoadMore.bind(this)}
status={this.state.isMore}
loadingText='加载中'
noMoreText='没有更多了'
/>
</View>
{this.state.isShowTopNav ? <ScrollToTopComponent ></ScrollToTopComponent> : null}
<CopyrightComponent></CopyrightComponent>
<View className='gap'>
</View>
</View>
<View className='bottom-nav-box'>
<BottomNav otherData={this.state.otherData} />
</View>
</View>
)
}

2
src/pages/myDemandSupplyEdit/myDemandSupplyEdit.scss
View File

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

621
src/pages/myGoodList/myGoodList.js
View File

@ -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 <View key={index} className='good-container'>
<View className='good-container-a'>
<Radio className='radio' value={item.goods_id} checked={item.checked} onClick={this.handleCheckChange.bind(this, item.goods_id)} ></Radio>
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 <View key={index} className='good-container'>
<View className='good-container-a'>
<Radio className='radio' value={item.goods_id} checked={item.checked} onClick={this.handleCheckChange.bind(this, item.goods_id)} ></Radio>
<View className='img-box' onClick={this.goToGoodspage.bind(this, item.goods_id)}>
<Image mode='aspectFit' className='img' style='height:50px;width:50px' src={URL.Base + item.goods_url} />
</View>
@ -549,183 +577,174 @@ class MyGoodList extends Component {
<View className='price-box'>￥{item.goods_price}</View>
<View className='quantity-box'>{item.sales_volume}</View>
</View>
<View className='button-box1' onClick={this.goToGoodEditPage.bind(this, item.goods_id)}>
<Button className='button-orange' size='mini'>
编辑商品</Button>
</View>
</View>
})
// 筛选项目排序element
const filterElementsArray = this.state.filterBar.map((item, index) => {
let isTure = this.state.filterOptions[item]
return <View key={index} onClick={this.accendingDescending.bind(this, index)} className={index === this.state.selectedFilterValue ? 'filter-title actived' : 'filter-title'}>
<Text className='text-a'>
{this.state.filterBarKeys[item]}
</Text>
{isTure ? <AtIcon value='chevron-down' size='10' color='#F00'></AtIcon> : <AtIcon value='chevron-up' size='10' color='#F00'></AtIcon>}
<View className='button-box1' onClick={this.goToGoodEditPage.bind(this, item.goods_id)}>
<Button className='button-orange' size='mini'>
编辑商品</Button>
</View>
})
// 删除提示模态弹窗element
const modalMessageDeleteElement = <AtModal isOpened={this.state.isOpenDeleteModal}>
<AtModalHeader>提示</AtModalHeader>
<AtModalContent>
确定要删除已选商品？
</View>
})
// 筛选项目排序element
const filterElementsArray = this.state.filterBar.map((item, index) => {
let isTure = this.state.filterOptions[item]
return <View key={index} onClick={this.accendingDescending.bind(this, index)} className={index === this.state.selectedFilterValue ? 'filter-title actived' : 'filter-title'}>
<Text className='text-a'>
{this.state.filterBarKeys[item]}
</Text>
{isTure ? <AtIcon value='chevron-down' size='10' color='#F00'></AtIcon> : <AtIcon value='chevron-up' size='10' color='#F00'></AtIcon>}
</View>
})
// 删除提示模态弹窗element
const modalMessageDeleteElement = <AtModal isOpened={this.state.isOpenDeleteModal}>
<AtModalHeader>提示</AtModalHeader>
<AtModalContent>
确定要删除已选商品？
</AtModalContent>
<AtModalAction> <Button onClick={this.deleteModalClose.bind(this)}>取消</Button> <Button className='orange' onClick={this.DeleteConfirm.bind(this)}>确定</Button> </AtModalAction>
</AtModal>
// 下架提示模态弹窗element
const modalMessageOffStockElement = <AtModal isOpened={this.state.isOpenOffStockModal}>
<AtModalHeader>提示</AtModalHeader>
<AtModalContent>
确定要下架已选商品？
<AtModalAction> <Button onClick={this.deleteModalClose.bind(this)}>取消</Button> <Button className='orange' onClick={this.DeleteConfirm.bind(this)}>确定</Button> </AtModalAction>
</AtModal>
// 下架提示模态弹窗element
const modalMessageOffStockElement = <AtModal isOpened={this.state.isOpenOffStockModal}>
<AtModalHeader>提示</AtModalHeader>
<AtModalContent>
确定要下架已选商品？
</AtModalContent>
<AtModalAction> <Button onClick={this.offStockModalClose.bind(this)}>取消</Button> <Button className='orange' onClick={this.OffStockConfirm.bind(this)}>确定</Button> </AtModalAction>
</AtModal>
<AtModalAction> <Button onClick={this.offStockModalClose.bind(this)}>取消</Button> <Button className='orange' onClick={this.OffStockConfirm.bind(this)}>确定</Button> </AtModalAction>
</AtModal>
return (
<View className='MyGoodList'>
{/* 删除模态提示框 */}
{modalMessageDeleteElement}
{/* 下架模态框提示 */}
{modalMessageOffStockElement}
return (
<View className='MyGoodList'>
{/* 删除模态提示框 */}
{modalMessageDeleteElement}
{/* 下架模态框提示 */}
{modalMessageOffStockElement}
<View className='border-box'>
<AtInput
name='value'
title='宝贝名称：'
placeholder='宝贝名称'
type='text'
value={this.state.productName}
onChange={this.productNameChange.bind(this)}
border={false}
/>
</View>
<View className='border-box'>
<AtInput
name='value'
title='最低价：'
className='input'
type='number'
value={this.state.lowestPrice}
onChange={this.lowestPriceChange.bind(this)}
border={false}
/>
<AtInput
name='value'
title='最高价：'
className='input'
type='number'
value={this.state.heightestPrice}
border={false}
onChange={this.heightestPriceChange.bind(this)}
/>
</View>
<View className='border-box'>
<AtInput
name='value'
title='最低销量：'
className='input'
type='number'
value={this.state.minimumSold}
border={false}
onChange={this.minimumSoldChange.bind(this)}
/>
<AtInput
name='value'
title='最高销量：'
className='input'
type='number'
value={this.state.maximumSold}
border={false}
onChange={this.maximumSoldChange.bind(this)}
/>
</View>
<View className='border-box'>
<AtInput
border={false}
name='value'
title='商品编码：'
type='number'
value={this.state.productId}
onChange={this.productIdChange.bind(this)}
border={false}
/>
</View>
<View className='page-section'>
<Picker mode='selector' rangeKey='name' range={this.state.productCate} onChange={this.productCateChange.bind(this)}>
<View className='picker'>
<View className='title-box'>
<Text className='title'>宝贝类目:</Text>
<Text className='selected'>{this.state.productCateSelected.name}</Text>
</View>
</View>
</Picker>
</View>
<View className='button-box'>
<View className='button' onClick={this.searchButtonHandler.bind(this)}>
<Button size='mini' className='button-orange'>
<AtIcon value='search' size='12' color='white'></AtIcon>
搜索</Button>
</View>
<View className='button' onClick={this.emptyButtonHanlder.bind(this)}>
<Button className='button-green' size='mini'>
清空条件</Button>
</View>
</View>
<View className='text'>
<Text>出售中的宝贝{this.state.myGoodListTotal}条记录</Text>
</View>
<View className='filterbar-container'>
<View className='filter-bar'>
{filterElementsArray}
</View>
<View className='sub-filter'>
<Radio className='radio' checked={this.state.isCheckAll} onClick={this.checkAllHandler.bind(this)}>全选</Radio>
<View className='button' onClick={this.deleteGoodsHandler.bind(this)}>
<Button size='mini' className='button-orange'>
删除</Button>
</View>
<View className='button' onClick={this.offStockGoodHandler.bind(this)}>
<Button size='mini' className='button-green'>
下架</Button>
</View>
</View>
</View>
<View className='mygoodlist-container'>
{this.state.myGoodList.length ? goodListElementArray : <View className='nomore' >
没有更多了....
</View >}
</View>
<View className='pagination-box'>
<AtPagination
total={this.state.myGoodListTotal}
pageSize={5}
current={this.state.currentPage}
onPageChange={this.state.paginationNav.bind(this)}
>
</AtPagination>
</View>
<CopyrightComponent></CopyrightComponent>
<View className='border-box'>
<AtInput
name='value'
title='宝贝名称：'
placeholder='宝贝名称'
type='text'
value={this.state.productName}
onChange={this.productNameChange.bind(this)}
border={false}
/>
</View>
)
}
<View className='border-box'>
<AtInput
name='value'
title='最低价：'
className='input'
type='number'
value={this.state.lowestPrice}
onChange={this.lowestPriceChange.bind(this)}
border={false}
/>
<AtInput
name='value'
title='最高价：'
className='input'
type='number'
value={this.state.heightestPrice}
border={false}
onChange={this.heightestPriceChange.bind(this)}
/>
</View>
<View className='border-box'>
<AtInput
name='value'
title='最低销量：'
className='input'
type='number'
value={this.state.minimumSold}
border={false}
onChange={this.minimumSoldChange.bind(this)}
/>
<AtInput
name='value'
title='最高销量：'
className='input'
type='number'
value={this.state.maximumSold}
border={false}
onChange={this.maximumSoldChange.bind(this)}
/>
</View>
<View className='border-box'>
<AtInput
border={false}
name='value'
title='商品编码：'
type='number'
value={this.state.productId}
onChange={this.productIdChange.bind(this)}
border={false}
/>
</View>
<View className='page-section'>
<Picker mode='selector' rangeKey='name' range={this.state.productCate} onChange={this.productCateChange.bind(this)}>
<View className='picker'>
<View className='title-box'>
<Text className='title'>宝贝类目:</Text>
<Text className='selected'>{this.state.productCateSelected.name}</Text>
</View>
</View>
</Picker>
</View>
<View className='button-box'>
<View className='button' onClick={this.searchButtonHandler.bind(this)}>
<Button size='mini' className='button-orange'>
<AtIcon value='search' size='12' color='white'></AtIcon>
搜索</Button>
</View>
<View className='button' onClick={this.goToGoodsPublishPage.bind(this)}>
<Button className='button-green' size='mini'>
<AtIcon value='add' size='12' color='white'></AtIcon>
新增</Button>
</View>
<View className='button' onClick={this.emptyButtonHanlder.bind(this)}>
<Button className='button-dark-red' size='mini'>
<AtIcon value='trash' size='12' color='white'></AtIcon>
清空</Button>
</View>
</View>
<View className='text'>
<Text>出售中的宝贝{this.state.myGoodListTotal}条记录</Text>
</View>
<View className='filterbar-container'>
<View className='filter-bar'>
{filterElementsArray}
</View>
<View className='sub-filter'>
<Radio className='radio' checked={this.state.isCheckAll} onClick={this.checkAllHandler.bind(this)}>全选</Radio>
<View className='button' onClick={this.deleteGoodsHandler.bind(this)}>
<Button size='mini' className='button-dark-red'>
删除</Button>
</View>
<View className='button' onClick={this.offStockGoodHandler.bind(this)}>
<Button size='mini' className='button-blue'>
下架</Button>
</View>
</View>
</View>
<View className='mygoodlist-container'>
{goodListElementArray}
</View >
<CopyrightComponent></CopyrightComponent>
</View>
)
}
}
export default MyGoodList
export default MyGoodList

4
src/pages/myGoodList/myGoodList.scss
View File

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

81
src/pages/myGoodsEdit/myGoodsEdit.js
View File

@ -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 {
<View className='input-box'>
<Text className='require'>*</Text>
<AtInput
name='productName'
title='商品名称：'
type='text'
value={this.state.productName}
border={false}
onChange={this.productNameChange.bind(this)}
name='productName'
title='商品名称：'
type='text'
value={this.state.productName}
border={false}
onChange={this.productNameChange.bind(this)}
/>
</View>
<View className='input-box'>
<Text className='require'>*</Text>
<AtInput
name='productPrice'
title='商品价格：'
type='number'
placeholder='￥'
value={this.state.productPrice}
border={false}
onChange={this.productPriceChange.bind(this)}
name='productPrice'
title='商品价格：'
type='number'
placeholder='￥'
value={this.state.productPrice}
border={false}
onChange={this.productPriceChange.bind(this)}
/>
</View>
<View className='input-box'>
<Text className='require'>*</Text>
<AtInput
name='productUnit'
title='商品单位：'
type='number'
value={this.state.productUnit}
border={false}
onChange={this.productUnitChange.bind(this)}
name='productUnit'
title='商品单位：'
type='number'
value={this.state.productUnit}
border={false}
onChange={this.productUnitChange.bind(this)}
/>
</View>
{/* 图片上传 */}
@ -376,18 +377,19 @@ class MyGoodsEdit extends Component {
</View>
<View className='img-container'>
<AtImagePicker
multiple
files={this.state.pickerImageUrl}
onChange={this.onChangeImg.bind(this)}
onFail={this.onFail.bind(this)}
onImageClick={this.onImageClick.bind(this)}
multiple
files={this.state.pickerImageUrl}
onChange={this.onChangeImg.bind(this)}
onFail={this.onFail.bind(this)}
onImageClick={this.onImageClick.bind(this)}
/>
</View>
</View>
{/* 店铺分类 */}
<ShopTypeInteractionComp url={URL.GetShopCategoryList}
selectedValue={this.state.shopTypeSelected}
onPassDataToChild={this.getDataFromShopChild.bind(this)}></ShopTypeInteractionComp>
<ShopTypeInteractionComp url={URL.GetShopCategoryList}
selectedValue={this.state.shopTypeSelected}
onPassDataToChild={this.getDataFromShopChild.bind(this)}
></ShopTypeInteractionComp>
{/* 店铺分类结束 */}
<View className='description-box'>
@ -397,27 +399,28 @@ class MyGoodsEdit extends Component {
</View>
<AtTextarea
value={this.state.productDescript}
onChange={this.productDescriptChange.bind(this)}
maxlength='200'
placeholder='你的产品简介'
value={this.state.productDescript}
onChange={this.productDescriptChange.bind(this)}
maxlength='200'
placeholder='你的产品简介'
/>
</View>
</View>
<View className='button-box' >
<View className='button' >
<Button size='mini' className='button-orange' onClick={this.onClickUploadGoods.bind(this)}>保存</Button>
<Button size='mini' className='button-orange' onClick={this.onClickUploadGoods.bind(this)}>保存</Button>
</View>
{/* <View className='button'>
<Button className='button-a' size='mini' >发布并新增</Button>
</View> */}
<View className='button' onClick={this.goToMyGoodListPage.bind(this)}>
<Button className='button-green' size='mini'>商品列表</Button>
<Button className='button-green' size='mini'>商品列表</Button>
</View>
</View>
<copyrightComponent></copyrightComponent>
<CopyrightComponent></CopyrightComponent>
</View>
)

2
src/pages/myGoodsEdit/myGoodsEdit.scss
View File

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

87
src/pages/myNeeds/myNeeds.js
View File

@ -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 {
没有更多了....
</View >}
<View className='pagination-box'>
<AtPagination
total={this.state.totalNeeds}
pageSize={10}
current={this.state.currentPage}
onPageChange={this.state.paginationNav.bind(this)}
>
</AtPagination>
</View>
<CopyrightComponent name='Wallace'></CopyrightComponent>
<CopyrightComponent ></CopyrightComponent>
</View>
)

6
src/pages/myNeeds/myNeeds.scss
View File

@ -88,9 +88,9 @@ $themeColor:#FF7142;
.button{
flex:1;
text-align: center;
}
.button-orange, .button-dark-red,.button-green{
font-size:28rpx;
}
}

2
src/pages/myNeedsEdit/myNeedsEdit.scss
View File

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

2
src/pages/myNeedsPublish/myNeedsPublish.scss
View File

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

20
src/pages/myNeedsView/myNeedsView.scss
View File

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

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

@ -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 {
</View>
<View className='info-button-box'>
<View className='button' onClick={this.goSupplyDemandView.bind(this, item.sd_id)}>
<Button size='mini' className='button-orange button-no-margin'>查看</Button>
<Button size='mini' className='button-orange button-no-margin'>查看</Button>
</View>
<View className='button' onClick={this.goToMyDSEditPage.bind(this, item.sd_id)} >
<Button size='mini' className='button-orange button-no-margin'>编辑</Button>
<Button size='mini' className='button-orange button-no-margin'>编辑</Button>
</View>
<View className='button' onClick={this.handleOnDelete.bind(this, item.sd_id, item.sd_title)}>
<Button size='mini' className='button-dark-red button-no-margin'>删除</Button>
<Button size='mini' className='button-dark-red button-no-margin'>删除</Button>
</View>
</View>
@ -393,17 +424,17 @@ class MySupplyDemand extends Component {
<View className='button-box'>
<View className='button' onClick={this.onSearchButtonHandler.bind(this)}>
<Button size='mini' className='button-orange' >
<Button size='mini' className='button-orange' >
<AtIcon value='search' size='12' color='white'></AtIcon>
搜索</Button>
</View>
<View className='button' onClick={this.addDemandSupply.bind(this)}>
<Button className='button-a' size='mini' className='button-green'>
<Button className='button-a' size='mini' className='button-green'>
<AtIcon value='add' size='12' color='white'></AtIcon>
新增</Button>
</View>
<View className='button' onClick={this.emptyFilter.bind(this)}>
<Button className='button-b' size='mini' className='button-dark-red'>
<Button className='button-b' size='mini' className='button-dark-red'>
<AtIcon value='trash' size='12' color='white'></AtIcon>
清空</Button>
</View>
@ -413,16 +444,7 @@ class MySupplyDemand extends Component {
<View className='info-box'>
{demandSupplyElementArray}
</View>
<View className='pagination-box'>
<AtPagination
total={this.state.totalDemandSupply}
pageSize={10}
current={this.state.currentPage}
onPageChange={this.state.paginationNav.bind(this)}
>
</AtPagination>
</View>

18
src/pages/mySupplyDemand/mySupplyDemand.scss
View File

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

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

@ -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 <View key={index} className='shop-item' >
<ShopItem item={item}></ShopItem>
@ -558,9 +581,9 @@ class Shop extends Component {
// 侧边已选项
const checkedFilterElementsArray = this.state.checkedFilterIdList.map((item, index) => {
return <AtTag style='margin-left:5px' key={index}
name={item.id}
type='primary'
active={item.checked}
name={item.id}
type='primary'
active={item.checked}
//onClick={this.selectTag.bind(this)}
>{item.name}</AtTag>
})
@ -570,19 +593,19 @@ class Shop extends Component {
// 侧边筛选的分类项
const goodsClassElementsArray = this.state.mainType.map((item, index) => {
return <AtTag style='margin-left:5px' key={index}
name={item.id}
type='primary'
active={item.checked}
onClick={this.selectTag.bind(this)}
name={item.id}
type='primary'
active={item.checked}
onClick={this.selectTag.bind(this)}
>{item.name}</AtTag>
})
// 侧边筛选的商品类型项
const goodsTypeElementsArray = this.state.goodType.map((item, index) => {
return <AtTag style='margin-left:5px' key={index}
name={item.id}
type='primary'
active={item.checked}
onClick={this.selectTag.bind(this)}
name={item.id}
type='primary'
active={item.checked}
onClick={this.selectTag.bind(this)}
>{item.name}</AtTag>
})
@ -596,10 +619,10 @@ class Shop extends Component {
let isCheck = subItem.checked
return <View className='button-box' key={subIndex}>
<AtTag style='margin-left:5px'
name={name}
type='primary'
active={isCheck}
onClick={this.selectTag.bind(this)}
name={name}
type='primary'
active={isCheck}
onClick={this.selectTag.bind(this)}
>{name}</AtTag>
</View>
})}
@ -609,10 +632,10 @@ class Shop extends Component {
// 侧边筛选宽度选项
const widthnessElementsArray = this.state.widthType.map((item, index) => {
return <AtTag style='margin-left:5px' key={index}
name={item.name}
type='primary'
active={item.checked}
onClick={this.selectTag.bind(this)}
name={item.name}
type='primary'
active={item.checked}
onClick={this.selectTag.bind(this)}
>{item.name}</AtTag>
})
// 店铺页面/店铺主页
@ -633,12 +656,12 @@ class Shop extends Component {
<View className='filter-box'>
{this.state.checkedFilterIdList.length ? <View className='title'>已选择</View> : null}
<View className='button-box'>{checkedFilterElementsArray}</View>
{this.state.mainType.length?<View className='title'>分类</View>:null}
{this.state.mainType.length ? <View className='title'>分类</View> : null}
<View className='button-box'>{goodsClassElementsArray}</View>
{this.state.goodType.length?<View className='title'>商品类型</View>:null}
{this.state.goodType.length ? <View className='title'>商品类型</View> : null}
<View className='button-box'>{goodsTypeElementsArray}</View>
{goodsParamElementsArray}
{this.state.widthType.length?<View className='title'>宽度</View>:null}
{this.state.widthType.length ? <View className='title'>宽度</View> : null}
<View className='button-box'>{widthnessElementsArray}</View>
<View className='confirm-button'>
@ -654,16 +677,7 @@ class Shop extends Component {
<View className='container'>
{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'>
@ -689,6 +703,7 @@ class Shop extends Component {
<View className='description'>
<Text className='title-sub'>店铺介绍：</Text>
<Text className='detail'>{this.state.shopDescription}</Text>
</View>
</View>
@ -704,7 +719,7 @@ class Shop extends Component {
})
return (
<View className='shop' >
<View onClick={this.state.closeBgWindow.bind(this)} className={this.state.isBlurWindow ? 'show-blur' : ''}></View>
<View className='banner-box'>
<Image src={URL.Base + 'Public/visual_editing/img/ksh_bg.jpg'} mode='scaleToFill' style='width: 100%;height:120px; ' />

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

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

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

@ -30,8 +30,6 @@ class SupplyDemand extends Component {
content: '',
pickerImageUrl: [], // 上传的图片
ImagesInfo: [],// 后台传回来的图片信息
}
}

2
src/pages/supplyDemandPublish/supplyDemandPublish.scss
View File

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

2
src/pages/supplyDemandView/supplyDemandView.scss
View File

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

785
src/todo list.txt
View File

@ -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 <View key={index} className='shop-item' >
<ShopItem item={item}></ShopItem>
</View>
}) : null
const filterElementsArray = this.state.filterBar.map((item, index) => {
let isTure = this.state.filterOptions[item]
return <View key={index} onClick={this.accendingDescending.bind(this, index)} className={index === this.state.selectedFilterValue ? 'filter-title actived' : 'filter-title'}>
<Text className='text'>
{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>)}
</View>
})
// 侧边已选项
const checkedFilterElementsArray = this.state.checkedFilterIdList.map((item, index) => {
return <AtTag style='margin-left:5px' key={index}
name={item.id}
type='primary'
active={item.checked}
//onClick={this.selectTag.bind(this)}
>{item.name}</AtTag>
})
// 侧边筛选的分类项
const goodsClassElementsArray = this.state.mainType.map((item, index) => {
return <AtTag style='margin-left:5px' key={index}
name={item.id}
type='primary'
active={item.checked}
onClick={this.selectTag.bind(this)}
>{item.name}</AtTag>
})
// 侧边筛选的商品类型项
const goodsTypeElementsArray = this.state.goodType.map((item, index) => {
return <AtTag style='margin-left:5px' key={index}
name={item.id}
type='primary'
active={item.checked}
onClick={this.selectTag.bind(this)}
>{item.name}</AtTag>
})
// 侧边筛选的其他项
const goodsParamElementsArray = this.state.otherType.map((item, index) => {
let titleKey = Object.keys(item)[0]
let values = item[titleKey]
return <View key={index}><View className='title' >{titleKey}</View>
{values.map((subItem, subIndex) => {
let name = subItem.name
let isCheck = subItem.checked
return <View className='button-box' key={subIndex}>
<AtTag style='margin-left:5px'
name={name}
type='primary'
active={isCheck}
onClick={this.selectTag.bind(this)}
>{name}</AtTag>
</View>
})}
</View>
})
// 侧边筛选宽度选项
const widthnessElementsArray = this.state.widthType.map((item, index) => {
return <AtTag style='margin-left:5px' key={index}
name={item.name}
type='primary'
active={item.checked}
onClick={this.selectTag.bind(this)}
>{item.name}</AtTag>
})
// 店铺页面/店铺主页
const shopHomepageElement = <View className='shop-home-page'>
<View className='filter-box'>
{filterElementsArray}
<View onClick={this.showAndHideFilter.bind(this)} className='filter-title' >
<Text className='text'>
筛选
</Text>
</View>
</View>
<View className={this.state.isShowFilter ? 'side-filter show' : 'side-filter'}>
<View className='left' onClick={this.showAndHideFilter.bind(this)}></View>
{/* 侧边筛选 */}
<View className='right'>
<View className='filter-box'>
{this.state.checkedFilterIdList.length ? <View className='title'>已选择</View> : null}
<View className='button-box'>{checkedFilterElementsArray}</View>
{this.state.mainType.length ? <View className='title'>分类</View> : null}
<View className='button-box'>{goodsClassElementsArray}</View>
{this.state.goodType.length ? <View className='title'>商品类型</View> : null}
<View className='button-box'>{goodsTypeElementsArray}</View>
{goodsParamElementsArray}
{this.state.widthType.length ? <View className='title'>宽度</View> : null}
<View className='button-box'>{widthnessElementsArray}</View>
<View className='confirm-button'>
<Button className='button' type='primary' size='mini' style='background-color:#FF7142' onClick={this.submitFilter.bind(this)} >确认</Button>
<Button className='button' type='primary' size='mini' style='background-color:#5cb85c' onClick={this.resetFilterList.bind(this)}>重置</Button>
<View className='gap'></View>
</View>
</View>
</View>
</View>
{/* 店铺的商品列表 */}
<View className='container'>
{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 src={URL.Base + 'Public/images/shop/bg_banner.png'} mode='scaleToFill' style='width: 100%;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>
const shopAllCateElementArray = this.state.shopAllInnerCate.map((item, index) => {
return <View key={index} className='item' onClick={this.handleShopInnerCate.bind(this, item.id)}> <Text>{item.n}</Text> </View>
})
return (
<View className='shop' >
<View onClick={this.state.closeBgWindow.bind(this)} className={this.state.isBlurWindow ? 'show-blur' : ''}></View>
<View className='banner-box'>
<Image src={URL.Base + 'Public/visual_editing/img/ksh_bg.jpg'} mode='scaleToFill' style='width: 100%;height:120px; ' />
<View className='shop-name'>{this.state.shopName}</View>
</View>
<View className='nav-box'>
<View className='nav'>
<View className='shop-cate' onClick={this.isShowShopAllCate.bind(this)}>
<Text className='text'>
店铺全部分类
</Text>
<AtIcon value='menu' size='10' color='white'></AtIcon>
</View>
<View className={this.state.isShowShopAllCate ? 'shopcate-selection show' : 'shopcate-selection'}>
{shopAllCateElementArray}</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: '更多' }] }} />
</View>
</View>
)
}
}
export default Shop