app/pages/me/me.nvue

<template>
	<view class="mypage">
		<!-- 未登录 -->
		<view
			v-if="!userIsLogin"
			class="login-info-wrapper"
			:style="{ height: screenHeightUnLogin + 'px' }"
			@click="goLogin"
		>
			<text class="login-info">
				{{ loginWords }}
			</text>
		</view>

		<!-- 已登录 -->
		<scroll-view
			v-if="userIsLogin"
			class="isLogin-info-wrapper"
			:style="{ height: screenHeight + 'px' }"
			scroll-y="true"
			@scrolltolower="loadMore"
		>
			<image
				class="mybg"
				:src="pageUserInfo.bgImg"
				mode="aspectFill"
				@click="changeMyBg"
			/>

			<!-- 安卓下使用一个灰色图片来替代阴影效果, ios支持阴影, 安卓则不支持 -->
			<!--  <image
        v-if="isAndroid"
        @click.self="changeMyBg"
        :src="pageUserInfo.bgImg"
        mode="aspectFill"
        style="width: 750rpx; height: 750rpx; opacity: 0.5" /> -->

			<view class="my-info-wrapper">
				<view class="my-info">
					<image
						:src="pageUserInfo.face"
						mode="aspectFill"
						class="my-face"
						@click="changeMyFace"
					/>
					<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
						@click="goMyFollows(pageUserInfo.id)"
						class="bottom-item"
					>
						<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
						@click="goMyInfo"
						class="edit-info"
					>
						<text class="edit-text">编辑资料</text>
					</view>
					<view
						@click="goSettings"
						class="setting"
					>
						<image
							src="/static/images/more.png"
							class="setting-img"
						/>
					</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(2)"
				>
					<text
						class="tab-normal"
						:class="{ 'tab-selected': currentTab == 2 }"
					>
						赞过
					</text>
					<view
						v-if="currentTab == 2"
						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, vlogMyPublicList, vlogMyPrivateList, vlogMyLikedList, vlogMeTag } from '@/api/vlog';

import { getAstro, getAnimal, dateFormat, graceNumber } from '@/utils/tools.js';

export default {
	data() {
		return {
			userIsLogin: false,
			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: '请登录',

			screenHeight: 0,
			screenHeightUnLogin: 0,
			currentTab: 0,
			isAndroid: uni.getSystemInfoSync().platform == 'android',

			page: 0,
			toalPage: 0,
			vlogList: []
		};
	},
	onLoad() {
		let screenHeight = system.safeArea.bottom + 50;
		this.screenHeight = screenHeight;
		let screenHeightUnLogin = system.safeArea.bottom;
		this.screenHeightUnLogin = screenHeightUnLogin;
	},
	onShow() {
		let me = this;
		// 判断我有没有登录
		this.userIsLogin = storage.getHasLogin();
		console.log(this.userIsLogin);
		if (this.userIsLogin) {
			this.getUinfo();
		} else {
			return;
		}
	},
	onTabItemTap: (e) => {
		console.log(e);
		if (!storage.getHasLogin()) {
			uni.navigateTo({
				url: '/pages/passport/login'
			});
		}
	},
	methods: {
		async getUinfo() {
			let myUserInfo = storage.getVlogUserInfo();

			let myUserId = myUserInfo.id;
			uni.showLoading({
				title: '正在加载!'
			});
			var result = await vlogUserInfo(myUserId);
			uni.hideLoading();
			console.log(result);
			if (result.data.status == 200) {
				this.pageUserInfo = result.data.data;
				storage.setVlogUserInfo(this.pageUserInfo);
				// 查询用户信息
				this.switchTab(0);
				// this.myList(0, 'myPublicList', true);
				this.setBasicUserInfo(this.pageUserInfo);
			}
		},
		setBasicUserInfo(myUserInfo) {
			// if (app.isStrEmpty(myUserInfo.bgImg)) {
			//   myUserInfo.bgImg = "http://120.26.164.63:9000/tiktok/IMG_4566.HEIC";
			//   app.setUserInfoSession(myUserInfo);
			// }
			// if (app.isStrEmpty(myUserInfo.face)) {
			//   myUserInfo.face = "http://120.26.164.63:9000/tiktok/IMG_4845.JPG";
			//   app.setUserInfoSession(myUserInfo);
			// }
			// 根据生日判断星座
			let birthday = myUserInfo.birthday;
			let birth = dateFormat('YYYY-MM-DD', new Date(birthday));
			console.log(birth);
			let birthArr = birth.split('-');
			let year = birthArr[0];
			let month = birthArr[1];
			let day = birthArr[2];
			let astro = getAstro(month, day);
			console.log(astro);
			this.astro = astro;

			// 根据生日判断生肖
			this.animal = getAnimal(year);
			console.log(this.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, 'myPrivateList', true);
			} else if (index == 2) {
				this.page = 0;
				this.toalPage = 0;
				this.myList(0, 'myLikedList', true);
			}
		},
		loadMore() {
			let requestArr = ['myPublicList', 'myPrivateList', 'myLikedList'];
			if (this.page >= this.toalPage) {
				return;
			} else {
				this.myList(this.page, requestArr[this.currentTab]);
			}
		},
		async myList(page, requrl, init = false) {
			let me = this;
			page = page + 1;
			me.page = page;
			var uinfo = storage.getVlogUserInfo();
			if (uinfo == null) return;
			let userId = uinfo.id;
			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;
			}
		},
		goLogin() {
			uni.navigateTo({
				url: '/pages/passport/login',
				animationType: 'slide-in-bottom'
			});
		},
		// 把超过1000或10000的数字调整, 比如1.3k/6.8w
		getGraceNumber(num) {
			return graceNumber(num);
		},
		// 视频详情
		goToVlog(vlog) {
			let vlogId = vlog.id ? vlog.id : vlog.vlogId;
			console.log(vlogId);
			uni.navigateTo({
				url: '/pages/me/vlog?vlogId=' + vlogId
			});
		},
		// 修改背景图
		changeMyBg() {
			uni.navigateTo({
				animationType: 'fade-in',
				url: '/pages/me/myBackImg'
			});
		},
		// 更换头像
		changeMyFace() {
			uni.navigateTo({
				animationType: 'fade-in',
				url: 'myFace'
			});
		},
		//编辑资料
		goMyInfo() {
			uni.navigateTo({
				animationType: 'fade-in',
				url: 'myInfo'
			});
		},

		goSettings() {
			uni.navigateTo({
				animationType: 'fade-in',
				// url: 'settings'
				url: '/pages/tabbar/user/my'
			});
		},
		// 粉丝列表
		goMyFans(userId) {
			uni.navigateTo({
				animationType: 'fade-in',
				url: 'myFans'
			});
		},
		// 关注列表
		goMyFollows(userId) {
			uni.navigateTo({
				animationType: 'fade-in',
				url: 'myFollows'
			});
		}
	}
};
</script>

<style>
.mypage {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: #000000;
}

.login-info {
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #ffffff;
	font-size: 36rpx;
	font-weight: 600;
}

.login-info-wrapper {
	flex-direction: column;
	justify-content: center;
}

.mybg {
	width: 750rpx;
	height: 750rpx;
	box-shadow: inset 0 -150px 180px #313030;
}

.desc {
	position: relative;
	top: -520rpx;
	color: #ffffff;
	font-size: 14px;
	margin: 0 30rpx;
}

.item-text {
	color: #ffffff;
	font-size: 12px;
	font-weight: 300;
	align-items: center;
}

.item-num {
	color: #ffffff;
	font-size: 14px;
	font-weight: bold;
	align-items: center;
}

.bottom-item {
	margin-left: 30rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.edit-text {
	font-size: 13px;
	color: #ffffff;
	font-weight: 500;
	align-items: center;
}

.edit-info {
	margin-left: 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-items: center;
}

.setting-img {
	width: 32rpx;
	height: 32rpx;
	align-items: center;
}

.setting {
	margin-left: 20rpx;
	border-width: 1px;
	border-color: #ffffff;
	width: 100rpx;
	height: 66rpx;
	background-color: #545456;
	opacity: 0.8;
	border-radius: 40rpx;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.edit {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-right: 30rpx;
}

.bottom {
	display: flex;
	flex-direction: row;
}

.bottom-wrapper {
	position: relative;
	top: -510rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.my-face {
	width: 200rpx;
	height: 200rpx;
	border-radius: 100rpx;
	border-width: 1px;
	border-color: #f1f1f1;
}

.nickname {
	font-size: 20px;
	color: #ffffff;
	font-weight: 600;
}

.tiktok-num {
	font-size: 10px;
	color: #ffffff;
	font-weight: 300;
}

.location-text {
	line-height: 20px;
	color: #ffffff;
	font-size: 10px;
	font-weight: 300;
}

.location {
	display: flex;
	flex-direction: row;
	height: 20px;
	margin-top: 2px;
	font-size: 1px;
}

.tiktok-num-wrapper {
	display: flex;
	flex-direction: row;
}

.sex-img {
	width: 22rpx;
	height: 22rpx;
	align-items: center;
}

.astro {
	font-size: 10px;
	color: #ffffff;
	line-height: 20px;
	font-weight: bold;
	margin-left: 6rpx;
	align-items: center;
}

.constellation {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background-color: #000000;
	opacity: 0.5;
	width: 130rpx;
	height: 40rpx;
	border-radius: 10px;
}

.animal-text {
	font-size: 10px;
	color: #ffffff;
	line-height: 20px;
	font-weight: bold;
	align-items: 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;
}

.sex-wrapper {
	display: flex;
	flex-direction: row;
	margin-top: 10rpx;
}

.info-wrapper {
	margin-left: 30rpx;
	padding-top: 20rpx;
	width: 500rpx;
}

.my-info {
	display: flex;
	flex-direction: row;
}

.my-info-wrapper {
	position: relative;
	left: 30rpx;
	top: -560rpx;
	display: flex;
	flex-direction: column;
	width: 1000rpx;
}

.tab-normal {
	font-size: 18px;
	font-weight: 500;
	align-items: center;
	color: #808080;
}

.tab-selected {
	color: #ffffff;
}

.selected-tab {
	margin-top: 5px;
	height: 5rpx;
	width: 250rpx;
	border-radius: 6rpx;
	background-color: #ef274d;
}

.tab-item {
	width: 250rpx;
	align-items: 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;
}

.vlog-cover {
	align-items: center;
	width: 248rpx;
	height: 360rpx;
	border-width: 1rpx;
}

.vlog-list {
	position: relative;
	top: -480rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	background-color: #000000;
}

.empty-text {
	color: #ffffff;
	font-size: 14px;
	margin-top: 200rpx;
}

.empty {
	background-color: #000000;
	width: 750rpx;
	height: 300rpx;
	display: flex;
	flex-direction: row;
	justify-content: center;
	position: relative;
	top: -480rpx;
}

.not-empty-text {
	color: #ffffff;
	font-size: 14px;
}

.not-empty {
	width: 750rpx;
	display: flex;
	flex-direction: row;
	justify-content: center;
	position: relative;
	top: -260rpx;
}

.isLogin-info-wrapper {
}
</style>