<template>
<!-- secondbeat 秒拍视频页面 -->
<view class="simple-douyin">
<view class="wrapper">
<uni-status-bar></uni-status-bar>
<view class="nav">
<!-- <text class="cst-iconfont back" @tap="back">抖券</text> -->
<image class="cst-iconfont back myback" @tap="back" src="../../static/secondbeat/right-jiantou.png" mode=""></image>
<text style="color: #fff;">秒拍</text>
<image src="/static/ljt1.png" style="width: 60rpx;height: 60rpx; top: 25rpx; right: 10rpx;" class="position-absolute " @click="removeVideo(item.id)"></image>
</view>
</view>
<!-- <list v-if="dataResult.length > 0 " class="simple-douyin-list" @loadmore="loadMore" offset-accuracy="1500px" @scroll="scroll" :loadmoreoffset="loadMoreHeight" :show-scrollbar="false" ref="listBox"
pagingEnabled="true"> <cell v-for="(items,indexs) in indexx" :style="boxStyle" :key="indexs"> -->
<!-- 这里还要做是图片还是视频,显示图片还是视频 item.type 1为图片,2为视频 -->
<!-- http://video-haodanku-com.cdn.fudaiapp.com/6d9dcfec14edea824879b8fd6ff92d82.mp4?attname=16044546495015.mp4 满屏视屏 -->
<!-- <swiper :duration="1000" :style="boxStyle" @change="change">
<swiper-item v-for="(item, i) in dataResult" :key="i">
</swiper-item>
</swiper> -->
<swiper :duration="1000" :style="boxStyle" @change="change" :current="index" >
<swiper-item v-for="(item, i) in dataResult" :key="i" >
<view v-if="item.type == 2 && Math.abs(current-i)<=1" >
<simple-video class="videoBox" :ref-id="item.id" :state="item.state" :src="item.path"
boxStyle="boxStyle" v-if="Math.abs(current-i)<=1"></simple-video> </view>
<view v-if="item.type == 1" class="myimg" style="flex: 1; width: 750rpx; background-color: #000000;">
<image style="flex: 1; width: 750rpx; background-size: 100% 100%;" :src="item.path" mode="aspectFit"></image>
</view>
<view class="videoHover" v-if="item.type == 2" @click="tapVideoHover(item.state, $event)" :style="boxStyle">
<image v-if="item.state == 'pause'" class="playState" src="../../static/secondbeat/play.png"></image>
</view>
<view class="item-right" @appear="videoKey = i">
<!-- <image class="item-right-image" :src="item.itempic"></image> -->
<!-- 头像 -->
<view>
<image class="myright face" @tap="jumpToUserpage(item.userId)" style="width: 90rpx;height: 90rpx;
border-top-right-radius:63rpx; border-bottom-left-radius: 63rpx;border-bottom-right-radius: 63rpx;border-top-left-radius: 63rpx;
" :src="item.headImageUrl" mode=""></image>
</view>
<!-- <text class="cs-iconfont item-right-icon" @tap.stop="rightIcon('share', item)"></text>
<text class="item-right-text" @tap.stop="rightIcon('share', item)">分享</text> -->
<text class="item-right-text"></text>
<!-- 凸 -->
<!-- <text class="cs-iconfont item-right-icon" @tap.stop="rightIcon('buy', item)"></text> -->
<!-- <text class="item-right-text" @tap.stop="rightIcon('buy', item)">购买</text> -->
<view>
<!-- <text class="myright tu" @tap="tu(i,item.id)">凸</text> -->
<image class="myright tu" src="../../static/secondbeat/tu-wihte.png" @tap="tu(i,item.id,item.hasLike)" mode=""></image>
</view>
<text class="myright" style="margin-bottom: 30rpx;">{{item.likeAmount == null ? 0 : item.likeAmount }}</text>
<!-- <text class="item-right-text"></text> -->
<!-- 凹 -->
<view >
<!-- <text class="myright ao" @tap="ao(i,item.id)">凹</text> -->
<image class="myright tu" src="../../static/secondbeat/ao-wihte.png" @tap="ao(i,item.id,item.hasFavorite)" mode=""></image>
</view>
<text class="myright">{{item.favoriteAmount == null ? 0 : item.favoriteAmount }}</text>
<!-- <text class="cs-iconfont item-right-icon" @tap.stop="rightIcon('dow', item)"></text> -->
<!-- <text class="item-right-text" @tap.stop="rightIcon('dow', item)">下载</text> -->
</view>
<view class="item-bottom">
<!-- 标题+热门标题 -->
<view style="display: flex; flex-direction: row; align-items: flex-end;">
<text class="item-title">{{item.title}}</text>
<view><text v-if="item.tags != null" class="mytags">{{item.tags}}</text></view>
</view>
<!-- 地点 -->
<view v-if="item.address" style="display: flex; flex-direction: row; align-items: flex-end;">
<image style="width: 30rpx; height: 30rpx;" src="../../static/secondbeat/didi.png" mode=""></image>
<text class="item-desc s-wrap ">{{item.address}}</text>
</view>
<view v-if="item.address == null " style="display: flex; flex-direction: row; align-items: flex-end;">
<text class="item-desc s-wrap "></text>
</view>
<view style="display: flex; flex-direction: row; align-items: flex-end;">
<text class="item-desc s-wrap "></text>
</view>
</view>
</swiper-item>
</swiper>
<!-- </cell>
</list> -->
<!-- <view v-else class="myelse">
<text class="notMiaopai">该用户还没有发布秒拍</text>
</view> -->
</view>
</template>
<script>
var deviceInfo = uni.getSystemInfoSync();
import simpleVideo from '@/components/simple-video.nvue';
import dialog from '@/components/uni-popup/uni-popup.vue';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import uniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue';
// import $u from '@/uview-ui/libs/request/index.js'
export default {
data() {
return {
loadMoreHeight: deviceInfo.windowHeight * 2, // 触发 loadmore 事件所需要的垂直偏移距离 加载到剩余2个的时候 继续加载
dataResult: [],
page: 1,
videoKey: 0,
boxStyle: {
width: '750rpx',
height: deviceInfo.windowHeight + 'px'
},
// 用户id,上一页跳转传过来的
userId: '',
detail:{
id:0,
videoIndex:0,
userId:0
},
//当前视频下标
current:0,
//上一个视频下标
oldCurrent:0,
//该用户的视频总数
total:0,
isGetArr:false
};
},
components: {
simpleVideo,
dialog,
uniNavBar,
uniStatusBar
},
watch: {
// videoKey(videoKey, old_k) {
// console.log(videoKey,old_k,'+++++++++++++++++++++++');
// this.dataResult[videoKey].state = 'play';
// this.dataResult[old_k].state = 'stop';
// }
current(k,old_k){
console.log('k========================================',k)
console.log('watch--old_k==============================',old_k)
console.log(this.dataResult)
console.log(this.dataResult[k])
this.dataResult[k].state = 'play'
this.dataResult[old_k].state = 'stop'
console.log('this.videoList[k]',this.dataResult[k])
console.log(this.dataResult[old_k])
}
},
onLoad(options) {
this.detail = JSON.parse(options.detail)
console.log(this.detail)
this.userId = this.detail.userId
this.current = this.detail.videoIndex
this.oldCurrent = this.current
// this.isindex = this.current
this.getData(() => {
this.$nextTick(() => {
this.dataResult[this.current].state = 'play';
});
});
},
methods: {
//
scroll(e){
let index =[ {
index:1,
indexx:2
}]
this.indexx = [...this.indexx,...index]
console.log(e,'22222222222222222222222222222222',this.indexx.length)
},
///
change(e){
this.current = e.detail.current
this.$nextTick(()=>{
for (let item of this.dataResult) {
item.state = 'pause'
}
this.dataResult[this.current].state = 'play'
})
this.page++
console.log('哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈11111111111111111',this.page)
this.addVideo()
// if(this.dataResult.length < this.total && this.dataResult.length - index == 2){
// this.page++
// console.log('哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈11111111111111111',this.page)
// this.addVideo()
// }
// console.log(e,']]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]')
// console.log(this.current,this.oldCurrent)
// if(!this.isGetArr){
// this.current = e.detail.current
// let index = this.current + 1
// console.log(this.current,this.oldCurrent)
// if(this.current != this.oldCurrent){
// this.dataResult[this.oldCurrent].state = 'stop';
// this.dataResult[this.current].state = 'play';
// this.oldCurrent = this.current
// }
// if(this.dataResult.length < this.total && this.dataResult.length - index == 2){
// this.page++
// console.log('哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈11111111111111111',this.page)
// this.addVideo()
// }
// }
// else{
// this.current++
// if(this.current != this.oldCurrent){
// this.dataResult[this.oldCurrent].state = 'stop';
// this.dataResult[this.current].state = 'play';
// this.oldCurrent = this.current
// this.isGetArr = false
// }
// }
// this.videoKey = e.detail.current
},
removeVideo(id){
console.log(id)
},
// 点击凸,发送点赞请求,且凸数量+1
tu(index,id,hasLike){
// console.log(id)// 秒拍ID
const token = uni.getStorageSync('token')
// console.log(this.dataResult[index].likeAmount)
console.log(hasLike)
let url = !!!hasLike ? '/svideo/like' : '/svideo/like/cancel'
if(!!!hasLike){
uni.request({
url: 'https://api.tutu-inspire.com'+url,
method: 'POST',
data: {
svideoId: id
},
header: {
'Access-Token': token
},
success: res => {
if (res.data.code == 10000) {
console.log(res)
this.dataResult[index].likeAmount += 1
this.dataResult[index].hasLike = 1
}
}
})
}
else{
uni.request({
url: 'https://api.tutu-inspire.com'+url,
method: 'POST',
data: {
svideoId: id
},
header: {
'Access-Token': token
},
success: res => {
if (res.data.code == 10000) {
console.log(res)
this.dataResult[index].likeAmount -= 1
this.dataResult[index].hasLike = 0
}
}
})
}
},
// 点击凹,发送收藏请求,且凸数量+1
ao(index,id,hasFavorite){
// console.log(id)// 秒拍ID
const token = uni.getStorageSync('token')
let url = !!!hasFavorite ? '/svideo/favorite' : '/svideo/favorite/cancel'
//console.log(!!!hasFavorite)
if(!!!hasFavorite){
uni.request({
url: 'https://api.tutu-inspire.com'+url,
method: 'POST',
data: {
svideoId: id
},
header: {
'Access-Token': token
},
success: res => {
if (res.data.code == 10000) {
// console.log(res)
this.dataResult[index].favoriteAmount += 1
this.dataResult[index].hasFavorite = 1
}
}
})
}
else{
uni.request({
url: 'https://api.tutu-inspire.com'+url,
method: 'POST',
data: {
svideoId: id
},
header: {
'Access-Token': token
},
success: res => {
if (res.data.code == 10000) {
console.log(res)
this.dataResult[index].favoriteAmount -= 1
this.dataResult[index].hasFavorite = 0
}
}
})
}
},
//
addVideo(){
const token = uni.getStorageSync('token')
uni.request({
url: 'https://api.tutu-inspire.com/svideo',
method: 'GET',
data: {
pageNumber: this.page,
pageSize: 8,
userId: this.userId
},
header: {
'Access-Token': token
},
success: res => {
console.log(res)
if (res.data.code == 10000) {
// console.log(res,'==================================')
//视频总数
this.total = res.data.data.total
let newarr = []
res.data.data.data.forEach((item, index) => {
// // console.log(res.data.data,"================",res.data.data.total)
newarr.push(Object.assign(item, {
state: 'pause'
}))
// this.dataResult.push(res.data.data.data)
})
this.dataResult = this.dataResult.concat(newarr)
this.isGetArr = true
// if (this.dataResult.length >= this.clearMax) {
// this.dataResult.splice(0, this.clearNum);
// }
// callback && callback();
console.log(this.current,'=================')
}
}
})
},
// 跳转到用户页面
jumpToUserpage(userId){
const myuserid = uni.getStorageSync('myuserid')
// console.log(myuserid)
// console.log(userId)
// 用户id相同就是自身
if(userId == myuserid){
// console.log(123)
uni.switchTab({
url: '../mypage/mypage'
})
}else{
// console.log('abc')
// 不是自身,跳到对应的用户个人页面
uni.navigateTo({
url: '../userpage/userpage?userId='+userId
})
}
},
//点击播放&&暂停
tapVideoHover(state, event) {
console.log('state--', state);
if (state == 'play' || state == 'continue') {
this.dataResult[this.current].state = 'pause';
} else {
this.dataResult[this.current].state = 'continue';
}
},
getData(callback = e => {}) {
var page = this.page;
// uni.request({
// url: `https://www.haodanku.com/trill/get_trill_items?min_id=${page}&back=15&douyin_cid=4`,
// method: 'GET',
// success: result => {
// console.log(result)
// result.data.data.forEach((item, index) => {
// this.dataResult.push(Object.assign(item, { state: 'pause' }));
// });
// if (this.dataResult.length >= this.clearMax) {
// this.dataResult.splice(0, this.clearNum);
// }
// callback && callback();
// }
// });
const token = uni.getStorageSync('token')
uni.request({
url: 'https://api.tutu-inspire.com/svideo',
method: 'GET',
data: {
pageNumber: page,
pageSize: 8,
userId: this.userId
},
header: {
'Access-Token': token
},
success: res => {
console.log(res)
if (res.data.code == 10000) {
console.log(res,'==================================')
//视频总数
this.total = res.data.data.total
res.data.data.data.forEach((item, index) => {
// console.log(res.data.data,"================",res.data.data.total)
this.dataResult.push(Object.assign(item, {
state: 'pause'
}));
})
if (this.dataResult.length >= this.clearMax) {
this.dataResult.splice(0, this.clearNum);
}
callback && callback();
}
}
})
},
// 返回上一页
back() {
uni.navigateBack({
delta: 1
})
}
}
};
</script>
<style lang="scss">
.simple-douyin {
flex: 1;
}
.simple-douyin-list {
width: 750rpx;
flex: 1;
}
.myelse{
width: 750rpx;
flex: 1;
background-color: #000;
// display: flex;
justify-content: center;
align-items: center;
}
.notMiaopai{
color: #fff;
}
.s-nowrap {
flex-direction: row;
flex-wrap: nowrap;
}
/flex 横向不换行/
/头部/
.wrapper {
position: fixed;
top: 25rpx;
width: 750rpx;
// height: 88rpx;
}
.nav {
position: relative;
height: 88rpx;
justify-content: center;
align-items: center;
}
.title {
color: #ffffff;
font-size: 34rpx;
}
.back {
position: absolute;
left: 20rpx;
color: #ffffff;
font-size: 40rpx !important;
width: 180rpx;
height: 60rpx;
line-height: 60rpx;
}
.myback{
width: 40rpx;
height: 40rpx;
}
.videoHover {
position: absolute;
top: 0;
left: 0;
flex: 1;
background-color: rgba(0, 0, 0, 0.1);
justify-content: center;
align-items: center;
}
.playState {
width: 80upx;
height: 80upx;
}
.item-right {
position: absolute;
right: 32rpx;
bottom: 296rpx;
text-align: center;
}
.myright{
color: #fff;
text-align: center;
font-size: 30rpx;
margin-top: 8rpx;
}
.ao,.tu{
width: 80rpx;
height: 80rpx;
// text-align: center;
// line-height: 80rpx;
// background-color: #aaa;
// border-radius: 50%;
}
.item-right-image {
width: 86rpx;
height: 86rpx;
border-radius: 43rpx;
margin-bottom: 32rpx;
}
.item-right-icon {
font-size: 60rpx;
color: #ffffff;
text-align: center;
margin-bottom: 10rpx;
}
.item-right-text {
font-size: 24rpx;
color: #ffffff;
text-align: center;
margin-bottom: 30rpx;
}
.item-bottom {
position: absolute;
left: 32rpx;
bottom: 32rpx;
}
.item-title {
// width: 500rpx;
font-size:42rpx;
color: #ffffff;
// font-weight: bold;
lines:1;
}
.mytags{
padding: 5rpx 20rpx;
color: #FFFFFF;
font-size: 28rpx;
margin-left: 6rpx;
background-color: #2B8EE6;
border-radius: 19rpx;
}
.item-desc {
width: 550rpx;
margin-top: 20rpx;
font-size: 26rpx;
color: #aaa;
margin-left: 20rpx;
}
.item-music {
margin-top: 20rpx;
flex-direction: row;
align-items: center;
}
.item-music-icon {
width: 32rpx;
height: 32rpx;
font-size: 32rpx;
color: #ffffff;
}
.item-music-icon {
color: #ffffff;
font-size: 32rpx;
}
.item-music-text {
width: 600rpx;
height: 32rpx;
line-height: 32rpx;
font-size: 26rpx;
color: #ffffff;
}
.item-bottom-cart {
background-color: rgba(0, 0, 0, 0.2);
border-radius: 10rpx;
margin-bottom: 20rpx;
height: 60rpx;
line-height: 60rpx;
padding-left: 10rpx;
padding-right: 10rpx;
}
.item-title-cart {
color: #ffffff;
font-size: 26rpx;
height: 60rpx;
line-height: 60rpx;
margin-left: 10rpx;
}
.item-icon-cart {
color: #f9d119;
font-size: 26rpx;
height: 60rpx;
line-height: 60rpx;
font-weight: bold;
}
.find-popup {
width: 750rpx;
flex-direction: column;
flex: 1;
background-color: #ffffff;
height: 400rpx;
}
.share-title-text {
height: 60rpx;
line-height: 60rpx;
padding-top: 10rpx;
padding-bottom: 10rpx;
text-align: center;
color: #7e7e7e;
font-size: 30rpx;
}
.share-list {
width: 750rpx;
flex-direction: row;
justify-content: flex-start;
flex-wrap: nowrap;
flex: 1;
}
.share-icon {
width: 187rpx;
text-align: center;
height: 130rpx;
line-height: 130rpx;
font-size: 44rpx;
}
.text-center {
text-align: center;
}
.text-size {
font-size: 32rpx;
}
.margin-top {
margin-top: 35rpx;
}
.margin-top-xs {
margin-top: 10rpx;
}
.margin-top2 {
margin-top: 40rpx;
}
.tui-btn-cancle {
width: 750rpx;
height: 100rpx;
line-height: 100rpx;
position: absolute;
left: 0;
bottom: 0;
background-color: #f6f6f6;
align-items: center;
justify-content: flex-end;
}
.tui-btn-cancle-text {
width: 750rpx;
font-size: 33rpx;
color: #3e3e3e;
height: 100rpx;
line-height: 100rpx;
align-items: center;
justify-content: center;
text-align: center;
padding-bottom: 5rpx;
}
.weixin {
color: #30ca70;
}
.qq {
color: #1db2ed;
}
.pengyouquan {
color: #52ae71;
}
.kongjian {
color: #f2a141;
}
.bendi {
color: #515a6e;
}
.picture {
color: #808695;
}
.cstIconfontN {
text-align: center;
font-size: 75rpx;
}
</style>
2 个回复
7***@qq.com (作者)
这是视频,bug在第二秒和第三秒,这里我做了请求然后把数据追加给swiper,但是他就出现回退到第一条了,后面是因为分页没有了就没有追加数据。
4***@qq.com
我也遇到这个问题,你怎么解决的