uniapp/pagesVideo/video/index.vue

<template>
	<view class="content">
		<view class="one">
			<video :src="info.vUrl" :poster="info.iUrl" :title="info.title" controls :show-center-play-btn="false"
				:show-mute-btn="true" :enable-play-gesture="true" :vslide-gesture-in-fullscreen="true"></video>
		</view>
		<view class="two">
			<view class="two_1">
				<view :class="['list',active==index?'active':'']" v-for="(item,index) in tabList" :key="index"
					@tap="tabChange(index)">
					<span>{{item.title}}</span>
				</view>
			</view>
			<view class="two_2">
				<view class="tab_1" v-if="active===0">
					<view class="title">
						<span>标题：</span>
						<span>{{info.title}}</span>
					</view>
					<view class="actor">
						待写
					</view>
					<view class="brief">
						<span>简介：</span>
						<span>{{info.brief}}</span>
					</view>
					<view class="other">
						<view class="other_1">
							相关视频
						</view>
						<view class="other_2">
							<view class="firmvideoList" v-for="(item,index) in firmvideoList" :key="index"
								@tap="videoView(item)">
								<image class="image" :src="item.img_url&&item.img_url.length>0?item.img_url[0].url:''"
									mode="">
								</image>
								<view class="name textOver">
									{{item.title}}
								</view>
								<view class="other">
									<view class="other_1">
										<uni-icons type="eye" color="var(--rgbfff)" size="12"></uni-icons>
										{{item.view_num}}
									</view>
									<view class="other_2">
										{{item.time_num}}
									</view>
								</view>
							</view>
						</view>

					</view>
				</view>
				<view class="tab_2" v-else-if="active===1">
					第二部分
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				info: {},
				// 相关视频
				firmvideoList: [],
				tabList: [ // 选项卡
					{
						title: '详情'
					},
					{
						title: '评论'
					}
				],
				active: 0,

			}
		},
		onLoad(options) {
			const that = this;
			that.$set(that, `id`, options.id || '63fd915b134900004000482c')
			that.search()
		},
		methods: {
			async search() {
				const that = this;
				let res;
				res = await that.$api(`videos/${that.id}`, 'GET', {})
				if (res.errcode == '0') {
					// 赋值名字
					let data = res.data;
					uni.setNavigationBarTitle({
						title: data.title
					});
					if (data.video_url && data.video_url.length > 0) data.vUrl = data.video_url[0].url;
					if (data.img_url && data.img_url.length > 0) data.iUrl = data.img_url[0].url;
					if (data && data.head_actor) data.head_actor_name = await that.searchNmae(data.head_actor)
					that.$set(that, `info`, data);
					// 查询相关视频,相同厂商
					that.searchfirm(data.firm_id)
				}
			},
			// 其他信息
			async searchNmae(e) {
				const that = this;
				let res;
				res = await that.$api(`scenedata/${e}`, 'GET', {});
				if (res.errcode == '0') {
					if (res.data && res.data.title) return res.data.title
					else return '暂无'
				}
			},
			async searchfirm(firm_id) {
				const that = this;
				let res;
				res = await that.$api('videos', 'GET', {
					firm_id: firm_id,
					skip: 0,
					limit: 6
				})
				if (res.errcode == '0') {
					that.$set(that, `firmvideoList`, res.data)
				}
			},
			// 视频查看
			videoView(e) {
				uni.navigateTo({
					url: `/pagesVideo/video/index?id=${e._id}`
				})
			},
			tabChange(e) {
				const that = this;
				that.$set(that, `active`, e)
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: var(--rgb111);
		overflow: hidden;

		.one {
			padding: 0 2vw;
			margin: 0 0 2vw 0;

			video {
				width: 100%;
				height: 210px;
				overflow: hidden;
				border: 1px solid var(--rgbf1f);
			}
		}

		.two {
			position: relative;
			flex-grow: 1;
			padding: 0 2vw;

			.two_1 {
				display: flex;
				justify-content: space-around;
				margin: 0 0 2vw 0;

				.list {
					span {
						background-color: var(--rgbfff);
						color: var(--rgb000);
						padding: 1vw 4vw;
						font-size: 14px;
						border-radius: 5px;
					}
				}

				.active {
					span {
						background-color: var(--rgbfa4);
						color: var(--rgbfff);
					}
				}
			}

			.two_2 {
				.tab_1 {
					display: flex;
					flex-direction: column;
					width: 96vw;
					height: 58vh;
					overflow-y: auto;

					.title {
						font-size: 15px;
						color: var(--rgbfff);
						margin: 0 0 2vw 0;
					}

					.actor {
						margin: 0 0 2vw 0;
					}

					.brief {
						font-size: 15px;
						color: var(--rgbfff);
						margin: 0 0 2vw 0;
					}

					.other {
						margin: 0 0 2vw 0;

						.other_1 {
							font-size: 15px;
							color: var(--rgbfff);
							margin: 0 0 2vw 0;
						}

						.other_2 {
							display: flex;
							flex-wrap: wrap;

							.firmvideoList {
								width: 48%;
								margin: 0 10px 5px 0;

								.image {
									width: 100%;
									height: 100px;
									overflow: hidden;
									border-radius: 5px;
									box-shadow: 0 0 5px var(--rgbf1f);
									margin: 0 0 5px 0;
								}

								.name {
									font-size: 14px;
									color: var(--rgbfff);
									margin: 0 0 5px 0;
								}

								.other {
									display: flex;
									color: var(--rgbfff);
									font-size: 12px;
									justify-content: space-between;
								}
							}

							.firmvideoList:nth-child(2n) {
								margin: 0 0 5px 0;
							}
						}
					}
				}

				.tab_2 {}
			}
		}
	}
</style>