You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
318 lines
8.8 KiB
318 lines
8.8 KiB
<template>
|
|
<view>
|
|
<lf-nav :spreadOut="true" :showIcon="true" bgColor="#F3F8F8" title="个人主页"></lf-nav>
|
|
<view class="user-top" v-if="$isRight(discover_info)">
|
|
<view class="lf-row-between lf-w-100">
|
|
<view class="lf-flex">
|
|
<view class="tag-father">
|
|
<image :src="discover_info.avatar" mode="aspectFill" class="head-img"></image>
|
|
<view class="head-tag">V</view>
|
|
</view>
|
|
<view class="lf-flex-column lf-m-l-20">
|
|
<text class="lf-font-42 lf-color-black lf-font-bold">{{discover_info.username}}</text>
|
|
<text class="lf-font-28 lf-color-black">{{discover_info.my_follow_count}}关注 | {{discover_info.follow_me_count}}粉丝</text>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<button class="head-btn" v-if="discover_info.is_follow == true" @click="payAttention()">已关注</button>
|
|
<button class="head-btn" v-if="discover_info.is_follow == false" @click="payAttention()">关注</button>
|
|
<view v-if="discover_info.is_follow == -1"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<scroll-view :style="{height: autoHeight}" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="isRefresher"
|
|
@scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
|
|
<view class="lf-m-32" v-for="(item,index) in discover_info.list.data" :key="index" @click="goDetails(item.id)">
|
|
<view class="lf-font-48 lf-color-black lf-font-bold">
|
|
{{item.create_time[0]}}
|
|
</view>
|
|
<view class="lf-color-777 lf-font-24">
|
|
{{item.create_time[1]}}
|
|
</view>
|
|
<view class="lf-flex-wrap lf-m-t-20">
|
|
<image v-for="(picture,index2) in item.attachs" :key="index2" class="qzone-img" :src="picture.url" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="lf-m-t-30 lf-row-between lf-p-l-50 lf-p-r-50">
|
|
<view class="lf-row-center" @click.stop="addLike(item.id)">
|
|
<text class="lf-iconfont icon-xihuanlike lf-color-price" v-if="item.is_like"></text>
|
|
<text class="lf-iconfont icon-xihuan" v-else></text>
|
|
<text class="lf-font-24 lf-color-777 lf-m-l-10">{{item.likes_count}}</text>
|
|
</view>
|
|
<view class="lf-row-center">
|
|
<text class="lf-iconfont icon-chakan"></text>
|
|
<text class="lf-font-24 lf-color-777 lf-m-l-10">{{item.view_count}}</text>
|
|
</view>
|
|
<view class="lf-row-center">
|
|
<text class="lf-iconfont icon-pinglun-"></text>
|
|
<text class="lf-font-24 lf-color-777 lf-m-l-10">{{item.comments_count}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 空数据的情况 -->
|
|
<view class="loading-more">
|
|
<text v-if="discover_info.list.data.length"
|
|
:class="{'loading-more-text': loadingClass}">{{ loadingText }}</text>
|
|
<lf-nocontent v-else></lf-nocontent>
|
|
</view>
|
|
</scroll-view>
|
|
<view style="height: 40rpx;"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
user_id: 0,
|
|
page: 1,
|
|
page_size: 15,
|
|
discover_info: '',
|
|
isPage: true,
|
|
loadingClass: true,
|
|
loadingText: '正在加载中',
|
|
isRefresher: false,
|
|
scrollH: 0,
|
|
nav_height: 0,
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
let info = uni.getSystemInfoSync();
|
|
this.scrollH = info.screenHeight;
|
|
this.user_id = e.user_id;
|
|
this.loginList();
|
|
},
|
|
computed: {
|
|
autoHeight(){
|
|
return `calc(${this.scrollH}px - ${this.nav_height}px - 460rpx)`;
|
|
}
|
|
},
|
|
methods: {
|
|
// scroll-view 下拉刷新
|
|
onRefresherrefresh(){
|
|
this.isRefresher = true;
|
|
this.refreshFn({type: 'scrollRefresh'});
|
|
},
|
|
//关注
|
|
payAttention() {
|
|
this.$http
|
|
.post({
|
|
api: 'api/discover/add_follow',
|
|
data: {
|
|
user_id: this.user_id
|
|
},
|
|
header: {
|
|
Authorization: this.$cookieStorage.get('user_token')
|
|
},
|
|
})
|
|
.then(res => {
|
|
if (res.data.code == 200) {
|
|
if (res.data.status) {
|
|
this.$msg(res.data.data);
|
|
this.loginList();
|
|
} else {
|
|
wx.showModal({
|
|
content: res.data.message,
|
|
showCancel: false
|
|
});
|
|
}
|
|
} else {
|
|
wx.showModal({
|
|
content: res.data.message,
|
|
showCancel: false
|
|
});
|
|
}
|
|
wx.hideLoading();
|
|
})
|
|
.catch(() => {
|
|
wx.hideLoading();
|
|
wx.showModal({
|
|
content: '请求失败',
|
|
showCancel: false
|
|
});
|
|
});
|
|
},
|
|
// 下拉刷新处理
|
|
refreshFn(options){
|
|
this.page = 1;
|
|
this.isPage = true;
|
|
this.loadingClass = true;
|
|
this.discover_info.list.data = [];
|
|
this.loadingText = '正在加载中';
|
|
this.loginList(options);
|
|
},
|
|
// 页面触底，加载下一页
|
|
onScrolltolower(){
|
|
if(this.isPage){
|
|
this.page = this.page + 1;
|
|
this.loginList();
|
|
}
|
|
},
|
|
//点赞发现
|
|
addLike(id) {
|
|
let user_info = this.$cookieStorage.get('user_token');
|
|
if(user_info) {
|
|
this.$http
|
|
.post({
|
|
api: 'api/discover/like',
|
|
data: {
|
|
discover_id: id
|
|
},
|
|
header: {
|
|
Authorization: this.$cookieStorage.get('user_token')
|
|
},
|
|
})
|
|
.then(res => {
|
|
if (res.data.code == 200) {
|
|
if (res.data.status) {
|
|
this.refreshFn({type: 'scrollRefresh'});
|
|
} else {
|
|
wx.showModal({
|
|
content: res.data.message || '请下拉页面刷新重试',
|
|
showCancel: false
|
|
});
|
|
}
|
|
} else {
|
|
wx.showModal({
|
|
content: res.data.message || '请下拉页面刷新重试',
|
|
showCancel: false
|
|
});
|
|
}
|
|
wx.hideLoading();
|
|
})
|
|
.catch(() => {
|
|
wx.hideLoading();
|
|
wx.showModal({
|
|
content: '请求失败',
|
|
showCancel: false
|
|
});
|
|
});
|
|
}else {
|
|
this.$msg('你还未登录,请前往登录!');
|
|
}
|
|
},
|
|
goDetails(id) {
|
|
this.$url('/pages/discover/discoverdetails?discover_id='+id)
|
|
},
|
|
//登录时的发现列表
|
|
loginList(options = {}) {
|
|
this.$http
|
|
.get({
|
|
api: 'api/discover/user/'+this.user_id,
|
|
data: {
|
|
page: this.page,
|
|
page_size: this.page_size
|
|
},
|
|
header: {
|
|
Authorization: this.$cookieStorage.get('user_token')
|
|
},
|
|
})
|
|
.then(res => {
|
|
if (res.data.code == 200) {
|
|
if (res.data.status) {
|
|
this.discover_info = res.data.data;
|
|
let isPage = res.data.data.list.last_page == this.page?false:true;
|
|
this.isPage = isPage;
|
|
if(!isPage) {
|
|
this.loadingClass = false;
|
|
this.loadingText = '没有更多数据啦~';
|
|
}
|
|
if(options.type == 'pageRefresh') {
|
|
uni.stopPullDownRefresh();
|
|
}else if(options.type == 'scrollRefresh') {
|
|
this.isRefresher = false;
|
|
}
|
|
if(this.page == 1) {
|
|
this.discover_info.list.data = res.data.data.list.data;
|
|
}else {
|
|
this.discover_info.list.data.push(...res.data.data.list.data);
|
|
}
|
|
console.log('登录时的发现列表',this.discover_info);
|
|
} else {
|
|
wx.showModal({
|
|
content: res.data.message || '请下拉页面刷新重试',
|
|
showCancel: false
|
|
});
|
|
}
|
|
} else {
|
|
wx.showModal({
|
|
content: res.data.message || '请下拉页面刷新重试',
|
|
showCancel: false
|
|
});
|
|
}
|
|
wx.hideLoading();
|
|
})
|
|
.catch(() => {
|
|
wx.hideLoading();
|
|
wx.showModal({
|
|
content: '请求失败',
|
|
showCancel: false
|
|
});
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: white;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.tag-father {
|
|
position: relative;
|
|
}
|
|
.head-tag {
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
border-radius: 50%;
|
|
background-color: #15716E;
|
|
border: 1rpx solid #FFFFFF;
|
|
position: absolute;
|
|
left: 76rpx;
|
|
top: 86rpx;
|
|
z-index: 99;
|
|
}
|
|
.qzone-img {
|
|
width: 220rpx;
|
|
height: 220rpx;
|
|
border-radius: 10rpx;
|
|
margin-right: 12rpx;
|
|
&:nth-child(3n) {
|
|
margin-right: 0;
|
|
}
|
|
&:nth-child(n + 4) {
|
|
margin-top: 12rpx;
|
|
}
|
|
}
|
|
.user-top {
|
|
background-color: #F3F8F8;
|
|
height: 236rpx;
|
|
padding: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.head-img {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 50%;
|
|
}
|
|
.head-btn {
|
|
width: 160rpx;
|
|
height: 70rpx;
|
|
background: #15716E;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
color: white;
|
|
justify-content: center;
|
|
border-radius: 35rpx;
|
|
}
|
|
</style>
|