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

商品发布 的店铺分类

Browse Source
This commit is contained in:
郑茂强 2018-12-20 17:35:16 +08:00
parent 6887d4ccd8
commit 02d26b6694
4 changed files with 393 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,7 @@ import URL from '../../serviceAPI.config'
import './goodsPublish.scss' import './goodsPublish.scss'
import { throws } from 'assert';
class GoodsPublish extends Component { class GoodsPublish extends Component {
@ -17,46 +18,164 @@ class GoodsPublish extends Component {
constructor() { constructor() {
super(...arguments) super(...arguments)
this.state = { this.state = {
selector: ['需求', '供应', '人才'], // 应该是树型结构，需要修改 objectMultiArray: [
selectorChecked: '需求', [
{
id: 0,
name: '无脊柱动物'
},
{
id: 1,
name: '脊柱动物'
}
],
[
{
id: 0,
name: '扁性动物'
},
{
id: 1,
name: '线形动物'
},
{
id: 2,
name: '环节动物'
},
{
id: 3,
name: '软体动物'
},
{
id: 3,
name: '节肢动物'
}
],
[
{
id: 0,
name: '猪肉绦虫'
},
{
id: 1,
name: '吸血虫'
}
]
],
multiIndex: [0, 0, 0],
shopCategoryPicker: [], // 店铺分类选项
shopCategoryCheckedPicker: {name:'选择店铺类型'},
productName: '', productName: '',
productPrice: '', productPrice: '',
productUnit: '', productUnit: '',
productDescript: '', productDescript: '',
files: [], // 上传的图片 pickerImageUrl: [], // 上传的图片
ImagesInfo: [],// 后台传回来的图片信息
isUploadImageSuccess: false, isUploadImageSuccess: false,
uploadImageTextTip: '', uploadImageTextTip: '',
isUploadProductSuccess: false, isUploadProductSuccess: false,
uploadProductTextTip: '', uploadProductTextTip: '',
list: [ shopCategoryList: [],
{ productCategoryList: [],
value: '美国',
text: '美国', }
checked: false
},
{
value: '中国',
text: '中国',
checked: true
},
{
value: '巴西',
text: '巴西',
checked: false
},
{
value: '日本',
text: '日本',
checked: false
} }
] // 店铺分类选项
//商品目录请求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)
})
}
// 店铺分类目录请求 api
getShopCateList() {
Taro.request({
url: URL.GetShopCategoryList,
method: 'POST',
dataType: 'json',
data: {
id: Taro.getStorageSync('shopInfo').shop_id
},
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({ shopCategoryList: res.data.data })
const shopCategoryInfo = res.data.data
const shopCategory = []
// 处理后台返回的店铺分类信息
for (let item in shopCategoryInfo) {
const children = shopCategoryInfo[item].c
for (let child in children) {
shopCategory.push({ id: children[child].id, name: children[child].n })
}
}
this.setState({ shopCategoryPicker: shopCategory })
console.log('店铺分类目录', res)
}
}
)
.catch(error => {
console.log('店铺分类请求错误', error)
})
} }
// 发布商品api // 发布商品api
//{ goods_name = "test2", goods_price= "1.00", goods_unit= "1",goods_profiles= "test2",class_id= "10103",shop_class_id= "1899", file_id= "27959",file_type= 1,if_cover= 1,file_sort= 1} //{"goods_name":"hellol","goods_price":"1.00","goods_unit":"1","goods_profiles":"111","class_id":"2","shop_class_id":"1928"}
uploadGoods({ goods_name = "test2", goods_price = "1.00", goods_unit = "1", goods_profiles = "test2", class_id = "10103", shop_class_id = "1899", file_id = "27959", file_type = 1, if_cover = 1, file_sort = 1 }) { uploadGoods({ goods_name = "test2", goods_price = "1.00", goods_unit = "1", goods_profiles = "test2", class_id = "10103", shop_class_id = "1930" }) {
const uploadProductGoodFileParams = []
if (this.state.ImagesInfo.length) {
for (let i = 0; i < this.state.ImagesInfo.length; i++) {
if (i === 0) {
uploadProductGoodFileParams.push({
file_id:this.state.ImagesInfo[i].file_id,
file_type: 1,
if_cover: 1,
file_sort: 1
})
} else {
uploadProductGoodFileParams.push({
file_id: this.state.ImagesInfo[i].file_id,
file_type: 1,
if_cover: 0,
file_sort: 1
})
}
}
} else {
alert('图片为空')
}
Taro.request({ Taro.request({
url: URL.UploadProduct, url: URL.UploadProduct,
method: 'POST', method: 'POST',
@ -72,12 +191,7 @@ class GoodsPublish extends Component {
class_id: class_id, class_id: class_id,
shop_class_id: shop_class_id shop_class_id: shop_class_id
}), }),
goodsFiles: JSON.stringify([{ goodsFiles: JSON.stringify(uploadProductGoodFileParams)
file_id: file_id,
file_type: file_type,
if_cover: if_cover,
file_sort: file_sort
}])
}, },
header: { header: {
'content-type': 'application/x-www-form-urlencoded', 'content-type': 'application/x-www-form-urlencoded',
@ -94,6 +208,33 @@ class GoodsPublish extends Component {
this.setState({ uploadProductTextTip: '发布失败', isUploadProductSuccess: true }) this.setState({ uploadProductTextTip: '发布失败', isUploadProductSuccess: true })
}) })
} }
// 整理后台传出来的店铺分类目录
sortShopCateToState(shopData) {
const firstColumn = []
const secondColumn = []
const thirdColumn = []
for (let outterItem of shopData) {
firstColumn.push({ id: outterItem.class_id, name: outterItem.class_name })
if (outterItem.children.length) {
for (let middleItem of outterItem.children) {
secondColumn.push({ id: middleItem.class_id, name: middleItem.class_name })
if (middleItem.children.length) {
for (let innerItem of middleItem.children) {
thirdColumn.push({ id: innerItem.class_id, name: innerItem.class_name })
}
}
}
}
}
//------- 把新指传给objectMultiArray之后就不可以用了 to be continue
// console.log('old',this.state.objectMultiArray)
// this.setState({objectMultiArray:[firstColumn,secondColumn,thirdColumn]},()=>{
// console.log('new', this.state.objectMultiArray)
// })
}
// 改变商品分类状态 // 改变商品分类状态
onChangeProductType(e) { onChangeProductType(e) {
@ -140,17 +281,17 @@ class GoodsPublish extends Component {
success(response) { success(response) {
const data = JSON.parse(response.data) const data = JSON.parse(response.data)
const imagePath = URL.Base + data.file_path const imagePath = URL.Base + data.file_path
const newFiles = that.state.files.concat({ url: imagePath }) const newPickerImageUrl = that.state.pickerImageUrl.concat({ url: imagePath })
const newImageInfo = that.state.ImagesInfo.concat(data)
that.setState({ files: newFiles, isUploadImageSuccess: true, uploadImageTextTip: '上传成功' }) that.setState({ pickerImageUrl: newPickerImageUrl, isUploadImageSuccess: true, uploadImageTextTip: '图片上传成功', ImagesInfo: newImageInfo }, () => {
// console.log(that.state.ImagesInfo)
})
} }
}) })
} }
if (operationType === 'remove') { if (operationType === 'remove') {
this.state.files.splice(index, 1); this.state.pickerImageUrl.splice(index, 1);
this.setState({ files: this.state.files }); this.setState({ files: this.state.pickerImageUrl });
that.setState({ isUploadImageSuccess: true, uploadImageTextTip: '删除成功' }) that.setState({ isUploadImageSuccess: true, uploadImageTextTip: '删除成功' })
} }
} }
@ -162,31 +303,37 @@ class GoodsPublish extends Component {
onImageClick(index) { onImageClick(index) {
} }
onClickUploadGoods() { onClickUploadGoods() {
if (this.state.productName && this.state.productPrice && this.state.productUnit && this.state.files.length) { if (this.state.productName && this.state.productPrice && this.state.productUnit && this.state.ImagesInfo.length) {
this.uploadGoods({ this.uploadGoods({
goods_name: this.state.productName, goods_name: this.state.productName,
goods_price: this.state.productPrice, goods_price: this.state.productPrice,
goods_unit: this.state.productUnit, goods_unit: this.state.productUnit,
goods_profiles: this.state.productDescript, goods_profiles: this.state.productDescript,
class_id: "10103", class_id: "10103",
shop_class_id: "1899", shop_class_id: this.state.shopCategoryCheckedPicker,
file_id: "27959",
file_type: 1,
if_cover: 1,
file_sort: 1
}) })
} else { } else {
this.setState({ uploadProductTextTip: '请填写完表格', isUploadProductSuccess: true }) this.setState({ uploadProductTextTip: '请填写完表格', isUploadProductSuccess: true })
} }
} }
shopCategoryChanged(e) {
this.setState({
shopCategoryCheckedPicker: this.state.shopCategoryPicker[e.detail.value]
}, () => {
console.log(this.state.shopCategoryCheckedPicker)
})
}
componentDidMount() { componentDidMount() {
this.getProductCateList()
this.getShopCateList()
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
console.log(this.props, nextProps) // console.log(this.props, nextProps)
} }
componentWillUnmount() { } componentWillUnmount() { }
@ -195,6 +342,174 @@ class GoodsPublish extends Component {
componentDidHide() { } componentDidHide() { }
//--- 三级联动--------------
bindMultiPickerChange(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setState({
multiIndex: e.detail.value
})
}
bindMultiPickerCol(e) {
console.log('修改的列为', e.detail.column, '，值为', e.detail.value)
const data = {
multiArray: this.state.objectMultiArray,
multiIndex: this.state.multiIndex
}
data.multiIndex[e.detail.column] = e.detail.value
switch (e.detail.column) {
case 0:
switch (data.multiIndex[0]) {
case 0:
data.multiArray[1] = [
{
id: 0,
name: '01'
},
{
id: 1,
name: '10a'
}
]
data.multiArray[2] = [{
id: 0,
name: '02'
},
{
id: 1,
name: '02a'
}]
break
case 1:
data.multiArray[1] = [{
id: 0,
name: '11'
},
{
id: 1,
name: '11a'
}]
data.multiArray[2] = [{
id: 0,
name: '12'
},
{
id: 1,
name: '12a'
}]
break
}
data.multiIndex[1] = 0
data.multiIndex[2] = 0
break
case 1:
switch (data.multiIndex[0]) {
case 0:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = [{
id: 0,
name: '无脊柱动物'
},
{
id: 1,
name: '脊柱动物'
}]
break
case 1:
data.multiArray[2] = [
{
id: 1,
name: '脊柱动物'
}]
break
case 2:
data.multiArray[2] = [{
id: 0,
name: '无脊柱动物'
},
{
id: 1,
name: '脊柱动物'
}]
break
case 3:
data.multiArray[2] = [{
id: 0,
name: '无脊柱动物'
},
{
id: 1,
name: '脊柱动物'
}, {
id: 0,
name: '无脊柱动物'
},
{
id: 1,
name: '脊柱动物'
}]
break
case 4:
data.multiArray[2] = [{
id: 0,
name: '无脊柱动物'
},
{
id: 1,
name: '脊柱动物'
}]
break
}
break
case 1:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = [{
id: 0,
name: '蛇'
},
{
id: 1,
name: '青蛙'
}]
break
case 1:
data.multiArray[2] = [{
id: 0,
name: '蛇'
},
{
id: 1,
name: '青蛙'
}, {
id: 0,
name: '蛇'
},
{
id: 1,
name: '青蛙'
}]
break
case 2:
data.multiArray[2] = [{
id: 0,
name: '蛇'
},
{
id: 1,
name: '青蛙'
}]
break
}
break
}
data.multiIndex[2] = 0
break
}
console.log(data.multiIndex)
this.setState({ multiIndex: data.multiIndex })
}
render() { render() {
const imageUploadSuccess = <AtToast const imageUploadSuccess = <AtToast
isOpened={this.state.isUploadImageSuccess} isOpened={this.state.isUploadImageSuccess}
@ -214,10 +529,19 @@ class GoodsPublish extends Component {
<View className='goods-category'> <View className='goods-category'>
<View className='page-section'> <View className='page-section'>
<View> <View>
<Picker mode='selector' range={this.state.selector} onChange={this.onChangeProductType.bind(this)}> <Picker mode='selector'
range={this.state.objectMultiArray}
onChange={this.bindMultiPickerChange.bind(this)}
rangeKey='name'
mode="multiSelector"
onColumnchange={this.bindMultiPickerCol.bind(this)}
value={this.state.multiIndex}
>
<View className='picker'> <View className='picker'>
<View className='title-box'> <View className='title-box'>
<Text className='title'><Text className='require'>*</Text>商品分类:</Text> <Text className='selected'>{this.state.selectorChecked}</Text> <Text className='title'><Text className='require'>*</Text>商品分类:</Text> <Text className='selected'>
{/* {this.state.multiArray[0][this.state.multiIndex[0]].name}{this.state.multiArray[1][this.state.multiIndex[1]].name}{this.state.multiArray[2][this.state.multiIndex[2]].name} */}
</Text>
</View> </View>
</View> </View>
@ -265,7 +589,7 @@ class GoodsPublish extends Component {
<View className='img-container'> <View className='img-container'>
<AtImagePicker <AtImagePicker
multiple multiple
files={this.state.files} files={this.state.pickerImageUrl}
onChange={this.onChangeImg.bind(this)} onChange={this.onChangeImg.bind(this)}
onFail={this.onFail.bind(this)} onFail={this.onFail.bind(this)}
onImageClick={this.onImageClick.bind(this)} onImageClick={this.onImageClick.bind(this)}
@ -274,55 +598,17 @@ class GoodsPublish extends Component {
</View> </View>
<View className='shoptype-box'> <View className='shoptype-box'>
{/* 店铺分类 */} {/* 店铺分类 */}
<View className='title-box'> <View className='title-box page-section'>
<Picker mode='selector' rangeKey='name' range={this.state.shopCategoryPicker} onChange={this.shopCategoryChanged.bind(this)}>
<View className='picker'>
<Text className='require'>*</Text> <Text className='require'>*</Text>
<Text className='title'>店铺分类:</Text> <Text className='title'> 店铺分类：</Text>
</View> <Text className='selected'>{this.state.shopCategoryCheckedPicker.name}</Text>
<View className='shoptype-container'>
<View className='title-box'>
<Text className='title'>国家:</Text>
</View>
<View className='radio-box'>
<RadioGroup>
{this.state.list.map((item, i) => {
return (
<Label className='radio-list__label' for={i} key={i}>
<Radio color='#FF9500' className='radio-list__radio' value={item.value} checked={item.checked}>{item.text}</Radio>
</Label>
)
})}
</RadioGroup>
</View>
<View className='title-box'>
<Text className='title'>国家:</Text>
</View>
<View className='radio-box'>
<RadioGroup>
{this.state.list.map((item, i) => {
return (
<Label className='radio-list__label' for={i} key={i}>
<Radio color='#FF9500' className='radio-list__radio' value={item.value} checked={item.checked}>{item.text}</Radio>
</Label>
)
})}
</RadioGroup>
</View>
<View className='title-box'>
<Text className='title'>国家:</Text>
</View>
<View className='radio-box'>
<RadioGroup>
{this.state.list.map((item, i) => {
return (
<Label className='radio-list__label' for={i} key={i}>
<Radio color='#FF9500' className='radio-list__radio' value={item.value} checked={item.checked}>{item.text}</Radio>
</Label>
)
})}
</RadioGroup>
</View>
</View> </View>
</Picker>
</View>
</View> </View>

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

@ -91,9 +91,11 @@ class Home extends Component {
} }
}) })
.then(response => { .then(response => {
// console.log('登入', response) console.log('登入', response)
//储存后台返回的session_id 到local Storage //储存后台返回的session_id 到local Storage
Taro.setStorageSync('session_id', response.data.session_id) Taro.setStorageSync('session_id', response.data.session_id)
Taro.setStorageSync('shopInfo', response.data.shop_info)
Taro.setStorageSync('userInfo', response.data.user_info)
} }
) )

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

@ -30,8 +30,8 @@ class Index extends Component {
Taro.navigateTo({ Taro.navigateTo({
url: '/pages/home/home' // url: '/pages/home/home'
// url: '/pages/goodsPublish/goodsPublish' url: '/pages/goodsPublish/goodsPublish'
// url:'/pages/supplyDemandPublish/supplyDemandPublish' // url:'/pages/supplyDemandPublish/supplyDemandPublish'
}) })
} }

3
src/serviceAPI.config.js
View File

@ -18,6 +18,9 @@ const URL = {
BuyConsult: LOCALURL + 'Shop-consult',// 购买咨询 BuyConsult: LOCALURL + 'Shop-consult',// 购买咨询
GetShopItemDetail: LOCALURL + 'GoodsQuery-wxGoodsDetail',// 商品详情 GetShopItemDetail: LOCALURL + 'GoodsQuery-wxGoodsDetail',// 商品详情
// 商品发布api接口 // 商品发布api接口
GetShopCategoryList: LOCALURL + 'Shop-ajaxShopCartgory',// 商品分类目录
GetProductCategoryList: LOCALURL + 'applet-getGoodsClass',// 商品分类目录
UploadPorductImage: LOCALURL + 'Goods-fileUpload',// 上传商品图片 UploadPorductImage: LOCALURL + 'Goods-fileUpload',// 上传商品图片
UploadProduct: LOCALURL + 'Goods-phonePost',// 上传商品 UploadProduct: LOCALURL + 'Goods-phonePost',// 上传商品
UploadSupplyDemand: LOCALURL + 'Supply-post',// 上传供求 UploadSupplyDemand: LOCALURL + 'Supply-post',// 上传供求