customer / shanghai-railway-rnapp

import React, {Component} from 'react';
import {
    FlatList,
    Image,
    NativeModules,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
    DeviceEventEmitter,
    CameraRoll, Alert, Modal
} from 'react-native';
import ItemImageText from '../component/ItemImageText';
import QuestionHomeListItem from '../questions/QuestionHomeListItem';
import {height, width, zoomH, zoomW} from '../../utils/getSize';
import ScrollableTabView, {DefaultTabBar} from "react-native-scrollable-tab-view";
import AppService from "../../service/AppService";
import {getHomeColor, NoDoublePress, xnToast} from "../../utils/utils";
import ItemGoodsView from "../component/ItemGoodsView";
import ViewShot from "react-native-view-shot"
// import ForumHeader from "../../widget/ForumHeader";

const defaultIcon = require('../../img/defaultIcon.png');
const emptyView = require('../../img/empty.png');
const defaultSingPicUrl = 'https://cdn.xiniunet.com/img/fangliao/default_cover.jpg';// 默认的签到图片

export default class PersonalHomePage extends Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        headerTitle: navigation.state.params.userName,
        headerLeft: (
            <View style={{flex: 1}}>
                <TouchableOpacity style={{width: 40, height: 40, justifyContent: 'center', alignItems: 'center'}}
                                  onPress={() => navigation.goBack()}>
                    <Image style={{width: 18, height: 18}} source={require('../../img/loadBack.png')}/>
                </TouchableOpacity>
            </View>
        ),
        headerRight: (
            <View></View>
        ),
        // headerStyle: {
        //     backgroundColor: '#fff',
        //     elevation: 0,
        //     borderStyle: 'solid',
        //     borderColor: '#ddd',
        //     borderBottomWidth: 0.5,
        // }
    });

    constructor(props) {
        super(props);
        this.state = {
            defWebViewHeight:0,
            userId: this.props.navigation.state.params.userId,
            userName: this.props.navigation.state.params.userName||'',
            userInfo: {},
            textImageList: [],
            questionAnswerList: [],
            videoList: [],
            goodList: [],
            loadMore: false,
            loading: false,
            refreshing:false,
            tabNumber: 0,
            isImageAll: false,
            isQuestionAll: false,
            isVideoAll: false,
            attentionId:null,
            imid: '',
            threadType:0,
            goodsList :[],
            isGoodsAll:false,
            modalVisible:false,
            codeUrl:'',
            signUrl:'',
            signText:'',
            queryId:'',// 二维码参数
            associateId:''//登录用户的粉丝Id
        }
    }


    componentWillMount() {
        const _this = this;
        // 获取网络状态
        if (global.isConnected) {
            //获取个人信息
            this.getUserInfo();
            //获取帖子信息
            this.getFirstThreadList(0, 0, true);
        } else {
            xnToast('请检查网络')
        }
        this.refresh = DeviceEventEmitter.addListener("refreshList", () => {
            this.setState({
                textImageList: [],
                textImageTotalCount: 0
            });
            _this.getFirstThreadList(0, 0, true);
            _this.getUserInfo();
        });
        this.refreshComm = DeviceEventEmitter.addListener("refreshCommList", () => {
            this.setState({
                questionAnswerList: []
            });
            _this.getFirstThreadList(3, 0, true);
            _this.getUserInfo();
        });
        this.refreshVideo = DeviceEventEmitter.addListener(
            "refreshVideoList",
            () => {
                this.setState({
                    videoList: [],
                    videoListtalCount: 0
                });
                _this.getFirstThreadList(2, 0, true);
                _this.getUserInfo();
            }
        );

        if (global.tenantId == '852769418315444224' || global.tenantId == '1038991752041734144') {
            AppService.getSignInfo({}).then((data) => {
                if (data.message) {
                    xnToast(error.message);
                    // reject(error.message);
                    return;
                }
                if (!!data.errors === true && !!data.errors.length > 0) {
                    // reject(data.errors);
                    return;
                } else {
                    let sginInfo = JSON.parse(data.signRule.image)
                    _this.setState({
                        signUrl: sginInfo[0].filePath,
                        signText: data.signRule.signRuleText,
                    }, () => {
                        // resolve(true);
                        _this.promise2();
                    });
                }
            }).catch((error) => {
                // xnToast(error.message);
                // reject(error.message);
            });
            // });
        }
    }
    promise2 = () => {
        const _this = this;
        // return new Promise((resolve, reject) => {
            AppService.getAssociateMemberBySource({sourceType:"WX_OPEN",unionId:global.unionId,tenantId:global.config.tenantId,name:global.userName,avatarUrl:!!!global.userAvatar?'':global.userAvatar}).then((data) => {
                if (data.message) {
                    xnToast(data.message);
                    // reject(error.message);
                    return;
                }
                if (!!data.errors === true && !!data.errors.length > 0) {
                    xnToast(data.errors[0].message);
                    // reject(data.errors[0].message);
                    return;
                } else {
                    _this.setState({
                        associateId:data.associateMember.id,
                    },()=>{
                        // resolve(res);
                        _this.promise3();
                    });
                }
            }).catch((error) => {
                // xnToast(error.message);
                // reject(error.message);
            });
        // });
    };
    promise3 = () => {
        const _this = this;
        // return new Promise((resolve, reject) => {
            AppService.saveAppScenceParm({'json':JSON.stringify({userId:this.state.userId,rasId:this.state.associateId})}).then((data) => {
                if (data.message) {
                    xnToast(data.message);
                    // reject(data.message);
                    return;
                }
                if (!!data.errors === true && !!data.errors.length > 0) {
                    xnToast(data.errors[0].message);
                    // reject(data.errors[0].message);
                    return;
                } else {
                    _this.setState({
                        queryId:data.id,
                    },()=>{
                        // resolve(res);
                        _this.promise4();
                    });
                }
            }).catch((error) => {
                // xnToast(error.message);
                // reject(error.message);
            });
        // });
    };
    promise4 = () => {
        const _this = this;
        // return new Promise((resolve, reject) => {
            AppService.createAppScene({tenantId: global.tenantId,appId:global.weChatBySmallProgramAppId,scene:'queryId='+this.state.queryId,page:'pages/community/member-detail/member-detail'}).then((data) => {
                if (data.message) {
                    xnToast(data.message);
                    // reject(data.message);
                    return;
                }
                if (!!data.errors === true && !!data.errors.length > 0) {
                    xnToast(data.errors[0].message);
                    // reject(data.errors[0].message);
                } else {
                    _this.setState({
                        codeUrl:data.imgUrl,
                    },()=>{
                        // resolve(res);
                    })
                }
            }).catch((error) => {
                // xnToast(error.message);
                // reject(error.message);
            });
        // });
    };

// 跳转关注
    goAttention = () => {
        this.props.navigation.navigate('PersonalAttention',{id: 1,name: 'Attention',userId:this.state.userId})
    }

    goFans = () => {
        this.props.navigation.navigate('PersonalAttention',{id: 2,name: 'Attention',userId:this.state.userId})
    }

    // 获取个人信息
    getUserInfo = () => {
        if (global.isConnected) {
            // alert("查询")
            const params = {
                forumId: global.forumId,
                id:this.state.userId
            };
            AppService.getUserInfo(params).then((data) => {
                // this.setState({
                //     loading: false
                // });
                if (data.message) {
                    xnToast(data.message);
                    return;
                }
                if (!!data.errors === true && !!data.errors.length > 0) {
                    xnToast(data.errors[0].message);
                } else {
                    if (!!data.userExtend) {
                        this.setState({
                            userInfo: data.userExtend,
                            attentionId:data.userExtend.attention == null ? 0:data.userExtend.attention.id,
                            imid: data.userExtend.imid,
                            userName:data.userExtend.name,
                        });
                        this.props.navigation.setParams({
                            userName: data.userExtend.name,
                        });
                    }
                }
            })
        } else {
            xnToast('请检查网络');
        }

    };
    // 关注
    attention = () => {
        if (global.isConnected) {
            let params = {
                forumId:global.forumId,
                targetType:1,
                targetUserId:this.state.userId,
                targetUserName:this.state.userInfo.name,
                targetUserHeadFileUrl:this.state.userInfo.avatar,
                attentionUserId:global.userId,
                attentionUserName:global.userName,
                isActive:true
            };
            AppService.attention(params).then((data) => {
                this.setState({
                    loading: false
                });
                if (data.message) {
                    xnToast(data.message);
                    return;
                }
                if (!!data.errors === true && !!data.errors.length > 0) {
                    xnToast(data.errors[0].message);
                } else {
                    xnToast("已关注");
                    this.getUserInfo();
                    DeviceEventEmitter.emit('refreshHomeHistory');
                    DeviceEventEmitter.emit('refreshCollectList');
                    DeviceEventEmitter.emit('refreshAttention');
                    DeviceEventEmitter.emit('refreshHomeList');
                    DeviceEventEmitter.emit("refreshAllList");
                    DeviceEventEmitter.emit('reGetThreadDetailInfo');
                }
            })
        } else {
            this.setState({
                loading: false
            });
            xnToast('请检查网络');
        }
    };
    //取消关注
    cancelAttention = (id)=> {
        let params = {
            id: id
        };
        if (global.isConnected) {
            AppService.cancleAttention(params).then((data) => {
                this.setState({
                    loading: false
                });
                if (data.message) {
                    xnToast(data.message);
                    return;
                }
                if (!!data.errors === true && !!data.errors.length > 0) {
                    xnToast(data.errors[0].message);
                } else {
                    xnToast('取消关注');
                    this.getUserInfo();
                    DeviceEventEmitter.emit('refreshHomeHistory');
                    DeviceEventEmitter.emit('refreshCollectList');
                    DeviceEventEmitter.emit('refreshAttention');
                    DeviceEventEmitter.emit('refreshHomeList');
                    DeviceEventEmitter.emit("refreshAllList");
                    DeviceEventEmitter.emit('reGetThreadDetailInfo');
                }
            })
        } else {
            this.setState({
                loading: false
            });
            xnToast('请检查网络');
        }
    };
    //获取商品数据
    getGoodsList = (length) => {
        let params = {
            pageNumber:length/pageSize+1,
            pageSize:pageSize,
            operatingUnitId: 801756150419828736,
            systemType:'B2C',
            deviceType:'MOBILE',
            supplierId: 0,
            tenantId: global.tenantId
        }
        AppService.findCommodityExtend(params).then(data => {

        });
    }
    // 获取第一页数据
    getFirstThreadList = (threadType,length,isRefresh) => {
        if (isRefresh) {
            if(threadType==0){
                this.setState(
                    {
                        textImageList: [],
                    }
                );
            }else if(threadType==3){
                this.setState(
                    {
                        questionAnswerList: [],
                    }
                );
            }else if(threadType==2){
                this.setState(
                    {
                        videoList: [],
                    }
                );
            }else {
                this.setState(
                    {
                        textImageList: [],
                    }
                );
            }

        }
        const _this = this;
        AppService.queryList({
            forumId: global.forumId,
            threadUserId: this.state.userId,
            pageNumber: length / 10 + 1,
            searchType:"HAS_PUBLISH",
            sourceFrom:'APP',
            pageSize: 10,
            isActive: true,
            threadType: threadType
        }).then((data) => {
            if (data.message) {
                xnToast(data.message);
                return;
            }
            if (data.errors == null || data.errors.length > 0) {
                xnToast(data.errors[0].message);
            } else {
                if(threadType == 0){
                    this.setState({
                        textImageList: _this.state.textImageList.concat(data.result),
                        textImageTotalCount:data.totalCount,
                    }, () => {
                        if (_this.state.textImageList.length == Number(data.totalCount)) {
                            _this.setState({
                                isImageAll: true
                            });
                        }
                    });
                }else if(threadType == 2){
                    this.setState({
                        videoList: _this.state.videoList.concat(data.result),
                        videoListtalCount:data.totalCount,
                    }, ()=> {
                        if (_this.state.videoList.length == Number(data.totalCount)) {
                            _this.setState({
                                isVideoAll: true
                            });
                        }
                    });
                }else if(threadType == 3){
                    this.setState({
                        questionAnswerList: _this.state.questionAnswerList.concat(data.result)
                    }, ()=> {
                        if (_this.state.questionAnswerList.length == Number(data.totalCount)) {
                            _this.setState({
                                isQuestionAll: true
                            });
                        }
                    });
                }else {
                    this.setState({
                        textImageList: _this.state.textImageList.concat(data.result),
                        textImageTotalCount:data.totalCount,
                    }, () => {
                        if (_this.state.textImageList.length == Number(data.totalCount)) {
                            _this.setState({
                                isImageAll: true
                            });
                        }
                    });
                }
                console.log(data)
            }
        })
    };

    // 加载更多
    loadMore = (threadType) => {
        let length = 0;
        if(threadType == 0){
            length = this.state.textImageList.length;
            if(this.state.isImageAll){
                return;
            }
        }else if(threadType == 2){
            length = this.state.videoList.length;
            if(this.state.isVideoAll){
                return;
            }
        }else if(threadType == 3){
            length = this.state.questionAnswerList.length;
            if(this.state.isQuestionAll){
                return;
            }
        }else {
            length = this.state.textImageList.length;
            if(this.state.isImageAll){
                return;
            }
        }
        this.getFirstThreadList(threadType, length,false);
    };


    keyExtractor = (item, index) => index;
    //图文列表
    renderImageTextItem({item, index}) {
        return (<ItemImageText  itemList = {item}  nav = {this.props.navigation}/>
        )
    }
    //问答列表
    renderQuestionItem({item, index}) {
        return (
            <QuestionHomeListItem item={item} nav = {this.props.navigation}/>
        )
    }
    //视频列表
    renderVideoItem({item, index}) {
        return (
            <ItemImageText  itemList = {item}  nav = {this.props.navigation} isVideo={true}/>
        )
    }
    //商品列表
    renderGoodsItem({ item, index }) {
        return <ItemGoodsView itemList={item} nav={this.props.navigation} />;
    }
    // 私信
    privateLetter=() => {
        if(this.state.imid == null || this.state.imid == undefined){
            xnToast("该用户暂时无法聊天");
        }else {
            NativeModules.system.startP2PSessionFromRN(this.state.imid)
        }
    };

    // 分割线
    _separator = () => {
        return <View style={{ height: 6 / zoomH, backgroundColor: "#F3F5F6" }} />;
    };

    // 列表底部
    _footer = () => <View style={styles.footerWrap}>
        <Text style={{fontSize: 12, color: '#A4A9B0'}}>到底啦</Text>
    </View>

    render() {
        let _this = this;
        let identifyTypeNames = this.state.userInfo.identifyTypeNames?(this.state.userInfo.identifyTypeNames!=''?
            this.state.userInfo.identifyTypeNames.replace(/\,/g,' '):global.defaultInentifyTypeName):
            global.defaultInentifyTypeName;
        return (
            <View style={styles.background}>
                {/*<ForumHeader title={this.props.navigation.state.params.userName} pop navigation={this.props.navigation}/>*/}
                <View style={styles.mineInfo}>
                    <View style={styles.mineInfoLeft}>
                        <View style={styles.headImage}>
                            {!!this.state.userInfo.avatar && <Image source={{uri:this.state.userInfo.avatar+'?x-oss-process=image/resize,w_400'}} style={styles.headImage} resizeMode="cover" />}
                            {!this.state.userInfo.avatar && <Image source={defaultIcon} style={styles.headImage} resizeMode="cover" />}

                        </View>
                    </View>
                    <View style={styles.mineInfoRight}>
                        <View style={styles.upText}>
                            <View>
                                { !!this.state.userInfo.threadNum ?
                                    <View><Text style={styles.upTextCount}>{this.state.userInfo.threadNum}</Text></View>:
                                    <View><Text style={styles.upTextCount}>0</Text></View>
                                }
                                <View><Text style={styles.upTextFont}>发布</Text></View>
                            </View>
                            <TouchableOpacity onPress={() => this.goAttention()}>
                                <View><Text style={styles.upTextCount}>{this.state.userInfo.attentionNum}</Text></View>
                                <View><Text style={styles.upTextFont}>关注</Text></View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this.goFans()}>
                                <View><Text
                                    style={styles.upTextCount}>{this.state.userInfo.beAttentionNum}</Text></View>
                                <View><Text style={styles.upTextFont}>粉丝</Text></View>
                            </TouchableOpacity>
                            <View style={{marginRight: 29/zoomW}}>
                                <View><Text style={styles.upTextCount}>{this.state.userInfo.likeNum}</Text></View>
                                <View><Text style={styles.upTextFont}>获赞</Text></View>
                            </View>
                        </View>
                        {this.state.userInfo.id != global.userId && <View style={styles.bottomText}>
                            {/*<TouchableOpacity style={styles.privateLetter} onPress={() => {*/}
                            {/*    this.privateLetter()*/}
                            {/*}}>*/}
                            {/*    <Text  style={{textAlign: 'center', fontSize: 14, color: '#000000',}} >私信</Text>*/}
                            {/*</TouchableOpacity>*/}
                            {this.state.userInfo.hasBeenAttended &&<TouchableOpacity style={styles.attentionAlready} onPress={() => {this.cancelAttention(this.state.attentionId)}}>
                                <Text style={{textAlign: 'center', fontSize: 14, color: '#000000'}}>已关注</Text>
                            </TouchableOpacity>}
                            {!this.state.userInfo.hasBeenAttended &&<TouchableOpacity onPress={() => {this.attention()}} style={[styles.attentionNo,{backgroundColor: global.homeColor}]}>
                                <Text style={{textAlign: 'center', fontSize: 14, color: '#ffffff'}}>关注</Text>
                            </TouchableOpacity>}
                        </View>}
                        {(global.tenantId == '852769418315444224' || global.tenantId == '1038991752041734144')&&<TouchableOpacity style={{width:'100%',height:30/zoomW,alignItems:'flex-end'}} onPress={()=>{this.setState({
                            modalVisible:true
                        })}}>
                            <Image source={require('../../img/quickmark_press.png')} style={{marginRight:20/zoomW,width:30/zoomW,height:30/zoomW}}/>
                        </TouchableOpacity>}

                    </View>
                </View>
                <View style={styles.abstract}>
                    <View style={{flexDirection: 'row'}}>
                        <Text style={{fontSize: 14, color: '#000', opacity: 0.65}}>认证： </Text>
                        { !!this.state.userInfo.isAuthented && <Text
                            style={{fontSize: 14, color: '#000'}}>{identifyTypeNames}</Text>}
                        { !this.state.userInfo.isAuthented && <Text
                            style={{fontSize: 14, color: '#000'}}>未认证</Text>}
                    </View>
                    <View style={{marginTop: 8/zoomH, flexDirection: 'row',width:"80%"}}>
                        <Text style={{fontSize: 14, color: '#000', opacity: 0.65}}>简介： </Text>
                        { !!this.state.userInfo.description &&<Text numberOfLines={10}
                            style={{fontSize: 14, color: '#000'}}>{this.state.userInfo.description}</Text>}
                        { !this.state.userInfo.description &&<Text
                            style={{fontSize: 14, color: '#DDD'}}>还没有简介哦</Text>}

                    </View>

                </View>
                <View style={{ height: 8 / zoomH, backgroundColor: '#F3F5F6', marginTop: 20 / zoomH }} />
                <ScrollableTabView
                    renderTabBar={() => <DefaultTabBar style={styles.tabStyle}/>}
                    tabBarActiveTextColor={global.homeColor}
                    tabBarUnderlineStyle={[styles.lineStyle,{backgroundColor:global.homeColor,}]}
                    tabBarInactiveTextColor='#000000'
                    tabBarBackgroundColor='#fff'
                    locked={false}
                    onScroll={(obj) => {
                    }}
                    onChangeTab={(obj) => {
                        let threadType = 0;
                        let needReSearch = true;
                        if(obj.i == 0){
                            threadType = 0
                            if(this.state.textImageList!=null &&this.state.textImageList.length>0 ){
                                needReSearch = false;
                            }
                        }else if(obj.i ==1){
                            threadType = 3
                            if(this.state.questionAnswerList!=null &&this.state.questionAnswerList.length>0 ){
                                needReSearch = false;
                            }
                        }else if(obj.i == 2){
                            threadType = 2
                            if(this.state.videoList!=null &&this.state.videoList.length>0 ){
                                needReSearch = false;
                            }
                        }
                        if(needReSearch){
                            this.getFirstThreadList(threadType,0,true);
                        }
                    }}
                >
                    <View tabLabel='图文'>
                        {this.state.textImageList && this.state.textImageList.length >0 &&<FlatList
                            data={this.state.textImageList}
                            ItemSeparatorComponent={this._separator}
                            renderItem={this.renderImageTextItem.bind(this)}
                            onRefresh={() => this.getFirstThreadList(0,0,true)}
                            onEndReached={() => this.loadMore(0)}
                            ListFooterComponent={(this.state.textImageList.length > 0 && this.state.isImageAll) ? this._footer : null}
                            refreshing={this.state.refreshing}
                            keyExtractor={this.keyExtractor}
                        />}
                        {(!this.state.textImageList ||this.state.textImageList.length == 0) &&
                        <View style = {[styles.defaultStyle]}>
                            <Image  style = {{height:100/zoomH}}source={emptyView} resizeMode= 'contain'></Image>
                            <Text style = {{marginTop:10,color:'rgba(0,0,0,0.45)'}}>暂无图文帖子</Text>
                        </View>}
                    </View>
                    <View tabLabel='问答'>
                        {this.state.questionAnswerList && this.state.questionAnswerList.length >0 &&<FlatList
                            data={this.state.questionAnswerList}
                            ItemSeparatorComponent={this._separator}
                            renderItem={this.renderQuestionItem.bind(this)}
                            onRefresh={() => this.getFirstThreadList(3,0,true)}
                            onEndReached={() => this.loadMore(3)}
                            ListFooterComponent={(this.state.questionAnswerList.length > 0 && this.state.isQuestionAll) ? this._footer : null}
                            refreshing={this.state.refreshing}
                            keyExtractor={this.keyExtractor}
                        />}
                        {(!this.state.questionAnswerList ||this.state.questionAnswerList.length == 0) &&
                        <View style = {[styles.defaultStyle]}>
                            <Image  style = {{height:100/zoomH}}source={emptyView} resizeMode= 'contain'></Image>
                            <Text style = {{marginTop:10,color:'rgba(0,0,0,0.45)'}}>暂无问答帖子</Text>
                        </View>}
                    </View>
                    <View tabLabel='视频'>
                        {this.state.videoList && this.state.videoList.length >0 &&<FlatList
                            data={this.state.videoList}
                            ItemSeparatorComponent={this._separator}
                            renderItem={this.renderVideoItem.bind(this)}
                            onRefresh={() => this.getFirstThreadList(2,0,true)}
                            onEndReached={() => this.loadMore(2)}
                            ListFooterComponent={(this.state.videoList.length > 0 && this.state.isVideoAll) ? this._footer : null}
                            refreshing={this.state.refreshing}
                            keyExtractor={this.keyExtractor}
                        />}
                        {(!this.state.videoList || this.state.videoList.length == 0) &&
                        <View style = {[styles.defaultStyle]}>
                            <Image  style = {{height:100/zoomH}}source={emptyView} resizeMode= 'contain'></Image>
                            <Text style = {{marginTop:10,color:'rgba(0,0,0,0.45)'}}>暂无视频帖子</Text>
                        </View>
                        }
                    </View>
                    {/*<View tabLabel="商品">*/}
                        {/*{this.state.goodsList && this.state.goodsList.length >0 &&<FlatList*/}
                            {/*data={this.state.goodsList}*/}
                            {/*ItemSeparatorComponent={this._separator}*/}
                            {/*renderItem={this.renderGoodsItem.bind(this)}*/}
                            {/*onEndReachedThreshold={0.01}*/}
                            {/*onRefresh={() => {*/}
                                {/*_this.setState({*/}
                                    {/*goodList:[]*/}
                                {/*},function () {*/}
                                    {/*this.getGoodsList(0)*/}
                                {/*})*/}

                            {/*}}*/}
                            {/*onEndReached={() => {*/}
                                {/*if(_this.state.isGoodsAll){*/}
                                    {/*return;*/}
                                {/*}*/}
                                {/*_this.getGoodsList(this.state.goodList.length);*/}
                            {/*}}*/}
                            {/*ListFooterComponent={*/}
                                {/*this.state.goodsList.length > 0 && this.state.isGoodsAll*/}
                                    {/*? this._footer*/}
                                    {/*: null*/}
                            {/*}*/}
                            {/*refreshing={this.state.refreshing}*/}
                            {/*keyExtractor={this.keyExtractor}*/}
                        {/*/>}*/}
                        {/*{(!this.state.goodsList || this.state.goodsList.length == 0) &&*/}
                        {/*<View style = {[styles.defaultStyle]}>*/}
                            {/*<Image  style = {{height:100/zoomH}}source={emptyView} resizeMode= 'contain'></Image>*/}
                            {/*<Text style = {{marginTop:10,color:'rgba(0,0,0,0.45)'}}>暂无商品</Text>*/}
                        {/*</View>*/}
                        {/*}*/}
                    {/*</View>*/}
                </ScrollableTabView>
                <Modal
                    animationType="slide"
                    transparent={true}
                    visible={this.state.modalVisible}
                    onRequestClose={() => {
                    }}>
                    <View style={styles.modalBg} >
                        <View style={{width:width,height:height*0.9,marginTop:44/zoomH}}>
                            <ViewShot ref='viewShot' options={{ format: "jpg", quality: 0.5 }} style={{flex:1}}>
                                <Image source={!!!this.state.signUrl?require('../../img/default_cover.jpg'):{uri:this.state.signUrl}} style={{width:width,height:width}} />
                                <View style={{flex:1,backgroundColor:'#fff',flexDirection:'row',padding:15}}>
                                    <View style={{flex:2,justifyContent:'space-around'}}>
                                        <Text>{this.state.signText}</Text>
                                        <View style={{flexDirection:'row',marginTop:15}}>
                                            <Image source={!!!this.state.userInfo.avatar?defaultIcon:{uri:this.state.userInfo.avatar+'?x-oss-process=image/resize,w_400'}} style={{width:60/zoomW,height:60/zoomW,borderRadius:30/zoomW}}/>
                                            <View style={{marginLeft:10,flex:1}}>
                                                <Text style={{fontSize:20}}>{this.state.userInfo.name}</Text>
                                                <Text style={{color:'#d1d2d3'}}>我在芳聊,等您来</Text>
                                            </View>
                                        </View>
                                    </View>

                                    <View style={{flex:1,justifyContent:'space-around',alignItems:'center'}}>
                                        <Image source={{uri:this.state.codeUrl}} style={{width:100/zoomW,height:100/zoomW,marginBottom: 5}}/>
                                        <Text style={{flex:1}}>长按识别二维码</Text>
                                    </View>
                                </View>
                            </ViewShot>
                            {/*按钮区*/}
                            <View style={{width:width,height:height*0.1,backgroundColor:'#fff',flexDirection:'row',justifyContent:'space-around',alignItems:'center'}}>
                                <TouchableOpacity style={{width:70,height:height*0.1,alignItems:'center',justifyContent:'space-around'}} onPress={()=>{
                                    NoDoublePress.onPress(()=>{
                                        // TODO:因直接使用签到图片，发朋友就不需要截图了，可以提高速度
                                        // this.refs.viewShot.capture().then(uri => {
                                        //     console.log("do something with ", uri);
                                        //
                                        //     let fileName = uri.substring(uri.lastIndexOf('/') + 1);
                                        //     let _this = this;
                                        //     AppService.getAccess({name: fileName}).then((data) => {
                                        //
                                        //         if (data.message) {
                                        //
                                        //             return;
                                        //         }
                                        //         if (data.errors.length > 0) {
                                        //
                                        //         } else {
                                        //             NativeModules.system.simpleUpload(data.accessKeyId, data.accessKeySecret, data.securityToken,
                                        //                 data.info.endpoint, data.info.bucket, fileName, uri).then((res) => {

                                        let path = '/pages/community/member-detail/member-detail?id='+this.state.userId;//小程序的地址
                                        // path
                                        var temp = '';
                                        var webUrl = 'https://sns.xiniunet.com/wechatpage/dist/index.html#/center';
                                        webUrl = webUrl + '?path='+path;
                                        var wxOriginalID = '';
                                        if(global.appTarget == 'fangPartner'){
                                            // 芳聊小程序的原始ID
                                            wxOriginalID = 'gh_38cacc3e0a30';
                                        }
                                        // 这是测试App 300029承租人下的芳聊社区，用于debug芳聊测试环境的小程序
                                        if(global.appTarget == 'xntalkTest' || global.appTarget == 'fang'){
                                            wxOriginalID = 'gh_e1c3c68d4919';
                                            //wxOriginalID = 'wx878f29f4478f429d';
                                        }
                                        // 小程序卡片的图片固定是300X300的正方形
                                        var temp = !!!this.state.signUrl?defaultSingPicUrl:this.state.signUrl;
                                        // url = defaultSingPicUrl;
                                        var url = temp+'?x-oss-process=image/resize,m_fill,h_600,w_600/format,jpg';
                                        NativeModules.system.wchatShare(path,webUrl,this.state.userName,'' ,url,wxOriginalID);
                                        //             }).catch((error) => {
                                        //
                                        //                 xnToast(error)
                                        //             })
                                        //         }
                                        //     }).catch((error) => {
                                        //
                                        //         xnToast(error)
                                        //     })
                                        //
                                        // })
                                    })
                                }}>
                                    <Image style={{width:52/zoomW,height:52/zoomW}} source={require('../../img/sharewechat.png')}/>
                                    <Text style={{color:'#000'}}>发朋友</Text>

                                </TouchableOpacity>
                                <TouchableOpacity style={{width:70,height:height*0.1,alignItems:'center',justifyContent:'space-around'}} onPress={
                                    ()=>{
                                        NoDoublePress.onPress(()=>{
                                            this.refs.viewShot.capture().then(uri => {
                                                console.log("do something with ", uri);
                                                var promise = CameraRoll.saveToCameraRoll(uri)
                                                promise.then(function(result) {
                                                    // xnToast('保存成功,请至相册查看');
                                                    Alert.alert('保存成功,请至相册查看')
                                                }).catch(function(error) {
                                                    // xnToast('保存失败');
                                                    Alert.alert('保存失败')
                                                })
                                            })
                                        })
                                    }
                                }>
                                    <Image style={{width:52/zoomW,height:52/zoomW}} source={require('../../img/save.png')}/>
                                    <Text style={{color:'#000'}}>保存</Text>
                                </TouchableOpacity>
                                <TouchableOpacity style={{width:70,height:height*0.1,alignItems:'center',justifyContent:'space-around'}} onPress={()=>{
                                    NoDoublePress.onPress(()=>{
                                        this.setState({modalVisible:false})
                                    })
                                }}>
                                    <Image style={{width:52/zoomW,height:52/zoomW}} source={require('../../img/cancel.png')}/>
                                    <Text style={{color:'#000'}}>取消</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </View>

                </Modal>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    background: {
        flex: 1,
        backgroundColor: '#ffffff',
        display: 'flex',
    },
    mineInfo: {
        display: 'flex',
        flexDirection: 'row',
        marginTop: 20/zoomH,
    },
    mineInfoLeft: {
        marginLeft: 15/zoomW,
    },
    headImage: {
        width:(80/zoomW),
        height:(80/zoomW),
        marginRight:(15/zoomW),
        borderRadius:40/zoomW
    },
    mineInfoRight: {
        marginLeft: 20/zoomW,
        flex: 1
    },
    upText: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    upTextCount: {
        textAlign: 'center',
        color: '#000000',
        fontSize: 18
    },
    upTextFont: {
        fontSize: 12,
        color: '#8C8C8C',
    },
    bottomText: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginTop: 14/zoomH,
    },
    privateLetter: {
        height: 28/zoomH,
        width: '42%',
        borderColor: '#DDDDDD',
        borderWidth: 0.5,
        borderStyle: 'solid',
        borderRadius: 4,
        justifyContent: 'center',
    },
    attentionNo: {
        width: '42%',
        marginRight: 29/zoomW,
        height: 28/zoomH,
        borderColor: '#DDDDDD',
        borderWidth: 0.5,
        borderStyle: 'solid',
        borderRadius: 4,
        justifyContent: 'center',
    },
    attentionAlready: {
        backgroundColor: '#ffffff',
        width: '42%',
        marginRight: 29/zoomW,
        height: 28/zoomH,
        borderColor: '#DDDDDD',
        borderWidth: 0.5,
        borderStyle: 'solid',
        borderRadius: 4,
        justifyContent: 'center',
    },
    abstract: {
        marginTop: 10/zoomH,
        marginLeft: 20/zoomW,
    },
    tabStyle: {
        height: 36/zoomH,
        marginTop: 8/zoomH,
        // marginBottom: 17/zoomH,
        // width: '80%',
    },
    lineStyle: {

        width:36/zoomW,
        height: 3/zoomH,
        marginLeft: 46/zoomW,
    },
    headIcon: {
        display: 'flex',
        flexDirection: 'row',
        marginLeft: 15/zoomW
    },

    goodsContainer: {
        display: 'flex',
        flexDirection: 'row',
        marginTop: 18,
        justifyContent: 'space-between',
    },
    goodsDesc: {
        width: 190/zoomW,
        height: 140/zoomH,
        marginLeft: 12/zoomW
    },
    itemLine: {
        height: 8/zoomH,
        backgroundColor: 'rgba(0,0,0,0.1)',
    },
    footerWrap: {
        borderStyle:'solid',
        borderColor: '#DDDDDD',
        borderTopWidth: 0.5,
        width: '100%',
        height: 52.5/zoomH,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    line: {
        width: 200 / zoomW,
        height: 1/zoomH,
        backgroundColor: '#D0D0D0',
    },
    defaultStyle: {
        width:'100%',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        marginTop:100/zoomH
    },
    modalBg: {
        width: width,
        height: height,
        backgroundColor: 'rgba(0,0,0,1)',
        display: 'flex',
        alignItems: 'center'
    },
    empty:{

    }
});