ufutx_love_mp/src/pages/news/visitor.wpy

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

.ui-tabBar-box{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background: #ffffff;

  .ui-tabBar-box{
    width: 100%;
    padding: 28rpx 200rpx 40rpx;
    box-sizing: border-box;

    .ui-nav {
      height: 42rpx;
      font-size: 30rpx;
      font-weight: bold;
      color: #999999;
      position: relative;
    }
    .ui-active {
      font-size: 30rpx;
      line-height: 42rpx;
      color: #333333;
      position: relative;
    }
    .ui-active::after {
      content: '';
      position: absolute;
      transform: translateX(-50%);
      left: 50%;
      bottom: -14rpx;
      width: 40rpx;
      height: 8rpx;
      background: #FF5380;
      border-radius: 20rpx;
    }
  }
}

.ui-placeholder{
  width: 100vw;
  height: 110rpx;
}

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

  .m_vc_lst {
    padding: 0 30rpx 60rpx;

    .u_vc_lst {
      border-radius: 16rpx;
      margin-bottom: 30rpx;

      .u_box {
        justify-content: space-between;
        align-items: start;
        position: relative;
      }

      .ui-visitor-detail-btn {
        position: absolute;
        right: 0;
        bottom: 0;
      }

      .u_vclst_img {
        width: 100rpx;
        height: 100rpx;
        border-radius: 200rpx;
      }

      .u_vclst_t_box {
        margin-left: 16rpx;

        .u_vclst_name {
          max-width:200rpx;
          font-size: 32rpx;
          font-weight: bold;
          color: #333333;
        }

        .u_vclst_a_box {
          margin-left: 6rpx;
          padding: 0 12rpx;
          height: 36rpx;
          border-radius: 16rpx;
        }

        .age_g {
          color: #ED3866;
          background: #FFF4F7;
          border: 2rpx solid #FFA9C0;
        }

        .age_b {
          color: #2AAFF5;
          background: #EEF9FF;
          border: 2rpx solid #80D3FF;
        }

        .a_sex_img {
          margin-right: 4rpx;
          height: 20rpx;
          width: 20rpx;
        }
      }

      .u_vertical {
        margin-top: 20rpx;
        margin-left: 116rpx;
        width: 546rpx;
        height: 2rpx;
        background-color: #F5F5F5;
      }

      .u_vclst_img.blur {
        -webkit-filter: blur(8px);
        -moz-filter: blur(8px);
        -ms-filter: blur(8px);
        filter: blur(8px);
        overflow: hidden;
      }
    }

    .ui-filter{
      filter: blur(4px) contrast(.8);
    }
  }

  .m_fans_lst {
    padding: 0 30rpx 60rpx;
    flex-wrap: wrap;
    align-content: stretch;
    .u_fans_lst:nth-child(3n+2) {
      margin-left: 22rpx;
      margin-right: 22rpx;
    }
    .u_fans_lst {
      width: 215rpx;
      height: 215rpx;
      border-radius: 16rpx;
      overflow: hidden;
      margin-bottom: 30rpx;
      position: relative;
      .u_fans_img {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
      }
      .u_fans_img.blur {
        -webkit-filter: blur(8px);
        -moz-filter: blur(8px);
        -ms-filter: blur(8px);
        filter: blur(8px);
        overflow: hidden;
      }
      .ui-fans-icon{
        width: 140rpx;
        height: 34rpx;
        top: 12rpx;
        right: 12rpx;
        position: absolute;
      }
      .u_vclst_ct {
        position: absolute;
        padding: 6rpx 0 0 12rpx;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 78rpx;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.4) 100%);
        z-index: 99;
        .u_vclst_name {
          line-height: 28rpx;
          width: 190rpx;
        }
        .u_vclst_add {
          width: 150rpx;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          padding-left: 10rpx;
          .icon-location {
            padding-right: 2rpx;
            font-size: 18rpx;
          }
        }
      }
    }
  }
}

.cu-dialog{
  width: 600rpx;
  height: 660rpx;
  border-radius: 30rpx;
  position: relative;
  overflow:initial;
  .main{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    .header{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column;
      .header-img{
        width: 180rpx;
        height: 180rpx;
        border-radius: 50%;
        vertical-align: middle;
        filter:blur(4px) contrast(.8);
        overflow: hidden;
      }
      .ui-city{
        height: 40rpx;
        font-size: 28rpx;
        color: #333333;
        line-height: 40rpx;
        margin-top: 16rpx;
      }
    }
    .ui-text{
      height: 44rpx;
      font-size: 32rpx;
      font-weight: 600;
      color: #333333;
      line-height: 44rpx;
      text-align: center;
      margin-top: 84rpx;
    }
    .ui-img{
      width: 418rpx;
      height: 120rpx;
      margin-top: 74rpx;
    }
  }
  .actions {
    position: absolute;
    bottom: -100rpx;
    left: 0;
    right: 0;
    margin: auto;
    width: 48rpx;
    height: 48rpx;
  }
}

.m_unl_bu {
  width: 100%;
  position: fixed;
  bottom: 60rpx;
  left: 0;
  z-index: 0;
  .u_unl_img {
    width: 616rpx;
    height: 120rpx;
  }
}

</style>
<template>
  <view class="ui-visitor">
    <view class="ui-tabBar-box">
      <view class="ui-tabBar-box f-fbc">
        <view v-for="(item,index) in tabBarList" :key="index" data-index="{{index}}" class="ui-nav {{tabBarIndex == index ? 'ui-active' : ''}}" @tap="changeTab(index)">{{item}}</view>
      </view>
    </view>
    <view class="ui-placeholder"></view>
    <view class="ui-container">
      <block v-if="tabBarIndex == 0">
        <image v-if="list.length == 0 && loading" class="ui-no-data-icon" src="https://images.ufutx.com/202104/13/1737964f7c98cbf65d728137dc2792eb.png" mode="aspectFill"></image>
        <block v-else>
          <view class="m_vc_lst">
            <block v-for="(item,index) in list" :key="index">
              <view class="u_vc_lst {{index >= 3 && !userInfo.rank_id ? 'ui-filter' : ''}}" @longpress="deleteRecord(item, index)" @tap="jumpPath(item, index)">
                <view class="f-fc u_box">
                  <view class="f-fc">
                    <image class="u_vclst_img" :src="item.photo" mode="aspectFill" @tap.stop="gotofriends(item, index)"></image>
                    <view class="u_vclst_t_box">
                      <view class="f-fc">
                        <view class="u_vclst_name ellipsis_1">{{item.nickname}}</view>
                        <view class="u_vclst_a_box f-fc  {{ item.sex == 2 ? 'age_g' : 'age_b'}} font_22" v-if="item.sex == 2">
                          <image v-if="item.sex == 2" class="a_sex_img" src="https://image.fulllinkai.com/202208/09/dfed05b3e1e1880a3a6f81806d99e9de.png" mode="widthFix"></image>
                          <image v-else class="a_sex_img" src="https://image.fulllinkai.com/202208/09/dfed05b3e1e1880a3a6f81806d99e9de.png" mode="widthFix"></image>
                          <view>{{item.year}}</view>
                        </view>
                      </view>
                      <view class="f-fc">
                        <view class="u_state">{{item.stature || ''}} {{item.city || ''}}</view>
                      </view>
                    </view>
                  </view>
                  <view class="color-999">{{item.create_time}}</view>
                  <view class="ui-visitor-detail-btn font_26 color999" v-if="userInfo.rank_id">来访{{item.count}}次</view>
                </view>
                <view class="u_vertical"></view>
              </view>
            </block>
          </view>
        </block>
      </block>
      <block v-else>
        <image v-if="fansList.length == 0 && fans_loading" class="ui-no-data-icon" src="https://images.ufutx.com/202104/13/1737964f7c98cbf65d728137dc2792eb.png" mode="aspectFill"></image>
        <block v-else>
          <view class="m_fans_lst f-fc">
            <view class="u_fans_lst" v-for="(item,index) in fansList" :key="index" @tap="jumpPath(item, index)">
              <image class="u_fans_img {{index >= 3 && !userInfo.rank_id ? 'blur' : ''}}" :src="item.photo" mode="aspectFill"></image>
              <image class="ui-fans-icon" v-if="item.hidden_profile != 'NONE'" src="https://image.fulllinkai.com/202203/22/7a244fa7e39105c3f9cb9d951dcd5664.png" mode="aspectFit"></image>
              <view class="u_vclst_ct">
                <view class="u_vclst_name white bold font_24 ellipsis_1">{{item.nickname}}</view>
                <view class="white f-fc">
                  <view class="font_20" style="min-width: 62rpx" v-if="item.year == '未填写'">{{item.year || ''}}</view>
                  <view class="font_20" v-else>{{item.year || ''}}</view>
                  <view class="u_vclst_add f-fc">
                    <view  class="font_family icon-location"></view>
                    <view class=" font_20">{{item.city || ''}}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </block>
      </block>
    </view>
  </view>
  <view class="m_unl_bu f-fcc" v-if="tabBarIndex == 0 && list.length > 3 && !userInfo.rank_id">
    <image class="u_unl_img" @tap="handleVip" src="https://images.ufutx.com/202106/21/efbb981085024321ef3ff0a1c7999ab4.png" mode="aspectFit" lazy-load="false"></image>
  </view>
  <view class="m_unl_bu f-fcc" v-if="tabBarIndex == 1 && fansList.length > 3 && !userInfo.rank_id">
    <image class="u_unl_img" @tap="handleVip" src="https://images.ufutx.com/202106/21/b056766538c70151dc2d37b118ea6ce4.png" mode="aspectFit" lazy-load="false"></image>
  </view>
  <view class="cu-modal" :class="{'show' : tipsShow}">
    <view class="cu-dialog">
      <view class="padding-xl text-left main">
        <view class="header">
          <image class="header-img" :src="pic" mode="aspectFill"></image>
          <view class="ui-city">{{age}} · {{city}}</view>
        </view>
        <view class="ui-text">成为会员可以解锁{{tabBarIndex == 1 ? '所有粉丝' : '所有访客'}}</view>
        <image v-if="tabBarIndex == 1" class="ui-img" src="https://images.ufutx.com/202103/19/d50225289964b293f34ded71a30ae691.png" mode="widthFix" @tap="handleVip"></image>
        <image v-else class="ui-img" src="https://images.ufutx.com/202103/19/d50225289964b293f34ded71a30ae691.png" mode="widthFix" @tap="handleVip"></image>
      </view>
      <image class="actions" src="https://images.ufutx.com/202103/15/1033c7b52cacddcebe999cefc6ad2c9b.png" mode="widthFix" @tap="tipsShow = false"></image>
    </view>
  </view>
</template>

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

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

  data: {
    tabBarIndex: 0,
    tabBarList: ['访客', '粉丝'],
    userInfo: {},

    pic: '',
    city: '',
    age: '',
    tipsShow: false,

    no_more: false,
    loading: false,
    page: 1,
    list: [],
    scroll: 0,

    fans_no_more: [],
    fans_loading: false,
    fans_page: 1,
    fansList: [],
    fansScroll: 0
  },
  methods: {
    // 访客列表
    getList() {
      let vm = this
      let data = {
        page: vm.page,
        type: 'single',
        size: 15
      }
      vm.$showLoading('加载中...')
      vm.$get({url: `${service.host}/preview/list`, data}).then(({code, data}) => {
        if (code === 0) {
          data.data.forEach((item) => {
            item.create_time = utils.commentTimeHandle(item.create_time)
          })
          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)
      })
    },
    // 粉丝列表
    getFansList() {
      let vm = this
      let data = {
        page: vm.fans_page,
        type: 'single',
        size: 15
      }
      vm.$showLoading('加载中...')
      vm.$get({url: `${service.host}/follow/fans/list`, data}).then(({code, data}) => {
        if (code === 0) {
          data.data.forEach((item) => {
            item.nickname = `${item.nickname.substring(0, 1)}***`
          })
          if (vm.fansList.length === 0 || vm.fans_page === 1) {
            vm.fansList = data.data
          } else {
            data.data.map(function (item) {
              vm.fansList.push(item)
            })
          }
          if (vm.fansList.length < 15 || data.data.length < 15) {
            vm.fans_no_more = true
          }
          setTimeout(() => {
            vm.fans_loading = true
          }, 500)
          vm.fans_page++
          wx.hideLoading()
        }
      }).catch(err => {
        wx.hideLoading()
        console.log(err)
      })
    },
    deleteRecord(e, index) {
      let vm = this
      let data = {
        user_id: e.preview_user_id
      }
      wx.showModal({
        title: '来访记录',
        content: `是否确认删除Ta的来访记录？`,
        success: function (res) {
          if (res.confirm) {
            vm.$delete({url: `${service.host}/delete/preview/history`, data}).then(({code, data}) => {
              if (code == 0) {
                vm.list.splice(index, 1)
                vm.$showToast(`来访记录已删除`)
              }
            }).catch(() => {
            })
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    },
    // 切换tab
    changeTab(index) {
      let vm = this
      let top = 0
      if (vm.tabBarIndex == index) {
        return
      }
      vm.tabBarIndex = index
      if (vm.tabBarIndex == 0) {
        top = vm.scroll
      } else {
        top = vm.fansScroll
      }
      wx.pageScrollTo({
        scrollTop: top,
        duration: 0
      })
    },
    // 跳转购买vip
    handleVip() {
      let vm = this
      vm.tipsShow = false
      wx.navigateTo({url: '/pages/users/upgradeVIP'})
    },
    // 跳转用户详情，没有vip时点击第四个用户弹框提示
    jumpPath(e, index) {
      let vm = this
      if (index >= 3 && !vm.userInfo.rank_id) {
        vm.pic = e.photo
        vm.city = e.city
        vm.age = e.year
        vm.tipsShow = true
        return
      }
      wx.navigateTo({url: `/pages/home/information?id=${e.id}`})
    }
  },
  // 上拉获取更多数据
  onReachBottom() {
    let vm = this
    if (vm.tabBarIndex == 0) {
      if (!vm.no_more) {
        vm.getList()
      }
    } else {
      if (!vm.fans_no_more) {
        vm.getFansList()
      }
    }
  },
  // 下拉刷新
  onPullDownRefresh() {
    let vm = this
    if (vm.tabBarIndex == 0) {
      vm.page = 1
      vm.no_more = false
      vm.getList()
    } else {
      vm.fans_page = 1
      vm.fans_no_more = false
      vm.getFansList()
    }
  },
  onPageScroll(res) {
    let vm = this
    let top = res.scrollTop
    if (vm.tabBarIndex == 0) {
      vm.scroll = top
    } else {
      vm.fansScroll = top
    }
  },
  onShow() {
  },
  onLoad(e) {
    let vm = this
    if (e && e.index) {
      vm.tabBarIndex = e.index
    }
    vm.getList()
    vm.getFansList()
    vm.userInfo = wx.getStorageSync('userInfo')
  }
})
</script>
<config>
{
navigationBarTitleText: '访客/粉丝',
enablePullDownRefresh: true,
backgroundColorTop: '#ffffff',
backgroundColorBottom: '#ffffff',
}
</config>