teaching-uniapp/pages/mine/mine.vue

<template>
	<view>
		<statusBar :item="navBarData"></statusBar>
		<view class="mineBox">
			<view class="userInformation" >
				<view class="userAvatar" @click="gotoMineEdit">
					<image
						:src="userAvatar!=='' ? userAvatar : 'https://teacherapi.cocorobo.cn/teaching-file/static//mine/Avatar_default.png'"
						mode="aspectFill"></image>
				</view>
				<view class="userInfo" @click="gotoMineEdit">
					<view class="infoTextone">
						<text class="twoZ-font">{{ !username ? '未登录' : username }}</text>
						<!-- <span v-if="isManage!==''" class="manage bq-font">管理员</span> -->
					</view>
					<view class="infoTexttwo">
						<text style="font-size: 26rpx;font-weight: 400;line-height: 42rpx;color: #999999;">
							{{signature!=='' ? signature : '个性签名' }}
						</text>
						<!-- <text style="font-size: 26rpx;font-weight: 400;line-height: 42rpx;color: #999999;"></text> -->
					</view>
				</view>
			<!-- 	<view class="msgInfo">
					<view class="msgImg" @click="goMsg">
						消息
					</view>
				</view> -->
			</view>
			<view class="userOptionsBox">
				<view class="optionsItemBox">

					<view class="optionItem" @click="goMsg">
						<view class="option_left">
							<view class="option_icon">
								<image style="width: 80%;height: 80%;" src="../../static/Vectorldang.png" mode="aspectFill">
								</image>
							</view>
							<text class="option_text fwb-font">我的消息</text>
						</view>
						<view class="option_right">
							<view class="msgq" v-if="msgn>0">
								{{msgn}}
							</view>
							<image src="https://teacherapi.cocorobo.cn/teaching-file/static//mine/arrow-right.png" mode="aspectFill">
							</image>
						</view>
					</view>
					<view class="optionItem" @click="gotoMineCollect">
						<view class="option_left">
							<span class="option_icon">
								<image src="https://teacherapi.cocorobo.cn/teaching-file/static/mine/Collect.png" mode="aspectFill">
								</image>
							</span>
							<text class="option_text fwb-font">我的收藏</text>
						</view>
						<view class="option_right">
							<image src="https://teacherapi.cocorobo.cn/teaching-file/static/mine/arrow-right.png" mode="aspectFill">
							</image>
						</view>
					</view>
					<view class="optionItem" @click="gotoMineActive">
						<view class="option_left">
							<span class="option_icon">
								<image src="https://teacherapi.cocorobo.cn/teaching-file/static/mine/active.png" mode="aspectFill">
								</image>
							</span>
							<text class="option_text fwb-font">我的活动</text>
						</view>
						<view class="option_right">
							<image src="https://teacherapi.cocorobo.cn/teaching-file/static//mine/arrow-right.png" mode="aspectFill">
							</image>
						</view>
					</view>
<!-- 					<view class="optionItem" @click="gotoMineClass">
						<view class="option_left">
							<span class="option_icon">
								<image src="https://teacherapi.cocorobo.cn/teaching-file/static//mine/myClass.png" mode="aspectFill">
								</image>
							</span>
							<text class="option_text fwb-font">我的教研室</text>
						</view>
						<view class="option_right">
							<image src="https://teacherapi.cocorobo.cn/teaching-file/static//mine/arrow-right.png" mode="aspectFill">
							</image>
						</view>
					</view> -->
<!-- 					<view class="optionItem" @click="gotomyRelease">
						<view class="option_left">
							<span class="option_icon">
								<image src="https://teacherapi.cocorobo.cn/teaching-file/static//fabu.png" mode="aspectFill">
								</image>
							</span>
							<text class="option_text fwb-font">我的发布</text>
						</view>
						<view class="option_right">
							<image src="https://teacherapi.cocorobo.cn/teaching-file/static//mine/arrow-right.png" mode="aspectFill">
							</image>
						</view>
					</view> -->
				</view>
				<view class="optionsItemBox">
					<view class="optionItem">
						<view class="option_left">
							<span class="option_icon">
								<image src="https://teacherapi.cocorobo.cn/teaching-file/static//mine/help.png" mode="aspectFill">
								</image>
							</span>
							<text class="option_text fwb-font">反馈帮助</text>
						</view>
						<view class="option_right">
							<image src="https://teacherapi.cocorobo.cn/teaching-file/static//mine/arrow-right.png" mode="aspectFill">
							</image>
						</view>
					</view>
					<view class="optionItem" @click="gotoMineEdit">
						<view class="option_left">
							<span class="option_icon">
								<image src="https://teacherapi.cocorobo.cn/teaching-file/static//mine/setting.png" mode="aspectFill">
								</image>
							</span>
							<text class="option_text fwb-font">我的设置</text>
						</view>
						<view class="option_right">
							<image src="https://teacherapi.cocorobo.cn/teaching-file/static//mine/arrow-right.png" mode="aspectFill">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {

				navBarData: {
					title: '我的',
					btn: 0
				},
				msgn:0,
				// 用户名
				username: '',
				// 头像
				userAvatar: 'https://teacherapi.cocorobo.cn/teaching-file/static/mine/Avatar.png',
				// 学校
				signature:'',
				
			};
		},
		methods: {
			
			// 我的收藏
			gotoMineCollect() {
				uni.navigateTo({
					// url: '/pages/mineCollect/mineCollect'
					url:'/pages/mineCollNew/mineCollNew'
				})
			},
			// 我的设置
			gotoMineEdit() {
				uni.navigateTo({
					url: '/pages/mineEdit/mineEdit'
				})
			},
			// 我的活动
			gotoMineActive() {
				uni.navigateTo({
					url: '/pages/mineActive/mineActive'
				})
			},
			// 信息
			goMsg(){
				uni.navigateTo({
					url: '/pages/msg/msg'
				})
			},
			// 获取未读信息
			getMag() {
				this.$request('/selectAllMessage', "POST", {
					oid: this.$store.state.user.openid
				}).then(res => {
					console.log('获取未读信息',res[0][0].msg);
					let num = res[0][0].msg
					this.msgn=num
					if (num == 0) {
						uni.hideTabBarRedDot({
							index: 3
						})
					} else {
						
						uni.setTabBarBadge({
							index: 3,
							text: num.toString()
						})
					}
				})
			}

		},
		onShow() {
			this.getMag()    // 调用app.js中的方法
			
			console.log(this.$store.state);
			
			this.userAvatar = this.$store.state.user.avatar;
			
			this.username = this.$store.state.user.username;
			
			// 学校
			this.signature=this.$store.state.user.school==null?'':this.$store.state.user.school;
			// this.isManage = this.$store.state.user.openid;
			// console.log(this.isManage == "");
		}
	};
</script>

<style lang="scss" scoped>
	.mineBox {
		width: 100%;

		// 头像信息
		.userInformation {
			width: 100%;
			height: 100px;
			padding: 0 18px;
			background-color: white;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.userAvatar {
				flex: 1;
				// height: 80%;
				display: flex;
				align-items: center;

				image {
					width: 128rpx;
					height: 128rpx;
					border-radius: 50%;
				}
			}

			.userInfo {
				margin-left: 10px;
				flex: 4;
				height: 80%;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;

				.infoTextone {
					display: flex;
					align-items: center;

					span {
						&:first-child {
							color: #000;
							// font-size: 40rpx;
							font-weight: 600;
						}

						&.manage {
							border: 1px #ffa338 solid;
							// font-size: 11px;
							display: flex;
							white-space: nowrap;
							justify-content: center;
							align-items: center;
							padding: 2px 4px;
							border-radius: 3px;
							margin-right: 10rpx;
							color: #ffa338;
							margin-left: 5px;
						}
					}
				}

				.infoTexttwo {
					span {
						color: rgb(153, 153, 153);
						// font-size: 26rpx;
					}
				}
			}
			.msgInfo{
				width: 70rpx;
				position: relative;
				height: 80%;
				.msgImg{
					position: absolute;
					top: 0;
					right: 0;
					
					width: 64rpx;
					height: 64rpx;
				}
			}
		}

		// 个人资料选项
		.userOptionsBox {
			width: 100%;
			margin-top: 10px;

			.optionsItemBox {
				background-color: #fff;
				width: 100%;
				margin-bottom: 10px;
				padding: 5px 23px;

				.optionItem {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 81rpx;
					// font-size: 28rpx;

					.option_left {
						display: flex;
						align-items: center;
						height: 40rpx;

						.option_icon {
							height: 100%;
							width: 40rpx;
							
							image {
								width: 100%;
								height: 100%;
							}
						}

						.option_text {
							margin-left: 10px;
							color: rgba(0, 0, 0, 0.8);
						}
					}

					.option_right {
						height: 40rpx;
						display: flex;
						align-items: center;
						.msgq{
							width: 32rpx;height: 32rpx;background-color:rgba(213, 73, 65, 1);border-radius: 50rpx;
							color: #fff;
							font-size: 20rpx;
							display: flex;justify-content: center;align-items: center;
						}
						image {
							height: 34rpx;
							width: 30rpx;
							margin-left: 20rpx;
						}
					}
				}
			}
		}
		
	}
</style>