Merge branch 'master' of http://192.168.0.105:10010/r/qfqk-android

liuyg

2021-11-03 56ad423dfcce6ef06b91a42d650f04d48b0a5160

 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;