|
|
@@ -0,0 +1,209 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="video_play" v-if="videoInfo.video_src">
|
|
|
+ <video id="myVideo" class="video_control" :src="videoInfo.video_src" @timeupdate="timeUpdate" :enable-progress-gesture="false" :enable-play-gesture="true"></video>
|
|
|
+ </view>
|
|
|
+ <view class="video_title">{{videoInfo.name}}</view>
|
|
|
+ <view class="rich_text">
|
|
|
+ <rich-text :nodes="videoInfo.content"></rich-text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ videoInfo:{
|
|
|
+ id:0,
|
|
|
+ name:"",
|
|
|
+ content:"",
|
|
|
+ video_src:""
|
|
|
+ },
|
|
|
+ // 请求参数
|
|
|
+ requestParam: {
|
|
|
+ id: 0
|
|
|
+ },
|
|
|
+ isReqing:false,
|
|
|
+ videoContext:null,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(param) {
|
|
|
+ // 参数接收
|
|
|
+ this.requestParam.id = param.id;
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ //分享按钮
|
|
|
+ uni.showShareMenu({
|
|
|
+ withShareTicket: true,
|
|
|
+ menus: ["shareAppMessage", "shareTimeline"],
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+ onShareAppMessage(obj) {
|
|
|
+ return {
|
|
|
+ title: `999智控终端平台\n${this.videoInfo.title}`,
|
|
|
+ path: "/pages/video/detail?id=" + this.videoInfo.id,
|
|
|
+ promise: new Promise((resolve, reject) => {
|
|
|
+ this.$http.request("api/share_message/get_item", { item_id: this.videoInfo.id, pages: "/pages/video/detail" }).then((callback) => {
|
|
|
+ console.log(callback, "api/share_message/get_item");
|
|
|
+ let obj = {
|
|
|
+ title: callback.data?.title == "" ? `999智控终端平台\n${this.videoInfo.title}` : callback.data.title,
|
|
|
+ path: "/pages/video/detail?id=" + this.videoInfo.id,
|
|
|
+ };
|
|
|
+ if (callback.data?.image_url !== "") {
|
|
|
+ obj.imageUrl = callback.data.image_url;
|
|
|
+ }
|
|
|
+ resolve(obj);
|
|
|
+ });
|
|
|
+ }),
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onReady: function (res) {
|
|
|
+
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ // 如果存在产品ID的话
|
|
|
+ if (this.requestParam.id > 0) {
|
|
|
+ // 请求详情
|
|
|
+ this.$http.request("api/video_course/get_detail", this.requestParam).then((re) => {
|
|
|
+ // 成功渲染数据
|
|
|
+ if (re.code == "success") {
|
|
|
+ // 刷新数据
|
|
|
+ this.videoInfo = re.data;
|
|
|
+ // 获取视频容器的上下文
|
|
|
+ this.videoContext = uni.createVideoContext('myVideo');
|
|
|
+ // 暂停播放
|
|
|
+ this.videoContext.stop();
|
|
|
+ } else {
|
|
|
+ if (re.code != "no_login") {
|
|
|
+ uni.showModal({
|
|
|
+ content: re.msg,
|
|
|
+ showCancel: false,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ timeUpdate(event){
|
|
|
+ // 播放到对应的
|
|
|
+ if( event.detail.currentTime ){
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ .video_play{
|
|
|
+ width: 750rpx;
|
|
|
+ display: block;
|
|
|
+ font-size: 36rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 60rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ .video_control{
|
|
|
+ width: 750rpx;
|
|
|
+ display: block;
|
|
|
+ font-size: 36rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 60rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .video_title{
|
|
|
+ width: 700rpx;
|
|
|
+ display: block;
|
|
|
+ font-size: 36rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 60rpx;
|
|
|
+ padding: 0rpx 25rpx;
|
|
|
+ padding-top: 60rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .video_time{
|
|
|
+ width: 700rpx;
|
|
|
+ color: #999999;
|
|
|
+ display: block;
|
|
|
+ font-size: 26rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ line-height: 40rpx;
|
|
|
+ padding: 0rpx 25rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .rich_text{
|
|
|
+ width: 700rpx;
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 26rpx;
|
|
|
+ margin: 0rpx auto;
|
|
|
+ min-height: 800rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ padding: 10rpx 25rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ [alt] {
|
|
|
+ //web_view图片
|
|
|
+ max-width: 100%; // 避免图片超宽
|
|
|
+ vertical-align: bottom; // 避免图片之间间隙
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .video_poster{
|
|
|
+ width: 700rpx;
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 6rpx auto;
|
|
|
+ padding: 10rpx 25rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ .poster_img{
|
|
|
+ width: 700rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .read_total{
|
|
|
+ width: 700rpx;
|
|
|
+ color: #999999;
|
|
|
+ display: block;
|
|
|
+ font-size: 26rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ line-height: 60rpx;
|
|
|
+ padding: 0rpx 25rpx;
|
|
|
+ margin-bottom: 122rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .handle_box {
|
|
|
+ left: 0rpx;
|
|
|
+ width: 700rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ display: block;
|
|
|
+ position: fixed;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 20rpx 25rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ bottom: var(--window-bottom);
|
|
|
+ border-top: 2rpx solid #DDDDDD;
|
|
|
+ .click_box{
|
|
|
+ border: none;
|
|
|
+ float: right;
|
|
|
+ display: block;
|
|
|
+ height: 120rpx;
|
|
|
+ padding: 0rpx 0rpx;
|
|
|
+ line-height: 120rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ font-size: 24rpx !important;
|
|
|
+ background-color: transparent;
|
|
|
+ .uni-icons{
|
|
|
+ font-size: 36rpx !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .click_box::after{
|
|
|
+ border: none;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
