first commit

衣莎项目/源码/马上洗投票/src/view/components/.pydio

@@ -0,0 +1 @@
+690c385d-77fd-4dcf-8670-3c8f3352ceb9

衣莎项目/源码/马上洗投票/src/view/components/Address.vue

@@ -0,0 +1,68 @@
+<template lang="pug">
+  .Address
+    van-field(clearable='', :label='areaTitle', disabled right-icon='arrow', :placeholder="area !== '选择地址'? area : areaText", @click="isPopup")
+    //- 地址选择弹窗
+    van-popup(v-model='show', position='bottom', :style="{ height: '40%' }")
+      van-area( :value='value' :area-list="areaList" @confirm="onConfirm" @cancel="isPopup" show-toolbar)
+</template>
+<script lang="ts">
+  import {Component, Provide, Vue, Prop} from 'vue-property-decorator';
+
+  type AreaType<T> = {
+    [K in keyof T]: T[K]
+  }
+  interface AreaList {
+    [id: string]: AreaType<object>[]
+  }
+  @Component
+  export default class Address extends Vue {
+    $http: any
+
+    // 回显的区id
+    @Prop({default: '110101'}) readonly value!: string
+    // 回显的文字
+    @Prop({default: '选择地址'}) readonly areaText!: string
+    // 回显的文字
+    @Prop({default: '收货地址'}) readonly areaTitle!: string
+    // 是否禁止弹出框弹出
+    @Prop({default: false}) readonly isShow!: boolean
+
+    private show: Boolean = false
+
+    private area: string = '选择地址'
+    private areaId: number[] = []
+
+    // 省市区数据
+    private areaList: AreaList = {}
+
+    created() {
+      this.getvantcity()
+    }
+
+    private isPopup() {
+      if(this.isShow) return;
+      this.show = !this.show
+    }
+
+    // 地址数据
+    private async getvantcity(): Promise<void> {
+      let res = await this.$http.PublicService.getvantcity()
+      this.areaList = res
+    }
+
+    // 确定选择城市
+    private onConfirm(value: any, index: any): void {
+      this.area = ''
+      this.areaId = []
+      value.forEach((v: any, i: number) => {
+        this.area += (v.name + ' ')
+        this.areaId.push(v.code)
+      });
+      this.show = !this.show
+      this.$emit('confirm', this.areaId)
+    }
+  }
+</script>
+<style lang="stylus" scoped>
+
+</style>

衣莎项目/源码/马上洗投票/src/view/components/Cascade.vue

@@ -0,0 +1,190 @@
+<template lang="pug">
+  .image
+    .waterfall
+      .column(v-for="(item,list) in imageList" :key="list")
+        .column-item.cell_row(v-for="(obj,index) in item" :key="index")
+          div(style='background-color:#ffffff')
+            .row_img
+              img( :src='obj.image')
+              .number 编号: {{obj.num}}
+            .row_text
+              .title.flex
+                .name.flex1 {{obj.user_name}}
+                .num.flex1 {{obj.poll}}票
+              .row_button.flex_cen
+                img(src='image/time_button.png')
+                | 投票
+    .footer(v-show="footerVisible")
+      h5 我是有底线的
+</template>
+<script lang="ts">
+  import {Component, Provide, Vue, Prop, Watch} from 'vue-property-decorator';
+
+  @Component
+  export default class Cascade extends Vue {
+    @Prop({default: []}) readonly imgData!: any[]
+
+    private tempImage: any[] = []
+
+    private imageHeight: any[] = [0, 0]
+
+    private imageWidth: number = 0
+
+    private imageList: any[] = [[],[]]
+
+    private footerVisible: boolean = false
+
+    private height1: any
+    private height2: any
+    private height3: any
+    private available: any
+
+    private pagination: any = {
+      currentPage: 1,
+      totalPage: 10,
+      pageSize: 10,
+      available: true
+    }
+
+    mounted() {
+      let doc: any = document.querySelector(".waterfall>.column")
+      this.imageWidth = doc.offsetWidth
+      window.addEventListener("scroll", this.pullDown);
+    }
+
+    @Watch('imgData')
+    private getImgData(n: any, o: any): void {
+      this.tempImage = [...n]
+      this.pushImage(0);
+    }
+
+    public emptyClick(): void{
+      this.imageList = [[],[]]
+      this.imageHeight = [0, 0]
+      this.tempImage = []
+    }
+
+    private pushImage(index: number) {
+      if (index >= this.tempImage.length) return;
+      let img = new Image(),that = this;
+      img.src = this.tempImage[index].image;
+      img.onload = () => {
+        let min = that.imageHeight[0],imageIndex = 0;
+        that.imageHeight.forEach(function(item, _index) {
+          if (min > item) {
+            min = item;
+            imageIndex = _index;
+          }
+        });
+        that.imageHeight[imageIndex] += (img.naturalHeight / img.naturalWidth + 96 / this.imageWidth);
+        that.imageList[imageIndex].push(that.tempImage[index]);
+        that.pushImage(index + 1);
+      };
+    }
+
+    private pullDown(): void {
+      // 获取滚轮位置
+      this.height1 =
+        window.pageYOffset ||
+        document.documentElement.scrollTop ||
+        document.body.scrollTop;
+      // 文档高度
+      this.height2 = document.body.scrollHeight;
+      // 可视区域
+      // 设置compatMode兼容IE
+      this.height3 =
+        document.compatMode === "CSS1Compat"
+          ? document.documentElement.clientHeight
+          : document.body.clientHeight;
+      // 如果滚动到最低（这里设置离最底还有100距离才触发函数）
+      // available条件是为了防止触底时一直不断地请求。因此，请求一次后available设为0，直到滚动到离底部超过100距离（即数据加载玩后）才设为1
+      if (this.height3 + this.height1 >= this.height2 - 100 && this.available) {
+        this.available = false;
+        //请求下一页,如果当前页等于最大页，直接返回
+        if (this.pagination.currentPage >= this.pagination.totalPage) {
+          this.footerVisible = true;
+          return;
+        }
+        this.pagination.currentPage++;
+        // this.getImgData();
+        this.$emit('load')
+      } else if (this.height3 + this.height1 < this.height2 - 100) {
+        this.available = true;
+      }
+    }
+  }
+</script>
+<style lang="stylus" scoped>
+.waterfall 
+  margin-top 10px
+  display flex
+  .column 
+    width 50%
+    .column-item 
+      width 100%
+      padding 0.1rem
+      box-sizing border-box
+      img
+        width 100%
+        height 100%
+      .date
+        margin-bottom 10px
+      .title
+        margin-bottom 10px
+      .content 
+        margin-bottom 10px
+.cell_row
+  margin-top 0.15rem
+  border-radius 0.2rem
+  width 98%
+  display inline-block
+  box-sizing border-box
+  .row_img
+    position relative
+    img
+      width 100%
+      height auto 
+    .number
+      position absolute
+      right 0
+      top 0.24rem
+      width 1.67rem
+      height 0.67rem
+      background-color rgba(0,0,0,.6)
+      text-align center
+      line-height 0.67rem
+      border-radius 0.1rem 0 0 0.1rem
+      color #ffffff
+      font-size 0.35rem
+  .row_text
+    padding 0.32rem 0.21rem
+    .title
+      .name
+        font-size 0.4rem
+      .num
+        font-size 0.4rem
+        text-align right
+        color rgba(172,32,33,1)
+    .row_button
+      font-size 0.43rem
+      background-color #ad2022
+      width 100%
+      height 1.07rem
+      line-height 1.07rem
+      color #ffffff
+      margin 0.2rem auto 0
+      border-radius 2rem
+      img 
+        height 0.45rem
+        width 0.45rem
+        margin-right 0.1rem
+.footer 
+  width 100%
+  height 80px
+  display flex
+  justify-content center
+  align-items center
+  border-top 10px
+  color #ffffff
+  margin-top 10px
+</style>

衣莎项目/源码/马上洗投票/src/view/components/CustomTabs.vue

@@ -0,0 +1,93 @@
+<template lang="pug">
+  .CustomTabs
+    van-tabs(v-model='active'
+      :swipe-threshold="4"
+      @click="onClick"
+      animated
+      title-active-color="#fff"
+      :border="false"
+      swipeable)
+      van-tab(v-for="(item,index) in list" :key="index")
+        div(slot='title')
+          | {{item.title}}
+          img(v-if="active == index" src="image/task_list_right.png").triangle
+        van-search(class="search" v-model='SearchKey',
+          placeholder='请输入刷新关键词',
+          right-icon="search"
+          left-icon=""
+          @search='',
+          @cancel='')
+        div.list(v-for="(it,i) in item.content" :key="i")
+          router-link(to="/taskInfo" tag="div" class="tabs_items")
+            .items_title
+              .title_left
+                img(:src="it.shop_icon" alt="")
+                span {{it.shop_name}}
+                .y_1.y 直返
+                .y_2.y 信誉
+              .title_status {{it.shop_status}}
+            .item_text
+              .text_1.t
+                 span 订单编号：{{it.shop_number}}
+                 span 垫付：￥{{it.shop_money}}
+              .text_2.t
+                 span 剩余时间：{{it.shop_time}}
+                 span 佣金：￥{{it.shop_commission}}
+            .item_action
+              van-icon(name='ellipsis')
+              .action_list
+                van-button(type='default' size="small") 取消
+                van-button(type='default' size="small") 追评
+                van-button(type='danger' size="small") 开始操作
+          .line
+
+
+</template>
+
+<script lang="ts">
+  import {Component, Provide, Vue, Prop} from 'vue-property-decorator';
+
+  @Component
+  export default class CustomTabs extends Vue {
+    private active: number = 0;
+    private SearchKey: String = "";
+
+    @Prop({ default: [] }) readonly list: Array<Object> | undefined
+
+    private onClick(name: string, title: number): void {
+      console.log(name,title)
+    }
+  }
+</script>
+
+<style scoped lang="stylus">
+  .triangle
+    position absolute
+    right -0.35rem
+    top -0.08rem
+
+  .tabs_items
+    width 100%
+    padding 0.373rem 0.476rem
+    background #fff
+    box-sizing border-box
+    .item_text
+       margin-bottom 0.547rem
+       .t
+         font-size 0.36rem
+         color #999
+         display flex
+         justify-content space-between
+       .text_1
+         margin-top 0.4rem
+         margin-bottom 0.253rem
+    .item_action
+      display flex
+      justify-content space-between
+      align-items center
+      button
+        margin-right 0.133rem
+        &:last-child
+          margin-right 0
+
+</style>

衣莎项目/源码/马上洗投票/src/view/components/Icons.vue

@@ -0,0 +1,19 @@
+<template lang="pug">
+  i.icons( :class="'iconfont '+name" :style='`font-size:${size}rem;color:${color};`')
+</template>
+<script lang="ts">
+  import {Component, Provide, Vue, Prop} from 'vue-property-decorator';
+
+  @Component
+  export default class Icons extends Vue {
+    @Prop({default:''}) readonly name!: string
+    @Prop({default:'#000000'}) readonly color!: string
+    @Prop({default:'0.2'}) readonly size!: string
+  }
+</script>
+<style lang="stylus" scoped>
+.icons
+  display inline-block
+  box-sizing border-box
+  line-height normal
+</style>

衣莎项目/源码/马上洗投票/src/view/components/ImgList.vue

@@ -0,0 +1,145 @@
+<template lang="pug">
+  .imgList
+    .flex()
+      .img_cell.flex1
+        .cell_row(v-for='(item,index) in img' :key='index' @click='goUrl(item.id)')
+          div(style='background-color:#ffffff')
+            .row_img
+              img( :src='item.image')
+              .number 编号: {{item.num}}
+            .row_text
+              .title.flex
+                .name.flex1 {{item.user_name}}
+                .num.flex1 {{item.poll}}票
+              .row_button.flex_cen
+                img(src='image/time_button.png')
+                | 投票
+      .img_cell.flex1
+        .cell_row(v-for='(item,index) in img2' :key='index' @click='goUrl(item.id)')
+          div(style='background-color:#ffffff')
+            .row_img
+              img( :src='item.image')
+              .number 编号: {{item.num}}
+            .row_text
+              .title.flex
+                .name.flex1 {{item.user_name}}
+                .num.flex1 {{item.poll}}票
+              .row_button.flex_cen
+                img(src='image/time_button.png')
+                | 投票
+</template>
+<script lang="ts">
+  import {Component, Prop, Vue, Watch} from 'vue-property-decorator';
+
+  @Component({})
+  export default class ImgList extends Vue {
+    @Prop({default: []}) imgData!: any[]
+
+    private img: any[] = []
+    private img2: any[] = []
+
+    created() {
+      
+    }
+
+    private goUrl(id: string): void{
+      this.$router.push(`/info?id=${id}`)
+    }
+
+    private vote(id: string): void{
+      this.$emit('vote', id)
+    }
+
+    private onLoad(): void {
+      this.$emit('load')
+    }
+
+    @Watch('imgData')
+    private async newImgData(n: any[], o: any[]) {
+      this.img2 = []
+      this.img = []
+      let i1:number=0, i2:number=0;
+      let that = this
+      let newArr: any[] = []
+      n.forEach( async (v: any, i:number)=>{
+        newArr.push(v.image)
+      })
+      let res: any = await this.onloadImg(newArr)
+      res.forEach((v: any, i:number)=>{
+        if(i1 <= i2){
+          this.img.push(n[i])
+          i1 += v
+        }else{
+          this.img2.push(n[i])
+          i2 += v
+        }
+      })
+    }
+
+    // 获取图片高度
+    private onloadImg(newArr: any[]) {
+      return new Promise((resolve,reject)=>{
+        let arr: any[] = []
+        newArr.forEach((v: any, i:number)=>{
+          let img = new Image();
+          img.src = v;
+          img.onload = function(){
+            // 统一图片宽度进行同比缩放计算 统一的宽度随意
+            // 用于累计数组高度时 确保所有图片 宽度一致 缩放高度
+            arr[i] = img.height * (50/img.width)
+            if(arr.length == newArr.length){
+              resolve(arr)
+            }
+          };
+        })
+      })
+    }
+  }
+</script>
+<style lang="stylus" scoped>
+.cell_row
+  margin-top 0.15rem
+  border-radius 0.2rem
+  width 98%
+  display inline-block
+  box-sizing border-box
+  .row_img
+    position relative
+    img
+      width 100%
+      height auto 
+    .number
+      position absolute
+      right 0
+      top 0.24rem
+      width 1.67rem
+      height 0.67rem
+      background-color rgba(0,0,0,.6)
+      text-align center
+      line-height 0.67rem
+      border-radius 0.1rem 0 0 0.1rem
+      color #ffffff
+      font-size 0.35rem
+  .row_text
+    padding 0.32rem 0.21rem
+    .title
+      .name
+        font-size 0.4rem
+      .num
+        font-size 0.4rem
+        text-align right
+        color rgba(172,32,33,1)
+    .row_button
+      font-size 0.43rem
+      background-color #ad2022
+      width 100%
+      height 1.07rem
+      line-height 1.07rem
+      color #ffffff
+      margin 0.2rem auto 0
+      border-radius 2rem
+      img 
+        height 0.45rem
+        width 0.45rem
+        margin-right 0.1rem
+</style>

衣莎项目/源码/马上洗投票/src/view/components/MyCell.vue

@@ -0,0 +1,43 @@
+<template lang="pug">
+  //- 面板组件
+  .mycell.van-cell
+    .cell__title
+      span {{title}}
+    .cell__value
+      slot
+</template>
+<script lang="ts">
+  import {Component, Prop, Vue} from 'vue-property-decorator';
+
+  @Component({})
+  export default class Fund extends Vue {
+    // 标题名称
+    @Prop({default:''}) protected title!:string
+  }
+</script>
+<style lang="stylus" scoped>
+.mycell
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0.26667rem 0.42667rem;
+  overflow: hidden;
+  color: #323233;
+  font-size: 0.37333rem;
+  line-height: 0.64rem;
+  background-color: #fff;
+  .cell__title
+    flex: none;
+    width: 2.4rem;
+  .cell__value
+    position: relative;
+    overflow: hidden;
+    color: #969799;
+    vertical-align: middle;
+    word-wrap: break-word;
+    flex 1
+</style>

衣莎项目/源码/马上洗投票/src/view/components/MyPanel.vue

@@ -0,0 +1,28 @@
+<template lang="pug">
+  .MyPanel
+    .title
+      span {{title}}
+    .center
+      slot
+</template>
+<script lang="ts">
+  // 面板组件
+  import {Component, Provide, Vue, Prop} from 'vue-property-decorator';
+
+  @Component
+  export default class MyPanel extends Vue {
+    // 标题文字
+    @Prop({default: '标题'}) readonly title!: string
+  }
+</script>
+<style lang="stylus" scoped>
+.MyPanel
+  .title
+    padding 0.4rem 0.22667rem 0.4rem
+    display flex
+    align-items center
+    span
+      margin-left 0.2rem
+      font-size 0.52rem
+      font-weight 500
+</style>

衣莎项目/源码/马上洗投票/src/view/components/Navbar.vue

@@ -0,0 +1,28 @@
+<template lang="pug">
+  van-nav-bar(:title="title",
+              :fixed="true"
+              :left-arrow="showLeft",
+              @click-left='onClickLeft')
+</template>
+
+<script lang="ts">
+  import {Component, Provide, Vue, Prop} from 'vue-property-decorator';
+
+  @Component
+  export default class Navbar extends Vue {
+    // 标题栏文字
+    @Prop({ default: '' }) readonly title: String | undefined
+    // 是否展示左边返回按钮
+    @Prop({ default: false }) readonly showLeft: boolean | undefined
+    $router: any;
+
+    private onClickLeft(): void {
+      this.$router.go(-1)
+    }
+  }
+</script>
+
+<style scoped lang="stylus">
+  .van-nav-bar .van-icon
+    color #666
+</style>

衣莎项目/源码/马上洗投票/src/view/components/NewsItem.vue

@@ -0,0 +1,92 @@
+<template lang="pug">
+  .NewsItem
+    .news_item(v-for="(item,index) in itemArr" :key="index")
+      .item_title
+        h2 {{item.status}}
+        span {{item.time}}
+      .item_content
+        .content_left
+          .name
+            img(:src="item.img")
+            span {{item.shop_name}}
+          p.yj 佣金:￥{{item.money}}
+          p.df 垫付:￥{{item.dfmoney}}
+          p.yj 审核倒计时：{{item.dtime}}
+        .content_right(@click="showInfo(item.id)") 查看任务
+</template>
+
+<script lang="ts">
+  import {Component, Prop, Vue} from 'vue-property-decorator';
+
+  @Component
+  export default class NewsItem extends Vue {
+    @Prop({default: [] }) readonly itemArr!: Array<object>;
+
+    async created() {
+
+    }
+
+    public showInfo(id: number): void{
+      alert(`查看任务，任务id为：${id}`)
+    }
+  }
+</script>
+
+<style scoped lang="stylus">
+  .news_item
+    padding 0.44rem 0.493rem
+    margin-bottom 0.253rem
+    border-bottom 10px solid #f6f6f6
+    .item_title
+      padding-left 0.28rem
+      padding-bottom 0.2rem
+      padding-right 0.28rem
+      box-sizing border-box
+      display flex
+      align-items center
+      justify-content space-between
+      border-bottom 1px solid #e5e5e5
+      h2
+        color #666
+        font-size 16px
+      span
+        color #adadad
+        font-size 13px
+    .item_content
+      padding-left 0.573rem
+      padding-right 0.4rem
+      padding-top 0.187rem
+      display flex
+      justify-content space-between
+      box-sizing border-box
+      .content_left
+        .name
+          padding-bottom 0.293rem
+          img
+            border-radius 100%
+            vertical-align middle
+          span
+            color #333
+            font-size 12px
+            padding-left 0.147rem
+            vertical-align middle
+        .yj
+          color #ff5858
+          font-size 12px
+          padding-bottom 0.293rem
+        .df
+          color #999
+          font-size 12px
+          padding-bottom 0.293rem
+      .content_right
+        color #20c6c2
+        font-size 14px
+        padding 0.147rem 0.28rem
+        background #e5fffe
+        border-radius 6px
+        line-height 0.667rem
+        box-sizing border-box
+        align-self center
+
+
+</style>

衣莎项目/源码/马上洗投票/src/view/components/Popup.vue

@@ -0,0 +1,62 @@
+<template lang="pug">
+  .popup
+    van-popup(v-model="showPopup")
+      .popup_center
+        .title {{title}}
+        .text {{text}}
+        .popup_button(@click='isShow') 确定
+</template>
+<script lang="ts">
+  import {Component, Prop, Vue, Watch} from 'vue-property-decorator';
+
+  @Component
+  export default class Popup extends Vue {
+    // 控制开启关闭
+    @Prop({default: false}) readonly show!: boolean
+    // 标题
+    @Prop({default: '标题'}) readonly title!: string
+    // 内容描述
+    @Prop({default: '内容'}) readonly text!: string
+    // 点击确定关闭跳转的url不穿只关闭
+    @Prop({default: ''}) readonly url!: string
+
+    private showPopup: boolean = false
+
+    private isShow(): void {
+      this.showPopup = false
+      this.$emit('close')
+      if(this.url !== ''){
+        this.$router.push(this.url)
+      }
+    }
+
+    @Watch('show')
+    private watchShow(n:boolean, o:boolean) {
+      this.showPopup = true
+    }
+  }
+</script>
+<style lang="stylus" scoped>
+.popup_center
+  background-color #ffffff
+  width 8.13rem
+  padding 1.09rem 0 0.72rem 0
+  text-align center
+  .title
+    font-size 0.45rem
+    font-weight 500
+  .text
+    font-size 0.4rem
+    color #999999
+    margin-top 0.4rem
+  .popup_button
+    width 4.43rem
+    height 1rem
+    text-align center
+    line-height 1rem
+    margin 0.65rem auto 0
+    background-color rgba(172,32,33,1)
+    color #ffffff
+    font-size 0.4rem
+    border-radius 1rem
+</style>

衣莎项目/源码/马上洗投票/src/view/components/Tabbar.vue

@@ -0,0 +1,37 @@
+<template lang="pug">
+  van-tabbar(class="tabbar" v-model='active' route active-color='#cb4a45')
+    van-tabbar-item(:icon='item.icon' :to="item.href" v-for="(item,index) in TabBarList" :key="index") {{item.title}}
+</template>
+
+<script lang="ts">
+  import {Component, Provide, Vue, Watch} from 'vue-property-decorator';
+  import { Getter } from 'vuex-class'
+
+  @Component
+  export default class Tabbar extends Vue {
+
+    @Getter('getActivityRecord') getActivityRecord : any
+
+    private active: number = 0;
+    private TabBarList: Array<Object> = [];
+    created(){
+      setTimeout(() => {
+        this.watchGetActivityRecord()
+      }, 1000);
+    }
+
+    @Watch('imgData')
+    private watchGetActivityRecord(): void {
+      this.TabBarList = [
+        { title: '首页', icon: this.getActivityRecord.first_image, href: '/' },
+        { title: '排行榜', icon: this.getActivityRecord.charts_image, href: '/ranking' },
+        { title: '活动说明', icon: this.getActivityRecord.des_image, href: '/description' },
+      ];
+    }
+  }
+</script>
+
+<style scoped lang="stylus">
+  .tabbar
+    background #f6f6f6
+</style>

衣莎项目/源码/马上洗投票/src/view/components/TaskHallItem.vue

@@ -0,0 +1,81 @@
+<template lang="pug">
+  .TaskHallItem
+    .list-item(v-for="(item,index) in item" :key="index")
+      .status(:class="item.active ? 'active-on' : 'active-close' ")
+      .item-left
+        img(:src="item.url")
+        .left-info
+          p {{ item.title }}
+          span {{ item.info }}
+      .item-right 已经认证
+</template>
+
+<script lang="ts">
+
+  import {Component, Provide, Vue, Prop} from 'vue-property-decorator';
+
+  @Component
+  export default class TaskHallItem extends Vue {
+
+    private titleName: String = "首页";
+
+    @Prop({default: [] }) readonly item!: Array<any>
+
+    async created() {
+
+    }
+  }
+</script>
+
+<style scoped lang="stylus">
+  .active-on
+    background #20c6c2
+  .active-close
+    background #e5e5e5
+  .TaskHallItem
+    margin-top: 0.48rem;
+    .list-item
+      display flex
+      justify-content space-between
+      padding 0.28rem 0.307rem
+      box-sizing border-box
+      align-items center
+      width 95%
+      margin 0 auto
+      box-shadow 0 2px 10px #0a10143d
+      margin-bottom 0.293rem
+      position relative
+      .status
+        width 0.347rem
+        height 0.347rem
+        border-radius 100%
+        position absolute
+        left 0.16rem
+        top 0.133rem
+      .item-left
+        img
+          width 1.507rem
+          height 1.507rem
+          margin-right 0.587rem
+          float left
+          border-radius 100%
+
+        .left-info
+          float left
+          padding-top 5px
+          p
+            color #333333
+            font-size 16px
+          span
+            color #999999
+            font-size 14px
+      .item-right
+        width 1.707rem
+        height 0.613rem
+        background #1ab51f
+        text-align center
+        color #fff
+        font-size 12px
+        line-height 0.643rem
+
+</style>

衣莎项目/源码/马上洗投票/src/view/components/test.vue

@@ -0,0 +1,17 @@
+<template lang="pug">
+  .test
+    h3 测试子组件
+</template>
+
+<script lang="ts">
+  import {Component, Provide, Vue} from 'vue-property-decorator';
+
+  @Component
+  export default class Test extends Vue {
+
+  }
+</script>
+
+<style scoped lang="stylus">
+
+</style>

衣莎项目/源码/马上洗投票/src/view/components/waterfall.vue

@@ -0,0 +1,303 @@
+<template>
+  <div class="myWaterfall" v-show="imgsArr" ref="fallbox">
+    <ul>
+      <!--鍒楃殑瀹藉害搴旂敱璁＄畻鐨勬潵-->
+      <li v-for="(it,index) in col" :style="{width:(100/col-1)+'%'}" :ref="'col'+index" :key="it">
+        <div v-for="goods in renderList[index]" :key="goods.ID">
+          <slot :goods="goods" />
+        </div>
+      </li>
+    </ul>
+    <div class="loading" v-show="rendering">
+      <div class="wait">
+        <span>L</span>
+        <span>o</span>
+        <span>a</span>
+        <span>d</span>
+        <span>i</span>
+        <span>n</span>
+        <span>g</span>
+        ...
+      </div>
+    </div>
+    <p class="nomore" v-if="over">娌℃湁鏇村浜<EFBFBD>>>></p>
+  </div>
+</template>
+<script>
+export default {
+  props: ["col", "onReachBottom"],
+  data() {
+    return {
+      loading: false, //鏄惁澶勪簬鍔犺浇鐘舵€侊紝鐢ㄤ簬瑙﹀簳浜嬩欢鐨勮妭娴<E5A6AD>
+      nowPage: 1,
+      imgsArr: [], //鏁版嵁鍒楄〃
+      over: false, //鏄惁宸茬粡鍒板簳浜<E7B0B3>
+      lock: false, //璇锋眰閿<E79CB0>
+      rendering: false, //娓叉煋涓<E7858B>,闃叉娓叉煋鏈畬鎴愰珮搴﹁幏鍙栦笉鍑嗙‘鑰屽鑷村彲杩炵画瑙﹀彂璇锋眰
+      renderList: [] //娓叉煋鍒楄〃锛屾牴鎹甶mgsArr+col鍒濆鍖栦负浜岀淮鏁扮粍
+    };
+  },
+
+  methods: {
+    computedOffset(obj, prop) {
+      //宸ュ叿鍑芥暟,璁＄畻鍏冪礌鍒癰ody鐨勭粷瀵逛綅缃<E7B685>
+      if (obj == document.body || obj.offsetParent == document.body) {
+        return parseInt(obj[prop]);
+      }
+      return parseInt(obj[prop]) + this.computedOffset(obj.offsetParent, prop);
+    },
+    getDataList() {
+      //鏁版嵁鍔犺浇
+      //鑺傛祦澶勭悊
+      if (!this.loading && !this.over) {
+        //涓嶅浜庡姞杞界姸鎬佷笖鏈夋柊鏁版嵁
+        let self = this;
+        this.loading = true;
+        //椤垫暟澧炲姞
+        this.onReachBottom(self.nowPage).then(res => {
+          //鎷兼帴
+          self.rendering = true; //娓叉煋鐘舵€佷腑
+          if (res.data.list.length > 0) {
+            self.nowPage++;
+            let len = self.imgsArr.length;
+            self.imgsArr = self.imgsArr.concat(res.data.list);
+            self.fullData(len); //浠呭鏂扮殑鏁版嵁鍋氭覆鏌擄紝闇€瑕佷粠鍘熸暟缁勭殑缁堢偣寮€濮<E282AC>
+            self.lock = false;
+          } else {
+            //娌℃湁鏂版暟鎹<E69A9F>
+            self.over = true;
+            self.rendering = false;
+          }
+          self.loading = false;
+        });
+      } else {
+        //澶勪簬璇锋眰鐘舵€侊紝鑺傛祦,鎴栧凡鍑虹幇鏃犳暟鎹紙over锛夛紝蹇界暐璇锋眰
+        return false;
+      }
+    },
+
+    //姣旇緝鍒楃殑楂樺害鏉ュ垽鏂悜鍝竴涓垪涓坊鍔犳暟鎹<E69A9F>
+    fullData(index) {
+      if (index < this.imgsArr.length) {
+        let self = this;
+
+        let newImg = new Image();
+        /****************姝ゅ闇€浠ヤ釜浜虹殑鏁版嵁鏍煎紡璋冩暣*******************/
+        newImg.src = self.imgsArr[index].img;
+        newImg.onload = () => {
+          //闇€绛夊緟鍥剧墖鍔犺浇锛屽惁鍒欓珮搴︿笉鍑嗙‘
+          let colHeightList = []; //鎵€鏈夊垪鐨勯珮搴﹁〃
+          for (let i = 0; i < self.col; i++) {
+            colHeightList[i] = self.$refs["col" + i][0].offsetHeight;
+          }
+
+          //鑾峰彇鏈€灏忓垪
+          var min = colHeightList.indexOf(Math.min.apply(Math, colHeightList));
+          // self.renderList[min].push(self.imgsArr[index]);
+          let tar = self.renderList[min].concat(self.imgsArr[index]);
+          //闇€瑕佹洿鏂拌鍥撅紝涓婇潰鐨勪娇鐢╬ush涓嶄細鏇存柊瑙嗗浘锛堟搷浣滅殑绗簩缁达級,浣跨敤set
+          self.$set(self.renderList, min, tar);
+          self.fullData(index + 1);
+        };
+      } else {
+        this.rendering = false;
+      }
+    }
+  },
+  mounted() {
+    //娓叉煋鍒<E7858B> 鍒楄〃,鏍规嵁濡傜殑col鐢熸垚瀵瑰簲鍒楁暟,骞剁疆涓虹┖鐨勪簩缁存暟缁<E69A9F>
+    for (var i = 0; i < this.col; i++) {
+      this.renderList[i] = [];
+    }
+    //璇锋眰棣栨鏁版嵁:
+    this.getDataList();
+    let self = this;
+    window.onscroll = function(e) {
+      //鐩戞祴瑙﹀簳
+      //鐎戝竷娴侀珮搴<E78FAE> + 鐎戝竷娴佺殑鐩稿top < 鍙鍖洪珮搴<E78FAE>+婊氬姩璺濈 ==瑙﹀簳
+      //鑾峰彇鍒扮€戝竷娴佺洅瀛<E6B485>
+      let box = self.$refs.fallbox;
+      //鑾峰彇鍒扮洅瀛愮浉瀵逛簬鏂囨。鐨勪綅缃<E7B685>
+      let top = self.computedOffset(box, "offsetTop");
+      let height = box.offsetHeight;
+      //鍙鍖洪珮搴<E78FAE>
+      let clientHeight = document.documentElement.clientHeight;
+      //婊氬姩璺濈
+      let scrollTop = document.documentElement.scrollTop;
+      if (
+        top + height < clientHeight + scrollTop + 50 &&
+        !self.lock &&
+        !self.rendering
+      ) {
+        //瑙﹀簳鍒ゆ柇,50鐢ㄤ簬鎻愬墠瑙﹀彂,涓嶇敤瀹屽叏鍒板簳鎵嶈Е鍙<D095>
+        //瑙﹀簳鎴愬姛
+        self.lock = true;
+        self.getDataList();
+      }
+    };
+    this.fullData(0);
+  },
+
+  beforeDestroy() {
+    //鍙栨秷婊氬姩浜嬩欢锛岄噸瑕侊紝鍚﹀垯璺敱璺宠浆鍚庢墽琛宻croll浜嬩欢灏嗕細鏈変竴鍫嗙殑undefined
+    window.onscroll = null;
+    //婊氬姩鏉＄疆椤讹紝鍚﹀垯璺敱璺宠浆鍚庢粴鍔ㄦ潯鐨勪綅缃病鏈夊彉鍖<E5BD89>
+    document.documentElement.scrollTop = 0;
+  }
+};
+</script>
+
+<style lang="stylus" >
+@keyframes jump {
+  0% {
+    top: -10px;
+  }
+  100% {
+    top: 10px;
+  }
+}
+.loading {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.2);
+  top: 0;
+  left: 0;
+  .wait {
+    font-size: 14px;
+    background: rgba(0, 0, 0, 0.8);
+    border-radius: 10px;
+    line-height: 50px;
+    font-weight: 900;
+    width: 200px;
+    height: 50px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    letter-spacing: 2px;
+    span {
+      font-size: 20px;
+      position: relative;
+    }
+    span:first-of-type {
+      color: red;
+      animation: jump 0.8s linear alternate-reverse infinite;
+    }
+    span:nth-of-type(2) {
+      color: orange;
+      animation: jump 0.8s linear 0.3s alternate-reverse infinite;
+    }
+    span:nth-of-type(3) {
+      color: yellow;
+      animation: jump 0.8s linear 0.6s alternate-reverse infinite;
+    }
+    span:nth-of-type(4) {
+      color: green;
+      animation: jump 0.8s linear 0.9s alternate-reverse infinite;
+    }
+    span:nth-of-type(5) {
+      color: cyan;
+      animation: jump 0.8s linear 1.2s alternate-reverse infinite;
+    }
+    span:nth-of-type(6) {
+      color: blue;
+      animation: jump 0.8s linear 1.5s alternate-reverse infinite;
+    }
+    span:nth-of-type(7) {
+      color: purple;
+      animation: jump 0.8s linear 1.8s alternate-reverse infinite;
+    }
+  }
+}
+.myWaterfall {
+  width: 100%;
+  height: 100%;
+  .nomore {
+    color: grey;
+    height: 30px;
+    line-height: 30px;
+  }
+  ul {
+    /*display: flex;*/
+    overflow: hidden;
+    padding: 10px;
+    background: whitesmoke;
+    border-radius: 10px;
+    li {
+      /*overflow: hidden;*/
+      /*flex: 1;*/
+      float: left;
+      /*width:25%;*/
+      margin: 0 5px;
+      color: #444;
+      overflow: hidden;
+      .goodsA:hover {
+        color: darkorange;
+        background-color: rgba(223, 234, 200, 0.1);
+      }
+      .goodsA {
+        width: 100%;
+        cursor: pointer;
+        box-sizing: border-box;
+        border: 1px solid #ddd;
+        box-shadow: 3px 1px 3px 0 grey;
+        background: red;
+        margin-bottom: 20px;
+        background-color: #fff;
+        img {
+          width: 100%;
+        }
+        .goodsInfo {
+          width: 100%;
+          .goodsName {
+            font-weight: 900;
+            font-size: 16px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            height: 40px;
+            line-height: 40px;
+            text-indent: 10px;
+          }
+          .description {
+            font-size: 12px;
+            text-align: left;
+            text-indent: 10px;
+            /*height:25px;*/
+            line-height: 25px;
+          }
+          .price {
+            height: 30px;
+            line-height: 30px;
+            font-size: 10px;
+            text-align: left;
+            text-indent: 10px;
+            position: relative;
+            .nowPrice {
+              color: rgb(253, 132, 18);
+              font-weight: 900;
+              font-size: 18px;
+              margin-right: 10px;
+              em {
+                font-size: 24px;
+              }
+            }
+            .originPrice {
+              font-size: 14px;
+              text-decoration: line-through;
+              color: #999;
+            }
+            .sale {
+              position: absolute;
+              right: 5px;
+              top: 5px;
+              color: #444;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>