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() {
    //触发更新
    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: "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")}
                    />
                  ) : 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'
  }
});