金诚优选前端代码
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.
 
 
 
 
 

259 lines
6.9 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>
<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 style="height: 40rpx;"></view>
</view>
</template>
<script>
export default {
data() {
return {
user_id: 0,
page: 1,
page_size: 15,
discover_info: ''
}
},
onLoad(e) {
this.user_id = e.user_id;
this.loginList();
},
methods: {
//关注
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
});
});
},
//点赞发现
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.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
});
});
}else {
this.$msg('你还未登录,请前往登录!');
}
},
goDetails(id) {
this.$url('/pages/discover/discoverdetails?discover_id='+id)
},
//登录时的发现列表
loginList() {
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;
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>