HaggleListContainer.js 11.7 KB
'use strict';

import React, {Component} from 'react';
import ReactNative, {
    AsyncStorage,
    Platform,
    StyleSheet,
    View,
    Dimensions,
    InteractionManager,
    Text,
    TouchableOpacity
} from 'react-native'

import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {Map} from 'immutable';
import * as allianceActions from '../reducers/haggleListReducer/haggleActions';
import HaggleList from '../components/HaggleList'
import LoadingIndicator from '../../common/components/LoadingIndicator';
import {TipsAlertItem, TipsAlert} from '../../common/components/YH_TipsAlert';
import {YHAlert, YHAlertItem} from '../components/cell/YH_Alert.js';
import DeviceInfo from 'react-native-device-info';
import Prompt from '../../common/components/Prompt';

const actions = [
    allianceActions,
];

function mapStateToProps(state) {
    return {
        ...state
    };
}

function mapDispatchToProps(dispatch) {

    const creators = Map()
        .merge(...actions)
        .filter(value => typeof value === 'function')
        .toObject();

    return {
        actions: bindActionCreators(creators, dispatch),
        dispatch
    };
}

class HaggleListContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showAlert: false,
            productItem: null,
            showVersionAlert: false,
            showTitle: '',
            showDesc: '',
            selectUFO: true
        };
        this._onEndReached = this._onEndReached.bind(this);
        this._onPressProduct = this._onPressProduct.bind(this);
        this._jumpHaggleDetail = this._jumpHaggleDetail.bind(this);
        this._onPressCategory = this._onPressCategory.bind(this);
        this._hiddenTipsAlertDialog = this._hiddenTipsAlertDialog.bind(this);
        this._timerStop = this._timerStop.bind(this);
        this._resourceJumpWithUrl = this._resourceJumpWithUrl.bind(this);
        this._onRefresh = this._onRefresh.bind(this);
        this._onPromptHidden = this._onPromptHidden.bind(this);
    }

    componentDidMount() {
        this.props.actions.getResourceInfo(function (json) {
            json && json.forEach(item => {
            })
        });
        this.props.actions.getHaggleProductList();
        this.props.actions.getHaggleProductUFOList();
    }

    componentWillUnmount() {

    }

    _resourceJumpWithUrl(url, type, params) {
        if (!url) {
            return;
        }
        if (type === 'icon' && params) {
            ReactNative.NativeModules.YH_CommonHelper.logEvent('YB_CPS_MAIN_ICON_C', params);
        } else if (type === 'banner' && params) {
            ReactNative.NativeModules.YH_CommonHelper.logEvent('YB_CPS_MAIN_BANNER_C', params);
            ReactNative.NativeModules.YH_CommonHelper.logEvent('YB_BARGAIN_PRO_LIST_FLR_C', params);
        } else if (type && params) {
            ReactNative.NativeModules.YH_CommonHelper.logEvent('YB_CPS_MAIN_ACTIVITY_C', params);
        }
        ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
    }

    _onEndReached(categoryType) {
        if (categoryType == 0) {
            this.props.actions.getHaggleProductList();
            this.props.actions.getHaggleProductUFOList();
        } else if (categoryType == 1) {
            this.props.actions.getMyHaggleProductList();
        }
    }

    _onRefresh(categoryType) {
        InteractionManager.runAfterInteractions(() => {
            this.props.actions.refreshProductList(categoryType);
        });
    }

    _timerStop() {
        this.props.actions.refreshProductList(1);
    }

    _showTipsAlertDialog() {
        this.props.actions.showTipsAlertDialog();
    }

    _hiddenTipsAlertDialog() {
        this.setState({showAlert: false, productItem: null, showTitle: '', showDesc: ''});
    }

    _onPressCategory(index) {
        this.props.actions.setSelectedCategory(index);
    }

    _jumpHaggleDetail(product, status) {
        let productSkn = product && product.get('productSkn', 0);
        let activityId = product && product.get('activityId', 0);
        let cutRecordId = product && product.get('cutRecordId', 0);
        let shopId = product && product.get('shop_id', 0);
        let isUFOProduct = product && product.get('productType', 0);
        if (!productSkn) {
            return;
        }
        let url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.haggleDetail","params":{"type":"haggleDetail","title":"砍价详情", "productSkn":"${productSkn}", "activityId":"${activityId}","status": "${status}","isUFOProduct":"${isUFOProduct}","shopId":"${shopId}","cutRecordId":"${cutRecordId}"}}`;

        if (cutRecordId == 0) {
            url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.haggleDetail","params":{"type":"haggleDetail","title":"砍价详情", "productSkn":"${productSkn}", "activityId":"${activityId}","isUFOProduct":"${isUFOProduct}","shopId":"${shopId}","status": "${status}"}}`;
        }

        ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);

    }

    _onPromptHidden() {
        this.setState({showVersionAlert: false});
    }

    _onPressProduct(product, index) {
        let app_version = DeviceInfo.getVersion();
        if (Platform.OS === 'ios' && app_version === '6.8.3') {
            this.setState({showVersionAlert: true});
            return;
        }
        let {categoryType} = this.props.haggle;
        ReactNative.NativeModules.YH_CommonHelper.logEvent('YB_BARGAIN_PRO_LIST_FLR_C', {
            I_INDEX: Number(index) + 1,
            PRD_SKN: product.get('productSkn')
        });
        let that = this;
        if (categoryType == 1) {
            this._jumpHaggleDetail(product, 0);
        } else {

            this.props.actions.getHaggleStatus(product.get('productSkn'), product.get('activityId'), function (json) {
                if (json == 1) {
                    that.setState({
                        showAlert: true,
                        productItem: product,
                        showTitle: '当前有未完成的砍价!',
                        showDesc: '该商品正在砍价中,去邀请好友帮忙砍价吧!'
                    });
                } else if (json == 2) {
                    that.setState({
                        showAlert: true,
                        productItem: product,
                        showTitle: '无法重复发起砍价',
                        showDesc: '您已砍价成功,无法重复发起砍价'
                    });
                } else {
                    that._jumpHaggleDetail(product, 1);
                }
            });
        }
    }

    render() {
        let {productList, productUFOList, myHaggleProductList, resourceInfo, isShowAlert, categoryType} = this.props.haggle;
        let isFetching = productList.isFetching || myHaggleProductList.isFetching || productUFOList.isFetching;
        let isPullToRefresh = productList.isPullToRefresh || myHaggleProductList.isPullToRefresh || productUFOList.isPullToRefresh;
        let productListJson = productList && productList.toJS() || {}
        let productUFOListJson = productList && productUFOList.toJS() || {}
        let flag = false;
        if (productListJson.list && productUFOListJson.list && productListJson.list.length && productUFOListJson.list.length) {
            flag = true
        }

        return (
            <View style={styles.container}>

                <YHAlert
                    ref='YHAlert'
                    isShow={this.state.showAlert}
                    title={this.state.showTitle}
                    content={this.state.showDesc}
                    titleStyle={{paddingBottom: 3, fontWeight: 'normal'}}
                    contentStyle={{paddingBottom: 14, paddingLeft: 38, paddingRight: 38, lineHeight: 14, fontSize: 12}}
                >
                    <YHAlertItem key={'minCancel'} param={this.state.productItem} showStatus='LightGrayButton'
                                 handleAction={(param) => {
                                     {
                                         this._hiddenTipsAlertDialog()
                                     }
                                 }}>取消</YHAlertItem>
                    <YHAlertItem key={'minSure'} param={this.state.productItem} showStatus='redButton'
                                 handleAction={(param) => {
                                     {
                                         this._hiddenTipsAlertDialog()
                                     }
                                     {
                                         this._jumpHaggleDetail(param, 0)
                                     }
                                 }}>查看详情</YHAlertItem>
                </YHAlert>
                {categoryType == 0 && flag ? <View style={styles.tab}>
                    <TouchableOpacity
                        activeOpacity={1} style={styles.item}
                        onPress={() => {
                            this.setState({
                                selectUFO: true
                            })
                        }}>
                        <Text style={this.state.selectUFO ? styles.tabItemSelected : styles.tabItem}>球鞋市集</Text>
                        {this.state.selectUFO ? <View style={{position:'absolute',width:72, borderColor:"#fff",borderWidth:1,bottom:7}}></View>:null}
                    </TouchableOpacity>
                    <TouchableOpacity
                        activeOpacity={1} style={styles.item}
                        onPress={() => {
                            this.setState({
                                selectUFO: false
                            })
                        }}>
                        <Text style={!this.state.selectUFO ? styles.tabItemSelected : styles.tabItem}>商城</Text>
                        {!this.state.selectUFO ? <View style={{position:'absolute',width:36, borderColor:"#fff",borderWidth:1,bottom:7}}></View> : null}
                    </TouchableOpacity>
                </View> : null}
                <HaggleList
                    data={categoryType == 0 ? flag ? this.state.selectUFO ? productUFOList : productList : productListJson.list && productUFOListJson.list ? productUFOList : productList : myHaggleProductList}
                    resourceInfo={resourceInfo}
                    onEndReached={this._onEndReached}
                    categoryType={categoryType}
                    onPressProduct={this._onPressProduct}
                    firstHaggle={this._firstHaggle}
                    continueHaggle={this._continueHaggle}
                    onPressCategory={this._onPressCategory}
                    onStop={this._timerStop}
                    resourceJumpWithUrl={this._resourceJumpWithUrl}
                    onRefresh={this._onRefresh}
                />
                <LoadingIndicator isVisible={isFetching && !isPullToRefresh}/>

                {this.state.showVersionAlert ? <Prompt
                    text={'您的版本不支持该功能,请更新版本!'}
                    duration={1600}
                    onPromptHidden={this._onPromptHidden}
                /> : null}

            </View>
        );
    }
}

let {width} = Dimensions.get('window');

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    tab: {
        flexDirection: "row",
        height: 49,
        backgroundColor: '#444444',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    item:{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        height:49
    },
    tabItem: {
        fontSize: 18,
        color: '#B0B0B0',
        fontWeight:'bold'
    },
    tabItemSelected: {
        fontSize: 18,
        color: '#FFFFFF',
        fontWeight:'bold'
    }
});

export default connect(mapStateToProps, mapDispatchToProps)(HaggleListContainer);