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

商品列表，商品发布，商品编辑，--完成

Browse Source
This commit is contained in:
郑茂强 2019-01-09 14:58:59 +08:00
parent 85e2a028ad
commit 79f3634eb5
9 changed files with 422 additions and 444 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/app.js
View File

@ -42,29 +42,25 @@ class App extends Component {
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
}
,
}
componentDidMount() { }
componentDidShow() { }
componentDidHide() { }
componentDidMount () {}
componentCatchError() { }
componentDidShow () {}
componentDidHide () {}
componentCatchError () {}
componentDidCatchError () {}
componentDidCatchError() { }
// 在 App 类中的 render() 函数没有实际作用
// 请勿修改此函数
render () {
render() {
return (
<Provider store={store}>
<Index />

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

@ -1,5 +1,5 @@
import Taro, { Component } from '@tarojs/taro'
import { View} from '@tarojs/components'
import { View } from '@tarojs/components'
import { AtTabBar } from 'taro-ui'
@ -10,32 +10,35 @@ class bottomNav extends Component {
config = {
navigationBarTitleText: 'bottomNav'
}
constructor(){
constructor() {
super(...arguments);
this.state={
current:0
this.state = {
current: 0,
otherData: [
{ name: '首页', url: '/pages/home/home' },
{ name: '商品发布', url: '/pages/goodsPublish/goodsPublish' },
{ name: '供求发布', url: '/pages/supplyDemandPublish/supplyDemandPublish' },
{ name: '我的供求', url: '/pages/mySupplyDemand/mySupplyDemand' },
{ name: '我的需求', url: '/pages/myNeeds/myNeeds' },
]
}
}
handleClick(value){
handleClick(value) {
this.setState({
current: value
})
const otherData = [
{ name: '首页', url: '/pages/home/home' },
{ name: '商品发布', url: '/pages/goodsPublish/goodsPublish' },
{ name: '供求发布', url: '/pages/supplyDemandPublish/supplyDemandPublish' },
{ name: '我的供求', url: '/pages/mySupplyDemand/mySupplyDemand' },
{ name: '我的需求', url: '/pages/myNeeds/myNeeds' },
]
let path=otherData[value].url
let path = this.state.otherData[value].url
console.log('path',path)
Taro.navigateTo({
url: path,
})
}
componentWillReceiveProps(nextProps) {
//console.log(this.props, nextProps)
@ -48,34 +51,27 @@ class bottomNav extends Component {
componentDidHide() { }
render() {
const otherData=[
{ name: '首页', url: 'pages/home/home' },
{ name: '商品发布', url: 'pages/goodsPublish/goodsPublish' },
{ name: '供求发布', url: 'pages/supplyDemandPublish/supplyDemandPublish' },
{ name: '我的供求', url: 'pages/mySupplyDemand/mySupplyDemand' },
{ name: '我的需求', url: 'pages/myNeeds/myNeeds' },
]
// const otherDataElementsArray = this.props.otherData? this.props.otherData.menu.map((item, index) => {
const otherDataElementsArray = otherData.map((item, index) => {
const otherDataElementsArray = this.state.otherData.map((item) => {
return { title: item.name, iconType: 'clock' }
})
return (
<View >
<AtTabBar className='bottom-nav'
fixed
fontSize='10'
iconSize='18'
selectedColor='#FF7142'
tabList={
fixed
fontSize='10'
iconSize='18'
selectedColor='#FF7142'
tabList={
otherDataElementsArray
}
onClick={this.handleClick.bind(this)}
current={this.state.current}
onClick={this.handleClick.bind(this)}
current={this.state.current}
/>
</View>
)
}
}
}
export default bottomNav

15
src/component/goodsTypeInteractionComp/goodsTypeInteractionComp.js
View File

@ -6,6 +6,7 @@ import { View, Text } from '@tarojs/components'
import { AtTabBar, Picker, AtButton } from 'taro-ui'
import './goodsTypeInteractionComp.scss'
import { throws } from 'assert';
class GoodsTypeInteractionComp extends Component {
@ -255,13 +256,9 @@ class GoodsTypeInteractionComp extends Component {
this.props.onPassDataToChild(industryTypeSelected)
}
goodTypeOnClick(){
console.log('clicked')
this.getProductCateList(this.props.url)
}
componentDidMount() {
this.getProductCateList(this.props.url)
}
// 当然父组件有新的props的 会从新渲染组件
@ -284,16 +281,18 @@ class GoodsTypeInteractionComp extends Component {
onColumnchange={this.bindMultiPickerCol.bind(this)}
value={this.state.multiIndex}
range={this.state.objectMultiArray}
onClick={this.goodTypeOnClick.bind(this)}
>
<View class='picker type'>
<View className='title-box'>
<Text className='require'>*</Text>
<Text className='title'>商品分类：</Text>
<Text className='first-col'>
{this.props.selectedValue.name}
</Text>
{this.state.objectMultiArray[0].length?<Text className='first-col'> {this.state.objectMultiArray[0][this.state.multiIndex[0]].name}</Text>:null}
{/* {this.state.objectMultiArray[0].length?<Text className='first-col'> {this.state.objectMultiArray[0][this.state.multiIndex[0]].name}</Text>:null}
{this.state.objectMultiArray[1].length?<Text className='second-col'>{this.state.objectMultiArray[1][this.state.multiIndex[1]].name}</Text>:null}
{this.state.objectMultiArray[2].length?<Text className='third-col'>{this.state.objectMultiArray[2][this.state.multiIndex[2]].name}</Text>:null}
{this.state.objectMultiArray[2].length?<Text className='third-col'>{this.state.objectMultiArray[2][this.state.multiIndex[2]].name}</Text>:null} */}
</View>
</View>

8
src/component/shopTypeInteractionComp/shopTypeInteractionComp.js
View File

@ -6,7 +6,6 @@ import { View, Text } from '@tarojs/components'
import { AtTabBar, Picker, AtButton } from 'taro-ui'
import './shopTypeInteractionComp.scss'
import { throws } from 'assert';
class ShopTypeInteractionComp extends Component {
@ -195,12 +194,10 @@ class ShopTypeInteractionComp extends Component {
passDataToParent(industryTypeSelected) {
this.props.onPassDataToChild(industryTypeSelected)
}
shopTypeOnClick(){
this.getShopTypeList(this.props.url)
}
componentDidMount() {
this.getShopTypeList(this.props.url)
}
// 当然父组件有新的props的 会从新渲染组件
@ -223,7 +220,6 @@ class ShopTypeInteractionComp extends Component {
onColumnchange={this.bindMulPickerColChge.bind(this)}
value={this.state.multiIndex}
range={this.state.objectMultiArray}
onClick={this.shopTypeOnClick.bind(this)}
>
<View class='picker type'>
<View className='title-box'>

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

@ -8,7 +8,6 @@ import URL from '../../serviceAPI.config'
import './goods.scss'
//GetShopItemDetail
class Goods extends Component {
config = {
@ -136,7 +135,7 @@ class Goods extends Component {
const mainTabList = [{ title: '宝贝详情' }, { title: '全部评价' }, { title: '猜你喜欢' }]
// const subTabList = [{ title: '全部' }, { title: '好评' }, { title: '差评' }, { title: '公开' }, { title: '匿名' }]
const itemPicsBannerElementArray = this.state.productImagesUrl.map((item, index) => {
return < SwiperItem key={index} >
return <SwiperItem key={index} >
<Image mode='aspectFit' src={URL.Base + item.file_path} style='max-width: 100%; height:100%;' />

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

@ -19,8 +19,7 @@ class GoodsPublish extends Component {
constructor() {
super(...arguments)
this.state = {
objectMultiArray: [
],
shopTypeSelected: { name: '选择店铺类型', id: '' },//已选的店铺分类
goodsTypeSelected: { name: '选择商品分类', id: '' },// 已选的商品分类
productName: '',
@ -35,31 +34,7 @@ class GoodsPublish extends Component {
}
//商品目录请求api GetShopCategoryList
getProductCateList() {
Taro.request({
url: URL.GetProductCategoryList,
method: 'POST',
dataType: 'json',
header: {
'content-type': 'application/x-www-form-urlencoded',
'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(res => {
if (res.data.err_msg === 'success') {
this.setState({ productCategoryList: res.data.data })
console.log('商品分类目录', res)
this.sortShopCateToState(res.data.data)
}
}
)
.catch(error => {
console.log('商品分类请求错误', error)
})
}
@ -158,38 +133,10 @@ class GoodsPublish extends Component {
})
}
// 整理后台传出来的店铺分类目录
sortShopCateToState(shopData) {
const firstColumn = []
const secondColumn = []
const thirdColumn = []
for (let outterItem of shopData) {
firstColumn.push({ id: outterItem.class_id, class_name: outterItem.class_name })
if (outterItem.children.length) {
for (let middleItem of outterItem.children) {
secondColumn.push({ id: middleItem.class_id, class_name: middleItem.class_name })
if (middleItem.children.length) {
for (let innerItem of middleItem.children) {
thirdColumn.push({ id: innerItem.class_id, class_name: innerItem.class_name })
}
}
}
}
}
//------- 把新指传给objectMultiArray之后就不可以用了 to be continue
this.setState({ objectMultiArray: [firstColumn, secondColumn, thirdColumn] }, () => {
console.log('new', this.state.objectMultiArray)
})
}
// 改变商品分类状态
onChangeProductType(e) {
this.setState({
selectorChecked: this.state.selector[e.detail.value]
})
}
productNameChange(event) {
this.setState({
productName: event
@ -315,7 +262,12 @@ class GoodsPublish extends Component {
<View className='goods-publish'>
<View className='goods-category'>
{/* 商品分类开始 */}
<GoodsTypeInteractionComp url={URL.GetProductCategoryList} onPassDataToChild={this.getDataFromGoodsChild.bind(this)}></GoodsTypeInteractionComp>
<GoodsTypeInteractionComp
url={URL.GetProductCategoryList}
onPassDataToChild={this.getDataFromGoodsChild.bind(this)}
selectedValue={this.state.goodsTypeSelected}
></GoodsTypeInteractionComp>
{/* 商品分类结束 */}
<View className='input-box'>
@ -367,7 +319,7 @@ class GoodsPublish extends Component {
</View>
{/* 店铺分类 */}
<ShopTypeInteractionComp url={URL.GetShopCategoryList}
initialShopType={this.state.shopTypeSelected}
selectedValue={this.state.shopTypeSelected}
onPassDataToChild={this.getDataFromShopChild.bind(this)}
></ShopTypeInteractionComp>
{/* 店铺分类结束 */}

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

@ -33,10 +33,10 @@ class Index extends Component {
// url: '/pages/myDemandSupplyEdit/myDemandSupplyEdit'
// url: '/pages/mySupplyDemand/mySupplyDemand'
// url:'/pages/grabOrderPage/grabOrderPage'
url:'/pages/home/home'
// url:'/pages/myGoodList/myGoodList'
// url:'/pages/myNeeds/myNeeds',
//url:'/pages/myNeedsPublish/myNeedsPublish'
// url:'/pages/goodsPublish/goodsPublish'
url:'/pages/goodsPublish/goodsPublish'
})

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

@ -1,6 +1,6 @@
import Taro, { Component } from '@tarojs/taro'
import { View, Radio, } from '@tarojs/components'
import { AtInput, Text, AtButton, AtIcon, Picker, Image, AtPagination,AtModal,AtModalHeader,AtModalContent,AtModalAction,Button } from 'taro-ui'
import { AtInput, Text, AtButton, AtIcon, Picker, Image, AtPagination, AtModal, AtModalHeader, AtModalContent, AtModalAction, Button } from 'taro-ui'
import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
import URL from '../../serviceAPI.config'
@ -23,7 +23,7 @@ class MyGoodList extends Component {
maximumSold: '',
productId: '',
productCate: [], //宝贝类目
productCateSelected: { class_Id: '', class_name: '全部类目' },// 已选宝贝类目
productCateSelected: { id: '', name: '全部类目' },// 已选宝贝类目
filterBar: ['filterPrice', 'filterStock', 'filterSold', 'filterPublishDate',], //筛选选项
filterBarKeys: { filterPrice: '价格', filterStock: '库存', filterSold: '总销量', filterPublishDate: '发布时间' }, // 筛选选项对应值
filterOptions: {
@ -32,7 +32,7 @@ class MyGoodList extends Component {
filterSold: false,
filterPublishDate: false,
}, // 正反排序
selectedFilterValue: 0, //筛选项
selectedFilterValue: 0, //
myGoodList: [],// 保存后台返回的商品列表
myGoodListTotal: 0,// 后台的商品总数
currentPage: 1,
@ -41,9 +41,9 @@ class MyGoodList extends Component {
currPageParam: 1,// 当前页面 参数
isCheckAll: false,// 是否checked
goodsIdList: [],//商品Id 列表
isOpenDeleteModal:false,// 是否显示删除模态框
isOpenOffStockModal:false,// 是否显示下架模态框
isOpenDeleteModal: false,// 是否显示删除模态框
isOpenOffStockModal: false,// 是否显示下架模态框
}
@ -87,10 +87,20 @@ class MyGoodList extends Component {
}
}).then(res => {
console.log('baobei', res)
this.setState({ productCate: res.data.goodsClass })
const productCate = [{ name: '全部类目', id: '' }]
for (let item of res.data.goodsClass) {
productCate.push({ name: item.class_name, id: item.class_id })
}
this.setState({ productCate: productCate })
}).catch(err => {
console.log('获取宝贝类目失败', err)
Taro.showToast({
title: '获取宝贝类目失败',
icon: 'none',
duration: 1500,
})
})
}
@ -116,18 +126,19 @@ class MyGoodList extends Component {
if (res.statusCode === 200) {
console.log('我的商品列表', JSON.parse(res.data))
const data = JSON.parse(res.data)
if(data.goods){
if (data.goods) {
data.goods.forEach(item => {
item.checked = false
});
const goodCount = Number(data.goodsCount)
this.setState({
myGoodList: data.goods,
myGoodListTotal: goodCount
})
}
const goodCount = Number(data.goodsCount)
this.setState({
myGoodList: data.goods,
myGoodListTotal: goodCount
})
} else {
console.log('我的商品列表获取失败')
@ -141,7 +152,7 @@ class MyGoodList extends Component {
getGoodListResultApi({
goodsName = this.state.productName,
goodsSn = '',
goodsClass = this.state.productCateSelected.class_Id,
goodsClass = this.state.productCateSelected.id,
goodsPriceL = this.state.lowestPrice,
goodsPriceU = this.state.heightestPrice,
goodsSalesL = this.state.minimumSold,
@ -185,6 +196,7 @@ class MyGoodList extends Component {
myGoodList: data.goods,
myGoodListTotal: goodCount
})
Taro.hideLoading()
} else {
console.log('我的商品列表获取失败')
@ -214,24 +226,23 @@ class MyGoodList extends Component {
}).then(res => {
if (res.statusCode === 200) {
Taro.showToast({
title:'下架成功',
icon:'success',
duration:1500
}).then(()=>{
setTimeout(() => {
this.setState({isCheckAll:false})
this.getMyGoodListApi({})
}, 1500);
title: '下架成功',
icon: 'success',
duration: 1500
}).then(() => {
this.setState({ isCheckAll: false })
this.getMyGoodListApi({})
})
} else {
Taro.showToast({
title:'下架失败',
icon:'none',
duration:1500
title: '下架失败',
icon: 'none',
duration: 1500
})
this.setState({isCheckAll:false})
this.setState({ isCheckAll: false })
}
@ -258,25 +269,22 @@ class MyGoodList extends Component {
if (res.statusCode === 200) {
console.log('商品删除返回', res)
Taro.showToast({
title:'删除成功',
icon:'success',
duration:1500
}).then(()=>{
setTimeout(() => {
this.setState({isCheckAll:false})
this.getMyGoodListApi({})
}, 1500);
})
title: '删除成功',
icon: 'success',
duration: 1500
}).then(() => {
this.setState({ isCheckAll: false })
this.getMyGoodListApi({})
})
} else {
Taro.showToast({
title:'删除失败',
icon:'none',
duration:1500
title: '删除失败',
icon: 'none',
duration: 1500
})
this.setState({isCheckAll:false})
this.setState({ isCheckAll: false })
}
@ -289,7 +297,10 @@ class MyGoodList extends Component {
// 搜索
searchButtonHandler() {
this.setState({ currentPage: 1 }, () => {
Taro.showLoading({
title: '加载中',
})
this.setState({ currentPage: 1 ,isCheckAll:false}, () => {
this.getGoodListResultApi({})
})
}
@ -304,8 +315,19 @@ class MyGoodList extends Component {
minimumSold: '',
maximumSold: '',
productId: '',
productCateSelected: { class_Id: '', class_name: '全部类目' },
productCateSelected: { id: '', name: '全部类目' },
}, () => {
this.setState({isCheckAll:false,currentPage: 1},()=>{
this.getMyGoodListApi({})
})
Taro.showToast({
title: '已清空',
icon: 'success',
duration: 1000
})
})
}
// 产品排序
accendingDescending(value) {
@ -381,306 +403,319 @@ class MyGoodList extends Component {
}
// 商品全部选择
checkAllHandler() {
const newMyGoodList = this.state.myGoodList.map((item) => {
item.checked = !this.state.isCheckAll
return item
})
this.setState({ isCheckAll: !this.state.isCheckAll, myGoodList: newMyGoodList },()=>{
console.log('全选列表',this.state.myGoodList)
})
}
if (this.state.myGoodList.length) {
const newMyGoodList = this.state.myGoodList.map((item) => {
item.checked = !this.state.isCheckAll
return item
})
this.setState({ isCheckAll: !this.state.isCheckAll, myGoodList: newMyGoodList }, () => {
console.log('全选列表', this.state.myGoodList)
})
}
else {
this.setState({
isCheckAll:true
},()=>{
this.setState({isCheckAll:false})
})
Taro.showToast({
title: '全选无效',
icon: 'none',
duration: 1500
}).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
})
}
componentDidMount() {
this.getMyGoodListApi({})
this.getBaoBeiCateList()
}
componentWillReceiveProps(nextProps) {
console.log(this.props, nextProps)
}
componentWillUnmount() { }
componentDidShow() { }
componentDidHide() { }
render() {
//等待接口数据 <Radio className='radio-list__radio' value={item.value} checked={item.checked}>{item.text}</Radio>
const goodListElementArray = this.state.myGoodList.map((item, index) => {
return <View key={index} className='good-container'>
<Radio className='radio' value={item.goods_id} checked={item.checked} onClick={this.handleCheckChange.bind(this, item.goods_id)} ></Radio>
{/* onClick={this.handleCheckChange.bind(this,item.goods_id)} */}
<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>
<View className='name-box' onClick={this.goToGoodspage.bind(this,item.goods_id)} >{item.goods_name}</View>
<View className='price-box'>￥{item.goods_price}</View>
<View className='quantity-box'>{item.sales_volume}</View>
<View className='button-box1' onClick={this.goToGoodEditPage.bind(this,item.goods_id)}>
<AtButton type='primary' className='button-a' size='small'>
编辑商品</AtButton>
</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>
})
// 删除提示模态弹窗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>
确定要下架已选商品？
</AtModalContent>
<AtModalAction> <Button onClick={this.offStockModalClose.bind(this)}>取消</Button> <Button className='orange' onClick={this.OffStockConfirm.bind(this)}>确定</Button> </AtModalAction>
</AtModal>
// 单个商品选择
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 })
return (
<View className='MyGoodList'>
{/* 删除模态提示框 */}
{modalMessageDeleteElement}
{/* 下架模态框提示 */}
{modalMessageOffStockElement}
<View className='border-box'>
<AtInput
name='value'
title='宝贝名称：'
type='text'
value={this.state.productName}
onChange={this.productNameChange.bind(this)}
/>
</View>
<View className='input-box'>
<AtInput
name='value'
title='最低价：'
className='input'
type='number'
value={this.state.lowestPrice}
onChange={this.lowestPriceChange.bind(this)}
/>
<AtInput
name='value'
title='最高价：'
className='input'
type='number'
value={this.state.heightestPrice}
onChange={this.heightestPriceChange.bind(this)}
/>
</View>
<View className='border-box'>
<AtInput
name='value'
title='最低销量：'
className='input'
type='number'
value={this.state.minimumSold}
onChange={this.minimumSoldChange.bind(this)}
/>
<AtInput
name='value'
title='最高销量：'
className='input'
type='number'
value={this.state.maximumSold}
onChange={this.maximumSoldChange.bind(this)}
/>
</View>
}
// 改变商品状态
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
})
}
<View className='border-box'>
<AtInput
border={false}
name='value'
title='商品编码：'
type='text'
value={this.state.productId}
onChange={this.productIdChange.bind(this)}
/>
</View>
<View className='page-section'>
<Picker mode='selector' rangeKey='class_name' range={this.state.productCate} onChange={this.productCateChange.bind(this)}>
<View className='picker'>
<View className='title-box'>
<Text className='title'>宝贝类目:</Text>
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(){
<Text className='selected'>{this.state.productCateSelected.class_name}</Text>
</View>
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
})
}
</View>
</Picker>
</View>
<View className='button-box'>
<View className='button' onClick={this.searchButtonHandler.bind(this)}>
<AtButton type='primary' size='small'>
<AtIcon value='search' size='12' color='white'></AtIcon>
搜索</AtButton>
componentDidMount() {
this.getMyGoodListApi({})
this.getBaoBeiCateList()
}
componentWillReceiveProps(nextProps) {
console.log(this.props, nextProps)
}
componentWillUnmount() { }
componentDidShow() { }
componentDidHide() { }
render() {
//等待接口数据
const goodListElementArray = this.state.myGoodList.map((item, index) => {
return <View key={index} className='good-container'>
<Radio className='radio' value={item.goods_id} checked={item.checked} onClick={this.handleCheckChange.bind(this, item.goods_id)} ></Radio>
{/* onClick={this.handleCheckChange.bind(this,item.goods_id)} */}
<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>
<View className='button' onClick={this.emptyButtonHanlder.bind(this)}>
<View className='name-box' onClick={this.goToGoodspage.bind(this, item.goods_id)} >{item.goods_name}</View>
<View className='price-box'>￥{item.goods_price}</View>
<View className='quantity-box'>{item.sales_volume}</View>
<View className='button-box1' onClick={this.goToGoodEditPage.bind(this, item.goods_id)}>
<AtButton type='primary' className='button-a' size='small'>
清空条件</AtButton>
编辑商品</AtButton>
</View>
</View>
})
// 筛选项目排序element
const filterElementsArray = this.state.filterBar.map((item, index) => {
let isTure = this.state.filterOptions[item]
<View className='text'>
<Text>出售中的宝贝{this.state.myGoodListTotal}条记录</Text>
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>
<View className='filterbar-container'>
<View className='filter-bar'>
{filterElementsArray}
})
// 删除提示模态弹窗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>
确定要下架已选商品？
</AtModalContent>
<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}
<View className='border-box'>
<AtInput
name='value'
title='宝贝名称：'
type='text'
value={this.state.productName}
onChange={this.productNameChange.bind(this)}
/>
</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)}>
<View className='input-box'>
<AtInput
name='value'
title='最低价：'
className='input'
type='number'
value={this.state.lowestPrice}
onChange={this.lowestPriceChange.bind(this)}
/>
<AtInput
name='value'
title='最高价：'
className='input'
type='number'
value={this.state.heightestPrice}
onChange={this.heightestPriceChange.bind(this)}
/>
</View>
<View className='border-box'>
<AtInput
name='value'
title='最低销量：'
className='input'
type='number'
value={this.state.minimumSold}
onChange={this.minimumSoldChange.bind(this)}
/>
<AtInput
name='value'
title='最高销量：'
className='input'
type='number'
value={this.state.maximumSold}
onChange={this.maximumSoldChange.bind(this)}
/>
</View>
<View className='border-box'>
<AtInput
border={false}
name='value'
title='商品编码：'
type='text'
value={this.state.productId}
onChange={this.productIdChange.bind(this)}
/>
</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)}>
<AtButton type='primary' size='small'>
删除</AtButton>
<AtIcon value='search' size='12' color='white'></AtIcon>
搜索</AtButton>
</View>
<View className='button' onClick={this.offStockGoodHandler.bind(this)}>
<View className='button' onClick={this.emptyButtonHanlder.bind(this)}>
<AtButton type='primary' className='button-a' size='small'>
下架</AtButton>
清空条件</AtButton>
</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)}>
<AtButton type='primary' size='small'>
删除</AtButton>
</View>
<View className='button' onClick={this.offStockGoodHandler.bind(this)}>
<AtButton type='primary' className='button-a' size='small'>
下架</AtButton>
</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>
<View className='mygoodlist-container'>
{/* <RadioGroup onChange={this.handleCheckChange.bind(this)}> */}
{goodListElementArray}
{/* </RadioGroup> */}
</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>
)
)
}
}
}
export default MyGoodList
export default MyGoodList

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

@ -188,3 +188,8 @@ $themeColor:#FF7142;
}
}
.nomore{
font-size: 32rpx;
margin-top: 40px;
text-align: center
}