Merge branch 'master' of http://git.yoho.cn/fe/yoho-community-web

@@ -4,6 +4,7 @@ import Layouts from './layouts';
 import Products from './products';
 import Comments from './comments';
 import YohoActionSheet from './action-sheet';
+import TextEllipsis from './textellipsis'
 
 export default [
   ...Widgets,
@@ -11,5 +12,6 @@ export default [
   ...Layouts,
   ...Products,
   ...Comments,
-  ...YohoActionSheet
+  ...YohoActionSheet,
+  ...TextEllipsis
 ];

+import TextEllipsis from './textellipsis';
+
+export default [
+  TextEllipsis
+];

+<template>
+  <div class="h-text-ellipsis" :style="{width: width ? width + 'px': 'unset'}">
+    <slot name="before" class="h-text-ellipsis-before"></slot>
+    <span class="text-ellipsis-limit-text" :key="keyIndex" :content="text">{{text}}</span>
+    <span class="h-text-ellipsis-more" v-show='oversize'><slot name="more"></slot></span>
+    <slot name="after" class="h-text-ellipsis-after"></slot>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'TextEllipsis',
+  props: {
+    text: String,
+    height: Number,
+    width: {
+      Number,
+      default: 0
+    },
+    isLimitHeight: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      keyIndex: 0,
+      oversize: false,
+      isHide: false
+    };
+  },
+  watch: {
+    isLimitHeight() {
+      this.init();
+    },
+    text() {
+      this.init();
+    },
+    height() {
+      this.init();
+    },
+    width() {
+      this.init();
+    }
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.oversize = false;
+      this.keyIndex += 1;
+      let more = this.$el.querySelector('.h-text-ellipsis-more');
+
+      more.style.display = 'none';
+      if (this.isLimitHeight) {
+        this.limitShow();
+      }
+    },
+    limitShow() {
+      this.$nextTick(() => {
+        let textDom = this.$el.querySelector('.text-ellipsis-limit-text');
+        let title = this.$el;
+        let more = this.$el.querySelector('.h-text-ellipsis-more');
+        let n = 1000;
+
+        if (textDom) {
+          if (title.offsetHeight > this.height) {
+            more.style.display = 'inline-block';
+            let text = this.text;
+
+            while (title.offsetHeight > this.height && n > 0) {
+
+              if (title.offsetHeight > this.height * 3) {
+                textDom.innerText = text = text.substring(0, Math.floor(text.length / 2));
+              } else {
+                textDom.innerText = text = text.substring(0, text.length - 1);
+              }
+              n--;
+            }
+            this.$emit('hide');
+            this.isHide = true;
+          } else {
+            this.$emit('show');
+            this.isHide = false;
+          }
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+  .text-ellipsis-limit-text {
+    white-space: pre-wrap;
+  }
+</style>

@@ -2,7 +2,7 @@
   <div v-if="avatars" class="avatar-list-wrap">
     <ul v-if="avatarList" class="avatar-list">
         <li v-for="(item, index) in avatarList" :key="index" :style="item.style">
-          <WidgetAvatar :src="item.src" width="100" height="100"></WidgetAvatar>
+          <WidgetAvatar :src="item.src" :width="100" :height="100"></WidgetAvatar>
         </li>
         <li v-if="hasMore">
           <img src="//img12.static.yhbimg.com/evidenceImages/2019/01/30/17/02fdbbddfc30f18868f91406eed8a70fb9.png?imageMogr2/thumbnail/130x130/extent/130x130/background/d2hpdGU=/position/center/quality/90">

@@ -119,7 +119,7 @@
   };
 </script>
 
-<style type="css">
+<style type="scss">
   .icon-btn {
     display: inline-block;
     line-height: 1;

 <template>
-  <div></div>
+  <div v-if="topic" class="topic-wrap">
+    #{{topic}}
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'WidgetTopic'
+  name: 'WidgetTopic',
+  props: {
+    topic: String
+  }
 };
 </script>
+
+<style type="scss">
+  .topic-wrap {
+    display: inline-block;
+    line-height: 1;
+    vertical-align: middle;
+    font-size: 20px;
+    line-height: 44px;
+    padding: 0 12px;
+    border: 2px solid #222;
+    border-radius: 2px;
+    box-sizing: border-box;
+  }
+</style>

 <template>
 <div class="header">
   <div class="avatar-wrapper">
-    <img class="avatar" src="">
+    <img class="avatar" :src="avatar">
     <span class="name">{{name}}</span>
   </div>
 
   <div class="close" @click="close">
+    <i class="iconfont icon-close icon"></i>
   </div>
 </div>
 </template>
@@ -16,7 +17,7 @@ export default {
   props: {
     avatar: {
       type: String,
-      default: ''
+      default: '//tvax2.sinaimg.cn/crop.0.0.828.828.50/006IPkwKly8fyhr791kkxj30n00n0q3u.jpg'
     },
     name: {
       type: String,
@@ -28,7 +29,8 @@ export default {
   },
   methods: {
     close() {
-      this.emit('close');
+      console.log('close');
+      this.$emit('close');
     }
   }
 };
@@ -41,8 +43,7 @@ export default {
   justify-content: space-between;
   padding: 18px 32px 54px;
   height: 128px;
-  background-color: black;
-  opacity: 0.8;
+  background-color: rgba(0, 0, 0, 0.8);
 }
 
 .avatar-wrapper {
@@ -64,4 +65,12 @@ export default {
   margin-left: 12px;
 }
 
+.close {
+  color: white;
+}
+
+.icon {
+  font-size: 55px;
+}
+
 </style>

+<template>
+  <div class="footer">
+    <TextEllipsis :text="text" class="desc" :isLimitHeight="isLimitHeight" :height="68">
+      <template slot="more"><span>...</span><span class="link" @click="onClick">展开</span></template>
+      <span slot="after" v-if="!isLimitHeight" @click="isLimitHeight=true"></span>
+    </TextEllipsis>
+
+    <div class="product-wrapper">
+      <div class="products">
+        <Products></Products>
+      </div>
+      <div class="share"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import Products from './products'
+
+export default {
+  name: 'DescFooter',
+  components: {
+    Products
+  },
+  data() {
+    return {
+      text: '很好，能抢到真的不容易！整体感觉很舒服，庆幸下手一定要快准狠！如果能够再抢到一双就更好了，下次加买很多双,很好，能抢到真的不容易！整体感觉很舒服，庆幸下手一定要快准狠！如果能够再抢到一双就更好了，下次加买很多双',
+      isLimitHeight: true
+    };
+  },
+  methods: {
+    onClick() {
+      this.isLimitHeight = false;
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+.footer {
+  position: relative;
+  min-height: 280px;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.desc {
+  min-height: 134px;
+  font-size: 26px;
+  color: white;
+  letter-spacing: 0.01px;
+  padding: 30px 28px 0 28px;
+}
+
+.product-wrapper {
+  height: 166px;
+  padding: 0 28px;
+}
+
+.products {
+  display: inline-block;
+  width: 290px;
+  height: 100px;
+  background-color: white;
+  margin-top: 36px;
+}
+
+.link {
+  color: #4a90e2;
+}
+</style>

+<template>
+  <div class="order-wrapper">
+    <!-- <Test class="test"></Test> -->
+    <Slide :data="list"
+          :loop="false"
+          :autoPlay="false"
+          class="slide-container"
+          @change="slideChangeHandler"
+          :threshold="0.05"
+          @options="slideOptions"
+    >
+      <SlideItem v-for="i in list">
+        <div class="image-wrapper">
+          <img class="image" :src="i" alt="">
+        </div>
+      </SlideItem>
+
+      <template slot="dots"><i></i></template>
+    </Slide>
+
+    <div class="image-preview-footer">
+      <span class="image-preview-counter">{{currentPageIndex + 1}}/{{list.length}}</span>
+    </div>
+
+    <AvatarHeader class="avatar-wrapper"></AvatarHeader>
+
+    <DescFooter class="footer-wrapper"></DescFooter>
+  </div>
+</template>
+
+<script>
+
+import {Slide} from 'cube-ui';
+import AvatarHeader from './avatar-header';
+import DescFooter from './desc-footer';
+import Test from './test'
+
+const img = require('statics/image/showorder/test.png')
+
+export default {
+  name: 'ShowOrderItem',
+  components: {
+    AvatarHeader,
+    DescFooter,
+    Slide,
+    SlideItem: Slide.Item,
+    Test
+  },
+  data() {
+    return {
+      list: [
+        'https://wx1.sinaimg.cn/mw1024/686d7361ly1fpha0mpd5uj21hc0tyws2.jpg',
+        'https://wx1.sinaimg.cn/mw1024/686d7361ly1fpha0ncnnej21hc0zetxo.jpg',
+        'https://wx1.sinaimg.cn/mw1024/686d7361ly1fpha0mqvu5j21hc0zkgzz.jpg',
+        img.toString()
+      ],
+
+      currentPageIndex: 0,
+      slideOptions: {
+        listenScroll: true,
+        probeType: 3,
+        click: false,
+        directionLockThreshold: 0,
+        stopPropagation: true
+      },
+      testimg: img
+    };
+  },
+  methods: {
+    close() {
+
+    },
+    onclick(e) {
+      console.log('huangtao12=>',e);
+    },
+    slideChangeHandler(currentPageIndex) {
+      this.currentPageIndex = currentPageIndex;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.order-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-image: url('~statics/image/showorder/sd_bg@2x.png');
+  background-size: cover;
+}
+
+.avatar-wrapper {
+  position: absolute;
+  width: 100%;
+  top: 0;
+  z-index: 2;
+}
+
+.image-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+
+  .image {
+    width: 100%;
+  }
+}
+
+.image-preview-footer {
+  position: absolute;
+  width: 180px;
+  height: 60px;
+  background: rgba(0, 0, 0, 0.4);
+  top: 110px;
+  right: -60px;
+  border-radius: 30px;
+}
+
+.image-preview-counter {
+  margin-left: 40px;
+  font-size: 26px;
+  color: white;
+  height: 60px;
+  line-height: 60px;
+}
+
+.footer-wrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.test {
+  position: absolute;
+  top: 50px;
+  left: 100px;
+}
+</style>

+<template>
+  <div class="product-wrapper">
+      <img :src="url" alt="" srcset="">
+      <div class="price">{{price}}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ProductItem',
+  props: {
+    pid:{
+      type: String,
+      default() {
+        return '1212'
+      }
+    },
+    url: {
+      type: String,
+      default() {
+        return '//tvax2.sinaimg.cn/crop.0.0.828.828.50/006IPkwKly8fyhr791kkxj30n00n0q3u.jpg';
+      }
+    },
+    price: {
+      type: String,
+      default() {
+        return '￥121314';
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.product-wrapper {
+  display: inline-block;
+  position: relative;
+  width: 100px;
+  height: 100px;
+}
+
+.price {
+  width: 100%;
+  height: 28px;
+  line-height: 28px;
+  font-size: 20px;
+  position: absolute;
+  bottom: 0;
+  text-align: center;
+  background: rgba(0,0,0,0.50);
+  color: white;
+}
+
+
+</style>

+<template>
+  <div class="products-wrapper">
+    <ProductItem class="item" v-for="i in 3"></ProductItem>
+  </div>
+</template>
+
+<script>
+
+import ProductItem from './product-item'
+
+export default {
+  name: 'Products',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  components: {
+    ProductItem
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.products-wrapper {
+  overflow: scroll;
+}
+
+.item {
+  margin-right: 20px;
+}
+</style>

 <template>
   <Layout>
-    <Header slot="header"></Header>
+      <Slide ref="slide"
+             :data="list"
+             :loop="false"
+             :autoPlay="false"
+             direction="vertical"
+             class="slide-container"
+             :showDots="false"
+             @scroll-end="onChange"
+             :speed="1000"
+             :threshold="0.05"
+             :options="scrollOpts"
+      >
+        <SlideItem v-for="i in list">
+          <OrderSlideItem></OrderSlideItem>
+        </SlideItem>
+      </Slide>
   </Layout>
 </template>
 
 <script>
 
-import {Scroll, Loading} from 'cube-ui';
-import Header from './components/header';
+import {Slide} from 'cube-ui';
+import OrderSlideItem from './components/order-slide-item';
 
 export default {
   name: 'ShowOrderPage',
   components: {
-    Loading,
-    Scroll,
-    Header
+    Slide,
+    SlideItem: Slide.Item,
+    OrderSlideItem,
   },
   data() {
     return {
-      list: [],
+      list: [
+        {
+          url: 'http://www.didichuxing.com/',
+          image: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3978382133,2176310874&fm=27&gp=0.jpg'
+        },
+        {
+          url: 'http://www.didichuxing.com/',
+          image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
+        },
+        {
+          url: 'http://www.didichuxing.com/',
+          image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
+        },
+      ],
+      scrollOpts: {
+        deceleration: 0.0001,
+        listenScroll: true,
+        probeType: 3,
+        click: true,
+        directionLockThreshold: 0,
+      }
     };
   },
+  mounted() {
+  },
   methods: {
-    close() {
-
+    onChange(i) {
+      this.$nextTick(() => {
+        this.list.shift();
+        this.list.push({
+          url: 'http://www.didichuxing.com/',
+          image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
+        });
+      });
+    },
+    clickHandler(e) {
+      console.log(e);
     }
   }
 };
 </script>
 
-<style>
+<style lang="scss" scoped>
+
+.slide-container {
+  /deep/ .cube-slide-item {
+    width: 100%;
+  }
+}
+
 </style>