From 56ad423dfcce6ef06b91a42d650f04d48b0a5160 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Wed, 03 Nov 2021 16:30:33 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/qfqk-android
---
pages/article/article_video.nvue | 449 +++++++++++++++++++++++++++++++++++++------------------
1 files changed, 300 insertions(+), 149 deletions(-)
diff --git a/pages/article/article_video.nvue b/pages/article/article_video.nvue
index 9850294..98c014a 100644
--- a/pages/article/article_video.nvue
+++ b/pages/article/article_video.nvue
@@ -1,13 +1,16 @@
<template>
<div class="page">
<div class="cover-view-center" v-if="distanceX==0">
- <div :style="{ height: `${sysheight-60}px`,width: width }" ref="touch" @click="clickVideo(index)" @touchstart="ListTouchStart" @touchmove="ListTouchMove">
+ <div :style="{ height: `${sysheight-60}px`,width: width }" ref="touch" @click="clickVideo(index)"
+ @touchstart="ListTouchStart" @touchmove="ListTouchMove">
<div class="cover-view-right" v-if="distanceX==0">
<image class="img" @click.stop="tapAvater"></image>
<text class="right-text"> </text>
<image class="img" @click.stop="tapLove"></image>
<text class="right-text"> </text>
<image class="img" @click.stop="tapMsg"></image>
+ <text class="right-text"> </text>
+ <image class="img" @click.stop="tapCollect"></image>
<text class="right-text"> </text>
<image class="img" @click.stop="tapShare"></image>
<text class="right-text"> </text>
@@ -18,11 +21,10 @@
<block v-for="(item, idx) in videoList" :key="idx">
<div class="video-box" :style="{ height: height }">
<!-- 视频渲染数预加载数影响性能 -->
- <block v-if="Math.abs(index-idx)<=1">
- <chunlei-video class="video" :src="item.src" :height="height" :width="width"
- :play="item.flag" :gDuration="item.duration" :objectFit="item.objectFit"
- :initialTime="item.initialTime" @pause="pauseVideo" :rotateImg="`//static/avatar.png`" :danmuList="danmuList"
- >
+ <block v-if="Math.abs(index-idx)<=1">
+ <chunlei-video class="video" :src="item.src" :height="height" :width="width" :play="item.flag"
+ :gDuration="item.duration" :objectFit="item.objectFit" :initialTime="item.initialTime"
+ @pause="pauseVideo" :rotateImg="`//static/avatar.png`" :danmuList="danmuList">
</chunlei-video>
<cover-view class="cover-view-left">
<text class="left-text">@{{item.at}}</text>
@@ -32,27 +34,34 @@
<cover-image :src="item.avater" class="avater img" @click.stop="tapAvater"></cover-image>
<text class="right-text-avater">+</text>
<text class="right-text"></text>
- <cover-image :src="item.check?'../../static/aixinRed.png':'../../static/aixin.png'" class="img" @click.stop="tapLove"></cover-image>
+ <cover-image :src="item.check?'../../static/aixinRed.png':'../../static/aixin.png'"
+ class="img" @click.stop="tapLove"></cover-image>
<text class="right-text">{{item.like}}</text>
- <cover-image src="../../static/xiaoxi.png" class="img" @click.stop="tapMsg"></cover-image>
- <text class="right-text">{{item.comment}}</text>
- <cover-image src="../../static/share-fill.png" class="img" @click.stop="tapShare"></cover-image>
+ <cover-image v-if="item.iscomment == '1'" src="../../static/xiaoxi.png" class="img" @click.stop="tapMsg"></cover-image>
+ <text v-if="item.iscomment == '1'" class="right-text">{{item.comment}}</text>
+ <cover-image :src="item.iscollect?'../../static/collectred.png':'../../static/collect.png'"
+ class="img" @click.stop="tapCollect"></cover-image>
+ <text class="right-text">{{item.collect}}</text>
+ <cover-image src="../../static/share-fill.png" class="img" @click.stop="tapShare">
+ </cover-image>
<text class="right-text">分享</text>
</cover-view>
-
+
</block>
</div>
-
+
</block>
</div>
-
- <div class="left-div" :style="{ height: height,width: width,left:`${-parseInt(width)}px` }" ref="left" @touchstart="ListTouchStart" @touchmove="ListTouchMove">
+
+ <div class="left-div" :style="{ height: height,width: width,left:`${-parseInt(width)}px` }" ref="left"
+ @touchstart="ListTouchStart" @touchmove="ListTouchMove">
<text class="title-text" @click="clickbt">{{videoList[index].at}}</text>
</div>
- <div class="right-div" :style="{ height: height,width: width,right:`${-parseInt(width)}px` }" ref="right" @touchstart="ListTouchStart" @touchmove="ListTouchMove">
+ <div class="right-div" :style="{ height: height,width: width,right:`${-parseInt(width)}px` }" ref="right"
+ @touchstart="ListTouchStart" @touchmove="ListTouchMove">
<text class="title-text">{{videoList[index].content}}</text>
</div>
-
+
</div>
</template>
@@ -63,61 +72,80 @@
const animation = weex.requireModule('animation');
const modal = weex.requireModule('modal');
- export default {
- mixins:[scrollMixins],
- components:{
+ export default {
+ mixins: [scrollMixins],
+ components: {
chunleiVideo
},
- data(){
- return{
- danmuList:[
- {text: '发条弹幕0',color: '#fff',time: 2,avatar:'../../static/avatar.png'},
- {text: '发条弹幕1',color: '#fff',time: 3,avatar:'../../static/avatar.png'},
- {text: '发条弹幕2',color: '#fff',time: 5,avatar:'../../static/avatar.png'},
- {text: '发条弹幕3',color: '#fff',time: 6,avatar:'../../static/avatar.png'},
+ data() {
+ return {
+ danmuList: [
+ // {
+ // text: '发条弹幕0',
+ // color: '#fff',
+ // time: 2,
+ // avatar: '../../static/avatar.png'
+ // },
+ // {
+ // text: '发条弹幕1',
+ // color: '#fff',
+ // time: 3,
+ // avatar: '../../static/avatar.png'
+ // },
+ // {
+ // text: '发条弹幕2',
+ // color: '#fff',
+ // time: 5,
+ // avatar: '../../static/avatar.png'
+ // },
+ // {
+ // text: '发条弹幕3',
+ // color: '#fff',
+ // time: 6,
+ // avatar: '../../static/avatar.png'
+ // },
],
- videoList:[
- {
- src:'http://baobab.kaiyanapp.com/api/v1/playUrl?vid=164015&resourceType=video&editionType=default&source=aliyun&playUrlType=url_oss',
- content:'为什么要选择uni-app？',
- flag:true,
- check:false,
- like:'10w',
- comment:'1045',
- avater:'../../static/logo.png',
- initialTime:20,
- at:'Dcloud',
- duration:841,
- objectFit:'fill'
+ videoList: [{
+ src: 'http://baobab.kaiyanapp.com/api/v1/playUrl?vid=164015&resourceType=video&editionType=default&source=aliyun&playUrlType=url_oss',
+ content: '为什么要选择uni-app？',
+ flag: true,
+ check: false,
+ like: '10w',
+ comment: '1045',
+ avater: '../../static/logo.png',
+ initialTime: 20,
+ at: 'Dcloud',
+ duration: 841,
+ objectFit: 'fill'
},
{
- src:'http://baobab.kaiyanapp.com/api/v1/playUrl?vid=129764&resourceType=video&editionType=default&source=aliyun&playUrlType=url_oss',
- content:'广告有反转：危机感十足！一辆车都比你靠谱',
- flag:false,
- check:true,
- like:'7w',
- comment:'1045',
- avater:'http://img.kaiyanapp.com/e44ed5fcfa424ba35761ce5f1339bc16.jpeg?imageMogr2/quality/60/format/jpg',
- initialTime:0,
- at:'欧美广告精选',
- duration:149
+ src: 'http://baobab.kaiyanapp.com/api/v1/playUrl?vid=129764&resourceType=video&editionType=default&source=aliyun&playUrlType=url_oss',
+ content: '广告有反转：危机感十足！一辆车都比你靠谱',
+ flag: false,
+ check: true,
+ like: '7w',
+ comment: '1045',
+ avater: 'http://img.kaiyanapp.com/e44ed5fcfa424ba35761ce5f1339bc16.jpeg?imageMogr2/quality/60/format/jpg',
+ initialTime: 0,
+ at: '欧美广告精选',
+ duration: 149
},
{
- src:'http://baobab.kaiyanapp.com/api/v1/playUrl?vid=164111&resourceType=video&editionType=default&source=aliyun&playUrlType=url_oss',
- content:'无辣不欢，你没见过小龙虾的大场面',
- flag:false,
- check:false,
- like:'7w',
- comment:'1045',
- avater:'http://img.kaiyanapp.com/7af2bb1bc134fb1115d48f05e9d317f0.jpeg?imageMogr2/quality/60/format/jpg',
- initialTime:0,
- at:'世界美食荟萃',
- duration:1162
+ src: 'http://baobab.kaiyanapp.com/api/v1/playUrl?vid=164111&resourceType=video&editionType=default&source=aliyun&playUrlType=url_oss',
+ content: '无辣不欢，你没见过小龙虾的大场面',
+ flag: false,
+ check: false,
+ like: '7w',
+ comment: '1045',
+ avater: 'http://img.kaiyanapp.com/7af2bb1bc134fb1115d48f05e9d317f0.jpeg?imageMogr2/quality/60/format/jpg',
+ initialTime: 0,
+ at: '世界美食荟萃',
+ duration: 1162
},
]
}
},
- created(){
+ created() {
this.init()
//隐藏subnvue
uni.getSubNVueById('comment').hide()
@@ -125,105 +153,216 @@
},
async mounted() {
//this.videoPlay(this.index)
- await this.pushVideoList()
- this.$nextTick(()=>{
+ // await this.pushVideoList()
+ this.$nextTick(() => {
this.videoPlay(this.index)
})
},
- onLoad(e){
+ onLoad(e) {
+ var that = this;
var dataForm = JSON.parse((e.detailData));
- this.videoList = [
- {
- src: dataForm.videoUrl,
- content:dataForm.title,
- flag:false,
- check:false,
- like:'10w',
- comment:'1045',
- avater:'../../static/logo.png',
- initialTime:0,
- at:dataForm.sourceName,
- duration:5,
- }];
- console.log("ccccc"+ dataForm)
+ that.videoList = []
+ //获取新闻数据
+ this.rolename = this.$store.state.UserData.role_name;
+ this.userid = this.$store.state.UserData.user_id;
+ var url = that.$store.state.piAPI + '/article/article/pageLikes';
+ if(dataForm.collectTo){
+ url = that.$store.state.piAPI + '/article/article/pageCollect';
+ }
+
+ uni.request({
+ url: url,
+ method: 'GET',
+ data: {
+ rolename: that.rolename, //帐号角色
+ userid: that.userid,
+ current: 1,
+ size: 99999,
+ articleType: "ksp"
+ },
+ success: (res) => {
+ if (res.data.code == 200) {
+ var data = res.data.data.records;
+ var x = 0;
+ for (var i = 0; i < data.length; i++) {
+ var flag = false;
+ var check = data[i].islikes == "1"?true:false;
+ var like = data[i].count == null?0:Number(data[i].count);
+ var iscollect = data[i].iscollect == "1"?true:false;
+ var collect = data[i].collectcount == null?0:Number(data[i].collectcount);
+ var comment = data[i].comments == null?0:Number(data[i].comments);
+ if (data[i].id == dataForm.id) {
+ x = 1;
+ flag = true;
+ }
+ if (x == 1) {
+ that.videoList.push({
+ id: data[i].id,
+ iscomment:data[i].iscomment,
+ userid: that.userid,
+ src: data[i].videoUrl,
+ content: data[i].title,
+ flag: flag,
+ check: check,
+ like: like,
+ iscollect: iscollect,
+ collect: collect,
+ comment: comment,
+ avater: '../../static/logo.png',
+ initialTime: 0,
+ at: data[i].sourceName,
+ duration: 5,
+ });
+ flag = false;
+ }
+ }
+ }
+ }
+ });
},
- onShow(){
+ onShow() {
this.videoPlay(this.index)
},
- onHide(){
+ onHide() {
for (let item of this.videoList) {
item.flag = false
}
},
- methods:{
- clickbt(){
+ methods: {
+ clickbt() {
console.log(11)
},
//设置参数
- init(){
+ init() {
this.typeX = true //开启左右滑动
this.playCount = 2 //剩余多少视频加载视频列表
this.startDistance = 5 //判断左右上下拖动的启动距离 px
this.minTime = 300 //判断快速滑动的时间,该时间内无视回弹距离判断
this.backDistance = 200 //判断上下滑动的回弹距离 px
},
- pushVideoList(){
- let promise = new Promise((resolve,reject)=>{
- uni.request({
- url: 'https://api.apiopen.top/videoRecommend?id=127397',
- success: (res) => {
- let videoGroup = []
- for (let item of res.data.result) {
- if(item.type == 'videoSmallCard'){
- videoGroup.push({
- src:item.data.playUrl,
- content:item.data.title,
- flag:false,
- check:false,
- like:'7w',
- comment:'1045',
- at:item.data.author.name,
- avater:item.data.author.icon,
- initialTime:0,
- duration:item.data.duration
- })
- }
- }
- this.videoList = [...this.videoList,...videoGroup]
-
- resolve()
- }
- })
- })
- return promise
- },
- tapLove(e){
+ // pushVideoList() {
+ // let promise = new Promise((resolve, reject) => {
+ // uni.request({
+ // url: 'https://api.apiopen.top/videoRecommend?id=127397',
+ // success: (res) => {
+ // let videoGroup = []
+ // for (let item of res.data.result) {
+ // if (item.type == 'videoSmallCard') {
+ // videoGroup.push({
+ // src: item.data.playUrl,
+ // content: item.data.title,
+ // flag: false,
+ // check: false,
+ // like: '7w',
+ // comment: '1045',
+ // at: item.data.author.name,
+ // avater: item.data.author.icon,
+ // initialTime: 0,
+ // duration: item.data.duration
+ // })
+ // }
+ // }
+ // this.videoList = [...this.videoList, ...videoGroup]
+
+ // resolve()
+ // }
+ // })
+ // })
+ // return promise
+ // },
+ tapLove(e) {
+ var that = this;
e.stopPropagation();
- if(this.distanceX!=0) return
+ if (this.distanceX != 0) return
+ if(this.videoList[this.index].check){
+ this.videoList[this.index].like = this.videoList[this.index].like - 1;
+ uni.request({
+ url: that.$store.state.piAPI + 'likes/likes/removelikes',
+ method: 'POST',
+ data: {
+ likesUser: that.userid,
+ likesArticle: that.videoList[that.index].id
+ },
+ success: (res) => {
+
+ }
+ });
+
+ }else{
+ this.videoList[this.index].like = this.videoList[this.index].like + 1;
+ uni.request({
+ url: that.$store.state.piAPI + 'likes/likes/submit',
+ method: 'POST',
+ data: {
+ likesUser: that.userid,
+ likesArticle: that.videoList[that.index].id
+ },
+ success: (res) => {
+
+ }
+ });
+ }
+
this.videoList[this.index].check = !this.videoList[this.index].check
this.videoList = [...this.videoList]
},
- tapAvater(e){
+ tapCollect(e) {
+ var that = this;
e.stopPropagation();
- if(this.distanceX!=0) return
+ if (this.distanceX != 0) return
+ if(this.videoList[this.index].iscollect){
+ this.videoList[this.index].collect = this.videoList[this.index].collect - 1;
+ uni.request({
+ url: that.$store.state.piAPI + 'collect/collect/removecollect',
+ method: 'POST',
+ data: {
+ collectUser: that.userid,
+ collectArticle: that.videoList[that.index].id
+ },
+ success: (res) => {
+
+ }
+ });
+
+ }else{
+ this.videoList[this.index].collect = this.videoList[this.index].collect + 1;
+ uni.request({
+ url: that.$store.state.piAPI + 'collect/collect/submit',
+ method: 'POST',
+ data: {
+ collectUser: that.userid,
+ collectArticle: that.videoList[that.index].id
+ },
+ success: (res) => {
+
+ }
+ });
+ }
+
+ this.videoList[this.index].iscollect = !this.videoList[this.index].iscollect
+ this.videoList = [...this.videoList]
+ },
+ tapAvater(e) {
+ e.stopPropagation();
+ if (this.distanceX != 0) return
uni.showToast({
- icon:'none',
- title:`点击索引为${this.index}的头像`
+ icon: 'none',
+ title: `点击索引为${this.index}的头像`
})
},
- tapMsg(e){
+ tapMsg(e) {
e.stopPropagation();
- if(this.distanceX!=0) return
- uni.getSubNVueById('comment').show('none',0,()=>{
- uni.$emit('showComment',this.videoList[this.index].content)
+ if (this.distanceX != 0) return
+ uni.getSubNVueById('comment').show('none', 0, () => {
+ uni.$emit('showComment', this.videoList[this.index])
});
},
- tapShare(e){
+ tapShare(e) {
e.stopPropagation();
- if(this.distanceX!=0) return
+ if (this.distanceX != 0) return
uni.showToast({
- icon:'none',
- title:`分享索引为${this.index}的视频`
+ icon: 'none',
+ title: `分享索引为${this.index}的视频`
})
},
}
@@ -231,50 +370,58 @@
</script>
<style lang="scss" scoped>
- .page{
+ .page {
flex: 1;
overflow: hidden;
position: relative;
}
- .swiper{
+
+ .swiper {
position: relative;
background-color: #000;
}
- .left-div{
+
+ .left-div {
position: absolute;
top: 0;
justify-content: center;
align-items: center;
}
- .right-div{
+
+ .right-div {
position: absolute;
top: 0;
justify-content: center;
align-items: center;
}
- .title-text{
+
+ .title-text {
font-size: 16px;
color: #000000;
}
- .video-box{
+
+ .video-box {
position: relative;
background-color: #000;
}
- .cover-view-center{
-
+
+ .cover-view-center {
+
position: fixed;
justify-content: center;
align-items: center;
-
+
z-index: 999;
}
- .cover-view-top{
+
+ .cover-view-top {
position: fixed;
width: 750rpx;
height: 150px;
overflow: hidden;
}
- .cover-view-left{
+
+ .cover-view-left {
position: absolute;
margin-left: 10upx;
width: 500upx;
@@ -283,25 +430,28 @@
font-size: 16px;
color: #FFFFFF;
}
- .left-text{
+
+ .left-text {
font-size: 16px;
color: #FFFFFF;
margin-bottom: 20upx;
}
- .avater{
+
+ .avater {
border-radius: 50upx;
border-color: #fff;
border-style: solid;
border-width: 2px;
}
-
- .cover-view-right{
+
+ .cover-view-right {
position: absolute;
top: 400upx;
right: 20upx;
z-index: 9999;
}
- .right-text-avater{
+
+ .right-text-avater {
position: absolute;
font-size: 14px;
top: 50upx;
@@ -315,27 +465,28 @@
line-height: 40upx;
z-index: 999;
}
-
- .avater-icon{
+
+ .avater-icon {
height: 40upx;
width: 40upx;
-
+
color: #fff;
background-color: #DD524D;
border-radius: 50%;
position: absolute;
left: 30upx;
- top:-20upx;
+ top: -20upx;
}
-
- .right-text{
+
+ .right-text {
text-align: center;
font-size: 14px;
color: #FFFFFF;
margin-bottom: 50upx;
height: 20px;
}
- .img{
+
+ .img {
height: 74upx;
width: 74upx;
opacity: 0.9;
--
Gitblit v1.9.3