123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274 |
- /**
- * Created by zack on 2018/5/22.
- */
- import {
- View,
- Text,
- StyleSheet,
- Platform,
- ScrollView,
- FlatList,
- Image,
- TouchableOpacity
- } from 'react-native'
- import React, {Component} from 'react'
- import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../../utils/DimensionsTools'
- import BaseNavigationBarStyle from '../../base/BaseNavigationBarStyle'
- import PicAndTextNavigationBar from './View/PicAndTextNavigationBar'
- import PicAndTextDetailHeaderItem from './View/PicAndTextDetailHeaderItem'
- import PicAndTextDetailCommentItem from './View/PicAndTextDetailCommentItem'
- import HttpTools from '../../../network/HttpTools'
- import {auth, question, imgText, comment} from '../../../network/API'
-
- export default class PicAndTextDetailViewController extends Component {
- constructor(props) {
- super(props)
- this.state = {
- title: props.title,
- commentCount: 0,
- commentId: props.commentId,
- itemId: props.itemId,
- dataSources: [],
- userIcon: '',
- picItemUserName: '',
- }
- }
-
- componentDidMount() {
- this.getPicAndTextDetail()
- }
-
- createPicAndTextComment(modeId) {
- const param = JSON.stringify({
- content: "comment content",
- model_id: modeId,
- model_type: "img_txt",
- related_id: ""
- })
-
- HttpTools.post(comment, param, (response) => {
- console.log(response)
- }, (error) => {
- console.log(error)
- })
- }
-
- getPicAndTextDetail() {
- let url = imgText + '/' + this.state.itemId
-
- HttpTools.get(url, {}, (response) => {
- let headerItem = Object.assign({key: 0}, response)
- this.setState({picItemUserName: response.user_name ,userIcon: response.user_avatar,dataSources: [headerItem, {key: 1,}]})
- this.getPicAndTextCommentList()
- }, (error) => {
-
- })
- }
-
- getPicAndTextCommentList() {
- const param = {
- model_id: this.state.itemId,
- model_type: 'img_txt',
- }
-
- HttpTools.get(comment, param, (response) => {
- if (response && response.length) {
- let commentListWithIndex = response.map((item, index) => {
- return Object.assign(item, {key: index + 2})
- })
- this.setState({
- dataSources: this.state.dataSources.concat(commentListWithIndex),
- commentCount: commentListWithIndex.length,
- })
- }
-
- }, (error) => {
-
- })
- }
-
-
- didClickBottomButton(index) {
- if (index === 0) { //send message
-
- }else if (index === 1){// star
-
- }else if (index === 2) { //forward
-
- }else if (index === 3) { //add comment
- // this.props.navigator.showModal({
- // screen: 'QuestionCreateViewController',
- // title: '提问',
- // backButtonTitle: '',
- // passProps: {
- // questionName: '如何学习英语?'
- // },
- // navigatorStyle: BaseNavigationBarStyle
- // })
-
- this.createPicAndTextComment(this.state.itemId)
- }
- }
-
- didClickImageViewContainer(imageUrls) {
- this.props.navigator.push({
- screen: 'PicAndTextImageSwiperViewController',
- backButtonTitle: '',
- navigatorStyle:{
- navBarHidden: true,
- drawUnderNavBar: true,
- drawUnderTabBar: true,
- },
- passProps: {
- imageUrls: imageUrls
- },
- })
- }
-
- renderItem(item) {
- const index = item.key
- if (index === 0) {
- return(
- <PicAndTextDetailHeaderItem
- imageUrls = {item.urls}
- title = {item.text}
- didClickImageViewContainer = {() => {
- this.didClickImageViewContainer([])
- }}
- />
- )
- }else if (index === 1) {
- return(
- <View style={{width: ScreenDimensions.width, height: 40, backgroundColor: 'white', alignItems: 'center', flexDirection: 'row'}}>
- <Text style={{marginLeft: 23,}}>{this.state.commentCount + '条评论'}</Text>
- <View style={{ width: ScreenDimensions.width, height: 0.5, backgroundColor: '#efeff4', position: 'absolute', left: 0, bottom: 0}} />
- </View>
- )
- }else{
- return(
- <PicAndTextDetailCommentItem
- title = {item.content}
- userName = {item.user_name}
- userIcon = {item.user_avatar}
- commentCount = {item.comment_count}
- likes = {item.likes}
- shares = {item.shares}
- isLiked = {item.is_liked}
- />
- )
- }
- }
- render() {
- return(
- <View style={styles.View}>
- <PicAndTextNavigationBar
- userIcon = {this.state.userIcon}
- userName = {this.state.picItemUserName}
- didClickLeftButton = {() => {
- this.props.navigator.pop()
- }}
- />
-
- <View style={styles.ListView}>
- <FlatList
- data = {this.state.dataSources}
- renderItem={({item}) => this.renderItem(item)}
- keyExtractor = {(item,index) =>{
- return 'key' + item.key + index
- }}
- ListFooterComponent = {() => {
- return(
- <View style={{width: ScreenDimensions.width, height: 44, backgroundColor: 'white'}} />
- )
- }}
- />
- </View>
-
- <View style={styles.BottomBgView}>
- <TouchableOpacity onPress={() => {
- this.didClickBottomButton(3)
- }} style={styles.InputBgView}>
- <Image style={styles.PenImageView} source={require('../../../resources/images/TabBar/PicAndText/pen.png')}/>
- <Text style={styles.PlaceHolder}>{'写评论...'}</Text>
- <Image style={styles.EmojiImageView} source={require('../../../resources/images/TabBar/PicAndText/Express.png')}/>
- </TouchableOpacity>
- <View style={styles.RightIconsBgView}>
- <TouchableOpacity onPress={() => {
- this.didClickBottomButton(0)
- }} style={{marginRight: 30}}>
- <Image source={require('../../../resources/images/TabBar/PicAndText/mess.png')}/>
- </TouchableOpacity>
-
- <TouchableOpacity onPress={() => {
- this.didClickBottomButton(1)
- }} style={{marginRight: 30}}>
- <Image source={require('../../../resources/images/TabBar/PicAndText/star.png')}/>
- </TouchableOpacity>
-
- <TouchableOpacity onPress={() => {
- this.didClickBottomButton(2)
- }} >
- <Image source={require('../../../resources/images/TabBar/PicAndText/Forward.png')}/>
- </TouchableOpacity>
- </View>
- <View style={styles.BottomTopLineView}/>
- </View>
- </View>
- )
- }
- }
-
- const styles = StyleSheet.create({
- View: {
- width: ScreenDimensions.width,
- height: ScreenDimensions.height,
- backgroundColor: 'white',
- },
- ListView: {
- width: ScreenDimensions.width,
- height: ScreenDimensions.height - NavigationBarHeight.height - 48,
- marginTop: NavigationBarHeight.height,
- },
- BottomBgView: {
- width: ScreenDimensions.width,
- height: 48,
- flexDirection: 'row',
- alignItems: 'center',
- justifyContent: 'space-between'
- },
- BottomTopLineView: {
- width: ScreenDimensions.width,
- height: 0.5, backgroundColor: '#efeff4',
- position: 'absolute',
- left: 0,
- top: 0
- },
- InputBgView: {
- width: ScreenDimensions.width - 22 - 30 - 140,
- height: 34,
- borderRadius: 17,
- backgroundColor: '#dedede',
- flexDirection: 'row',
- alignItems: 'center',
- marginLeft: 22
- },
- PenImageView: {
- marginLeft: 14,
- },
- PlaceHolder:{
- marginLeft: 8,
- fontSize: 16,
- color: '#3c3c3c'
- },
- RightIconsBgView: {
- flexDirection: 'row',
- alignItems: 'center',
- marginRight: 20,
- },
- EmojiImageView: {
- position: 'absolute',
- right: 10,
- }
-
- })
|