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

20
components/vlog/videoFollowComp.nvue
View File

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

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

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

10
utils/request.js
View File

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