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 (
{this.state.headImage === '' || this.state.headImage === null ? (
this.state.sex === 'F' ? (
) : (
)
) : (
)}
{this.state.userName}
续费企业：{this.state.companyName}
服务购买时间：--------
服务到期剩余：--------
--/{this.state.messageNumber}
年度短信发送量
this.onChanges(i, l)}
page={0}
tabBarUnderlineStyle={{backgroundColor: '#ECC385'}}
tabBarActiveTextColor={'#EABC78'}
tabBarInactiveTextColor={'#646464'}
tabBarTextStyle={{fontSize: 16}}>
{this.state.productList.map((item, index) => {
if (this.state.hideStatus) {
if (this.state.productNumber > 1) {
if (item.isSelect) {
return (
this.selectData(item)}>
{item.productName}
{/**/}
{/* {item.tags}*/}
{/**/}
¥
{item.favouredPrice}
¥{item.oriPrice}
);
} else {
return (
this.selectData(item)}>
{item.productName}
{/**/}
{/* {item.tags}*/}
{/**/}
¥
{item.favouredPrice}
¥{item.oriPrice}
);
}
} else {
if (item.isSelect) {
return (
this.selectData(item)}
style={{
backgroundColor: 'rgba(236, 195, 133, 0.13)',
flexDirection: 'row',
height: 80,
borderWidth: 1,
borderColor: '#DDDDDD',
borderRadius: 6,
margin: 10,
}}>
{item.productName}
{/**/}
{/* {item.tags}*/}
{/**/}
¥
{item.favouredPrice}
¥{item.oriPrice}
);
} else {
return (
this.selectData(item)}
style={{
backgroundColor: 'rgba(255, 255, 255, 1)',
flexDirection: 'row',
height: 80,
borderWidth: 1,
borderColor: '#DDDDDD',
borderRadius: 6,
margin: 10,
}}>
{item.productName}
{/**/}
{/* {item.tags}*/}
{/**/}
¥
{item.favouredPrice}
¥{item.oriPrice}
);
}
}
} else {
if (index === 0) {
if (item.isSelect) {
return (
this.selectData(item)}
style={{
backgroundColor: 'rgba(236, 195, 133, 0.13)',
flexDirection: 'row',
height: 80,
borderWidth: 1,
borderColor: '#DDDDDD',
borderRadius: 6,
margin: 10,
}}>
{item.productName}
{/**/}
{/* {item.tags}*/}
{/**/}
¥
{item.favouredPrice}
¥{item.oriPrice}
);
} else {
return (
this.selectData(item)}
style={{
backgroundColor: 'rgba(255, 255, 255, 1)',
flexDirection: 'row',
height: 80,
borderWidth: 1,
borderColor: '#DDDDDD',
borderRadius: 6,
margin: 10,
}}>
{item.productName}
{/**/}
{/* {item.tags}*/}
{/**/}
¥
{item.favouredPrice}
¥{item.oriPrice}
);
}
}
}
})}
this.hideChange()}>
{this.state.hideStatus === false ? (
{this.state.hideStatusText}
) : (
{this.state.hideStatusText}
)}
套餐特权
{this.state.itemList.map((item) => {
return (
{item.featureName}
);
})}
- {
this.props.navigation.navigate('agreement');
}}>
会员服务协议
- {
this.props.navigation.navigate('problem');
}}>
常见问题
{
// 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',
}}>
立即支付{this.state.productDiscount}元
¥{this.state.productAmount}
this.renderItem(item)}
// onRefresh={this.initData()}
// refreshing={this.state.isLoading}
// refreshControl={
// {
// this.initData();
// }}
// />
// }
// onEndReached={() => this.onEndReached()}
// onEndReachedThreshold={0.1}
/>
套餐说明
该产品为配合云票在线发票短信使用，即当您开票后选择接收方式为短信时，我们将以短信的形式给您发送该发票的链接。
- {
this.props.navigation.navigate('agreement');
}}>
会员服务协议
- {
this.props.navigation.navigate('problem');
}}>
常见问题
{
// 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,
}}>
立即支付{this.state.discount}元
¥{this.state.amount}
{this.state.paySelect.title}
{this.state.paySelect.desc}
¥
{this.state.paySelect.discount}
¥{this.state.paySelect.amount}
{
if (event.target.checked) {
console.log(123);
}
}}
style={{
borderWidth: 1,
borderColor: '#999',
margin: 10,
backgroundColor: 'red',
}}
/>
{
if (event.target.checked) {
this.setState({part1Value: 1});
}
}}
style={{borderWidth: 1, borderColor: '#999', margin: 10}}>
Support
{
this.setState({
isShowPay: true,
});
}}
style={{
height: 40,
backgroundColor: '#2A2C44',
alignItems: 'center',
justifyContent: 'center',
marginLeft: 10,
marginRight: 10,
borderRadius: 500,
}}>
立即支付{this.state.discount}元
¥{this.state.amount}
{/**/}
);
}
//页面渲染完成后加载
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) => (
{
this.messageChange(data);
}}
style={{display: 'flex', backgroundColor: '#ffffff'}}>
{data.item.isSelect === true ? (
{data.item.title}
{data.item.desc}
¥
{data.item.discount}
¥{data.item.amount}
) : (
{data.item.title}
{data.item.desc}
¥
{data.item.discount}
¥{data.item.amount}
)}
);
// 处理短信选择
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);
}
};
}