abu/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tabs

Browse Source
This commit is contained in:
abu 2025-03-19 15:33:19 +08:00
parent b4965d0068
commit 7941d55a93
5 changed files with 116 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
api/vlog.js
View File

@ -12,12 +12,18 @@ import api from "@/config/api.js";
/**
* 短视频列表-true
*/
export function vlogList(page, pageSize) {
export function vlogList(page, pageSize,userId='',search='') {
let data = {
page,
pageSize,
userId,
search
}
return http.request({
url: api.vlog + "/vlog/indexList",
method: Method.GET,
needToken: false,
params: { page, pageSize },
params: data,
});
}

20
components/vlog/videoComp.nvue
View File

@ -167,11 +167,10 @@
// 查询首页短视频列表
this.displayVideoPaging(this.page + 1, true);
this.videoContext = uni.createVideoContext("myVideo",this.$refs.myVideo);
console.log(this.videoContext)
},
mounted() {
var videoContext = uni.createVideoContext("myVideo",this);
console.log(videoContext)
this.videoContext = videoContext;
onReady() {
},
watch: {
refreshList(value) {
@ -187,7 +186,7 @@
this.contentOffsetY = 0;
},
playStatus: function(val) {
playStatus(val) {
var me = this;
if (!val) {
@ -235,7 +234,7 @@
},
async likeOrDislikeVlog(isLike) {
var me = this;
var myUserInfo = storage.getVlogUserInfo()
var myUserInfo = storage.getVlogUserInfo()||null
var userId = myUserInfo.id;
var currentIndex = me.playerCur;
var vlog = me.playerList[currentIndex];
@ -250,6 +249,7 @@
return;
}
var result = await vlogLike({userId,vlogerId:vlog.vlogerId,vlogId:vlog.vlogId})
console.log(result)
if (result.data.status == 200) {
me.reLikePlayList(vlog.vlogId);
me.refreshVlogCounts();
@ -463,16 +463,13 @@
},
scroll: function(e) {
console.log(e)
let originalIndex = this.currentIndex;
let isNext = false;
if (e.contentOffset.y < this.contentOffsetY) {
isNext = true;
}
this.contentOffsetY = Number(e.contentOffset.y);
console.log(this.contentOffsetY)
var num = this.playerList.length;
console.log(num)
if(num>0){
var ht = Number(e.contentSize.height)
console.log(ht)
@ -482,7 +479,6 @@
}else{
this.currentIndex=0
}
console.log(this.currentIndex)
this.onchange(this.currentIndex);
this.times = new Date().getTime();
@ -505,13 +501,14 @@
if (myUserInfo != null) {
userId = myUserInfo.id;
}
const result = await vlogList(page,10).catch(err=>{
const result = await vlogList(page,10,userId).catch(err=>{
uni.stopPullDownRefresh();
})
uni.stopPullDownRefresh();
console.log(result)
if (result.data.status == 200) {
let vlogList = result.data.data.rows;
// 缺：该条视频是否被喜欢过
let totalPage = result.data.data.total;
// me.playerList = vlogList;
if (needClearList) {
@ -556,7 +553,6 @@
// 设置当前vlog的信息
setThisVlogInfo() {
var me = this;
var serverUrl = app.globalData.serverUrl;
var currentIndex = me.playerCur;
var vlog = me.playerList[currentIndex];
this.thisVlog = vlog;

20
components/vlog/videoFollowComp.nvue
View File

@ -260,19 +260,20 @@
times: new Date().getTime(),
objectFit: "fill",
isIOS: uni.getSystemInfoSync().platform == "ios"
isIOS: uni.getSystemInfoSync().platform == "ios"?true:false
}
},
created() {
console.log('flowVd')
console.log(uni.getSystemInfoSync().platform)
this.isIOS=uni.getSystemInfoSync().platform == "ios"?true:false
if(!this.isIOS) {
this.objectFit = "cover";
}
// 查询首页短视频列表
this.displayVideoPaging(this.page + 1, true);
var videoContext = uni.createVideoContext('myFollowVideo');
this.videoContext = videoContext;
this.videoContext = uni.createVideoContext("myFollowVideo",this.$refs.myFollowVideo);
console.log(this.videoContext)
},
watch: {
refreshList(value) {
@ -288,14 +289,19 @@
this.contentOffsetY =0;
},
playFollowStatus: function(val) {
playFollowStatus(val) {
var me = this;
try {
if (!val) {
me.videoContext.pause();
} else {
me.videoContext.play();
}
} catch (error) {
//TODO handle the exception
console.log(error)
}
}
},
methods: {

163
pages/tabbar/vlog/index.nvue
View File

@ -1,19 +1,19 @@
<template>
<view class="page" :id="pageId">
<view class="mypage" :id="pageId">
<!-- <list :id="pageId" class="page" :bounce="true" isSwiperList="true"> -->
<!-- 左中右的三个页面切换, 依次是: 附近 - 关注 - 推荐 -->
<swiper ref="swiper1" id="tab-bar-view" style="my-swiper" :style="{height: screenHeight + 'px'}"
:current="curIndex" @change="changeTopTab" @transition="onswiperscroll" @animationfinish="animationfinish"
@onAnimationEnd="animationfinish">
<swiper-item>
<!-- <swiper-item>
<view class="near-by" :style="{height: screenHeight+'px'}">
<text ref="fujin" :pid="0" :parentId="pageId" class="warn-info">暂未开放，敬请期待!</text>
</view>
</swiper-item>
</swiper-item> -->
<swiper-item>
<view v-if="myUserInfo == null" class="my-follow" :style="{height: screenHeight+'px'}">
<!-- <view v-if="myUserInfo == null" ref="videoFollowComp" class="my-follow" :style="{height: screenHeight+'px'}">
<text class="warn-info">请登录后查看！</text>
</view>
</view> -->
<video-follow-comp ref="videoFollowComp" :pid="1" :parentId="pageId" :screenHeight="screenHeight"
:playFollowStatus="playFollowStatus" :videoList="videoList" :refreshList="refreshList"
:pagingList="pagingList" @showLoading="showLoading" @hideLoading="hideLoading"
@ -50,7 +50,7 @@
<view style="flex-direction: row;flex: 1;justify-content: space-around;">
<view class="uni-tab-item" v-for="(tab,index) in tabList" :key="tab.id" :id="tab.id"
:ref="'tabitem'+index" :data-id="index" :data-current="index" @click="ontabtap">
<text class="uni-tab-item-title"
<text class="uni-tab-item-title scroll-view-animation"
:class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
</view>
</view>
@ -60,7 +60,7 @@
</view>
</view>
</scroll-view>
<view class="tab-bar-line"></view>
<!-- <view class="tab-bar-line">tab-bar-line</view> -->
</view>
<image class="header-right-search normal-img" src="/static/images/icon-search.png" @click="goSearch">
@ -108,7 +108,7 @@
isLoading: false,
statusBarHeight: system.statusBarHeight,
screenHeight: system.screenHeight,
curIndex: 2,
curIndex: 1,
playStatus: false,
playFollowStatus: false,
videoList: [], // 首页一开始查询所得的默认视频列表
@ -116,58 +116,57 @@
pagingList: [], // 分页list
refresh: 0, // 从me页面传来的refresh，用于退出登录后重新刷新当前页的视频
/////////////////
tabList: [], //tabs内容,'fujin','videoFollowComp','videoComp'
pageList: ['videoFollowComp', 'videoComp'],
tabList: [
{
id: "tab" + 0,
name: '关注',
pageid: 1
},
{
id: "tab" + 1,
name: '推荐',
pageid: 2
}
], //tabs内容,'fujin','videoFollowComp','videoComp'
indicatorLineLeft: 0,
indicatorLineWidth: 0,
cacheTab: [],
scrollInto: "",
pageId: "page",
tabIndex: 2,
tabIndex: 1,
}
},
onLoad() {
let have = plus.navigator.hasNotchInScreen(); // 判断是否有下巴
let tabs = [{
name: '附近',
value: 'fujin',
id: 1
}, {
name: '关注',
value: 'videoFollowComp',
id: 2
}, {
name: '推荐',
value: 'videoComp',
id: 3
}]
for (var i = 0; i < tabs.length; i++) {
this.tabList.push({
id: "tab" + i,
name: tabs[i].name,
pageid: tabs[i].id
})
}
onReady() {
this._lastTabIndex = 0;
this.swiperWidth = 0;
this.tabbarWidth = 0;
this.tabListSize = {};
this._touchTabIndex = 0;
this._headHeight = 100;
var timer = setTimeout(()=>{
this.selectorQuery();
clearTimeout(timer)
},100)
},
onTabItemTap: function(e) {
let tabIndex = e.index;
console.log(e)
// let tabIndex = e.index;
// this.playStatus = tabIndex === 0 ? true : false;
// 切换视频要做暂停或播放的判断
let me = this;
if (tabIndex == 0) {
// 虚位以待
} else if (tabIndex == 1) {
me.playStatus = false;
me.playFollowStatus = true;
} else if (tabIndex == 2) {
me.playStatus = true;
me.playFollowStatus = false;
}
// let me = this;
// if (tabIndex == 0) {
// me.playStatus = false;
// me.playFollowStatus = true;
// } else if (tabIndex == 2) {
// me.playStatus = true;
// me.playFollowStatus = false;
// }
},
onShow() {
let me = this;
this.myUserInfo = storage.getVlogUserInfo();
this.myUserInfo = storage.getVlogUserInfo() || null;
// 如果当前没有list, 则relaunch
if (this.$refs.videoComp != undefined) {
@ -180,10 +179,8 @@
// 判断如果当前是tab为1或2，则播放，否则不播放
if (me.curIndex == 0) {
// 虚位以待
} else if (me.curIndex == 1) {
me.playFollowStatus = true;
} else if (me.curIndex == 2) {
} else if (me.curIndex == 1) {
me.playStatus = true;
}
@ -200,64 +197,29 @@
this.$refs.videoComp.reCancelPlayList(justCancelVlogerId);
uni.setStorageSync("justCancelVlogerId", "");
}
},
onHide() {
var me = this;
// 显示和隐藏，需要判断根据不同tab做暂停或者隐藏
if (me.curIndex == 0) {
// 虚位以待
} else if (me.curIndex == 1) {
me.playFollowStatus = false;
} else if (me.curIndex == 2) {
} else if (me.curIndex == 1) {
me.playStatus = false;
}
},
onReady() {
// this.pageHeight = systemInfo.windowHeight + systemInfo.windowBottom;
this._lastTabIndex = 0;
this.swiperWidth = 0;
this.tabbarWidth = 0;
this.tabListSize = {};
this._touchTabIndex = 0;
this._headHeight = 100;
// var data = ['fujin','videoFollowComp','videoComp']
// var props = data[this.curIndex]
this.pageList = ['fujin', 'videoFollowComp', 'videoComp']
this.selectorQuery();
},
// 当前页下拉刷新
// onPullDownRefresh() {
// var me = this;
onPullDownRefresh() {
var me = this;
// 下拉刷新判断，如果是不同tab，那么组件中刷新的请求也不同
if (me.curIndex == 0) {
this.$refs.videoFollowComp.displayVideoPaging(1, true);
} else if (me.curIndex == 1) {
this.$refs.videoComp.displayVideoPaging(1, true);
}
// // 下拉刷新判断，如果是不同tab，那么组件中刷新的请求也不同
// if (me.curIndex == 0) {
// // 虚位以待
// } else if (me.curIndex == 1) {
// this.$refs.videoFollowComp.displayVideoPaging(1, true);
// } else if (me.curIndex == 2) {
// this.$refs.videoComp.displayVideoPaging(1, true);
// }
// },
},
methods: {
// 获取视频数据
//
// getVideoList(){
// let serverUrl = app.globalData.serverUrl;
// uni.request({
// method: "GET",
// url: serverUrl + "/vlog/indexList",
// data:{
// page:1,
// pageSize:10
// },
// success: () => {
// }
// })
// },
// 前往搜索页面
goSearch() {
uni.navigateTo({
@ -294,8 +256,10 @@
}
queryTabSize.exec(rects => {
rects.forEach((rect) => {
rect.left = rect.left - 40; //修正 left 值，减去 padding-left: 40px
this.tabListSize[rect.dataset.id] = rect;
})
console.log(this.tabListSize[this.tabIndex])
this.updateIndicator(this.tabListSize[this.tabIndex].left, this.tabListSize[this.tabIndex]
.width);
this.switchTab(this.tabIndex);
@ -333,9 +297,9 @@
this.updateIndicator(this.tabListSize[index].left, this.tabListSize[index].width);
},
updateIndicator(left, width) {
console.log(left)
console.log(width)
this.indicatorLineLeft = left - 40; //40的padding偏移量
// console.log(left)
// console.log(width)
this.indicatorLineLeft = left
this.indicatorLineWidth = width;
},
@ -355,6 +319,7 @@
return;
}
console.log(this.cacheTab)
// 缓存 tabId
if (obj.playerList.length > MAX_CACHE_DATA) {
let isExist = this.cacheTab.indexOf(this.tabIndex);
@ -402,12 +367,14 @@
var current = e.detail.current;
this.switchTab(current)
this.curIndex = current;
this.tabIndex = current
this.playFollowStatus = this.curIndex === 1 ? true : false;
this.playStatus = this.curIndex === 2 ? true : false;
},
// 点击头部选项卡，切换页面
tapFollow: function(current) {
this.curIndex = current;
this.tabIndex = current
this.playFollowStatus = this.curIndex === 1 ? true : false;
this.playStatus = this.curIndex === 2 ? true : false;
},
@ -428,7 +395,7 @@
<style scoped>
/* index start */
.page {
.mypage {
position: absolute;
left: 0;
right: 0;
@ -592,7 +559,7 @@
.scroll-view-animation {
transition-duration: 0.2s;
transition-property: left;
/* transition-property: transform; */
}
.tab-bar-line {

10
utils/request.js
View File

@ -99,8 +99,8 @@ http.interceptors.request.use(
// 配置vlog所需参数
let vlogToken = storage.getVlogToken();
let vlogId = storage.getVlogUserInfo();
console.log(vlogId)
console.log(vlogToken)
// console.log(vlogId)
// console.log(vlogToken)
if(vlogToken){
config.header.headerUserToken = vlogToken;
config.header.headerUserId = vlogId.id;
@ -109,7 +109,7 @@ http.interceptors.request.use(
...config.header,
uuid: storage.getUuid() || uuid.v1(),
};
console.log(config)
// console.log(config)
return config;
},
(config) => {
@ -125,8 +125,8 @@ let requests = [];
// 必须使用异步函数，注意
http.interceptors.response.use(
async (response) => {
console.log(isRefreshing)
console.log(response)
// console.log(isRefreshing)
// console.log(response)
/* 请求之后拦截器。可以使用async await 做异步操作 */
// token存在并且token过期
if (isRefreshing && response.statusCode === 403) {