TaxControlApp/page/member/service_handle.js

import React, {Component} from 'react';
import {
  View,
  Text,
  FlatList,
  RefreshControl,
  Alert,
  SafeAreaView,
  Image,
  ScrollView,
  TouchableOpacity,
} from 'react-native';
import {
  List,
  SearchBar,
  Tabs,
  WhiteSpace,
  Modal,
  Radio,
} from '@ant-design/react-native';

import {IndividualStorageData, RetrieveData} from '../../data/storage';
import {RequestNetwork} from '../../data/encryption';
import public_css from '../../source/css/public_css';
import {CleanAll} from '../../components/abnormalMessage/abnormal_message';
import {ToastShow} from '../../components/toast/toast';
import personal_center_css from '../personalCenter/personal_center_css';
import {SvgXml} from 'react-native-svg';
import {downArrowIcon, upArrowIcon} from '../../source/icon/icon';

const Item = List.Item;
let pageNo = 1; //当前页码
let totalPage = 5; //总的页数
let pageSize = 10; //每页数量
export default class service_handle extends Component {
  constructor(props) {
    super(props);
    this.props.navigation.dangerouslyGetParent().setOptions({
      tabBarVisible: false,
    });
    this.state = {
      userName: '',
      spinner: false,
      user: '',
      headImage: '',
      sex: '',
      messageList: [],
      showFoot: 0, // 控制foot， 0：无数据  1：加载中   2 ：上拉加载
      isLoading: false,
      amount: 0,
      discount: 0,
      tab: 0,
      messageNumber: 0,
      isShowPay: false,
      paySelect: {},
      hideStatusText: '更多',
      hideStatus: false,
      productList: [],
      productNumber: 0,
      flexStyle: 'column',
      itemList: [],
      productDiscount: 0,
      productAmount: 0,
    };
  }

  render() {
    const tabs = [{title: '服务办理'}, {title: '短信续费'}];
    return (
      <SafeAreaView style={public_css.body}>
        <View
          style={{
            height: 130,
            backgroundColor: '#2A2C44',
            flexDirection: 'row',
          }}>
          <View style={{width: 90}}>
            <View
              style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
              {this.state.headImage === '' || this.state.headImage === null ? (
                this.state.sex === 'F' ? (
                  <Image
                    source={require('../../source/img/personal/woman.png')}
                    style={[personal_center_css.headImg]}
                  />
                ) : (
                  <Image
                    source={require('../../source/img/personal/man.png')}
                    style={[personal_center_css.headImg]}
                  />
                )
              ) : (
                <Image
                  source={{uri: this.state.headImage}}
                  style={[personal_center_css.headImg]}
                />
              )}
            </View>
            <View style={{height: 25, alignItems: 'center'}}>
              <Text
                style={{
                  color: '#FFFFFF',
                  fontSize: 13,
                  fontWeight: 'bold',
                }}
                numberOfLines={1}
                ellipsizeMode={'tail'}>
                {this.state.userName}
              </Text>
            </View>
          </View>
          <View style={{flex: 1, justifyContent: 'center'}}>
            <View
              style={{
                height: 40,
                flexDirection: 'row',
                justifyContent: 'flex-start',
                alignItems: 'flex-end',
              }}>
              <Text
                style={{color: '#FFFFFF', fontSize: 13, marginLeft: 10}}
                numberOfLines={1}
                ellipsizeMode={'tail'}>
                续费企业：{this.state.companyName}
              </Text>
            </View>
            <View style={{flexDirection: 'row', flex: 1}}>
              <View style={{flex: 1}}>
                <Text
                  style={{
                    color: '#FFFFFF',
                    fontSize: 13,
                    marginLeft: 10,
                    marginTop: 10,
                  }}>
                  服务购买时间：--------
                </Text>
                <Text
                  style={{
                    color: '#FFFFFF',
                    fontSize: 13,
                    marginLeft: 10,
                    marginTop: 10,
                  }}>
                  服务到期剩余：--------
                </Text>
              </View>
              <View style={{alignItems: 'center', width: 120, marginTop: 10}}>
                <Text style={{color: '#FFFFFF', fontSize: 20}}>
                  --/{this.state.messageNumber}
                </Text>
                <Text style={{color: '#FFFFFF', fontSize: 13, marginTop: 5}}>
                  年度短信发送量
                </Text>
              </View>
            </View>
          </View>
        </View>
        <Tabs
          tabs={tabs}
          onChange={(i, l) => this.onChanges(i, l)}
          page={0}
          tabBarUnderlineStyle={{backgroundColor: '#ECC385'}}
          tabBarActiveTextColor={'#EABC78'}
          tabBarInactiveTextColor={'#646464'}
          tabBarTextStyle={{fontSize: 16}}>
          <ScrollView>
            <View
              style={{flexDirection: this.state.flexStyle, flexWrap: 'wrap'}}>
              {this.state.productList.map((item, index) => {
                if (this.state.hideStatus) {
                  if (this.state.productNumber > 1) {
                    if (item.isSelect) {
                      return (
                        <TouchableOpacity onPress={() => this.selectData(item)}>
                          <View
                            style={{
                              backgroundColor: 'rgba(236, 195, 133, 0.13)',
                              height: 120,
                              width: 100,
                              borderWidth: 1,
                              borderColor: '#DDDDDD',
                              borderRadius: 6,
                              margin: 10,
                              justifyContent: 'center',
                              alignItems: 'center',
                            }}>
                            <Text
                              style={{
                                color: '#2B2B2B',
                                fontSize: 16,
                              }}>
                              {item.productName}
                            </Text>
                            {/*<Text*/}
                            {/*  style={{*/}
                            {/*    color: '#2B2B2B',*/}
                            {/*    fontSize: 16,*/}
                            {/*  }}>*/}
                            {/*  {item.tags}*/}
                            {/*</Text>*/}
                            <Text
                              style={{
                                color: '#ECC385',
                                fontWeight: 'bold',
                                fontSize: 25,
                              }}>
                              <Text style={{fontSize: 16}}>¥</Text>
                              {item.favouredPrice}
                            </Text>
                            <Text
                              style={{
                                color: '#AAAAAA',
                                textDecorationLine: 'line-through',
                              }}>
                              ¥{item.oriPrice}
                            </Text>
                          </View>
                        </TouchableOpacity>
                      );
                    } else {
                      return (
                        <TouchableOpacity onPress={() => this.selectData(item)}>
                          <View
                            style={{
                              backgroundColor: 'rgba(255, 255, 255, 1)',
                              height: 120,
                              width: 100,
                              borderWidth: 1,
                              borderColor: '#DDDDDD',
                              borderRadius: 6,
                              margin: 10,
                              justifyContent: 'center',
                              alignItems: 'center',
                            }}>
                            <Text
                              style={{
                                color: '#2B2B2B',
                                fontSize: 16,
                              }}>
                              {item.productName}
                            </Text>
                            {/*<Text*/}
                            {/*  style={{*/}
                            {/*    color: '#2B2B2B',*/}
                            {/*    fontSize: 16,*/}
                            {/*  }}>*/}
                            {/*  {item.tags}*/}
                            {/*</Text>*/}
                            <Text
                              style={{
                                color: '#ECC385',
                                fontWeight: 'bold',
                                fontSize: 25,
                              }}>
                              <Text style={{fontSize: 16}}>¥</Text>
                              {item.favouredPrice}
                            </Text>
                            <Text
                              style={{
                                color: '#AAAAAA',
                                textDecorationLine: 'line-through',
                              }}>
                              ¥{item.oriPrice}
                            </Text>
                          </View>
                        </TouchableOpacity>
                      );
                    }
                  } else {
                    if (item.isSelect) {
                      return (
                        <TouchableOpacity
                          onPress={() => this.selectData(item)}
                          style={{
                            backgroundColor: 'rgba(236, 195, 133, 0.13)',
                            flexDirection: 'row',
                            height: 80,
                            borderWidth: 1,
                            borderColor: '#DDDDDD',
                            borderRadius: 6,
                            margin: 10,
                          }}>
                          <View style={{flex: 1, flexDirection: 'column'}}>
                            <View style={{flex: 1}}>
                              <Text
                                style={{
                                  color: '#2B2B2B',
                                  fontWeight: 'bold',
                                  fontSize: 18,
                                  marginTop: 10,
                                  marginLeft: 10,
                                }}>
                                {item.productName}
                              </Text>
                            </View>
                            <View style={{flex: 1}}>
                              {/*<Text*/}
                              {/*  style={{*/}
                              {/*    color: '#777777',*/}
                              {/*    fontSize: 16,*/}
                              {/*    marginTop: 10,*/}
                              {/*    marginLeft: 10,*/}
                              {/*  }}>*/}
                              {/*  {item.tags}*/}
                              {/*</Text>*/}
                            </View>
                          </View>
                          <View
                            style={{
                              width: 120,
                              justifyContent: 'center',
                              alignItems: 'center',
                            }}>
                            <Text
                              style={{
                                color: '#ECC385',
                                fontWeight: 'bold',
                                fontSize: 25,
                              }}>
                              <Text style={{fontSize: 16}}>¥</Text>
                              {item.favouredPrice}
                            </Text>
                            <Text
                              style={{
                                color: '#AAAAAA',
                                textDecorationLine: 'line-through',
                              }}>
                              ¥{item.oriPrice}
                            </Text>
                          </View>
                        </TouchableOpacity>
                      );
                    } else {
                      return (
                        <TouchableOpacity
                          onPress={() => this.selectData(item)}
                          style={{
                            backgroundColor: 'rgba(255, 255, 255, 1)',
                            flexDirection: 'row',
                            height: 80,
                            borderWidth: 1,
                            borderColor: '#DDDDDD',
                            borderRadius: 6,
                            margin: 10,
                          }}>
                          <View style={{flex: 1, flexDirection: 'column'}}>
                            <View style={{flex: 1}}>
                              <Text
                                style={{
                                  color: '#2B2B2B',
                                  fontWeight: 'bold',
                                  fontSize: 18,
                                  marginTop: 10,
                                  marginLeft: 10,
                                }}>
                                {item.productName}
                              </Text>
                            </View>
                            <View style={{flex: 1}}>
                              {/*<Text*/}
                              {/*  style={{*/}
                              {/*    color: '#777777',*/}
                              {/*    fontSize: 16,*/}
                              {/*    marginTop: 10,*/}
                              {/*    marginLeft: 10,*/}
                              {/*  }}>*/}
                              {/*  {item.tags}*/}
                              {/*</Text>*/}
                            </View>
                          </View>
                          <View
                            style={{
                              width: 120,
                              justifyContent: 'center',
                              alignItems: 'center',
                            }}>
                            <Text
                              style={{
                                color: '#ECC385',
                                fontWeight: 'bold',
                                fontSize: 25,
                              }}>
                              <Text style={{fontSize: 16}}>¥</Text>
                              {item.favouredPrice}
                            </Text>
                            <Text
                              style={{
                                color: '#AAAAAA',
                                textDecorationLine: 'line-through',
                              }}>
                              ¥{item.oriPrice}
                            </Text>
                          </View>
                        </TouchableOpacity>
                      );
                    }
                  }
                } else {
                  if (index === 0) {
                    if (item.isSelect) {
                      return (
                        <TouchableOpacity
                          onPress={() => this.selectData(item)}
                          style={{
                            backgroundColor: 'rgba(236, 195, 133, 0.13)',
                            flexDirection: 'row',
                            height: 80,
                            borderWidth: 1,
                            borderColor: '#DDDDDD',
                            borderRadius: 6,
                            margin: 10,
                          }}>
                          <View style={{flex: 1, flexDirection: 'column'}}>
                            <View style={{flex: 1}}>
                              <Text
                                style={{
                                  color: '#2B2B2B',
                                  fontWeight: 'bold',
                                  fontSize: 18,
                                  marginTop: 10,
                                  marginLeft: 10,
                                }}>
                                {item.productName}
                              </Text>
                            </View>
                            <View style={{flex: 1}}>
                              {/*<Text*/}
                              {/*  style={{*/}
                              {/*    color: '#777777',*/}
                              {/*    fontSize: 16,*/}
                              {/*    marginTop: 10,*/}
                              {/*    marginLeft: 10,*/}
                              {/*  }}>*/}
                              {/*  {item.tags}*/}
                              {/*</Text>*/}
                            </View>
                          </View>
                          <View
                            style={{
                              width: 120,
                              justifyContent: 'center',
                              alignItems: 'center',
                            }}>
                            <Text
                              style={{
                                color: '#ECC385',
                                fontWeight: 'bold',
                                fontSize: 25,
                              }}>
                              <Text style={{fontSize: 16}}>¥</Text>
                              {item.favouredPrice}
                            </Text>
                            <Text
                              style={{
                                color: '#AAAAAA',
                                textDecorationLine: 'line-through',
                              }}>
                              ¥{item.oriPrice}
                            </Text>
                          </View>
                        </TouchableOpacity>
                      );
                    } else {
                      return (
                        <TouchableOpacity
                          onPress={() => this.selectData(item)}
                          style={{
                            backgroundColor: 'rgba(255, 255, 255, 1)',
                            flexDirection: 'row',
                            height: 80,
                            borderWidth: 1,
                            borderColor: '#DDDDDD',
                            borderRadius: 6,
                            margin: 10,
                          }}>
                          <View style={{flex: 1, flexDirection: 'column'}}>
                            <View style={{flex: 1}}>
                              <Text
                                style={{
                                  color: '#2B2B2B',
                                  fontWeight: 'bold',
                                  fontSize: 18,
                                  marginTop: 10,
                                  marginLeft: 10,
                                }}>
                                {item.productName}
                              </Text>
                            </View>
                            <View style={{flex: 1}}>
                              {/*<Text*/}
                              {/*  style={{*/}
                              {/*    color: '#777777',*/}
                              {/*    fontSize: 16,*/}
                              {/*    marginTop: 10,*/}
                              {/*    marginLeft: 10,*/}
                              {/*  }}>*/}
                              {/*  {item.tags}*/}
                              {/*</Text>*/}
                            </View>
                          </View>
                          <View
                            style={{
                              width: 120,
                              justifyContent: 'center',
                              alignItems: 'center',
                            }}>
                            <Text
                              style={{
                                color: '#ECC385',
                                fontWeight: 'bold',
                                fontSize: 25,
                              }}>
                              <Text style={{fontSize: 16}}>¥</Text>
                              {item.favouredPrice}
                            </Text>
                            <Text
                              style={{
                                color: '#AAAAAA',
                                textDecorationLine: 'line-through',
                              }}>
                              ¥{item.oriPrice}
                            </Text>
                          </View>
                        </TouchableOpacity>
                      );
                    }
                  }
                }
              })}
            </View>
            <View style={[public_css.view, {justifyContent: 'center'}]}>
              <TouchableOpacity
                style={{
                  width: 120,
                  height: 30,
                  backgroundColor: '#F8F8F8',
                  opacity: 1,
                  borderRadius: 99,
                  flexDirection: 'row',
                  justifyContent: 'center',
                  alignItems: 'center',
                }}
                onPress={() => this.hideChange()}>
                {this.state.hideStatus === false ? (
                  <View style={{flexDirection: 'row', alignItems: 'center'}}>
                    <Text style={{color: '#B6B6BA', fontSize: 16}}>
                      {this.state.hideStatusText}
                    </Text>
                    <SvgXml style={{marginLeft: 5}} xml={downArrowIcon()} />
                  </View>
                ) : (
                  <View style={{flexDirection: 'row', alignItems: 'center'}}>
                    <Text style={{color: '#B6B6BA', fontSize: 16}}>
                      {this.state.hideStatusText}
                    </Text>
                    <SvgXml style={{marginLeft: 5}} xml={upArrowIcon()} />
                  </View>
                )}
              </TouchableOpacity>
            </View>
            <View style={{backgroundColor: '#F7F7F7', height: 10}} />
            <View style={{backgroundColor: '#ffffff'}}>
              <Text
                style={{
                  color: '#2C2C2C',
                  marginLeft: 10,
                  marginTop: 10,
                  fontWeight: 'bold',
                  fontSize: 16,
                }}>
                套餐特权
              </Text>
              <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
                {this.state.itemList.map((item) => {
                  return (
                    <View
                      style={{
                        alignItems: 'center',
                        marginLeft: 10,
                        marginTop: 10,
                        justifyContent: 'center',
                      }}>
                      <Image
                        source={{uri: item.featureImgUrl}}
                        style={{height: 44, width: 44}}
                      />
                      <Text style={{width: 70, textAlign: 'center'}}>
                        {item.featureName}
                      </Text>
                    </View>
                  );
                })}
              </View>
            </View>
            <View style={{backgroundColor: '#F7F7F7', height: 10}} />
            <List style={{}}>
              <Item
                arrow="horizontal"
                onPress={() => {
                  this.props.navigation.navigate('agreement');
                }}>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                  <Text style={{marginLeft: 5, color: '#000000'}}>
                    会员服务协议
                  </Text>
                </View>
              </Item>
              <Item
                arrow="horizontal"
                onPress={() => {
                  this.props.navigation.navigate('problem');
                }}>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                  <Text style={{marginLeft: 5, color: '#000000'}}>
                    常见问题
                  </Text>
                </View>
              </Item>
            </List>
            <TouchableOpacity
              onPress={() => {
                // this.setState({
                //   isShowPay: true,
                // });
                Alert.alert(
                  '提示',
                  '云票在线App暂未开放，请到网页版进行支付！',
                  [
                    {
                      text: '确定',
                      // onPress: () => {
                      //   this.props.navigation.goBack();
                      // },
                    },
                  ],
                  {cancelable: false},
                );
              }}
              style={{
                height: 40,
                backgroundColor: '#2A2C44',
                alignItems: 'center',
                justifyContent: 'center',
                marginLeft: 10,
                marginRight: 10,
                borderRadius: 500,
                flexDirection: 'row',
              }}>
              <Text
                style={{color: '#ECC385', fontWeight: 'bold', fontSize: 16}}>
                立即支付{this.state.productDiscount}元
              </Text>
              <Text
                style={{
                  color: '#ECC385',
                  fontSize: 13,
                  textDecorationLine: 'line-through',
                  marginLeft: 5,
                }}>
                ¥{this.state.productAmount}
              </Text>
            </TouchableOpacity>
            <WhiteSpace />
          </ScrollView>
          <View style={{flex: 1, backgroundColor: '#ffffff'}}>
            <View style={{flex: 1}}>
              <FlatList
                style={{flexGrow: 0}}
                data={this.state.messageList}
                renderItem={(item) => this.renderItem(item)}
                // onRefresh={this.initData()}
                // refreshing={this.state.isLoading}
                // refreshControl={
                //   <RefreshControl
                //     title={'加载中...'}
                //     colors={['#B7B7B7']} //此颜色无效
                //     tintColor={'#B7B7B7'}
                //     titleColor={'#B7B7B7'} //只有ios有效
                //     refreshing={this.state.isLoading}
                //     onRefresh={() => {
                //       this.initData();
                //     }}
                //   />
                // }
                // onEndReached={() => this.onEndReached()}
                // onEndReachedThreshold={0.1}
              />
              <View style={{backgroundColor: '#F7F7F7', height: 10}} />
              <View style={{backgroundColor: '#ffffff'}}>
                <Text
                  style={{
                    color: '#2C2C2C',
                    marginLeft: 10,
                    marginTop: 10,
                    fontWeight: 'bold',
                    fontSize: 16,
                  }}>
                  套餐说明
                </Text>
                <Text style={{color: '#AAAAAA', margin: 10}}>
                  该产品为配合云票在线发票短信使用，即当您开票后选择接收方式为短信时，我们将以短信的形式给您发送该发票的链接。
                </Text>
              </View>
              <View style={{backgroundColor: '#F7F7F7', height: 10}} />
              <List style={{}}>
                <Item
                  arrow="horizontal"
                  onPress={() => {
                    this.props.navigation.navigate('agreement');
                  }}>
                  <View style={{flexDirection: 'row', alignItems: 'center'}}>
                    <Text style={{marginLeft: 5, color: '#000000'}}>
                      会员服务协议
                    </Text>
                  </View>
                </Item>
                <Item
                  arrow="horizontal"
                  onPress={() => {
                    this.props.navigation.navigate('problem');
                  }}>
                  <View style={{flexDirection: 'row', alignItems: 'center'}}>
                    <Text style={{marginLeft: 5, color: '#000000'}}>
                      常见问题
                    </Text>
                  </View>
                </Item>
              </List>
            </View>
            <TouchableOpacity
              onPress={() => {
                // this.setState({
                //   isShowPay: true,
                // });
                Alert.alert(
                  '提示',
                  '云票在线App暂未开放，请到网页版进行支付！',
                  [
                    {
                      text: '确定',
                      // onPress: () => {
                      //   this.props.navigation.goBack();
                      // },
                    },
                  ],
                  {cancelable: false},
                );
              }}
              style={{
                height: 40,
                backgroundColor: '#2A2C44',
                alignItems: 'center',
                justifyContent: 'center',
                marginLeft: 10,
                marginRight: 10,
                borderRadius: 500,
              }}>
              <Text
                style={{color: '#ECC385', fontWeight: 'bold', fontSize: 16}}>
                立即支付{this.state.discount}元
                <Text
                  style={{
                    fontSize: 13,
                    textDecorationLine: 'line-through',
                  }}>
                  ¥{this.state.amount}
                </Text>
              </Text>
            </TouchableOpacity>
            <WhiteSpace />
          </View>
        </Tabs>
        <Modal
          popup
          maskClosable
          visible={this.state.isShowPay}
          animationType="slide-up"
          onClose={this.showModal}>
          <View
            style={{
              paddingVertical: 20,
              paddingHorizontal: 20,
              backgroundColor: '#ffffff',
            }}>
            <View
              style={{
                flex: 1,
                backgroundColor: 'rgba(236, 195, 133, 0.13)',
                flexDirection: 'row',
                height: 80,
                borderWidth: 1,
                borderColor: '#DDDDDD',
                borderRadius: 6,
              }}>
              <View style={{flex: 1}}>
                <Text
                  style={{
                    color: '#2B2B2B',
                    fontWeight: 'bold',
                    fontSize: 18,
                    marginTop: 10,
                    marginLeft: 10,
                  }}>
                  {this.state.paySelect.title}
                </Text>
                <Text
                  style={{
                    color: '#777777',
                    fontSize: 16,
                    marginTop: 10,
                    marginLeft: 10,
                  }}>
                  {this.state.paySelect.desc}
                </Text>
              </View>
              <View
                style={{
                  width: 120,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <Text
                  style={{color: '#ECC385', fontWeight: 'bold', fontSize: 25}}>
                  <Text style={{fontSize: 16}}>¥</Text>
                  {this.state.paySelect.discount}
                </Text>
                <Text
                  style={{
                    color: '#AAAAAA',
                    textDecorationLine: 'line-through',
                  }}>
                  ¥{this.state.paySelect.amount}
                </Text>
              </View>
            </View>
            <Radio
              checked={true}
              onChange={(event) => {
                if (event.target.checked) {
                  console.log(123);
                }
              }}
              style={{
                borderWidth: 1,
                borderColor: '#999',
                margin: 10,
                backgroundColor: 'red',
              }}
            />
            <Radio
              checked={false}
              onChange={(event) => {
                if (event.target.checked) {
                  this.setState({part1Value: 1});
                }
              }}
              style={{borderWidth: 1, borderColor: '#999', margin: 10}}>
              Support
            </Radio>
            <View
              style={{
                backgroundColor: '#ffffff',
                height: 60,
                justifyContent: 'center',
              }}>
              <TouchableOpacity
                onPress={() => {
                  this.setState({
                    isShowPay: true,
                  });
                }}
                style={{
                  height: 40,
                  backgroundColor: '#2A2C44',
                  alignItems: 'center',
                  justifyContent: 'center',
                  marginLeft: 10,
                  marginRight: 10,
                  borderRadius: 500,
                }}>
                <Text
                  style={{color: '#ECC385', fontWeight: 'bold', fontSize: 16}}>
                  立即支付{this.state.discount}元
                  <Text
                    style={{
                      fontSize: 13,
                      textDecorationLine: 'line-through',
                    }}>
                    ¥{this.state.amount}
                  </Text>
                </Text>
              </TouchableOpacity>
            </View>
          </View>
          {/*<Button type="primary" onPress={this.onClose2}>*/}
          {/*  close modal*/}
          {/*</Button>*/}
        </Modal>
      </SafeAreaView>
    );
  }

  //页面渲染完成后加载
  async componentDidMount(): void {
    pageNo = 1;
    this.setState({
      messageList: [],
      showFoot: 1,
    });
    this.getSignIn();
    await this.getProductList();
    await this.getMessageList();
    await this.getMessageNumber();
  }

  //tab变化事件
  onChanges = (i, l) => {
    if (this.state.tab !== l) {
      this.setState({
        tab: l,
      });
      this.initData();
    }
  };

  //获取登录信息
  getSignIn = async () => {
    let userHeadImg = JSON.parse(await RetrieveData('userHeadImg'));
    let userName = await RetrieveData('userName');
    let company = await RetrieveData('company');
    if (company) {
      company = JSON.parse(company);
    }
    if (userName && company) {
      this.setState({
        userName: userName,
        companyName: company.entName,
      });
    }
    if (userHeadImg) {
      this.setState({
        headImage: userHeadImg.headImage,
        sex: userHeadImg.sex,
      });
    } else {
      this.setState({
        headImage: '',
        sex: '',
      });
    }
  };

  //初始化数据
  initData = async () => {
    pageNo = 1;
    this.setState({
      messageList: [],
      showFoot: 1,
      isLoading: true,
      hideStatusText: '更多',
      hideStatus: false,
      flexStyle: 'column',
    });
    await this.getMessageList();
    await this.getProductList();
  };

  //获取短信产品列表
  getMessageList = async () => {
    let token = await RetrieveData('token');
    if (token) {
      const url = '/marketing/feature/product/findPage';
      let res = await RequestNetwork(
        url,
        token,
        {
          featureId: 'F0000001',
          featureName: '短信服务',
          enable: true,
          pageNum: pageNo,
          pageSize: pageSize,
        },
        false,
        2,
      );
      if (res) {
        if (res.code === 0) {
          totalPage = res.data.pages;
          this.setList(res.data.records);
        } else {
          this.setState({
            showFoot: 0,
          });
          await this.abnormalMessage(res);
        }
      }
    }
  };

  //获取短信数量
  getMessageNumber = async () => {
    let company = JSON.parse(await RetrieveData('company'));
    let token = await RetrieveData('token');
    if (token && company) {
      const url = '/marketing/ent/features/findPage';
      let res = await RequestNetwork(
        url,
        token,
        {
          entTaxId: company.entTaxId,
          featureId: 'F0000001',
          featureName: '短信服务',
          pageNum: 1,
          pageSize: 10,
        },
        false,
        2,
      );
      if (res) {
        if (res.code === 0) {
          console.log(res);
          res.data.records.map((item) => {
            if (item.featureId === 'F0000001') {
              this.messageNumber = parseFloat(item.surplus);
            }
          });
        } else {
          await this.abnormalMessage(res);
        }
      }
    }
  };

  //加载产品列表
  setList = (data) => {
    let listData = {};
    let list = [];
    data.map((_, i) => {
      if (i === 0) {
        listData = {
          key: data[i].productId,
          title: data[i].productName,
          tags: data[i].tags,
          desc: data[i].productDesc,
          amount: data[i].oriPrice,
          discount: data[i].favouredPrice,
          isSelect: true,
        };
        this.setState({
          paySelect: listData,
          amount: listData.amount,
          discount: listData.discount,
        });
      } else {
        listData = {
          key: data[i].productId,
          title: data[i].productName,
          tags: data[i].tags,
          desc: data[i].productDesc,
          amount: data[i].oriPrice,
          discount: data[i].favouredPrice,
          isSelect: false,
        };
      }
      list = list.concat(listData);
    });
    if (list.length > 0) {
      this.setState({
        showFoot: 2,
        isLoading: false,
        messageList: list,
      });
    } else {
      this.setState({
        showFoot: 0,
        isLoading: false,
        messageList: list,
      });
    }
  };

  //显示短信列表
  renderItem = (data) => (
    <List.Item
      onPress={() => {
        this.messageChange(data);
      }}
      style={{display: 'flex', backgroundColor: '#ffffff'}}>
      {data.item.isSelect === true ? (
        <View
          style={{
            flex: 1,
            backgroundColor: 'rgba(236, 195, 133, 0.13)',
            flexDirection: 'row',
            height: 80,
            borderWidth: 1,
            borderColor: '#DDDDDD',
            borderRadius: 6,
          }}>
          <View style={{flex: 1, flexDirection: 'column'}}>
            <View style={{flex: 1}}>
              <Text
                style={{
                  color: '#2B2B2B',
                  fontWeight: 'bold',
                  fontSize: 18,
                  marginTop: 10,
                  marginLeft: 10,
                }}>
                {data.item.title}
              </Text>
            </View>
            <View style={{flex: 1}}>
              <Text
                style={{
                  color: '#777777',
                  fontSize: 16,
                  marginTop: 10,
                  marginLeft: 10,
                }}>
                {data.item.desc}
              </Text>
            </View>
          </View>
          <View
            style={{
              width: 120,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Text style={{color: '#ECC385', fontWeight: 'bold', fontSize: 25}}>
              <Text style={{fontSize: 16}}>¥</Text>
              {data.item.discount}
            </Text>
            <Text
              style={{color: '#AAAAAA', textDecorationLine: 'line-through'}}>
              ¥{data.item.amount}
            </Text>
          </View>
        </View>
      ) : (
        <View
          style={{
            flex: 1,
            backgroundColor: '#ffffff',
            flexDirection: 'row',
            height: 80,
            borderWidth: 1,
            borderColor: '#DDDDDD',
            borderRadius: 6,
          }}>
          <View style={{flex: 1}}>
            <Text
              style={{
                color: '#2B2B2B',
                fontWeight: 'bold',
                fontSize: 18,
                marginTop: 10,
                marginLeft: 10,
              }}>
              {data.item.title}
            </Text>
            <Text
              style={{
                color: '#777777',
                fontSize: 16,
                marginTop: 10,
                marginLeft: 10,
              }}>
              {data.item.desc}
            </Text>
          </View>
          <View
            style={{
              width: 120,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Text style={{color: '#ECC385', fontWeight: 'bold', fontSize: 25}}>
              <Text style={{fontSize: 16}}>¥</Text>
              {data.item.discount}
            </Text>
            <Text
              style={{color: '#AAAAAA', textDecorationLine: 'line-through'}}>
              ¥{data.item.amount}
            </Text>
          </View>
        </View>
      )}
    </List.Item>
  );

  // 处理短信选择
  messageChange = (data) => {
    this.state.messageList.map((item) => {
      if (item.key === data.item.key) {
        item.isSelect = true;
      } else {
        item.isSelect = false;
      }
    });
    this.setState({
      paySelect: data.item,
      amount: data.item.amount,
      discount: data.item.discount,
    });
  };

  //列表上拉加载
  onEndReached = async () => {
    if (this.state.showFoot === 2) {
      if (pageNo >= totalPage) {
        this.setState({showFoot: 0});
        return;
      } else {
        pageNo++;
        this.setState({showFoot: 1});
        await this.getMessageList();
      }
    }
  };

  // 支付弹出层点击阴影关闭
  showModal = () => {
    this.setState({
      isShowPay: false,
    });
  };

  // 字段隐藏切换
  hideChange = () => {
    this.setState({
      hideStatus: !this.state.hideStatus,
      hideStatusText: '收起',
    });
    if (this.state.hideStatus) {
      this.setState({
        flexStyle: 'column',
      });
    } else {
      this.setState({
        flexStyle: 'row',
      });
    }
  };

  //获取产品列表
  getProductList = async () => {
    let token = await RetrieveData('token');
    if (token) {
      const url = '/marketing/feature/product/findPage';
      let res = await RequestNetwork(
        url,
        token,
        {
          enable: true,
        },
        false,
        2,
      );
      if (res) {
        console.log('产品信息');
        console.log(res);
        if (res.code === 0) {
          this.setState({
            productNumber: res.data.total,
          });
          this.setProductList(res.data.records);
        } else {
          await this.abnormalMessage(res);
        }
      }
    }
  };

  // 处理产品的列表信息
  setProductList = (list) => {
    let listData = [];
    list.map((item, index) => {
      let data = {};
      if (index === 0) {
        data = {
          id: item.productId,
          productName: item.productName,
          tags: item.tags,
          oriPrice: item.oriPrice,
          favouredPrice: item.favouredPrice,
          productDesc: item.productDesc,
          imgid: item.imgid,
          imgUrl: item.imgUrl,
          enable: item.enable,
          ispId: item.ispId,
          featureItemList: item.featureItemList,
          isSelect: true,
        };
        let listInfo = [];
        if (item.featureItemList) {
          listInfo = item.featureItemList;
        }
        this.setState({
          itemList: listInfo,
          productDiscount: item.favouredPrice,
          productAmount: item.oriPrice,
        });
      } else {
        data = {
          id: item.productId,
          productName: item.productName,
          tags: item.tags,
          oriPrice: item.oriPrice,
          favouredPrice: item.favouredPrice,
          productDesc: item.productDesc,
          imgid: item.imgid,
          imgUrl: item.imgUrl,
          enable: item.enable,
          ispId: item.ispId,
          featureItemList: item.featureItemList,
          isSelect: false,
        };
      }
      listData = listData.concat(data);
    });
    this.setState({
      productList: listData,
    });
  };

  // 选择数据
  selectData = (data) => {
    this.state.productList.map((item) => {
      if (item.id === data.id) {
        item.isSelect = true;
      } else {
        item.isSelect = false;
      }
    });
    if (data.featureItemList) {
      this.setState({
        itemList: data.featureItemList,
      });
    } else {
      this.setState({
        itemList: [],
        productDiscount: data.favouredPrice,
        productAmount: data.oriPrice,
      });
    }
    console.log(data);
  };

  // 处理网络请求数据
  abnormalMessage = async (jason) => {
    if (jason.code === 401) {
      await Alert.alert(
        '登录失效',
        '登录状态已失效，请重新登录！',
        [
          {
            text: '确定',
            onPress: () => {
              CleanAll();
              this.props.navigation.popToTop();
            },
          },
        ],
        {cancelable: false},
      );
    }
    if (jason.code === 403) {
      Alert.alert(
        '权限',
        '暂无权限操作此模块！',
        [
          {
            text: '确定',
            onPress: () => {
              this.props.navigation.goBack();
            },
          },
        ],
        {cancelable: false},
      );
    }
    if (jason.code !== 401 && jason.code !== 403) {
      ToastShow(1, jason.msg);
    }
  };
}