efunbox-mobile-8/pages/userCenter.js

/* 
 * 个人中心页面
*/
import React, { Component } from "react";
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    ImageBackground,
    Button,
    StatusBar,
    Modal,
    TouchableHighlight,
    DeviceEventEmitter,
    ScrollView
} from "react-native";
import BasePage from "./BasePage";
import Dimensions from './utils/dimensions';
import ShopBox from "./components/ShopBox";
import TopicTitle from './components/TopicTitle';
import ScrollRow from './components/ScrollRow';
import CourseTitle from "./components/CourseTitle";
import user from './services/user'

export default class userCenter extends BasePage {
    componentDidMount() {
        user.userMember().then(res => {
            console.log('个人列表',res) 
            // 收藏 
            const favoritesList = res.data.favoritesList;
            //观看记录
            const playLogList = res.data.playLogList;
            // 用户消息
            const user = res.data.user;
            // VIP
            const vip = res.data.vip;
            this.setState({
                favoritesList,
                playLogList,
                user,
                vip
            })
        });
    }
    state = {
        nickName: "初始昵称",
        user: {},
        ifDiscount: true,
        isVIP: false,
        btnArr: [
            { title: '订单', icon: require('./images/userCenter/order.png'), goTo: 'Order' },
            { title: '抵用券', icon: require('./images/userCenter/discount.png'), goTo: 'Ticket' },
            { title: '客服', icon: require('./images/userCenter/service.png'), goTo: 'Order' },
        ],
        shopData: [
            { title: '1个月', originPrice: '199', price: '49', background: require('./images/shopBox/left.png') },
            { title: '12个月', originPrice: '499', price: '199', background: require('./images/shopBox/right.png') }
        ],
        discount: { title: '限时秒杀', icon: require('./images/shopBox/discount.png') },
        favoritesList: [],
        playLogList: [],
        vip: false

    };
    renderBtn = (item, index) => {
        return (
            <TouchableOpacity key={index} onPress={() => this.goTo(`${item.goTo}`)} style={{display: 'flex', justifyContent: 'space-between'}}>
                <View style={styles.btnItem}>
                    <Image
                        source={item.icon}
                        style={styles.btnIcon}
                    />
                    <Text
                        style={styles.btnTitle}
                    >
                        {item.title}
                    </Text>
                </View>
            </TouchableOpacity>
        )
    }
    goBack() {
        //返回上一页
        this.props.navigation.goBack();
    }
    render() {
        return (

            <ScrollView style={{ height: 1100, overflow: 'scroll', backgroundColor: '#fff' }}>
                <View style={styles.topSection}>
                    <ImageBackground
                        source={
                            require('./images/userCenter/top-bg.png')
                        }
                        style={{ width: '100%', height: 203 }}
                    >
                        <StatusBar
                            backgroundColor={"transparent"}
                            barStyle={"dark-content"}
                            // backgroundColor={"white"}
                            translucent={true}
                            hidden={false}
                        />
                        <View
                            style={{
                                height: 30,
                                // backgroundColor: "white"
                                marginTop: 20
                            }}
                        >
                            <CourseTitle
                                width={this.getWindowWidth()}
                                title="个人中心"
                                lefttype={2}
                                righttype={2}
                                textcolor={"#fff"}
                                backPress={() => this.goBack()}
                            // backgroundColor={"transparent"}
                            // rightPress={this.showSharedDialog.bind(this)}
                            />
                        </View>
                        <View style={styles.userInfo}>
                            <TouchableOpacity onPress={() => this.goTo(`PersonalInfo`)}>
                                <Image style={styles.userAvatar} source={{ uri: this.state.user.avatar }} />
                            </TouchableOpacity>

                            <View style={styles.userRight}>
                                <View style={styles.userName}>
                                    <Text style={styles.userNameText}>{this.state.user.nickName}</Text>
                                    {
                                        this.state.vip ? 
                                        <Image style={styles.vipTag} source={require('./images/common/vip.png')}></Image>: 
                                         null
                                    }
                                </View>
                                {
                                    this.state.vip ? 
                                    null : 
                                    <View style={styles.userName}>
                                        <Text style={styles.vipSologan}>开通vip</Text>
                                    </View>
                                }
                            </View>
                        </View>
                        <View style={styles.btnBoxWrapper}>
                            <View style={styles.btnBox}>
                                {this.state.btnArr.map((item, index) => this.renderBtn(item, index))}
                            </View>
                        </View>

                    </ImageBackground>

                </View>
                <View style={styles.discountSection}>
                    <ShopBox data={this.state.shopData} discount={this.state.discount} nav={this.props.navigation.navigate} />
                </View>
                <View style={styles.recordSection}>
                    <TopicTitle title={'观看记录'} ifTubeShow={true} />
                    <ScrollRow itemWidth={106} itemHeight={153} data={this.state.playLogList} />
                </View>
                <View style={styles.collectSection}>
                    <TopicTitle title={'我的收藏'} ifTubeShow={true} />
                    <ScrollRow itemWidth={106} itemHeight={150} data={this.state.favoritesList} />
                </View>
            </ScrollView>
        )
    }
    goTo(index) {
        this.toNextPage(index)
    }
}

const styles = StyleSheet.create({
    topSection: {
        height: 250,
        width: Dimensions.width,
        // backgroundColor: 'red'
    },
    userInfo: {
        width: Dimensions.width,
        height: 70,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
    },
    userAvatar: {
        width: 67,
        height: 67,
        borderRadius: 55,
        marginHorizontal: 12
    },
    userRight: {
        flexDirection: 'column',
    },
    userName: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    userNameText: {
        fontSize: 18,
        color: '#fff',
        fontWeight: '500',
        marginRight: 9
    },
    vipSologan: {
        fontSize: 14,
        color: '#fff',
    },
    btnBoxWrapper: {
        width: Dimensions.width,
        alignItems: 'center',
        marginTop: 16
    },
    btnBox: {
        width: Dimensions.width * 343 / 375,
        height: 100,
        borderRadius: 10,
        shadowColor: '#000',
        // shadowOffset: 1,
        shadowOpacity: 2,
        shadowRadius: 5,
        elevation: 4,
        backgroundColor: '#fff',
        justifyContent: 'space-around',
        flexDirection: 'row',
    },
    btnItem: {
        height: '100%',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'
    },
    btnIcon: {
        width: 36,
        height: 24,
        marginBottom: 7
    },
    btnTitle: {
        color: '#3f3f3f',
        fontSize: 16,
    },
    discountSection: {
        width: Dimensions.width,
        // height: 242,
        // backgroundColor: 'green'
    },
    recordSection: {
        width: Dimensions.width,
        height: 235,
        // backgroundColor: 'blue'
    },
    collectSection: {
        width: Dimensions.width,
        height: 255,
        marginBottom: 20
        // backgroundColor: 'yellow'
    },

})