585 lines
16 KiB
Plaintext
585 lines
16 KiB
Plaintext
<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>
|