罗广聪 / ProtectGod

Go to a project
Toggle navigation Toggle navigation pinning
罗广聪
c3fa5285 1 parent f0d88d3e

已处理好全局状态和回退刷新的问题

Inline Side-by-side
Showing 5 changed files with 194 additions and 146 deletions
... ... @@ -27,7 +27,7 @@ export default class Home extends Component {
title: "平安保险第一个",
context: "600万医疗报废，自费药，进口药，器材费",
url:
"http://m.people.cn/n4/2017/0907/c190-9825877.html?admincptm=1504789835057",
"http://hankschan.legendh5.com/h5/b8302dac-0563-478c-ff82-ba8ab20c1cb3.html",
imgurl: require("../../assets/circle/newspic.png")
},
{
... ...
... ... @@ -17,15 +17,21 @@ export default class Details extends Component {
super(props);
this.state = {
data: this.props.navigation.state.params.item,
text: ""
// 留言
text: "",
comments: []
};
}
componentWillMount() {
console.log("详情页", this);
this.getComments();
}
componentDidMount() {
// this.getComments();
}
render() {
const { data } = this.state;
const { data, comments } = this.state;
return (
<View style={styles.container}>
<KeyboardAvoidingView behavior="padding" style={styles.KAVContainer}>
... ... @@ -33,49 +39,52 @@ export default class Details extends Component {
style={styles.scrollViewContainer}
automaticallyAdjustContentInsets={false}
>
{/* 标题 */}
<Text style={styles.titleText} numberOfLines={3}>
{data.title}
</Text>
{/* 个人信息 */}
<View style={styles.personContainer}>
<Image style={styles.personImg} source={data.image} />
<Image
style={styles.personImg}
source={require("../../assets/Mine/iconpic1.png")}
/>
<View style={styles.personRightContainer}>
<View style={styles.personRTContainer}>
<Text style={styles.personRTName}>{data.name}</Text>
<Text style={styles.personRTIdentity}>{data.identity}</Text>
</View>
{/* 时间等请求获取 */}
<Text style={styles.personRB}>{data.time}</Text>
</View>
</View>
{/* 正文 */}
<Text style={styles.content}>{data.content}</Text>
<Text style={styles.copyright}>本文版权归 {data.name} 所有</Text>
{/* 评论 */}
<View style={styles.commentsContainer}>
<View style={styles.commentsHeader}>
<Text style={styles.commentsHeaderL}>评论</Text>
<Text style={styles.commentsHeaderR}>
( {data.comments.length} )
{/* ( {comments.length} ) */}
</Text>
</View>
{data.comments.map((item, index) => {
{this.state.comments.map((item, index) => {
return (
<View style={styles.itemContainer} key={index}>
<Image style={styles.itemIcon} source={item.replayicon} />
<Image
style={styles.itemIcon}
source={require("../../assets/Mine/iconpic1.png")}
/>
<View style={styles.itemRightContainer}>
<View style={styles.itemRightTop}>
<View style={styles.itemRightTopLeft}>
<Text style={styles.itemReplyer}>{item.replyer}</Text>
<Text style={styles.itemWord}>回复</Text>
<Text style={styles.itemBeenreplyer}>
{item.beenreplyer}
</Text>
<Text style={styles.itemReplyer}>{item.user}</Text>
</View>
<Text style={styles.itemTime}>{item.time}</Text>
{/* <Image
style={styles.itemRightTopRight}
source={require("../../assets/tabbar/ic_circle_n.png")}
/> */}
</View>
<Text style={styles.itemRightBottom}>{item.content}</Text>
</View>
... ... @@ -107,25 +116,73 @@ export default class Details extends Component {
<Text style={styles.sendButton}>发送</Text>
</TouchableOpacity>
</View>
{/* <TouchableOpacity
ononPress={() => {
this.props.navigator.push({
component: WebView,
passProps: {
url: "https://www.baidu.com"
}
});
}}
>
<Text>跳转试试看</Text>
</TouchableOpacity> */}
</KeyboardAvoidingView>
</View>
);
}
getComments() {
let that = this,
articleID = this.state.data.id,
formData = new FormData();
formData.append("article", articleID);
return fetch(`https://devpay.brae.co/test/insurance/comment/get`, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
body: formData
})
.then(resp => {
if (resp.status === 200) {
return resp.json();
} else {
console.error("something went wrong!");
}
})
.then(respJson => {
if (respJson.enmsg != "ok") {
alert(respJson.cnmsg);
} else {
that.setState({
comments: respJson.data.comment
});
console.log("comments", respJson.data.comment);
}
})
.catch(err => console.error(err));
}
sendMsg() {
var that = this;
var that = this,
formData = new FormData();
// 请求文章数据
return fetch(`https://devpay.brae.co/test/insurance/comment/add`, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
}
})
.then(resp => {
if (resp.status === 200) {
return resp.json();
} else {
console.error("something went wrong!");
}
})
.then(respJson => {
if (respJson.enmsg != "ok") {
alert(respJson.cnmsg);
} else {
that.setState({
ListData: respJson.data.data
});
console.log("state.ListData", this.state.ListData);
}
})
.catch(err => console.error(err));
this.setState({
text: ""
});
... ... @@ -137,7 +194,7 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: "flex-start",
alignItems: "stretch",
backgroundColor: "white",
backgroundColor: "white"
},
KAVContainer: {
flex: 1,
... ...
... ... @@ -13,71 +13,16 @@ import CommonWebView from "../../Components/CommonWebView";
import Details from "./details";
export default class InsuranceCircle extends Component {
// static navigationOptions = {
// title: '保圈',
// };
constructor(props) {
super(props);
this.state = {
ListData: [
// {
// title: "家庭经济越差越应该买保险，因为你病不起，输不起，也折腾不起…",
// content:
// "现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…",
// name: "嘿嘿嘿",
// identity: "保险代理人",
// image: require("../../assets/Mine/iconpic1.png"),
// num: "30",
// time: "2017-8-15",
// comments: [{
// replyer: "噢噢噢",
// replayicon: require("../../assets/Mine/iconpic1.png"),
// beenreplyer: "嘿嘿嘿",
// content: "生活就是如此矛是如此此生活就是如此矛盾现实生活就是如此矛盾现",
// time: "两小时前",
// },{
// replyer: "哦哦哦",
// replayicon: require("../../assets/Mine/iconpic1.png"),
// beenreplyer: "哈哈哈",
// content: "生活就是如此矛是如此此生活就是如此矛盾现实生活就是如此矛盾现",
// time: "两小时前",
// },{
// replyer: "洛洛洛",
// replayicon: require("../../assets/Mine/iconpic1.png"),
// beenreplyer: "额额额",
// content: "生活就是如此矛是如此此生活就是如此矛盾现实生活就是如此矛盾现",
// time: "两小时前",
// }],
// },
// {
// title: "家庭经济越差越应该买保险，因为你病不起，输不起，也折腾不起…",
// content:
// "现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…",
// name: "嘿嘿嘿",
// identity: "保险代理人",
// image: require("../../assets/circle/newspic.png"),
// num: "29",
// time: "2017-8-15",
// comments: []
// },
// {
// title: "因为你病不起，输不起，也折腾不起…",
// content:
// "现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…",
// name: "luosf",
// identity: "保险代理人",
// image: require("../../assets/circle/newspic.png"),
// num: "10",
// time: "2017-8-15",
// comments: []
// }
],
testData: null,
ListData: [],
};
}
componentDidMount() {
var that = this;
// 请求文章数据
return fetch(`https://devpay.brae.co/test/insurance/article`,{
method: "POST",
headers: {
... ... @@ -86,8 +31,6 @@ export default class InsuranceCircle extends Component {
},
})
.then((resp) => {
// console.log("测试接口",resp);
// return false;
if (resp.status === 200) {
return resp.json();
} else {
... ... @@ -96,13 +39,12 @@ export default class InsuranceCircle extends Component {
})
.then((respJson) => {
if (respJson.enmsg != 'ok') {
console.error(err);
alert(respJson.cnmsg);
} else {
that.setState({
ListData: respJson.data.data
});
console.log('state.testData',this.state.ListData);
console.log('state.ListData',this.state.ListData);
}
})
.catch((err) => console.error(err))
... ...
... ... @@ -18,11 +18,16 @@ export default class Login extends Component {
this.state = {
phone: "",
password: "",
// 这个是注册用的nickname
nickname: "",
profession: "",
id: "",
// 处于登录还是注册页面
// 处于登录页面还是注册页面
isRegister: false,
IS_LOGIN: ""
IS_LOGIN: "",
USER_ID: "",
NICKNAME: "",
PROFESSION: "",
};
}
componentWillMount() {
... ... @@ -104,8 +109,27 @@ export default class Login extends Component {
/>
</View>
) : null}
{/* 登录/注册 按钮 */}
{/* 职业 */}
{this.state.isRegister ? (
<View style={styles.inputField}>
<Image
style={styles.icon}
source={require("../assets/login/ic_password2.png")}
/>
<TextInput
style={styles.textInput}
placeholder="请输入职业"
value={this.state.profession}
onChangeText={profession => this.setState({ profession })}
selectionColor="#1B9341"
clearTextOnFocus={true}
numberOfLines={1}
clearButtonMode="always"
keyboardType="default"
/>
</View>
) : null}
{/* 登录/注册 按钮 老师 */}
{!this.state.isRegister ? (
<TouchableOpacity
style={styles.confirmBtnLogin}
... ... @@ -164,14 +188,14 @@ export default class Login extends Component {
let that = this,
phone = this.state.phone,
password = this.state.password;
// if (!/^1(3|4|5|7|8)\d{9}$/.test(phone)) {
// alert("请正确输入手机号码");
// return;
// }
// if (password === "") {
// alert("请输入密码");
// return;
// }
if (!/^1(3|4|5|7|8)\d{9}$/.test(phone)) {
alert("请正确输入手机号码");
return;
}
if (password === "") {
alert("请输入密码");
return;
}
let formData = new FormData();
formData.append("phone", phone);
formData.append("password", password);
... ... @@ -195,19 +219,41 @@ export default class Login extends Component {
if (respJson.enmsg != "ok") {
alert(respJson.cnmsg);
} else {
that.setState(
{
// testData: respJson.data
}
);
AsyncStorage.setItem("IS_LOGIN", "yes", function(err) {
console.log("登录后拿到的ID和nickname",respJson.data);
let id = JSON.stringify(respJson.data.id),
nickname = respJson.data.nickname,
profession = respJson.data.profession;
AsyncStorage.multiSet(
[["IS_LOGIN", "yes"], ["USER_ID",id], ["NICKNAME",nickname], ["PROFESSION",profession]],
function(err) {
if (err) {
console.log("存储出错", err);
return false;
}
// that.props.navigation.navigate("Mine");
that.props.navigation.goBack();
AsyncStorage.multiGet(["IS_LOGIN","USER_ID","NICKNAME","PROFESSION"],(err, result) => {
if (err) {
console.error(err);
}
console.log("点击登录后的值",result)
that.setState({
IS_LOGIN: result[0][1],
USER_ID: (result[1][1] != null) ? result[1][1] : "",
NICKNAME: (result[2][1] != null) ? result[2][1] : "",
PROFESSION: (result[3][1] != null) ? result[3][1] : "",
})
})
that.props.navigation.state.params.refreshCallback({
IS_LOGIN: "yes",
USER_ID: id,
NICKNAME: nickname,
PROFESSION: profession,
});
setTimeout(function () {
that.props.navigation.goBack();
},0)
}
);
}
})
.catch(err => console.error(err));
... ... @@ -218,14 +264,16 @@ export default class Login extends Component {
phone = this.state.phone,
password = this.state.password,
nickname = this.state.nickname,
profession = this.state.profession,
formData = new FormData();
if (!phone || !password || !nickname) {
if (!phone || !password || !nickname || !profession) {
alert("请完整填写信息");
return false;
}
formData.append("phone", phone);
formData.append("password", password);
formData.append("nickname", nickname);
formData.append("profession", profession);
return fetch(`https://devpay.brae.co/test/insurance/register`, {
method: "POST",
... ...
... ... @@ -13,62 +13,57 @@ import {
import { StackNavigator, TabNavigator } from "react-navigation";
export default class Mine extends Component {
// static navigationOptions = {
// title: '我的',
// };
constructor(props) {
super(props);
this.state = {
IS_LOGIN: "no",
name: "哈哈哈",
identity: "职业代理人"
IS_LOGIN: "",
USER_ID: "",
NICKNAME: "",
PROFESSION: "",
};
this.saveResponse1 = this.saveResponse1.bind(this);
this.saveResponse2 = this.saveResponse2.bind(this);
}
componentWillMount() {
var _that = this;
console.log("this", this);
AsyncStorage.getItem("IS_LOGIN", (err, result) => {
AsyncStorage.multiGet(["IS_LOGIN","USER_ID","NICKNAME","PROFESSION"],(err, result) => {
if (err) {
console.error(err);
}
console.log("最初始的四个个值",result)
_that.setState({
IS_LOGIN: result
});
console.log("我的页面的IS_LOGIN", this.state.IS_LOGIN);
});
IS_LOGIN: result[0][1],
USER_ID: (result[1][1] != null) ? result[1][1].toString() : "",
NICKNAME: (result[2][1] != null) ? result[2][1].toString() : "",
PROFESSION: (result[3][1] != null) ? result[3][1].toString() : "",
})
})
}
componentDidMount() {
// console.log("hello,AsyncStorage");
}
signIn() {
var _that = this;
AsyncStorage.setItem("IS_LOGIN", "yes", function(err) {
if (err) {
console.log("存储出错", err);
return false;
}
});
_that.setState({
IS_LOGIN: "yes"
});
}
signOut() {
var _that = this;
AsyncStorage.setItem("IS_LOGIN", "no", function(err) {
AsyncStorage.multiSet(
[["IS_LOGIN", "no"], ["USER_ID",""], ["NICKNAME",""],["PROFESSION",""]],
function (err) {
if (err) {
console.log("存储出错", err);
return false;
}
});
_that.setState({
IS_LOGIN: "no"
});
IS_LOGIN: "no",
USER_ID: "",
NICKNAME: "",
PROFESSION: "",
})
console.log("退出登录后的值",_that.state)
}
)
}
saveResponse1(d) {
if (this.state.IS_LOGIN == "yes") {
this.setState({ name: d });
this.setState({ NICKNAME: d });
}
}
saveResponse2(d) {
... ... @@ -101,13 +96,11 @@ export default class Mine extends Component {
source={require("../../assets/tabbar/ic_circle_s.png")}
/>
<Text style={styles.leftTitle}>设置昵称</Text>
{/* {this.state.IS_LOGIN ? <Text style={styles.leftTitle}>昵称</Text> : null} */}
</View>
<View style={styles.itemRight}>
{this.state.IS_LOGIN === "yes" ? (
<Text style={styles.itemRightContent}>{this.state.name}</Text>
<Text style={styles.itemRightContent}>{this.state.NICKNAME}</Text>
) : null}
{/* <Text style={styles.itemRightContent}>{this.state.name}</Text> */}
<Image
style={styles.itemRightImg}
source={require("../../assets/Mine/rightArrow_gray.png")}
... ... @@ -129,7 +122,7 @@ export default class Mine extends Component {
<Text style={styles.leftTitle}>设置职业</Text>
</View>
<View style={styles.itemRight}>
{/* <Text style={styles.itemRightContent}>{this.state.identity}</Text> */}
<Text style={styles.itemRightContent}>{this.state.PROFESSION}</Text>
{this.state.IS_LOGIN === "yes" ? (
<Text style={styles.itemRightContent}>
{this.state.identity}
... ... @@ -150,7 +143,15 @@ export default class Mine extends Component {
onPress={() => {
this.state.IS_LOGIN == "yes"
? this.signOut()
: navigate("Login", { IS_LOGIN: this.state.IS_LOGIN });
: navigate("Login", { refreshCallback: (data)=>{
console.log("refreshCallback参数",data);
this.setState({
IS_LOGIN: data.IS_LOGIN,
USER_ID: data.USER_ID,
NICKNAME: data.NICKNAME,
PROFESSION: data.PROFESSION,
})
} });
}}
>
<Text style={styles.loginOutText}>
... ...