cf-wx-app/src/pages/individualCenter/individualCenter.js

import Taro, { Component } from '@tarojs/taro'
import { View, Image, Button } from '@tarojs/components'
import { AtGrid, AtList, AtListItem, AtAvatar, AtButton } from "taro-ui"

import LoginService from '../../util/LoginService'
import './individualCenter.scss'
import URL from '../../serviceAPI.config'




class IndividualCenter extends Component {
    config = {
        navigationBarTitleText: '个人中心'
    }
    constructor() {
        this.state = {
            client: [
                {
                    image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
                    value: '需求发布'
                },
                {
                    image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
                    value: '我的需求'
                }

            ],
            seller: [
                {
                    image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
                    value: '我的商品'
                },
                {
                    image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
                    value: '商品发布'
                },
                {
                    image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
                    value: '我的供求'
                },
                {
                    image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png',
                    value: '供求发布'
                }
            ],
            username: '',
            avatar: '',
            isShop: false,
        }
    }
    handlerGridClick(e) {
        const value = e.currentTarget.dataset.eTapAA.value
        switch (value) {
            case '需求发布':
                Taro.switchTab({
                    url: '/pages/myNeedsPublish/myNeedsPublish'
                })
                break;
            case '我的需求':
                Taro.switchTab({
                    url: '/pages/myNeeds/myNeeds'
                })
                break;
            case '我的商品':
                Taro.navigateTo({
                    url: '/pages/myGoodList/myGoodList'
                })
                break;
            case '商品发布':
                Taro.navigateTo({
                    url: '/pages/goodsPublish/goodsPublish'
                })
                break;
            case '我的供求':
                Taro.navigateTo({
                    url: '/pages/mySupplyDemand/mySupplyDemand'
                })
                break;
            case '供求发布':
                Taro.navigateTo({
                    url: '/pages/supplyDemandPublish/supplyDemandPublish'
                })
                break;

            default:
            // code block
        }
    }
    handlerTitleBarClick() {
        Taro.showToast({
            title: '暂时没有更多',
            icon: 'none'
        })
    }
    getInfoFromStorage() {
        const username = Taro.getStorageSync('userInfo').login_name
        const avatar = Taro.getStorageSync('userInfo').avatar
        const isShop = Taro.getStorageSync('shopInfo').shop_id ? true : false
        this.setState({
            username, avatar, isShop
        })
    }
    handleLogoutClick() {
        Taro.clearStorageSync()
        Taro.reLaunch({
            url: '/pages/login/login'
        })

    }
    componentDidMount() {
        this.getInfoFromStorage()
    }
    componentWillReceiveProps(nextProps) {
        console.log(this.props, nextProps)
    }

    componentWillUnmount() { }

    componentDidShow() {
        if (!Taro.getStorageSync('userInfo').user_id) {
            LoginService()
            return
          }
     }

    componentDidHide() { }

    render() {
        const { client, seller, username, avatar, isShop } = this.state
        return (
            <View className='individualCenter'>
                <View className='avatar'>
                    <AtAvatar circle={true} size={'large'} image={URL.Base + avatar}></AtAvatar>
                    <View className='user-name'>
                        <View className='name'>
                            {username}</View>
                        <View className='badge'>????</View>
                    </View>
                </View>
                <View className='client-container'>
                    <View className='bg-image'>
                        <Image
                            style='width: 100%;height: 250rpx;'
                            src={URL.Base + 'Public/images/m/bg.jpg'}
                        />
                    </View>
                    <View className='row'>
                        <View className='title'>收藏的宝贝</View>|
                     <View className='title'>收藏的店铺</View>|
                     <View className='title'>我的足迹</View>
                    </View>
                    <AtList>
                        <AtListItem hasBorder={false} title='业主中心' onClick={this.handlerTitleBarClick.bind(this)} extraText='更多' arrow='right' />
                    </AtList>
                    <AtGrid hasBorder={false} data={client} columnNum={4} onClick={this.handlerGridClick.bind(this)} />
                </View>

                {isShop ? <View className='seller-container'>
                    <AtList>
                        <AtListItem hasBorder={false} title='店铺中心' onClick={this.handlerTitleBarClick.bind(this)} extraText='更多' arrow='right' />
                    </AtList>
                    <AtGrid  hasBorder={false} data={seller} columnNum={4} onClick={this.handlerGridClick.bind(this)} />
                </View> : <View />}
                <View className='logout' onClick={this.handleLogoutClick.bind(this)}>
                    {/* <AtButton type='primary' size='normal'>退出</AtButton> */}
                    <Button type='primary' size='noraml' className='button-dark-red' >
                        退出</Button>
                </View>
            </View>
        )
    }
}

export default IndividualCenter