详情页接口调试

pages/CourseDetails.js

@@ -35,18 +35,29 @@ export default class CourseDetails extends Component {
         wareList
       })
     });
+    courseDetails.getPostsList(courseId).success(res => {
+      console.log('评论列表', res.data)
+      const postsList = res.data.list;
+      console.log(postsList)
+      this.setState({
+        postsList,
+      })
+    }).fail(error => {
+      console.log('失败', error)
+    })
   }
   state = {
     fullStyle: {},
     lefts: 0,
     courseList: {},
     wareList: {},
+    postsList: [],
     uri: 'http://chimee.org/vod/1.mp4'
   }
   render() {
     return (
       <View style={{backgroundColor: '#F0F1F5', width: '100%', height: '100%', position: 'relative'}}>
-        <ScrollView>
+        <ScrollView keyboardShouldPersistTaps="handled">
           <View>
             <VideoExplain 
             full={this.full.bind(this)}
@@ -59,10 +70,10 @@ export default class CourseDetails extends Component {
           <View style={ this.state.fullStyle }>
             <CourseListRow title={'课件'} wareList={ this.state.wareList} changeUri={ this.changeUri.bind(this) }></CourseListRow>
             {/* <CourseListLine title={'课件'} wareList={ this.state.wareList}></CourseListLine> */}
-            <Comment title={ '全部评论' }></Comment>
+            <Comment title={ '全部评论' }  postsList={ this.state.postsList } courseId= { this.state.courseList.id }></Comment>
           </View> 
         </ScrollView>
-        <Order left={ this.state.lefts }></Order>
+        {/* <Order left={ this.state.lefts }></Order> */}
       </View>
     );
   }

pages/components/Comment.js

@@ -7,16 +7,24 @@ import {
   TextInput,
   TouchableOpacity
 } from "react-native";
-
+import courseDetails from '../services/courseDetails'
 export default class Comment extends Component {
   constructor(props) {
     super(props);
     this.state = { 
       text: '',
       input: false,
-      default: '写评论'
+      default: '写评论',
+      postsList: [],
+      postsId: ''
     };
   }
+  componentWillReceiveProps(nextProps) {
+    console.log('--------', nextProps)
+    this.setState({
+      postsList: nextProps.postsList
+    })
+  }
   render() {
     return (
       <View style={styles.courseComment}>
@@ -29,28 +37,11 @@ export default class Comment extends Component {
             </View>
           </TouchableOpacity>
         </View>
-        <View style={[ styles.padding ]}>
-          <View style={[ styles.title ]}>
-            <View style={[ styles.center ]}>
-                <Image style={[styles.headImg ]}></Image>
-                <View>
-                  <Text style={{ fontSize: 16, color: '#373737' }}>小幸运</Text>
-                  <Text style={{ fontSize: 14, color: '#7F7F7F' } }>2019-07-05</Text>
-                </View>
-            </View>
-            <View style={[ styles.center ]}>
-              <Image source={require('../images/courseDetails/reply.png')} style={styles.reply} />
-              <Text>回复</Text>
-            </View>
-          </View>
-          <View style={ styles.padding }>
-            <Text>爱上识字爱上文字的美，了解文字，幽默风趣的画风，动画识字展示让识字更有趣，跟喜欢。</Text>
-          </View>
-          <View style={[ styles.padding, styles.column ]}>
-            <Text style={ styles.color }>卡通小熊</Text>
-            <Text>爱上识字爱上文字的美，了解文字，幽默风趣的画风，动画识字展示让识字更有趣，跟喜欢。</Text>
-          </View>
-        </View>
+        { 
+          this.state.postsList.map((item, index) => 
+            this.listRender(item, index) 
+          ) 
+        }
         {
             this.state.input ?
             <View style={[ styles.input, this.state.fullStyle]}>
@@ -63,7 +54,7 @@ export default class Comment extends Component {
               autoFocus = {true}
               defaultValue= {this.state.default}
             />
-            <Text style={{ color: '#58A8FA', fontSize: 18}}>发送</Text>
+            <Text style={{ color: '#58A8FA', fontSize: 18}} onPress={() => this.send()}>发送</Text>
           </View>
           :
           null
@@ -71,10 +62,103 @@ export default class Comment extends Component {
       </View>
     );
   }
-  comments() {
+  listRender(item, index) {
+    return (
+      <View style={[ styles.padding ]} key={ index }>
+        <View style={[ styles.title ]}>
+          <View style={[ styles.center ]}>
+              <Image style={[styles.headImg ]}></Image>
+              <View>
+                <Text style={{ fontSize: 16, color: '#373737' }}>{item.posts.columnNames}</Text>
+                <Text style={{ fontSize: 14, color: '#7F7F7F' } }>2019-07-05</Text>
+              </View>
+          </View>
+          <TouchableOpacity onPress={() => this.comments(item.posts.id)}>
+            <View style={[ styles.center ]}>
+              <Image source={require('../images/courseDetails/reply.png')} style={styles.reply} />
+              <Text>回复</Text>
+            </View>
+          </TouchableOpacity>
+      </View>
+      <View style={ styles.padding }>
+        <Text>{item.posts.content}</Text>
+      </View>
+      { 
+        item.replies.map((items, indexs) => 
+          this.repliesList(items, indexs) 
+        ) 
+      }
+    </View>
+    )
+  }
+  repliesList (items, indexs) {
+    return (
+      <View style={[ styles.padding, styles.column ]}  key={ indexs }>
+        <Text style={ styles.color }>卡通小熊</Text>
+        <Text>{ items.content }</Text>
+      </View>
+    )
+  }
+  comments(id) {
     this.setState({
       input: true
     })
+    if (id) {
+      this.setState({
+        postsId: id
+      })
+    }
+  }
+  send() {
+    const columnId = this.props.courseId;
+    const content = this.state.text;
+    const postsId = this.state.postsId;
+    console.log(postsId)
+    if (!content) {
+      alert('请输入内容')
+      return false
+    }
+    if (!postsId) {
+      courseDetails.addCommentList({
+        columnId,
+        columnNames: "卡通小熊",
+        content
+      }).then(res => {
+        console.log(res)
+        if ( res.code == 200) {
+          courseDetails.getPostsList(columnId).success(res => {
+            const postsList = res.data.list;
+            this.setState({
+              input: false,
+              postsList,
+              text: ''
+            })
+          }).fail(error => {
+            console.log('失败', error)
+          })
+        }
+      }).catch( err => console.log(err))
+    }else {
+      courseDetails.addReplyList({
+        postsId,
+        content
+      }).then(res => {
+        console.log(res)
+        if ( res.code == 200) {
+          courseDetails.getPostsList(columnId).success(res => {
+            const postsList = res.data.list;
+            console.log('==========', postsList)
+            this.setState({
+              input: false,
+              postsList,
+              text: ''
+            })
+          }).fail(error => {
+            console.log('失败', error)
+          })
+        }
+      }).catch( err => console.log(err))
+    }
   }
 }
 

pages/components/VideoExplain.js

@@ -23,6 +23,7 @@ import CusVideo from "./CusVideo";
 // 获取屏幕宽高
 import { Dimensions } from 'react-native'
 const { height, width } =  Dimensions.get('window');
+import courseDetails from '../services/courseDetails'
 
 export default class VideoExplain extends Component {
   state = {
@@ -36,6 +37,26 @@ export default class VideoExplain extends Component {
     isCollect: true,
     numberLine: 2
   };
+  componentWillReceiveProps(nextProps) {
+    console.log(nextProps.dataList.id)
+    const targetCode = nextProps.dataList.id;
+    courseDetails.getisFavorites({
+      targetCode,
+    }).then(res => {
+      console.log('--------', res)
+      if (res.code == 200 && res.data) {
+        this.setState({
+          collectImage: require('../images/courseDetails/have_collect.png'),
+          isCollect: false
+        })
+      }else {
+        this.setState({
+          collectImage: require('../images/courseDetails/collect.png'),
+          isCollect: true
+        })
+      }
+    }).catch(error => console.log(error))
+  }
 
   render() {
     return (
@@ -161,6 +182,17 @@ export default class VideoExplain extends Component {
         isCollect: true
       })
     }
+    const targetCode = this.props.dataList.id;
+    const templateCode = this.props.dataList.templateCode;
+    const title = this.props.dataList.title;
+    courseDetails.setFavorites({
+      targetCode,
+      templateCode,
+      title,
+      "iconImg": ""
+    }).then(res => {
+      console.log(res)
+    }).catch(error => console.log(error))
   }
   // 分享
   share() {

pages/services/courseDetails.js

@@ -2,7 +2,86 @@ import APIConfig from './api.js';
 import efunRequest from '../utils/efunRequest'
 
 export default class CourseDetails {
-    static getCourseDetails(courseId) {
-      return efunRequest.getHttpRequest().url(`http://ott80testlibrary.yifangjiaoyu.cn/mobile/course/${courseId}`).get();
-    }
+  // 获取课程详细信息
+  static getCourseDetails(courseId) {
+    return efunRequest.getHttpRequest().url(`http://ott80testlibrary.yifangjiaoyu.cn/mobile/course/${courseId}`).get();
+  }
+  // 获取评论列表
+  static getPostsList(columnId) {
+    console.log(columnId)
+    return efunRequest.getHttpRequest().url(`http://ott80test-base.yifangjiaoyu.cn/mobile/posts`).header({
+      uid: ''
+    }).params({
+      columnId,
+      pageNo: '',
+      pageSize: ''
+    }).get();
+  }
+  // 收藏
+  static setFavorites(data) {
+    return fetch(`http://ott80test-base.yifangjiaoyu.cn/mobile/favorites`,{
+      method:"POST",
+      headers:{
+        "Accept": "application/json",
+        "Content-Type": "application/json",
+        "uid": ""
+      },
+      body: JSON.stringify(data),
+    })
+    .then((response)=>response.json())
+    // return efunRequest.getHttpRequest().url(`http://ott80test-base.yifangjiaoyu.cn/mobile/favorites`).header({
+    //   "Accept" : "application/json",
+    //   "Content-Type" : "application/json",
+    //   "uid": ""
+    // }).data(data).post();
+  }
+  // 获取是否收藏
+  static getisFavorites(data) {
+    return fetch(`http://ott80test-base.yifangjiaoyu.cn/mobile/favorites/isFavorites`,{
+      method:"POST",
+      headers:{
+        "Accept": "application/json",
+        "Content-Type": "application/json",
+        "uid": ""
+      },
+      body: JSON.stringify(data),
+    })
+    .then((response)=>response.json())
+  }
+  // 写评论 
+  static addCommentList(data) {
+    return fetch(`http://ott80test-base.yifangjiaoyu.cn/mobile/posts`,{
+      method:"POST",
+      headers:{
+        "Accept": "application/json",
+        "Content-Type": "application/json",
+        "uid": ""
+      },
+      body: JSON.stringify(data),
+    })
+    .then((response)=>response.json())
+    // return efunRequest.getHttpRequest().url(`http://ott80test-base.yifangjiaoyu.cn/mobile/posts`).header({
+    //   "Accept" : "application/json",
+    //   "Content-Type" : "application/json",
+    //   "uid": ""
+    // }).data(data).post();
+  }
+  // 输入评论
+  static addReplyList(data) {
+    return fetch(`http://ott80test-base.yifangjiaoyu.cn/mobile/posts/reply`,{
+      method:"POST",
+      headers:{
+        "Accept": "application/json",
+        "Content-Type": "application/json",
+        "uid": ""
+      },
+      body: JSON.stringify(data),
+    })
+    .then((response)=>response.json())
+    // return efunRequest.getHttpRequest().url(`http://ott80test-base.yifangjiaoyu.cn/mobile/posts`).header({
+    //   "Accept" : "application/json",
+    //   "Content-Type" : "application/json",
+    //   "uid": ""
+    // }).data(data).post();
+  }
 }