Merge remote-tracking branch 'origin/master' into feature/fashion-detail

@@ -4,6 +4,9 @@
       :name="`route-view-${yoho.direction}`">
       :name="`route-view-${yoho.direction}`">
       <router-view></router-view>
       <router-view></router-view>
     </transition>
     </transition>
+    <div class="fps" v-if="showFps">
+      {{fps}}
+    </div>
   </div>
   </div>
 </template>
 </template>
 
 
@@ -12,16 +15,45 @@ import {mapState} from 'vuex';
 
 
 export default {
 export default {
   name: 'App',
   name: 'App',
+  data() {
+    return {
+      showFps: false,
+      fpsTick: 0,
+      fps: 0
+    };
+  },
   computed: {
   computed: {
     ...mapState(['yoho'])
     ...mapState(['yoho'])
   },
   },
   mounted() {
   mounted() {
+    if (process.env.NODE_ENV === 'development') {
+      this.showFps = true;
+      this.frameCallback();
+    }
     if (this.yoho.context.needLogin) {
     if (this.yoho.context.needLogin) {
       this.$yoho.ready(() => {
       this.$yoho.ready(() => {
         this.$sdk.goLogin();
         this.$sdk.goLogin();
       });
       });
     }
     }
   },
   },
+  methods: {
+    frameCallback() {
+      window.requestAnimationFrame(() => {
+        const now = Date.now();
+
+        if (!this.time) {
+          this.time = now;
+        }
+        if (now - this.time >= 1000) {
+          this.time = now;
+          this.fps = this.fpsTick;
+          this.fpsTick = 0;
+        }
+        this.fpsTick++;
+        this.frameCallback();
+      });
+    }
+  },
   watch: {
   watch: {
     'yoho.context.needLogin': function(newVal) {
     'yoho.context.needLogin': function(newVal) {
       if (newVal) {
       if (newVal) {
@@ -72,4 +104,15 @@ export default {
   transform: translate3d(100%, 0, 0);
   transform: translate3d(100%, 0, 0);
   z-index: 2;
   z-index: 2;
 }
 }
+
+.fps {
+  position: absolute;
+  z-index: 99;
+  left: 0;
+  top: 0;
+  width: 20PX;
+  height: 20PX;
+  background-color: white;
+  color: black;
+}
 </style>
 </style>

@@ -91,14 +91,14 @@ export default {
     .product-name {
     .product-name {
       font-size: 24px;
       font-size: 24px;
       color: #9b9b9b;
       color: #9b9b9b;
-      letter-spacing: -0.25px;
+      letter-spacing: -0.25PX;
       height: 104px;
       height: 104px;
     }
     }
 
 
     .price {
     .price {
       font-size: 32px;
       font-size: 32px;
       color: #d0021b;
       color: #d0021b;
-      letter-spacing: -0.34px;
+      letter-spacing: -0.34PX;
     }
     }
   }
   }
 
 

@@ -45,7 +45,7 @@
         type: String,
         type: String,
         default: 'fav'
         default: 'fav'
       },
       },
-      text: String,
+      text: [String, Number],
       option: {
       option: {
         type: Object,
         type: Object,
         default() {
         default() {
@@ -88,12 +88,16 @@
       textStyle() {
       textStyle() {
         let style = `font-size: ${pxToRem(this.option.textFontSize || defaultOption.textFontSize)};`;
         let style = `font-size: ${pxToRem(this.option.textFontSize || defaultOption.textFontSize)};`;
 
 
-        if (['top', 'bottom'].indexOf(this.option.textAlign) >= 0) {
-          style += ` vertical-align: ${this.option.textAlign};`;
+        let textAlign = this.option.textAlign || defaultOption.textAlign;
+
+        if (['top', 'bottom'].indexOf(textAlign) >= 0) {
+          style += ` vertical-align: ${textAlign};`;
         }
         }
 
 
-        if (Number(this.option.textZoom) !== NaN) {
-          style += `transform: scale(${this.option.textZoom}, ${this.option.textZoom});`
+        let textZoom = this.option.textZoom || defaultOption.textAlign;
+
+        if (Number(textZoom) !== NaN) {
+          style += `transform: scale(${textZoom}, ${textZoom});`
         }
         }
 
 
         return style;
         return style;

 <template>
 <template>
-  <Layout>
+  <Layout class="article-page">
     <LayoutHeader slot='header' title="推荐" :share="shareData">
     <LayoutHeader slot='header' title="推荐" :share="shareData">
       <i class="iconfont icon-share-blod" slot="opts"></i>
       <i class="iconfont icon-share-blod" slot="opts"></i>
     </LayoutHeader>
     </LayoutHeader>
@@ -71,4 +71,7 @@ export default {
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
+.article-page {
+  background-color: #f0f0f0;
+}
 </style>
 </style>

@@ -5,11 +5,11 @@
       <span class="comment-content">{{comment.content}}</span>
       <span class="comment-content">{{comment.content}}</span>
     </p>
     </p>
     <div class="total-comment">
     <div class="total-comment">
-      <div class="total">查看{{count}}条评论</div>
-      <div class="last-time">1天前</div>
+      <div class="total hover-opacity">查看{{count}}条评论</div>
+      <div class="last-time">{{date}}</div>
     </div>
     </div>
     <div class="comment">
     <div class="comment">
-      <CubeInput placeholder='添加回复：赞美是一种美德'></CubeInput>
+      <div class="comment-input hover-opacity">添加回复：赞美是一种美德</div>
     </div>
     </div>
   </div>
   </div>
 </template>
 </template>
@@ -28,6 +28,10 @@ export default {
     count: {
     count: {
       type: Number,
       type: Number,
       default: 0
       default: 0
+    },
+    date: {
+      type: String,
+      default: 0
     }
     }
   },
   },
   components: {CubeInput: Input}
   components: {CubeInput: Input}
@@ -36,17 +40,47 @@ export default {
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 .article-item-comment {
 .article-item-comment {
-  padding: 30px;
+  padding: 36px 30px;
 
 
   .comment-item {
   .comment-item {
     font-size: 24px;
     font-size: 24px;
     color: #4a4a4a;
     color: #4a4a4a;
-    letter-spacing: 0.06px;
-    line-height: 40px;
+    letter-spacing: 0.06PX;
+    line-height: 36px;
   }
   }
 
 
   .user-name {
   .user-name {
     font-weight: bold;
     font-weight: bold;
   }
   }
+
+  .total-comment {
+    padding-top: 30px;
+    display: flex;
+    font-size: 24px;
+    color: #b0b0b0;
+    letter-spacing: 0.06px;
+
+    .total {
+      width: 50%;
+    }
+
+    .last-time {
+      width: 50%;
+      text-align: right;
+    }
+  }
+
+  .comment {
+    padding-top: 30px;
+
+    .comment-input {
+      padding: 0 20px;
+      background: #f0f0f0;
+      height: 60px;
+      line-height: 60px;
+      color: #b0b0b0;
+      font-size: 24px;
+    }
+  }
 }
 }
 </style>
 </style>

@@ -5,17 +5,14 @@
       <span class="name">Oscar</span>
       <span class="name">Oscar</span>
     </div>
     </div>
     <div class="opts">
     <div class="opts">
-      <Button class="btn-follow">关注</Button>
+      <div class="btn-follow hover-opacity">关注</div>
     </div>
     </div>
   </div>
   </div>
 </template>
 </template>
 
 
 <script>
 <script>
-import {Button} from 'cube-ui';
-
 export default {
 export default {
   name: 'ArticleItemHeader',
   name: 'ArticleItemHeader',
-  components: {Button}
 };
 };
 </script>
 </script>
 
 
@@ -58,6 +55,11 @@ export default {
     padding: 0;
     padding: 0;
     font-size: 26px;
     font-size: 26px;
     border-radius: 0;
     border-radius: 0;
+    background-color: #222;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
   }
 }
 }
 </style>
 </style>

 <template>
 <template>
   <div class="article-item-intro">
   <div class="article-item-intro">
-    <div class="intro">
-      Nike 旗下大热鞋款 Air Max 95 一直以来在街头造型当中的能见度都算高，凭藉其舒适脚感与百搭外型 Air Max 95 也轻松成为许多鞋迷的心头好。近日，<span class="expand">…展开</span>
+    <div class="intro hover-opacity" :class="{'intro-expand': isExpand}" @click="onExpand">
+      {{intro}}<span class="expand" v-if="!isExpand">…展开</span>
+      <span class="expand collapse" v-else>收起</span>
     </div>
     </div>
     <div class="widgets">
     <div class="widgets">
       <div class="topic">
       <div class="topic">
-        <WidgetTopic></WidgetTopic>
+        <WidgetTopic topic="种草"></WidgetTopic>
       </div>
       </div>
       <div class="opts">
       <div class="opts">
-        <WidgetLike></WidgetLike>
-        <WidgetFav></WidgetFav>
-        <WidgetShare></WidgetShare>
+        <WidgetLike num="91"></WidgetLike>
+        <WidgetFav num="99"></WidgetFav>
+        <WidgetShare num="1"></WidgetShare>
       </div>
       </div>
     </div>
     </div>
   </div>
   </div>
@@ -18,7 +19,35 @@
 
 
 <script>
 <script>
 export default {
 export default {
-  name: 'ArticleItemIntro'
+  name: 'ArticleItemIntro',
+  props: {
+    data: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      isExpand: false
+    };
+  },
+  computed: {
+    intro() {
+      if (this.isExpand) {
+        return this.data.intro;
+      }
+      if (this.data.intro.length > 66) {
+        return this.data.intro.substring(0, 66);
+      }
+    }
+  },
+  methods: {
+    onExpand() {
+      this.isExpand = !this.isExpand;
+    }
+  }
 };
 };
 </script>
 </script>
 
 
@@ -30,20 +59,56 @@ export default {
   .intro {
   .intro {
     font-size: 28px;
     font-size: 28px;
     color: #4a4a4a;
     color: #4a4a4a;
-    letter-spacing: 0.06px;
+    letter-spacing: 0.06PX;
+    overflow: hidden;
+    display: -webkit-box;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    position: relative;
+    line-height: 40px;
+
+    &.intro-expand {
+      padding-bottom: 40px;
+      overflow: initial;
+      display: block;
+    }
+  }
+
+  .expand {
+    font-size: 28px;
+    color: #000;
+    letter-spacing: 0.06PX;
+    line-height: 20px;
+    font-weight: bold;
+
+    &.collapse {
+      position: absolute;
+      right: 14px;
+      bottom: 0;
+      height: 28px;
+    }
   }
   }
 }
 }
 
 
 .widgets {
 .widgets {
   width: 100%;
   width: 100%;
   display: flex;
   display: flex;
+  margin-top: 40px;
 
 
   .topic {
   .topic {
     text-align: left;
     text-align: left;
+    width: 200px;
   }
   }
 
 
   .opts {
   .opts {
     text-align: right;
     text-align: right;
+    flex: 1;
+
+    & /deep/ .icon-btn {
+      margin-left: 48px;
+      text-align: right;
+    }
   }
   }
 }
 }
 </style>
 </style>

@@ -4,7 +4,7 @@
     <ArticleItemSlide :data="slideData"></ArticleItemSlide>
     <ArticleItemSlide :data="slideData"></ArticleItemSlide>
     <ProductGroup :data="productListData"></ProductGroup>
     <ProductGroup :data="productListData"></ProductGroup>
     <ArticleItemIntro :data="introData"></ArticleItemIntro>
     <ArticleItemIntro :data="introData"></ArticleItemIntro>
-    <ArticleItemComment :comments="commentData"></ArticleItemComment>
+    <ArticleItemComment :comments="commentData" :count="12" :date="'1天前'"></ArticleItemComment>
   </div>
   </div>
 </template>
 </template>
 
 
@@ -32,12 +32,14 @@ export default {
       
       
     },
     },
     introData() {
     introData() {
-
+      return {
+        intro: '旗下大热鞋款旗下大热鞋款旗下大热鞋款一直以来在街头造型当中的能见度都算高，凭藉其舒适脚感与百搭外型旗下大热鞋款也轻松成为许多鞋迷的心头好。近日，旗下大热鞋款旗下大热鞋款 Air Max 95 一直以来在街头造型当中的能见度都算高，凭藉其舒适脚感与百搭外型 Air Max 95 也轻松成为许多鞋迷的心头好。近日'
+      };
     },
     },
     commentData() {
     commentData() {
       return [{
       return [{
         name: 'NIKE后援团',
         name: 'NIKE后援团',
-        content: '好期待，一定要抢一双👟！'
+        content: '好期待，一定要抢一双👟！',
       }, {
       }, {
         name: 'NIKE后援团',
         name: 'NIKE后援团',
         content: '表情表情！！！这双仔细看好好看！！哈哈哈哈哈哈😄✌️'
         content: '表情表情！！！这双仔细看好好看！！哈哈哈哈哈哈😄✌️'
@@ -69,6 +71,7 @@ export default {
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 .article-item {
 .article-item {
   width: 100%;
   width: 100%;
-  
+  margin-bottom: 20px;
+  background-color: #fff;
 }
 }
 </style>
 </style>

+<template>
+  <YohoActionSheet ref="actionSheet" :full="true">
+    <div class="content">
+      <!--<template v-if="list.length === 0">-->
+        <!--<Loading class="loading" :size="50"></Loading>-->
+      <!--</template>-->
+
+      <CommentScrollView ref="commentList"></CommentScrollView>
+    </div>
+  </YohoActionSheet>
+</template>
+
+
+<script>
+import {Loading} from 'cube-ui';
+import CommentScrollView from './comment-scroll-view';
+
+export default {
+  name: 'CommentActionSheetPage',
+  components: {
+    Loading,
+    CommentScrollView
+  },
+  data() {
+    return {
+    };
+  },
+  methods: {
+    click() {
+      this.$refs.actionSheet.show();
+      this.$refs.commentList.click();
+    }
+  }
+};
+</script>
+
+<style>
+  .content {
+    width: 100%;
+    height: 80vh;
+    background-color: white;
+  }
+
+  .loading {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+</style>

+<template>
+  <div class="comment-scroll-view">
+    <div class="header">{{ count }}评论
+    </div>
+    <Scroll class="scroll-wrapper" ref="scroll" :options="scrollOptions">
+      <div v-for="i in list" class="item">huangtao {{i}}</div>
+    </Scroll>
+    <div class="footer">
+      <div class="input">评论</div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import {Scroll} from 'cube-ui';
+
+export default {
+  name: 'CommentScrollView',
+  components: {
+    Scroll
+  },
+  data() {
+    return {
+      list: [],
+      scrollOptions: {
+        bounce: false
+      }
+    };
+  },
+  computed: {
+    count() {
+      return this.list.length > 0 ? this.list.length + '条' : '';
+    }
+  },
+  methods: {
+    click() {
+      this.$nextTick(() => {
+        this.initData();
+        this.forceUpdate();
+      }, 1000);
+    },
+    forceUpdate() {
+      this.$refs.scroll.forceUpdate();
+    },
+    initData() {
+      console.log('click')
+      for (let i = 0; i < 100; i++) {
+        this.list.push(i);
+      }
+    }
+  }
+};
+
+</script>
+
+<style lang="scss" scoped>
+
+.comment-scroll-view {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.header {
+  width: 100%;
+  height: 88px;
+  border-bottom: 2px solid #e0e0e0;
+  text-align: center;
+  line-height: 88px;
+  font-size: 32px;
+}
+
+.scroll-wrapper {
+  flex: 1;
+}
+
+.item {
+  background-color: white;
+}
+
+.footer {
+  width: 100%;
+  height: 100px;
+  border-top: 2px solid #e0e0e0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.input {
+  width: 690px;
+  height: 72px;
+  background-color: #f0f0f0;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  font-size: 24px;
+  color: #b0b0b0;
+  padding: 18px 0 18px 22px;
+}
+</style>

@@ -10,8 +10,8 @@
         <Products></Products>
         <Products></Products>
       </div>
       </div>
       <div class="share">
       <div class="share">
-        <WidgetIconBtn type="msg"></WidgetIconBtn>
-        <WidgetIconBtn type="zan"></WidgetIconBtn>
+        <WidgetIconBtn class="item" type="msg" text="100" :option="option" @click="onCommentClick"></WidgetIconBtn>
+        <WidgetIconBtn class="item" type="fav" text="100" :option="option" @click="onFavClick"></WidgetIconBtn>
       </div>
       </div>
     </div>
     </div>
   </div>
   </div>
@@ -29,13 +29,23 @@ export default {
   data() {
   data() {
     return {
     return {
       text: '很好，能抢到真的不容易！整体感觉很舒服，庆幸下手一定要快准狠！如果能够再抢到一双就更好了，下次加买很多双,很好，能抢到真的不容易！整体感觉很舒服，庆幸下手一定要快准狠！如果能够再抢到一双就更好了，下次加买很多双',
       text: '很好，能抢到真的不容易！整体感觉很舒服，庆幸下手一定要快准狠！如果能够再抢到一双就更好了，下次加买很多双,很好，能抢到真的不容易！整体感觉很舒服，庆幸下手一定要快准狠！如果能够再抢到一双就更好了，下次加买很多双',
-      isLimitHeight: true
+      isLimitHeight: true,
+      option: {
+        emitName: 'click',
+        color: 'white'
+      }
     };
     };
   },
   },
   methods: {
   methods: {
     onClick() {
     onClick() {
       console.log('展开');
       console.log('展开');
       this.isLimitHeight = false;
       this.isLimitHeight = false;
+    },
+    onCommentClick() {
+      this.$emit('on-comment-click', {});
+    },
+    onFavClick() {
+      this.$emit('on-favorite-click', {});
     }
     }
   },
   },
 };
 };
@@ -53,11 +63,13 @@ export default {
   min-height: 134px;
   min-height: 134px;
   font-size: 26px;
   font-size: 26px;
   color: white;
   color: white;
-  letter-spacing: 0.01px;
+  letter-spacing: 0.01PX;
   padding: 30px 28px 0 28px;
   padding: 30px 28px 0 28px;
 }
 }
 
 
 .product-wrapper {
 .product-wrapper {
+  display: flex;
+  justify-content: space-between;
   height: 166px;
   height: 166px;
   padding: 0 28px;
   padding: 0 28px;
 }
 }
@@ -72,4 +84,13 @@ export default {
 .link {
 .link {
   color: #4a90e2;
   color: #4a90e2;
 }
 }
+
+.share {
+  height: 100px;
+  margin-top: 86px;
+}
+
+.item {
+  margin-left: 50px;
+}
 </style>
 </style>

 <template>
 <template>
   <div class="order-wrapper">
   <div class="order-wrapper">
-    <!-- <Test class="test"></Test> -->
     <Slide :data="list"
     <Slide :data="list"
           :loop="false"
           :loop="false"
           :autoPlay="false"
           :autoPlay="false"
@@ -24,7 +23,7 @@
 
 
     <AvatarHeader class="avatar-wrapper"></AvatarHeader>
     <AvatarHeader class="avatar-wrapper"></AvatarHeader>
 
 
-    <DescFooter class="footer-wrapper"></DescFooter>
+    <DescFooter class="footer-wrapper" @on-comment-click="onCommentClick"></DescFooter>
   </div>
   </div>
 </template>
 </template>
 
 
@@ -34,15 +33,13 @@ import {Slide} from 'cube-ui';
 import AvatarHeader from './avatar-header';
 import AvatarHeader from './avatar-header';
 import DescFooter from './desc-footer';
 import DescFooter from './desc-footer';
 
 
-// const img = require('statics/image/showorder/test.png')
-
 export default {
 export default {
   name: 'ShowOrderItem',
   name: 'ShowOrderItem',
   components: {
   components: {
     AvatarHeader,
     AvatarHeader,
     DescFooter,
     DescFooter,
     Slide,
     Slide,
-    SlideItem: Slide.Item
+    SlideItem: Slide.Item,
   },
   },
   data() {
   data() {
     return {
     return {
@@ -70,6 +67,9 @@ export default {
     },
     },
     slideChangeHandler(currentPageIndex) {
     slideChangeHandler(currentPageIndex) {
       this.currentPageIndex = currentPageIndex;
       this.currentPageIndex = currentPageIndex;
+    },
+    onCommentClick() {
+      this.$emit('on-comment-click', {});
     }
     }
   }
   }
 };
 };

 
 
 
 
 export default [{
 export default [{
-  path: '/order/:id',
-  name: 'order',
+  path: '/mapp/showorder/:id',
+  name: 'showorder',
 
 
   component: () => import(/* webpackChunkName: "order" */ './order')
   component: () => import(/* webpackChunkName: "order" */ './order')
 }];
 }];

@@ -13,9 +13,11 @@
              :options="scrollOpts"
              :options="scrollOpts"
       >
       >
         <SlideItem v-for="i in list">
         <SlideItem v-for="i in list">
-          <OrderSlideItem></OrderSlideItem>
+          <OrderSlideItem @on-comment-click="onComment"></OrderSlideItem>
         </SlideItem>
         </SlideItem>
       </Slide>
       </Slide>
+
+    <CommentActionSheet ref="actionsheet"></CommentActionSheet>
   </Layout>
   </Layout>
 </template>
 </template>
 
 
@@ -23,6 +25,7 @@
 
 
 import {Slide} from 'cube-ui';
 import {Slide} from 'cube-ui';
 import OrderSlideItem from './components/order-slide-item';
 import OrderSlideItem from './components/order-slide-item';
+import CommentActionSheet from './components/comment-action-sheet';
 
 
 export default {
 export default {
   name: 'ShowOrderPage',
   name: 'ShowOrderPage',
@@ -30,6 +33,7 @@ export default {
     Slide,
     Slide,
     SlideItem: Slide.Item,
     SlideItem: Slide.Item,
     OrderSlideItem,
     OrderSlideItem,
+    CommentActionSheet
   },
   },
   data() {
   data() {
     return {
     return {
@@ -71,6 +75,10 @@ export default {
     },
     },
     clickHandler(e) {
     clickHandler(e) {
       console.log(e);
       console.log(e);
+    },
+    onComment() {
+      console.log('ok');
+      this.$refs.actionsheet.click();
     }
     }
   }
   }
 };
 };

@@ -679,3 +679,9 @@ img[lazy=loaded] {
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
 }
 }
+
+.hover-opacity {
+    &:active {
+        opacity: 0.8;
+    }
+}