lcoco/pages/index/model/attachment-list.vue

<template>
  <view class="attachment-box">
    <view class="attachment-title sys-color-black">附近精选</view>
    <view class="attachment-text sys-color-gray-9">每日推送附近优质用户来场高质量社交</view>
    <view class="attachment-list">
      <view class="attachment-item" :style="{'background-image':'url('+item.img+')'}" v-for="item in list">
        <view class="attachment-data">
          <view class="data-name sys-color-white sys-weight-600 sys-webkit-box sys-height-44">{{item.name}}</view>
          <view class="data-text sys-height-44">
            <text class="sys-height-44 sys-color-white text-item">{{item.age}}</text>
            <text class="sys-height-44 sys-color-white text-item">/</text>
            <text class="sys-height-44 sys-color-white text-item">{{item.sex}}</text>
            <text class="sys-height-44 sys-color-white text-item">/</text>
            <text class="sys-height-44 sys-color-white text-item">{{item.constellation}}</text>
          </view>
        </view>

      </view>
    </view>
    <view class="attachment-open" v-show="isLock">
      <view class="open-data sys-background-yellow sys-radius-200">
        <image class="open-img" src="/static/img/common/lock.png" mode="aspectFill"></image>
        <view class="open-text sys-color-black sys-weight-500" >立即解锁</view>
      </view>
    </view>

  </view>
</template>

<script>
import {getNearbyList} from "@/api/discovery";
import tools from "@/service/tools";

export default {
  name: "attachment-list",
  components: {},
  props: {

  },
  data() {
    return {
      page:1,
      total:undefined,
      isAjax:false,
      list:[],
      isLock:false
    }
  },
  watch: {},
  mounted() {
    this.getAttachmentList()
  },
  methods: {

    async  getAttachmentList(){
      if(this.isLock && this.page>1 ){
        return false
      }
      if(this.total<=this.list.length){
        return false
      }
      if(this.isAjax){
        return false
      }
      this.isAjax=true
      let locationData=await tools.getLocation()
      getNearbyList({'pageNo':this.page,'pageSize':20,'longitude':locationData.longitude,'latitude':locationData.latitude}).then((res)=>{
        this.isAjax=false
        if(res.code===0){
          this.page++
          this.total=res.total
          res.data.data.forEach( (item)=>{
            let galleryUrls=item.galleryUrls
            let age=tools.getAge(item.dateOfBirth)
            if(galleryUrls.length>0){
              if(galleryUrls.length>8){
                galleryUrls=galleryUrls.slice(0,7)
              }
              let newdata = {
                img: galleryUrls[0],
                age:  age,
                name:  item.nickname,
                userId:  item.userId,
                sex:  '女',
                constellation:  '处女座',
              }
              this.list.push(newdata)
            }
          })
        }
      })

    }

  }
}
</script>

<style scoped lang="scss">
.attachment-box{
  .attachment-title{
    margin-top: 40rpx;
    text-align: center;
    font-size: 44rpx;
    height: 44rpx;
    line-height: 44rpx;
    -webkit-background-clip: text;
  }
  .attachment-text{
    text-align: center;
    margin-top: 16rpx;
    font-size: 32rpx;
    height: 44rpx;
    line-height: 44rpx;
  }
  .attachment-list{
    padding: 32rpx;
    display: flex;
    flex-wrap: wrap;
  }
  .attachment-item{
    border-radius: 20rpx;
    display: inline-block;
    margin-right:18rpx;
    width: calc((100vw - 82rpx)/2);
    height: 504rpx;
    background-repeat: no-repeat;//不平铺
    background-position: center center;//居中
    background-size: cover;//随容器大小
    position: relative;
    .attachment-data{
      position: absolute;
      left: 24rpx;
      bottom: 24rpx;
      width: calc((100vw - 82rpx)/2 - 48rpx);
      .data-name{
        font-size: 36rpx;

      }
      .data-text{
        .text-item{
          margin-right: 6rpx;
          font-size: 24rpx;
        }
      }
    }
  }
  .attachment-item:nth-of-type(2n+0){
    margin-right:0;
  }
  .attachment-item:nth-of-type(n+3){
    margin-top:18rpx;
  }
  .attachment-open{
    position: fixed;
    left: 0;
    bottom: 80rpx;
    width: 100vw;
    height: 190rpx;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);
    padding: 70rpx 80rpx 30rpx 80rpx;
    box-sizing: border-box;
    .open-data{
        display: flex;
      justify-content: center;
      height: 88rpx;
      padding: 22rpx 0;
      box-sizing: border-box;
      .open-img{
        width: 32rpx;
        height: 32rpx;
        margin-right: 8rpx;
        margin-top: 6rpx;
      }
      .open-text{
        font-size: 32rpx;
        //height: 44rpx;
        //line-height: 44rpx;
      }
    }
  }

}

</style>