615 lines
17 KiB
Vue
615 lines
17 KiB
Vue
<template>
|
|
<view class="my">
|
|
|
|
<!-- 标题栏和状态栏占位符 -->
|
|
<view class="status-bar-height" style="background-color: #161823;"></view>
|
|
<view class="status-bar-height-height" style="background-color: #161823;"></view>
|
|
|
|
<view @click="uploadImages" class="banner" :style="'background-image: url('+memberData.userAvatar+');'"></view>
|
|
|
|
<view class="user-info color-w flex flex-between">
|
|
<view class="header">
|
|
<image :src="memberData.userIcon" class="round" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="right" v-if="showFlag && userFlag">
|
|
<text class="btn" @tap="sendVideo">
|
|
<text class="iconfont icon-shipin"></text>
|
|
</text>
|
|
<text class="btn" @tap="commentMsg">
|
|
<text class="iconfont"></text>
|
|
</text>
|
|
<text class="btn" @tap="settingMsg">
|
|
<text class="iconfont"></text>
|
|
</text>
|
|
</view>
|
|
<view class="right" v-if="showFlag && !userFlag">
|
|
<text class="btn" @tap="guanZhuByUser(1)" v-if="likeItsByUserId">
|
|
取关
|
|
<text class="iconfont icon"></text>
|
|
</text>
|
|
<text class="btn" style="background-color: #dd2d70;border-color: #c82866;" @tap="guanZhuByUser(0)" v-else>
|
|
关注
|
|
<text class="iconfont icon"></text>
|
|
</text>
|
|
<text class="btn" @tap="jiGuangMsg">
|
|
私信
|
|
<text class="iconfont icon"></text>
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- username -->
|
|
<view class="user-detail">
|
|
<view class="left flex">
|
|
<text class="color-w font36"> {{memberData.userNickName}} </text>
|
|
<!-- 签名 -->
|
|
<text class="font28 color-b9">{{memberData.userNote ? memberData.userNote:"未填写个性签名"}} </text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- -->
|
|
<view class="tabs">
|
|
<view class="flex flex-center">
|
|
<text class="number">{{userData.dianZan}}</text>
|
|
<text class="font30 color-b9">获赞</text>
|
|
</view>
|
|
<view class="flex flex-center">
|
|
<text class="number">{{userData.guanZhu}}</text>
|
|
<text class="font30 color-b9">关注</text>
|
|
</view>
|
|
<view class="flex flex-center">
|
|
<text class="number">{{userData.fenSi}}</text>
|
|
<text class="font30 color-b9">粉丝</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 广告 -->
|
|
<view class="adv flex flex-center">
|
|
<image :src="staticUrl + 'video/adv.png'" mode="widthFix"></image>
|
|
<!-- <image v-else :src="subjectByKey.pic" @click="navByNotices(subjectByKey.id)" mode="widthFix"></image> -->
|
|
</view>
|
|
|
|
<!-- tab -->
|
|
<view class="list tabs">
|
|
<view class="item" :class="index==tabCurrentIndex?'active':''" v-for="(item,index) in navList" :key="index" @tap="tabSelect" :data-id="index">
|
|
<text class="">{{item.text}} {{item.number}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab" :style="{height:videoAllHeight+'px'}" style="background-color: #161823;">
|
|
<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
|
|
|
|
<scroll-view :style="{height:videoAllHeight+'px'}" scroll-y>
|
|
<view v-if="tabItem.videoList.length > 0 && tabItem.type != 1" class="grid">
|
|
<block v-for="(item, index) in tabItem.videoList" :key="index">
|
|
<view @click="showVideo(tabItem.type,index)" class="grid-item" :style="{height:videoHeight+'px'}">
|
|
<image :src="item.image" mode="heightFix" class="img"></image>
|
|
<view style="position: relative;left: 20upx;bottom: 70upx;">
|
|
<image :src="staticUrl + 'video/video_love.png'" style="width: 50upx;height: 50upx;"></image>
|
|
<text style="color: #ffffff;font-weight: bold;font-size: 32upx;">{{item.likes}}</text>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<view v-if="tabItem.videoList.length > 0 && tabItem.type == 1" class="flex flex-column">
|
|
<view class="cu-item" style="background-color: #161823;" v-for="(item, index) in tabItem.videoList" :key="index" v-if="item.likeId > 0">
|
|
<view class="flex flex-align-center">
|
|
<view @click="showByLikeUser(item.videoUserId)" class="cu-avatar" :style="'background-image:url('+item.icon+');'"></view>
|
|
<view @click="showByLikeUser(item.videoUserId)" class="content">
|
|
<view class="font32" style="color: #ffffff;font-weight: bold;">{{item.nickname}}</view>
|
|
<view class="flex flex-align-center font26 color-b9">
|
|
<view class="text-cut" style="width: 40%;">
|
|
获赞: <text style="color: #ffffff;margin-left: 10upx;">{{item.dianZan}}</text>
|
|
</view>
|
|
<view class="text-cut" style="width: 40%;">
|
|
粉丝: <text style="color: #ffffff;margin-left: 10upx;">{{item.fenSi}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="time">
|
|
<text>关注时间: {{myImUtils.formatDateTime(item.createTime, "Y-m-d")}}</text>
|
|
</view>
|
|
<view class="action" v-if="showFlag && userFlag && item.likeId > 0">
|
|
<text @click="cancelGuanZu(item.videoUserId,index)">取关</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<uni-load-more :status="tabItem.loadingType"></uni-load-more>
|
|
</scroll-view>
|
|
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<avatar style="background-color: #161823;" @upload="myUpload" ref="avatar"></avatar>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import url from '@/common/http/url.js';
|
|
import imUtils from '@/common/im/imTools.js';
|
|
import upload from "@/common/http/upload.js"
|
|
import publics from "@/common/utils/public.js"
|
|
import avatar from "@/components/yq-avatar/yq-avatar.vue";
|
|
|
|
|
|
export default {
|
|
components: {
|
|
avatar
|
|
},
|
|
data() {
|
|
return {
|
|
staticUrl: getApp().staticUrl,
|
|
subjectByKey:null,
|
|
myImUtils:imUtils,
|
|
avatarFlag:'display: none;',
|
|
avatarDefoutUrl:'https://yunjulai-oss.oss-cn-shenzhen.aliyuncs.com/defout/jiuYinUserImage.jpg',
|
|
showOnByStatus:false,
|
|
showFlag: false,
|
|
userFlag: false,
|
|
likeItsByUserId: false,
|
|
userId:0,
|
|
videoAllHeight:400,
|
|
videoHeight:300,
|
|
TabCur: 0,
|
|
scrollLeft: 0,
|
|
memberData:{},
|
|
userData:{
|
|
dianZan:"-",
|
|
guanZhu:"-",
|
|
fenSi:"-"
|
|
},
|
|
tabCurrentIndex: 0,
|
|
navList: [
|
|
{
|
|
type: 0,
|
|
text: '作品',
|
|
loadingType: 'more',
|
|
pageNum:0,
|
|
number: "-",
|
|
videoList: []
|
|
},
|
|
{
|
|
type: 1,
|
|
text: '关注',
|
|
loadingType: 'more',
|
|
pageNum:0,
|
|
number: "-",
|
|
videoList: []
|
|
},
|
|
{
|
|
type: 2,
|
|
text: '喜欢',
|
|
loadingType: 'more',
|
|
pageNum:0,
|
|
number: "-",
|
|
videoList: []
|
|
}
|
|
],
|
|
tabList:[
|
|
{
|
|
name:'作品',
|
|
number: "-"
|
|
},
|
|
{
|
|
name:'关注',
|
|
number: "-"
|
|
},
|
|
{
|
|
name:'喜欢',
|
|
number: "-"
|
|
}
|
|
],
|
|
videoList: []
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
//计算屏幕宽度算出合理的高度
|
|
let systemInfo = uni.getSystemInfoSync();
|
|
let windowWidth = ((systemInfo.windowWidth)/3)-20;//三个一排减去空隙得到每个的宽度
|
|
let autoHeight = (windowWidth/3)*5;//采用比例为5:3
|
|
this.videoHeight = parseInt(autoHeight);//取整
|
|
|
|
if(options.userId){
|
|
this.userId = options.userId;
|
|
}
|
|
|
|
//计算高度
|
|
this.videoAllHeight = this.videoHeight;
|
|
|
|
//数据初始化
|
|
this.userVideoInit();
|
|
},
|
|
onShow() {
|
|
console.log(this.showOnByStatus);
|
|
if(this.showOnByStatus){
|
|
//数据初始化
|
|
this.pullDownRefreshMain();
|
|
}
|
|
// this.subjectDetailByKey();
|
|
},
|
|
methods:{
|
|
navByNotices(id){
|
|
this.$navigateTo("/pages/notice/details?id="+id);
|
|
},
|
|
async subjectDetailByKey(){
|
|
let _this = this;
|
|
let data = await this.$http('get', url.cms.subjectDetailKey, {key:"public_jiuyin_center",categoryId:1});
|
|
if(data){
|
|
_this.subjectByKey = data;
|
|
}
|
|
},
|
|
uploadImages(){
|
|
if(this.showFlag && this.userFlag){
|
|
// 关闭下拉刷新
|
|
const pages = getCurrentPages();
|
|
const page = pages[pages.length - 1];
|
|
const currentWebview = page.$getAppWebview();
|
|
currentWebview.setStyle({
|
|
pullToRefresh: {
|
|
support: false
|
|
}
|
|
});
|
|
|
|
this.avatarFlag = '';
|
|
upload.showAvatarModal(this, 750, 400)
|
|
}
|
|
},
|
|
async myUpload(rsp) {
|
|
// 开启下拉刷新
|
|
const pages = getCurrentPages();
|
|
const page = pages[pages.length - 1];
|
|
const currentWebview = page.$getAppWebview();
|
|
currentWebview.setStyle({
|
|
pullToRefresh: {
|
|
support: true
|
|
}
|
|
});
|
|
let that = this;
|
|
let res = upload.imgUpload(rsp)
|
|
if(res){
|
|
that.userAvatarUpdatae(res.cursorId,res.fileUrl);
|
|
}
|
|
},
|
|
async userAvatarUpdatae(id,url){
|
|
let that = this;
|
|
let res = await this.$http('post', url.interaction.updateJiuYinAvatar, {id:id},true);
|
|
that.memberData.userAvatar = url;
|
|
uni.hideLoading();
|
|
this.$msg("修改成功");
|
|
},
|
|
async userVideoInit(){
|
|
let that = this;
|
|
let res = await this.$http('get', url.interaction.userVideoInit, {userId:this.userId});
|
|
if(res.code === 200){
|
|
let data = res.data
|
|
if(!data.memberMap.userAvatar || data.memberMap.userAvatar.trim() == ''){
|
|
data.memberMap.userAvatar = that.avatarDefoutUrl;
|
|
}
|
|
that.memberData = data.memberMap;
|
|
that.userData.dianZan = data.dianZan;
|
|
that.userData.guanZhu = data.guanZhu;
|
|
that.userData.fenSi = data.fenSi;
|
|
|
|
that.navList[0].number = data.zuoPin;
|
|
that.navList[1].number = data.guanZhu;
|
|
that.navList[2].number = data.xiHuan;
|
|
|
|
that.userFlag = data.userFlag;
|
|
that.likeItsByUserId = data.likeItsByUserId;
|
|
|
|
that.showFlag = true;
|
|
|
|
that.getVideoList();
|
|
}
|
|
},
|
|
sendVideo(){
|
|
this.showOnByStatus = true;
|
|
this.$navigateTo("/pages/video/sendVideo");
|
|
},
|
|
jiGuangMsg(){
|
|
let that = this;
|
|
this.$navigateTo("../interaction/im-chat?title="+that.memberData.userNickName)
|
|
},
|
|
commentMsg(){
|
|
this.$navigateTo("/pages/video/video_comment");
|
|
},
|
|
settingMsg(){
|
|
this.showOnByStatus = true;
|
|
this.$navigateTo("/pages/setting/personal");
|
|
},
|
|
tabSelect(e) {
|
|
this.tabCurrentIndex = e.currentTarget.dataset.id;
|
|
//this.getVideoList();
|
|
},
|
|
//swiper 切换
|
|
changeTab(e) {
|
|
this.tabCurrentIndex = e.target.current;
|
|
this.getVideoList();
|
|
},
|
|
//下拉刷新
|
|
onPullDownRefresh() {
|
|
this.pullDownRefreshMain();
|
|
//this.getVideoList();
|
|
setTimeout(function() {
|
|
uni.stopPullDownRefresh();
|
|
}, 5000);
|
|
},
|
|
pullDownRefreshMain(){
|
|
this.navList[0].loadingType = 'more';
|
|
this.navList[1].loadingType = 'more';
|
|
this.navList[2].loadingType = 'more';
|
|
|
|
this.navList[0].videoList = [];
|
|
this.navList[1].videoList = [];
|
|
this.navList[2].videoList = [];
|
|
|
|
this.navList[0].pageNum = 0;
|
|
this.navList[1].pageNum = 0;
|
|
this.navList[2].pageNum = 0;
|
|
|
|
this.userVideoInit();
|
|
},
|
|
//加载更多
|
|
onReachBottom() {
|
|
this.getVideoList();
|
|
},
|
|
showByLikeUser(videoUserId){
|
|
uni.navigateTo({
|
|
url:'/pages/video/video_my?userId='+videoUserId
|
|
})
|
|
},
|
|
//取消关注
|
|
async cancelGuanZu(id,index){
|
|
let that = this;
|
|
that.followByUser(id,1);
|
|
that.navList[1].videoList[index].likeId = -1;
|
|
that.navList[1].number -= 1;
|
|
},
|
|
//关注、取消关注当前博主
|
|
async guanZhuByUser(type){
|
|
// type-0关注 1-取消关注
|
|
this.followByUser(this.userId,type);
|
|
publics.setGuanZhuDatasJiLu(this.userId,type);
|
|
},
|
|
//关注/取消关注
|
|
async followByUser(userId, type) {
|
|
let res = await this.$http('post', url.interaction.followByUserId, {
|
|
userId: userId,
|
|
type: type
|
|
});
|
|
this.userVideoInit();
|
|
},
|
|
//浏览视频
|
|
showVideo(type,index){
|
|
//保存数据到本地
|
|
let data;
|
|
if(type == 0){//作品
|
|
data = this.navList[0];
|
|
}else{//喜欢
|
|
data = this.navList[2];
|
|
}
|
|
data.userId = this.userId;
|
|
data.icon = this.memberData.userIcon;
|
|
data.nickname = this.memberData.userNickName;
|
|
data.index = index;
|
|
data.userFlag = this.userFlag;
|
|
this.showOnByStatus = true;
|
|
uni.setStorageSync("VideoByUserData",JSON.stringify(data));
|
|
this.$navigateTo("/pages/video/indexByUser");
|
|
},
|
|
async getVideoList() {
|
|
let that = this;
|
|
let navList = this.navList[this.tabCurrentIndex];
|
|
|
|
//计算高度
|
|
if(this.navList[this.tabCurrentIndex].videoList.length>0){
|
|
if(navList.type == 1){
|
|
this.videoAllHeight = this.navList[this.tabCurrentIndex].videoList.length*150;
|
|
}else{
|
|
let sizeLength = ((this.navList[this.tabCurrentIndex].videoList.length)/3);
|
|
if(sizeLength <= 1){
|
|
this.videoAllHeight = this.videoHeight+100;
|
|
}else{
|
|
sizeLength = sizeLength+"";
|
|
if(sizeLength.indexOf(".") != -1){
|
|
sizeLength = parseInt(sizeLength)+1;
|
|
}
|
|
this.videoAllHeight = (sizeLength*this.videoHeight)+100;
|
|
}
|
|
}
|
|
}
|
|
|
|
if(navList.loadingType == "noMore"){
|
|
uni.stopPullDownRefresh();
|
|
return;
|
|
}
|
|
this.navList[this.tabCurrentIndex].loadingType = 'loading';
|
|
|
|
let res = await this.$http('get', url.interaction.userVideoType, {userId:this.userId,type:navList.type,pageSize:navList.pageNum});
|
|
uni.stopPullDownRefresh();
|
|
if(res.code === 200){
|
|
let data = res.data
|
|
that.navList[that.tabCurrentIndex].videoList = [...that.navList[that.tabCurrentIndex].videoList,...data];
|
|
|
|
//计算高度
|
|
if(data && data.length > 0){
|
|
if(navList.type == 1){
|
|
that.videoAllHeight = that.navList[that.tabCurrentIndex].videoList.length*150;
|
|
}else{
|
|
let sizeLength = ((that.navList[that.tabCurrentIndex].videoList.length)/3);
|
|
if(sizeLength <= 1){
|
|
that.videoAllHeight = that.videoHeight+100;
|
|
}else{
|
|
sizeLength = sizeLength+"";
|
|
if(sizeLength.indexOf(".") != -1){
|
|
sizeLength = parseInt(sizeLength)+1;
|
|
}
|
|
that.videoAllHeight = (sizeLength*that.videoHeight)+100;
|
|
}
|
|
}
|
|
}
|
|
|
|
//判断是否还有数据
|
|
if(navList.type == 1){//关注
|
|
if(that.navList[that.tabCurrentIndex].videoList.length >= parseInt(that.navList[1].number)){
|
|
that.navList[that.tabCurrentIndex].loadingType = "noMore";
|
|
}else{
|
|
that.navList[that.tabCurrentIndex].loadingType = "more";
|
|
that.navList[that.tabCurrentIndex].pageNum += 1;
|
|
}
|
|
}else if(navList.type == 2){//喜欢
|
|
if(that.navList[that.tabCurrentIndex].videoList.length >= parseInt(that.navList[2].number)){
|
|
that.navList[that.tabCurrentIndex].loadingType = "noMore";
|
|
}else{
|
|
that.navList[that.tabCurrentIndex].loadingType = "more";
|
|
that.navList[that.tabCurrentIndex].pageNum += 1;
|
|
}
|
|
}else{//作品
|
|
if(that.navList[that.tabCurrentIndex].videoList.length >= parseInt(that.navList[0].number)){
|
|
that.navList[that.tabCurrentIndex].loadingType = "noMore";
|
|
}else{
|
|
that.navList[that.tabCurrentIndex].loadingType = "more";
|
|
that.navList[that.tabCurrentIndex].pageNum += 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.my{
|
|
background-color: #161823;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
}
|
|
.banner{
|
|
width: 100vw;
|
|
height: 400upx;
|
|
background-size: 100% 100%;
|
|
}
|
|
.user-info{
|
|
.header{
|
|
padding: 20upx 0upx 0upx 60upx;
|
|
.round{
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.right{
|
|
.btn{
|
|
background-color: rgba(57,58,68,0.5);
|
|
color: #FFFFFF;
|
|
padding: 10upx 30upx;
|
|
margin: 0 8upx;
|
|
border: 1px solid rgba(217,210,194,0.3);
|
|
font-size: 30rpx;
|
|
.icon{
|
|
margin-left: 10rpx;
|
|
font-size: 38rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-detail{
|
|
border-bottom: 1px solid rgba(217,210,194,0.2);
|
|
padding: 10upx 0;
|
|
.left{
|
|
flex-direction: column;
|
|
padding: 0upx 10upx 0upx 40upx;
|
|
.number{
|
|
margin: 10upx 0;
|
|
}
|
|
}
|
|
}
|
|
.tabs{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
color: #FFFFFF;
|
|
padding: 20rpx;
|
|
.number{
|
|
font-weight: bold;
|
|
margin-right: 10rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
.list{
|
|
.item{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 28rpx;
|
|
width: 33.33%;
|
|
border-bottom: 2rpx solid #161823;
|
|
padding-bottom: 20rpx;
|
|
color: #999999;
|
|
}
|
|
.active{
|
|
color: #FFFFFF;
|
|
border-bottom: 6rpx solid #fff;
|
|
}
|
|
}
|
|
|
|
.adv{
|
|
padding: 20upx;
|
|
image{
|
|
width: 100%;
|
|
height: 50rpx;
|
|
}
|
|
}
|
|
|
|
.grid{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
&-item{
|
|
width: 32%;
|
|
margin-left: 10rpx;
|
|
margin-bottom: 10rpx;
|
|
.img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.cu-item{
|
|
padding: 20rpx 20rpx 0;
|
|
border-bottom: 2rpx solid #d5d4d7;
|
|
position: relative;
|
|
.cu-avatar{
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
margin-right: 16rpx;
|
|
background-size: cover;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
.content{
|
|
width: 100%;
|
|
}
|
|
.time{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
font-size: 26rpx;
|
|
color: #a5a5a5;
|
|
}
|
|
.action{
|
|
position: absolute;
|
|
right: 20rpx;
|
|
top: 40rpx;
|
|
color: #fc1e1e;
|
|
border: solid 1px #fc1e1e;
|
|
border-radius: 30%;
|
|
padding: 6upx 20upx;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
</style>
|