ufutx_love_mp/src/pages/home/singleSquare.wpy

<style lang="less" scoped>
@import url(../../styles/theme.less);
page {
  background-color: #ffffff;
}

.ui-singleSquare{
  .m_rec {
    width: 100%;
    height: 80rpx;
    background-color: #FFF4F7;
    color: #F33B6C;
    padding: 0 30rpx;
    .u_rec_bu {
      border-radius: 100rpx;
      padding: 2rpx 16rpx;
      border: 2rpx solid #FF95B1;
    }
  }

  .ui-no-data-icon{
    width: 250rpx;
    height: 250rpx;
    display: block;
    vertical-align: top;
    margin: 26vh auto 0 auto;
  }

  .recommended_user_data_box{
    padding-top: 20rpx;
    padding-bottom: 60rpx;
    margin: 0 30rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .recommended_user{
      position: relative;
      width: 336rpx;
      height: 336rpx;
      border-radius: 16rpx;
      margin-bottom: 20rpx;
      .icon{
        width: 160rpx;
        height: 42rpx;
        top: 12rpx;
        right: 12rpx;
        position: absolute;
      }
      .userPhoto{
        position: absolute;
        top: 0;
        left: 0;
        width: 336rpx;
        height: 336rpx;
        border-radius: 16rpx;
      }
      .mask{
        position: absolute;
        top: 0;
        left: 0;
        width: 336rpx;
        height: 336rpx;
        border-radius: 16rpx;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
      }
      .recommended_user_data{
        color: #fff;
        position: absolute;
        bottom: 16rpx;
        left: 20rpx;
        .recommended_user_name{
          width: 230rpx;
          letter-spacing: 1rpx;
        }
        .age_address{
          overflow: hidden;
          .address_icon{
            width: 20rpx;
            height: 24rpx;
            vertical-align: middle;
            margin: 0 4rpx 0 16rpx;
          }
          .address_text{
            display: inline-block;
            width: 200rpx;
            vertical-align: middle;
            margin-left: 2rpx;
            margin-top: 2rpx;
          }
        }
      }
    }
  }
}
</style>
<template>
  <view class="ui-singleSquare">
<!--    <view class="m_rec font_26 f-fbc" v-if="recommendData.apply_state.has_apply_area != 1 && type != 'marriage'">-->
<!--      <view>上专区推荐，还可进入群聊，更容易脱单哦～</view>-->
<!--      <view class="u_rec_bu" bindtap="getRecommend">去申请</view>-->
<!--    </view>-->
    <view v-if="list.length == 0 && loading" class="text-center">
      <image class="ui-no-data-icon" src="https://images.ufutx.com/202104/13/1737964f7c98cbf65d728137dc2792eb.png" mode="aspectFill"></image>
    </view>
    <block v-else>
      <view class="ui-pb-20">
        <view class="recommended_user_data_box">
          <view class="recommended_user" v-for="(item,index) in list" :key="index" @tap="jumpPath(`/pages/home/information?id=${item.id}`)">
            <image class="userPhoto" :src="item.photo" mode="aspectFill"></image>
            <view class="mask"></view>
            <view class="recommended_user_data">
              <view class="font28 bold recommended_user_name ellipsis_1">{{item.nickname}}</view>
              <view class="age_address">
                <view class="flo_l font26 ui-mt-4">{{item.year}}</view>
                <view class="flo_l">
                  <image class="address_icon" src="https://images.ufutx.com/202012/04/9fd9ec3ebabffa12e4527ed8e0664473.png" mode="widthFix"></image>
                  <view class="address_text ellipsis_1 font24">{{item.city?item.city:'--'}}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </block>
  </view>
  <pageScroll ref="pageScroll"></pageScroll>
</template>

<script>
import wepy from '@wepy/core'
import https from '../../mixins/https'
import base from '../../mixins/base'
import {service} from '../../config'
import {getDiffTime} from '../../mixins/plugins'

wepy.page({
  config: {},
  mixins: [https, base],

  data: {
    id: '',
    title: '',
    no_more: false,
    loading: false,
    page: 1,
    list: [], // 列表数据
    verify: {},
    recommendShow: false,
    intentionShow: false,
    recommendData: {}
  },
  methods: {
    getList() {
      let vm = this
      let data = {
        page: vm.page
      }
      vm.$showLoading('加载中...')
      vm.$get({url: `${service.host}/area/${vm.id}/users`, data}).then(({code, data}) => {
        if (code === 0) {
          if (vm.list.length === 0 || vm.page === 1) {
            vm.list = data.data
          } else {
            data.data.map(function (item) {
              vm.list.push(item)
            })
          }
          if (vm.list.length < 15 || data.data.length < 15) {
            vm.no_more = true
          }
          setTimeout(() => {
            vm.loading = true
          }, 500)
          vm.page++
        }
        wx.hideLoading()
      }).catch(err => {
        wx.hideLoading()
        console.log(err)
      })
    },
    // 去申请上专区推荐
    getRecommend() {
      let vm = this
      vm.$showLoading('')
      vm.$get({url: `${service.host}/area/user/condition`}).then(({code, data}) => {
        if (code === 0) {
          vm.recommendData = data
          if (data.profile == 1 && data.is_educate_approved == 1 && data.is_real_approved == 1) {
            vm.intentionShow = true
          } else {
            vm.recommendShow = true
          }
        }
        wx.hideLoading()
      }).catch(err => {
        console.log(err)
        wx.hideLoading()
      })
    },
    jumpPath(url) {
      wx.navigateTo({url: url})
    }
  },
  // 上拉获取更多数据
  onReachBottom() {
    let vm = this
    if (!vm.no_more) {
      vm.getList()
    }
  },
  // 下拉刷新
  onPullDownRefresh() {
    let vm = this
    vm.page = 1
    vm.no_more = false
    vm.getList()
  },
  onPageScroll(res) {
    let vm = this
    let top = res.scrollTop
    vm.$refs.pageScroll.showBackTopBtn = top > 380
  },
  onShow() {
  },
  onLoad(e) {
    let vm = this
    vm.id = e.id
    vm.titl = e.title
    if (e.title) {
      wx.setNavigationBarTitle({
        title: e.title
      })
    }
    vm.getList()
  }
})
</script>
<config>
{
navigationBarTitleText: '专区推荐',
enablePullDownRefresh: true,
backgroundColorTop: '#ffffff',
backgroundColorBottom: '#ffffff',
usingComponents: {
pageScroll: '~@/components/pageScroll',
}
}
</config>