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

我的商品页面，商品编辑页面，

Browse Source
This commit is contained in:
郑茂强 2018-12-27 17:31:17 +08:00
parent 104c844b14
commit 156d9ee407
11 changed files with 1020 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app.js
View File

@ -24,7 +24,8 @@ class App extends Component {
'pages/goods/goods',// 商品页面
'pages/goodsPublish/goodsPublish',// 商品发布页面
'pages/supplyDemandPublish/supplyDemandPublish',// 供求发布页面
'pages/mySupplyDemand/mySupplyDemand',// 我的供求页面
'pages/mySupplyDemand/mySupplyDemand',// 我的供求列表页面
'pages/myGoodsEdit/myGoodsEdit',// 我的商品编辑页面
'pages/allDemanding/allDemanding',// 所有供求页面
'pages/myGoodList/myGoodList',// 我的商品列表页面
'pages/myDemandSupplyEdit/myDemandSupplyEdit',// 我的供求编辑页面

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

@ -36,7 +36,7 @@ class Goods extends Component {
}
// 商品详情api
getShopDescription() {
getGoodDescription() {
Taro.request({
url: URL.GetShopItemDetail,
method: 'POST',
@ -96,7 +96,7 @@ class Goods extends Component {
}
componentDidMount() {
//this.$router.params.id
this.getShopDescription()
this.getGoodDescription()
}
componentWillReceiveProps(nextProps) {
console.log(this.props, nextProps)

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

@ -1,8 +1,8 @@
import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text, Swiper, SwiperItem, Image, } from '@tarojs/components'
import { AtModal, AtButton, AtToast,AtModalHeader ,AtModalContent,AtModalAction} from 'taro-ui'
import filteredShopComponent from '../../component/filteredShopComponent/filteredShopComponent'
import bottomNav from '../../component/bottomNav/bottomNav'
import FilteredShopComponent from '../../component/filteredShopComponent/filteredShopComponent'
import BottomNav from '../../component/bottomNav/bottomNav'
import URL from '../../serviceAPI.config'
import './home.scss'
@ -282,7 +282,7 @@ class Home extends Component {
</View>
}) : null
const shopCollectionElementsArray = this.state.shopsDetails.length ? this.state.shopsDetails.map((item, index) => {
return <filteredShopComponent shop={item} key={index}></filteredShopComponent>
return <FilteredShopComponent shop={item} key={index}></FilteredShopComponent>
}) : null
const subCateElementsArray = this.state.subCate.length ? this.state.subCate.map((item, index) => {
@ -418,7 +418,7 @@ class Home extends Component {
</View>
<View className='bottom-nav-box'>
<bottomNav otherData={this.state.otherData} />
<BottomNav otherData={this.state.otherData} />
</View>

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

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

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

@ -1,7 +1,8 @@
import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtInput, Text, AtButton, AtIcon, Picker, Image } from 'taro-ui'
import copyrightComponent from '../../component/copyrightComponent/copyrightComponent'
import { View, Radio, } from '@tarojs/components'
import { AtInput, Text, AtButton, AtIcon, Picker, Image, AtPagination,AtToast } from 'taro-ui'
import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
import URL from '../../serviceAPI.config'
import './myGoodList.scss'
@ -10,7 +11,7 @@ import './myGoodList.scss'
class MyGoodList extends Component {
config = {
navigationBarTitleText: '我的商品列表'
navigationBarTitleText: '商品列表'
}
constructor() {
super(...arguments)
@ -22,10 +23,32 @@ class MyGoodList extends Component {
maximumSold: '',
productId: '',
productCate: ['全部类目', '衣柜', '人工服务', '开料机', '书柜', '橱柜', '更衣室'],
productCateSelected: '全部类目'
productCateSelected: '全部类目',
filterBar: ['filterPrice', 'filterStock', 'filterSold', 'filterPublishDate',], //筛选选项
filterBarKeys: { filterPrice: '价格', filterStock: '库存', filterSold: '总销量', filterPublishDate: '发布时间' }, // 筛选选项对应值
filterOptions: {
filterPrice: false,
filterStock: false,
filterSold: false,
filterPublishDate: false,
}, // 正反排序
selectedFilterValue: 0, //筛选项
myGoodList: [],// 保存后台返回的商品列表
myGoodListTotal: 0,// 后台的商品总数
currentPage: 1,
goodsStateParam: 1,//商品状态参数
pageCountParam: 10,// 商品数量参数
currPageParam: 1,// 当前页面 参数
isCheckAll:false,// 是否checked
goodsIdList:[],//商品Id 列表
isToast:false,// 是否显示轻提示
toastText:''// 轻提示字段
}
}
productNameChange(event) {
this.setState({ productName: event })
}
@ -49,9 +72,321 @@ class MyGoodList extends Component {
productCateSelected: this.state.productCate[e.detail.value]
})
}
// 获取我的商品列表接口api
getMyGoodListApi({ goodsState = this.state.goodsStateParam, pageCount = this.state.pageCountParam, currPage = this.state.currPageParam }) {
Taro.request({
url: URL.MyGoodList,
method: 'POST',
dataType: 'json',
data: {
goodsState: goodsState,
pageCount: pageCount,
currPage: currPage
},
header: {
'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
'content-type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest'
}
}).then(res => {
if (res.statusCode === 200) {
console.log('我的商品列表', JSON.parse(res.data))
const data = JSON.parse(res.data)
data.goods.forEach(item => {
item.checked=false
});
const goodCount = Number(data.goodsCount)
this.setState({
myGoodList: data.goods,
myGoodListTotal: goodCount
})
} else {
console.log('我的商品列表获取失败')
}
})
}
// 获取搜索结果api
getGoodListResultApi({ goodsName = this.state.productName, goodsSn = '', goodsClass = '', goodsPriceL = this.state.lowestPrice, goodsPriceU = this.state.heightestPrice, goodsSalesL = this.state.minimumSold, goodsSalesU = this.state.maximumSold, shopClassID = this.state.productId, goodsState = this.state.goodsStateParam, pageCount = this.state.pageCountParam, currPage = this.state.currPageParam, order = '', }) {
Taro.request({
url: URL.MyGoodList,
method: 'POST',
dataType: 'json',
data: {
goodsName: goodsName,
goodsSn: goodsSn,
goodsClass: goodsClass,
goodsPriceL: goodsPriceL,
goodsPriceU: goodsPriceU,
goodsSalesL: goodsSalesL,
goodsSalesU: goodsSalesU,
shopClassID: shopClassID,
goodsState: goodsState,
pageCount: pageCount,
currPage: currPage,
order: order
},
header: {
'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
'content-type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest'
}
}).then(res => {
if (res.statusCode === 200) {
console.log('我的商品列表', JSON.parse(res.data))
const data = JSON.parse(res.data)
const goodCount = Number(data.goodsCount)
this.setState({
myGoodList: data.goods,
myGoodListTotal: goodCount
})
} else {
console.log('我的商品列表获取失败')
}
})
}
// 商品列表下架API
changeGoodState({goodsState=0,goodsID= this.state.goodsIdList }) {
Taro.request({
url: URL.ChangeGoodState,
method: 'POST',
dataType: 'json',
data: {
goodsState: goodsState,
goodsID:JSON.stringify(goodsID)
},
header: {
'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
'content-type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest'
}
}).then(res => {
if (res.statusCode === 200) {
console.log('商品状态返回', res)
this.setState({isToast:true,toastText:'下架成功'},()=>{
setTimeout(() => {
this.setState({isToast:false})
this.getMyGoodListApi({})// 从新获取商品列表数据
}, 2000);
})
} else {
console.log('我的商品列表获取失败')
}
})
}
// 商品列表删除api
deleteGood({goodsState=1,goodsID= this.state.goodsIdList }) {
Taro.request({
url: URL.DeleteGood,
method: 'POST',
dataType: 'json',
data: {
goodsState: goodsState,
goodsID:JSON.stringify(goodsID)
},
header: {
'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
'content-type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest'
}
}).then(res => {
if (res.statusCode === 200) {
console.log('商品删除返回', res)
this.setState({isToast:true,toastText:'删除成功'},()=>{
setTimeout(() => {
this.setState({isToast:false})
this.getMyGoodListApi({})// 从新获取商品列表数据
}, 2000);
})
} else {
console.log('我的商品列表获取失败')
}
})
}
// 搜索
searchButtonHandler() {
this.setState({ currentPage: 1 }, () => {
this.getGoodListResultApi({})
})
}
// 清空搜索
emptyButtonHanlder() {
this.setState({
productName: '',
lowestPrice: '',
heightestPrice: '',
minimumSold: '',
maximumSold: '',
productId: '',
productCateSelected: '全部类目',
})
}
// 产品排序
accendingDescending(value) {
this.setState({ selectedFilterValue: value })
if (value == 0) {
this.setState({
currentPage: 1,
filterOptions: {
filterPrice: !this.state.filterOptions.filterPrice,
filterStock: false,
filterSold: false,
filterPublishDate: false,
}
}
)
this.state.filterOptions.filterPrice ? this.getGoodListResultApi({ order: "goods_price desc" }) : this.getGoodListResultApi({ order: "goods_price" })
}
if (value == 1) {
this.setState({
currentPage: 1,
filterOptions: {
filterPrice: false,
filterStock: !this.state.filterOptions.filterStock,
filterSold: false,
filterPublishDate: false,
}
}, () => {
this.state.filterOptions.filterStock ? this.getGoodListResultApi({ order: "goods_stock desc" }) : this.getGoodListResultApi({ order: "goods_stock" })
}
)
}
if (value == 2) {
this.setState({
currentPage: 1,
filterOptions: {
filterPrice: false,
filterStock: false,
filterSold: !this.state.filterOptions.filterSold,
filterPublishDate: false,
}
}, () => {
this.state.filterOptions.filterSold ? this.getGoodListResultApi({ order: "sales_volume desc" }) : this.getGoodListResultApi({ order: "sales_volume" })
}
)
}
if (value == 3) {
this.setState({
currentPage: 1,
filterOptions: {
filterPrice: false,
filterStock: false,
filterSold: false,
filterPublishDate: !this.state.filterOptions.filterPublishDate,
}
}, () => {
this.state.filterOptions.filterPublishDate ? this.getGoodListResultApi({ order: "update_date desc" }) : this.getGoodListResultApi({ order: "update_date" })
}
)
}
}
// 翻页导航
paginationNav(type) {
this.setState({ currentPage: type.current,isCheckAll:false }, () => {
this.getMyGoodListApi({ currPage: this.state.currentPage })
})
}
// 商品全部选择
checkAllHandler(){
const newMyGoodList=this.state.myGoodList.map((item)=>{
item.checked=!this.state.isCheckAll
return item
})
this.setState({isCheckAll:!this.state.isCheckAll,myGoodList:newMyGoodList})
}
// 单个商品选择
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.deleteGood({goodsID:checkedGoodsId}):this.setState({isToast:true,toastText:'请选择要删除的商品'},()=>{
setTimeout(() => {
this.setState({isToast:false})
}, 2000);
})
}
// 改变商品状态
offStockGoodHandler(){
const checkedGoodsId=[]
this.state.myGoodList.forEach(item => {
if(item.checked){
checkedGoodsId.push(item.goods_id)
}
});
checkedGoodsId.length?this.changeGoodState({goodsID:checkedGoodsId}):this.setState({isToast:true,toastText:'请选择要下架的商品'},()=>{
setTimeout(() => {
this.setState({isToast:false})
}, 2000);
})
}
// 导航到商品编辑页面myGoodsEdit
goToGoodEditPage(){
Taro.navigateTo({
url: '/pages/myGoodsEdit/myGoodsEdit'
})
}
componentDidMount() {
this.getMyGoodListApi({})
}
componentWillReceiveProps(nextProps) {
console.log(this.props, nextProps)
@ -64,22 +399,46 @@ class MyGoodList extends Component {
componentDidHide() { }
render() {
//等待接口数据
const goodListElementArray = <View className='good-container'>
<View className='img-box'>
<Image mode='aspectFit' className='img' style='height:50px;width:50px' src='http://192.168.1.230/Uploads/zone/user_1295/201812/thumb/2badb6ea3c1e4eb058873ab2086110ef_400X400.jpg' />
</View>
<View className='name-box'>名称</View>
<View className='price-box'>￥12.00</View>
<View className='quantity-box'>3243</View>
<View className='button-box1'>
<AtButton type='primary' className='button-a' size='small'>
// 轻提示
const toastElement=<AtToast
isOpened={this.state.isToast}
text={this.state.toastText}
></AtToast>
编辑商品</AtButton>
//等待接口数据 <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'>
<Image mode='aspectFit' className='img' style='height:50px;width:50px' src={URL.Base + item.goods_url} />
</View>
<View className='name-box'>{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)}>
<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>
})
return (
<View className='MyGoodList'>
{toastElement}
<View className='border-box'>
<AtInput
name='value'
@ -149,25 +508,61 @@ class MyGoodList extends Component {
</Picker>
</View>
<View className='button-box'>
<View className='button' onClick={this.searchDemandSupply.bind(this)}>
<View className='button' onClick={this.searchButtonHandler.bind(this)}>
<AtButton type='primary' size='small'>
<AtIcon value='search' size='12' color='white'></AtIcon>
搜索</AtButton>
</View>
<View className='button' onClick={this.addDemandSupply.bind(this)}>
<View className='button' onClick={this.emptyButtonHanlder.bind(this)}>
<AtButton type='primary' className='button-a' size='small'>
清空条件</AtButton>
</View>
</View>
<View className='mygoodlist-container'>
{goodListElementArray}
{goodListElementArray}
{goodListElementArray}
{goodListElementArray}
<View className='text'>
<Text>出售中的宝贝{this.state.myGoodListTotal}条记录</Text>
</View>
<copyrightComponent></copyrightComponent>
<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'>
{/* <RadioGroup onChange={this.handleCheckChange.bind(this)}> */}
{goodListElementArray}
{/* </RadioGroup> */}
</View>
<View className='pagination-box'>
<AtPagination
total={this.state.myGoodListTotal}
pageSize={10}
current={this.state.currentPage}
onPageChange={this.state.paginationNav.bind(this)}
>
</AtPagination>
</View>
<CopyrightComponent></CopyrightComponent>
</View>
)
}

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

@ -1,6 +1,75 @@
$themeColor:#FF7142;
.MyGoodList{
padding: 10px 20px;
.filterbar-container{
border: 1px solid #ddd;
border-top: 1px solid #aed2ff;
margin-top: 10px;
margin-bottom: 20px;
.filter-bar{
padding: 3% 0;
display: flex;
flex-wrap: wrap;
flex-direction: row;
background-color:#f6fafd;
.text-a{
color:#0579c6;
}
.shop-item{
box-sizing:border-box;
width: 50%;
padding:10px;
}
.filter-title{
box-sizing:border-box;
flex:1;
text-align: center;
font-size: 28px;
margin: 5px;
color:#999;
border: 1px solid #999
}
.actived{
color:#b10000
}
}
.sub-filter{
border-top: 1px solid #ddd;
display: flex;
flex-wrap: wrap;
flex-direction: row;
// padding:20px 0;
.radio{
margin-left: 10px;
margin-top:4%;
font-size: 30px;
font-weight: bold;
}
.button{
margin-top:4%;
text-align: center;
.at-button--primary{
margin-left: 20px;
background-color:#ac2925;
border:1PX solid #ac2925;
}
.button-a{
margin-left: 10px;
background-color:#5bc0de;
border:1PX solid #5bc0de;
}
}
}
}
.at-input__container{
color:black;
font-weight: bold;
@ -58,6 +127,11 @@ $themeColor:#FF7142;
}
}
}
.text{
color:#717592;
font-size: 30px;
margin:20px 0;
}
.mygoodlist-container{
border-top:1px solid #ddd;
.good-container{
@ -71,11 +145,13 @@ $themeColor:#FF7142;
line-height: 200px;
text-align: center;
color:#717592;
.radio{
margin-left: 10px;
}
.img-box{
flex:1;
.img{
margin-top: 25%;
margin-top: 35%;
}
}
@ -107,6 +183,8 @@ $themeColor:#FF7142;
}
}
.pagination-box{
margin: 50px 0;
}
}

376
src/pages/myGoodsEdit/myGoodsEdit.js Normal file
View File

@ -0,0 +1,376 @@
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Radio, RadioGroup, Label } from '@tarojs/components'
import { AtInput, AtImagePicker, AtTextarea, AtButton, Picker, AtToast } from 'taro-ui'
import URL from '../../serviceAPI.config'
import './myGoodsEdit.scss'
class MyGoodsEdit extends Component {
config = {
navigationBarTitleText: '商品编辑'
}
constructor() {
super(...arguments)
this.state = {
shopCategoryPicker: [], // 店铺分类选项
shopCategoryCheckedPicker: { name: '选择店铺类型' },
productName: '',
productPrice: '',
productUnit: '',
productDescript: '',
pickerImageUrl: [], // 上传的图片
ImagesInfo: [],// 后台传回来的图片信息
shopCategoryList: [],
isToast:false,
toastText:'',
}
}
// 店铺分类目录请求 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
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({
url: URL.UploadProduct,
method: 'POST',
dataType: 'json',
data: {
deployType: 1,
action: 1,
goods: JSON.stringify({
goods_name: goods_name,
goods_price: goods_price,
goods_unit: goods_unit,
goods_profiles: goods_profiles,
class_id: class_id,
shop_class_id: shop_class_id
}),
goodsFiles: JSON.stringify(uploadProductGoodFileParams)
},
header: {
'content-type': 'application/x-www-form-urlencoded',
'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(res => {
this.setState({ toastText: '发布成功', isToast: true }, () => {
setTimeout(() => {
this.setState({ isToast: false })
Taro.navigateTo({
url: '/pages/goods/goods?id=5cf3Ptn5wKQdyPpwsSe2nDKnN4QDFdz8moPTf+QIOm788Q'// 虚拟地址
})
}, 2000)
})
console.log('上传商品', res)
}
)
.catch(error => {
this.setState({ toastText: '发布失败', isToast: true }, () => {
setTimeout(() => {
this.setState({ isToast: false })
}, 2000)
})
})
}
productNameChange(event) {
this.setState({
productName: event
})
}
productPriceChange(event) {
this.setState({
productPrice: event
})
}
productUnitChange(event) {
this.setState({
productUnit: event
})
}
productDescriptChange(event) {
this.setState({
productDescript: event.target.value
})
}
// 上传图片
onChangeImg(files, operationType, index) {
const that = this
if (operationType === 'add') {
Taro.uploadFile({
url: URL.UploadGoodsPorductImage,
filePath: files[files.length - 1].url,
name: 'file',
formData: {
user: 'test'
},
header: {
'content-type': 'multipart/form-data',
'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
'X-Requested-With': 'XMLHttpRequest'
},
success(response) {
const data = JSON.parse(response.data)
const imagePath = URL.Base + data.file_path
const newPickerImageUrl = that.state.pickerImageUrl.concat({ url: imagePath })
const newImageInfo = that.state.ImagesInfo.concat(data)
that.setState({ pickerImageUrl: newPickerImageUrl, isToast: true, toastText: '图片上传成功', ImagesInfo: newImageInfo }, () => {
setTimeout(() => {
that.setState({ isToast: false })
}, 2000)
})
}
})
}
if (operationType === 'remove') {
this.state.pickerImageUrl.splice(index, 1);
this.setState({ files: this.state.pickerImageUrl });
that.setState({ isToast: true, toastText: '删除成功' }, () => {
setTimeout(() => {
that.setState({ isToast: false })
}, 2000)
})
}
}
// 图片上传失败
onFail(mes) {
console.log(mes)
}
// 删除图片
onImageClick(index) {
}
onClickUploadGoods() {
if (this.state.productName && this.state.productPrice && this.state.productUnit && this.state.ImagesInfo.length && this.state.shopCategoryCheckedPicker.id) {
this.uploadGoods({
goods_name: this.state.productName,
goods_price: this.state.productPrice,
goods_unit: this.state.productUnit,
goods_profiles: this.state.productDescript,
class_id: "10103",
shop_class_id: this.state.shopCategoryCheckedPicker,
})
} else {
this.setState({ toastText: '请填写完表格', isToast: true }, () => {
setTimeout(() => {
this.setState({ isToast: false })
}, 2000)
})
}
}
shopCategoryChanged(e) {
this.setState({
shopCategoryCheckedPicker: this.state.shopCategoryPicker[e.detail.value]
}, () => {
console.log(this.state.shopCategoryCheckedPicker)
})
}
goToMyGoodListPage(){
Taro.navigateTo({
url: '/pages/myGoodList/myGoodList'
})
}
componentDidMount() {
this.getShopCateList()
}
componentWillReceiveProps(nextProps) {
// console.log(this.props, nextProps)
}
componentWillUnmount() { }
componentDidShow() { }
componentDidHide() { }
render() {
const imageUploadSuccess = <AtToast
isOpened={this.state.isToast}
text={this.state.toastText}
duration={2000}
></AtToast>
const productUploadSuccess = <AtToast
isOpened={this.state.isToast}
text={this.state.toastText}
duration={2000}
></AtToast>
return (
<View className='goods-publish'>
{imageUploadSuccess}
{productUploadSuccess}
<View className='goods-category'>
<View className='input-box'>
<Text className='require'>*</Text>
<AtInput
name='productName'
title='商品名称：'
type='text'
value={this.state.productName}
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}
onChange={this.productPriceChange.bind(this)}
/>
</View>
<View className='input-box'>
<Text className='require'>*</Text>
<AtInput
name='productUnit'
title='商品单位：'
type='text'
value={this.state.productUnit}
onChange={this.productUnitChange.bind(this)}
/>
</View>
{/* 图片上传 */}
<View className='img-box'>
<View className='title-box'>
<Text className='require'>*</Text>
<Text className='title'>上传图片:</Text>
</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)}
/>
</View>
</View>
<View className='shoptype-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='title'> 店铺分类：</Text>
<Text className='selected'>{this.state.shopCategoryCheckedPicker.name}</Text>
</View>
</Picker>
</View>
</View>
<View className='description-box'>
<View className='title-box'>
<Text className='require'></Text>
<Text className='title'>商品简介:</Text>
</View>
<AtTextarea
value={this.state.productDescript}
onChange={this.productDescriptChange.bind(this)}
maxlength='200'
placeholder='你的产品简介'
/>
</View>
</View>
<View className='button-box' >
<View className='button' >
<AtButton type='primary' size='small' onClick={this.onClickUploadGoods.bind(this)}>保存</AtButton>
</View>
{/* <View className='button'>
<AtButton type='primary' className='button-a' size='small' >发布并新增</AtButton>
</View> */}
<View className='button' onClick={this.goToMyGoodListPage.bind(this)}>
<AtButton type='primary' className='button-a' size='small'>商品列表</AtButton>
</View>
</View>
<copyrightComponent></copyrightComponent>
</View>
)
}
}
export default MyGoodsEdit

111
src/pages/myGoodsEdit/myGoodsEdit.scss Normal file
View File

@ -0,0 +1,111 @@
$themeColor:#FF7142;
.goods-category{
padding: 10px 20px;
.border-box{
border-bottom: 1Px solid #d6e4ef;
}
.at-input__container{
color:black;
font-weight: bold;
.at-input__input{
font-weight: normal
}
}
.img-box{
margin-top:10Px;
.img-container{
border: 1Px solid #d6e4ef;
border-radius:8rpx;
}
}
.shoptype-box{
margin-top:10Px;
}
.description-box{
margin-top:10Px;
}
}
.shoptype-box{
.shoptype-container{
border: 1Px solid #d6e4ef;
border-radius:8rpx;
.title-box{
margin-left: 10px;
.title{
font-weight: bold
}
}
.radio-box{
margin: 20px 0 20px 20px
}
.radio-list__radio{
font-size:32rpx;
}
}
}
.title-box{
.title{
//color: #333;
margin-right:16rpx;
width:172rpx;
font-size:32rpx;
line-height:1.5;
vertical-align:middle;
text-align:left;
font-weight: bold
}
}
.button-box{
display: flex;
flex-wrap: nowrap;
flex-direction: row;
margin: 40px 0;
padding: 0 120px;
.button{
flex:1;
text-align: center;
.at-button--primary{
background-color:$themeColor;
border:1PX solid $themeColor;
}
.button-a{
background-color:#5cb85c;
border:1PX solid #5cb85c;
}
}
}
.page-section{
border-bottom: 1Px solid #d6e4ef;
}
.selected{
display: inline-block;
margin-left: 20%;
font-size: 32rpx
}
.input-box{
border-bottom: 1Px solid #d6e4ef;
display: flex;
}
.require{
color:red;
line-height:100rpx;
}

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

@ -473,7 +473,7 @@ class Shop extends Component {
// 店铺详情
const shopDescriptionElement = <View className='shop-description'>
<View className='img-box'>
<Image mode='aspectFill' src={URL.Base + 'Public/images/shop/bg_banner.png'} style='height:150px' />
<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}
@ -513,7 +513,7 @@ class Shop extends Component {
<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='aspectFill' style='height:120px' />
<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'>

10
src/serviceAPI.config.js
View File

@ -10,7 +10,7 @@ const URL = {
GetConsultInfo: LOCALURL + 'Shop-consultTips',// 咨询信息
BuyConsult: LOCALURL + 'Shop-consult',// 购买咨询
GetShopItemDetail: LOCALURL + 'GoodsQuery-wxGoodsDetail',// 商品详情
UploadDSPorductImage: LOCALURL + 'Supply-fileUpload',// 上传图片API
UploadDSPorductImage: LOCALURL + 'Supply-fileUpload',// 上传供求图片
@ -29,9 +29,15 @@ const URL = {
SearchResult: LOCALURL + 'GoodsSearch-search',// 得到搜索结果
SearchBarKeyWords: LOCALURL + 'Search-getKeywords',// 搜索栏接口
// 商品发布api接口
UploadGoodsPorductImage: LOCALURL + 'Goods-fileUpload',// 上传商品
UploadGoodsPorductImage: LOCALURL + 'Goods-fileUpload',// 上传商品图片
UploadProduct: LOCALURL + 'Goods-phonePost',// 上传商品
UploadSupplyDemand: LOCALURL + 'Supply-post',// 上传供求
MyGoodList: LOCALURL + 'GoodsList-goodsAjax',// 我的商品列表
// 商品列表的api 接口 GoodsList-goodsDelete
DeleteGood: LOCALURL + 'GoodsList-goodsDelete',// 删除商品列表接口
ChangeGoodState: LOCALURL + 'GoodsList-setGoodsState',// 改变商品列表状态 （下架）
// 我的供求页面接口Supply-myList
SearchDemandSupply: LOCALURL + 'Supply-myList',// 搜索我的供求接口
DeleteDemandSupply: LOCALURL + 'Supply-delete',// 删除我的供求接口

18
src/todo list.txt
View File

@ -11,23 +11,25 @@ todo list：
店铺分类选项 二级联动// 需要修改
商品价格无法设定为数字 // 有bug
需要写商品列表页面吗？
供求发布页面
等待后台- 供求类型 和供求状态
联系电话无法设置为数字 // 有bug type=‘password’ 可以
全部业主需求页面：
供求状态 和行业分类--等待后台接口
供求状态和行业分类--等待后台接口--搜索
我的供求页面：
搜索接口--等待后台
我的供求查看页面
我的供求编辑页面--等待后台接口
我的供求编辑页面--等待后台接口数据
我的商品列表页面
我的商品列表数据
我的商品--筛选项目
商品编辑页面??
等待后台的搜索- 宝贝类目
商品价格无法设定为数字 // 有bug
商品编辑页面
等待后台api
alldemanding