348 lines
8.0 KiB
Plaintext
348 lines
8.0 KiB
Plaintext
<style lang="less" scoped>
|
||
@import url(../../styles/theme.less);
|
||
page {
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.ui-container{
|
||
.ui-no-data-icon{
|
||
width: 250rpx;
|
||
height: 250rpx;
|
||
display: block;
|
||
vertical-align: top;
|
||
margin: 36vh auto 0 auto;
|
||
}
|
||
|
||
.m_vc_lst {
|
||
padding: 30rpx 30rpx 60rpx;
|
||
|
||
.u_vc_lst {
|
||
border-radius: 16rpx;
|
||
margin-bottom: 30rpx;
|
||
|
||
.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-container">
|
||
<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" @longpress="deleteRecord(item, index)" @tap="jumpPath(item, index)">
|
||
<view class="f-fbc">
|
||
<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>
|
||
<view class="u_vertical"></view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</block>
|
||
</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: {
|
||
id: '',
|
||
no_more: false,
|
||
loading: false,
|
||
page: 1,
|
||
list: []
|
||
},
|
||
methods: {
|
||
// 访客列表
|
||
getList() {
|
||
let vm = this
|
||
let data = {
|
||
page: vm.page,
|
||
type: 'single',
|
||
size: 15
|
||
}
|
||
vm.$showLoading('加载中...')
|
||
vm.$get({url: `${service.host}/preview/other/${vm.id}/logs`, 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)
|
||
})
|
||
},
|
||
// 跳转用户详情，没有vip时点击第四个用户弹框提示
|
||
jumpPath(e) {
|
||
wx.navigateTo({url: `/pages/home/information?id=${e.id}`})
|
||
}
|
||
},
|
||
// 上拉获取更多数据
|
||
onReachBottom() {
|
||
let vm = this
|
||
if (!vm.no_more) {
|
||
vm.getList()
|
||
}
|
||
},
|
||
// 下拉刷新
|
||
onPullDownRefresh() {
|
||
let vm = this
|
||
vm.page = 1
|
||
vm.no_more = false
|
||
vm.getList()
|
||
},
|
||
onShow() {
|
||
},
|
||
onLoad(e) {
|
||
let vm = this
|
||
vm.id = e.id
|
||
vm.getList()
|
||
}
|
||
})
|
||
</script>
|
||
<config>
|
||
{
|
||
navigationBarTitleText: '来访记录',
|
||
enablePullDownRefresh: true,
|
||
backgroundColorTop: '#ffffff',
|
||
backgroundColorBottom: '#ffffff',
|
||
}
|
||
</config>
|