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

fix 支付宝 个人中心按钮，商品详情页tab

Browse Source
This commit is contained in:
郑茂强 2019-03-15 11:35:42 +08:00
parent fc44a8b828
commit 4de39359e7
8 changed files with 202 additions and 971 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.js
View File

@ -20,7 +20,7 @@ class App extends Component {
config = {
pages: [
//'pages/index/index', // index页面
'pages/home/home',//首页 ---------------------
'pages/login/login',//登入页面 ---------------------

20
src/component/backToCenterComponent/backToCenterComponent.js
View File

@ -1,6 +1,6 @@
//scrollToTopComponent
import Taro, { Component } from '@tarojs/taro'
import { View, Text,MovableArea, MovableView } from '@tarojs/components'
import { View, Text, MovableArea, MovableView } from '@tarojs/components'
import './backToCenterComponent.scss'
@ -14,9 +14,9 @@ class BackToCenterComponent extends Component {
}
goToCenterPage(){
goToCenterPage() {
Taro.switchTab({
url:'/pages/individualCenter/individualCenter'
url: '/pages/individualCenter/individualCenter'
})
}
@ -35,17 +35,11 @@ class BackToCenterComponent extends Component {
render() {
return (
// <View className='backToCenterComponent' onClick={this.goToCenterPage.bind(this)}>
// <View className='box'>
// <View>个人中心</View>
// </View>
// </View>
<MovableArea style='height: 100vh; width: 100%; position:fixed; top:0; '>
<View>hello world</View>
<MovableView style='height: 50px; width: 50px; background: blue;opacity:1' direction='all'></MovableView>
</MovableArea>
<View>hello world</View>
<MovableView style='height: 50px; width: 50px; background: blue;opacity:1' direction='all'></MovableView>
</MovableArea>
)
}
}

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

@ -34,19 +34,19 @@ class Goods extends Component {
totalSold: '',//总销量
browsingCount: '',// 浏览数
shopId: '',
actived:0// 默认tab
actived: 0,// 默认tab
subActived:0,//默认sub-tab
}
}
// 商品详情api
getGoodDescription() {
Taro.request({
url: URL.GetShopItemDetail,
method: 'POST',
dataType: 'json',
data: {
goodsID: this.$router.params.id,
goodsID: escape(this.$router.params.id).replace('+', '%2B'),
},
header: {
'content-type': 'application/x-www-form-urlencoded',
@ -125,10 +125,16 @@ class Goods extends Component {
})
}
clickTabHandler(e){
let value=onClickValueService(e)
clickTabHandler(e) {
let value = onClickValueService(e)
this.setState({
actived:value
actived: value
})
}
clickSubTabHandler(e) {
let value = onClickValueService(e)
this.setState({
subActived: value
})
}
// 数量或者规格方法
@ -155,13 +161,21 @@ class Goods extends Component {
componentDidHide() { }
render() {
const { actived,subActived } = this.state
const mainTabList = [{ title: '宝贝详情' }, { title: '全部评价' }, { title: '猜你喜欢' }]
const tabArrayElement=mainTabList.map((item,index)=>{
return <View className={this.state.actived===index?'tab actived':'tab'} key={index} onClick={this.clickTabHandler.bind(this,index)}>
const subTabList = [{ title: '全部' }, { title: '好评' }, { title: '中评' }, { title: '差评' }, { title: '公开' }, { title: '匿名' }]
const tabArrayElement = mainTabList.map((item, index) => {
return <View className={actived === index ? 'tab actived' : 'tab'} key={index} onClick={this.clickTabHandler.bind(this, index)}>
{item.title}
</View>
})
const subTabArrayElement = subTabList.map((item, index) => {
return <View className={subActived === index ? 'sub-tab sub-actived' : 'sub-tab'} key={index} onClick={this.clickSubTabHandler.bind(this, index)}>
{item.title}
</View>
})
// const subTabList = [{ title: '全部' }, { title: '好评' }, { title: '差评' }, { title: '公开' }, { title: '匿名' }]
const itemPicsBannerElementArray = this.state.productImagesUrl.map((item, index) => {
return <SwiperItem key={index} >
@ -183,13 +197,13 @@ class Goods extends Component {
<View className='img-box'>
{/* <Image className='img' src={URL.Base + this.state.productImagesUrl}></Image> */}
<Swiper
className='swipper'
style='height:100%;'
indicatorColor='#999'
indicatorActiveColor='#333'
hotizontal
circular
indicatorDots
className='swipper'
style='height:100%;'
indicatorColor='#999'
indicatorActiveColor='#333'
hotizontal
circular
indicatorDots
>
{itemPicsBannerElementArray}
@ -255,74 +269,53 @@ class Goods extends Component {
</Picker>
</View>
{/* 详情和评论区 */}
<View className='tab-wrapper'>
<View className='tabs'>
{tabArrayElement}
</View>
<View className='details-box'>
{tabArrayElement}
{/* 大类 */}
<AtTabs className='alltabs' animated={false} current={this.state.current} tabList={mainTabList} onClick={this.handleClick.bind(this)}>
<AtTabsPane style='color:red' current={this.state.current} index={0} >
<View style='background-color: #FAFBFC;' >
<View className='description-title'>商品细节：</View>
<View className='description-img'>
{itemDescriptionPicsElementArray}
</View>
</View>
</AtTabsPane>
<AtTabsPane current={this.state.current} index={1}>
<View style='padding: 1px 0px 100px;background-color: #FAFBFC;text-align: center;'>
{ /*子标签类*/}
<AtSegmentedControl selectedColor='#FF9500'
values={['全部', '好评', '中评', '差评', '公开', '匿名']}
onClick={this.onClick.bind(this)}
current={this.state.subCurrent}
/>
{
this.state.subCurrent === 0
? <View className='tab-content'>
<Text className='title'>全部</Text>
</View>
: null
}
{
this.state.subCurrent === 1
? <View className='tab-content'>好评</View>
: null
}
{
this.state.subCurrent === 2
? <View className='tab-content'>中评</View>
: null
}
{
this.state.subCurrent === 3
? <View className='tab-content'>差评</View>
: null
}
{
this.state.subCurrent === 4
? <View className='tab-content'>公开</View>
: null
}
{
this.state.subCurrent === 5
? <View className='tab-content'>匿名</View>
: null
}
</View>
</AtTabsPane>
<AtTabsPane current={this.state.current} index={2}>
<View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页三的内容</View>
</AtTabsPane>
</AtTabs>
</View>
<View className='tab-details'>
{actived === 0 && <View className='first-tab' style='background-color: #FAFBFC;' >
<View className='description-title'>商品细节：</View>
<View className='description-img'>
{itemDescriptionPicsElementArray}
</View>
</View>
}
{actived===1&& <View className='second-tab'>
<View className='tab-header'> {subTabArrayElement}</View>
{
subActived===0&&<View className='sub-tab-details'>全部</View>
}
{
subActived===1&&<View className='sub-tab-details'>好评</View>
}
{
subActived===2&&<View className='sub-tab-details'>中评</View>
}
{
subActived===3&&<View className='sub-tab-details'>差评</View>
}
{
subActived===4&&<View className='sub-tab-details'>公开</View>
}
{
subActived===5&&<View className='sub-tab-details'>匿名</View>
}
</View>}
{actived === 2 && <View className='third-tab' >标签页三的内容</View>}
</View>
</View>
<CopyrightComponent></CopyrightComponent>
<View className='gap' style='height:150rpx'>

82
src/pages/goods/goods.scss
View File

@ -119,30 +119,7 @@ $themeColor:#FF7142;
}
//------------------------------
.details-box{
.at-tabs{
.at-tabs__item--active{
// color:$themeColor
}
}
.description-title{
font-size:35px;
color:#999;
margin-top:20px;
margin-left: 20px;
margin-bottom: 20px;
font-weight: bold;
}
.description-img{
padding:0 10px;
font-size: 0px;
}
}
//------------------------------
.copyright-box{
padding:0 20px;
@ -219,7 +196,7 @@ $themeColor:#FF7142;
flex-direction: row;
height: 80px;
border-bottom: 1px solid #d6e4ef;
border-bottom: 0.01px solid #d6e4ef;
.tab{
flex:1;
text-align: center;
@ -229,4 +206,59 @@ $themeColor:#FF7142;
color:#FF7142;
border-bottom: 3px solid#FF7142
}
}
.tab-details{
border: 1px solid #d6e4ef;
.first-tab{
.description-title{
font-size:35px;
color:#999;
margin-top:20px;
margin-left: 20px;
margin-bottom: 20px;
font-weight: bold;
}
.description-img{
padding:0 10px;
font-size: 0px;
}
}
.second-tab{
.tab-header{
display: flex;
flex-wrap: nowrap;
flex-direction: row;
border-bottom: 0.1px solid #d6e4ef;
.sub-tab{
flex:1;
text-align: center;
padding: 12px;
}
}
.sub-tab-details{
padding: 100px 50px;
background-color: #FAFBFC;
text-align: center;
}
}
.third-tab{
padding: 100px 50px;
background-color: #FAFBFC;
text-align: center;
}
.actived{
color:#FF7142;
border-bottom: 3px solid#FF7142
}
.sub-actived{
color:#FF7142;
border: 2px solid#FF7142;
border-radius: 10%;
}
}

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

@ -331,7 +331,9 @@ class Home extends Component {
}
componentWillMount() {
Taro.navigateTo({
url: '/pages/goods/goods?id=4a0eQpU8YI68yN2ZTc5rchTiEzCAaaiK0UEeWzvDPE0bVw'
})
}
componentWillUnmount() { }

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

@ -843,9 +843,9 @@ class MyGoodList extends Component {
<CopyrightComponent></CopyrightComponent>
</View>
<MovableView className='movable-point' x={this.state.screenWidth} y={this.state.screenHeight} style='opacity:0.3' direction='all' onClick={this.goToCenterPage.bind(this)} >
<MovableView className='movable-point' x={this.state.screenWidth} y={this.state.screenHeight} style='opacity:0.3' direction='all'>
个人中心
<View onClick={this.goToCenterPage.bind(this)}> 个人中心</View>
</MovableView>
</MovableArea>
)

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

@ -5,7 +5,6 @@ import URL from '../../serviceAPI.config'
import ScrollToTopComponent from '../../component/scrollToTopComponent/scrollToTopComponent'
import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
import LoginService from '../../util/LoginService'
import loginExpired from '../../util/loginExpired'
@ -477,10 +476,10 @@ class MySupplyDemand extends Component {
<CopyrightComponent></CopyrightComponent>
</View>
<MovableView className='movable-point' x={this.state.screenWidth} y={this.state.screenHeight} style='opacity:0.3' direction='all' onClick={this.goToCenterPage.bind(this)} >
<MovableView className='movable-point' x={this.state.screenWidth} y={this.state.screenHeight} style='opacity:0.3' direction='all' >
<View onClick={this.goToCenterPage.bind(this)}> 个人中心</View>
个人中心
</MovableView>
</MovableView>
</MovableArea>
)
}

899
todo list.json
View File

@ -17,857 +17,68 @@ bug： 商品编辑 增加图片后 图片顺序乱了
等待后台--- 单个我的商品页面的图片顺序，单个我的需求页面的接口, 当个我哦的需求编辑页面的接口
import Taro, { Component } from '@tarojs/taro'
import { View, Radio, Button, MovableArea, MovableView } from '@tarojs/components'
import { AtInput, Text, AtIcon, Picker, Image, AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui'
import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
import ScrollToTopComponent from '../../component/scrollToTopComponent/scrollToTopComponent'
import URL from '../../serviceAPI.config'
import './myGoodList.scss'
import loginExpired from '../../util/loginExpired';
import onClickValueService from '../../util/onClickValueService';
import { getGlobalStorage } from '../../util/getSetStoage';
import { showLoading } from '../../util/hideShowLoading';
<View className='details-box'>
class MyGoodList extends Component {
config = {
navigationBarTitleText: '商品列表'
}
constructor() {
super(...arguments)
this.state = {
productName: '',
lowestPrice: '',
heightestPrice: '',
minimumSold: '',
maximumSold: '',
order: '',// 商品列表排序参数
productId: '',// 商品编号参数
productCate: [], //宝贝类目
productCateSelected: { id: '', name: '全部类目' },// 已选宝贝类目
filterBar: ['filterPrice', 'filterStock', 'filterSold', 'filterPublishDate',], //筛选选项
filterBarKeys: { filterPrice: '价格', filterStock: '库存', filterSold: '总销量', filterPublishDate: '发布时间' }, // 筛选选项对应值
filterOptions: {
filterPrice: false,
filterStock: false,
filterSold: false,
filterPublishDate: false,
}, // 正反排序
selectedFilterValue: 0, //
myGoodList: [],// 保存后台返回的商品列表
myGoodListTotal: '0',// 后台的商品总数
goodsStateParam: 1,//商品状态参数
pageCountParam: 20,// 商品数量参数
currPageParam: 1,// 当前页面 参数
isCheckAll: false,// 是否checked
goodsIdList: [],//商品Id 列表
isOpenDeleteModal: false,// 是否显示删除模态框
isOpenOffStockModal: false,// 是否显示下架模态框
isAddToList: false,// 是否下拉加载 如果是 就添加商品到我的商品列表
isShowTopNav: false,// 是否显示返回顶部按钮
screenWidth: '',
screenHeight: ''
}
}
{/* 大类 */}
<AtTabs className='alltabs' animated={false} current={this.state.current} tabList={mainTabList} onClick={this.handleClick.bind(this)}>
<AtTabsPane style='color:red' current={this.state.current} index={0} >
<View style='background-color: #FAFBFC;' >
<View className='description-title'>商品细节：</View>
<View className='description-img'>
{itemDescriptionPicsElementArray}
productNameChange(event) {
this.setState({ productName: event })
}
productIdChange(event) {
this.setState({ productId: event })
}
lowestPriceChange(event) {
this.setState({ lowestPrice: event })
}
heightestPriceChange(event) {
this.setState({ heightestPrice: event })
}
minimumSoldChange(event) {
this.setState({ minimumSold: event })
}
maximumSoldChange(event) {
this.setState({ maximumSold: event })
}
productCateChange = e => {
this.setState({
productCateSelected: this.state.productCate[e.detail.value]
})
}
//获取宝贝类目搜索列表接口api
getBaoBeiCateList() {
Taro.request({
url: URL.BaoBeiCateList,
method: 'POST',
dataType: 'json',
header: {
'Cookie': 'PFWSSS=' + getGlobalStorage('session_id'),
'content-type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest'
}
}).then(res => {
console.log('宝贝类目', res)
if (res.data.err_code != 10) {
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 })
} else {
Taro.showToast({
title: res.data.err_msg,
icon: 'none',
duration: 1500,
})
}
})
}
// 获取我的商品列表接口api
getMyGoodListApi({
goodsName = this.state.productName,
goodsSn = this.state.productId,
goodsClass = this.state.productCateSelected.id,
goodsPriceL = this.state.lowestPrice,
goodsPriceU = this.state.heightestPrice,
goodsSalesL = this.state.minimumSold,
goodsSalesU = this.state.maximumSold,
goodsState = this.state.goodsStateParam,
pageCount = this.state.pageCountParam,
currPage = this.state.currPageParam,
order = this.state.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,
goodsState: goodsState,
pageCount: pageCount,
currPage: currPage,
order: order
},
header: {
'Cookie': 'PFWSSS=' + getGlobalStorage('session_id'),
'content-type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest'
}
}).then(res => {
const data = JSON.parse(res.data)
if (data.err_code === 88888) {
loginExpired(data)
} else if (data.err_code != 10) {
console.log('我的商品列表', JSON.parse(res.data))
Taro.hideLoading()
if (data.goodsCount != '0' && data.goods.length) {
data.goods.forEach(item => {
item.checked = false
});
if (this.state.isAddToList) {
this.setState({ myGoodList: this.state.myGoodList.concat(data.goods) }, () => {
this.setState({ isAddToList: false })
})
} else {
this.setState({
myGoodList: data.goods,
myGoodListTotal: data.goodsCount
})
}
} else {
if (data.goods === null) {
this.setState({
myGoodList: [],
myGoodListTotal: data.goodsCount
})
} else {
this.setState({ isAddToList: false })
Taro.showToast({
title: '没有更多了',
icon: 'none'
})
}
}
} else {
Taro.showToast({
title: data.err_msg,
icon: 'none'
})
}
})
}
// 获取搜索结果api
// getMyGoodListApi({
// goodsName = this.state.productName,
// goodsSn = '',
// goodsClass = this.state.productCateSelected.id,
// 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=' + getGlobalStorage('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
// })
// Taro.hideLoading()
// } 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=' + getGlobalStorage('session_id'),
'content-type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest'
}
}).then(res => {
let responseData = JSON.parse(res.data)
Taro.hideLoading()
if (responseData.err_code === 0) {
this.setState({
isCheckAll: false,
currPageParam: 1,
}, () => {
this.getMyGoodListApi({})
Taro.showToast({
title: '下架成功',
icon: 'success',
duration: 1500
})
})
} else if (responseData.err_code === 88888) {
loginExpired(res)
} else {
Taro.showToast({
title: responseData.err_msg,
icon: 'none',
duration: 1500
})
this.setState({ isCheckAll: false })
}
})
}
// 商品列表删除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=' + getGlobalStorage('session_id'),
'content-type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest'
}
}).then(res => {
let responseData = JSON.parse(res.data)
Taro.hideLoading()
if (responseData.err_code === 0) {
Taro.showToast({
title: '删除成功',
icon: 'success',
duration: 1500
}).then(() => {
this.setState({ isCheckAll: false, currPageParam: 1 }, () => {
this.getMyGoodListApi({})
})
})
} else if (responseData.err_code === 88888) {
loginExpired(res)
} else {
Taro.showToast({
title: responseData.err_msg,
icon: 'none',
duration: 1500
})
this.setState({ isCheckAll: false })
}
})
}
// 搜索
searchButtonHandler() {
showLoading({
title: '加载中',
})
this.setState({ currPageParam: 1, isCheckAll: false, order: '' }, () => {
this.getMyGoodListApi({})
})
}
// 清空搜索
emptyButtonHanlder() {
this.setState({
isCheckAll: false,
currPageParam: 1,
productName: '',
lowestPrice: '',
heightestPrice: '',
minimumSold: '',
maximumSold: '',
productId: '',
productCateSelected: { id: '', name: '全部类目' },
order: '',
}, () => {
this.getMyGoodListApi({})
Taro.showToast({
title: '已清空',
icon: 'success',
duration: 1000
})
})
}
// 产品排序
accendingDescending(e) {
showLoading({
title: '加载中'
})
const value = onClickValueService(e)
this.setState({ selectedFilterValue: value })
if (value == 0) {
this.setState({
currPageParam: 1,
filterOptions: {
filterPrice: !this.state.filterOptions.filterPrice,
filterStock: false,
filterSold: false,
filterPublishDate: false,
}
}, () => {
this.state.filterOptions.filterPrice ? this.setState({ order: "goods_price" }, () => {
this.getMyGoodListApi({})
}) : this.setState({ order: "goods_price desc" }, () => {
this.getMyGoodListApi({})
})
})
}
if (value == 1) {
this.setState({
currPageParam: 1,
filterOptions: {
filterPrice: false,
filterStock: !this.state.filterOptions.filterStock,
filterSold: false,
filterPublishDate: false,
}
}, () => {
this.state.filterOptions.filterStock ? this.setState({ order: "goods_stock" }, () => {
this.getMyGoodListApi({})
}) : this.setState({ order: "goods_stock desc" }, () => {
this.getMyGoodListApi({})
})
}
)
}
if (value == 2) {
this.setState({
currPageParam: 1,
filterOptions: {
filterPrice: false,
filterStock: false,
filterSold: !this.state.filterOptions.filterSold,
filterPublishDate: false,
}
}, () => {
this.state.filterOptions.filterSold ? this.setState({ order: "sales_volume " }, () => {
this.getMyGoodListApi({})
}) : this.setState({ order: "sales_volume desc" }, () => {
this.getMyGoodListApi({})
})
}
)
}
if (value == 3) {
this.setState({
currPageParam: 1,
filterOptions: {
filterPrice: false,
filterStock: false,
filterSold: false,
filterPublishDate: !this.state.filterOptions.filterPublishDate,
}
}, () => {
this.state.filterOptions.filterPublishDate ? this.setState({ order: "update_date desc" }, () => {
this.getMyGoodListApi({})
}) : this.setState({ order: "update_date" }, () => {
this.getMyGoodListApi({})
})
}
)
}
}
// 商品全部选择
checkAllHandler() {
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(e) {
//如果goodid 一样的那么checked 就取反
console.log('clicke')
const id = onClickValueService(e)
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(e) {
console.log('e', e)
const goodId = onClickValueService(e)
console.log('goodId', goodId)
Taro.navigateTo({
url: '/pages/myGoodsEdit/myGoodsEdit?id=' + goodId
})
}
// 导航到商品发布页面
goToGoodsPublishPage() {
Taro.navigateTo({
url: '/pages/goodsPublish/goodsPublish'
})
}
goToGoodspage(e) {
const goodId = onClickValueService(e)
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)
}
});
showLoading({
title: '加载中'
})
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)
}
});
showLoading({
title: '加载中'
})
this.changeGoodState({ goodsID: checkedGoodsId })
}
offStockModalClose() {
this.setState({
isOpenOffStockModal: false
})
}
goToCenterPage() {
Taro.switchTab({
url: '/pages/individualCenter/individualCenter'
})
}
getUserSystemInfo() {
Taro.getSystemInfo().then(res => {
return res
}).then(res => {
this.setState({
screenWidth: res.screenWidth - 80 + 'px',
screenHeight: res.screenHeight - 200 + 'px'
})
})
}
componentDidMount() {
this.getUserSystemInfo()
showLoading({
title: '加载中'
})
this.getMyGoodListApi({})
this.getBaoBeiCateList()
}
componentWillReceiveProps(nextProps) {
console.log(this.props, nextProps)
}
componentWillUnmount() { }
componentDidShow() {
}
componentDidHide() { }
// 页面位置
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() {
showLoading({
title: '加载中'
})
this.setState({ isAddToList: true, currPageParam: this.state.currPageParam + 1 }, () => {
this.getMyGoodListApi({})
})
}
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} /> */}
<Image className='img' style='height:100%;width:100%' 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>
</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>
})
// 删除提示模态弹窗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 (
<MovableArea style='height: 100vh; width: 100%; '>
<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}
</AtTabsPane>
<AtTabsPane current={this.state.current} index={1}>
<View style='padding: 1px 0px 100px;background-color: #FAFBFC;text-align: center;'>
{ /*子标签类*/}
<AtSegmentedControl selectedColor='#FF9500'
values={['全部', '好评', '中评', '差评', '公开', '匿名']}
onClick={this.onClick.bind(this)}
current={this.state.subCurrent}
/>
</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>
{this.state.myGoodList.length ? <View className='mygoodlist-container'>
{goodListElementArray}
</View > : <View className='no-more-title'> 没有更多了</View>}
{this.state.isShowTopNav ? <ScrollToTopComponent ></ScrollToTopComponent> : null}
<CopyrightComponent></CopyrightComponent>
{
this.state.subCurrent === 0
? <View className='tab-content'>
<Text className='title'>全部</Text>
</View>
: null
}
{
this.state.subCurrent === 1
? <View className='tab-content'>好评</View>
: null
}
{
this.state.subCurrent === 2
? <View className='tab-content'>中评</View>
: null
}
{
this.state.subCurrent === 3
? <View className='tab-content'>差评</View>
: null
}
{
this.state.subCurrent === 4
? <View className='tab-content'>公开</View>
: null
}
{
this.state.subCurrent === 5
? <View className='tab-content'>匿名</View>
: null
}
</View>
<MovableView className='movable-point' x={this.state.screenWidth} y={this.state.screenHeight} style='opacity:0.3' direction='all' onClick={this.goToCenterPage.bind(this)} >
</AtTabsPane>
<AtTabsPane current={this.state.current} index={2}>
<View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页三的内容</View>
</AtTabsPane>
</AtTabs>
个人中心
</MovableView>
</MovableArea>
)
}
}
export default MyGoodList
</View>