ufutx-love-h5-public/src/views/makingFriendsModule/makingFriendsList.vue

<template>
  <div class="makingFriendsList">
    <!-- 搜索栏 -->
    <div class="search-wrap ">
      <van-search
        v-model="keyword"
        :placeholder="$t('please_input_search_keyword')"
        @search="onSearch"
        @input="onSearch"
        @change="onSearch"
        @cancel="onCancelSearch"
      />
    </div>
    <div style="height: 50px"></div>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :loosing-text="$t('loosing_text')" :loading-text="$t('loading_text')">
      <van-list v-model="loading" :finished="finished" @load="getList" style="min-height: 100vh">
        <div class="text-center" style="padding: 170px 0" v-if="!emptyData">
          <img class="emptyDataIcon" src="https://image.fulllinkai.com/202108/23/939c529ca16a91e3ee3b22bef2fe92ca.png" alt="" />
          <div class="color9 font14" style="margin-top: 14px">{{ $t('Temporarily_no_data') }}</div>
        </div>
        <div v-else>
          <div class='square_box'>
            <div class='square_user_photo backCover' v-for='(item,index) in list' :key='index' :style="{ backgroundImage: 'url(' + item.pic + ')' }" @click='goToUrlId("userDetail", item.id)'>
              <div class='mask_box'></div>
              <div class='buttom_data_box colorff'>
                <div class='font14 bold ellipsis_1' style='max-width: 100px'>{{item.nickname}}</div>
                <div class='alignment_left font12'>
                  <div style='margin-right: 8px;' v-if='item.info && item.info.age'>{{item.info.age}}岁</div>
                  <div class='alignment_left' v-if='item.info && item.info.city'>
                    <img class='address_icon' src='https://image.fulllinkai.com/202112/01/77b63469aef377bfc3569c1211072c77.png' alt=''>
                    <div class=''>{{item.info.city}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bottomLine font12 color6 text-center" v-if="noMoreData">
            - {{ $t('I_have_a_line_in_the_sand') }} -
          </div>
          <div style="height: 50px;"></div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script type='text/javascript'>

import { $toastClear, $toastLoading } from '@/config/toast'
import service from '@/utils/request'

export default {
  computed: {},
  components: {},
  data() {
    return {
      list: [],
      page: 1,
      loading: false,
      finished: false,
      refreshing: false,
      emptyData: true,
      noMoreData: false,
      keyword: ''
    }
  },
  watch: {},
  methods: {
    //触发搜索
    onSearch() {
      this.page = 1
      this.finished = false
      this.loading = true
      this.getList()
    },
    //取消搜索清空
    onCancelSearch() {
      this.keyword = ''
      this.onSearch()
    },
    getList() {
      const vm = this
      $toastLoading(vm.$i18n.t('loading_text'))
      //拼接keyword参数，空字符串后端自动忽略
      service.get(`s/h5/friend/user/list?page=${vm.page}&keyword=${encodeURIComponent(vm.keyword)}`).then(data => {
        const dataV = vm.page === 1 ? [] : vm.list
        dataV.push(...data.data)
        vm.list = dataV
        vm.refreshing = false
        if (vm.list.length !== 0) {
          vm.emptyData = true
        } else {
          vm.emptyData = false
        }
        if (vm.list.length < 15 || data.data.length < 15) {
          vm.finished = true
          vm.noMoreData = true
          if (vm.list.length === 0) {
            vm.noMoreData = false
          }
          $toastClear()
          return
        } else {
          vm.loading = false
          $toastClear()
        }
        vm.page++
        setTimeout(() => {
          $toastClear()
        }, 500)
      })
        .catch(error => {
          console.log(error)
          $toastClear()
        })
    },
    onRefresh() {
      this.page = 1
      this.loading = true
      this.finished = false
      this.getList()
    },
    goToUrlId(url, id) {
      this.$router.push({
        name: url,
        params: { id: id }
      })
    }
  },
  created() {
  },
  mounted() {
    const ScrollTop = document.getElementById('app')
    ScrollTop.scrollTop = 0
  }
}
</script>

<style lang="scss" scoped>
.makingFriendsList {
  width: 100vw;
  min-height: 100vh;
  background: #ffffff;

  .search-wrap {
    padding: 12px 12px;
    position: fixed;top: 0px;
    width: 100%;
    box-sizing: border-box;
    z-index: 99;
    background: white;
  }
  .search-wrap .van-search{
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
  }

  .emptyDataIcon {
    width: 135px;
    height: 100px;
    display: block;
    margin: 0 auto;
  }
  .square_box{
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .bottomLine {
      padding-top: 30px;
    }
    .square_user_photo{
      width: 168px;
      height: 168px;
      border-radius: 8px;
      margin-bottom: 10px;
      position: relative;
      .mask_box{
        position: absolute;
        width: 168px;
        height: 168px;
        border-radius: 8px;
        top: 0;
        left: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
      }
      .buttom_data_box{
        position: absolute;
        left: 10px;
        bottom: 10px;
        .address_icon{
          width: 10px;
          height: 12px;
          display: block;
          margin-right: 2px;
        }
      }
    }
  }
}
</style>