568 lines
18 KiB
Plaintext
568 lines
18 KiB
Plaintext
<template>
|
||
<view class="borrow animation-fade">
|
||
<view class="text-left radius" style="border-bottom: 2rpx solid #F5F5F5; background: #f8f8f8;">
|
||
<tabSearchV2 title="搜索昵称" BColor="#F8F8F8" inputColor="#fff" @search="getSearch"></tabSearchV2>
|
||
</view>
|
||
<view class="container">
|
||
<view :class="{'touch-move-active': item.isTouchMove && title != '关注我的'}" class="touch-item " bindtouchstart="touchstart" bindtouchmove="touchmove" v-for="(item,index) in list" data-index="{{index}}" :key="index" @tap="gotoFriendPage(item)">
|
||
<view class="content_list f-fc">
|
||
<view class="cu-avatar round lg" :style="{backgroundImage:'url('+(item.photo || item.circle_avatar)+');'}"></view>
|
||
<view class="f-fcfs f-fdc m_ct">
|
||
<view class="flo_l f-fbc" style="width: 100%;">
|
||
<view class="m_name" style="flex: 1;">
|
||
<view class="font_28 flo_l color-333 ellipsis_1 bold" style="max-width: 40%;">
|
||
{{item.nickname}}
|
||
</view>
|
||
<view class="f-fbc font_28 flo_l ellipsis_1 {{item.sex == 1?'sel':''}}" style="margin-left: 6rpx;margin-top: 2rpx;">
|
||
<image src="https://image.fulllinkai.com/202410/29/2b0f7e89d27a96a9bf6b234360292e4b.png" mode="aspectFit" v-if="item.sex == 1" style="width: 38rpx;height: 38rpx;" class="flo_l"></image>
|
||
<image src="https://image.fulllinkai.com/202410/29/40b26d71cf2af9b1be0f874605c6ef2f.png" mode="aspectFit" v-else style="width: 38rpx;height: 38rpx;" class="flo_l"></image>
|
||
</view>
|
||
<view class="inline-block initStyle font_20" v-if="item.hidden_profile !== 'NONE'">资料已关闭</view>
|
||
</view>
|
||
</view>
|
||
<view class="font_28 flo_l color-333 ellipsis_1 _text">{{item.year}} {{item.city || ''}}</view>
|
||
<block v-if="type == 'friend'">
|
||
<view class="d_btn font_28 " @tap.stop="gotoNew(item)" >发消息</view>
|
||
</block>
|
||
<block v-else>
|
||
<block v-if="type==='marriage'">
|
||
<button @tap="shareGetKey(item,index)" class="btn text-center _item border text-center recommend font_24"
|
||
open-type="share">
|
||
<view class="u_user_right white font_24" >推给单身</view>
|
||
</button>
|
||
</block>
|
||
<block v-else>
|
||
<view class="font_28 _bc_icon1" v-if="item.is_mutual_follow == 1"></view>
|
||
<view class="font_28 _bc_icon" v-else></view>
|
||
</block>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
<view class="del" @tap.stop="deleteFn(item.id,index)" data-index="{{index}}">删除</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="noMore && list.length < 0" class="color-999 text-center margin-top">
|
||
暂无内容
|
||
</view>
|
||
<view v-if="default" class="listDefault" style="background-image:url('https://images.ufutx.com/202104/13/1737964f7c98cbf65d728137dc2792eb.png');"></view>
|
||
<pageScroll></pageScroll>
|
||
<block v-if="loading">
|
||
<view class="weui-loadmore">
|
||
<view class="weui-loading"></view>
|
||
<view class="weui-loadmore__tips" style="background: #f8f8f8">正在加载</view>
|
||
</view>
|
||
</block>
|
||
<block v-if="noMore">
|
||
<view class="weui-loadmore weui-loadmore_line weui-loadmore_dot">
|
||
<view class="weui-loadmore__tips weui-loadmore__tips_in-line weui-loadmore__tips_in-dot" style="background: #f8f8f8"></view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import wepy from '@wepy/core'
|
||
import { service } from '../../config.js'
|
||
import https from '../../mixins/https'
|
||
import base from '../../mixins/base'
|
||
|
||
wepy.page({
|
||
mixins: [base, https],
|
||
data: {
|
||
loaded: false,
|
||
init: false,
|
||
title: '',
|
||
mylibs: [],
|
||
list: [],
|
||
activeIndex: 0,
|
||
sliderOffset: 0,
|
||
sliderLeft: 0,
|
||
sliderWidth: 180,
|
||
screenWidth: 360,
|
||
page: 1,
|
||
noMore: false,
|
||
loading: false,
|
||
inputShowed: false,
|
||
inputVal: '',
|
||
type: '',
|
||
default: false,
|
||
isTouchMove: false,
|
||
data_v: null,
|
||
data_v2: null,
|
||
is_share_id: '', // 判断分享类型
|
||
share_id: '',
|
||
share_image: ''
|
||
},
|
||
|
||
onLoad(e) {
|
||
let that = this
|
||
console.log(e, 'e====')
|
||
that.type = e.type
|
||
that.list = []
|
||
if (that.type == 'fans') {
|
||
that.title = '关注我的'
|
||
wx.setNavigationBarTitle({title: '粉丝'})
|
||
} else if (that.type == 'friend') {
|
||
that.title = '好友'
|
||
wx.setNavigationBarTitle({title: '好友'})
|
||
} else { // attention
|
||
that.title = '关注'
|
||
wx.setNavigationBarTitle({title: '关注'})
|
||
}
|
||
that.page = 1
|
||
that.getLibraries()
|
||
},
|
||
|
||
onShow() {
|
||
},
|
||
|
||
onPullDownRefresh() {
|
||
this.page = 1
|
||
this.getLibraries()
|
||
},
|
||
onPageScroll(res) {
|
||
|
||
},
|
||
onReachBottom() {
|
||
let vm = this
|
||
setTimeout(() => {
|
||
vm.getLibraries()
|
||
}, 200)
|
||
},
|
||
onShareAppMessage(res) {
|
||
let that = this
|
||
let openid = wx.getStorageSync('openid')
|
||
let fromUserID = wx.getStorageSync('user_id')
|
||
console.log(that.is_share_id, 'is_share_id-')
|
||
if (!that.is_share_id) {
|
||
let url = `/pages/tabBar/welcome?from_openid=${openid}&share_user_id=${that.id}&from_user_id=${fromUserID}`
|
||
|
||
console.log(url)
|
||
return {
|
||
title: '向你推荐《福恋》',
|
||
path: url,
|
||
imageUrl: 'https://images.ufutx.com/202004/29/baac955e5878e0cb03c17eef0c92f473.jpeg',
|
||
success: function(res) {
|
||
wx.showToast({
|
||
title: '转发成功',
|
||
icon: 'success',
|
||
duration: 1500
|
||
})
|
||
var shareTickets = res.shareTickets
|
||
if (shareTickets.length == 0) {
|
||
return false
|
||
}
|
||
},
|
||
fail: function(res) {
|
||
// 转发失败
|
||
}
|
||
}
|
||
} else {
|
||
that.is_share_id = ''
|
||
let url = `/pages/home/information?id=${that.share_id}&from_openid=${openid}&share_user_id=${that.share_id}&from_user_id=${fromUserID}`
|
||
return {
|
||
title: '觉得Ta很不错，可以认识一下',
|
||
path: url,
|
||
imageUrl: that.share_image,
|
||
success: function(res) {
|
||
wx.showToast({
|
||
title: '转发成功',
|
||
icon: 'success',
|
||
duration: 1500
|
||
})
|
||
var shareTickets = res.shareTickets
|
||
if (shareTickets.length == 0) {
|
||
return false
|
||
}
|
||
},
|
||
fail: function(res) {
|
||
// 转发失败
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
getLibraries(keyword) {
|
||
let _this = this
|
||
_this.loading = true
|
||
_this.noMore = false
|
||
_this.default = false
|
||
let url = service.libraries
|
||
if (_this.type == 'fans') {
|
||
url = service.followers
|
||
} else if (_this.type == 'friend') {
|
||
url = service.host + '/friend/list'
|
||
} else {
|
||
url = service.host + '/follow/list'
|
||
}
|
||
this.$get({
|
||
url: url,
|
||
data: {
|
||
page: this.page,
|
||
keyword: this.inputVal
|
||
}
|
||
}).then(({code, data}) => {
|
||
_this.init = true
|
||
_this.noMore = false
|
||
_this.loading = false
|
||
if (!data.data || (data.data.length == 0 && data.current_page == 1)) {
|
||
_this.default = true
|
||
_this.list = []
|
||
return
|
||
}
|
||
if (data.current_page > data.last_page) {
|
||
_this.noMore = true
|
||
_this.loading = false
|
||
return
|
||
}
|
||
data = data.data.map(item => {
|
||
item.isTouchMove = false
|
||
return item
|
||
})
|
||
for (var i = 0; i < data.length; i++) {
|
||
if (data[i].pivot && data[i].pivot.created_at) {
|
||
data[i].pivot.created_at = data[i].pivot.created_at.split(' ', 1)
|
||
}
|
||
}
|
||
|
||
if (this.data && data.length === 0) {
|
||
_this.noMore = true
|
||
_this.list = []
|
||
return
|
||
}
|
||
if (_this.list.length === 0 || _this.page === 1) {
|
||
_this.list = data.map(item => {
|
||
item.isTouchMove = false
|
||
return item
|
||
})
|
||
} else {
|
||
data.map(function (item, index) {
|
||
item.isTouchMove = false
|
||
_this.list.push(item)
|
||
})
|
||
}
|
||
_this.noMore = true
|
||
_this.page += 1
|
||
})
|
||
},
|
||
angle(start, end) {
|
||
var _X = end.X - start.X
|
||
var _Y = end.Y - start.Y
|
||
return 360 * Math.atan(_Y / _X) / (2 * Math.PI)
|
||
},
|
||
deletefriend(id, index) {
|
||
let than = this
|
||
wx.showModal({
|
||
title: '提示',
|
||
content: '是否确认删除该好友',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
than.$delete({url: service.host + '/friend/user/' + id}).then(({code, data}) => {
|
||
than.$showToast('删除成功')
|
||
than.list.splice(index, 1)
|
||
if (than.list.length == 0) {
|
||
than.default = true
|
||
than.loading = false
|
||
than.noMore = false
|
||
}
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消')
|
||
}
|
||
}
|
||
})
|
||
},
|
||
attention(id, index) {
|
||
let _this = this
|
||
wx.showModal({
|
||
title: '提示',
|
||
content: '是否确认删除该关注',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
_this.$post({url: service.follow + '/' + id}).then(({code, data}) => {
|
||
_this.list.splice(index, 1)
|
||
if (_this.list.length == 0) {
|
||
_this.default = true
|
||
_this.loading = false
|
||
_this.noMore = false
|
||
}
|
||
wx.showToast({
|
||
title: '删除成功',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消')
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
shareGetKey(item, index) {
|
||
console.log('---1')
|
||
this.is_share_id = '11'
|
||
this.share_id = item.user_id
|
||
this.share_image = item.photo || item.avatar
|
||
},
|
||
gotoNew(e) {
|
||
let item = e
|
||
this.$goto(`/pages/news/chitchat?id=${item.id}&name=${item.nickname}&type=${item.type}&pic=${item.photo}`)
|
||
},
|
||
touchstart (e) {
|
||
let vm = this
|
||
vm.list.forEach(function (v, i) {
|
||
if (v.isTouchMove) { v.isTouchMove = false }
|
||
})
|
||
vm.startX = e.$wx.changedTouches[0].clientX
|
||
vm.startY = e.$wx.changedTouches[0].clientY
|
||
},
|
||
touchmove (e) {
|
||
var that = this
|
||
that.index = e.$wx.currentTarget.dataset.index
|
||
var startX = that.startX
|
||
var startY = that.startY
|
||
var touchMoveX = e.$wx.changedTouches[0].clientX
|
||
var touchMoveY = e.$wx.changedTouches[0].clientY
|
||
var angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY })
|
||
|
||
that.list.forEach(function (v, i) {
|
||
v.isTouchMove = false
|
||
if (Math.abs(angle) > 30) return
|
||
if (i == that.index) {
|
||
if (touchMoveX > startX) {
|
||
v.isTouchMove = false
|
||
} else {
|
||
v.isTouchMove = true
|
||
}
|
||
}
|
||
})
|
||
},
|
||
deleteFn(id, index) {
|
||
if (this.title == '关注我的') {
|
||
} else if (this.title == '好友') {
|
||
this.deletefriend(id, index)
|
||
} else if (this.title == '关注') {
|
||
this.attention(id, index)
|
||
}
|
||
},
|
||
gotoFriendPage(item) {
|
||
console.log('------------------------', item)
|
||
let url = ''
|
||
if (item.type == 'single') {
|
||
url = '/pages/home/information?id=' + item.id
|
||
} else {
|
||
url = '/pages/home/informationV2?id=' + item.id
|
||
}
|
||
wx.navigateTo({url: url})
|
||
},
|
||
showInput() {
|
||
this.inputShowed = true
|
||
},
|
||
hideInput() {
|
||
this.inputVal = ''
|
||
this.inputShowed = false
|
||
},
|
||
clearInput() {
|
||
this.inputVal = ''
|
||
},
|
||
inputTyping(e) {
|
||
this.inputVal = e.$wx.detail.value
|
||
console.log(this.inputVal)
|
||
this.page = 1
|
||
this.getLibraries(this.inputVal)
|
||
},
|
||
tabClick(e) {
|
||
this.sliderOffset = e.$wx.currentTarget.offsetLeft
|
||
this.activeIndex = e.$wx.currentTarget.id
|
||
this.getLibraries()
|
||
},
|
||
goto(url) {
|
||
wx.navigateTo({url: url})
|
||
},
|
||
getSearch(value) {
|
||
this.page = 1
|
||
this.inputVal = value
|
||
this.getLibraries()
|
||
}
|
||
}
|
||
|
||
})
|
||
|
||
</script>
|
||
|
||
<style lang="less">
|
||
page{
|
||
background: #f8f8f8;
|
||
}
|
||
.initStyle{
|
||
background: #999999;
|
||
color: white;
|
||
padding: 0 10rpx;
|
||
border-radius: 22rpx;
|
||
align-items: center; /*定义body的元素垂直居中*/
|
||
margin-bottom: 4rpx;
|
||
vertical-align:text-bottom;
|
||
}
|
||
.listDefault{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
margin: auto;
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
background-size: cover;
|
||
background-position: center;
|
||
vertical-align: middle;
|
||
}
|
||
.container {
|
||
.touch-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 92%;
|
||
height: 158rpx;
|
||
overflow: hidden;
|
||
padding-left: 30rpx;
|
||
background: #fff;
|
||
margin: auto;
|
||
margin-top: 10rpx;
|
||
margin-bottom: 18rpx;
|
||
border-radius: 22rpx;
|
||
position: relative;
|
||
}
|
||
.cu-avatar{
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
}
|
||
._text{
|
||
margin-top: 6rpx;
|
||
font-weight: 400;
|
||
}
|
||
.d_btn{
|
||
width: 112rpx;
|
||
height:50rpx;
|
||
background: #FFF4F7;
|
||
border-radius: 32rpx;
|
||
color: #F33B6C;
|
||
text-align: center;
|
||
line-height: 50rpx;
|
||
font-weight: 400;
|
||
position: absolute;
|
||
right: 6%;
|
||
top: 36%;
|
||
}
|
||
.recommend{
|
||
position: absolute;
|
||
right: 6%;
|
||
top: 35%;
|
||
width: 122rpx;
|
||
height: 48rpx;
|
||
line-height: 48rpx;
|
||
background: linear-gradient(71deg, #DA96FF 0%, #BD64EE 100%);
|
||
border-radius: 33rpx;
|
||
}
|
||
._bc_icon,._bc_icon1{
|
||
width: 156rpx;
|
||
height:58rpx;
|
||
position: absolute;
|
||
right: 6%;
|
||
top: 35%;
|
||
background-image: url("https://image.fulllinkai.com/202203/31/90511e4a303fa640ef24e2ed79bc4e28.png");
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
background-size: contain;
|
||
}
|
||
._bc_icon{background-image: url("https://image.fulllinkai.com/202203/31/a5474c5766c2172f0705ea62a43bdf15.png");}
|
||
}
|
||
.content_list {
|
||
//display: flex;
|
||
width: 100%;
|
||
height: 100%;
|
||
margin-right: 0;
|
||
-webkit-transition: all 0.4s;
|
||
transition: all 0.4s;
|
||
-webkit-transform: translateX(90px);
|
||
transform: translateX(90px);
|
||
margin-left: -90px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
.userMessageBox{
|
||
margin-top: 2rpx;
|
||
margin-left: 16rpx;
|
||
.name{
|
||
width: 400rpx;
|
||
font-weight: 500;
|
||
}
|
||
.userMessage{
|
||
width: 524rpx;
|
||
}
|
||
}
|
||
.unreadBox{
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 0;
|
||
overflow: hidden;
|
||
.lastTime{
|
||
margin-top: 10rpx;
|
||
}
|
||
.unreadNum, .unreadNum_1{
|
||
float: right;
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 50%;
|
||
font-size: 20rpx;
|
||
//background: #f1013D;
|
||
color: #fff;
|
||
margin-top: 12rpx;
|
||
}
|
||
.unreadNum_1{
|
||
width: 44rpx;
|
||
border-radius: 14rpx;
|
||
}
|
||
}
|
||
.m_ct {
|
||
margin-left: 20rpx;
|
||
flex: 1;
|
||
margin-right: 30rpx;
|
||
border-bottom: 2rpx solid #F5F5F5;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.del {
|
||
background-color: #f1013D;
|
||
width: 90px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
-webkit-transform: translateX(90px);
|
||
transform: translateX(90px);
|
||
-webkit-transition: all 0.4s;
|
||
transition: all 0.4s;
|
||
}
|
||
.touch-move-active .content_list,
|
||
.touch-move-active .del {
|
||
-webkit-transform: translateX(0);
|
||
transform: translateX(0);
|
||
}
|
||
</style>
|
||
<config>
|
||
{
|
||
navigationBarTitleText: '好友',
|
||
enablePullDownRefresh: false,
|
||
backgroundColorTop: '#f2f2f2',
|
||
backgroundColorBottom: '#f2f2f2',
|
||
usingComponents: {
|
||
tabSearchV2: '~@/components/tabSearchV2',
|
||
pageScroll: '~@/components/pageScroll',
|
||
}
|
||
}
|
||
</config>
|