您好,匿名用户

vue-infinite-loading 刷新页面无法加载数据

0 投票

<template>
<div class="appraisal">

<div class="info">
  <div class="fraction">
    <div class="point">4.7</div>
    <div class="score">
      <p>综合评分</p>
      <div class="list">
        <img src="@/assets/images/icon-one.png" alt="">
        <img src="@/assets/images/icon-one.png" alt="">
        <img src="@/assets/images/icon-one.png" alt="">
        <img src="@/assets/images/icon-half.png" alt="">
        <img src="@/assets/images/icon-normal.png" alt="">
      </div>
    </div>
  </div>
  <div class="category">
    <div class="item">
      <div class="title">好评指数</div>
      <div class="score">4.6</div>
    </div>
    <div class="item">
      <div class="title">洗护效果</div>
      <div class="score">4.6</div>
    </div>
    <div class="item">
      <div class="title">物流速度</div>
      <div class="score">4.6</div>
    </div>
    <div class="item">
      <div class="title">服务态度</div>
      <div class="score">4.6</div>
    </div>
  </div>
</div>
<div class="appraisalInfo">
  <div class="title">
    <div class="filter">
      <div class="icon" :class="active ? 'active' : ''" @click="change"></div>
      <p>只显示有内容的评价</p>
    </div>
    <div class="selected">
      <div class="item" v-for="(item, key) in  select " :key="key" :class="key === selected ? 'active' : ''" @click="changeSelected(key)">{{item.name}}</div>
    </div>
  </div>
</div>

<div class="appraisalList" v-for="(item, keys) in comment" :key="keys">
  <div class="userInfo">
    <div class="avatar">
      <img :src="item.image" alt="">
    </div>
    <div class="user">
      <div class="name">{{item.username}}</div>
      <div class="score">4.7分好评</div>
    </div>
    <div class="time">{{item.created_at}}</div>
  </div>
  <div class="appraisalInfos">
    <div class="text">{{item.remark}}</div>
    <div class="imgs">
      <img src="@/assets/images/1547399697809565935.jpg" alt="">
      <img src="@/assets/images/1547399697809565935.jpg" alt="">
      <img src="@/assets/images/1547399697809565935.jpg" alt="">
      <img src="@/assets/images/1547399697809565935.jpg" alt="">
      <img src="@/assets/images/1547399697809565935.jpg" alt="">
      <img src="@/assets/images/1547399697809565935.jpg" alt="">
      <img src="@/assets/images/1547399697809565935.jpg" alt="">
      <img src="@/assets/images/1547399697809565935.jpg" alt="">
    </div>
  </div>
</div>
<infinite-loading @infinite="update" ref="infiniteLoading">
  <div slot="no-results" class="content-none">
    <img class="icon-none" src="../../../assets/images/icon-none_1.png" alt="暂无评论">
    <p class="text-gray">暂无评论</p>
  </div>
</infinite-loading>

</div>
</template>

<script>
export default {
name: 'Appraisal',
data () {

return {
  active: true,
  selected: 0,
  select: [
    {
      name: '全部',
      id: 0
    },
    {
      name: '好评',
      id: 1
    },
    {
      name: '中评',
      id: 2
    },
    {
      name: '差评',
      id: 3
    }
  ],
  infiniteId: new Date(),
  comment: [],
  size: 10,
  page: 1
}

},
methods: {

change () {
  this.active = !this.active
},
changeSelected (key) {
  if (key === this.selected) {
    return
  }
  this.selected = key
  this.comment = []
  this.page = 1
  this.infiniteId = new Date()
},
update ($state) {
  this.$axios.get('api/shop/shop_comment', {
    params: {
      shop_id: this.$route.query.id,
      size: this.size,
      page: this.page,
    }
  }).then(res=> {
    if (res.data.code === 0) {
      console.log(res.data.data.comment_list)
      console.log(res.data.data.complex)
      if (res.data.data.comment_list.length > 0) {
        this.page ++
        this.comment.push(...res.data.data.comment_list)
        $state.loaded()
      } else {
        $state.complete()
      }
    } else {
      $state.complete()
      this.$weui.alert(res.data.message)
    }
  })
},

},
};
</script>

<style lang="scss" scoped>
.appraisal{
padding-bottom: 1.2rem;
.info{

padding: .3rem;
background-color: #fff;
display: flex;
.fraction{
  border-right: 1px solid #e1e1e1;
  display: flex;
  align-items: center;
  .point{
    color: #FF6E7D;
    font-size: .5rem;
    font-weight: bold;
    margin-right: .1rem;
  }
  .score{
    font-size: .22rem;
    color: #333;
    margin-right: .2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .list{
      display: flex;
       img{
        display: block;
        width: .22rem;
        height: .18rem;
        margin-right: .1rem;
        &:last-child{
          margin-right: 0;
        }
      }
    }
  }
}
.category{
  display: flex;
  flex: auto;
  justify-content: space-between;
  padding-left: .2rem;
  .item{
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .title{
      font-size: .22rem;
    }
    .score{
      color: #FF6E7D;
      font-weight: bold;
      font-size: .28rem;
    }
  }
}

}
.appraisalInfo{

margin-top: .2rem;
background-color: #fff;
.title{
  height: 1rem;
  border-bottom: 1px solid #e1e1e1;
  padding: 0 .3rem;
  display: flex;
  justify-content: space-between;
  .filter{
    height: 1rem;
    display: flex;
    align-items: center;
    font-size: .24rem;
    color: #666;
    .icon{
      width: .3rem;
      height: .3rem;
      background-image: url('../../../assets/images/checkbox_icon.png');
      background-size: 0.35rem 0.75rem;
      background-position: -0.01rem -0.4rem;
      margin-right: .1rem;;
      &.active{
        background-position: -0.01rem -0.028rem;
      }
    }
  }
  .selected{
    display: flex;
    align-items: center;
    .item{
      width: .8rem;
      height: .5rem;
      border-radius: .06rem;
      border: 1px solid #ccc;
      box-sizing: border-box;
      color: #999;
      font-size: .24rem;
      margin-left: .2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      &:first-child{
        margin-left: 0;
      }
      &.active{
        border: 2px solid #FF6E7D;
        color: #FF6E7D;
      }
    }
  }
}

}
.appraisalList{

padding: .4rem .3rem .3rem;
background-color: #fff;
border-bottom: 1px solid #e1e1e1;
&:last-child{
  border-bottom: none;
}
.userInfo{
  display: flex;
  .avatar{
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    overflow: hidden;
    img{
      display: block;
      width: .8rem;
      height: .8rem;
    }
  }
  .user{
    margin-left: .2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .name{
      font-size: .32rem;
      color: #333;
    }
    .score{
      font-size: .24rem;
      color: #999;
    }
  }
  .time{
    margin-left: auto;
    font-size: .24rem;
    color: #999;
  }
}
.appraisalInfos{
  padding-left: 1rem;
  margin-top: .2rem;
  font-size: .28rem;
  color: #333;
  .imgs{
    margin-top: .2rem;
    display: flex;
    flex-wrap: wrap;
    img{
      width: 1.5rem;
      height: 1.5rem;
      display: block;
      object-fit: cover;
      border: 1px solid #e1e1e1;
      margin-left: .2rem;
      margin-bottom: .2rem;
      &:nth-of-type(3n+1) {
        margin-left: 0;
      }
    }
  }
}

}
}
</style>

用户头像 提问 5月16日 @ Galio 中士 (1,364 威望)
分享到:

你的回答

隐私保护: 您的邮箱仅用于发送系统通知。
请输入验证码:
    图片验证码看不清?
登录注册后不会被要求输入验证码。

欢迎来到随意问技术百科, 这是一个面向专业开发者的IT问答网站,提供途径助开发者查找IT技术方案,解决程序bug和网站运维难题等。
温馨提示:本网站禁止用户发布与IT技术无关的、粗浅的、毫无意义的或者违法国家法规的等不合理内容,谢谢支持。

欢迎访问随意问技术百科,为了给您提供更好的服务,请及时反馈您的意见。
...