onecric_h5/pages/Videos/live copy.vue

<template>
  <view class="">
    <u-navbar
      bgColor="transparent"
      leftIconColor="#fff"
      :fixed="true"
      leftIconSize="48"
      :autoBack="true"
    >
    </u-navbar>
    <swiper
      style="height: 100vh"
      :current="currentIndex"
      :vertical="true"
      @change="changeplay"
      @touchstart="touchStart"
      @touchend="touchEnd"
    >
      <swiper-item
        class="video-main flex-center"
        v-for="(item, index) in videoList"
        :key="index"
      >
        <video
          id="myVideo"
          class="video"
          ref="video"
          :src="item.video[0].video"
          :show-center-play-btn="false"
          :controls="true"
          poster="/static/image/common/video-list-bg.png"
          @loadedmetadata="videometa"
          :autoplay="autoplay"
          :enable-play-gesture="true"
          play-btn-position="center"
          :show-fullscreen-btn="false"
          objectFit="cover"
          @click="suspendChecked = !suspendChecked"
          :index="index"
        ></video>
        <view class="foot" style="position: absolute">
          <view class="foot-info flex-start">
            <image
              :src="
                item.avatar || '/static/image/common/teams_avatar_ico@2x.png'
              "
              mode=""
            ></image>
            <text style="padding: 0 40rpx">{{ item.user_nickname }}</text>
            <text
              class="btn"
              v-if="userId != info.uid"
              :class="{ active: item.is_attention == 1 }"
              @click="attention(item.is_attention)"
              >{{ item.is_attention == 1 ? $t('video.lab4') : $t('video.lab5') }}</text
            >
          </view>
          <view class="content text-clamp2 font28">
            {{ item.title }}
          </view>
        </view>
        <view class="meun">
          <view class="" @click="setVideoLike(item.is_likes)">
            <image
              :src="
                item.is_likes == 1
                  ? '/static/image/videos/video4.png'
                  : '/static/image/videos/video3.png'
              "
              mode=""
            ></image>
            <view class="font24">
              {{ numberToK(item.likes) }}
            </view>
          </view>
          <view class="" @click="openComment()">
            <image src="/static/image/videos/video2.png" mode=""></image>
            <view class="font24">
              {{ item.comment_count }}
            </view>
          </view>
          <view class="" @click="show = true">
            <image
              src="/static/image/videos/video1.png"
              mode=""
              open=""
            ></image>
            <view class="font24"> 
              <!-- more  -->
              {{ $t('video.lab6') }}
            </view>
          </view>
        </view>
        <image
          @click="videoPlay(index)"
          v-if="suspendChecked"
          class="suspend"
          src="../../static/image/live/suspend.png"
        ></image>
        <!-- 	<view>{{item.video}}</view>
					 -->
        <!-- </view> -->
        <!-- 	<image style="width: 100%;" @click="everythingPlayVideo()" class="video"
				:src="item.video[0].img"></image> -->
      </swiper-item>
    </swiper>

    <!-- 举报弹窗 -->
    <u-popup
      :show="reportShow"
      :round="20"
      mode="center"
      @close="reportShow = false"
    >
      <view class="report-buttom" style="padding: 0 60rpx">
        <view style="line-height: 88rpx" @click="report"
          >
          <!-- Sensitive information -->
          {{ $t('video.lab7') }}
          </view
        >
        <view style="line-height: 88rpx" @click="report">
          <!-- User Privacy -->
          {{ $t('video.lab16') }}
        </view>
        <view style="line-height: 88rpx" @click="report"
          >
          <!-- Suspected of fraud -->
          {{ $t('video.lab8') }}
          </view
        >
        <view style="line-height: 88rpx" @click="report">
          <!-- legal Crime -->
          {{ $t('video.lab17') }}
        </view>
      </view>
    </u-popup>
    <view class="menues">
      <u-popup :show="show" :round="20" mode="bottom" @close="close">
        <view class="">
          <view class="justify-between more-popup" style="text-align: center">
            <view class="">
              <image
                src="../../static/image/videos/more-Collection.png"
                mode=""
              ></image>
              <view class="c3" @click="collection">Collection</view>
            </view>
            <view class="" @click="saveVideo">
              <image
                src="../../static/image/videos/more-Preservation.png"
                mode=""
              ></image>
              <view class="c3">
                <!-- Save -->
              {{ $t('video.lab10') }}
              </view>
            </view>
            <view class="" @click="reportClick">
              <image
                src="../../static/image/videos/more-Report.png"
                mode=""
              ></image>
              <view class="c3">
                <!-- Report -->
              {{ $t('video.lab11') }}
              </view>
            </view>
            <view class="" @click="shareLive">
              <image
                src="../../static/image/videos/more-Share.png"
                mode=""
              ></image>
              <view class="c3">
                <!-- Share -->
              {{ $t('video.lab12') }}
              </view>
            </view>
          </view>
          <view class="c3 Bold more-cancel">
            <text @click="show = false">
              <!-- Cancel -->
            {{ $t('video.lab13') }}
            </text>
          </view>
        </view>
      </u-popup>
    </view>

    <!-- 		<view class="Open" @click="setVoice()" v-if="isVoice1">
			Open the voice
		</view> -->
    <u-popup
      :show="showMask"
      :round="20"
      mode="bottom"
      @close="showMask = false"
    >
      <view class="comment-box">
        <comment-video
          ref="hbComment"
          @add="add"
          @like="like"
          :deleteTip="$t('common.delete1')"
          :cmData="commentData"
        >
        </comment-video>
        <view class="comment-input">
          <view class="flex-start" @click="setEg()">
            <image src="/static/image/news/topic9.png" mode=""></image>
            <text>{{ $t("news.input") }}</text>
          </view>
        </view>
      </view>
    </u-popup>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
/* 分享组件*/
// import NativeShare from 'nativeshare'
import { numberToK } from '@/utils/util'
import commentVideo from "@/components/comment-eg/comment-video.vue";
import install from "@/components/install/install.vue";
var time = null;

export default {
  components: {
    commentVideo,
    install,
  },
  data() {
    return {
      show: false,
      currentIndex: 2,
      id: 0,
      index: 0,
      videoId: 0,
      showMask: false,
      reportShow: false,
      suspendChecked: false,
      reqFlag: false, // 请求标志，防止重复操作，true表示请求中
      comment: [],
      commentData: {},
      videoPlays: true,
      info: {},
      height: 0,
      width: 0,
      muted: true,
      isVoice1: false,
      videoContext: null,
      userId: "",
      reportId: "",
      touchStartX: 0, // 触屏起始点x
      touchStartY: 0, // 触屏起始点y
      delta: 50, // 滑动要大于这个值
      videoList: [],
      pageStatrY: 0,
      autoplay: false,
      pageEndY: 0,
      page: 0,
      videoContext: undefined, //全局定义视频API变量
      time1: null,
    };
  },
  computed: {
    isLogin() {
      return this.$store.state.isLogin;
    },
    isVoice() {
      return this.$store.state.isVoice;
    },
    system() {
      return this.$store.state.system;
    },
  },
  onLoad(option) {
    // uni.setNavigationBarTitle({ title: this.title })
    let information = uni.getStorage("information");
    let watchingOutSign = localStorage.getItem('watchingOutSign')
    // if (watchingOutSign && this.isLogin != 1) {
    //   this.$r.loginBox()
    //   this.$store.state.loginShowSign = true
    //   this.$store.state.loginShowCloseSign = false;
    // } else {
      this.getIsLogin()
    // }
    uni.getStorage({
      key: "information", // 储存在本地的变量名
      success: (res) => {
        this.userId = res.data.id;
        console.log(this.userId);
      },
    });
    this.id = option.id;
    this.getList();
    this.getComment(option.id);
    this.currentIndex = option.index;
    // this.info = this.$common.get('videoInfo');
    this.getVideo(option.id);
    this.reportId = option.id;
    uni.$u.http
      .post("api/Video/getVideoInfo", {
        id: option.id,
      })
      .then((res) => {
        this.info = res;
        // 设置下载视频视频标题
        uni.setNavigationBarTitle({
          title: this.info.title,
        });
      })
      .catch((res) => {});
    uni.getSystemInfo({
      success: (res) => {
        //console.log(res)
        this.windowWidth = res.windowWidth;
        this.windowHeight = res.windowHeight;
      },
    });
  },
  onReady: function (res) {
    // 获取 video 上下文 videoContext 对象
    this.videoContext = uni.createVideoContext("myVideo");
    setTimeout(() => {
      this.auto();
    }, 500);
    // 进入全屏状态
    // this.videoContext.requestFullScreen()
    // setTimeout(res=>{
    // 	this.videoContext.load()
    // 	this.videoContext.play();
    // },2000)
  },
  onUnload() {
    this.time1 && clearInterval(this.time1);
    this.videoContext = null;
  },
  methods: {
    // 首视频自动播放
    auto() {
      if (this.index === 0) {
        this.$refs.video[this.currentIndex].play();
      }
    },
    //上下滑动触发事件
    changeplay(res) {
      let that = this;
      clearTimeout(time);
      that.page = res.detail.current;
      console.log(that.page, res, 111);
      time = setTimeout(() => {
        if (that.pageStatrY < that.pageEndY) {
          setTimeout(() => {
            console.error(that.page);
            that.$refs.video[that.page].play();
          }, 20);
          that.$refs.video[that.page + 1].pause();
          that.pageStatrY = 0;
          that.pageEndY = 0;
        } else {
          setTimeout(() => {
          console.error(that.page);
            that.$refs.video[that.page].play();
          }, 20);

          that.$refs.video[that.page - 1].pause();
          that.pageStatrY = 0;
          that.pageEndY = 0;
        }
      }, 1);
    },
    //获取向下滑动的值
    touchStart(res) {
      this.pageStatrY = res.changedTouches[0].pageY;
    },
    //获取向上滑动的值
    touchEnd(res) {
      this.pageEndY = res.changedTouches[0].pageY;
    },
    // 视频列表数据
    getList() {
      // 设置状态为加载中
      this.status = "loading";
      uni.$u.http
        .get("/api/Video/getList", {
          params: {
            page: 1,
            type: 1,
          },
        })
        .then((res) => {
          // 获取到的数据，请注意数据结构
          // 第一页数据执行以下代码
          this.videoList = res.data;
        })
        .catch((res) => {});
    },
    reportClick() {
      if (this.$store.state.isLogin != 1) {
        this.$toUrl('/pages/login/login')
        return
      }
      this.reportShow = true;
      this.show = false;
    },
    // 举报成功
    report() {
      // 这个举报的接口我用了post和get请求传视频id过去给你都不行
      uni.$u.http
        .get("api/Reportuser/insert", {
          id: this.reportId,
        })
        .then((res) => {
          this.$refs.uToast.show({
            type: "success",
            title: "默认主题",
            message: this.$t('video.lab14'),
            iconUrl: "",
          });
          console.log(res);
        })
        .catch((res) => {});

      this.reportShow = false;
    },
    // 收藏
    collection() {
      if (this.$store.state.isLogin != 1) {
        this.$toUrl('/pages/login/login')
        return
      }
      this.$refs.uToast.show({
        type: "success",
        title: "默认主题",
        message: this.$t('video.lab15'),
        iconUrl: "",
      });
    },
    // 分享
    shareLive() {
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        alert("Please click [Open in Browser] in the upper right corner");
      } else {
        // var nativeShare = new NativeShare()
        // var shareData = {
        // 	title: '名字',
        // 	desc: '介绍',
        // 	link: 'https://m.onecric.tv/',
        // 	icon: '图标预留',
        // 	success: function() {
        // 		console.log('分享成功')
        // 	},
        // 	fail: function() {
        // 		console.log('分享失败')
        // 	}
        // }
        // nativeShare.setShareData(shareData)
        // this.shareNative() //调用分享回调
        navigator.share({
          title: "",
          text: "",
          url: "https://m.onecric.tv/",
        }); // 分享 MDN 的 URL
      }
    },
    // 分享回调
    shareNative() {
      try {
        nativeShare.call(command);
      } catch (err) {
        // 如果不支持，你可以在这里做降级处理
        alert(err.message);
      }
    },
    // 下载视频
    saveVideo() {
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        alert("Please click [Open in Browser] in the upper right corner");
      } else {
        this.downLoad(); //调用下载函数
        this.showVideo = false;
        uni.showLoading({
          title: "Downloading",
        });
      }
    },
    downLoad() {
      //测试发现，在pc端正常下载; 在移动端 qq浏览器，safari浏览器不能下载
      let that = this;
      let url = that.info.video[0].video;

      //**调用download.js下载，下载速度相对快一些**
      let downjs = require("./download.js"); //引用当前目录下的自定义函数
      let x = new XMLHttpRequest();
      x.open("GET", url, true);
      x.responseType = "blob";
      x.onload = function (e) {
        downjs(x.response, `${that.info.title}.mp4`, "video/mp4");
        uni.hideLoading();
        that.showVideo = true;
      };
      x.send();
    },
    // 关闭弹窗
    close() {
      console.log(11);
      this.show = false;
    },
    videometa: function (e) {
      var that = this;
      console.log(e);
      //获取系统信息
      wx.getSystemInfo({
        success(res) {
          //视频的高
          var height = e.detail.height;

          //视频的宽
          var width = e.detail.width;

          //算出视频的比例
          var proportion = height / width;

          //res.windowWidth为手机屏幕的宽。
          var windowWidth = res.windowWidth;
          //算出当前宽度下高度的数值
          that.height = proportion * windowWidth;
          that.width = windowWidth;
        },
      });
      var u = navigator.userAgent;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isAndroid) {
        this.muted = false;
      }
      if (isiOS) {
        /* 需要弹窗提示 播放声音 全局配置*/
        if (!this.isVoice) {
          this.isVoice1 = true;
        } else {
          // this.videoContext.muted(false)
          this.muted = false;
          this.isVoice1 = false;
        }
      }
    },
    numberToK(v) {
      return numberToK(v)
    },
    setVoice() {
      this.muted = false;
      this.isVoice1 = false;
      this.$store.state.isVoice = true;
    },
    setEg() {
      this.$refs.hbComment.commentInput();
    },
    like(commentId) {
      if (this.$store.state.isLogin != 1) {
        this.$toUrl('/pages/login/login')
        return
      }
      if (this.reqFlag) {
        uni.showToast({
          title: this.$t('common.frequent'),
          duration: 1000,
        });
        return;
      }
      this.reqFlag = true;
      uni.$u.http
        .post("api/Video_user/commentLikes", {
          id: commentId,
        })
        .then((res) => {
          this.$refs.hbComment.likeComplete(commentId);
          this.reqFlag = false;
        })
        .catch((res) => {
          this.reqFlag = false;
        });
    },
    add(req) {
      if (this.$store.state.isLogin != 1) {
        this.$toUrl('/pages/login/login')
        return
      }
      if (this.reqFlag) {
        uni.showToast({
          title: this.$t('common.frequent'),
          duration: 1000,
        });
        return;
      }
      this.reqFlag = true;
      // TODO 接入真实接口
      let params = {
        id: this.id,
        cid: req.pId,
        content: req.content,
      };
      uni.$u.http
        .post("api/Video_user/comment", params)
        .then((res) => {
          this.getComment(this.id);
          this.$refs.hbComment.addComplete();
          this.reqFlag = false;
        })
        .catch((res) => {
          this.reqFlag = false;
        });
    },
    getComment(articleId) {
      uni.$u.http
        .get("/api/Video/commentOneList", {
          params: {
            id: articleId,
          },
        })
        .then((res) => {
          this.commentData = {
            readNumer: 0,
            commentSize: res.total,
            comment: this.getTree(res.data),
          };
          this.info.comment_count = res.total;
        });
    },

    openComment() {
      this.showMask = true;
    },

    /* 播放视频 */
    videoPlay(index) {
      this.suspendChecked = false;
      if (this.videoPlays == false) {
        // this.videoindex = index
        // uni.createVideoContext(`myVideo$`).requestFullScreen()
        this.$refs.video[index].play();
        this.videoPlays = true;
      } else {
        this.suspendChecked = true;
        this.$refs.video[index].pause();
        this.videoPlays = false;
      }
    },
    // 列表按照父子转换成树
    getTree(data) {
      let result = [];
      let map = {};
      data.forEach((item) => {
        map[item.id] = item;
      });
      data.forEach((item) => {
        let parent = map[item.parentId];
        if (parent) {
          (parent.children || (parent.children = [])).push(item);
        } else {
          result.push(item);
        }
      });
      return result;
    },
    getVideo(item) {
      /* 添加视频观看量 */
      // uni.$u.http.get('/api/Video/getList',{params:{page:item.page}}).then(res=>{
      // 	res.data.filter(item1=>{
      // 		console.log(item1.id,item.id);
      // 		if(item1.id == item.id) {
      // 			console.log(item1);
      // 		}
      // 	})
      // 	// console.log(arr);
      // }).catch(res=>{})
      uni.$u.http
        .get("api/Video/addView", {
          params: {
            id: item,
          },
        })
        .then((res) => {
          let pages = getCurrentPages();
          let prevPage = pages[pages.length - 2]; //上一页页面实例
          prevPage.$vm.waterfall.list[0].likes = 100;
        })
        .catch((res) => {});
    },
    /* 关注 */
    attention(type) {
      if (this.$store.state.isLogin != 1) {
        this.$toUrl('/pages/login/login')
        return
      }
      uni.showLoading({
        title: this.$t('common.lab'),
      });
      uni.$u.http
        .post("/api/Member/attention", {
          id: this.info.uid,
        })
        .then((res) => {
          uni.hideLoading();
          this.getList();
          this.info.is_attention = type == 1 ? (type = 0) : (type = 1);
        });
    },
    /* 判断是否登录 未登录情况下只能停留3分钟 180秒 */
    getIsLogin() {
      let that = this;
      if (this.isLogin == 1) return;
      uni.$u.http.get('/api/universal/getHot', {}).then(res => {
        this.$store.state.system = res;
        if (!this.system.login_remind || Number(this.system.login_remind) > 5000) return;
        this.time1 = setTimeout((res) => {
          if (this.isLogin == 1) {
            return
          }
          localStorage.setItem('watchingOutSign', true)
          this.$toast("Please log in to continue watching the live broadcast");
          setTimeout((res1) => {
            this.$toUrl('/pages/login/login')
          }, 1500);
        }, this.system.login_remind * 60000);
      })
    },
    /* 视频点赞 */
    setVideoLike(type) {
      if (this.$store.state.isLogin != 1) {
        this.$toUrl('/pages/login/login')
        return
      }
      uni.showLoading({
        title: this.$t('common.lab'),
      });
      uni.$u.http
        .post("api/Video_user/likes", {
          id: this.id,
        })
        .then((res) => {
          this.info.is_likes = type == 1 ? 0 : 1;
          type == 1 ? this.info.likes-- : this.info.likes++;
          uni.hideLoading();
          // let pages = getCurrentPages();
          // let prevPage = pages[pages.length - 2]; //上一页页面实例
          // prevPage.$vm.waterfall.list[] = 1;
        })
        .catch((res) => {});
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #000;
}

#myVideo {
  width: 100%;
  // top: -100rpx;
}

#myVideo::v-deep .uni-video-control-button {
  display: none !important;
}

#myVideo::v-deep .uni-video-bar.uni-video-bar-full {
  position: absolute;
  bottom: 0px;
}

.Open {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -150rpx;
  z-index: 9999;
  color: #fff;
  width: 300rpx;
  // height: 100rpx;
  padding: 40rpx 0;
  text-align: center;
  border-radius: 10rpx;
  background-color: #dc3c23;
}

.video-main {
  height: 100vh;

  .suspend {
    position: absolute;
    width: 100rpx;
    height: 100rpx;
  }
}

.comment-box {
  height: 50vh;
  padding-bottom: 118rpx;
  position: relative;
}

.comment-input {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 99;
  background-color: white;
  padding: 18rpx 28rpx;

  image {
    width: 60rpx;
    height: 60rpx;
    margin-left: 16rpx;
  }

  text {
    color: #999;
  }

  view {
    color: #999;
    font-size: 28rpx;
    border-radius: 12rpx;
    padding: 22rpx 32rpx;
    background-color: #f5f5f5;

    image {
      width: 28rpx;
      height: 28rpx;
      margin-right: 32rpx;
    }
  }
}

.menues {
  color: #fff;
  width: 72rpx;

  image {
    width: 72rpx;
    height: 72rpx;
    margin-top: 30rpx;
  }

  .font24 {
    margin-top: 10rpx;
    text-align: center;
  }

  .more-popup {
    font-size: 12rpx;
    padding: 16rpx 32rpx;
  }

  .more-cancel {
    text-align: center;
    margin-top: 12rpx;
    margin-bottom: 30rpx;
    font-size: 14rpx;
  }
}

.meun {
  color: #fff;
  position: absolute;
  // bottom: 30%;
  right: 34rpx;
  width: 72rpx;

  image {
    width: 72rpx;
    height: 72rpx;
    margin-top: 30rpx;
  }

  .font24 {
    margin-top: 10rpx;
    text-align: center;
  }

  .more-popup {
    font-size: 12rpx;
    padding: 16rpx 32rpx;
  }

  .more-cancel {
    text-align: center;
    margin-top: 12rpx;
    margin-bottom: 30rpx;
    font-size: 14rpx;
  }
}

.foot {
  color: #fff;
  position: fixed;
  bottom: 120rpx;
  right: 24rpx;
  left: 24rpx;

  image {
    width: 72rpx;
    height: 72rpx;
    border-radius: 50%;
  }

  .btn {
    font-size: 24rpx;
    padding: 8rpx 26rpx;
    border-radius: 6px 6px 6px 6px;
    background: linear-gradient(90deg, #dc3c23 0%, #dc3c23 100%);
  }

  .active {
    background: #ccc;
  }

  .content {
    margin-top: 24rpx;
    -webkit-line-clamp: 4;
    // padding-bottom: 60rpx;
  }
}
</style>