WebDevelopmentFramework/pages/video/video.vue

<template>
	<view class="container">
		<view class="list-icon"></view>
		<view class="title">{{videoName}}</view>
		<video class="video" id="myVideo" ref="video1" :src="videoUrl"
				 loop=true
				 enable-danmu danmu-btn controls enable-progress-gesture show-mute-btn
				></video>
		<!-- <view class="video"></view> -->
		<view class="jieshao">{{videoDescription}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoUrl:'',//视频链接
				videoDescription:'',
				videoName:'',//视频名
				id:'',
				list:[],//当前页面数据
				resultDecodeN:'',//解密后
				token:'',//缓存token
			}
		},
		onLoad(option) {
			// this.videoUrl=option.video
			// this.videoDescription=option.videoDescription
			// this.videoName=option.videoName
			this.id=option.id
			this.token=wx.getStorageSync('token')
			this.getList()
		},
		methods: {
			getList(){
				this.$axios.get('/shareVideo/api/video/video',
				{
					headers:{
						'token':this.token
					}
				}
				).then(res => {
					if (res.data.success) {
						console.log(res.data)
						var shu=res.data.data
						// 开始解密
						this.resultDecodeN = this.$fns.rsaDecode(shu[0])+
						this.$fns.rsaDecode(shu[1])+this.$fns.rsaDecode(shu[2])+
						this.$fns.rsaDecode(shu[3])+this.$fns.rsaDecode(shu[4])+
						this.$fns.rsaDecode(shu[5])+this.$fns.rsaDecode(shu[6])+
						this.$fns.rsaDecode(shu[7])+this.$fns.rsaDecode(shu[8])+
						this.$fns.rsaDecode(shu[9])
						//解析
						console.log(JSON.parse(this.resultDecodeN));
						//获取数组
						JSON.parse(this.resultDecodeN).forEach(data => {
							this.list.push(data)
						})
						var length=JSON.parse(this.resultDecodeN).length
						//根据id判断
						for(var i=0;i<length;i++){
							console.log(this.list[i].id)
							if(this.id==this.list[i].id){
								this.videoUrl=this.list[i].videoUrl
								this.videoDescription=this.list[i].videoDescription
								this.videoName=this.list[i].videoName
							}
						}
					} else {
						uni.showToast({ title: res.data.message, icon: 'none' });
					}
				}).catch(res =>{
				});
			},
		}
	}
</script>

<style>
	.container {
		/* padding: 10px 20px 20px 15px; */
		font-size: 16px;
		line-height: 24px;
		background-image: url('../../static/video_bg.png');
		width: 749rpx;
		height: 1211rpx;
		background-size: 100%;
	}
	.list-icon{
		position: absolute;
		margin-left: 120rpx;
		margin-top: 203px;
		width: 8rpx;
		height: 32rpx;
		opacity: 1;
		border-radius: 33rpx;
		background: #1682AA;
	}
	.title{
		font-size: 22px;
		position: absolute;
		margin-left: 141rpx;
		margin-top: 382rpx;
		font-size: 34rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #1682AA;
	}
	.video{
		position: absolute;
		margin-left: 121rpx;
		margin-top: 439rpx;
		width: 506rpx;
		height: 347rpx;
	}
	.jieshao{
		position: absolute;
		margin-left: 121rpx;
		margin-top: 809rpx;
		
	}
</style>