deming/pageB/video/video.nvue
2020-08-09 19:08:12 +08:00

239 lines
6.8 KiB
Plaintext

<template>
<view>
<video id="videoId" :style="videoSize" :src="src" autoplay="true" :show-fullscreen-btn="false" @play="playing" @timeupdate="timeupdate"
:show-play-btn="false" controls="false" @click="stoping" :enable-progress-gesture="false"></video>
<cover-image class="close" @click="goBack" src="../../static/close.png">
</cover-image>
<cover-image class="pause" @click="stoping" src="../../static/videoPlay.png" v-if="!is_play">
</cover-image>
<!-- 用户操作 -->
<userinfo class="user-info" :list="list" :cart="cart_type" :comment="is_comment" :num="comment_num" @openCart="openPopup"></userinfo>
<cover-view class="info-box">
<view class="video-info-box">
<image class="image-play" src="../../static/videoIcon.png" mode=""></image>
<text class="video-slip">视频</text>
<text class="time">{{ time_count == 1 ? 0 : time_count }}s</text>
</view>
<view>
<text class="name">@{{ list.member_nickname }}</text>
</view>
<view>
<text class="title">{{ list.article_title }}</text>
</view>
<view>
<text class="centent">{{ list.article_content }}</text>
</view>
<view class="label-box">
<block v-for="(item,index) in list.label" :key="index">
<text class="label" :style="{ width: labelLen[index] * 40 + 'rpx' }">{{ item.name }}</text>
</block>
</view>
</cover-view>
</view>
</template>
<script>
import userinfo from "../components/userinfo/index" // 点赞组件
export default {
components:{
userinfo
},
data() {
return {
videoSize: {},
list: {},
labelLen: [],
cart_type: false, // 显示购物车
is_comment: false, // 显示评论
comment_num: 0, // 评论数
src: "",
is_play: true,
time_count: 0,
linear: null,
};
},
onLoad(option) {
this.getVideoInfo(option.id);
this.getInfo();
},
onReady() {
this.videoBox = uni.createVideoContext("videoId", this);
},
methods: {
// 获取信息
getVideoInfo(article_id) {
uni.request({
url: "https://dmmall.sdbairui.com/api/article/articleInfo",
method: "POST",
data: {
article_id: article_id
},
header: {
Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
},
success: (res) => {
this.list = res.data.data.info;
this.src = res.data.data.info.video_path;
let item = res.data.data.info.label;
let arr = [];
item.forEach(data => {
let str = escape(data.name);
if(str.indexOf('%u')){
// console.log(data.name);
arr.push(Math.floor(data.name.length / 2));
} else {
arr.push(data.name.length);
}
})
this.labelLen = arr;
}
})
},
// 获取手机信息
getInfo() {
uni.getSystemInfo({
success: (res) => {
this.videoSize = {
width: "750rpx",
height: res.screenHeight + "px"
}
}
})
},
// 播放
playing(e) {
// console.log(e);
if (e.type == "play") {
}
},
// 暂停
stoping() {
this.is_play = !this.is_play;
if (this.is_play) {
this.videoBox.play();
} else {
this.videoBox.pause();
}
},
// 监听视频
timeupdate(e) {
this.time_count = parseInt(e.detail.duration) - parseInt(e.detail.currentTime);
if (e.detail.duration == e.detail.currentTime) {
this.is_play = false;
}
// let num = parseInt((e.detail.currentTime/e.detail.duration)*100);
// this.linear = num + "%";
// console.log(this.time_count);
},
goBack() {
uni.navigateBack({
delta: 1
})
}
}
}
</script>
<style>
/* 关闭 */
.close {
position: fixed;
top: 80rpx;
right: 60rpx;
width: 30rpx;
height: 30rpx;
}
/* 暂停 */
.pause {
position: fixed;
top: 600rpx;
left: 330rpx;
width: 100rpx;
height: 100rpx;
}
/* 用户操作 */
.user-info {
position: fixed;
top: 360rpx;
right: 30rpx;
}
/* 底部信息 */
.info-box {
position: fixed;
bottom: 0;
left: 0;
padding: 30rpx;
}
.video-info-box {
flex-direction: row;
align-items: center;
width: 160rpx;
height: 40rpx;
padding: 4rpx 10rpx;
margin-bottom: 20rpx;
color: #666666;
border-radius: 10rpx;
background-color: rgba(255, 255, 255, .6);
}
.image-play {
width: 22rpx;
height: 20rpx;
margin-right: 10rpx;
}
.video-slip {
color: #666;
font-size: 24rpx;
margin-right: 20rpx;
}
.time {
color: #666;
font-size: 24rpx;
}
.name {
color: #fff;
font-size: 36rpx;
margin-bottom: 20rpx;
}
.title {
color: #fff;
font-size: 26rpx;
margin-bottom: 20rpx;
}
.centent {
width: 500rpx;
color: #fff;
font-size: 28rpx;
margin-bottom: 20rpx;
lines: 2;
text-overflow: ellipsis;
}
.label-box {
flex-direction: row;
}
.label {
lines: 3;
width: 100rpx;
height: 40rpx;
padding: 4rpx 10rpx;
margin-right: 10rpx;
margin-bottom: 10rpx;
font-size: 26rpx;
text-align: center;
color: #666666;
border-radius: 10rpx;
background-color: rgba(255, 255, 255, .6);
}
</style>