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