vlog_progress_pause_ios_ad

api/vlog.js

@@ -43,11 +43,12 @@ export function vlogFollowList(page, pageSize,myId) {
 /**
  * 短视频列表-true
  */
-export function vlogList(page, pageSize,userId='',search='') {
+export function vlogList(page, pageSize,userId='',cityCode='',search='') {
   let data = {
 	  page,
 	  pageSize,
 	  userId,
+	  cityCode,
 	  search
   }
   return http.request({
@@ -338,3 +339,15 @@ export function vlogQueryMyFollows({myId,page,pageSize}) {
     params:{myId,page,pageSize}
   });
 }
+
+/**
+ * 我的关注
+ */
+export function vlogQueryDoIFollowVloger({myId,vlogerId}) {
+  return http.request({
+    url: api.vlog + "/fans/queryDoIFollowVloger",
+    method: Method.GET,
+    needToken: true,
+    params:{myId,vlogerId}
+  });
+}

components/vlog/videoComp.vue

@@ -1,70 +1,186 @@
 <template>
 	<view style="flex: 1">
 		<!-- <uni-list @change="onchange" :num="playerList.length"> -->
-		<list ref="list" :pagingEnabled="true" :show-scrollbar="false" @scroll="listScroll" @scrollend="scroll"
+		<list
-			:scrollable="true">
+			ref="list"
-			<refresh @pullingdown="onpullingdown" @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
+			:pagingEnabled="true"
+			:show-scrollbar="false"
+			@scroll="listScroll"
+			@scrollend="scroll"
+			:scrollable="!isDragging"
+		>
+			<refresh
+				@pullingdown="onpullingdown"
+				@refresh="onrefresh"
+				:display="refreshing ? 'show' : 'hide'"
+			>
 				<text class="refresh-info-txt"></text>
 				<loading-indicator></loading-indicator>
 			</refresh>
-			<cell :recycle="false" v-for="(item, index) in playerList" :key="index" :data-index="index"
+			<cell
-				:style="{ height: screenHeight + 'px' }">
+				:recycle="false"
-				<!-- <uni-video :src="item.url" :playStatus="playStatus" :screenHeight="screenHeight" v-if="playerCur === index" @play="onplay"></uni-video> -->
+				:class="isIOS ? 'abs-box-ios' : ''"
-				<video ref="myVideo" id="myVideo" :object-fit="item.width >= item.height ? 'contain' : 'fill'"
+				v-for="(item, index) in playerList"
-					:src="item.url" :controls="false" :enable-progress-gesture="false" 
+				:key="index"
-					v-if="playerCur === index" loop autoplay show-loading="true" :http-cache="true"
+				:data-index="index"
-					style="width: 750rpx" :style="{ height: screenHeight + 'px' }" @click="playOrPause" @play="onplay"
+				:style="{ height: screenHeight + 'px' }"
-					@error="onerror" @timeupdate="timeupdate"></video>
+			>
-				<image :lazy-load="true" :fade-show="false" v-if="!item.play" :src="item.cover"
+				<video
+					ref="myVideo"
+					id="myVideo"
+					:object-fit="item.width >= item.height ? 'contain' : 'fill'"
+					preload="metadata"
+					:src="item.url"
+					:controls="false"
+					:enable-progress-gesture="false"
+					v-if="playerCur === index"
+					autoplay
+					loop
+					:http-cache="true"
+					style="width: 750rpx"
+					:style="{ height: screenHeight + 'px' }"
+					@click="playOrPause"
+					@play="onplay"
+					@error="onerror"
+					@timeupdate="onTimeUpdate"
+				></video>
+				<!-- 首帧图 -->
+				<image
+					:fade-show="false"
+					v-if="!item.play"
+					:src="item.firstFrameImg"
 					:mode="item.width >= item.height ? 'aspectFit' : 'scaleToFill'"
-					style="width: 750rpx; filter: blur(10px)" :style="{ height: screenHeight + 'px' }"></image>
+					style="width: 750rpx; filter: blur(10px)"
-				<!--<image :lazy-load="true" :fade-show="false" v-if="!item.play" :src="item.cover" mode="" style="width: 750rpx;position:absolute;left: 0;right: 0;top: 0;bottom: 0; filter: blur(10px);" :style="{height: screenHeight+ 'px'}"></image>-->
+					:style="{ height: screenHeight + 'px' }"
+				></image>
+				<!-- 播放按钮 -->
+
+				<view
+					v-if="!isIOS && !playStatus && item.play"
+					class="abs-box-ad"
+					:style="{ height: screenHeight + 'px' }"
+				>
+					<image
+						src="/static/images/playvd.png"
+						class="play-btn"
+					></image>
+				</view>
+
+				<image
+					v-if="isIOS && !playStatus && item.play"
+					src="/static/images/playvd.png"
+					class="play-btn"
+				></image>
+
+				<!-- 进度条 -->
+				<view
+					class="progress-bar"
+					@touchstart="startDrag"
+					@touchmove="onDragging"
+					@panend="endDrag"
+					v-if="progressFlag"
+				>
+					<view
+						v-if="progressFlag"
+						class="progress-background"
+					></view>
+					<view
+						v-if="progressFlag"
+						class="progress-foreground"
+						:class="isDragging ? '' : 'anm'"
+						:style="{ width: progressWidth + 'px' }"
+					></view>
+				</view>
+
+				<!-- 浮动时间提示 -->
+				<view
+					class="float-time"
+					v-if="isDragging"
+					:style="{ left: floatLeft + 'px' }"
+				>
+					<text style="color: #fff">{{ formatTime(floatTime) }}</text>
+				</view>
 				<view class="publish-info-box">
 					<view class="">
 						<text class="publish-info-vloger-name">@{{ item.vlogerName }}</text>
 						<text class="publish-info-content">{{ item.content }}</text>
 						<view class="publish-info-music-box">
-							<image src="/static/images/icon-fire.png" class="icon-fire"></image>
+							<image
+								src="/static/images/icon-fire.png"
+								class="icon-fire"
+							></image>
 							<text class="muisc-words">{{ item.vlogerName }}的原声创作</text>
 						</view>
 					</view>
-					<view class="" style="flex-direction: row">
+					<view
-						<image src="/static/images/cd-play-4.gif" style="width: 150rpx;height: 150rpx;opacity: 0.8;">
+						class=""
-						</image>
+						style="flex-direction: row"
-						<image v-if="!isIOS" src="/static/images/icon-cd.png" class="play-cd"
+					>
-							style="width: 120rpx; height: 120rpx"></image>
+						<image
-						<image v-if="isIOS" :src="
+							src="/static/images/cd-play-4.gif"
-                'https://imooc-news.oss-cn-shanghai.aliyuncs.com/image/cd-play-4.gif?time=' +
+							style="width: 150rpx; height: 150rpx; opacity: 0.8"
-                times
+						></image>
-              " class="play-cd"></image>
+						<image
+							v-if="!isIOS"
+							src="/static/images/icon-cd.png"
+							class="play-cd"
+						></image>
+						<image
+							v-if="isIOS"
+							:src="'https://imooc-news.oss-cn-shanghai.aliyuncs.com/image/cd-play-4.gif?time=' + times"
+							class="play-cd"
+						></image>
 					</view>
 				</view>
 				<!-- 视频展示右侧的操作按钮，头像 - 点赞 - 评论 - 转发 -->
 				<view class="operation-box">
 					<view class="operation-face-box">
-						<image :src="item.vlogerFace" class="user-face" @click="goUserInfoSeeSee(item.vlogerId)">
+						<image
-						</image>
+							:src="item.vlogerFace"
+							class="user-face"
+							@click="goUserInfoSeeSee(item.vlogerId)"
+						></image>
 					</view>
-					<image v-if="!item.doIFollowVloger && userId != thisVlogerId" src="/static/images/icon-follow.png"
+					<image
-						@click="followMe(item.vlogerId)" class="follow-me"></image>
+						v-if="!item.doIFollowVloger && userId != thisVlogerId"
+						src="/static/images/icon-follow.png"
+						@click="followMe(item.vlogerId)"
+						class="follow-me"
+					></image>
 					<view class="like-box">
-						<image v-if="!item.doILikeThisVlog" src="/static/images/icon-unlike.png"
+						<image
-							@click="likeOrDislikeVlog(1)" class="icon"></image>
+							v-if="!item.doILikeThisVlog"
-						<image v-if="item.doILikeThisVlog" src="/static/images/icon-like.png"
+							src="/static/images/icon-unlike.png"
-							@click="likeOrDislikeVlog(0)" class="icon"></image>
+							@click="likeOrDislikeVlog(1)"
+							class="icon"
+						></image>
+						<image
+							v-if="item.doILikeThisVlog"
+							src="/static/images/icon-like.png"
+							@click="likeOrDislikeVlog(0)"
+							class="icon"
+						></image>
 						<text class="some-counts">
 							{{ getGraceNumber(item.likeCounts) }}
 						</text>
 					</view>
 					<view class="comment-and-share-box">
-						<image src="/static/images/icon-comments.png" @click="commentToggle" class="icon"></image>
+						<image
+							src="/static/images/icon-comments.png"
+							@click="commentToggle"
+							class="icon"
+						></image>
 						<!-- <text class="some-counts">{{item.commentsCounts}}</text> -->
 						<text class="some-counts">
 							{{ getGraceNumber(thisVlogTotalComentCounts) }}
 						</text>
 					</view>
 					<view class="comment-and-share-box">
-						<image src="/static/images/icon-share.png" @click="shareToggle" class="icon"></image>
+						<image
+							src="/static/images/icon-share.png"
+							@click="shareToggle"
+							class="icon"
+						></image>
 						<text class="some-counts">分享</text>
 					</view>
 				</view>
@@ -74,50 +190,56 @@
 
 		<view>
 			<!-- 底部窗口popup -->
-			<uni-popup ref="comment" type="comment">
+			<uni-popup
-				<uni-popup-comments :thisVlogerId="thisVlogerId" :thisVlogId="thisVlogId"></uni-popup-comments>
+				ref="comment"
+				type="comment"
+			>
+				<uni-popup-comments
+					:thisVlogerId="thisVlogerId"
+					:thisVlogId="thisVlogId"
+				></uni-popup-comments>
 			</uni-popup>
-			<uni-popup ref="share" background-color="#fff" type="share">
+			<uni-popup
-				<uni-popup-share :thisVlogerId="thisVlogerId" :thisVlogId="thisVlogId" :vlogUrl="thisVlog.url"
+				ref="share"
-					:isPrivate="thisVlog.isPrivate"></uni-popup-share>
+				background-color="#fff"
+				type="share"
+			>
+				<uni-popup-share
+					:thisVlogerId="thisVlogerId"
+					:thisVlogId="thisVlogId"
+					:vlogUrl="thisVlog.url"
+					:isPrivate="thisVlog.isPrivate"
+				></uni-popup-share>
 			</uni-popup>
 		</view>
 	</view>
 </template>
 
 <script>
-	import storage from "@/utils/storage.js"; //缓存
+let system = uni.getSystemInfoSync();
-	import {
+import storage from '@/utils/storage.js'; //缓存
-		graceNumber
+import { graceNumber } from '@/utils/tools.js';
-	} from '@/utils/tools.js'
+import api from '@/config/api.js';
-	import api from "@/config/api.js";
+import { vlogList, vlogLike, vlogUnLike, vlogComment, vlogFollow, vlogTotalLikedCounts } from '@/api/vlog';
-	import {
+export default {
-		vlogList,
-		vlogLike,
-		vlogUnLike,
-		vlogComment,
-		vlogFollow,
-		vlogTotalLikedCounts
-	} from "@/api/vlog";
-	export default {
 	props: {
 		screenHeight: {
-				default: 0,
+			default: 0
 		},
 		src: {
-				default: false,
+			default: false
 		},
 		playStatus: {
-				default: false,
+			default: false
 		},
 		videoList: {
-				default: [],
+			default: []
 		},
 		refreshList: {
-				default: [],
+			default: []
 		},
 		pagingList: {
-				default: [],
+			default: []
 		},
 		//
 		pid: {
@@ -127,17 +249,20 @@
 		parentId: {
 			type: String,
 			default: ''
+		},
+		progressFlag: {
+			default: false
 		}
 	},
 	data() {
 		return {
 			thisVlog: {}, // 当前的短视频对象
-				thisVlogId: "", // 当前的短视频主键id
+			thisVlogId: '', // 当前的短视频主键id
-				thisVlogerId: "", // 当前的短视频博主的主键id
+			thisVlogerId: '', // 当前的短视频博主的主键id
-				userId: "", // 当前用户id
+			userId: '', // 当前用户id
 
 			refreshing: false,
-				showRefreshLoading: "hide",
+			showRefreshLoading: 'hide',
 
 			playerCur: 0,
 			page: 0,
@@ -153,13 +278,22 @@
 
 			times: new Date().getTime(),
 
-				objectFit: "fill",
+			objectFit: 'fill',
-				isIOS: uni.getSystemInfoSync().platform == "ios",
+			isIOS: uni.getSystemInfoSync().platform == 'ios',
+
+			duration: 0,
+			currentTime: 0,
+			progressWidth: 0,
+			floatTime: 0,
+			floatLeft: 0,
+			isDragging: false
+			// progressFlag: false
 		};
 	},
 	created() {
+		console.log(this.isIOS);
 		if (!this.isIOS) {
-				this.objectFit = "cover";
+			this.objectFit = 'cover';
 		}
 
 		let myUserInfo = storage.getVlogUserInfo();
@@ -169,8 +303,8 @@
 
 		// 查询首页短视频列表
 		this.displayVideoPaging(this.page + 1, true);
-			this.videoContext = uni.createVideoContext("myVideo", this.$refs.myVideo);
+		this.videoContext = uni.createVideoContext('myVideo', this.$refs.myVideo);
-			console.log(this.videoContext)
+		console.log(this.videoContext);
 	},
 	onReady() {},
 	watch: {
@@ -189,15 +323,73 @@
 
 		playStatus(val) {
 			var me = this;
-
+			console.log(val);
 			if (!val) {
 				me.videoContext.pause();
 			} else {
 				me.videoContext.play();
 			}
-			},
+		}
 	},
 	methods: {
+		//进度start
+		formatTime(sec) {
+			const m = Math.floor(sec / 60);
+			const s = Math.floor(sec % 60);
+			return `${m}:${s < 10 ? '0' : ''}${s}`;
+		},
+		onTimeUpdate(e) {
+			// console.log(e);
+			if (e.detail.currentTime > 0.2) {
+				this.doplay(e.detail.currentTime);
+			}
+			if (this.isDragging) return;
+			this.currentTime = e.detail.currentTime;
+			this.duration = e.detail.duration;
+			this.updateProgress();
+		},
+		updateProgress() {
+			const percent = this.currentTime / this.duration;
+			this.progressWidth = Math.floor(system.screenWidth * percent);
+			// console.log(this.progressWidth);
+		},
+		startDrag(e) {
+			console.log('触发开始拖动');
+			this.isDragging = true;
+		},
+		onDragging(e) {
+			console.log(this.isDragging);
+			console.log('拖动中');
+			const touchX = e.touches[0].pageX;
+			const max = system.screenWidth;
+			const clampedX = Math.max(0, Math.min(touchX, max));
+
+			this.progressWidth = clampedX;
+			const percent = clampedX / max;
+			this.floatTime = percent * this.duration;
+
+			// 浮动提示偏移，避免越界
+			const floatBoxWidth = 60;
+			this.floatLeft = Math.max(0, Math.min(clampedX - floatBoxWidth / 2, max - floatBoxWidth));
+		},
+		endDrag() {
+			console.log('拖动结束');
+			const percent = this.progressWidth / system.screenWidth;
+			const seekTime = percent * this.duration;
+			if (!this.duration || isNaN(seekTime)) {
+				console.warn('duration 未就绪或 seekTime 非法');
+				this.isDragging = false;
+				return;
+			}
+			// 避免重复 seek
+			if (Math.abs(seekTime - this.currentTime) > 0.2) {
+				this.videoContext.seek(seekTime);
+			}
+			this.isDragging = false;
+		},
+
+		//进度end
+
 		//------------addd
 		setScrollRef(height) {
 			if (this.$refs['list'].setSpecialEffects) {
@@ -223,10 +415,10 @@
 		async freshCommentCounts() {
 			var me = this;
 			var currentIndex = me.playerCur;
-				console.log('currentIndex', currentIndex)
+			console.log('currentIndex', currentIndex);
 			var vlog = me.playerList[currentIndex];
 			var vlogId = vlog.vlogId;
-				var result = await vlogComment(vlogId)
+			var result = await vlogComment(vlogId);
 			if (result.data.status == 200) {
 				me.thisVlogTotalComentCounts = result.data.data;
 			} else {
@@ -235,16 +427,15 @@
 		},
 		async likeOrDislikeVlog(isLike) {
 			var me = this;
-				var myUserInfo = storage.getVlogUserInfo() || null
+			var myUserInfo = storage.getVlogUserInfo() || null;
 			var currentIndex = me.playerCur;
 			var vlog = me.playerList[currentIndex];
 			if (isLike == 1) {
 				// 喜欢/点赞视频
 				if (myUserInfo == null) {
 					uni.navigateTo({
-							url: "/pages/passport/login",
+						url: '/pages/passport/login',
-							animationType: "slide-in-bottom",
+						animationType: 'slide-in-bottom'
-
 					});
 					return;
 				}
@@ -253,28 +444,25 @@
 					userId,
 					vlogerId: vlog.vlogerId,
 					vlogId: vlog.vlogId
-					})
+				});
-					console.log(result)
+				console.log(result);
 				if (result.data.status == 200) {
 					me.reLikePlayList(vlog.vlogId);
 					me.refreshVlogCounts();
 				} else {
 					uni.showToast({
 						title: result.data.msg,
-							icon: "none",
+						icon: 'none',
-							duration: 3000,
+						duration: 3000
 					});
 				}
-
 			} else if (isLike == 0) {
 				// 取消喜欢/点赞视频
-					var myUserInfo = storage.getVlogUserInfo() || null
+				var myUserInfo = storage.getVlogUserInfo() || null;
 				if (myUserInfo == null) {
-
 					uni.navigateTo({
-							url: "/pages/passport/login",
+						url: '/pages/passport/login',
-							animationType: "slide-in-bottom",
+						animationType: 'slide-in-bottom'
-
 					});
 					return;
 				}
@@ -284,15 +472,15 @@
 					userId,
 					vlogerId: vlog.vlogerId,
 					vlogId: vlog.vlogId
-					})
+				});
 				if (result.data.status == 200) {
 					me.reDislikePlayList(vlog.vlogId);
 					me.refreshVlogCounts();
 				} else {
 					uni.showToast({
 						title: result.data.msg,
-							icon: "none",
+						icon: 'none',
-							duration: 3000,
+						duration: 3000
 					});
 				}
 			}
@@ -363,53 +551,54 @@
 		// 关注博主
 		async followMe(vlogerId) {
 			var me = this;
-				var myUserInfo = storage.getVlogUserInfo()||null
+			var myUserInfo = storage.getVlogUserInfo() || null;
 			if (myUserInfo == null) {
 				uni.navigateTo({
-						url: "/pages/passport/login",
+					url: '/pages/passport/login',
-						animationType: "slide-in-bottom",
+					animationType: 'slide-in-bottom'
 				});
 				return;
 			}
 			var userId = myUserInfo.id;
-				var result = await vlogFollow(userId, vlogerId)
+			var result = await vlogFollow(userId, vlogerId);
 			if (result.data.status == 200) {
 				me.reFollowPlayList(vlogerId);
 			} else {
 				uni.showToast({
 					title: result.data.msg,
-						icon: "none",
+					icon: 'none',
-						duration: 3000,
+					duration: 3000
 				});
 			}
 		},
 		// 查看用户详情
 		goUserInfoSeeSee(userId) {
-				uni.setStorageSync("userPageId", userId);
+			uni.setStorageSync('userPageId', userId);
-				const info = storage.getVlogUserInfo() || null
+			const info = storage.getVlogUserInfo() || null;
 			if (info == null) {
 				uni.navigateTo({
-						url: "/pages/passport/login",
+					url: '/pages/passport/login',
-						animationType: "slide-in-bottom",
+					animationType: 'slide-in-bottom'
 				});
-					return
+				return;
 			}
-				let myUserId = info.id
+			let myUserId = info.id;
 			if (myUserId == userId) {
 				uni.switchTab({
-						url: "/pages/me/me",
+					url: '/pages/me/me'
 				});
 			} else {
 				uni.navigateTo({
-						url: "/pages/me/vlogerInfo?userPageId=" + userId,
+					url: '/pages/me/vlogerInfo?userPageId=' + userId
 				});
 			}
 		},
 
 		listScroll(e) {
-				// console.log(e.contentOffset.y)
+			// console.log(e.contentOffset.y);
+			this.progressFlag = false;
 			if (e.contentOffset.y > 0) {
-					this.$emit("showLoading");
+				this.$emit('showLoading');
 			}
 		},
 
@@ -435,7 +624,7 @@
 
 		// 下拉刷新的过程中，改变头部tab显示的字样
 		onpullingdown(e) {
-				console.log('下拉中')
+			console.log('下拉中');
 		},
 		async onrefresh(e) {
 			// console.log('开始')
@@ -446,32 +635,38 @@
 			// uni.stopPullDownRefresh()
 			// this.refreshing = false;
 			// this.$emit("hideLoading");
-				console.log('开始')
+			console.log('开始');
 			this.refreshing = true;
 			// 通过list组件的下拉刷新触发当前所在页面的下拉刷新
 			uni.startPullDownRefresh();
-				await this.displayVideoPaging(1,true)
+			await this.displayVideoPaging(1, true);
-				uni.stopPullDownRefresh() 
+			uni.stopPullDownRefresh();
 			this.refreshing = false;
-				this.$emit("hideLoading"); 
+			this.$emit('hideLoading');
 		},
 
-			onplay: function(e) {
+		onplay: function (e) {
-				if (uni.getSystemInfoSync().platform == "ios") {
+			// console.log('开始播放');
+			// let timer = setTimeout(() => {
+			// 	this.progressFlag = true;
+			// 	clearTimeout(timer);
+			// }, 10);
+			this.progressFlag = true;
+			if (uni.getSystemInfoSync().platform == 'ios') {
 				this.doplay(0.1);
 			}
 		},
-			onerror: function(err) {},
+		onerror: function (err) {},
-			timeupdate: function(e) {
+		// timeupdate: function (e) {
-				if (e.detail.currentTime > 0.2) {
+		// 	if (e.detail.currentTime > 0.2) {
-					this.doplay(e.detail.currentTime);
+		// 		this.doplay(e.detail.currentTime);
-				}
+		// 	}
-			},
+		// },
 
 		playOrPause() {
 			var me = this;
 			var playStatus = this.playStatus;
-
+			console.log(playStatus);
 			if (!playStatus) {
 				me.videoContext.pause();
 			} else {
@@ -480,7 +675,7 @@
 			this.playStatus = !playStatus;
 		},
 
-			scroll: function(e) {
+		scroll: function (e) {
 			let originalIndex = this.currentIndex;
 			let isNext = false;
 			if (e.contentOffset.y < this.contentOffsetY) {
@@ -489,13 +684,11 @@
 			this.contentOffsetY = Number(e.contentOffset.y);
 			var num = this.playerList.length;
 			if (num > 0) {
-					var ht = Number(e.contentSize.height)
+				var ht = Number(e.contentSize.height);
-					console.log(ht)
+				console.log(ht);
-					this.currentIndex = Math.round(
+				this.currentIndex = Math.round(Math.abs(this.contentOffsetY) / (ht / num));
-						Math.abs(this.contentOffsetY) / (ht / num)
-					);
 			} else {
-					this.currentIndex = 0
+				this.currentIndex = 0;
 			}
 			this.onchange(this.currentIndex);
 
@@ -503,8 +696,8 @@
 			// 判断如果视频列表总长度-当前下标，少于3个，则开始分页查询后续的视频，并且追加到现有list中
 			if (this.playerList.length - this.currentIndex < 3) {
 				// 如果要分页的page和总数totalPage相等，则没有更多
-					if (this.page == this.totalPage|| this.totalPage==0) {
+				if (this.page == this.totalPage || this.totalPage == 0) {
-						this.$emit('hideLoading') 
+					this.$emit('hideLoading');
 					return;
 				}
 				this.displayVideoPaging(this.page + 1, false);
@@ -514,18 +707,18 @@
 		// 分页查询新的list, 并且追加到现有list中
 		async displayVideoPaging(page, needClearList) {
 			// 查询首页短视频列表
-				let me = this
+			let me = this;
-				let myUserInfo = storage.getVlogUserInfo()
+			let myUserInfo = storage.getVlogUserInfo();
-				let userId = "";
+			let userId = '';
 			if (myUserInfo != null) {
 				userId = myUserInfo.id;
-					this.userId = userId
+				this.userId = userId;
 			}
-				const result = await vlogList(page, 10, userId).catch(err => {
+			const result = await vlogList(page, 10, userId).catch((err) => {
 				uni.stopPullDownRefresh();
-				})
+			});
 			uni.stopPullDownRefresh();
-				console.log(result)
+			console.log(result);
 			if (result.data.status == 200) {
 				let vlogList = result.data.data.rows;
 				// 缺：该条视频是否被喜欢过
@@ -545,26 +738,31 @@
 			} else {
 				uni.showToast({
 					title: result.data.msg,
-						icon: "none",
+					icon: 'none',
-						duration: 3000,
+					duration: 3000
 				});
 			}
-
 		},
 
-			doplay: function(time) {
+		doplay: function (time) {
 			if (time > 0) {
 				this.playerList[this.playerCur].play = true;
 			}
 		},
-			onchange: function(index) {
+		onchange: function (index) {
-				console.log(index)
+			console.log(index);
-				console.log(this.playerCur)
+			console.log(this.playerCur);
 			if (index != this.playerCur) {
 				this.playerList[this.playerCur].play = false;
 				this.playerCur = index;
+				this.playStatus = true;
+				this.progressWidth = 0;
 			}
-
+			this.progressFlag = true;
+			// let timer = setTimeout(() => {
+			// 	this.progressFlag = true;
+			// 	clearTimeout(timer);
+			// }, 20);
 			this.refreshVlogCounts();
 			this.setThisVlogInfo();
 			this.freshCommentCounts();
@@ -585,7 +783,7 @@
 			var me = this;
 			var currentIndex = me.playerCur;
 			var vlog = me.playerList[currentIndex];
-				var result = await vlogTotalLikedCounts(vlog.vlogId)
+			var result = await vlogTotalLikedCounts(vlog.vlogId);
 			if (result.data.status == 200) {
 				var counts = result.data.data;
 				me.reChangeVlogLikedCountsInPlayList(vlog.vlogId, counts);
@@ -610,45 +808,113 @@
 		commentToggle() {
 			this.$refs.comment.open();
 			uni.hideTabBar({
-					animation: true,
+				animation: true
 			});
 		},
 		shareToggle() {
 			this.$refs.share.open();
 			uni.hideTabBar({
-					animation: true,
+				animation: true
 			});
-			},
+		}
-		},
+	}
-	};
+};
 </script>
 
 <style scoped>
-	.icon {
+.progress-bar {
+	height: 60rpx;
+	width: 750rpx;
+	display: flex;
+	align-items: center;
+	position: fixed;
+	bottom: 0;
+	z-index: 99999;
+}
+
+.progress-background {
+	position: absolute;
+	bottom: 0;
+	width: 750rpx;
+	height: 2px;
+	background-color: #ccc;
+	z-index: 3;
+	pointer-events: none;
+}
+
+.progress-foreground {
+	z-index: 2;
+	height: 2px;
+	background-color: #fff;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	pointer-events: none;
+}
+.anm {
+	transition: width 0.25s linear;
+}
+
+.float-time {
+	position: fixed;
+	bottom: 2px;
+	width: 60px;
+	height: 30px;
+	background-color: rgba(0, 0, 0, 0.5);
+	color: #fff;
+	text-align: center;
+	align-items: center;
+	justify-content: center;
+	line-height: 30px;
+	font-size: 12px;
+	border-radius: 4px;
+	z-index: 5;
+}
+
+.abs-box-ad {
+	width: 750rpx;
+	position: absolute;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.abs-box-ios {
+	position: relative;
+	width: 750rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.play-btn {
+	position: absolute;
+	width: 120rpx;
+	height: 120rpx;
+}
+.icon {
 	width: 80rpx;
 	height: 80rpx;
 	opacity: 0.9;
-	}
+}
 
-	.user-face {
+.user-face {
 	width: 100rpx;
 	height: 100rpx;
 	border-radius: 100rpx;
-	}
+}
 
-	.play-cd {
+.play-cd {
 	width: 150rpx;
 	height: 150rpx;
 	opacity: 0.8;
-	}
+}
 
-	.refresh-info-txt {
+.refresh-info-txt {
 	color: #f1f1f1;
 	text-align: center;
 	font-size: 12px;
-	}
+}
 
-	.publish-info-box {
+.publish-info-box {
 	position: absolute;
 	bottom: 200rpx;
 	left: 0;
@@ -658,21 +924,21 @@
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: center;
-	}
+}
 
-	.publish-info-vloger-name {
+.publish-info-vloger-name {
 	color: #ffffff;
 	font-size: 40rpx;
 	font-weight: 600;
 	padding: 10rpx;
-	}
+}
 
-	.publish-info-music-box {
+.publish-info-music-box {
 	flex-direction: row;
 	align-items: center;
-	}
+}
 
-	.publish-info-content {
+.publish-info-content {
 	color: #ffffff;
 	font-size: 28rpx;
 	font-weight: 400;
@@ -680,29 +946,29 @@
 	lines: 5;
 	width: 520rpx;
 	text-overflow: ellipsis;
-	}
+}
 
-	.icon-fire {
+.icon-fire {
 	width: 36rpx;
 	height: 36rpx;
-	}
+}
 
-	.muisc-words {
+.muisc-words {
 	color: #ffffff;
 	font-size: 28rpx;
 	padding: 10rpx;
 	width: 400rpx;
-	}
+}
 
-	.some-counts {
+.some-counts {
 	font-size: 24rpx;
 	font-weight: 500;
 	text-align: center;
 	color: #ffffff;
 	margin-top: 2rpx;
-	}
+}
 
-	.operation-box {
+.operation-box {
 	position: absolute;
 	top: 0;
 	bottom: 0;
@@ -710,31 +976,31 @@
 	align-items: center;
 	justify-content: center;
 	padding-right: 20rpx;
-	}
+}
 
-	.operation-face-box {
+.operation-face-box {
 	border-radius: 100rpx;
 	border-color: #ffffff;
 	border-width: 3rpx;
-	}
+}
 
-	.follow-me {
+.follow-me {
 	width: 40rpx;
 	height: 40rpx;
 	border-radius: 10px;
 	position: relative;
 	top: -20rpx;
-	}
+}
 
-	.like-box {
+.like-box {
 	flex-direction: column;
 	align-items: center;
 	margin-top: 30rpx;
-	}
+}
 
-	.comment-and-share-box {
+.comment-and-share-box {
 	flex-direction: column;
 	align-items: center;
 	margin-top: 45rpx;
-	}
+}
 </style>

components/vlog/videoDetail.vue

@@ -5,13 +5,15 @@
 			:show-scrollbar="false"
 			@scroll="listScroll"
 			@scrollend="scroll"
-      :scrollable="true">
+			:scrollable="true"
+		>
 			<cell
 				:recycle="false"
 				v-for="(item, index) in playerList"
 				:key="index"
 				:data-index="index"
-        :style="{ height: screenHeight + 'px' }">
+				:style="{ height: screenHeight + 'px' }"
+			>
 				<video
 					ref="videoDetail"
 					id="videoDetail"
@@ -28,15 +30,54 @@
 					@click="playOrPause"
 					@play="onplay"
 					@error="onerror"
-          @timeupdate="timeupdate"></video>
+					@timeupdate="timeupdate"
+				></video>
 				<image
 					:lazy-load="true"
 					:fade-show="false"
 					v-if="!item.play"
-          :src="item.cover"
+					:src="item.firstFrameImg"
 					:mode="item.width >= item.height ? 'aspectFit' : 'scaleToFill'"
 					style="width: 750rpx; filter: blur(10px)"
-          :style="{ height: screenHeight + 'px' }"></image>
+					:style="{ height: screenHeight + 'px' }"
+				></image>
+				<!-- 播放按钮 -->
+				<view
+					v-else-if="!playStatus"
+					class="abs-box"
+					:style="{ height: screenHeight + 'px' }"
+				>
+					<image
+						:fade-show="true"
+						src="/static/images/playvd.png"
+						class="play-btn"
+					></image>
+				</view>
+				<!-- 进度条 -->
+				<view
+					v-if="playerCur === index"
+					class="progress-bar"
+					@touchstart="startDrag"
+					@touchmove="onDragging"
+					@panend="endDrag"
+				>
+					<view class="progress-background"></view>
+					<view
+						class="progress-foreground"
+						:class="isDragging ? '' : 'anm'"
+						:style="{ width: progressWidth + 'px' }"
+					></view>
+				</view>
+
+				<!-- 浮动时间提示 -->
+				<view
+					class="float-time"
+					v-if="isDragging"
+					:style="{ left: floatLeft + 'px' }"
+				>
+					{{ formatTime(floatTime) }}
+				</view>
+
 				<view class="publish-info-box">
 					<view class="">
 						<text class="publish-info-vloger-name">@{{ item.vlogerName }}</text>
@@ -44,25 +85,30 @@
 						<view class="publish-info-music-box">
 							<image
 								src="/static/images/icon-fire.png"
-                class="icon-fire"></image>
+								class="icon-fire"
+							></image>
 							<text class="muisc-words">{{ item.vlogerName }}的原声创作</text>
 						</view>
 					</view>
-          <view class="" style="flex-direction: row">
+					<view
-            <image src="/static/images/cd-play-4.gif"
+						class=""
-								style="width: 150rpx;height: 150rpx;opacity: 0.8;"></image>
+						style="flex-direction: row"
+					>
+						<image
+							src="/static/images/cd-play-4.gif"
+							style="width: 150rpx; height: 150rpx; opacity: 0.8"
+						></image>
 						<image
 							v-if="!isIOS"
 							src="/static/images/icon-cd.png"
 							class="play-cd"
-              style="width: 120rpx; height: 120rpx"></image>
+							style="width: 120rpx; height: 120rpx"
+						></image>
 						<image
 							v-if="isIOS"
-              :src="
+							:src="'https://imooc-news.oss-cn-shanghai.aliyuncs.com/image/cd-play-4.gif?time=' + times"
-                'https://imooc-news.oss-cn-shanghai.aliyuncs.com/image/cd-play-4.gif?time=' +
+							class="play-cd"
-                times
+						></image>
-              "
-              class="play-cd"></image>
 					</view>
 				</view>
 				<!-- 视频展示右侧的操作按钮, 头像 - 点赞 - 评论 - 转发 -->
@@ -71,38 +117,44 @@
 						<image
 							:src="item.vlogerFace"
 							class="user-face"
-              @click="goUserInfoSeeSee(item.vlogerId)"></image>
+							@click="goUserInfoSeeSee(item.vlogerId)"
+						></image>
 					</view>
 					<image
 						v-if="!item.doIFollowVloger && userId != item.vlogerId"
 						src="/static/images/icon-follow.png"
 						@click="followMe(item.vlogerId)"
-            class="follow-me"></image>
+						class="follow-me"
+					></image>
 					<view class="like-box">
 						<image
 							v-if="!item.doILikeThisVlog"
 							src="/static/images/icon-unlike.png"
 							@click="likeOrDislikeVlog(1)"
-              class="icon"></image>
+							class="icon"
+						></image>
 						<image
 							v-if="item.doILikeThisVlog"
 							src="/static/images/icon-like.png"
 							@click="likeOrDislikeVlog(0)"
-              class="icon"></image>
+							class="icon"
+						></image>
 						<text class="some-counts">{{ item.likeCounts }}</text>
 					</view>
 					<view class="comment-and-share-box">
 						<image
 							src="/static/images/icon-comments.png"
 							@click="commentToggle"
-              class="icon"></image>
+							class="icon"
+						></image>
 						<text class="some-counts">{{ thisVlogTotalComentCounts }}</text>
 					</view>
 					<view class="comment-and-share-box">
 						<image
 							src="/static/images/icon-share.png"
 							@click="shareToggle"
-              class="icon"></image>
+							class="icon"
+						></image>
 						<text class="some-counts">分享</text>
 					</view>
 				</view>
@@ -111,64 +163,63 @@
 		<!-- </uni-list> -->
 
 		<view v-if="thisVlog != null && thisVlog != {}">
-      <uni-popup ref="comment" type="comment">
+			<uni-popup
+				ref="comment"
+				type="comment"
+			>
 				<uni-popup-comments
 					:thisVlogerId="thisVlogerId"
-          :thisVlogId="thisVlogId"></uni-popup-comments>
+					:thisVlogId="thisVlogId"
+				></uni-popup-comments>
 			</uni-popup>
-      <uni-popup ref="share" background-color="#fff" type="share">
+			<uni-popup
+				ref="share"
+				background-color="#fff"
+				type="share"
+			>
 				<uni-popup-share
 					:thisVlogerId="thisVlogerId"
 					:thisVlogId="thisVlogId"
 					:vlogUrl="thisVlog.url"
-          :isPrivate="thisVlog.isPrivate"></uni-popup-share>
+					:isPrivate="thisVlog.isPrivate"
+				></uni-popup-share>
 			</uni-popup>
 		</view>
-	
 	</view>
 </template>
 
 <script>
-	import uniPopupComments from "@/uni_modules/uni-popup/components/uni-popup-comments/uni-popup-comments.vue"
+let system = uni.getSystemInfoSync();
-	import storage from "@/utils/storage.js"; //缓存
+import uniPopupComments from '@/uni_modules/uni-popup/components/uni-popup-comments/uni-popup-comments.vue';
-	import {
+import storage from '@/utils/storage.js'; //缓存
-		graceNumber
+import { graceNumber } from '@/utils/tools.js';
-	} from '@/utils/tools.js'
+import api from '@/config/api.js';
-	import api from "@/config/api.js";
+import { vlogDetail, vlogLike, vlogUnLike, vlogComment, vlogFollow, vlogTotalLikedCounts } from '@/api/vlog';
-	import {
-		vlogDetail,
-		vlogLike,
-		vlogUnLike,
-		vlogComment,
-		vlogFollow,
-		vlogTotalLikedCounts
-	} from "@/api/vlog";
-
 
 export default {
 	components: {
-	  uniPopupComments,
+		uniPopupComments
 	},
 	props: {
 		screenHeight: {
-      default: 0,
+			default: 0
 		},
 		src: {
-      default: false,
+			default: false
 		},
 		playStatus: {
-      default: false,
+			default: false
 		},
 		vlogId: {
-      default: false,
+			default: false
-    },
+		}
 	},
 	data() {
 		return {
 			thisVlog: {}, // 当前的短视频对象
-      thisVlogId: "", // 当前的短视频主键id
+			thisVlogId: '', // 当前的短视频主键id
-      thisVlogerId: "", // 当前的短视频博主的主键id
+			thisVlogerId: '', // 当前的短视频博主的主键id
-      userId: "",
+			userId: '',
 
 			playerCur: 0,
 			page: 0,
@@ -196,16 +247,23 @@ export default {
 			currentIndex: 0,
 			contentOffsetY: 0,
 			times: new Date().getTime(),
-      objectFit: "fill",
+			objectFit: 'fill',
-      isIOS: uni.getSystemInfoSync().platform == "ios",
+			isIOS: uni.getSystemInfoSync().platform == 'ios',
+
+			duration: 0,
+			currentTime: 0,
+			progressWidth: 0,
+			floatTime: 0,
+			floatLeft: 0,
+			isDragging: false
 		};
 	},
 	created() {
 		if (!this.isIOS) {
-      this.objectFit = "cover";
+			this.objectFit = 'cover';
 		}
-    let myUserInfo = storage.getVlogUserInfo()||null;
+		let myUserInfo = storage.getVlogUserInfo() || null;
-    if (myUserInfo!=null) {
+		if (myUserInfo != null) {
 			this.userId = myUserInfo.id;
 		}
 		// 查询首页短视频列表
@@ -233,9 +291,60 @@ export default {
 			} else {
 				me.videoContext.play();
 			}
-    },
+		}
 	},
 	methods: {
+		//进度start
+		formatTime(sec) {
+			const m = Math.floor(sec / 60);
+			const s = Math.floor(sec % 60);
+			return `${m}:${s < 10 ? '0' : ''}${s}`;
+		},
+		onTimeUpdate(e) {
+			// console.log(e);
+			if (e.detail.currentTime > 0.2) {
+				this.doplay(e.detail.currentTime);
+			}
+			if (this.isDragging) return;
+			this.currentTime = e.detail.currentTime;
+			this.duration = e.detail.duration;
+			this.updateProgress();
+		},
+		updateProgress() {
+			const percent = this.currentTime / this.duration;
+			this.progressWidth = Math.floor(system.screenWidth * percent);
+			// console.log(this.progressWidth);
+		},
+		startDrag(e) {
+			this.isDragging = true;
+		},
+		onDragging(e) {
+			const touchX = e.touches[0].pageX;
+			const max = system.screenWidth;
+			const clampedX = Math.max(0, Math.min(touchX, max));
+
+			this.progressWidth = clampedX;
+			const percent = clampedX / max;
+			this.floatTime = percent * this.duration;
+
+			// 浮动提示偏移，避免越界
+			const floatBoxWidth = 60;
+			this.floatLeft = Math.max(0, Math.min(clampedX - floatBoxWidth / 2, max - floatBoxWidth));
+		},
+		endDrag() {
+			const percent = this.progressWidth / system.screenWidth;
+			const seekTime = percent * this.duration;
+			if (!this.duration || isNaN(seekTime)) {
+				console.warn('duration 未就绪或 seekTime 非法');
+				this.isDragging = false;
+				return;
+			}
+			// 避免重复 seek
+			if (Math.abs(seekTime - this.currentTime) > 0.2) {
+				this.videoContext.seek(seekTime);
+			}
+			this.isDragging = false;
+		},
 		// 喜欢, 点赞的list重新设置
 		reLikePlayList(vlogId) {
 			let me = this;
@@ -277,12 +386,12 @@ export default {
 
 		async refreshVlogCounts() {
 			var me = this;
-		if(me.playerList.length==0){
+			if (me.playerList.length == 0) {
-			return
+				return;
 			}
 			var currentIndex = me.playerCur;
 			var vlog = me.playerList[currentIndex];
-		var result = await vlogTotalLikedCounts(vlog.vlogId)
+			var result = await vlogTotalLikedCounts(vlog.vlogId);
 			if (result.data.status == 200) {
 				let counts = result.data.data;
 				me.reChangeVlogLikedCountsInPlayList(vlog.vlogId, counts);
@@ -290,20 +399,19 @@ export default {
 				uni.showToast({
 					title: result.data.msg,
 					duration: 3000,
-		    icon: "none",
+					icon: 'none'
 				});
 			}
 		},
 		async likeOrDislikeVlog(isLike) {
 			var me = this;
-	  var myUserInfo = storage.getVlogUserInfo() || null
+			var myUserInfo = storage.getVlogUserInfo() || null;
 			var currentIndex = me.playerCur;
 			var vlog = me.playerList[currentIndex];
-	  if (myUserInfo==null) {
+			if (myUserInfo == null) {
 				uni.navigateTo({
-	      url: "/pages/passport/login",
+					url: '/pages/passport/login',
-	      animationType: "slide-in-bottom",
+					animationType: 'slide-in-bottom'
-	   
 				});
 				return;
 			}
@@ -315,15 +423,15 @@ export default {
 					userId,
 					vlogerId: vlog.vlogerId,
 					vlogId: vlog.vlogId
-		})
+				});
 				if (result.data.status == 200) {
 					me.reLikePlayList(vlog.vlogId);
 					me.refreshVlogCounts();
 				} else {
 					uni.showToast({
 						title: result.data.msg,
-		    icon: "none",
+						icon: 'none',
-		    duration: 3000,
+						duration: 3000
 					});
 				}
 			} else if (isLike == 0) {
@@ -331,15 +439,15 @@ export default {
 					userId,
 					vlogerId: vlog.vlogerId,
 					vlogId: vlog.vlogId
-		})
+				});
 				if (result.data.status == 200) {
 					me.reDislikePlayList(vlog.vlogId);
 					me.refreshVlogCounts();
 				} else {
 					uni.showToast({
 						title: result.data.msg,
-		    icon: "none",
+						icon: 'none',
-		    duration: 3000,
+						duration: 3000
 					});
 				}
 			}
@@ -373,43 +481,43 @@ export default {
 		// 关注博主
 		async followMe(vlogerId) {
 			let me = this;
-      let myUserInfo = storage.getVlogUserInfo()||null;
+			let myUserInfo = storage.getVlogUserInfo() || null;
-      if (myUserInfo==null) {
+			if (myUserInfo == null) {
 				uni.navigateTo({
-          url: "/pages/passport/login",
+					url: '/pages/passport/login',
-          animationType: "slide-in-bottom"
+					animationType: 'slide-in-bottom'
 				});
 
 				return;
 			}
 
 			let userId = myUserInfo.id;
-	  var result = await vlogFollow(userId,vlogerId)
+			var result = await vlogFollow(userId, vlogerId);
 			if (result.data.status == 208) {
 				me.reFollowPlayList(vlogerId);
 			} else {
 				uni.showToast({
 					title: result.data.msg,
-	      icon: "none",
+					icon: 'none',
-	      duration: 3000,
+					duration: 3000
 				});
 			}
 		},
 
 		goUserInfoSeeSee(userId) {
 			// 是否是当前登录的用户
-      let myUserId = "";
+			let myUserId = '';
-	  var info = storage.getVlogUserInfo()||null
+			var info = storage.getVlogUserInfo() || null;
-      if (info!=null) {
+			if (info != null) {
 				myUserId = info.id;
 			}
 			if (myUserId == userId) {
 				uni.switchTab({
-          url: "/pages/me/me",
+					url: '/pages/me/me'
 				});
 			} else {
 				uni.navigateTo({
-          url: "/pages/me/vlogerInfo?userPageId=" + userId,
+					url: '/pages/me/vlogerInfo?userPageId=' + userId
 				});
 			}
 		},
@@ -421,7 +529,7 @@ export default {
 		},
 
 		onplay: function (e) {
-      if (uni.getSystemInfoSync().platform == "ios") {
+			if (uni.getSystemInfoSync().platform == 'ios') {
 				this.doplay(0.1);
 			}
 		},
@@ -447,21 +555,20 @@ export default {
 			let me = this;
 			let vlogId = me.vlogId;
 
-      let myUserInfo = storage.getVlogUserInfo()||null;
+			let myUserInfo = storage.getVlogUserInfo() || null;
-      let userId = "";
+			let userId = '';
-      if ((myUserInfo!=null)) {
+			if (myUserInfo != null) {
 				userId = myUserInfo.id;
 			}
 
-
+			var result = await vlogDetail(vlogId, userId);
-	  var result = await vlogDetail(vlogId,userId)
 			if (result.data.status == 200) {
 				let vlog = result.data.data;
 				let playerList = [];
 				playerList.push(vlog);
 				me.playerList = playerList;
-		if(this.videoContext!=null && playerList.length>0){
+				if (this.videoContext != null && playerList.length > 0) {
-			let videoContext = uni.createVideoContext("videoDetail");
+					let videoContext = uni.createVideoContext('videoDetail');
 					this.videoContext = videoContext;
 				}
 				me.freshCommentCounts();
@@ -469,8 +576,8 @@ export default {
 			} else {
 				uni.showToast({
 					title: result.data.msg,
-	      icon: "none",
+					icon: 'none',
-	      duration: 3000,
+					duration: 3000
 				});
 			}
 		},
@@ -491,11 +598,7 @@ export default {
 		// 设置当前vlog的信息
 		setThisVlogInfo() {
 			let me = this;
-      if (
+			if (me.playerList != null && me.playerList != undefined && me.playerList.length > 0) {
-        me.playerList != null &&
-        me.playerList != undefined &&
-        me.playerList.length > 0
-      ) {
 				let currentIndex = me.playerCur;
 				let vlog = me.playerList[currentIndex];
 				this.thisVlog = vlog;
@@ -505,21 +608,17 @@ export default {
 		},
 		async freshCommentCounts() {
 			var me = this;
-	  var uinfo = storage.getVlogUserInfo()||null
+			var uinfo = storage.getVlogUserInfo() || null;
-	  if(uinfo!=null){
+			if (uinfo != null) {
-		 var userId=uinfo.id
+				var userId = uinfo.id;
 			}
-      if (
+			if (me.playerList == null || me.playerList == undefined || me.playerList.length == 0) {
-        me.playerList == null ||
-        me.playerList == undefined ||
-        me.playerList.length == 0
-      ) {
 				return;
 			}
 			var currentIndex = me.playerCur;
 			var vlog = me.playerList[currentIndex];
 			var vlogId = vlog.vlogId;
-	  var result = await vlogComment(vlogId)
+			var result = await vlogComment(vlogId);
 			if (result.data.status == 200) {
 				me.thisVlogTotalComentCounts = result.data.data;
 			} else {
@@ -529,20 +628,82 @@ export default {
 		commentToggle() {
 			this.$refs.comment.open();
 			uni.hideTabBar({
-        animation: true,
+				animation: true
 			});
 		},
 		shareToggle() {
 			this.$refs.share.open();
 			uni.hideTabBar({
-        animation: true,
+				animation: true
 			});
-    },
+		}
-  },
+	}
 };
 </script>
 
 <style scoped>
+.progress-bar {
+	height: 60rpx;
+	width: 750rpx;
+	display: flex;
+	align-items: center;
+	position: fixed;
+	bottom: 0;
+	z-index: 99999;
+}
+
+.progress-background {
+	position: absolute;
+	bottom: 0;
+	width: 750rpx;
+	height: 2px;
+	background-color: #ccc;
+	z-index: 3;
+	pointer-events: none;
+}
+
+.progress-foreground {
+	z-index: 2;
+	height: 2px;
+	background-color: #fff;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	pointer-events: none;
+}
+.anm {
+	transition: width 0.25s linear;
+}
+
+.float-time {
+	position: absolute;
+	bottom: 56px;
+	width: 60px;
+	height: 30px;
+	background-color: rgba(0, 0, 0, 0.3);
+	color: white;
+	text-align: center;
+	align-items: center;
+	justify-content: center;
+	line-height: 30px;
+	font-size: 12px;
+	border-radius: 4px;
+	z-index: 1;
+}
+
+.abs-box {
+	width: 750rpx;
+	position: absolute;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.play-btn {
+	position: absolute;
+	width: 120rpx;
+	height: 120rpx;
+	pointer-events: none;
+}
 .icon {
 	width: 80rpx;
 	height: 80rpx;

manifest.json

@@ -1,6 +1,6 @@
 {
     "name" : "wzj4",
-    "appid" : "__UNI__1F0975C",
+    "appid" : "__UNI__6DB512D",
     "description" : "admin",
     "versionName" : "4.0.0",
     "versionCode" : 4000049,
@@ -23,14 +23,13 @@
         "modules" : {
             "Payment" : {},
             "Share" : {},
-            "Fingerprint" : {},
-            "FaceID" : {},
             "Geolocation" : {},
             "Maps" : {},
             "OAuth" : {},
             "Camera" : {},
             "Barcode" : {},
-            "VideoPlayer" : {}
+            "VideoPlayer" : {},
+            "Push" : {}
         },
         "error" : {
             /* 404错误页面*/
@@ -90,7 +89,7 @@
                 "payment" : {
                     "weixin" : {
                         "__platform__" : [ "ios", "android" ],
-                        "appid" : "wx32788b91bdb614c0",
+                        "appid" : "wxebcdaea31881caab",
                         "UniversalLinks" : "https://m-b2b2c.pickmall.cn/app/"
                     },
                     "alipay" : {
@@ -100,14 +99,14 @@
                 "ad" : {},
                 "share" : {
                     "weixin" : {
-                        "appid" : "wx32788b91bdb614c0",
+                        "appid" : "wxebcdaea31881caab",
                         "UniversalLinks" : "https://m-b2b2c.pickmall.cn/app/"
                     }
                 },
                 "oauth" : {
                     "weixin" : {
-                        "appid" : "wx32788b91bdb614c0",
+                        "appid" : "wxebcdaea31881caab",
-                        "appsecret" : "230233cef7520ee935bbecad372a370e",
+                        "appsecret" : "71826d76bad096ec5407897c6ed1391f",
                         "UniversalLinks" : "https://m-b2b2c.pickmall.cn/app/"
                     },
                     "apple" : {},
@@ -120,6 +119,9 @@
                         "__platform__" : [ "ios", "android" ],
                         "appkey_ios" : "f463d3350efe63f8be5d9a62f24d0aab",
                         "appkey_android" : "fb3f1ccb34616c70f068aa950f3e27df"
+                    },
+                    "system" : {
+                        "__platform__" : [ "ios", "android" ]
                     }
                 },
                 "maps" : {
@@ -174,7 +176,8 @@
                     "xxhdpi" : "CustomStartPage/start-page.9.png"
                 }
             }
-        }
+        },
+        "nativePlugins" : {}
     },
     "permission" : {
         "scope.userLocation" : {

nativeplugins/JG-JPush/ios/UniPluginJPush.framework/Headers/JPushModule.h

@@ -0,0 +1,17 @@
+//
+//  JPushModule.h
+//  UniPluginJPush
+//
+//  Created by huangshuni on 2021/1/12.
+//
+
+#import <Foundation/Foundation.h>
+#import "DCUniModule.h"
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface JPushModule : DCUniModule
+
+@end
+
+NS_ASSUME_NONNULL_END

nativeplugins/JG-JPush/ios/UniPluginJPush.framework/PrivacyInfo.xcprivacy

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>NSPrivacyTrackingDomains</key>
+	<array/>
+	<key>NSPrivacyCollectedDataTypes</key>
+	<array/>
+	<key>NSPrivacyTracking</key>
+	<false/>
+	<key>NSPrivacyAccessedAPITypes</key>
+	<array>
+		<dict>
+			<key>NSPrivacyAccessedAPITypeReasons</key>
+			<array>
+				<string>CA92.1</string>
+			</array>
+			<key>NSPrivacyAccessedAPIType</key>
+			<string>NSPrivacyAccessedAPICategoryUserDefaults</string>
+		</dict>
+	</array>
+</dict>
+</plist>

nativeplugins/JG-JPush/package.json

@@ -0,0 +1,169 @@
+{
+    "name": "JG-JPush",
+    "id": "JG-JPush",
+    "version": "1.2.5",
+    "description": "极光推送Hbuilder插件",
+    "_dp_type":"nativeplugin",
+    "_dp_nativeplugin":{
+        "ios": {
+			"deploymentTarget": "11.0",	
+			"validArchitectures": [    
+				"arm64"
+			],
+            "plugins": [{
+                "type": "module",
+                "name": "JG-JPush",
+                "class": "JPushModule"
+            }],
+            "hooksClass": "JPushProxy",
+            "integrateType": "framework",
+            "frameworks": [
+                "CFNetwork.framework",
+                "CoreFoundation.framework",
+                "CoreTelephony.framework",
+                "SystemConfiguration.framework",
+                "CoreGraphics.framework",
+                "Foundation.framework",
+                "UIKit.framework",
+                "Security.framework",
+                "libz.tbd",
+                "AdSupport.framework",
+                "UserNotifications.framework",
+                "libresolv.tbd",
+                "WebKit.framework",
+                "AppTrackingTransparency.framework",
+                "StoreKit.framework"
+            ],
+            "resources": [
+                
+            ],
+            "capabilities": {
+                "entitlements": {
+                    "aps-environment":"development"
+                }
+            },
+            "privacies": [
+                            "NSLocationAlwaysAndWhenInUseUsageDescription",
+                            "NSLocationAlwaysUsageDescription",
+                            "NSLocationWhenInUseUsageDescription"
+                        ],
+            "parameters": {
+                "JPUSH_ISPRODUCTION_IOS": {
+                    "des": "[iOS]是否是生产环境，是填true，不是填false或者不填",
+                    "key": "JPush:ISPRODUCTION"
+                },
+                "JPUSH_ADVERTISINGID_IOS": {
+                    "des": "[iOS]广告标识符（IDFA）如果不需要使用IDFA，可不填",
+                    "key": "JPush:ADVERTISINGID"
+                },
+                "JPUSH_DEFAULTINITJPUSH_IOS": {
+                    "des": "[iOS]是否默认初始化，是填true，不是填false或者不填",
+                    "key": "JPush:DEFAULTINITJPUSH"
+                }
+            }
+        },
+        "android": {
+            "plugins": [
+                {
+                    "type": "module",
+                    "name": "JG-JPush",
+                    "class": "cn.jiguang.uniplugin_jpush.JPushModule"
+                }
+            ],
+            "integrateType": "aar",
+            "minSdkVersion": "19",
+            "permissions": [
+                "${applicationId}.permission.JPUSH_MESSAGE",
+                "android.permission.INTERNET",
+                "android.permission.ACCESS_NETWORK_STATE",
+                "android.permission.POST_NOTIFICATIONS",
+                "com.huawei.android.launcher.permission.CHANGE_BADGE",
+                "com.vivo.notification.permission.BADGE_ICON",
+                "com.hihonor.android.launcher.permission.CHANGE_BADGE",
+                "android.permission.VIBRATE",
+                "android.permission.ACCESS_COARSE_LOCATION",
+                "android.permission.ACCESS_FINE_LOCATION",
+                "android.permission.ACCESS_BACKGROUND_LOCATION",
+                "android.permission.READ_PHONE_STATE",
+                "android.permission.QUERY_ALL_PACKAGES",
+                "android.permission.GET_TASKS",
+                "android.permission.ACCESS_WIFI_STATE",
+                "android.permission.WRITE_EXTERNAL_STORAGE",
+                "android.permission.READ_EXTERNAL_STORAGE",
+                "${applicationId}.permission.MIPUSH_RECEIVE",
+                "com.coloros.mcs.permission.RECIEVE_MCS_MESSAGE",
+                "com.heytap.mcs.permission.RECIEVE_MCS_MESSAGE"
+            ],
+            "parameters": {
+                "JPUSH_OPPO_APPKEY": {
+                    "des": "厂商OPPO-appkey,示例：OP-12345678",
+                    "key": "OPPO_APPKEY"
+                },
+                "JPUSH_OPPO_APPID":{
+                    "des": "厂商OPPO-appId,示例：OP-12345678",
+                    "key": "OPPO_APPID"
+                },
+                "JPUSH_OPPO_APPSECRET":{
+                    "des": "厂商OPPO-appSecret,示例：OP-12345678",
+                    "key": "OPPO_APPSECRET"
+                },
+                "JPUSH_VIVO_APPKEY":{
+                    "des": "厂商VIVO-appkey,示例：12345678",
+                    "key": "com.vivo.push.api_key"
+                },
+                "JPUSH_VIVO_APPID":{
+                    "des": "厂商VIVO-appId,示例：12345678",
+                    "key": "com.vivo.push.app_id"
+                },
+                "JPUSH_MEIZU_APPKEY":{
+                    "des": "厂商MEIZU-appKey,示例：MZ-12345678",
+                    "key": "MEIZU_APPKEY"
+                },
+                "JPUSH_MEIZU_APPID":{
+                    "des": "厂商MEIZU-appId,示例：MZ-12345678",
+                    "key": "MEIZU_APPID"
+                },
+                "JPUSH_XIAOMI_APPKEY":{
+                    "des": "厂商XIAOMI-appKey,示例：MI-12345678",
+                    "key": "XIAOMI_APPKEY"
+                },
+                "JPUSH_XIAOMI_APPID":{
+                    "des": "厂商XIAOMI-appId,示例：MI-12345678",
+                    "key": "XIAOMI_APPID"
+                },
+                "JPUSH_HUAWEI_APPID":{
+                    "des": "厂商HUAWEI-appId,示例：appid=12346578",
+                    "key": "com.huawei.hms.client.appid"
+                },
+                "JPUSH_HONOR_APPID" : {
+                    "des" : "厂商HONOR-appId,示例：12346578",
+                    "key" : "com.hihonor.push.app_id"
+                },
+                "JPUSH_NIO_APPID" : {
+                    "des" : "厂商nio-appId,示例：12346578",
+                    "key" : "nio_push_app_id"
+                },
+                "JPUSH_GOOGLE_API_KEY" : {
+                    "des" : "厂商google api_key,示例:g-12346578",
+                    "key" : "google_api_key"
+                },
+                "JPUSH_GOOGLE_APP_ID" : {
+                    "des" : "厂商google mobilesdk_app_id,示例：g-12346578",
+                    "key" : "google_app_id"
+                },
+                "JPUSH_GOOGLE_PROJECT_NUMBER" : {
+                    "des" : "厂商google project_number,示例：g-12346578",
+                    "key" : "gcm_defaultSenderId"
+                },
+                "JPUSH_GOOGLE_PROJECT_ID" : {
+                    "des" : "厂商google project_id ,示例：g-12346578",
+                    "key" : "project_id"
+                },
+                "JPUSH_GOOGLE_STORAGE_BUCKET" : {
+                    "des" : "厂商google storage_bucket,示例：g-12346578",
+                    "key" : "google_storage_bucket"
+                }
+            }
+        }
+    }
+}

pages.json

@@ -488,14 +488,14 @@
 				"navigationBarBackgroundColor": "#181b27"
 			}
 		},
-		// {
+		{
-		//     "path" : "pages/me/settings",
+			"path": "pages/me/settings",
-		//     "style" : {
+			"style": {
-		//         "navigationBarTitleText" : "设置",
+				"navigationBarTitleText": "设置",
-		//         "navigationBarTextStyle" : "white",
+				"navigationBarTextStyle": "white",
-		//         "navigationBarBackgroundColor" : "#181b27"
+				"navigationBarBackgroundColor": "#181b27"
-		//     }
+			}
-		// },
+		},
 		{
 			"path": "pages/me/myFans",
 			"style": {
@@ -542,7 +542,22 @@
 				"navigationBarTitleText": "消息详情",
 				"navigationBarTextStyle": "white",
 				"navigationBarBackgroundColor": "#181b27"
-				
+			}
+		},
+		{
+			"path": "pages/search/search",
+			"style": {
+				"app-plus": {
+					"titleNView": false //禁用原生导航栏
+				}
+			}
+		},
+		{
+			"path": "pages/search/searchList",
+			"style": {
+				"app-plus": {
+					"titleNView": false //禁用原生导航栏
+				}
 			}
 		}
 	],
@@ -1205,12 +1220,10 @@
 						"app-plus": {
 							"softinputMode": "adjustResize",
 							"titleNView": {
-						  "buttons": [
+								"buttons": [{
-							{
 									"type": "menu"
 									//   "click": "handleMenuClick" // 绑定点击事件
-							}
+								}]
-						  ]
 							}
 						},
 						"h5": {

pages/me/me.nvue

@@ -121,7 +121,7 @@
 
 			<view class="vlog-list">
 				<block v-for="(vlog, index) in vlogList" :key="index">
-					<image class="vlog-cover" :src="vlog.cover" @click="goToVlog(vlog)" mode="aspectFill"></image>
+					<image class="vlog-cover" :src="vlog.cover||vlog.firstFrameImg" @click="goToVlog(vlog)" mode="aspectFill"></image>
 				</block>
 			</view>
 
@@ -231,7 +231,8 @@
 					this.pageUserInfo = result.data.data;
 					storage.setVlogUserInfo(this.pageUserInfo)
 					// 查询用户信息
-					this.myList(0, 'myPublicList', true);
+					this.switchTab(0)
+					// this.myList(0, 'myPublicList', true);
 					this.setBasicUserInfo(this.pageUserInfo);
 				}
 			},
@@ -355,14 +356,14 @@
 			goMyFans(userId) {
 				uni.navigateTo({
 					animationType: "fade-in",
-					url: "myFans?userId=" + userId,
+					url: "myFans",
 				});
 			},
 			// 关注列表
 			goMyFollows(userId) {
 				uni.navigateTo({
 					animationType: "fade-in",
-					url: "myFollows?userId=" + userId,
+					url: "myFollows",
 				});
 			},
 		},

pages/me/myFans.nvue

@@ -2,7 +2,7 @@
 	<view class="mpage">
 		<view class="line"></view>
 		<scroll-view scroll-y="true" @scrolltolower="pagingFansList()">
-			<view class="user-wrapper" v-for="(f, index) in fansList" :key="index">
+			<view class="user-wrapper" v-for="(f, index) in fansList" :key="f.fanId">
 				<view class="user-info" @click="goTovlogerInfo(f.fanId)">
 					<image class="face" :src="f.face" />
 					<text class="user-name">
@@ -10,29 +10,19 @@
 					</text>
 				</view>
 
-				<view v-if="isLogin && f.me" class="operator-wrapper">
+				<view v-if="!from">
-					<text class="operator-words" style="color: #ffffff">你</text>
+					<view v-if="f.bothFriend==0" class="operator-wrapper">
-				</view>
+						<text class="operator-words" style="color: #ef274d" @click="followMe(f.fanId)">
-				<view v-else-if="!isLogin || isLogin && !f.follow && !f.fan" class="operator-wrapper">
-					<text class="operator-words" style="color: #ffffff" @click="followMe(f.fanId)">
-						关注
-					</text>
-				</view>
-				<view v-else-if="isLogin && !f.follow && f.fan" class="operator-wrapper">
-					<text class="operator-words" style="color: #ffffff" @click="followMe(f.fanId)">
 							回粉
 						</text>
 					</view>
-				<view v-else-if="isLogin && f.follow && !f.fan" class="operator-wrapper">
+					<view v-if="f.bothFriend==1" class="operator-wrapper">
-					<text class="operator-words" style="color: #ef274d" @click="cancelFollow(f.fanId)">
+						<text class="operator-words" style="color: #ffffff" @click="cancelFollow(f.fanId)">
-						已关注
+							互粉
 						</text>
 					</view>
-				<view v-else-if="isLogin && f.follow && f.fan" class="operator-wrapper">
-					<text class="operator-words" style="color: #ef274d" @click="cancelFollow(f.fanId)">
-						互关
-					</text>
 				</view>
+
 			</view>
 		</scroll-view>
 	</view>
@@ -53,28 +43,28 @@
 		data() {
 			return {
 				userId: "",
-				currentUserId: "",
-				isLogin: false,
 				screenHeight: 0,
 				page: 0,
 				totalPage: 0,
 				fansList: [],
+				from:false
 			};
 		},
 		onLoad(param) {
+			if(!isStrEmpty(param.userId)){
+				this.from = true
+				this.userId = param.userId
+			}else{
 				var uinfo = storage.getVlogUserInfo()
-			if (uinfo == null) {
+				this.userId = uinfo.id;
-				return
 			}
-			this.isLogin = true;
-			this.currentUserId = uinfo.id
-			this.userId = param.userId;
 			this.queryMyFansList(0);
 		},
 		methods: {
 			goTovlogerInfo(vlogerId) {
+				var id = storage.getVlogUserInfo().id
 				// 是否是当前登录的用户
-				if (this.currentUserId == vlogerId) {
+				if (id == vlogerId) {
 					uni.switchTab({
 						url: "me",
 					});
@@ -91,15 +81,15 @@
 				for (let i = 0; i < fansList.length; i++) {
 					let fan = fansList[i];
 					if (fan.fanId == vlogerId) {
-						fan.follow = status;
+						fan.bothFriend = status;
-						fansList.splice(i, 1, fan);
+						// fansList.splice(i, 1);
 					}
 				}
 				me.fansList = fansList;
 			},
 			async cancelFollow(vlogerId) {
 				let me = this;
-				let userId = storage.getVlogUserInfo().id
+				let userId = me.userId
 				let data = {
 					myId: userId,
 					vlogerId
@@ -107,7 +97,7 @@
 				var result = await vlogFansCancel(data)
 				console.log(result)
 				if (result.data.status == 200) {
-					me.reFreshList(vlogerId, false);
+					me.reFreshList(vlogerId, 0);
 				} else {
 					uni.showToast({
 						title: result.data.msg,
@@ -118,7 +108,7 @@
 			},
 			async followMe(vlogerId) {
 				let me = this;
-				let userId = this.currentUserId;
+				let userId = me.userId;
 				let data = {
 					myId: userId,
 					vlogerId
@@ -126,7 +116,7 @@
 				var result = await vlogFansFollow(data)
 				console.log(result)
 				if (result.data.status == 200) {
-					me.reFreshList(vlogerId, true);
+					me.reFreshList(vlogerId, 1);
 				} else {
 					uni.showToast({
 						title: result.data.msg,
@@ -148,6 +138,7 @@
 					pageSize: 10
 				}
 				var result = await vlogQueryMyFans(data)
+				console.log(result)
 				if (result.data.status == 200) {
 					let fansList = result.data.data.rows;
 					let totalPage = result.data.data.total;
@@ -218,6 +209,7 @@
 		display: flex;
 		flex-direction: row;
 		justify-content: space-between;
+		align-items: center;
 		margin-top: 20rpx;
 		margin-bottom: 20rpx;
 
@@ -232,7 +224,7 @@
 		justify-content: center;
 		background-color: #ef274d;
 		border-radius: 20rpx;
-		align-self: center;
+		align-items: center;
 		border-width: 2rpx;
 		border-color: #ef274d;
 		background-color: #181b27;

pages/me/myFollows.nvue

@@ -2,7 +2,7 @@
 	<view class="mpage">
 		<view class="line"></view>
 		<scroll-view scroll-y="true" @scrolltolower="pagingFollowsList">
-			<view class="user-wrapper" v-for="(f, index) in followsList" :key="index">
+			<view class="user-wrapper" v-for="(f, index) in followsList" :key="f.vlogerId">
 				<view class="user-info" @click="goTovlogerInfo(f.vlogerId)">
 					<image class="face" :src="f.face" />
 					<text class="user-name">
@@ -10,25 +10,19 @@
 					</text>
 				</view>
 
-				<view v-if="f.me" class="operator-wrapper">
+				<view v-if="!from">
-					<text class="operator-words" style="color: #ffffff">你</text>
+					<view v-if="f.bothFriend==0" class="operator-wrapper">
-				</view>
-				<view v-else-if="!f.follow" class="operator-wrapper">
-					<text class="operator-words" style="color: #ffffff" @click="followMe(f.vlogerId)">
-						关注
-					</text>
-				</view>
-				<view v-else-if="f.follow && !f.fan" class="operator-wrapper">
 						<text class="operator-words" style="color: #ef274d" @click="cancelFollow(f.vlogerId)">
 							已关注
 						</text>
 					</view>
-				<view v-else-if="f.follow && f.fan" class="operator-wrapper">
+					<view v-if="f.bothFriend==1" class="operator-wrapper">
-					<text class="operator-words" style="color: #ef274d" @click="cancelFollow(f.vlogerId)">
+						<text class="operator-words" style="color: #ffffff" @click="cancelFollow(f.vlogerId)">
 							互关
 						</text>
 					</view>
 				</view>
+			</view>
 		</scroll-view>
 	</view>
 </template>
@@ -48,26 +42,27 @@
 		data() {
 			return {
 				userId: "",
-				currentUserId: "",
 				screenHeight: 0,
 				page: 0,
 				totalPage: 0,
 				followsList: [],
+				from: false
 			};
 		},
 		onLoad(param) {
+			if (!isStrEmpty(param.userId)) {
+				this.from = true
+				this.userId = param.userId
+			} else {
 				var uinfo = storage.getVlogUserInfo()
-			if (uinfo==null) {
+				this.userId = uinfo.id;
-				return
 			}
-			this.currentUserId = uinfo.id
-			this.userId = param.userId;
 			this.queryMyFollowList(0);
 		},
 		methods: {
 			goTovlogerInfo(vlogerId) {
-				// 是否是当前登录的用户
+				var id = storage.getVlogUserInfo().id
-				if (this.currentUserId == vlogerId) {
+				if (id == vlogerId) {
 					uni.switchTab({
 						url: "me",
 					});
@@ -84,23 +79,23 @@
 				for (let i = 0; i < followsList.length; i++) {
 					let vloger = followsList[i];
 					if (vloger.vlogerId == vlogerId) {
-						vloger.follow = status;
+						vloger.bothFriend = status;
-						followsList.splice(i, 1, vloger);
+						followsList.splice(i, 1);
 					}
 				}
 				me.followsList = followsList;
 			},
 			async cancelFollow(vlogerId) {
 				let me = this;
-				let userId = this.currentUserId;
+				let userId = this.userId;
-				var data ={
+				var data = {
 					myId: userId,
 					vlogerId
 				}
 				var result = await vlogFansCancel(data)
 				console.log(result)
 				if (result.data.status == 200) {
-					me.reFreshList(vlogerId, false);
+					me.reFreshList(vlogerId, 0);
 				} else {
 					uni.showToast({
 						title: result.data.msg,
@@ -111,7 +106,7 @@
 			},
 			async followMe(vlogerId) {
 				let me = this;
-				let userId = this.currentUserId;
+				let userId = this.userId;
 				let data = {
 					myId: userId,
 					vlogerId
@@ -132,11 +127,8 @@
 				let me = this;
 				page = page + 1;
 				let userId = me.userId;
-				let currentUserId = this.currentUserId;
 				var data = {
-					myId:userId,
+					myId: userId,
-					// vlogerId: userId,
-					// currentUserId: currentUserId,
 					page: page,
 					pageSize: 10
 				}
@@ -145,6 +137,7 @@
 					let followsList = result.data.data.rows;
 					let totalPage = result.data.data.total;
 					me.followsList = me.followsList.concat(followsList);
+					console.log(me.followsList)
 					me.page = page;
 					me.totalPage = totalPage;
 				}
@@ -157,8 +150,8 @@
 				}
 				this.queryMyFollowList(this.page);
 			},
-		},
+		}
-	};
+	}
 </script>
 
 <style scoped>
@@ -206,7 +199,7 @@
 		justify-content: space-between;
 		margin-top: 20rpx;
 		margin-bottom: 20rpx;
-
+		align-items: center;
 
 
 	}

pages/me/settings.vue

@@ -0,0 +1,227 @@
+<template>
+  <view class="page">
+    <!-- <view class="line"></view> -->
+
+    <scroll-view scroll-y="true">
+      <view
+        style="
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          padding: 20rpx;
+        ">
+        <view
+          style="
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+          ">
+          <image
+            src="/static/imooc/lee.jpeg"
+            mode="widthFix"
+            class="fengjianyingyue"
+            style="align-self: center"></image>
+          <image
+            src="/static/imooc/fengjianyingyue.png"
+            mode="widthFix"
+            class="fengjianyingyue-name"
+            style="align-self: center"></image>
+        </view>
+
+        <view>
+          <text class="introduce">
+            物流科技公司部门经理，近10年开发和技术管理经验。主要从事后端技术和架构领域，有丰富的电商平台与物流平台核心系统的架构设计和开发经验。
+            拥有丰富的大型项目开发经验，授课风格诙谐幽默，讲解到位细致。
+          </text>
+          <text class="introduce">
+            近20万的学生学习人数，学生入职公司有：
+            百度云盘，阿里，腾讯云，字节跳动，金山，网易，OPPO，新浪微博，华为，货拉拉，58同城，海信，蘑菇街，金蝶
+            等。
+          </text>
+        </view>
+      </view>
+
+      <view
+        style="
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          margin-top: 20rpx;
+        ">
+        <image
+          src="/static/imooc/course-javaarchitect.png"
+          mode="widthFix"
+          class="course"
+          style="width: 380rpx"></image>
+      </view>
+
+      <view
+        style="
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          margin-top: 20rpx;
+          padding-left: 30rpx;
+          padding-right: 30rpx;
+        ">
+        <image
+          src="/static/imooc/course-pm.png"
+          mode="widthFix"
+          class="course"
+          style=""></image>
+        <image
+          src="/static/imooc/course-springcloud.png"
+          mode="widthFix"
+          class="course"
+          style=""></image>
+      </view>
+
+      <view
+        style="
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          margin-top: 20rpx;
+          padding-left: 30rpx;
+          padding-right: 30rpx;
+        ">
+        <image
+          src="/static/imooc/course-netty.png"
+          mode="widthFix"
+          class="course"
+          style=""></image>
+        <image
+          src="/static/imooc/course-zookeeper.png"
+          mode="widthFix"
+          class="course"
+          style=""></image>
+      </view>
+
+      <!-- <view style="display: flex;flex-direction: row;justify-content: center;margin-top: 20rpx;">
+				<image src="/static/imooc/lee-qrcode.png" mode="widthFix" class="course" style="width: 380rpx;"></image>
+			</view> -->
+
+      <view
+        :class="{ logout: !logoutTouched, 'logout-touched': logoutTouched }"
+        @touchstart="touchstartLogout"
+        @touchend="touchendLogout"
+        @click="logout"
+        style="
+          margin-top: 20rpx;
+          padding-left: 30rpx;
+          padding-right: 30rpx;
+          width: 750rpx;
+          height: 120rpx;
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+        ">
+        <text style="color: #ffffff; align-self: center; font-size: 15px">
+          退出登录
+        </text>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      logoutTouched: false,
+    };
+  },
+  onLoad() {},
+  methods: {
+    touchstartLogout() {
+      this.logoutTouched = true;
+    },
+    touchendLogout() {
+      this.logoutTouched = false;
+    },
+    logout() {
+      // let userId = getApp().getUserInfoSession().id;
+   //    uni.request({
+   //      method: "GET",
+   //      url: serverUrl + "/passport/logout?userId=" + userId,
+   //      success(result) {
+   //        let status = result.data.status;
+   //        if (status == 211) {
+   //          app.clearUserInfo();
+			// uni.showToast({
+			// 	title: result.data.msg,
+			// 	duration: 3000
+			// })
+   //          // 在登录登出后，都需要重新刷新首页list，目的为了刷新关注点赞状态
+   //          // uni.setStorageSync("needRefreshIndexVlogList", "1");
+   //          // uni.switchTab({
+   //          // 	url: "../index/index"
+   //          // })
+   //          uni.reLaunch({
+   //            url: "../index/index",
+   //          });
+   //        }
+   //      },
+   //    });
+    },
+  },
+};
+</script>
+
+<style>
+.page {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: #181b27;
+}
+
+.line {
+  height: 1rpx;
+  background-color: #393a41;
+  width: 750rpx;
+}
+
+.place-box {
+  background-color: #4a4c52;
+}
+.place-box-touched {
+  background-color: #6d6b6b;
+}
+
+.right-arrow {
+  width: 32rpx;
+  height: 32rpx;
+  margin-left: 20rpx;
+}
+
+.logout {
+  background-color: #4a4c52;
+}
+.logout-touched {
+  background-color: #6d6b6b;
+}
+.fengjianyingyue {
+  width: 250rpx;
+  border-width: 1rpx;
+  border-color: #ffffff;
+  border-radius: 10rpx;
+}
+.fengjianyingyue-name {
+  width: 200rpx;
+  margin-top: 26rpx;
+  opacity: 0.8;
+}
+.introduce {
+  color: #f1f1f1;
+  font-size: 26rpx;
+  font-weight: 300;
+  width: 440rpx;
+}
+.course {
+  width: 330rpx;
+  border-radius: 5px;
+}
+</style>

pages/me/vlogerInfo.nvue

@@ -0,0 +1,687 @@
+<template>
+  <view class="page">
+    <scroll-view
+      class="isLogin-info-wrapper"
+      :style="{ height: screenHeight + 'px' }"
+      scroll-y="true"
+      @scrolltolower="loadMore">
+      <image class="mybg" :src="pageUserInfo.bgImg" mode="aspectFill" />
+
+
+      <view class="header" :style="{ marginTop: statusBarHeight + 'px' }">
+        <image
+          class="header-right-search"
+          src="../../static/images/icon-back.png"
+          @click="back()" />
+      </view>
+      <view class="my-info-wrapper">
+        <view class="my-info">
+          <image :src="pageUserInfo.face" mode="aspectFill" class="my-face" />
+          <view class="info-wrapper">
+            <text class="nickname">
+              {{ pageUserInfo.nickname }}
+            </text>
+            <view class="tiktok-num-wrapper">
+              <text class="tiktok-num">视频号：</text>
+              <text class="tiktok-num">
+                {{ pageUserInfo.imoocNum }}
+              </text>
+            </view>
+            <view class="location">
+              <text class="location-text">所在地：</text>
+              <text class="location-text">
+                {{ pageUserInfo.city == "" ? "中国" : "" + pageUserInfo.city
+                }}{{
+                  pageUserInfo.district == "" ? "" : "·" + pageUserInfo.district
+                }}
+              </text>
+            </view>
+            <view class="sex-wrapper">
+              <view class="constellation">
+                <image
+                  class="sex-img"
+                  v-if="pageUserInfo.sex == 1"
+                  src="/static/images/icon-sex-boy.png" />
+                <image
+                  class="sex-img"
+                  v-if="pageUserInfo.sex == 0"
+                  src="/static/images/icon-sex-girl.png" />
+                <image
+                  class="sex-img"
+                  v-if="pageUserInfo.sex == 2"
+                  src="/static/images/icon-sex-secret.png" />
+                <text class="astro">{{ astro }}座</text>
+              </view>
+              <view class="animal">
+                <text class="animal-text">
+                  {{ animal }}
+                </text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <text class="desc">
+        {{ pageUserInfo.description }}
+      </text>
+
+      <view class="bottom-wrapper">
+        <view class="bottom">
+          <view class="bottom-item" @click="goMyFollows(pageUserInfo.id)">
+            <text class="item-num">
+              {{ getGraceNumber(pageUserInfo.myFollowsCounts) }}
+            </text>
+            <text class="item-text">关注</text>
+          </view>
+          <view class="bottom-item" @click="goMyFans(pageUserInfo.id)">
+            <text class="item-num">
+              {{ getGraceNumber(pageUserInfo.myFansCounts) }}
+            </text>
+            <text class="item-text">粉丝</text>
+          </view>
+          <view class="bottom-item">
+            <text class="item-num">
+              {{ getGraceNumber(pageUserInfo.totalLikeMeCounts) }}
+            </text>
+            <text class="item-text">获赞</text>
+          </view>
+        </view>
+
+        <view class="edit">
+          <view
+            v-if="isFollow && !isFan"
+            @click="cancelFollow()"
+            class="follow-btn">
+            <text class="follow-text">已关注</text>
+          </view>
+          <view
+            v-if="isFollow && isFan"
+            @click="cancelFollow()"
+            class="follow-btn">
+            <text class="follow-text">相互关注</text>
+          </view>
+          <view
+            v-if="!isFollow"
+            @click="followMe()"
+            class="follow-btn"
+            style="background-color: #ef274d">
+            <text class="follow-text">关注我</text>
+          </view>
+        </view>
+      </view>
+
+      <view class="tab-wrapper">
+        <view class="tab-item" @click="switchTab(0)">
+          <text class="tab-normal" :class="{ 'tab-selected': currentTab == 0 }">
+            作品
+          </text>
+          <view v-if="currentTab == 0" class="selected-tab"></view>
+        </view>
+ <!--       <view class="tab-item" @click="switchTab(1)">
+          <text class="tab-normal" :class="{ 'tab-selected': currentTab == 1 }">
+            私密
+          </text>
+          <view v-if="currentTab == 1" class="selected-tab"></view>
+        </view> -->
+        <view class="tab-item" @click="switchTab(1)">
+          <text class="tab-normal" :class="{ 'tab-selected': currentTab == 1 }">
+            赞过
+          </text>
+          <view v-if="currentTab == 1" class="selected-tab"></view>
+        </view>
+      </view>
+
+      <view class="vlog-list">
+        <block v-for="(vlog, index) in vlogList" :key="index">
+          <image
+            class="vlog-cover"
+            :src="vlog.cover||vlog.firstFrameImg"
+            @click="goToVlog(vlog)"
+            mode="aspectFill"></image>
+        </block>
+      </view>
+
+      <view v-if="vlogList.length == 0" class="empty">
+        <text class="empty-text">~ 空空如也 ~</text>
+      </view>
+
+      <view v-if="vlogList.length > 0" class="not-empty">
+        <text class="not-empty-text">~ 没有更多了 ~</text>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+	let system = uni.getSystemInfoSync();
+	import * as filters from "@/utils/filters.js"
+	import api from "@/config/api.js";
+	import storage from "@/utils/storage.js"; //缓存
+	import {
+		vlogUserInfo,
+		vlogQueryDoIFollowVloger,
+		vlogMyPublicList,
+		vlogMyPrivateList,
+		vlogMyLikedList,
+		vlogMeTag,
+		vlogFansCancel,
+		vlogFansFollow
+	} from "@/api/vlog"
+
+	import {
+		getAstro,
+		getAnimal,
+		dateFormat,
+		graceNumber,
+		isStrEmpty
+	} from '@/utils/tools.js'
+export default {
+  data() {
+    return {
+      pageUserInfo: {
+		  id: "",
+		  mobile: "",
+		  nickname: "",
+		  imoocNum: "",
+		  face: "",
+		  birthday: "1998-12-31T16:00:00.000+0000",
+		  country: "",
+		  province: "",
+		  city: "",
+		  district: "",
+		  description: "",
+		  myFollowsCounts: 0,
+		  myFansCounts: 0,
+		  totalLikeMeCounts: 0
+	  },
+      userPageId: "",
+      astro: "",
+      animal: "",
+      loginWords: "请登录",
+
+      statusBarHeight: 0,
+      screenHeight: 0,
+      screenHeightUnLogin: 0,
+
+      currentTab: 0,
+      isFollow: false,
+      isFan: false,
+      isAndroid: uni.getSystemInfoSync().platform == "android",
+
+      page: 0,
+      totalpage: 0,
+      vlogList: [],
+    };
+  },
+  async onLoad(params) {
+    this.statusBarHeight = system.statusBarHeight;
+    let screenHeight = system.safeArea.bottom + 50;
+    this.screenHeight = screenHeight;
+    let screenHeightUnLogin = system.safeArea.bottom;
+    this.screenHeightUnLogin = screenHeightUnLogin;
+    let me = this;
+
+    // 从视频页面, 点击用户头像传递过来的id
+    let userPageId = params.userPageId;
+    if (isStrEmpty(userPageId)) {
+      uni.showToast({
+        title: "出错啦~",
+        icon: " none",
+        duration: 2000,
+      });
+      settimeout(() => {
+        uni.navigateBack({
+          delta: 1,
+        });
+      }, 1500);
+    }
+
+    me.userPageId = userPageId;
+	var result = await vlogUserInfo(userPageId)
+	console.log(result)
+	if (result.data.status == 200) {
+	  me.pageUserInfo = result.data.data;
+	  me.setBasicUserInfo(me.pageUserInfo);
+	} else {
+	  uni.showToast({
+	    title: result.data.msg,
+	    icon: "none",
+	    duration: 3000,
+	  });
+	}
+    // this.switchTab(0);
+	this.myList(0, 'myPublicList', true);
+    let myUserId = "";
+	let info = storage.getVlogUserInfo()
+    if (info!=null) {
+      myUserId = info.id;
+    }
+
+    if (!isStrEmpty(myUserId)) {
+      // 查询我是否关注博主
+	  var result = await vlogQueryDoIFollowVloger({myId:myUserId,vlogerId:userPageId})
+	  console.log(result)
+	  if (result.data.status == 200) {
+	    me.isFollow = result.data.data;
+	    // me.isFan = result.data.data;
+	  } else {
+	    uni.showToast({
+	      title: result.data.msg,
+	      icon: "none",
+	      duration: 3000,
+	    });
+	  }
+	  // 查询博主是否关注我
+	  var result2 = await vlogQueryDoIFollowVloger({myId:userPageId,vlogerId:myUserId})
+	  if (result2.data.status == 200) {
+	    me.isFan = result2.data.data;
+	  } else {
+	    uni.showToast({
+	      title: result2.data.msg,
+	      icon: "none",
+	      duration: 3000,
+	    });
+	  }
+    }
+  },
+  methods: {
+    setBasicUserInfo(myUserInfo) {
+      // 根据生日判断星座
+      let birthday = myUserInfo.birthday;
+      let birth = dateFormat("YYYY-mm-dd", new Date(birthday));
+      let birthArr = birth.split("-");
+      let year = birthArr[0];
+      let month = birthArr[1];
+      let day = birthArr[2];
+      let astro = getAstro(month, day);
+      this.astro = astro;
+
+      // 根据生日判断生肖
+      let animal = getAnimal(year);
+      this.animal = animal;
+    },
+    switchTab(index) {
+      this.currentTab = index;
+	  if (index == 0) {
+	  	this.page = 0;
+	  	this.toalPage = 0;
+	  	this.myList(0, 'myPublicList', true);
+	  } else if (index == 1) {
+	  	this.page = 0;
+	  	this.toalPage = 0;
+	  	this.myList(0, 'myLikedList', true);
+	  }
+    },
+    loadMore() {
+      if (this.page >= this.toalPage) {
+        return;
+      } else {
+        this.myList(this.page);
+      }
+    },
+	async myList(page, requrl, init = false) {
+		let me = this;
+		page = page + 1;
+		me.page = page;
+		let userId = me.userPageId;;
+		var result = await vlogMeTag(requrl, page, 20, userId)
+		if (result.data.status == 200) {
+			let vlogList = result.data.data.rows;
+			console.log(vlogList)
+			let toalPage = result.data.data.total;
+			if (init) {
+				me.vlogList = vlogList
+			} else {
+				me.vlogList = me.vlogList.concat(vlogList);
+			}
+			me.page = page;
+			me.toalPage = toalPage;
+		}
+	},
+    back() {
+      uni.navigateBack({
+        delta: 1,
+      });
+    },
+    async cancelFollow() {
+      let me = this;
+      let vlogerId = me.userPageId;
+      let userId = storage.getVlogUserInfo().id;
+	  var result = await vlogFansCancel({myId:userId,vlogerId:vlogerId})
+	  if (result.data.status == 200) {
+	    me.isFollow = false;
+	    // uni.setStorageSync("justCancelVlogerId", vlogerId);
+	    // 刷新当前页的粉丝数
+	    let pendingInfo = me.pageUserInfo;
+	    me.pageUserInfo.myFansCounts = pendingInfo.myFansCounts - 1;
+	  } else {
+	    uni.showToast({
+	      title: result.data.msg,
+	      icon: "none",
+	      duration: 3000,
+	    });
+	  }
+    },
+    async followMe() {
+      let me = this;
+      let myUserInfo = storage.getVlogUserInfo();
+
+      let vlogerId = me.userPageId;
+      let userId = myUserInfo.id;
+	  var result = await vlogFansFollow({myId:userId,vlogerId:vlogerId})
+	  if (result.data.status == 200) {
+	    me.isFollow = true;
+	    // uni.setStorageSync("justFollowVlogerId", vlogerId);
+	    // 刷新当前页的粉丝数
+	    let pendingInfo = me.pageUserInfo;
+	    me.pageUserInfo.myFansCounts = pendingInfo.myFansCounts + 1;
+	  } else {
+	    uni.showToast({
+	      title: result.data.msg,
+	      icon: "none",
+	      duration: 3000,
+	    });
+	  }
+    },
+
+    // 把超过1000或10000的数字调整, 比如1.3k/6.8w
+    getGraceNumber(num) {
+      return graceNumber(num);
+    },
+
+    goToVlog(vlog) {
+      let vlogId = vlog.id ? vlog.id : vlog.vlogId;
+      // uni.navigateTo({
+      //   url: "../vlog/vlog?type=mine&isNeedPage=1&vlogId=" + vlogId,
+      // });
+	  uni.navigateTo({
+	  	url: "/pages/me/vlog?vlogId=" + vlogId,
+	  });
+    },
+    goMyFans(userId) {
+      uni.navigateTo({
+        animationType: "fade-in",
+        url: "myFans?userId=" + userId,
+      });
+    },
+
+    goMyFollows(userId) {
+      uni.navigateTo({
+        animationType: "fade-in",
+        url: "myFollows?userId=" + userId,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.page {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: #000000;
+
+  .isLogin-info-wrapper {
+    .header {
+      position: absolute;
+      left: 0;
+      right: 0;
+      flex-direction: row;
+      height: 100rpx;
+      line-height: 100rpx;
+      align-items: center;
+      padding-left: 40rpx;
+      padding-right: 40rpx;
+      .header-right-search {
+        width: 40rpx;
+        height: 40rpx;
+        opacity: 0.8;
+      }
+    }
+    .mybg {
+      width: 750rpx;
+      height: 750rpx;
+      box-shadow: inset 0 -150px 180px #313030;
+    }
+
+    .my-info-wrapper {
+      position: relative;
+      left: 30rpx;
+      top: -560rpx;
+      display: flex;
+      flex-direction: column;
+      width: 1000rpx;
+      .my-info {
+        display: flex;
+        flex-direction: row;
+        .my-face {
+          width: 200rpx;
+          height: 200rpx;
+          border-radius: 100rpx;
+          border-width: 1px;
+          border-color: #f1f1f1;
+        }
+        .info-wrapper {
+          margin-left: 30rpx;
+          padding-top: 20rpx;
+          width: 500rpx;
+          .nickname {
+            font-size: 20px;
+            color: #ffffff;
+            font-weight: 600;
+          }
+          .tiktok-num-wrapper {
+            display: flex;
+            flex-direction: row;
+            .tiktok-num {
+              font-size: 10px;
+              color: #ffffff;
+              font-weight: 300;
+            }
+          }
+          .location {
+            display: flex;
+            flex-direction: row;
+            height: 20px;
+            margin-top: 2px;
+            font-size: 1px;
+            .location-text {
+              line-height: 20px;
+              color: #ffffff;
+              font-size: 10px;
+              font-weight: 300;
+            }
+          }
+          .sex-wrapper {
+            display: flex;
+            flex-direction: row;
+            margin-top: 10rpx;
+            .constellation {
+              display: flex;
+              flex-direction: row;
+              justify-content: center;
+              background-color: #000000;
+              opacity: 0.5;
+              width: 130rpx;
+              height: 40rpx;
+              border-radius: 10px;
+              .sex-img {
+                width: 22rpx;
+                height: 22rpx;
+                align-self: center;
+              }
+              .astro {
+                font-size: 10px;
+                color: #ffffff;
+                line-height: 20px;
+                font-weight: bold;
+                margin-left: 6rpx;
+                align-self: center;
+              }
+            }
+            .animal {
+              margin-left: 10rpx;
+              display: flex;
+              flex-direction: row;
+              justify-content: center;
+              background-color: #000000;
+              opacity: 0.5;
+              width: 60rpx;
+              height: 40rpx;
+              border-radius: 10px;
+              .animal-text {
+                font-size: 10px;
+                color: #ffffff;
+                line-height: 20px;
+                font-weight: bold;
+                align-self: center;
+              }
+            }
+          }
+        }
+      }
+    }
+    .desc {
+      position: relative;
+      top: -520rpx;
+      color: #ffffff;
+      font-size: 14px;
+      margin: 0 30rpx;
+    }
+
+    .bottom-wrapper {
+      position: relative;
+      top: -510rpx;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      .bottom {
+        display: flex;
+        flex-direction: row;
+        .bottom-item {
+          margin-left: 30rpx;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          .item-num {
+            color: #ffffff;
+            font-size: 14px;
+            font-weight: bold;
+            align-self: center;
+          }
+          .item-text {
+            color: #ffffff;
+            font-size: 12px;
+            font-weight: 300;
+            align-self: center;
+          }
+        }
+      }
+      .edit {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        margin-right: 30rpx;
+        .follow-btn {
+          margin-right: 20rpx;
+          border-width: 1px;
+          border-color: #ffffff;
+          width: 200rpx;
+          height: 66rpx;
+          background-color: #545456;
+          opacity: 0.8;
+          border-radius: 40rpx;
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-self: center;
+          .follow-text {
+            font-size: 13px;
+            color: #ffffff;
+            font-weight: 500;
+            align-self: center;
+          }
+        }
+      }
+    }
+    .tab-wrapper {
+      position: relative;
+      top: -480rpx;
+      height: 40px;
+      background-color: #171825;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      padding-top: 3px;
+      border-top-left-radius: 12px;
+      border-top-right-radius: 12px;
+      .tab-item {
+        width: 250rpx;
+        align-self: center;
+        .tab-normal {
+          font-size: 18px;
+          font-weight: 500;
+          align-self: center;
+          color: #808080;
+        }
+        .tab-selected {
+          color: #ffffff;
+        }
+        .selected-tab {
+          margin-top: 5px;
+          height: 5rpx;
+          width: 250rpx;
+          border-radius: 6rpx;
+          background-color: #ef274d;
+        }
+      }
+    }
+    .vlog-list {
+      position: relative;
+      top: -480rpx;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      background-color: #000000;
+      .vlog-cover {
+        align-self: center;
+        width: 248rpx;
+        height: 360rpx;
+        border-width: 1rpx;
+      }
+    }
+    .empty {
+      background-color: #000000;
+      width: 750rpx;
+      height: 300rpx;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      position: relative;
+      top: -480rpx;
+      .empty-text {
+        color: #ffffff;
+        font-size: 14px;
+        margin-top: 200rpx;
+      }
+    }
+
+    .not-empty {
+      width: 750rpx;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      position: relative;
+      top: -260rpx;
+      .not-empty-text {
+        color: #ffffff;
+        font-size: 14px;
+      }
+    }
+  }
+}
+</style>

pages/passport/login.vue

@@ -1,56 +1,122 @@
 <template>
 	<div class="wrapper">
 		<div v-if="!wechatLogin">
-			<u-navbar :is-back="true" :border-bottom="false" :custom-back="customback"></u-navbar>
+			<u-navbar
+				:is-back="true"
+				:border-bottom="false"
+				:custom-back="customback"
+			></u-navbar>
 			<div>
 				<div class="title">{{ loginTitleWay[current].title }}</div>
 				<div :class="current == 1 ? 'desc-light' : 'desc'">
-					{{ loginTitleWay[current].desc
+					{{ loginTitleWay[current].desc }}
-          }}<span v-if="current == 1">{{ mobile | secrecyMobile }}</span>
+					<span v-if="current == 1">{{ mobile | secrecyMobile }}</span>
 				</div>
 			</div>
 			<!-- 手机号 -->
 			<div v-show="current == 0">
-				<u-input :custom-style="inputStyle" :placeholder-style="placeholderStyle" placeholder="请输入手机号 (11位)"
+				<u-input
-					class="mobile" focus v-model="mobile" type="number" maxlength="11" />
+					:custom-style="inputStyle"
-				<div :class="!enabuleFetchCode ? 'disable' : 'fetch'" @click="fetchCode" class="btn">
+					:placeholder-style="placeholderStyle"
+					placeholder="请输入手机号 (11位)"
+					class="mobile"
+					focus
+					v-model="mobile"
+					type="number"
+					maxlength="11"
+				/>
+				<div
+					:class="!enabuleFetchCode ? 'disable' : 'fetch'"
+					@click="fetchCode"
+					class="btn"
+				>
 					获取验证码
 				</div>
 				<div class="flex">
-					<u-checkbox-group :icon-size="24" width="45rpx">
+					<u-checkbox-group
-						<u-checkbox shape="circle" v-model="enabulePrivacy" active-color="#FF5E00"></u-checkbox>
+						:icon-size="24"
+						width="45rpx"
+					>
+						<u-checkbox
+							shape="circle"
+							v-model="enabulePrivacy"
+							active-color="#FF5E00"
+						></u-checkbox>
 					</u-checkbox-group>
 					<div class="tips">
-						未注册的手机号验证后将自动创建用户账号，登录即代表您已同意<span @click="navigateToPrivacy('privacy')">《使用条款及隐私协议》</span>
+						未注册的手机号验证后将自动创建用户账号，登录即代表您已同意
+						<span @click="navigateToPrivacy('privacy')">《使用条款及隐私协议》</span>
 					</div>
 				</div>
 			</div>
 			<!-- 输入验证码 -->
-			<div v-show="current == 1" class="box-code">
+			<div
-				<verifyCode type="bottom" @confirm="submit" boxActiveColor="#D8D8D8" v-model="code" isFocus
+				v-show="current == 1"
-					boxNormalColor="#D8D8D8" cursorColor="#D8D8D8" />
+				class="box-code"
+			>
+				<verifyCode
+					type="bottom"
+					@confirm="submit"
+					boxActiveColor="#D8D8D8"
+					v-model="code"
+					isFocus
+					boxNormalColor="#D8D8D8"
+					cursorColor="#D8D8D8"
+				/>
 
 				<div class="fetch-btn">
-					<u-verification-code change-text="验证码已发送（x）" end-text="重新获取验证码" unique-key="page-login"
+					<u-verification-code
-						:seconds="seconds" @end="end" @start="start" ref="uCode"
+						change-text="验证码已发送（x）"
-						@change="codeChange"></u-verification-code>
+						end-text="重新获取验证码"
-					<span @tap="fetchCode" :style="{ color: codeColor }"> {{ tips }}</span>
+						unique-key="page-login"
+						:seconds="seconds"
+						@end="end"
+						@start="start"
+						ref="uCode"
+						@change="codeChange"
+					></u-verification-code>
+					<span
+						@tap="fetchCode"
+						:style="{ color: codeColor }"
+					>
+						{{ tips }}
+					</span>
 				</div>
 			</div>
 
 			<!-- 循环出当前可使用的第三方登录模式 -->
 			<div class="flex login-list">
-				<div v-if="item.code" :style="{ background: item.color }" class="login-item"
+				<div
-					v-for="(item, index) in loginList" :key="index">
+					v-if="item.code"
-					<u-icon v-if="item.title != 'APPLE'" color="#fff" size="42" :name="item.icon"
+					:style="{ background: item.color }"
-						@click="navigateLogin(item)">
+					class="login-item"
-					</u-icon>
+					v-for="(item, index) in loginList"
-					<u-image v-else src="/static/appleidButton@2x.png" :lazy-load="false" @click="navigateLogin(item)"
+					:key="index"
-						width="80" height="80" />
+				>
+					<u-icon
+						v-if="item.title != 'APPLE'"
+						color="#fff"
+						size="42"
+						:name="item.icon"
+						@click="navigateLogin(item)"
+					></u-icon>
+					<u-image
+						v-else
+						src="/static/appleidButton@2x.png"
+						:lazy-load="false"
+						@click="navigateLogin(item)"
+						width="80"
+						height="80"
+					/>
 				</div>
 			</div>
-			<myVerification v-if="codeFlag" @send="verification" class="verification" ref="verification"
+			<myVerification
-				business="LOGIN" />
+				v-if="codeFlag"
+				@send="verification"
+				class="verification"
+				ref="verification"
+				business="LOGIN"
+			/>
 		</div>
 		<view v-else>
 			<wechatH5Login />
@@ -59,30 +125,18 @@
 </template>
 
 <script>
-	import {
+import { openIdLogin, loginCallback } from '@/api/connect.js';
-		openIdLogin,
+import api from '@/config/api.js';
-		loginCallback
+import { sendMobile, smsLogin } from '@/api/login';
-	} from "@/api/connect.js";
+import myVerification from '@/components/verification/verification.vue'; //验证码模块
-	import api from "@/config/api.js";
+import uuid from '@/utils/uuid.modified.js'; // uuid
-	import {
+import verifyCode from '@/components/verify-code/verify-code';
-		sendMobile,
+import { getUserInfo } from '@/api/members';
-		smsLogin
+import { whetherNavigate } from '@/utils/Foundation'; //登录跳转
-	} from "@/api/login";
+import storage from '@/utils/storage.js'; //缓存
-	import myVerification from "@/components/verification/verification.vue"; //验证码模块
+import wechatH5Login from './wechatH5Login.vue';
-	import uuid from "@/utils/uuid.modified.js"; // uuid
+import { webConnect } from '@/api/connect.js';
-	import verifyCode from "@/components/verify-code/verify-code";
+export default {
-	import {
-		getUserInfo
-	} from "@/api/members";
-	import {
-		whetherNavigate
-	} from "@/utils/Foundation"; //登录跳转
-	import storage from "@/utils/storage.js"; //缓存
-	import wechatH5Login from "./wechatH5Login.vue";
-	import {
-		webConnect
-	} from "@/api/connect.js";
-	export default {
 	components: {
 		myVerification,
 		verifyCode,
@@ -95,56 +149,57 @@
 			wechatLogin: false, //是否加载微信公众号登录
 			flage: false, //是否验证码验证
 			codeFlag: true, //验证开关，用于是否展示验证码
-				tips: "",
+			tips: '',
 			current: 0,
-				codeColor: "#999", //按钮验证码颜色
+			codeColor: '#999', //按钮验证码颜色
 			lightColor: this.$lightColor,
 			seconds: 60, //默认验证码等待时间
-				loginTitleWay: [{
+			loginTitleWay: [
-						title: "欢迎登录",
+				{
-						desc: "登录后更精彩，美好生活即将开始",
+					title: '欢迎登录',
+					desc: '登录后更精彩，美好生活即将开始'
 				},
 				{
-						title: "请输入验证码",
+					title: '请输入验证码',
-						desc: "已经发送验证码至",
+					desc: '已经发送验证码至'
-					},
+				}
 			],
 			showBack: false,
 			enabuleFetchCode: false,
 			enabulePrivacy: false, //隐私政策
-				mobile: "", //手机号
+			mobile: '', //手机号
-				code: "", //验证码
+			code: '', //验证码
 			inputStyle: {
-					height: "104rpx",
+				height: '104rpx',
-					"border-bottom": "1rpx solid #D8D8D8",
+				'border-bottom': '1rpx solid #D8D8D8',
-					"letter-spacing": "1rpx",
+				'letter-spacing': '1rpx',
-					"font-size": "40rpx",
+				'font-size': '40rpx',
-					"line-height": "40rpx",
+				'line-height': '40rpx',
-					color: "#333",
+				color: '#333'
 			},
-				placeholderStyle: "font-size: 32rpx;line-height: 32rpx;color: #999999;",
+			placeholderStyle: 'font-size: 32rpx;line-height: 32rpx;color: #999999;',
 			loginList: [
 				//第三方登录集合
 				{
-						icon: "weixin-fill",
+					icon: 'weixin-fill',
-						color: "#00a327",
+					color: '#00a327',
-						title: "微信",
+					title: '微信',
-						code: "WECHAT",
+					code: 'WECHAT'
 				},
 				{
-						icon: "qq-fill",
+					icon: 'qq-fill',
-						color: "#38ace9",
+					color: '#38ace9',
-						title: "QQ",
+					title: 'QQ',
-						code: "QQ",
+					code: 'QQ'
 				},
 				{
-						icon: "apple-fill",
+					icon: 'apple-fill',
-						color: "#000000",
+					color: '#000000',
-						title: "Apple",
+					title: 'Apple',
-						code: "APPLE",
+					code: 'APPLE'
-					},
+				}
 			],
-				initurl:false
+			initurl: false
 		};
 	},
 
@@ -152,7 +207,7 @@
 		//#ifdef H5
 		let isWXBrowser = /micromessenger/i.test(navigator.userAgent);
 		if (isWXBrowser) {
-				webConnect("WECHAT").then((res) => {
+			webConnect('WECHAT').then((res) => {
 				let data = res.data;
 				if (data.success) {
 					window.location = data.result;
@@ -166,7 +221,7 @@
 		// #ifndef APP-PLUS
 		//判断是否微信浏览器
 		var ua = window.navigator.userAgent.toLowerCase();
-			if (ua.match(/MicroMessenger/i) == "micromessenger") {
+		if (ua.match(/MicroMessenger/i) == 'micromessenger') {
 			this.wechatLogin = true;
 			return;
 		}
@@ -175,45 +230,45 @@
 		 * 条件编译判断当前客户端类型
 		 */
 		//#ifdef H5
-			this.clientType = "H5";
+		this.clientType = 'H5';
 		//#endif
 
 		//#ifdef APP-PLUS
-			this.clientType = "APP";
+		this.clientType = 'APP';
 		/**如果是app 加载支持的登录方式*/
 		let _this = this;
 		uni.getProvider({
-				service: "oauth",
+			service: 'oauth',
 			success: (result) => {
 				_this.loginList = result.provider.map((value) => {
 					//展示title
-						let title = "";
+					let title = '';
 					//系统code
-						let code = "";
+					let code = '';
 					//颜色
-						let color = "#8b8b8b";
+					let color = '#8b8b8b';
 					//图标
-						let icon = "";
+					let icon = '';
 					//uni 联合登录 code
-						let appcode = "";
+					let appcode = '';
 					switch (value) {
-							case "weixin":
+						case 'weixin':
-								icon = "weixin-circle-fill";
+							icon = 'weixin-circle-fill';
-								color = "#00a327";
+							color = '#00a327';
-								title = "微信";
+							title = '微信';
-								code = "WECHAT";
+							code = 'WECHAT';
 							break;
-							case "qq":
+						case 'qq':
-								icon = "qq-circle-fill";
+							icon = 'qq-circle-fill';
-								color = "#38ace9";
+							color = '#38ace9';
-								title = "QQ";
+							title = 'QQ';
-								code = "QQ";
+							code = 'QQ';
 							break;
-							case "apple":
+						case 'apple':
-								icon = "apple-fill";
+							icon = 'apple-fill';
-								color = "#000000";
+							color = '#000000';
-								title = "Apple";
+							title = 'Apple';
-								code = "APPLE";
+							code = 'APPLE';
 							break;
 					}
 					return {
@@ -221,28 +276,28 @@
 						code: code,
 						color: color,
 						icon: icon,
-							appcode: value,
+						appcode: value
 					};
 				});
 			},
 			fail: (error) => {
 				uni.showToast({
-						title: "获取登录通道失败" + error,
+					title: '获取登录通道失败' + error,
 					duration: 2000,
-						icon: "none",
+					icon: 'none'
 				});
-				},
+			}
 		});
 		//#endif
 
 		//特殊平台，登录方式需要过滤
 		// #ifdef H5
-			this.methodFilter(["QQ"]);
+		this.methodFilter(['QQ']);
 		// #endif
 
 		//微信小程序，只支持微信登录
 		// #ifdef MP-WEIXIN
-			this.methodFilter(["WECHAT"]);
+		this.methodFilter(['WECHAT']);
 		// #endif
 	},
 	watch: {
@@ -254,7 +309,7 @@
 				if (val.length == 11) {
 					this.enabuleFetchCode = true;
 				}
-				},
+			}
 		},
 
 		async flage(val) {
@@ -272,61 +327,60 @@
 						uni.showToast({
 							title: res.data.message,
 							duration: 2000,
-								icon: "none",
+							icon: 'none'
 						});
 						this.flage = false;
 					}
 				} else {
-						this.$u.toast("请倒计时结束后再发送");
+					this.$u.toast('请倒计时结束后再发送');
 				}
 			} else {
 				this.$refs.verification.hide();
 			}
-			},
+		}
 	},
 	onLoad(options) {
-			if(options.init=='index'){
+		if (options.init == 'index') {
-				this.initurl = true
+			this.initurl = true;
 		}
-			console.log((options))
+		console.log(options);
 		if (options && options.state) {
 			this.stateLogin(options.state);
 		}
-			
 	},
 	methods: {
-			customback(){
+		customback() {
-				if(this.initurl){
+			if (this.initurl) {
 				uni.switchTab({
-						url:'/pages/tabbar/vlog/index?init=ok'
+					url: '/pages/tabbar/vlog/index'
-					})
+				});
-				}else{
+			} else {
-					uni.navigateBack()
+				uni.navigateBack();
 			}
 		},
 		//联合信息返回登录
 		stateLogin(state) {
 			loginCallback(state).then((res) => {
-					console.log(res)
+				console.log(res);
 				let data = res.data;
 				if (data.success) {
 					storage.setAccessToken(data.result.accessToken);
 					storage.setRefreshToken(data.result.refreshToken);
 					// 登录成功
 					uni.showToast({
-							title: "登录成功!",
+						title: '登录成功!',
-							icon: "none",
+						icon: 'none'
 					});
 					getUserInfo().then((user) => {
 						storage.setUserInfo(user.data.result);
 						storage.setHasLogin(true);
 					});
-						getCurrentPages().length > 1 ?
+					getCurrentPages().length > 1
-							uni.navigateBack({
+						? uni.navigateBack({
-								delta: getCurrentPages().length - 2,
+								delta: getCurrentPages().length - 2
-							}) :
+						  })
-							uni.switchTab({
+						: uni.switchTab({
-								url: "/pages/tabbar/home/index",
+								url: '/pages/tabbar/vlog/index'
 						  });
 				}
 			});
@@ -343,9 +397,9 @@
 					});
 				} else {
 					uni.showToast({
-							title: "配置有误请联系管理员",
+						title: '配置有误请联系管理员',
 						duration: 2000,
-							icon: "none",
+						icon: 'none'
 					});
 				}
 			});
@@ -353,79 +407,85 @@
 		},
 		//非h5 获取openid
 		async nonH5OpenId(item) {
+			console.log(item);
 			let _this = this;
 			//获取各个openid
 			await uni.login({
 				provider: item.appcode,
-					// #ifdef MP-ALIPAY
+				// scopes: 'snsapi_userinfo',
-					scopes: "auth_user", //支付宝小程序需设置授权类型
+				success: function (res) {
-					// #endif
+					uni.setStorageSync('type', item.code);
-					success: function(res) {
-						uni.setStorageSync("type", item.code);
 					//微信小程序意外的其它方式直接在storage中写入openid
 					// #ifndef MP-WEIXIN
-						uni.setStorageSync("openid", res.authResult.openid);
+					uni.setStorageSync('openid', res.authResult.openid);
 					// #endif
 				},
 				fail(e) {
 					uni.showToast({
-							title: "第三方登录暂不可用！",
+						title: '第三方登录暂不可用！',
-							icon: "none",
+						icon: 'none',
-							duration: 3000,
+						duration: 3000
 					});
 				},
 				complete(e) {
+					console.log(e);
 					//获取用户信息
 					uni.getUserInfo({
 						provider: item.appcode,
-							success: function(infoRes) {
+						success: function (infoRes) {
 							//写入用户信息
-								uni.setStorageSync("nickname", infoRes.userInfo.nickName);
+							uni.setStorageSync('nickname', infoRes.userInfo.nickName);
-								uni.setStorageSync("avatar", infoRes.userInfo.avatarUrl);
+							uni.setStorageSync('avatar', infoRes.userInfo.avatarUrl);
 
 							// #ifdef MP-WEIXIN
 							//微信小程序获取openid 需要特殊处理 如需获取openid请参考uni-id: https://uniapp.dcloud.net.cn/uniCloud/uni-id
 							_this.weixinMPOpenID(res).then((res) => {
 								//这里需要先行获得openid，再使用openid登录，小程序登录需要两步，所以这里特殊编译
-									_this.goOpenidLogin("WECHAT_MP");
+								_this.goOpenidLogin('WECHAT_MP');
 							});
 							// #endif
 
 							// #ifndef MP-WEIXIN
-								_this.goOpenidLogin("APP");
+							_this.goOpenidLogin('APP');
 							//#endif
-							},
+						}
 					});
-					},
+				}
 			});
 		},
 		//openid 登录
 		goOpenidLogin(clientType) {
 			// 获取准备好的参数，进行登录系统
 			let params = {
-					uuid: uni.getStorageSync("openid"), //联合登陆id
+				uuid: uni.getStorageSync('openid'), //联合登陆id
-					source: uni.getStorageSync("type"), //联合登陆类型
+				source: uni.getStorageSync('type'), //联合登陆类型
-					nickname: uni.getStorageSync("nickname"), // 昵称
+				nickname: uni.getStorageSync('nickname'), // 昵称
-					avatar: uni.getStorageSync("avatar"), // 头像
+				avatar: uni.getStorageSync('avatar'), // 头像
-					uniAccessToken: uni.getStorageSync("uni_access_token"), //第三方token
+				uniAccessToken: uni.getStorageSync('uni_access_token') //第三方token
 			};
 			openIdLogin(params, clientType).then((res) => {
+				console.log(res);
 				if (!res.data.success) {
-						let errormessage = "第三方登录暂不可用";
+					let errormessage = '第三方登录暂不可用';
 					uni.showToast({
 						// title: '未绑定第三方账号',
 						title: errormessage,
-							icon: "none",
+						icon: 'none',
-							duration: 3000,
+						duration: 3000
 					});
 					return;
 				} else {
-						storage.setAccessToken(res.data.result.accessToken);
+					var infoData = res.data.result;
-						storage.setRefreshToken(res.data.result.refreshToken);
+					storage.setAccessToken(infoData.accessToken);
+					storage.setRefreshToken(infoData.refreshToken);
+					const vlogInfo = JSON.parse(infoData.tikUser);
+					// 将vlog的token和vlog用户信息放入缓存
+					storage.setVlogToken(vlogInfo.userToken);
+					storage.setVlogUserInfo(vlogInfo);
 					// 登录成功
 					uni.showToast({
-							title: "第三方登录成功!",
+						title: '第三方登录成功!',
-							icon: "none",
+						icon: 'none'
 					});
 					// 执行登录
 					getUserInfo().then((user) => {
@@ -444,7 +504,7 @@
 							whetherNavigate();
 						} else {
 							uni.switchTab({
-									url: "/pages/tabbar/home/index",
+								url: '/pages/tabbar/vlog/index'
 							});
 						}
 					});
@@ -454,7 +514,7 @@
 		//微信小程序获取openid
 		async weixinMPOpenID(res) {
 			await miniProgramLogin(res.code).then((res) => {
-					uni.setStorageSync("openid", res.data);
+				uni.setStorageSync('openid', res.data);
 			});
 		},
 		/**跳转到登录页面 */
@@ -462,7 +522,7 @@
 			// #ifdef H5
 			let code = connectLogin.code;
 			let buyer = api.buyer;
-				window.open(buyer + `/passport/connect/connect/login/web/` + code, "_self");
+			window.open(buyer + `/passport/connect/connect/login/web/` + code, '_self');
 			// #endif
 			// #ifdef APP-PLUS
 			this.nonH5OpenId(connectLogin);
@@ -475,28 +535,31 @@
 			 * 清空当前账号信息
 			 */
 			storage.setHasLogin(false);
-				storage.setAccessToken("");
+			storage.setAccessToken('');
-				storage.setRefreshToken("");
+			storage.setRefreshToken('');
 			storage.setUserInfo({});
 			// 清理vlog信息
-				storage.setVlogToken("")
+			storage.setVlogToken('');
-				storage.setVlogUserInfo({})
+			storage.setVlogUserInfo({});
 			/**
 			 * 执行登录
 			 */
-				smsLogin({
+			smsLogin(
+				{
 					mobile: this.mobile,
 					code: this.code
-				}, this.clientType).then((res) => {
+				},
+				this.clientType
+			).then((res) => {
 				// console.log(res)
 				if (res.data.success) {
-						const infoData = res.data.result
+					const infoData = res.data.result;
-						const vlogInfo = JSON.parse(infoData.tikUser)
+					const vlogInfo = JSON.parse(infoData.tikUser);
 					storage.setAccessToken(infoData.accessToken);
 					storage.setRefreshToken(infoData.refreshToken);
 					// 将vlog的token和vlog用户信息放入缓存
-						storage.setVlogToken(vlogInfo.userToken)
+					storage.setVlogToken(vlogInfo.userToken);
-						storage.setVlogUserInfo(vlogInfo)
+					storage.setVlogUserInfo(vlogInfo);
 
 					/**
 					 * 登录成功后获取个人信息
@@ -511,8 +574,8 @@
 							storage.setHasLogin(true);
 							// 登录成功
 							uni.showToast({
-									title: "登录成功!",
+								title: '登录成功!',
-									icon: "none",
+								icon: 'none'
 							});
 
 							/**
@@ -523,7 +586,7 @@
 							whetherNavigate();
 						} else {
 							uni.switchTab({
-									url: "/pages/tabbar/home/index",
+								url: '/pages/tabbar/home/index'
 							});
 						}
 					});
@@ -539,13 +602,13 @@
 		// 跳转
 		navigateToPrivacy(val) {
 			uni.navigateTo({
-					url: "/pages/mine/help/tips?type=" + val,
+				url: '/pages/mine/help/tips?type=' + val
 			});
 		},
 		// 点击获取验证码
 		start() {
-				this.codeColor = "#999";
+			this.codeColor = '#999';
-				this.$u.toast("验证码已发送");
+			this.$u.toast('验证码已发送');
 			this.flage = false;
 			this.codeFlag = false;
 
@@ -565,24 +628,24 @@
 		fetchCode() {
 			if (!this.enabulePrivacy) {
 				uni.showToast({
-						title: "请同意用户隐私",
+					title: '请同意用户隐私',
 					duration: 2000,
-						icon: "none",
+					icon: 'none'
 				});
 				return false;
 			}
 
 			if (!this.$u.test.mobile(this.mobile)) {
 				uni.showToast({
-						title: "请填写正确手机号",
+					title: '请填写正确手机号',
 					duration: 2000,
-						icon: "none",
+					icon: 'none'
 				});
 				return false;
 			}
-				if (this.tips == "重新获取验证码") {
+			if (this.tips == '重新获取验证码') {
 				uni.showLoading({
-						title: "加载中",
+					title: '加载中'
 				});
 				if (!this.codeFlag) {
 					let timer = setInterval(() => {
@@ -599,67 +662,67 @@
 
 				return false;
 			}
-			},
+		}
-		},
+	}
-	};
+};
 </script>
 <style>
-	page {
+page {
 	background: #fff;
-	}
+}
 </style>
 <style lang="scss" scoped>
-	.wrapper {
+.wrapper {
 	padding: 0 80rpx;
-	}
+}
 
-	.title {
+.title {
 	padding-top: calc(104rpx);
 	font-style: normal;
 	line-height: 1;
 	font-weight: 500;
 	font-size: 56rpx;
 	color: #333;
-	}
+}
 
-	.box-code {
+.box-code {
 	margin-top: 78rpx;
-	}
+}
 
-	.desc,
+.desc,
-	.desc-light {
+.desc-light {
 	font-size: 32rpx;
 	line-height: 32rpx;
 	color: #333333;
 	margin-top: 40rpx;
-	}
+}
 
-	.desc {
+.desc {
 	color: #333;
-	}
+}
 
-	.desc-light {
+.desc-light {
 	color: #999999;
 
-		>span {
+	> span {
 		color: #333;
 		margin-left: 8rpx;
 	}
-	}
+}
 
-	.mobile {
+.mobile {
 	margin-top: 80rpx;
-	}
+}
 
-	.disable {
+.disable {
 	background: linear-gradient(90deg, #ffdcba 2.21%, #ffcfb2 99.86%);
-	}
+}
 
-	.fetch {
+.fetch {
 	background: linear-gradient(57.72deg, #ff8a19 18.14%, #ff5e00 98.44%);
-	}
+}
 
-	.btn {
+.btn {
 	border-radius: 100px;
 	width: 590rpx;
 	margin-top: 97rpx;
@@ -668,20 +731,20 @@
 	line-height: 80rpx;
 	text-align: center;
 	color: #ffffff;
-	}
+}
 
-	.tips {
+.tips {
 	font-size: 12px;
 	line-height: 20px;
 	margin-top: 32rpx;
 	width: 546rpx;
 
-		>span {
+	> span {
 		color: $light-color;
 	}
-	}
+}
 
-	.fetch-btn {
+.fetch-btn {
 	width: 370rpx;
 	height: 80rpx;
 	line-height: 80rpx;
@@ -692,18 +755,18 @@
 	color: #999;
 
 	margin: 71rpx auto 0 auto;
-	}
+}
 
-	.login-list {
+.login-list {
 	display: flex;
 	width: 590rpx;
 	position: absolute;
 	bottom: 20px;
 	align-items: center;
 	justify-content: center;
-	}
+}
 
-	.login-item {
+.login-item {
 	width: 80rpx;
 
 	border-radius: 10rpx;
@@ -713,5 +776,5 @@
 	align-items: center;
 
 	margin: 0 20rpx;
-	}
+}
 </style>

pages/search/search.nvue

@@ -0,0 +1,274 @@
+<template>
+  <view class="page">
+    <!-- 这里是状态栏, 每个页面都需要有, 目的不让页面覆盖状态栏 -->
+    <view :style="{ height: statusBarHeight + 'px' }"></view>
+    <view class="big-search-wrapper">
+      <image
+        class="header-right-search icon-search"
+        src="/static/images/icon-back.png"
+        @click="back" />
+      <view class="search-box">
+        <view class="search-box-left">
+          <image
+            class="header-right-search search-image"
+            src="/static/images/icon-search.png" />
+        </view>
+
+        <input
+          type="text"
+          :model="searchContent"
+          :value="searchContent"
+          @input="typingContent"
+          placeholder="请输入内容~"
+          maxlength="10"
+          class="search-input" />
+
+        <view class="search-box-right">
+          <image
+            class="scan-image"
+            src="/static/images/icon-scan-qrcode.png"
+            @click="scan" />
+        </view>
+      </view>
+      <view class="btn" @click="doSearch">
+        <text class="search-btn">搜索</text>
+      </view>
+    </view>
+
+    <view class="history">
+      <view
+        v-for="(h, index) in historyList"
+        :key="index"
+        class="history-item-wrapper">
+        <view class="time-and-text" @click="searchByHistory(h)">
+          <image class="time-image" src="/static/images/icon-time.png" />
+          <text class="history-text">{{ h }}</text>
+        </view>
+        <image
+          class="delete-image"
+          src="/static/images/icon-delete.png"
+          @click="removeHistoryItem(index)" />
+      </view>
+
+      <view
+        v-if="historyList.length == 0"
+        class="clear-all-wrapper"
+        @click="removeAllHistory">
+        <text class="clear-all"></text>
+      </view>
+      <view v-else class="clear-all-wrapper" @click="removeAllHistory">
+        <text class="clear-all">清除所有搜索记录</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+let system = uni.getSystemInfoSync();
+export default {
+  data() {
+    return {
+      searchContent: "",
+      historyList: [],
+    };
+  },
+  onLoad() {
+    this.statusBarHeight = system.statusBarHeight;
+
+    // 从本地缓存获得搜索的历史记录
+    let historyListJSON = uni.getStorageSync("historyList");
+    if (historyListJSON != null && historyListJSON != undefined) {
+      this.historyList = JSON.parse(historyListJSON);
+    }
+  },
+  methods: {
+    back() {
+      uni.navigateBack({
+        delta: 1,
+      });
+    },
+    scan() {
+      uni.scanCode({
+        success: (e) => {
+          let result = e.result;
+          let vlogId = JSON.parse(result).content;
+          uni.navigateTo({
+            url: "../vlog/vlog?vlogId=" + vlogId,
+          });
+        },
+      });
+    },
+    typingContent(e) {
+      this.searchContent = e.detail.value;
+    },
+    searchByHistory(searchContent) {
+      this.searchContent = searchContent;
+      this.doSearch();
+    },
+    doSearch() {
+      let me = this;
+      let searchContent = this.searchContent;
+      if (getApp().isStrEmpty(searchContent)) {
+        uni.showToast({
+          title: "搜索关键字为空!",
+          icon: "none",
+          duration: 2000,
+        });
+        this.searchContent = "";
+        return;
+      }
+
+      let tempList = this.historyList;
+      // 判断搜索内容是否已经存在, 如果存在, 则移除
+      for (let i = 0; i < tempList.length; i++) {
+        let old = tempList[i];
+        if (searchContent === old) {
+          tempList.splice(i, 1);
+          break;
+        }
+      }
+      tempList.unshift(searchContent);
+
+      // 如果超过10个, 则删除最后一项
+      if (tempList.length > 10) {
+        tempList.splice(10, 1);
+        this.historyList = tempList;
+      }
+
+      // 保存到本地缓存
+      uni.setStorageSync("historyList", JSON.stringify(this.historyList));
+
+      // 跳转页面, 把搜索条件携带过去
+      uni.navigateTo({
+        url: "searchList?search=" + searchContent,
+      });
+    },
+
+    removeHistoryItem(index) {
+      this.historyList.splice(index, 1);
+      uni.setStorageSync("historyList", JSON.stringify(this.historyList));
+    },
+
+    removeAllHistory() {
+      this.historyList = [];
+      uni.setStorageSync("historyList", JSON.stringify(this.historyList));
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.page {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: #181b27;
+
+  .big-search-wrapper {
+    padding: 30rpx;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    .header-right-search {
+      height: 100rpx;
+    }
+    .icon-search {
+      width: 40rpx;
+      height: 40rpx;
+      opacity: 0.8;
+      align-self: center;
+    }
+    .search-box {
+      display: flex;
+      flex-direction: row;
+      .search-box-left {
+        padding: 0 10rpx;
+        display: flex;
+        flex-direction: row;
+        background-color: #55565e;
+        border-top-left-radius: 6rpx;
+        border-bottom-left-radius: 6rpx;
+        .search-image {
+          width: 50rpx;
+          height: 50rpx;
+          opacity: 0.8;
+          align-self: center;
+        }
+      }
+    }
+    .search-input {
+      width: 360rpx;
+      background-color: #55565e;
+      height: 60rpx;
+      font-size: 28rpx;
+      color: #ffffff;
+    }
+    .search-box-right {
+      padding: 0 16rpx;
+      display: flex;
+      flex-direction: row;
+      background-color: #55565e;
+      border-top-right-radius: 6rpx;
+      border-bottom-right-radius: 6rpx;
+      .scan-image {
+        width: 50rpx;
+        height: 50rpx;
+        opacity: 0.8;
+        align-self: center;
+      }
+    }
+    .btn {
+      align-self: center;
+      .search-btn {
+        color: #ffffff;
+        font-size: 32rpx;
+        align-self: center;
+      }
+    }
+  }
+
+  .history {
+    .history-item-wrapper {
+      padding: 16rpx 26rpx;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      .time-and-text {
+        display: flex;
+        flex-direction: row;
+        width: 500rpx;
+        .time-image {
+          width: 40rpx;
+          height: 40rpx;
+          align-self: center;
+        }
+        .history-text {
+          color: #ffffff;
+          font-size: 30rpx;
+          align-self: center;
+          margin-left: 20rpx;
+        }
+      }
+      .delete-image {
+        width: 30rpx;
+        height: 30rpx;
+        opacity: 0.9;
+        align-self: center;
+      }
+    }
+    .clear-all-wrapper {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      margin-top: 40rpx;
+      .clear-all {
+        color: #f1f1f1;
+        font-size: 28rpx;
+        align-self: center;
+      }
+    }
+  }
+}
+</style>

pages/search/searchList.nvue

@@ -0,0 +1,260 @@
+<template>
+  <view class="page">
+    <view :style="{ height: statusBarHeight + 'px' }">
+      <!-- 这里是状态栏, 每个页面都需要有, 目的不让页面覆盖状态栏 -->
+    </view>
+    <view class="big-search-wrapper">
+      <image
+        class="header-right-search icon-search"
+        src="/static/images/icon-back.png"
+        @click="back" />
+      <view class="search-box">
+        <view class="search-box-left">
+          <image
+            class="header-right-search search-image"
+            src="/static/images/icon-search.png" />
+        </view>
+        <input
+          type="text"
+          :model="searchContent"
+          :value="searchContent"
+          @input="typingContent"
+          placeholder="请输入内容~"
+          maxlength="10"
+          class="search-input" />
+      </view>
+      <view class="btn" @click="doSearch">
+        <text class="search-btn">搜索</text>
+      </view>
+    </view>
+
+    <view class="waterfall-wrapper" :style="{ height: screenHeight + 'px' }">
+      <waterfall
+        :style="{ height: screenHeight + 'px' }"
+        column-count="2"
+        column-width="auto"
+        column-gap="2rpx"
+        left-gap="4rpx"
+        right-gap="4rpx">
+        <cell v-for="(vlog, index) in waterList" :key="index">
+          <view class="every-single-video" @appear="appearVlog(index)">
+            <image
+              :src="vlog.cover"
+              mode="aspectFill"
+              class="half-cover"
+              @click="goToVlog(vlog.vlogId)" />
+          </view>
+        </cell>
+      </waterfall>
+    </view>
+  </view>
+</template>
+
+<script>
+let system = uni.getSystemInfoSync();
+let app = getApp();
+export default {
+  data() {
+    return {
+      screenHeight: 0,
+      statusBarHeight: 0,
+      waterList: [],
+      page: 0,
+      totalPage: 0,
+      search: "",
+      searchContent: "",
+    };
+  },
+  onLoad(params) {
+    uni.showLoading({
+      title: "正在获取!",
+    });
+    this.statusBarHeight = system.statusBarHeight;
+    let screenHeight = system.safeArea.bottom;
+    this.screenHeight = screenHeight;
+	this.searchContent = params.search
+    // 搜索的关键字
+    let search = params.search;
+    this.search = search;
+    this.fetchList(0);
+  },
+  onShow() {},
+  methods: {
+    doSearch() {
+      let me = this;
+      let searchContent = this.searchContent;
+      if (getApp().isStrEmpty(searchContent)) {
+        uni.showToast({
+          title: "搜索为空!",
+          icon: "none",
+          duration: 2000,
+        });
+        this.searchContent = "";
+        return;
+      }
+
+      uni.navigateTo({
+        url: "searchList?search=" + searchContent,
+      });
+    },
+    typingContent(e) {
+      this.searchContent = e.detail.value;
+    },
+    back() {
+      uni.navigateBack({
+        delta: 1,
+      });
+    },
+    loadMore() {
+      if (this.page >= this.totalPage) {
+        return;
+      } else {
+        this.fetchList(this.page);
+      }
+    },
+    fetchList(page) {
+      let me = this;
+      page = page + 1;
+      let search = me.search;
+      let userInfo = getApp().getUserInfoSession();
+      let userId = "";
+      if (!app.isStrEmpty(userInfo)) {
+        userId = userInfo.id;
+      }
+
+      let serverUrl = app.globalData.serverUrl;
+      uni.request({
+        method: "GET",
+        url:
+          serverUrl +
+          "/vlog/indexList?userId=" +
+          userId +
+          "&search=" +
+          search +
+          "&page=" +
+          page +
+          "&pageSize=10",
+        success(result) {
+          if (result.data.status == 206) {
+            uni.hideLoading();
+            let waterList = result.data.data.rows;
+            let totalPage = result.data.data.total;
+            me.waterList = waterList;
+            me.page = page;
+            me.totalPage = totalPage;
+            if (
+              waterList == null ||
+              waterList == undefined ||
+              waterList.length == 0
+            ) {
+              uni.showToast({
+                title: "没有结果~",
+                icon: "none",
+                duration: 2000,
+              });
+              setTimeout(() => {
+                uni.navigateBack({
+                  delta: 1,
+                });
+              }, 1000);
+            }
+          }
+        },
+      });
+    },
+
+    goToVlog(vlogId) {
+      uni.navigateTo({
+        url: "../vlog/vlog?vlogId=" + vlogId,
+      });
+    },
+
+    // 每个vlog出现都会触发
+    appearVlog(index, e) {
+      let me = this;
+      // 如果最后一个vlog出现, 则加载更多
+      if (index == me.waterList.length - 1) {
+        me.loadMore();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.page {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: #181b27;
+
+  .big-search-wrapper {
+    padding: 30rpx;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    .header-right-search {
+      height: 100rpx;
+    }
+    .icon-search {
+      width: 40rpx;
+      height: 40rpx;
+      opacity: 0.8;
+      align-self: center;
+    }
+    .search-box {
+      display: flex;
+      flex-direction: row;
+      .search-box-left {
+        padding: 0 10rpx;
+        display: flex;
+        flex-direction: row;
+        background-color: #55565e;
+        border-top-left-radius: 6rpx;
+        border-bottom-left-radius: 6rpx;
+        .search-image {
+          width: 50rpx;
+          height: 50rpx;
+          opacity: 0.8;
+          align-self: center;
+        }
+      }
+    }
+    .search-input {
+      width: 440rpx;
+      background-color: #55565e;
+      height: 60rpx;
+      font-size: 28rpx;
+      color: #ffffff;
+      border-top-right-radius: 6rpx;
+      border-bottom-right-radius: 6rpx;
+    }
+    .btn {
+      align-self: center;
+      .search-btn {
+        color: #ffffff;
+        font-size: 32rpx;
+        align-self: center;
+      }
+    }
+  }
+
+  .waterfall-wrapper {
+    background-color: #181b27;
+    .every-single-video {
+      display: flex;
+      flex-direction: column;
+      margin-top: 10rpx;
+      .half-cover {
+        background-color: #000000;
+        height: 600rpx;
+        width: 365rpx;
+        border-top-left-radius: 10rpx;
+        border-top-right-radius: 10rpx;
+      }
+    }
+  }
+}
+</style>

pages/tabbar/im/index.vue

@@ -1,7 +1,10 @@
 <template>
 	<div style="height: 100%">
 		<div class="jolkp">
-      <div class="fan" :style="{ marginRight: statue == 0 ? '50%' : '50%' }">
+			<div
+				class="fan"
+				:style="{ marginRight: statue == 0 ? '50%' : '50%' }"
+			>
 				<div
 					@click="hui(0)"
 					:style="{ marginTop: '35px', color: '#fff' }"
@@ -32,7 +35,11 @@
 				:style="{ marginTop: '35px' }"
 			></div>
 			<!-- 弹出框 -->
-      <div v-if="isPopupVisible" class="popup" ref="popup">
+			<div
+				v-if="isPopupVisible"
+				class="popup"
+				ref="popup"
+			>
 				<ul>
 					<li @click="handleAddFriend">添加好友/群聊</li>
 					<li @click="handleMenu()">发起群聊</li>
@@ -41,11 +48,23 @@
 			</div>
 		</div>
 		<!-- 搜索添加 -->
-    <TUIContactsea v-if="statue == 2" @switchConversation="hui" />
+		<TUIContactsea
+			v-if="statue == 2"
+			@switchConversation="hui"
+		/>
 		<!-- 联系人 -->
-    <TUIContact v-else-if="statue == 1" style="height: 100%" />
+		<TUIContact
-    <SelectFriend v-else-if="statue == 3" @con="confn" />
+			v-else-if="statue == 1"
-    <SelectFriendqlioa v-else-if="statue == 4" @concen="concen" />
+			style="height: 100%"
+		/>
+		<SelectFriend
+			v-else-if="statue == 3"
+			@con="confn"
+		/>
+		<SelectFriendqlioa
+			v-else-if="statue == 4"
+			@concen="concen"
+		/>
 		<!-- 站内信数据 -->
 		<!-- <div > -->
 		<scroll-view
@@ -78,28 +97,26 @@
 
 		<!-- </div> -->
 		<!-- 会话 -->
-    <TUIConversation style="height: 100%" v-else />
+		<TUIConversation
+			style="height: 100%"
+			v-else
+		/>
 	</div>
 </template>
 
 <script>
 // 导入组件
-import TUIConversation from "@/TUIKit/components/TUIConversation/index";
+import TUIConversation from '@/TUIKit/components/TUIConversation/index';
-import TUIContact from "@/TUIKit/components/TUIContact/index";
+import TUIContact from '@/TUIKit/components/TUIContact/index';
-import TUIContactsea from "@/TUIKit/components/TUIContact/indexsea";
+import TUIContactsea from '@/TUIKit/components/TUIContact/indexsea';
-import { TUILogin } from "@tencentcloud/tui-core";
+import { TUILogin } from '@tencentcloud/tui-core';
-import ContactSearch from "@/TUIKit/components/TUIContact/contact-search/index.vue";
+import ContactSearch from '@/TUIKit/components/TUIContact/contact-search/index.vue';
-import { TUIChatKit } from "@/TUIKit";
+import { TUIChatKit } from '@/TUIKit';
-import SelectFriend from "@/TUIKit/components/TUIContact/select-friend/index.vue";
+import SelectFriend from '@/TUIKit/components/TUIContact/select-friend/index.vue';
-import SelectFriendqlioa from "@/TUIKit/components/TUIGroup/index.vue";
+import SelectFriendqlioa from '@/TUIKit/components/TUIGroup/index.vue';
-import TUICore, { ExtensionInfo, TUIConstants } from "@tencentcloud/tui-core";
+import TUICore, { ExtensionInfo, TUIConstants } from '@tencentcloud/tui-core';
-import storage from "@/utils/storage.js";
+import storage from '@/utils/storage.js';
-import {
+import { getUserimInfo, getMember, getMemberstate, getMemberdelete } from '@/api/members';
-  getUserimInfo,
-  getMember,
-  getMemberstate,
-  getMemberdelete,
-} from "@/api/members";
 TUIChatKit.init();
 let vueVersion = 2;
 // vueVersion = 3;
@@ -113,7 +130,7 @@ export default {
 		ContactSearch,
 		SelectFriend,
 		SelectFriendqlioa,
-    TUIChatKit,
+		TUIChatKit
 	},
 	data() {
 		return {
@@ -129,7 +146,7 @@ export default {
 			pageSize: 20,
 			pageNumber: 1,
 			total: 0,
-      loadMoreStatus: "more", // 加载更多状态
+			loadMoreStatus: 'more' // 加载更多状态
 		};
 	},
 	created() {},
@@ -145,19 +162,19 @@ export default {
 						userID: par.userID,
 						userSig: par.userSig,
 						useUploadPlugin: true, // If you need to send rich media messages, please set to true.
-            framework: `vue${vueVersion}`, // framework used vue2 / vue3
+						framework: `vue${vueVersion}` // framework used vue2 / vue3
 					});
 				} else {
 					// 接口返回非 200 状态码，跳转登录页面
 					uni.navigateTo({
-            url: "/pages/passport/login",
+						url: '/pages/passport/login'
 					});
 				}
 			})
 			.catch(() => {
 				// 请求失败，跳转登录页面
 				uni.navigateTo({
-          url: "/pages/passport/login",
+					url: '/pages/passport/login'
 				});
 			});
 	},
@@ -165,22 +182,20 @@ export default {
 		this.getMembermethod();
 		this.setTime();
 		// 监听全局点击事件
-    document.addEventListener("click", (event) =>
+		document.addEventListener('click', (event) => this.handleGlobalClick(event));
-      this.handleGlobalClick(event)
-    );
 		// 监听滚动事件
 	},
 	beforeDestroy() {
 		// 移除全局点击事件
-    document.removeEventListener("click", this.handleGlobalClick);
+		document.removeEventListener('click', this.handleGlobalClick);
 		// 清除定时器
 		clearTimeout(this.cleartime);
 		// 移除滚动事件监听
 	},
 	methods: {
 		lowerBottom() {
-      if(this.total>=this.meList.length){
+			if (this.total >= this.meList.length) {
-        this.pageSize+=10;
+				this.pageSize += 10;
 				this.getMembermethod();
 			}
 		},
@@ -196,7 +211,7 @@ export default {
 			const itemJson = encodeURIComponent(JSON.stringify(item));
 			// 使用 uni.navigateTo 方法跳转到详情页，并传递信息
 			uni.navigateTo({
-        url: `/pages/tabbar/im/details/index?item=${itemJson}`,
+				url: `/pages/tabbar/im/details/index?item=${itemJson}`
 			});
 			getMemberstate({ messageId: item.messageId }).then((res) => {
 				this.getMembermethod();
@@ -218,7 +233,7 @@ export default {
 			this.popupRef = this.$refs.popup;
 		},
 		handleGlobalClick(event) {
-      if (this.isPopupVisible && event.target._prevClass != "jolkp_l") {
+			if (this.isPopupVisible && event.target._prevClass != 'jolkp_l') {
 				this.isPopupVisible = false;
 			}
 		},
@@ -226,7 +241,7 @@ export default {
 		getMembermethod() {
 			const param = {
 				pageSize: this.pageSize,
-        pageNumber: this.pageNumber,
+				pageNumber: this.pageNumber
 			};
 			getMember(param).then((res) => {
 				this.total = res.data.result.total;
@@ -236,23 +251,16 @@ export default {
 					this.meList = this.meList.concat(res.data.result.records);
 				}
 				this.swipeStates = new Array(this.meList.length).fill(0);
-        this.tole = this.meList.filter(
+				this.tole = this.meList.filter((item) => item.status === 'UN_READY').length;
-          (item) => item.status === "UN_READY"
-        ).length;
-        
 			});
 		},
 		handleMenu() {
-      const fn = [
+			const fn = [...TUICore.getExtensionList(TUIConstants.TUISearch.EXTENSION.SEARCH_MORE.EXT_ID)];
-        ...TUICore.getExtensionList(
-          TUIConstants.TUISearch.EXTENSION.SEARCH_MORE.EXT_ID
-        ),
-      ];
 			const item = fn[1];
 			const {
 				listener = {
-          onClicked: () => {},
+					onClicked: () => {}
-        },
+				}
 			} = item;
 			listener?.onClicked?.(item);
 			this.statue = 3;
@@ -266,35 +274,35 @@ export default {
 			this.isPopupVisible = false;
 			uni.scanCode({
 				success: (res) => {
-          console.log("扫码结果:", res);
+					console.log('扫码结果:', res);
-          this.statue=0
+					this.statue = 0;
 					// 可以在这里添加处理扫码结果的逻辑
 				},
 				fail: (err) => {
-          console.error("扫码失败:", err);
+					console.error('扫码失败:', err);
-          this.statue=0
+					this.statue = 0;
-        },
+				}
 			});
 		},
 		startLongPress(item, index) {
 			this.longPressTimer = setTimeout(() => {
 				uni.showModal({
-          title: "确认删除",
+					title: '确认删除',
-          content: "确定要删除这条消息吗？",
+					content: '确定要删除这条消息吗？',
 					success: (res) => {
 						if (res.confirm) {
 							getMemberdelete({ messageId: item.messageId }).then((res) => {
 								this.getMembermethod();
 							});
 						}
-          },
+					}
 				});
 			}, 2000);
 		},
 		endLongPress() {
 			clearTimeout(this.longPressTimer);
-    },
+		}
-  },
+	}
 };
 </script>
 
@@ -313,7 +321,7 @@ page {
 	font-size: 15px;
 	justify-content: end;
 	/* 设置背景图 */
-  background-image: url("@/static/im/Rectangle.png");
+	background-image: url('@/static/im/Rectangle.png');
 	/* 让背景图覆盖整个元素 */
 	background-size: cover;
 	/* 背景图不重复 */
@@ -323,7 +331,7 @@ page {
 .jolkp_l {
 	width: 2rem;
 	height: 2rem;
-  background-image: url("@/static/im/Frame.png");
+	background-image: url('@/static/im/Frame.png');
 	/* 让背景图覆盖整个元素 */
 	background-size: cover;
 	/* 背景图不重复 */
@@ -335,7 +343,7 @@ page {
 .jolkp_h {
 	width: 2rem;
 	height: 2rem;
-  background-image: url("@/static/im/user.png");
+	background-image: url('@/static/im/user.png');
 	/* 让背景图覆盖整个元素 */
 	background-size: cover;
 	/* 背景图不重复 */
@@ -346,7 +354,7 @@ page {
 .jolkp_z {
 	width: 2rem;
 	height: 1.5rem;
-  background-image: url("@/static/im/znx.png");
+	background-image: url('@/static/im/znx.png');
 	/* 让背景图覆盖整个元素 */
 	background-size: cover;
 	/* 背景图不重复 */
@@ -390,7 +398,7 @@ page {
 
 .fan {
 	width: 10%;
-  height: "100%";
+	height: '100%';
 	font-size: 18px;
 	display: flex;
 
@@ -400,7 +408,7 @@ page {
 	.fan {
 		margin-right: 56% !important;
 		width: 10%;
-    height: "100%";
+		height: '100%';
 		font-size: 18px;
 		display: flex;
 		margin-top: 85%;
@@ -426,7 +434,7 @@ page {
 .three_div1 {
 	height: 3rem;
 	width: 40%;
-  background-image: url("@/static/im/kf.png");
+	background-image: url('@/static/im/kf.png');
 	background-size: 100% 100%;
 	background-repeat: no-repeat;
 	display: flex;
@@ -437,7 +445,7 @@ page {
 .three_div2 {
 	width: 40%;
 	height: 3rem;
-  background-image: url("@/static/im/hy.png");
+	background-image: url('@/static/im/hy.png');
 	background-size: 100% 100%;
 	background-repeat: no-repeat;
 	width: 40%;
@@ -445,7 +453,7 @@ page {
 
 .three_div3 {
 	height: 3rem;
-  background-image: url("@/static/im/da.png");
+	background-image: url('@/static/im/da.png');
 	background-size: 100% 100%;
 	background-repeat: no-repeat;
 	width: 40%;

pages/tabbar/vlog/index.nvue

@@ -1,142 +1,221 @@
 <template>
-	<view class="page" :id="pageId">
+	<view
-		<!-- <list :id="pageId" class="page" :bounce="true" isSwiperList="true"> -->
+		class="page"
-		<!-- 左中右的三个页面切换, 依次是: 附近 - 关注 - 推荐 -->
+		:id="pageId"
-		<swiper ref="swiper1" id="tab-bar-view" style="my-swiper" :style="{height: screenHeight + 'px'}"
+	>
-			:current="curIndex" @change="changeTopTab" @transition="onswiperscroll" @animationfinish="animationfinish"
+		<swiper
-			@onAnimationEnd="animationfinish">
+			ref="swiper1"
-			<!-- 		<swiper-item>
+			id="tab-bar-view"
-				<view class="near-by" :style="{height: screenHeight+'px'}">
+			style="my-swiper"
-					<text ref="fujin" :pid="0" :parentId="pageId" class="warn-info">暂未开放，敬请期待!</text>
+			:style="{ height: screenHeight + 'px' }"
-				</view>
+			:current="curIndex"
-			</swiper-item> -->
+			@change="changeTopTab"
+			@transition="onswiperscroll"
+			@animationfinish="animationfinish"
+			@onAnimationEnd="animationfinish"
+		>
 			<swiper-item>
-				<view v-if="myUserInfo == null" ref="videoFollowComp" class="my-follow" :style="{height: screenHeight+'px'}">
+				<video-local
-					<text class="warn-info">请登录后查看！</text>
+					ref="videoLocal"
-				</view>
+					:pid="1"
-				<video-follow-comp ref="videoFollowComp" :pid="1" :parentId="pageId" :screenHeight="screenHeight"
+					:parentId="pageId"
-					:playFollowStatus="playFollowStatus" :videoList="videoList" :refreshList="refreshList"
+					:screenHeight="screenHeight"
-					:pagingList="pagingList" @showLoading="showLoading" @hideLoading="hideLoading"
+					:progressFlag="isDraw_lo"
-					@letFollowVideoPause="letFollowVideoPause"
+					:playStatus="playLocalStatus"
-					@displayVideoPaging="displayVideoPaging"></video-follow-comp>
+					:videoList="videoList"
+					:refreshList="refreshList"
+					:pagingList="pagingList"
+					@showLoading="showLoading"
+					@hideLoading="hideLoading"
+					@displayVideoPaging="displayVideoPaging"
+				></video-local>
 			</swiper-item>
 			<swiper-item>
-				<video-comp ref="videoComp" :pid="2" :parentId="pageId" :screenHeight="screenHeight"
+				<view
-					:playStatus="playStatus" :videoList="videoList" :refreshList="refreshList" :pagingList="pagingList"
+					v-if="myUserInfo == null"
-					@showLoading="showLoading" @hideLoading="hideLoading"
+					ref="videoFollowComp"
-					@displayVideoPaging="displayVideoPaging"></video-comp>
+					class="my-follow"
+					:style="{ height: screenHeight + 'px' }"
+				>
+					<text class="warn-info">请登录后查看！</text>
+				</view>
+				<video-follow-comp
+					ref="videoFollowComp"
+					:pid="2"
+					:parentId="pageId"
+					:screenHeight="screenHeight"
+					:progressFlag="isDraw_gz"
+					:playFollowStatus="playFollowStatus"
+					:videoList="videoList"
+					:refreshList="refreshList"
+					:pagingList="pagingList"
+					@showLoading="showLoading"
+					@hideLoading="hideLoading"
+					@letFollowVideoPause="letFollowVideoPause"
+					@displayVideoPaging="displayVideoPaging"
+				></video-follow-comp>
+			</swiper-item>
+			<swiper-item>
+				<video-comp
+					ref="videoComp"
+					:pid="3"
+					:parentId="pageId"
+					:screenHeight="screenHeight"
+					:progressFlag="isDraw_tj"
+					:playStatus="playStatus"
+					:videoList="videoList"
+					:refreshList="refreshList"
+					:pagingList="pagingList"
+					@showLoading="showLoading"
+					@hideLoading="hideLoading"
+					@displayVideoPaging="displayVideoPaging"
+				></video-comp>
 			</swiper-item>
 		</swiper>
 
-		<view class="header" id="head" :style="{marginTop:statusBarHeight+'px'}" v-if="!isLoading">
+		<view
+			class="header"
+			id="head"
+			:style="{ marginTop: statusBarHeight + 'px' }"
+			v-if="!isLoading"
+		>
 			<text class="header-left"></text>
 			<view class="header-center">
-				<!-- <view class="header-item" @click="tapFollow(0)">
+				<scroll-view
-					<text class="header-item-title">附近</text>
+					ref="tabbar1"
-					<view class="header-item-line" :class="{'activate-line': curIndex === 0}"></view>
+					id="tab-bar"
-				</view>
+					class="tab-bar"
-				<view class="header-item" @click="tapFollow(1)">
+					:scroll="false"
-					<text class="header-item-title">关注</text>
+					:scroll-x="true"
-					<view class="header-item-line" :class="{'activate-line': curIndex === 1}"></view>
+					:show-scrollbar="false"
-				</view>
+					:scroll-into-view="scrollInto"
-				<view class="header-item" @click="tapFollow(2)">
+				>
-					<text class="header-item-title">推荐</text>
+					<view style="flex-direction: column; flex: 1">
-					<view class="header-item-line" :class="{'activate-line': curIndex === 2}"></view>
+						<view style="flex-direction: row; flex: 1; justify-content: space-around">
-				</view> -->
+							<view
-
+								class="uni-tab-item"
-				<scroll-view ref="tabbar1" id="tab-bar" class="tab-bar" :scroll="false" :scroll-x="true"
+								v-for="(tab, index) in tabList"
-					:show-scrollbar="false" :scroll-into-view="scrollInto">
+								:key="tab.id"
-					<view style="flex-direction: column;flex: 1;">
+								:id="tab.id"
-						<view style="flex-direction: row;flex: 1;justify-content: space-around;">
+								:ref="'tabitem' + index"
-							<view class="uni-tab-item" v-for="(tab,index) in tabList" :key="tab.id" :id="tab.id"
+								:data-id="index"
-								:ref="'tabitem'+index" :data-id="index" :data-current="index" @click="ontabtap">
+								:data-current="index"
-								<text class="uni-tab-item-title scroll-view-animation"
+								@click="ontabtap"
-									:class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
+							>
+								<text
+									class="uni-tab-item-title scroll-view-animation"
+									:class="tabIndex == index ? 'uni-tab-item-title-active' : ''"
+								>
+									{{ tab.name }}
+								</text>
 							</view>
 						</view>
 						<view class="scroll-view-indicator">
-							<view ref="underline" class="scroll-view-underline" :class="'scroll-view-animation'"
+							<view
-								:style="{left: indicatorLineLeft + 'px', width: indicatorLineWidth + 'px'}"></view>
+								ref="underline"
+								class="scroll-view-underline"
+								:class="isTap ? 'scroll-view-animation' : ''"
+								:style="{ left: indicatorLineLeft + 'px', width: indicatorLineWidth + 'px' }"
+							></view>
 						</view>
 					</view>
 				</scroll-view>
-				<!-- <view class="tab-bar-line">tab-bar-line</view> -->
-
 			</view>
-			<image class="header-right-search normal-img" src="/static/images/icon-search.png" @click="goSearch">
+			<image
+				class="header-right-search normal-img"
+				src="/static/images/icon-search.png"
+				@click="goSearch"
+			/>
 		</view>
 
-		<view class="header" :style="{marginTop:statusBarHeight+'px'}" v-if="isLoading">
+		<view
+			class="header"
+			:style="{ marginTop: statusBarHeight + 'px' }"
+			v-if="isLoading"
+		>
 			<text class="header-left"></text>
 			<view class="header-center">
 				<view class="header-item">
 					<text class="header-refresh-title">下拉刷新视频</text>
 				</view>
 			</view>
-			<image class="header-right-search normal-img" src="/static/images/loading.gif">
+			<image
+				class="header-right-search normal-img"
+				src="/static/images/loading.gif"
+			/>
 		</view>
-		<!-- 顶部切换的导航 end -->
-
 	</view>
-	<!-- </list> -->
 </template>
 <script>
-	let animation = weex.requireModule('animation')
+let animation = weex.requireModule('animation');
-	let dom = weex.requireModule('dom');
+let dom = weex.requireModule('dom');
-	let system = uni.getSystemInfoSync();
+let system = uni.getSystemInfoSync();
-	// 缓存每页最多
+console.log(system);
-	const MAX_CACHE_DATA = 100;
+// 缓存每页最多
-	// 缓存页签数量
+const MAX_CACHE_DATA = 100;
-	const MAX_CACHE_PAGE = 3;
+// 缓存页签数量
-	const TAB_PRELOAD_OFFSET = 1;
+const MAX_CACHE_PAGE = 3;
-	import storage from "@/utils/storage.js"; //缓存
+const TAB_PRELOAD_OFFSET = 1;
-	import {
+import storage from '@/utils/storage.js'; //缓存
-		vlogList
+import { vlogList } from '@/api/vlog';
-	} from "@/api/vlog"
+import { isStrEmpty } from '@/utils/tools.js';
-	import {
+import videoComp from '@/components/vlog/videoComp';
-		isStrEmpty
+import videoLocal from '@/components/vlog/videoLocal';
-	} from '@/utils/tools.js'
+import videoFollowComp from '@/components/vlog/videoFollowComp';
-	import videoComp from '@/components/vlog/videoComp';
+import config from '@/config/config';
-	import videoFollowComp from '@/components/vlog/videoFollowComp';
+
-	export default {
+export default {
 	components: {
+		videoLocal,
 		videoComp,
 		videoFollowComp
 	},
 	data() {
 		return {
+			isTap: false,
 			isLoading: false,
 			statusBarHeight: system.statusBarHeight,
 			screenHeight: system.screenHeight,
-				curIndex: 1,
+			curIndex: 2,
-				playStatus: false,
+			cityCode: '',
-				playFollowStatus: false,
+			playStatus: false, // 推荐
+			playFollowStatus: false, // 关注
+			playLocalStatus: false, // 同城
 			videoList: [], // 首页一开始查询所得的默认视频列表
 			refreshList: [], // 下拉刷新后获得的新的列表
 			pagingList: [], // 分页list
 			refresh: 0, // 从me页面传来的refresh，用于退出登录后重新刷新当前页的视频
 			/////////////////
-				pageList: ['videoFollowComp', 'videoComp'],
+			pageList: ['videoLocal', 'videoFollowComp', 'videoComp'],
 			tabList: [
 				{
-						id: "tab" + 0,
+					id: 'tab' + 0,
-						name: '关注',
+					name: '同城',
 					pageid: 1
 				},
 				{
-						id: "tab" + 1,
+					id: 'tab' + 1,
-						name: '推荐',
+					name: '关注',
 					pageid: 2
+				},
+				{
+					id: 'tab' + 2,
+					name: '推荐',
+					pageid: 3
 				}
 			], //tabs内容,'fujin','videoFollowComp','videoComp'
 			indicatorLineLeft: 0,
 			indicatorLineWidth: 0,
 			cacheTab: [],
-				scrollInto: "",
+			scrollInto: '',
-				pageId: "page",
+			pageId: 'page',
-				tabIndex: 1,
+			tabIndex: 2,
-			}
+			isDraw_lo: false,
+			isDraw_tj: false,
+			isDraw_gz: false
+		};
 	},
+	created() {},
 	onReady() {
 		this._lastTabIndex = 0;
 		this.swiperWidth = 0;
@@ -144,31 +223,41 @@
 		this.tabListSize = {};
 		this._touchTabIndex = 0;
 		this._headHeight = 100;
-			var timer = setTimeout(()=>{
+		var timer = setTimeout(() => {
 			this.selectorQuery();
-				clearTimeout(timer)
+			clearTimeout(timer);
-			},300);
+		}, 300);
-			
 	},
-		onTabItemTap: function(e) {
+	onTabItemTap: function (e) {
-			console.log(e)
+		console.log(e);
 		// let tabIndex = e.index;
 		// this.playStatus = tabIndex === 0 ? true : false;
 		// 切换视频要做暂停或播放的判断
-			// let me = this;
+		let me = this;
-			//  if (tabIndex == 0) {
+		let curIndex = me.curIndex;
-			// 	me.playStatus = false;
+		if (curIndex == 0) {
-			// 	me.playFollowStatus = true;
+			me.playLocalStatus = true;
-			// } else if (tabIndex == 2) {
+			me.playFollowStatus = false;
-			// 	me.playStatus = true;
+			me.playStatus = false;
-			// 	me.playFollowStatus = false;
+		} else if (curIndex == 1) {
-			// }
+			me.playLocalStatus = false;
+			me.playFollowStatus = true;
+			me.playStatus = false;
+		} else if (curIndex == 2) {
+			me.playLocalStatus = false;
+			me.playFollowStatus = false;
+			me.playStatus = true;
+		}
 	},
 	onShow() {
+		this.getLocation();
 		let me = this;
-			if(uni.getStorageSync('refreshVlogIndex')=='1'){
+		me.myUserInfo = storage.getVlogUserInfo();
-				storage.setRefreshVlogIndex('0') //不需要刷新
+		if (uni.getStorageSync('refreshVlogIndex') == '1') {
+			storage.setRefreshVlogIndex('0'); //不需要刷新
 			this.$refs.videoComp.displayVideoPaging(1, true);
+			this.$refs.videoFollowComp.displayVideoPaging(1, true);
+			this.$refs.videoLocal.displayVideoPaging(1, true);
 		}
 
 		// 如果当前没有list, 则relaunch
@@ -179,35 +268,30 @@
 			}
 		}
 
-
-			// 判断如果当前是tab为1或2，则播放，否则不播放
 		if (me.curIndex == 0) {
+			me.playLocalStatus = true;
+		}
+		if (me.curIndex == 1) {
 			me.playFollowStatus = true;
-			} else if (me.curIndex == 1) {
+		}
+		if (me.curIndex == 2) {
 			me.playStatus = true;
 		}
-
-			// onShow的时候，关注的话，则重新刷一下list
-			var justFollowVlogerId = uni.getStorageSync("justFollowVlogerId") || '';
-			console.log('我是justFollowVlogerId', justFollowVlogerId)
-			if (!isStrEmpty(justFollowVlogerId)) {
-				this.$refs.videoComp.reFollowPlayList(justFollowVlogerId);
-				uni.setStorageSync("justFollowVlogerId", "");
-			}
-			// 取消关注也要重新刷一下list
-			var justCancelVlogerId = uni.getStorageSync("justCancelVlogerId");
-			if (!isStrEmpty(justCancelVlogerId)) {
-				this.$refs.videoComp.reCancelPlayList(justCancelVlogerId);
-				uni.setStorageSync("justCancelVlogerId", "");
-			}
 	},
 	onHide() {
 		var me = this;
 		// 显示和隐藏，需要判断根据不同tab做暂停或者隐藏
 		if (me.curIndex == 0) {
+			me.playLocalStatus = false;
+			me.isDraw_lo = false;
+		}
+		if (me.curIndex == 1) {
 			me.playFollowStatus = false;
-			} else if (me.curIndex == 1) {
+			me.isDraw_gz = false;
+		}
+		if (me.curIndex == 2) {
 			me.playStatus = false;
+			me.isDraw_tj = false;
 		}
 	},
 
@@ -223,54 +307,140 @@
 
 	// },
 	methods: {
+		getLocation() {
+			uni.getLocation({
+				type: 'wg84',
+				success: (res) => {
+					console.log(res);
+					var latitude = res.latitude;
+					var longitude = res.longitude;
+					var location = latitude + ',' + longitude;
+					var key = config.aMapKey;
+					uni.request({
+						url: 'https://apis.map.qq.com/ws/geocoder/v1/',
+						method: 'GET',
+						data: {
+							location,
+							key
+						},
+						success: (address) => {
+							console.log(address);
+							var ad_info = address.data.result.ad_info;
+							var cityCode = ad_info.adcode; // 城市编码cityCode
+							storage.setCityCode(cityCode);
+							this.cityCode = cityCode;
+							var address_name = ad_info.district || ad_info.city;
+							this.tabList.forEach((i, index) => {
+								if (index == 0) {
+									i.name = address_name;
+									// this.selectorQuery();
+									var timer = setTimeout(() => {
+										this.selectorQuery();
+										clearTimeout(timer);
+									}, 300);
+								}
+							});
+						}
+					});
+				},
+				fail: () => {
+					uni.showToast({
+						icon: 'none',
+						title: '获取位置信息失败'
+					});
+					// uni.showModal({
+					// 	title:'提示',
+					// 	content:'获取位置信息失败',
+					// 	showCancel:false,
+					// 	success: (res) => {
+					// 		if(res.confirm){
+					// 		}
+					// 	}
+					// })
+				}
+			});
+		},
+
 		// 前往搜索页面
 		goSearch() {
 			uni.navigateTo({
-					url: "/pages/search/search"
+				url: '/pages/search/search'
-				})
+			});
 		},
 		// ----------头部区域点击tabs
 		ontabtap(e) {
+			console.log(e);
 			let index = e.target.dataset.current || e.currentTarget.dataset.current;
-				this.tapFollow(index)
+			this.isTap = true;
+			var currentSize = this.tabListSize[index];
+			// if (obj.playerList.length === 0) {
+			// 	this.isDraw_gz = false;
+			// 	this.isDraw_lo = false;
+			// 	this.isDraw_tj = false;
+			// } else {
+			// 	this.isDraw_gz = preloadIndex == 1 ? true : false;
+			// 	this.isDraw_lo = preloadIndex == 0 ? true : false;
+			// 	this.isDraw_tj = preloadIndex == 2 ? true : false;
+			// }
+			this.updateIndicator(currentSize.left, currentSize.width);
+			this._touchTabIndex = index;
 			this.switchTab(index);
 		},
 		//
 		selectorQuery() {
-				uni.createSelectorQuery().in(this).select('#head').boundingClientRect().exec(rect => {
+			var dm = uni.createSelectorQuery().in(this);
+			dm.select('#head')
+				.boundingClientRect()
+				.exec((rect) => {
 					this._headHeight = rect[0].height;
 				});
 
 			// 查询 tabbar 宽度
-				uni.createSelectorQuery().in(this).select('#tab-bar').boundingClientRect().exec(rect => {
+			dm.in(this)
+				.select('#tab-bar')
+				.boundingClientRect()
+				.exec((rect) => {
 					this.tabbarWidth = rect[0].width;
-					console.log(this.tabbarWidth)
+					console.log(this.tabbarWidth);
 				});
 			// 查询 tabview 宽度
-				uni.createSelectorQuery().in(this).select('#tab-bar-view').boundingClientRect().exec(rect => {
+			dm.in(this)
+				.select('#tab-bar-view')
+				.boundingClientRect()
+				.exec((rect) => {
 					this.swiperWidth = rect[0].width;
-					console.log(this.swiperWidth)
+					console.log(this.swiperWidth);
 				});
 
 			// 因 nvue 暂不支持 class 查询
-				var queryTabSize = uni.createSelectorQuery().in(this);
+			// var queryTabSize = uni.createSelectorQuery().in(this);
+			var queryTabSize = dm;
 			for (var i = 0; i < this.tabList.length; i++) {
 				queryTabSize.select('#' + this.tabList[i].id).boundingClientRect();
 			}
-				queryTabSize.exec(rects => {
+			queryTabSize.exec((rects) => {
 				rects.forEach((rect) => {
 					rect.left = rect.left - 40; //修正 left 值，减去 padding-left: 40px
 					this.tabListSize[rect.dataset.id] = rect;
-					})
+				});
-					console.log(this.tabListSize[this.tabIndex])
+				console.log(this.tabListSize[this.tabIndex]);
-					this.updateIndicator(this.tabListSize[this.tabIndex].left, this.tabListSize[this.tabIndex]
+				this.updateIndicator(this.tabListSize[this.tabIndex].left, this.tabListSize[this.tabIndex].width);
-						.width);
 				this.switchTab(this.tabIndex);
 			});
 		},
 
 		onswiperscroll(e) {
-				// if(!this.tabListSize[this._lastTabIndex]) return
+			this.isDraw_gz = false;
+			this.isDraw_lo = false;
+			this.isDraw_tj = false;
+			console.log(this.playStatus);
+			// if (this.playStatus == true) {
+			// 	this.playStatus = this._lastTabIndex == 2 ? false : true;
+			// }
+
+			// this.playFollowStatus = this._lastTabIndex == 1 ? false : true;
+			// this.playLocalStatus = this._lastTabIndex == 0 ? false : true;
+
 			var offsetX = e.detail.dx;
 			var preloadIndex = this._lastTabIndex;
 			if (offsetX > TAB_PRELOAD_OFFSET) {
@@ -278,14 +448,29 @@
 			} else if (offsetX < -TAB_PRELOAD_OFFSET) {
 				preloadIndex--;
 			}
-				if (preloadIndex === this._lastTabIndex || preloadIndex < 0 || preloadIndex > this.pageList.length - 1) {
+			let prop = this.pageList[preloadIndex];
+			let obj = this.$refs[prop];
+			if (!obj) return;
+			// 点击切换
+			if (this.isTap) {
 				return;
 			}
-				let prop = this.pageList[preloadIndex]
+			// 切换失败
-				let obj = this.$refs[prop]
+			if (preloadIndex === this._lastTabIndex || preloadIndex < 0 || preloadIndex > this.pageList.length - 1) {
+				// 是否有视频数据
 				if (obj.playerList.length === 0) {
 					// this.loadTabData(preloadIndex);
+					this.isDraw_gz = false;
+					this.isDraw_lo = false;
+					this.isDraw_tj = false;
+				} else {
+					this.isDraw_gz = preloadIndex == 1 ? true : false;
+					this.isDraw_lo = preloadIndex == 0 ? true : false;
+					this.isDraw_tj = preloadIndex == 2 ? true : false;
 				}
+				return;
+			}
+
 			// console.log(this.tabListSize)
 			var percentage = Math.abs(this.swiperWidth / offsetX);
 			var currentSize = this.tabListSize[this._lastTabIndex];
@@ -296,27 +481,41 @@
 		},
 		animationfinish(e) {
 			let index = e.detail.current;
+			console.log('当前索引' + index);
+			console.log('之前的索引' + this._lastTabIndex);
 			this._lastTabIndex = index;
+			if (this._touchTabIndex === index) {
+				this.isTap = false;
+			}
 			this.switchTab(index);
-				if(!this.tabListSize[index]) {
+			if (!this.tabListSize[index]) {
-					return 
+				return;
-				}else{
+			} else {
+				// this.playStatus = index == 2 ? false : true;
+				// this.playFollowStatus = index == 1 ? true : false;
+				// this.playLocalStatus = index == 0 ? true : false;
+				this.isDraw_gz = index == 1 ? true : false;
+				this.isDraw_lo = index == 0 ? true : false;
+				this.isDraw_tj = index == 2 ? true : false;
+
 				this.updateIndicator(this.tabListSize[index].left, this.tabListSize[index].width);
 			}
-				
 		},
 		updateIndicator(left, width) {
+			// console.log(left)
 			this.indicatorLineLeft = left;
 			this.indicatorLineWidth = width;
 		},
 
 		switchTab(index) {
-
+			if (this.tabIndex === index) {
+				return;
+			}
 			// console.dir(this.$refs)
-				let props = this.pageList[index]
+			let props = this.pageList[index];
-				console.log(props)
+			console.log(props);
-				console.log(index)
+			console.log(index);
-				let obj = this.$refs[props]
+			let obj = this.$refs[props];
 			// if (obj.playerList.length === 0) {
 			// 	var info = storage.getVlogUserInfo() || null
 			// 	if(info!=null&&index==0){
@@ -324,14 +523,9 @@
 			// 	}
 			// }
 
-
 			obj.setScrollRef(this._headHeight);
 
-				if (this.tabIndex === index) {
+			console.log(this.cacheTab);
-					return;
-				}
-
-				console.log(this.cacheTab)
 			// 缓存 tabId
 			if (obj.playerList.length > MAX_CACHE_DATA) {
 				let isExist = this.cacheTab.indexOf(this.tabIndex);
@@ -358,6 +552,7 @@
 			// });
 		},
 		scrollTabTo(index) {
+			console.log(index);
 			const el = this.$refs['tabitem' + index][0];
 			let offset = 0;
 			// TODO fix ios offset
@@ -375,20 +570,16 @@
 		//----------------------------
 
 		// 左滑右滑选项卡改变选中状态
-			changeTopTab: function(e) {
+		changeTopTab: function (e) {
 			var current = e.detail.current;
-				this.switchTab(current)
 			this.curIndex = current;
-				this.tabIndex = current
+			this.tabIndex = current;
-				this.playFollowStatus = this.curIndex === 0 ? true : false;
+			let timer = setTimeout(() => {
-				this.playStatus = this.curIndex === 1 ? true : false;
+				this.playLocalStatus = this.curIndex === 0 ? true : false;
-			},
+				this.playFollowStatus = this.curIndex === 1 ? true : false;
-			// 点击头部选项卡，切换页面
+				this.playStatus = this.curIndex === 2 ? true : false;
-			tapFollow: function(current) {
+				clearTimeout(timer);
-				this.curIndex = current;
+			}, 10);
-				this.tabIndex = current
-				this.playFollowStatus = this.curIndex === 0 ? true : false;
-				this.playStatus = this.curIndex === 1 ? true : false;
 		},
 
 		// 下拉刷新，改变head的字样显示
@@ -402,24 +593,24 @@
 			this.playFollowStatus = false;
 		}
 	}
-	}
+};
 </script>
 
 <style scoped>
-	/* index start */
+/* index start */
-	.page {
+.page {
 	position: absolute;
 	left: 0;
 	right: 0;
 	top: 0;
 	bottom: 0;
 	background-color: #000000;
-	}
+}
 
-	/* index end */
+/* index end */
 
-	/* 顶部选项卡 start */
+/* 顶部选项卡 start */
-	.header {
+.header {
 	position: absolute;
 	left: 0;
 	right: 0;
@@ -429,102 +620,102 @@
 	align-items: center;
 	padding-left: 40px;
 	padding-right: 40px;
-	}
+}
 
-	.header-center {
+.header-center {
 	flex: 1;
 	flex-direction: row;
 	align-items: center;
 	justify-content: center;
-	}
+}
 
-	.header-left,
+.header-left,
-	.header-right {
+.header-right {
 	color: #999;
 	height: 100rpx;
 	line-height: 100rpx;
 	align-items: flex-start;
 	justify-content: flex-end;
 	font-family: iconfont;
-	}
+}
 
-	.header-right-search {
+.header-right-search {
 	height: 100rpx;
 	/* align-items: flex-start;
 		justify-content: flex-end; */
-	}
+}
 
-	.header-item {
+.header-item {
 	align-items: center;
 	margin-left: 6rpx;
 	margin-right: 6rpx;
-	}
+}
 
-	.header-item-title {
+.header-item-title {
 	width: 120rpx;
 	text-align: center;
 	height: 60rpx;
 	line-height: 60rpx;
-		color: #FFFFFF;
+	color: #ffffff;
 	font-size: 16px;
 	font-weight: 600;
-	}
+}
 
-	.header-refresh-title {
+.header-refresh-title {
 	width: 300rpx;
 	text-align: center;
 	height: 60rpx;
 	line-height: 60rpx;
-		color: #FFFFFF;
+	color: #ffffff;
 	font-size: 16px;
 	font-weight: 600;
-	}
+}
 
-	.header-item-line {
+.header-item-line {
 	height: 5rpx;
 	line-height: 8rpx;
 	width: 60rpx;
 	border-radius: 8rpx;
-	}
+}
 
-	/* 顶部选项卡 end */
+/* 顶部选项卡 end */
 
-	/* 选项卡轮播组件 start */
+/* 选项卡轮播组件 start */
-	.my-swiper {
+.my-swiper {
 	position: absolute;
 	left: 0;
 	right: 0;
 	top: 0;
 	bottom: 0;
-	}
+}
 
-	.near-by {
+.near-by {
 	background-color: #000000;
 	align-items: center;
 	justify-content: center;
-	}
+}
 
-	.my-follow {
+.my-follow {
 	background-color: #000000;
 	align-items: center;
 	justify-content: center;
-	}
+}
 
-	/* 选项卡轮播组件 end */
+/* 选项卡轮播组件 end */
-	.warn-info {
+.warn-info {
-		color: #FFFFFF;
+	color: #ffffff;
 	font-size: 36rpx;
 	font-weight: 600;
-	}
+}
 
-	.normal-img {
+.normal-img {
 	width: 50rpx;
 	height: 50rpx;
 	opacity: 0.8;
-	}
+}
 
-	/*  */
+/*  */
-	.tab-bar {
+.tab-bar {
 	/* width: 750upx; */
 	flex: 1;
 	height: 84upx;
@@ -533,15 +724,15 @@
 	text-overflow: ellipsis;
 	justify-content: center;
 	align-items: center;
-	}
+}
 
-	.uni-tab-item {
+.uni-tab-item {
 	flex-wrap: nowrap;
 	/* padding-left: 25px; */
 	/* padding-right: 25px; */
-	}
+}
 
-	.uni-tab-item-title {
+.uni-tab-item-title {
 	color: #999;
 	font-size: 30upx;
 	height: 80upx;
@@ -549,34 +740,34 @@
 	flex-wrap: nowrap;
 	lines: 1;
 	text-overflow: ellipsis;
-	}
+}
 
-	.uni-tab-item-title-active {
+.uni-tab-item-title-active {
-		color: #FFFFFF;
+	color: #ffffff;
-	}
+}
 
-	.scroll-view-indicator {
+.scroll-view-indicator {
 	position: relative;
 	height: 2px;
 	background-color: transparent;
-	}
+}
 
-	.scroll-view-underline {
+.scroll-view-underline {
 	position: absolute;
 	top: 0;
 	bottom: 0;
 	width: 0;
 	/* background-color: #007AFF; */
-		background-color: #FFFFFF;
+	background-color: #ffffff;
-	}
+}
 
-	.scroll-view-animation {
+.scroll-view-animation {
 	transition-duration: 0.2s;
 	/* transition-property: transform; */
-	}
+}
 
-	.tab-bar-line {
+.tab-bar-line {
 	height: 1upx;
 	background-color: #cccccc;
-	}
+}
 </style>

utils/storage.js

@@ -11,6 +11,12 @@ const FINGER_LOGIN = isDev ? "finger_login_dev" : "finger_login";
 const CART_BACKBTN = isDev ? "cart_backbtn_dev" : "cart_backbtn";
 const AFTERSALE_DATA = isDev ? "aftersale_data_dev" : "aftersale_data";
 export default {
+	setCityCode(val) {
+		return uni.setStorageSync('cityCode',val)
+	},
+	getCityCode(){
+		return uni.getStorageSync('cityCode')
+	},
 	/**
 	 * 写入RefreshVlogIndex
 	 */

vue.config.js

@@ -1,12 +1,12 @@
-const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default;
+// const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default;
 
 module.exports = {
   parallel: false,
   configureWebpack: {
     plugins: [
-      ScriptSetup({
+      // ScriptSetup({
-        /* options */
+      //   /* options */
-      }),
+      // }),
     ],
   },
   chainWebpack(config) {