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="btn">
						<view class="btn_1" @tap="toLikes()">
							<span class="span">
								<uni-icons :type="likeInfo.is==true?'heart-filled':'heart'" size="15"
									color="va(--rgbfff)">
								</uni-icons>
								<span>喜欢</span>
							</span>
						</view>
						<view class="btn_1" @tap="toCollects()">
							<span class="span">
								<uni-icons :type="collectInfo.is==true?'heart-filled':'heart'" size="15"
									color="va(--rgbfff)">
								</uni-icons>
								<span>收藏</span>
							</span>
						</view>
						<view class="btn_1" @tap="toShare()">
							<span class="span">
								<uni-icons type="redo-filled" size="15" color="va(--rgbfff)"></uni-icons>
								<span>分享</span>
							</span>
						</view>
					</view>
					<view class="title">
						<span>
							<uni-icons type="heart-filled" size="15" color="var(--rgbfff)"></uni-icons>：
						</span>
						<span>{{info.title}}</span>
					</view>
					<view class="actor">
						<span>
							<uni-icons type="person-filled" size="15" color="var(--rgbfff)"></uni-icons>：
						</span>
						<span
							@tap="toCommon('pagesVideo/more/index',`head_actor=${info.head_actor}`)">{{info.head_actor_name}}</span>
					</view>
					<view class="actor">
						<view class="actor_1">
							<uni-icons type="staff" size="15" color="var(--rgbfff)"></uni-icons>：
						</view>
						<view class="actor_2">
							<scroll-view class="actor_scroll_view" scroll-x="true">
								<view class="actorList" v-for="(item,index) in info.actorList" :key="index"
									@tap="toCommon('pagesVideo/more/index',`head_actor=${item._id}`)">
									<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>
							</scroll-view>

						</view>
					</view>
					<view class="brief">
						<span>
							<uni-icons type="star-filled" size="15" color="var(--rgbfff)"></uni-icons>：
						</span>
						<span>{{info.brief}}</span>
					</view>
					<view class="other">
						<view class="other_1">
							<uni-icons type="videocam-filled" size="15" color="var(--rgbfff)"></uni-icons>：
						</view>
						<view class="other_2" s>
							<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">
					<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage" @scroll="toScroll">
						<view class="list-scroll-view">
							<view class="tab_2_1">
								<view class="discussList" v-for="(item,index) in discussList" :key="index">
									<view class="dis_1">
										<view class="l">
											<image class="image"
												:src="item.user_img_url&&item.user_img_url.length>0?item.user_img_url[0].url:''"
												mode="">
										</view>
										<view class="c">
											{{item.user_name}}
										</view>
										<view class="r">
											{{item.create_time}}
										</view>
									</view>
									<view class="dis_2">
										{{item.content}}
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="chatBtn">
						<button size="mini" @tap="diaChat">评论</button>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="dialog" type="dialog">
			<uni-popup-dialog mode="input" title="评论" :before-close="true" @close="diaClose" @confirm="diaSave">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 基本信息
				basicInfo: {},
				// 用户信息
				user: {},
				// 获取当前地址
				locationInfo: {},
				id: '',
				info: {
					// 其他演员
					actorList: []
				},
				tabList: [ // 选项卡
					{
						title: '详情'
					},
					{
						title: '评论'
					}
				],
				active: 0,
				// 详情-start
				firmvideoList: [ // 相关视频
				],
				// 是否喜欢
				likeInfo: {},
				// 是否收藏
				collectInfo: {},
				// 详情-ends
				// 讨论-start
				discussList: [],
				dtotal: 0,
				dpage: 0,
				dskip: 0,
				dlimit: 5,
				// 数据是否触底
				is_bottom: false,
				scrollTop: 0,
				// 讨论-end
			}
		},
		onShow() {
			const that = this;
			// 基本信息
			that.searchBasic();
			// 获取当前地址
			that.searchLocal();
			// 已登录，相关信息查询
			that.searchUser();
		},
		onLoad(options) {
			const that = this;
			that.$set(that, `id`, options.id || '63fd915b134900004000482c');
			// 详细信息
			that.search()
			// 查看评论
			that.searchDiscuss();
		},
		methods: {
			// 基本信息
			searchBasic() {
				const that = this;
				uni.getStorage({
					key: 'basicInfo',
					success: (res) => {
						let data = res.data
						data.account_btn = data.account_btn.sort((a, b) => {
							return a.sort - b.sort
						});
						that.$set(that, `basicInfo`, data);
					}
				})
			},
			// 获取当前地址
			searchLocal() {
				const that = this;
				// 获取位置信息,待做
				// uni.getLocation({
				// 	type: 'gcj02',
				// 	isHighAccuracy: true,
				// 	geocode: true,
				// 	success: (res) => {
				// 		console.log(res);
				// 	},
				// 	fail: (err) => {
				// 		console.log(err);
				// 	}
				// })
			},
			// 查询用户
			searchUser() {
				const that = this;
				uni.getStorage({
					key: 'token',
					success: (res) => {
						let user = that.$jwt(res.data);
						that.$set(that, `user`, user);
						// 已有用户信息,查询是否喜欢/收藏
						that.searchLikes();
						that.searchCollects();
					},
					fail: (err) => {
						console.log('暂无用户信息');
					}
				})
			},
			// 查询喜欢
			async searchLikes() {
				const that = this;
				let user = that.user;
				let res = await that.$api('likes/selikes', 'POST', {
					user_id: user._id,
					video_id: that.id
				})
				if (res.errcode == '0') {
					that.$set(that, `likeInfo`, res.data)
				}
			},
			// 查询收藏
			async searchCollects() {
				const that = this;
				let user = that.user;
				let res = await that.$api('collects/secollects', 'POST', {
					user_id: user._id,
					video_id: that.id
				})
				if (res.errcode == '0') {
					that.$set(that, `collectInfo`, res.data)
				}
			},
			// 详细信息
			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.searchName(data.head_actor);
					if (data && data.actor && data.actor.length > 0) data.actorList = await that
						.searchlistName(data
							.actor);

					that.$set(that, `info`, data);
					// 观看次数统计
					that.updateNum(data);
					// 查询相关视频,相同厂商
					that.searchfirm(data.firm_id);
				}
			},
			// 领衔演员姓名
			async searchName(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 searchlistName(e) {
				const that = this;
				let list = [];
				for (let val of e) {
					let res = await that.$api(`scenedata/${val}`, 'GET', {})
					if (res.errcode = '0') {
						list.push({
							_id: res.data._id,
							title: res.data.title,
							img_url: res.data.img_url
						})
					}
				}
				return list
			},
			// 观看次数统计
			async updateNum(e) {
				const that = this;
				let data = {
					id: e.id,
					view_num: e.view_num + 1
				}
				let res = await that.$api(`videos/${data.id}`, 'POST', data)
				if (res.errcode == '0') {
					console.log('观看统计完成，+1');
				}
			},
			// 相同厂商其他视频
			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)
				}
			},
			// 选项卡选择
			tabChange(e) {
				const that = this;
				that.$set(that, `active`, e)
			},
			// 视频查看
			videoView(e) {
				uni.navigateTo({
					url: `/pagesVideo/video/index?id=${e._id}`
				})
			},
			// 更多
			toCommon(route, query) {
				uni.navigateTo({
					url: `/${route}?${query}`
				})
			},
			// 我的喜欢
			async toLikes() {
				const that = this;
				let user = that.user;
				let info = that.info;
				let res;
				if (user && user._id) {
					let data = {
						user_id: user._id,
						user_name: user.nick_name,
						video_id: info._id,
						title: info.title,
						img_url: info.img_url,
						view_num: info.view_num,
						time_num: info.time_num,
						follow_time: that.$moment().format('YYYY-MM-DD HH:mm:ss'),
					}
					if (that.likeInfo && that.likeInfo.is == true) {
						res = await that.$api(`likes/${that.likeInfo.id}`, 'delete', {})
						if (res.errcode == '0') {
							uni.showToast({
								title: '取消喜欢成功!',
								icon: 'success'
							})
							that.searchLikes()
						} else {
							uni.showToast({
								title: res.errmsg,
								icon: 'none'
							})
						}
					} else {
						res = await that.$api('likes', 'POST', data);
						if (res.errcode == '0') {
							uni.showToast({
								title: '关注喜欢成功!',
								icon: 'success'
							})
							that.searchLikes()
						} else {
							uni.showToast({
								title: res.errmsg,
								icon: 'none'
							})
						}
					}
				} else {
					uni.showToast({
						title: '暂无用户信息，无法关注喜欢！',
						icon: 'none'
					})
				}
			},
			// 我的收藏
			async toCollects() {
				const that = this;
				let user = that.user;
				let info = that.info;
				let res;
				if (user && user._id) {
					let data = {
						user_id: user._id,
						user_name: user.nick_name,
						video_id: info._id,
						title: info.title,
						img_url: info.img_url,
						time_num: info.time_num,
						follow_time: that.$moment().format('YYYY-MM-DD HH:mm:ss'),
					}
					if (that.collectInfo && that.collectInfo.is == true) {
						res = await that.$api(`collects/${that.collectInfo.id}`, 'delete', {})
						if (res.errcode == '0') {
							uni.showToast({
								title: '取消收藏成功!',
								icon: 'success'
							})
							that.searchCollects()
						} else {
							uni.showToast({
								title: res.errmsg,
								icon: 'none'
							})
						}
					} else {
						res = await that.$api('collects', 'POST', data);
						if (res.errcode == '0') {
							uni.showToast({
								title: '关注收藏成功!',
								icon: 'success'
							})
							that.searchCollects()
						} else {
							uni.showToast({
								title: res.errmsg,
								icon: 'none'
							})
						}
					}
				} else {
					uni.showToast({
						title: '暂无用户信息，无法关注收藏！',
						icon: 'none'
					})
				}
			},
			// 分享
			toShare() {
				const that = this;
				let system = that.$config.system
				let basicInfo = that.basicInfo;
				if (system.uniPlatform == 'app') {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 0,
						href: that.$config.app_url,
						title: system.appName,
						summary: "我正在玩自由天空，赶紧和我一起体验吧",
						imageUrl: basicInfo.logo_url && basicInfo.logo_url.length > 0 ? basicInfo.logo_url[
							0].url : '',
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
							uni.showToast({
								title: JSON.stringify(err),
								icon: 'none'
							})
						}
					});
				} else if (system.uniPlatform == 'mp-weixin') {
					uni.showToast({
						title: '小程序未开通分享功能！',
						icon: "none"
					})
				}
			},
			// 讨论
			async searchDiscuss() {
				const that = this;
				let info = {
					skip: that.dskip,
					limit: that.dlimit,
					video_id: that.id
				}
				let res = await that.$api('discuss', 'GET', {
					...info
				})
				if (res.errcode == '0') {
					let list = [...that.discussList, ...res.data]
					that.$set(that, `discussList`, list)
					that.$set(that, `dtotal`, res.total)
				}
			},
			// 打开评论
			diaChat() {
				const that = this;
				let user = that.user;
				if (user && user._id) {
					that.$refs.dialog.open()
				} else {
					uni.showToast({
						title: '暂无用户信息，无法发表评论',
						icon: 'none'
					})
				}
			},
			// 提交
			async diaSave(e) {
				const that = this;
				let user = that.user;
				if (user && user._id) {
					if (e) {
						let data = {
							user_id: user._id,
							user_name: user.nick_name,
							user_img_url: user.logo_url,
							video_id: that.info._id,
							video_title: that.info.title,
							content: e,
							create_time: that.$moment().format('YYYY-MM-DD HH:mm:ss'),
						}
						let res = await that.$api('discuss', 'POST', data)
						if (res.errcode == '0') {
							uni.showToast({
								title: '评论成功!',
								icon: 'success'
							})
							that.dclearPage()
							that.searchDiscuss()
							that.diaClose()
						} else {
							uni.showToast({
								title: res.errmsg,
								icon: 'none'
							})
						}
					} else {
						uni.showToast({
							title: '暂无评论内容，无法发表评论',
							icon: 'none'
						})
					}
				} else {
					uni.showToast({
						title: '暂无用户信息，无法发表评论',
						icon: 'none'
					})
				}

			},
			// 关闭
			diaClose() {
				const that = this;
				that.$refs.dialog.close()
			},
			toPage() {
				const that = this;
				let list = that.discussList;
				let limit = that.dlimit;
				if (that.dtotal > list.length) {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					let page = that.dpage + 1;
					that.$set(that, `dpage`, page)
					let skip = page * limit;
					that.$set(that, `dskip`, skip)
					that.searchDiscuss();
					uni.hideLoading();

				} else that.$set(that, `is_bottom`, true)
			},
			toScroll(e) {
				const that = this;
				let up = that.scrollTop;
				that.$set(that, `scrollTop`, e.detail.scrollTop);
				let num = Math.sign(up - e.detail.scrollTop);
				if (num == 1) that.$set(that, `is_bottom`, false);
			},
			// 清空评论列表
			dclearPage() {
				const that = this;
				that.$set(that, `discussList`, [])
				that.$set(that, `dskip`, 0)
				that.$set(that, `dlimit`, 5)
				that.$set(that, `dpage`, 0)
			},
		}
	}
</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 3vw 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: 57vh;
					overflow-y: auto;
					padding: 1vw 0 0 0;

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

						.btn_1 {
							.span {
								display: inline-block;
								background-color: var(--rgb313);
								color: var(--rgbfff);
								padding: 1vw 4vw;
								border-radius: 5px;

								span {
									font-size: 14px;
									padding: 0 0 0 1vw;
								}
							}
						}
					}

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

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

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

						.actor_2 {
							.actor_scroll_view {
								white-space: nowrap;

								.actorList {
									display: inline-block;
									text-align: center;
									margin: 0 6px 0 0;

									.image {
										width: 66px;
										height: 66px;
										overflow: hidden;
										border-radius: 90%;
									}

									.name {
										font-size: 15px;
									}
								}
							}


						}
					}

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

					.other {

						.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 {
					display: flex;
					flex-direction: column;
					width: 96vw;
					height: 57vh;
					overflow-y: auto;
					padding: 1vw 0 0 0;
					position: relative;

					.tab_2_1 {
						display: flex;
						flex-direction: column;

						.discussList {
							margin: 0 0 2vw 0;
							background-color: var(--rgb000);
							padding: 2vw;
							border-radius: 5px;

							.dis_1 {
								display: flex;
								margin: 0 0 1vw 0;

								.l {
									width: 8vw;
									height: 8vw;
									margin: 0 2vw 0 0;

									.image {
										width: 100%;
										height: 100%;
										border-radius: 90%;
									}
								}

								.c {
									flex-grow: 1;
									font-size: 14px;
									color: var(--rgbfff);
									padding: 1vw 0;
								}

								.r {
									font-size: 12px;
									color: var(--rgbf1f);
									padding: 2vw 0 0 0;
								}
							}

							.dis_2 {
								font-size: 15px;
								color: var(--rgbfff);
							}
						}
					}

					.chatBtn {
						position: fixed;
						width: 100vw;
						bottom: 5vw;
						right: 4vw;
						text-align: right;

						button {
							width: 50px;
							height: 50px;
							line-height: 50px;
							padding: 0;
							border-radius: 90%;
							font-size: 14px;
							font-weight: bold;
							background-color: var(--rgbfa4);
							color: var(--rgbfff);
						}
					}
				}
			}
		}
	}

	.scroll-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.list-scroll-view {
			display: flex;
			flex-direction: column;
		}
	}

	.is_bottom {
		text-align: center;

		text {
			padding: 2vw 0;
			display: inline-block;
			color: #858585;
			font-size: 14px;
		}
	}
</style>