build

MrNieQianliang · Oct 11, 2018 · 87a87d7 · 87a87d7
1 parent b353bb3
commit 87a87d7
Show file tree

Hide file tree

Showing 16 changed files with 347 additions and 302 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@
 
 # 技术栈
 
-React + taro + dva
+React + Taro + Dva
 
 ## 项目运行
 

diff --git a/site/css/app.css b/site/css/app.css
@@ -519,6 +519,34 @@ button {
   line-height: 3.84rem;
   color: #fff;
 }
+
+.loadMoreGif {
+  margin: 0.32rem auto;
+  width: 4.69333rem;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-justify-content: center;
+          justify-content: center;
+  -webkit-align-items: center;
+          align-items: center;
+}
+
+.loadMoreGif .text {
+  font-size: 30rpx;
+  color: #999;
+  margin-left: 10rpx;
+}
+
+.loadMoreGif .zan-loading {
+  width: 0.85333rem;
+  height: 0.85333rem;
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-animation: weuiLoading 1s steps(12, end) infinite;
+          animation: weuiLoading 1s steps(12, end) infinite;
+  background: transparent url("data:image/svg+xml;base64, PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=") no-repeat;
+  background-size: 100%;
+}
 /* colors
 -------------------------- */
 
@@ -542,6 +570,7 @@ button {
 }
 
 .home-page .nav-list {
+  min-height: 9.17333rem;
   display: -webkit-flex;
   display: flex;
   -webkit-justify-content: center;
@@ -677,7 +706,8 @@ button {
   height: 0.85333rem;
   margin-top: 1.06667rem;
   margin-left: 0.53333rem;
-  object-fit: contain;
+  float: left;
+  overflow: hidden;
 }
 
 .user-page .not-login .to-login .avatar-container {
@@ -798,7 +828,7 @@ button {
 .user-page .login .card .type .operation .txt {
   color: #ffffff;
   text-align: center;
-  font-size: 0.512rem;
+  font-size: 0.59733rem;
 }
 
 .user-page .login .card .type .operation .txt span,
@@ -1748,3 +1778,55 @@ button {
   font-size: 0.42667rem;
   margin-left: 0.10667rem;
 }
+/* colors
+-------------------------- */
+
+/* button-colors
+-------------------------- */
+
+/* 53a8ff */
+
+/* background-colors
+-------------------------- */
+
+/* tag-colors
+-------------------------- */
+
+/* methods
+-------------------------- */
+
+.order-page {
+  min-height: 100vh;
+  background-color: #F9F9F9;
+}
+
+.order-page .toggleType {
+  background-color: #fff;
+  padding-top: 0.42667rem;
+  padding-bottom: 0.42667rem;
+}
+
+.order-page .toggleType .item {
+  display: inline-block;
+  width: 20%;
+  text-align: center;
+  font-size: 0.512rem;
+  font-weight: 200;
+  color: #666;
+}
+
+.order-page .toggleType .item.active {
+  color: #EC5D75;
+  font-weight: 400;
+}
+
+.order-page .empty {
+  margin-top: 7.04rem;
+  height: 3.79733rem;
+  background: url("http://static-r.msparis.com/uploads/9/6/968b64edb282160e7da5dd184154bbe7.png") no-repeat center;
+  background-size: contain;
+}
+
+.order-page .empty.card {
+  margin-top: 8.74667rem;
+}
diff --git a/site/js/app.js b/site/js/app.js
diff --git a/src/app.js b/src/app.js
@@ -26,7 +26,8 @@ class App extends Component {
       'pages/size/index',
       'pages/login/index',
       'pages/message/index',
-      'pages/couponList/index'
+      'pages/couponList/index',
+      'pages/order/index',
     ],
     window: {
       backgroundTextStyle: 'dark',

diff --git a/src/components/GoodsList/index.js b/src/components/GoodsList/index.js
@@ -19,7 +19,7 @@ class GoodsList extends Component {
   }
 
   render() {
-    const { list } = this.props;
+    const { list, loading } = this.props;
     return (
       <View className="goods-list-container">
         {
@@ -67,6 +67,12 @@ class GoodsList extends Component {
           <View />
         )
       }
+      {loading && (
+        <View className="loadMoreGif">
+          <View className="zan-loading"></View>
+          <View className="text">加载中...</View>
+        </View>
+      )}
       </View>
     );
   }

diff --git a/src/components/GoodsList/index.scss b/src/components/GoodsList/index.scss
@@ -110,3 +110,25 @@
   }
 }
 
+.loadMoreGif {
+  margin: 15px auto;
+  width: 220px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .text {
+    font-size: 30rpx;
+    color: #999;
+    margin-left: 10rpx;
+  }
+  .zan-loading {
+    width: 40px;
+    height: 40px;
+    display: inline-block;
+    vertical-align: middle;
+    animation: weuiLoading 1s steps(12, end) infinite;
+    background: transparent url("data:image/svg+xml;base64, PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=") no-repeat;
+    -webkit-background-size: 100%;
+    background-size: 100%;
+  }
+}
diff --git a/src/pages/detail/index.js b/src/pages/detail/index.js
@@ -91,58 +91,57 @@ export default class Detail extends Component {
     })
   }
 
-  join = (e) => {
-    e.stopPropagation();
-    // 未登陆
-    const access_token = Cookies.get('access_token');
-    if (!access_token) {
-      this.props.history.push('/login.html');
+  //加入衣袋
+  join = () => {
+    if (!Taro.getStorageSync('access_token')) {
+      Taro.navigateTo({
+        url: '/pages/login/index',
+      })
       return;
     }
-    if (this.props.isjoin) {
+    if (this.state.isjoin) {
       return;
     }
-    if (this.props.detail.mode_id == 3 && (this.props.detail.enabled != 1 || this.props.detail.sale_stock == 0)) {
-      Toast.info('商品已售罄');
+    if (this.state.detail.mode_id == 3 && (this.state.detail.enabled != 1 || this.state.detail.sale_stock == 0)) {
+      Taro.showToast({
+        title: '商品已售罄',
+        icon: 'none',
+      });
       return;
     }
-    if (this.props.currentChooseId === '') {
-      Toast.info('请选择尺码');
+    if (this.state.currentChooseId === '') {
+      Taro.showToast({
+        title: '请选择尺码',
+        icon: 'none',
+      });
       return;
     }
-    if (this.props.detail.enabled == 1) {
-      this.props.dispatch({
-        type: 'goodsDetail/update',
-        payload: {
-          isjoin: true,
-        },
-      });
-      this.props.dispatch({
-        type: 'goodsDetail/getStock',
+    if (this.state.detail.enabled == 1) {
+      this.setState({
+        isjoin: true,
+      })
+      Taro.showToast({
+        title: '加入失败，衣袋尚未激活～～',
+        icon: 'none',
       });
     }
   }
 
-  chooseSize = () => {
-    const item = e.currentTarget.dataset.item
+  chooseSize = (e) => {
+    const has_stock = e.currentTarget.dataset.has_stock;
+    const id = e.currentTarget.dataset.id;
     // 只有has_stock =1 才可以选择尺码,其他都是disable
-    if (item.has_stock == 1) {
+    if (has_stock == 1) {
       // 如果点击当前，则2次点击清空
-      if (item.id == this.props.currentChooseId) {
-        this.props.dispatch({
-          type: 'goodsDetail/update',
-          payload: {
-            currentChooseId: '',
-          },
-        });
+      if (id == this.state.currentChooseId) {
+        this.setState({
+          currentChooseId: ''
+        })
       } else {
-      // 首次点击，赋值为当前id
-        this.props.dispatch({
-          type: 'goodsDetail/update',
-          payload: {
-            currentChooseId: item.id,
-          },
-        });
+        // 首次点击，赋值为当前id
+        this.setState({
+          currentChooseId: id,
+        })
       }
     }
   }
@@ -166,17 +165,17 @@ export default class Detail extends Component {
 
   makePhoneCall() {
     if (typeof window !== 'undefined') {
-      window.location.href = "tel:10086";
+      window.location.href = "tel:123456";
     }else {
       Taro.makePhoneCall({
-        phoneNumber: '10086'
+        phoneNumber: '123456'
       })
     }
   }
 
   computedStyle = (item) => {
     let str = '';
-    if (item.id == this.props.currentChooseId) {
+    if (item.id == this.state.currentChooseId) {
       str = 'size on';
     } else {
       str = 'size';
@@ -249,7 +248,7 @@ export default class Detail extends Component {
                   { spe && spe.options && spe.options.map((item, index) => (
                     <View key={index}>
                       { spe.name == '中码' ? (
-                        <View className={this.computedStyle(item)} data-item={item} onClick={this.chooseSize}>
+                        <View className={this.computedStyle(item)} data-has_stock={item.has_stock} data-id={item.id} onClick={this.chooseSize}>
                           { item.name == '均码' ? <View>均码</View> : (
                             <View>
                               {spe.name}
@@ -258,7 +257,7 @@ export default class Detail extends Component {
                             </View>
                           )}
                         </View>) : (
-                          <View className={this.computedStyle(item)} data-item={item} onClick={this.chooseSize}>
+                          <View className={this.computedStyle(item)} data-has_stock={item.has_stock} data-id={item.id} onClick={this.chooseSize}>
                             <View className="double">
                               {spe.name}
                               {item.name}