Merge pull request #83 from 2remote/dev

dev已经基本稳定了

README.md

@@ -11,3 +11,4 @@ CircleCI
 - master、dev 是保护分支，不能强制 push，只能用 pull request 的方式合并，且必须同时满足以下两个条件
   - 至少一个管理员审核
   - ci 显示为 pass
+

app.json

@@ -0,0 +1,11 @@
+{
+  "name": "yaopai-mobile",
+  "description": "mobile web app for PR real test",
+  "scripts": {},
+  "env": {
+    "NPM_CONFIG_PRODUCTION": "false"
+  },
+  "addons": [
+    "papertrail"
+  ]
+}

app/actions/AlbumsActions.js

@@ -31,8 +31,10 @@ AlbumsActions.update.listen(function(data){
 AlbumsActions.delete.listen(function(data){
   HttpFactory.post(API.ALBUMS.delete,data,this.success,this.failed);
 });
-AlbumsActions.search.listen(function(categoryId){
+AlbumsActions.search.listen(function(categoryId = null ,pageIndex = 1 ,pageSize = 10){
   var data = {
+    PageIndex:pageIndex,
+    PageSize:pageSize,
     CategoryId : categoryId,
     Fields : 'Id,Title,UserId,CategoryId,Description,Service,Price,Cover,Photos.Id,Photos.AlbumsId,Photos.Url,Photos.Description,User.Id,User.NickName,User.Avatar'
   }

app/actions/PhotographerActions.js

@@ -20,7 +20,7 @@ PhotographerActions.get.listen(function(id){
 /*
   list动作，查询摄影师
 */
-PhotographerActions.list.listen(function(pageIndex = 0,pageSize =0, city = null){
+PhotographerActions.list.listen(function(pageIndex = 1,pageSize = 10, city = null){
   var data = {
     Fields : 'Id,BusinessPhone,ProvinceId,ProvinceName,RealName,CityId,CityName,CountyId,CountyName,User.Id,User.NickName,User.Avatar',
     PageIndex : pageIndex,

app/api.js

@@ -14,7 +14,7 @@ function hasHost(host) {
 }
 
 function isDevHost(host) {
-  const re = /dev\.|192\.|localhost|0\./i;
+  const re = /mobile-pr|dev\.|192\.|localhost|0\./i;
   const founds = host.match(re);
   if (founds != null) {
     return true;

app/components/AutoLoadPageMixin.js

@@ -0,0 +1,35 @@
+/**
+ * Created by zoey on 2015/11/28.
+ */
+import { findDOMNode } from 'react-dom';
+
+var AutoLoadPageMixin = {
+  componentDidMount: function() {
+    window.addEventListener('scroll', this.onWindowScroll);
+    window.addEventListener('resize', this.onWindowScroll);
+  },
+  onWindowScroll : function () {
+    const bounds = findDOMNode(this).getBoundingClientRect();
+    const scrollTop = window.pageYOffset;
+    const top = bounds.top + scrollTop;
+    const height = bounds.bottom - bounds.top;
+    if (scrollTop > 0 && height - scrollTop < window.screen.height) {
+      this.onNext();
+    }
+  },
+  onNext : function() {
+    var pageIndex = this.state.pageIndex + 1;
+    this.setState({pageIndex :pageIndex });
+    this.onChangePage(pageIndex)
+    if(this.state.pageCount != 0 && this.state.pageCount <= this.state.pageIndex){
+      window.removeEventListener('scroll', this.onWindowScroll);
+      window.removeEventListener('resize', this.onWindowScroll);
+    }
+  },
+  componentWillUnmount: function() {
+    window.removeEventListener('scroll', this.onWindowScroll);
+    window.removeEventListener('resize', this.onWindowScroll);
+  }
+};
+
+module.exports = AutoLoadPageMixin;

app/components/FindMyPassPage/FindByMobileForm.js

@@ -19,11 +19,14 @@ var FindByMobileForm = React.createClass({
     }
   },
   _onGetCodeStoreChange: function (data) {
-    if (data.left <= 0) {
-      this.setState({codeLeft: 0});
-      this.showMessage(data.result);
-    } else {
-      this.setState({codeLeft: data.left});
+    if (data.flag == 'resetCode') {
+      if (data.left <= 0) {
+        console.log(data.result);
+        this.setState({codeLeft: 0});
+        this.showMessage(data.result);
+      } else {
+        this.setState({codeLeft: data.left});
+      }
     }
   },
   _onverifyTel: function (data) {

app/components/GrapherDetailPage/WorkIntroRow.js

@@ -14,10 +14,10 @@ var WorkIntroRow = React.createClass({
   render: function() {
     const cover = imgModifier(this.props.data.Cover,"workCover");
     return (
-      <div className="workIntroRow" style={{width:'100%',height:260/375*innerWidth+80,textAlign:'center'}}>
+      <div className="workIntroRow" style={{width:'100%',height:210/375*innerWidth+80,textAlign:'center'}}>
         <Link to={"/workDetail/" + this.props.data.Id}>
           <img 
-            style={{width:'100%',height:260/375*innerWidth}}
+            style={{width:'100%',height:210/375*innerWidth}}
             ref="workImage"
             src={cover} />
         </Link>

app/components/GrapherPage/GrapherRow.js

@@ -2,6 +2,7 @@ var React = require('react');
 import { Router, Route, Link } from 'react-router';
 
 import {imgModifier} from '../Tools';
+import LazyLoad from 'react-lazy-load';
 
 var deviceWidth = parseInt(window.innerWidth);
 
@@ -29,14 +30,18 @@ var GrapherRow = React.createClass({
     const rondomAvatar = '//user.file.aiyaopai.com/_randomAvatar/' + (parseInt(this.props.data.User.Id) % 47 + 1 ) + '.png';
     const grapherAvatar = imgModifier(this.props.data.User.Avatar||rondomAvatar, "grapherAvatar");
 
-    
+
     return (
       <div className="grapherRow">
         <div className="grapherAvatar">
         <Link to={"/grapherDetail/"+this.props.data.Id} >
-          <img 
-            ref="avatar"
-            src={grapherAvatar} />
+          <div style={{width : '100%' ,height : deviceWidth/2 ,backgroundColor : '#eeedeb'}}>
+            <LazyLoad threshold={100}>
+              <img
+                ref="avatar"
+                src={grapherAvatar} />
+            </LazyLoad>
+          </div>
         </Link>
         </div>
         <div className="grapherPageIntro" style={grapherPageIntro}>

app/components/GrapherPage/index.js

@@ -6,13 +6,15 @@ var HamburgMenu = require('../HamburgMenu');
 var GrapherList = require('./GrapherList');
 var PhotographerStore = require('../../stores/PhotographerStore');
 var PhotographerActions = require('../../actions/PhotographerActions');
+var AutoLoadPageMixin = require('../AutoLoadPageMixin');
 require('./GrapherPage.css');
 
 var GrapherPage = React.createClass({
-  mixins : [Reflux.listenTo(PhotographerStore,'_onPhotographerStoreChange')],
+  mixins : [Reflux.listenTo(PhotographerStore,'_onPhotographerStoreChange') ,AutoLoadPageMixin],
   getInitialState: function() {
     return {
-      pageIndex : 0,
+      pageIndex : 1,
+      pageCount :0,
       graphers: []
     };
   },
@@ -25,11 +27,13 @@ var GrapherPage = React.createClass({
       if(data.hintMessage){
         console.log(data.hintMessage);
       }else{
-        this.setState({graphers : data.photographers});
+        this.setState({graphers : this.state.graphers.concat(data.photographers) ,pageCount : data.pageCount});
       }
     }
   },
-
+  onChangePage : function (pageIndex) {
+    PhotographerActions.list(pageIndex);
+  },
   render: function() {
     return (
       <DocumentTitle title="摄影师">

app/components/HamburgMenu.js

@@ -13,11 +13,12 @@ var HamburgMenu = React.createClass({
     }
   },
   showLeft: function() {
-    this.refs.mask.getDOMNode().style.display = 'block';
+    //this.refs.mask.getDOMNode().style.display react@0.13.3
+    this.refs.mask.style.display = 'block';
     this.refs.left.show();
   },
   handleMask: function () {
-    this.refs.mask.getDOMNode().style.display = 'none';
+    this.refs.mask.style.display = 'none';
     this.refs.left.hide();
   },
   _onUserStoreChange : function  (userData) {

app/components/SignupPage.js

@@ -31,7 +31,13 @@ var SignupPage = React.createClass({
     }
   },
   _onGetCodeStoreChange : function(data){
-    this.setState({codeLeft : data.left});
+    if (data.flag == 'registerCode') {
+      if (data.left == 0) {
+        this.showMessage(data.result);
+        return;
+      }
+      this.setState({codeLeft : data.left});
+    }
   },
   _handlePhoneChange : function(event){
     this.setState({phone : event.target.value});

app/components/Tools.js

@@ -9,10 +9,10 @@ exports.imgModifier = function  (img, mode) {
 
   switch(mode){
   case "work":
-    modifies = 'imageMogr2/auto-orient/interlace/1';    
+    modifies = 'imageMogr2/auto-orient/thumbnail/600x/interlace/1';
     break;
   case "workCover":
-    modifies = 'imageMogr2/auto-orient/thumbnail/750x/gravity/north/crop/!750x500a0a80/interlace/1';
+    modifies = 'imageMogr2/auto-orient/thumbnail/600x/gravity/north/crop/!600x400a0a80/interlace/1';
     break;
   case "avatar":
     modifies = 'imageView2/1/w/52/h/52/interlace/1';
@@ -21,7 +21,8 @@ exports.imgModifier = function  (img, mode) {
     modifies = 'imageView2/1/w/160/h/160/interlace/1';
     break;
   default:
-    modifies = 'imageMogr2/gravity/Center/thumbnail/!750x750r/crop/750x750/interlace/1';    
+    /*首页裁切函数，先不做修改*/
+    modifies = 'imageMogr2/gravity/Center/thumbnail/!100x100r/crop/100x100/interlace/1';
   }
 
   return img + '?' + modifies;

app/components/WorkPage/Menu.js

@@ -36,7 +36,7 @@ var Menu = React.createClass({
         zIndex: '9999',
         padding: '27px 0 19px',
         background: '#fff',
-        webkitTransition:'top ease .5s',
+        WebkitTransition:'top ease .5s',
         transition: 'top ease .5s',
       },
       ul: {
@@ -73,10 +73,10 @@ var Menu = React.createClass({
         height: '30px',
       }
     }
-    var lis = this.props.categories.map(function (item) {
+    var lis = this.props.categories.map(function (item,key) {
       console.log(item);
       return (
-        <li data-key={item.Id} onClick={this.changeCategory.bind(this, item.Id)} style={style.li}><a style={(item.Id == this.state.activeItem?style.aActive: style.aStyle)}>{item.Name}</a></li>
+        <li key={key} data-key={item.Id} onClick={this.changeCategory.bind(this, item.Id)} style={style.li}><a style={(item.Id == this.state.activeItem?style.aActive: style.aStyle)}>{item.Name}</a></li>
       )
     }.bind(this));
     return (

app/components/WorkPage/WorkIntroGrapherRow.js

@@ -2,6 +2,7 @@ var React = require('react');
 import { Router, Route, Link } from 'react-router';
 
 import {imgModifier} from '../Tools';
+import LazyLoad from 'react-lazy-load';
 
 var WorkIntroGrapherRow = React.createClass({
   getDefaultProps: function() {
@@ -26,10 +27,14 @@ var WorkIntroGrapherRow = React.createClass({
         style={{width:'100%',textAlign:'center',color:'#0f0f0f'}}
         className="workIntroGrapherRow">
         <Link to={"/workDetail/" + this.props.data.Id}>
-          <img
-            style={{width:'100%',height:260/375*innerWidth,marginBottom: -36}}
-            ref="workImage"
-            src={cover}/>
+          <div style={{width:'100%',height:210/375*innerWidth,marginBottom: -36,backgroundColor:'#eeedeb'}}>
+            <LazyLoad threshold={100}>
+              <img
+                style={{width:'100%',height:210/375*innerWidth,marginBottom: -36}}
+                ref="workImage"
+                src={cover}/>
+            </LazyLoad>
+          </div>
         </Link>
         <Link style={{lineHeight:'inherit'}} to={"/grapherDetail/" + this.props.data.User.Id}>
         <img

app/components/WorkPage/index.js

@@ -9,15 +9,17 @@ var AlbumsActions = require('../../actions/AlbumsActions');
 var AlbumsStore = require('../../stores/AlbumsStore');
 var WorkIntroGrapherList = require('./WorkIntroGrapherList');
 var HamburgMenu = require('../HamburgMenu');
+var AutoLoadPageMixin = require('../AutoLoadPageMixin');
 import { LIST_ALL_WORKS } from '../Tools';
 import Menu from './Menu';
 import ShowMenu from './ShowMenu';
 
 var WorkPage = React.createClass({
-  mixins : [Reflux.listenTo(AlbumsStore,'_onAlbumsStoreChange')],
+  mixins : [Reflux.listenTo(AlbumsStore,'_onAlbumsStoreChange') ,AutoLoadPageMixin],
   getInitialState: function() {
     return {
       pageIndex : 1,
+      pageCount :0,
       total : 0,
       works: [],
       categories : [],
@@ -42,15 +44,15 @@ var WorkPage = React.createClass({
       }.bind(this)
     });
     */
-    AlbumsActions.search(null);
+    AlbumsActions.search();
     AlbumsActions.getCategories();
   },
   _onAlbumsStoreChange : function(data){
     if(data.flag == 'search'){
       if(data.hintMessage){
         console.log(data.hintMessage);
       }else{
-        this.setState({works : data.workList,pageIndex: data.pageIndex,total : data.total});
+        this.setState({works : this.state.works.concat(data.workList),pageIndex: data.pageIndex,total : data.total ,pageCount:data.pageCount});
       }
     }
     if(data.flag == 'getCategories'){
@@ -62,9 +64,12 @@ var WorkPage = React.createClass({
     }
   },
   onChangeCategory : function(category){
-    this.setState({category : category});
+    this.setState({works : [],category : category});
     AlbumsActions.search(category);
   },
+  onChangePage : function(pageIndex){
+    AlbumsActions.search(this.state.category,pageIndex);
+  },
   render: function() {
     return (
       <DocumentTitle title="全部作品">

app/index.js

@@ -13,6 +13,7 @@ var SignupPage = require('./components/SignupPage');
 var FindMyPassPage1 = require('./components/FindMyPassPage/FindByMobileForm');
 var FindMyPassPage2 = require('./components/FindMyPassPage/ChangePassWordForm');
 var WorkBookPage = require('./components/BookPage');
+var ReactDOM = require('react-dom');
 import BookSuccessDialog from './components/BookPage/BookSuccessDialog';
 import BookModify from './components/BookPage/BookModify';
 import UserCenterPage from './components/UserCenterPage';
@@ -26,9 +27,9 @@ import ViewOrder from './components/UserCenterPage/ViewOrder'
 main();
 
 function main(){
-  React.render((
+  ReactDOM.render((
     <Router>
-      <Route path="/" component={App} />
+      <Route path="/" component={WorkPage} />
       <Route path="/work" component={WorkPage} />
       <Route path="/workDetail/:Id" component={WorkDetailPage} />
       <Route path="/grapher" component={GrapherPage} />