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';
import commonUtil from './utils/commonutil';
import http_showcase from '../pages/services/showcase';

export default class userCenter extends BasePage {
	componentDidMount() {
		this.getUCENTER_RECOMMEND();
		//触发更新
		this.refreshSubScription = DeviceEventEmitter.addListener('infoback', () => {
			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
				});
			});
		});
		DeviceEventEmitter.emit('infoback');
	}
	componentWillUnmount() {
		this.refreshSubScription.remove();
	}
	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: 'Phone'
			}
		],
		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: { uri: '' }
		},
		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() {
		DeviceEventEmitter.emit('indexInfo');
		//返回上一页
		this.props.navigation.goBack();
	}
	getUCENTER_RECOMMEND() {
		http_showcase.getUCENTER_RECOMMEND().then((res) => {
			console.log('====================================');
			console.log('res', res.data[0].boothContent);
			console.log('====================================');
			this.setState({
				discount: {
					title: res.data[0].title,
					icon: { uri: res.data[0].boothContent }
				}
			});
		});
	}
	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.toNextPage('PersonalInfo')}
							/>
						</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')} />
									) : 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) {
		if (index === 'Phone') {
			commonUtil.callPhone('.......');
		} else {
			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'
	}
});