sadjv3_user/pages/videoCircle/gDvideo.vue

<!-- 滑动切换选项卡+吸顶演示（待完善） -->
<template>
	<view class="content">
		<view class="top-view">
			<image class="info-cover"
				src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5d36bb3d-8e98-4f00-ab8b-b018dc4f5dc6/17b0292c-8a63-4b7b-a6a6-724f416a9958.jpg"
				mode="scaleToFill"></image>
			<!-- 用户头像关注 -->
			<view class="u-flex-wrap"
				style="padding-top: 18rpx;padding-bottom: 18rpx;position: relative;align-items: center;display: flex;flex-direction: row;justify-content: flex-end;">
				<view class="info-avatar">
					<u-avatar :src="order.artificerImg" size="135"></u-avatar>
					<view class="pingfen keyuyue">
						<view class="flex">
							<view class="timea-fu">
								评分
							</view>
							<view class="timea-time">{{ordersScore}}</view>
						</view>
					</view>
					
				</view>
				<view class="oder-mian-guan" style="margin-right: 20px;">
					<view :class="[isFollow?'activeG':'activeQ']" @click="guanzhu(order)">
						<span class="oder-mian-text">收藏</span>
					</view>
				</view>
				<!-- <view style="margin-right: 50rpx;">
					<u-tag v-if='showedit' text="关注" mode="dark" shape="" bg-color="#f5991e" @click="UserEdit" />
					<view v-if='!showedit' style="height: 45rpx;"></view>
				</view> -->
			</view>
			<!-- 用户名 -->
			<view style="display: flex;align-items: center;margin-left: 50rpx;margin-top: 20rpx;"
				v-if="order.length!=0">
				<text
					style="font-size: 32rpx;color: #111111;font-weight: bold;margin-right: 10rpx;">{{order.artificerName}}</text>
				<view class="headset-line">
					<image class="headset-img"
						:src="order.technicianType=='3'?'../../static/vip/grade1.gif':order.technicianType=='4'?'../../static/vip/grade2.gif':'../../static/vip/grade3.gif'"
						mode=""></image>
					<span class="headset-text2">{{order.technicianTypeName}}</span>
				</view>
			</view>
			<!-- 简介-->
			<view style="font-size: 24rpx;margin:20rpx 50rpx;">
				<text style="margin-right: 20rpx;color: #777;">{{order.content==''?'暂无简介':order.content}}</text>
			</view>
			
		</view>
		<scroll-view v-if="getVideoData.length>0" scroll-y="true" class="scroll-Y" @scrolltolower="loadMore">
			<template class="template-view">
				<view class="scroll-list" v-for="(item,index) in getVideoData" :key="index">
					<view class="scroll-left">
						<span class="scroll-left-day">{{item.day}}</span>
						<span class="scroll-left-mon">{{item.month}}月</span>
					</view>
					<view class="scroll-right">
						<view class="scroll-right-title">
							{{item.content}}
						</view>
						<view class="data-list">
							<view class="videoHovers" @click="towxh5Video(item)">
								<image src="@/static/bofang.png"></image>
							</view>
							<view class="playState">
								<img :src="item.picPath"  style="border-radius: 10px;width: 100%; height: 100%;"></img>
							</view>
						</view>
						<view class="scroll-bottom">
							<view class="pinglun">
								<image src="../../static/pinglun.png" mode=""></image>
								<span>{{item.pls}}</span>
							</view>
							<view class="pinglun" style="margin-left: 20px;">
								<image src="../../static/guanzhu.png" mode=""></image>
								<span>{{item.dzs}}</span>
							</view>
						</view>
					</view>
				</view>
				<view class="t-loading-box" v-if="loadingType!=3" @click="loadMore">
					<view class="t-line"></view>
					<view class="t-loading-text">
						<view class="loading" v-if="loadingType==2"></view>
						<text>{{loadingText[loadingType]}}</text>
					</view>
					<view class="t-line"></view>
				</view>
			</template>
		</scroll-view>
		<empty v-if="getVideoData.length==0"></empty>
		<uni-popup style="width: 100%;height: 100vh;" type="center" ref="pinglun" @touchmove.stop.prevent="moveHandle">
			<view style="width: 100%;height: 100%;position: relative;">
				<video
					id="myVideo"
					style="width: 100%;height: 100%;"
					:show-fullscreen-btn='false'
					:enable-play-gesture='true'
					:autoplay="true"
					:show-play-btn='false'
					:show-center-play-btn='false'
					 @click="jieshu"
					:src="filePath"></video>
				<view class="videoConten">{{contentVideo}}</view>
				<view class="videoHover" v-if="playShow==true" @click="kaishi">
					<image src="@/static/bofang.png"></image>
				</view>
				<view class="guanbi" @click="guanbi">
					<image src="@/static/closeimg.png"></image>
				</view>	
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	export default {
		components:{empty},
		data() {
			return {
				isFollow: false,
				Information:'',
				loadingType: 0,
				membertype: '',
				showedit: true, //信息编辑按钮
				artificerId: '',
				latitude: '',
				longitude: '',
				order: [],
				myId: '',
				page:1,
				limit:10,
				playShow:false,
				filePath:'',
				contentVideo:'',
				videoId:'',
				getVideoData:[],
				//上拉状态文字
				loadingText : ["上拉或点击加载更多","已加载全部数据",'加载中',''],
				ordersScore:''
			}
		},

		onLoad(e) {
			this.artificerId = e.artificerId;
			this.latitude = uni.getStorageSync('latitude');
			this.longitude = uni.getStorageSync('longitude');
			this.myId = uni.getStorageSync('userId');
			this.getData();
			this.getVideo();
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getVideo();
		},
		methods: {
			guanzhu(item) {// 关注
				let oldIsFollow = this.isFollow;
				let that = this;
				
				let data = {
					artificerId: that.artificerId,
					userId: that.myId,
					classify: item.myCollectCount==1?'0':'1'
				}
				that.$Request.postJson("/app/artificer/insertCollect", data).then(res => {
					if (res.code == 0) {
						if (oldIsFollow) {
							uni.showToast({
								title: '取消成功',
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: '收藏成功',
								icon: 'none'
							})
						}
			
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					setTimeout(function() {
						that.getData()
					}, 500)
				});
			},
			// 加载更多
			loadMore: async function() {
				//loadingType: 0.数据未加载完 1.数据全部加载完了 2.数据加载中
				if (this.loadingType == 0) {
					this.loadingType = 2
					//模拟数据请求
					setTimeout(() => {
						this.page++;
						this.loadingType = 0;
						this.getVideo()
					}, 1000)
				}
			},
			getVideo(){
				var that=this;
				// 1.这里引入后端请求数据
				var data={
					createBy:this.artificerId,
					userId:this.myId,
					page: this.page,
					limit:this.limit,
				}
				this.$Request.get("/app/shipinquan/getArticlelist", data).then(res => {
					if (res.code == 0) {
							// that.getVideoData = res.data.list||{}
							if (res.data) {
								if (this.page == 1) this.getVideoData = []; //如果是第一页需手动制空列表
								this.getVideoData = [...this.getVideoData, ...res.data.list]; //追加新数据
								this.getVideoData = this.getVideoData.map(item => {
								let parts = item.createTime.split('-');
								let month = parseInt(parts[1], 10);
								let day = parseInt(parts[2], 10);
								  return {
								    ...item,
								  day:day>=10?day:'0'+day,
								  month:month>=10?month:'0'+month
								  };
								});
								console.log("getVideoData",this.getVideoData)
								uni.stopPullDownRefresh()
							}else{
								this.loadingType=1
							}
						
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			// 详情
			getData() {
				this.$Request.get("/app/artificer/selectArtificerById", {
					artificerId: this.artificerId,
					latitude: this.latitude,
					longitude: this.longitude,
					userId: this.myId
				}).then(res => {
					if (res.code == 0) {
						this.order = res.data || {}
						var num=Number.isInteger(this.order.ordersScore)
						if(num==true){
							this.ordersScore=this.order.ordersScore+'.0'
						}else{
							this.ordersScore=this.order.ordersScore
						}
						if (res.data.myCollectCount == 1) {
							this.isFollow = true
						} else {
							this.isFollow = false
						}
					}
					uni.hideLoading();
				});

			},
			guanbi(){
				this.playShow=false;
				const videoContext = uni.createVideoContext('myVideo', this);
				videoContext.pause(); // 播放视频
				this.$refs.pinglun.close("center");
			},
			jieshu(){
				this.playShow=true;
				const videoContext = uni.createVideoContext('myVideo', this);
				videoContext.pause(); // 播放视频
			},
			kaishi(){
			  this.playShow=false;
			  const videoContext = uni.createVideoContext('myVideo', this);
			  videoContext.src = this.filePath; // 设置视频源
			  videoContext.play(); // 播放视频
			},
			towxh5Video(item){
				this.playShow=false;
				this.filePath=item.filePath;
				this.contentVideo=item.content;
				this.videoId=item.id
				this.$refs.pinglun.open("center")
			},
			//编辑信息
			UserEdit() {
				uni.navigateTo({
					url: ""
				})
			},
		}
	}
</script>

<style scoped>
	.keyuyue{
	    padding: 0px 4px;
	    height: 21px;
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    background: #eefdf8;
	    border-radius: 14px 9px 9px 14px;
	    color: #8d500f;
	    font-size: 11px;
	}
	.timea-fu{
	    font-size: 11px;
	    color: #2dbe93;
	    line-height: 21px;
	    margin-left: 3px;
	    margin-right: 2px;
	}
	.timea-time{
		font-size: 12px;
		color: #2dbe93;
		line-height: 21px;
		padding-right: 4px;
	}
	.oder-mian-text{
		padding-left:50rpx;
		font-size: 28rpx;
		font-weight: bold;
	}
	.oder-mian-guan{
		width: 110rpx;
		height: 50rpx;
		color: #1bb097;
		display: flex;
		align-items: center;
	}
	.activeQ{
		background: url('../../static/follow.png') 8rpx 4rpx;
		background-repeat: no-repeat;
		background-size:32rpx 32rpx;
		}
	.activeG{
		background: url('../../static/follow2.png') 8rpx 4rpx;
		background-repeat: no-repeat;
		background-size:32rpx 32rpx;
	}
	.t-loading-box{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		line-height:80upx;
		font-size: 26upx;
		width: 100%;
		padding-bottom:20upx;
		color: #888888;
		.t-loading-text{
			padding: 0 10upx;
			display: flex;
			align-items: center;
			flex-direction: row;
		}
		.loading {
			width:25upx;
			height:25upx;
			border:2.5upx solid #888888;
			border-bottom:#ffffff 2.5upx solid;
			border-radius:50%;
			margin-right: 15upx;
			animation:grace-rotate360 1200ms infinite linear;
		}
		.t-line{
			margin: 0px;
			border-bottom: 1px solid rgb(212, 212, 212);
			width: 20px;
			transform: scaleY(0.5);
			border-top-color: rgb(212, 212, 212);
			border-right-color: rgb(212, 212, 212);
			border-left-color: rgb(212, 212, 212);
		}
	}
	@keyframes grace-rotate360{0%{transform:rotate(0deg);} 50%{transform:rotate(180deg);} 100%{transform:rotate(360deg);}}
	.content{
		width: 100%;
		/* height: 100vh; */
		/* overflow: scroll; */
	}
	.scroll-Y {
		width: 100%;
		height: 700px;
		background-color: #fff;
		border-top: 6px solid #f7f7f7;
		margin-top: 350px;
	}
	.top-view {
		background-color: #fff;
		position: fixed;
		top: 0;
		z-index: 200;
	}
	.playState{
		width: 100%;
		height: 100%;
	}
	.pinglun span{
		color: #ccc;
		font-size: 13px;
		margin-left: 5px;
	}
	.pinglun image{
		width: 17px;
		height: 17px;
	}
	.pinglun{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.scroll-bottom{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
	.scroll-right-title{
		font-size: 16px;
		color: #000;
	}
	.data-list{
		width: 200px;
		height: 200px;
		position: relative;
		margin: 10px 0px;
	}
	.scroll-right{
		width: 77%;
		display: flex;
		flex-direction: column;
		
	}
	.scroll-left-mon{
		color: #ccc;
		font-size: 12px;
		margin-top: 5px;
		margin-left: 5px;
	}
	.scroll-left-day{
		color: #000000;
		font-size: 24px;
		font-weight: bold;
	}
	.scroll-left{
		width: 20%;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 10px;
	}
	.scroll-list{
		width: 95%;
		padding: 0px 10px;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
	}
	.swiper-item-view{
		width: 70%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1; /* 定义文本的行数 */
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		text-align: center;
	}
	.videoConten{
		width: 70%;
		position: absolute;
		bottom: 0px;
		margin-bottom: 60px;
		/* height: 30px; */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; /* 定义文本的行数 */
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		margin-left: 15px;
		color: #fff;
	}
	/deep/.uni-scroll-view-content{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* padding-top: 20px; */
	}
	.guanbi{
		width: 30px;
		height: 30px;
		position: absolute;
		top: 0;
		right: 0;
		margin-top: 15px;
		margin-right: 9px;
	}
	.guanbi image{
		width: 100%;
		height: 100%;
	}
	/deep/.uni-popup__wrapper-box{
		width: 100%;
		height: 100%;
	}
	.data-list{
		width:100%; 
		height: 162px;
		background-color: #000000; 
		
	}
	.videoHovers{
		width: 60px;
		height: 60px;
		position: absolute;
		top: 0px;
		margin-top: 20%;
		margin-left: 40%;
		z-index: 99;
	}
	.videoHover{
		width: 76px;
		height: 76px;
		position: absolute;
		top: 0px;
		margin-top: 70%;
		margin-left: 40%;
	}
	.videoHover image,.videoHovers image{
		width: 100%;
		height: 100%;
	}
	.template-view {
		width: 100%;
		height:100%;
	}
	
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
	.pingfen {
		margin-left: 15px;
		margin-top: 31px;
		display: flex;
		flex-direction: row;
	}

	.headset-text2 {
		background: linear-gradient(90deg, #f8f8f8, #dfdfdf);
		font-size: 22rpx;
		color: #333;
		height: 30rpx;
		line-height: 30rpx;
		border-radius: 5rpx 30rpx 30rpx 30rpx;
		width: 72rpx;
		padding: 5rpx 15rpx;
		text-align: right;
	}

	.headset-img {
		width: 120rpx;
		height: 40rpx;
		position: absolute;
		top: 1rpx;
		left: -1rpx;

	}

	.headset-line {

		display: flex;
		position: relative;
	}

	.banner-view {
		background-color: #007AFF;
		color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.paging-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.swiper {
		flex: 1;
	}

	.info-cover {
		display: block;
		width: 100%;
		height: 260rpx;
	}

	.info-avatar {
		position: absolute;
		left: 0;
		top: -56rpx;
		margin-left: 50rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
</style>