teaching-uniapp/pages/mine/mine.vue

<template>
	<view>
		<statusBar :item="navBarData"></statusBar>
		<!-- 消息提示 -->

		<msgPop></msgPop>
		<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" style="display: flex;justify-content: center;">
								<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>
				<view class="optionsItemBox">
					<view class="optionItem" @click="gotoFeedback">
						<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: '',

			};
		},
		onShareTimeline() {
			uni.share({
				provider: "weixin",
				scene: "WXSceneTimeline",
				type: 0,
				href: "http://uniapp.dcloud.io/",
				title: "uni-app分享",
				summary: "我正在使用丽湖双创小程序，赶紧跟我一起来体验！",
				imageUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png",
				success: function(res) {
					console.log("success:" + JSON.stringify(res));
				},
				fail: function(err) {
					console.log("fail:" + JSON.stringify(err));
				}
			});

		},
		// 分享
		onShareAppMessage() {

			uni.share({
				provider: "weixin",
				scene: "WXSceneSession",
				type: 1,
				summary: "我正在使用丽湖双创小程序，赶紧跟我一起来体验！",
				success: function(res) {
					console.log("success:" + JSON.stringify(res));
				},
				fail: function(err) {
					console.log("fail:" + JSON.stringify(err));
				}
			});
		},
		methods: {
			gotoFeedback() {
				const value = this.$store.state.user.openid;
				if (!value) {
					uni.showToast({
						title: '未登录，请登录',
						icon: 'none'
					})
					setTimeout(this.goLog, 1000)
					return
				}
				uni.navigateTo({
					// url: '/pages/mineCollect/mineCollect'
					url: '/pages/feedback/feedback'
				})
			},
			// 我的收藏
			gotoMineCollect() {
				const value = this.$store.state.user.openid;
				if (!value) {
					uni.showToast({
						title: '未登录，请登录',
						icon: 'none'
					})
					setTimeout(this.goLog, 1000)
					return
				}
				uni.navigateTo({
					// url: '/pages/mineCollect/mineCollect'
					url: '/pages/mineCollNew/mineCollNew'
				})
			},
			// 我的设置
			gotoMineEdit() {
				const value = this.$store.state.user.openid;
				if (!value) {
					uni.showToast({
						title: '未登录，请登录',
						icon: 'none'
					})
					setTimeout(this.goLog, 1000)
					return
				}
				uni.navigateTo({
					url: '/pages/mineEdit/mineEdit'
				})
			},
			// 我的活动
			gotoMineActive() {
				const value = this.$store.state.user.openid;
				if (!value) {
					uni.showToast({
						title: '未登录，请登录',
						icon: 'none'
					})
					setTimeout(this.goLog, 1000)
					return
				}
				uni.navigateTo({
					url: '/pages/mineActive/mineActive'
				})
			},
			// 信息
			goMsg() {
				const value = this.$store.state.user.openid;
				if (!value) {
					uni.showToast({
						title: '未登录，请登录',
						icon: 'none'
					})
					setTimeout(this.goLog, 1000)
					return
				}
				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: 4
						})
					} else {

						uni.setTabBarBadge({
							index: 4,
							text: num.toString()
						})
					}
				})
			},
			goLog() {
				uni.navigateTo({
					url: "/pages/login_Wechat/login_Wechat",
				});
			},

		},
		// // 分享
		// onShareAppMessage() {

		// 	uni.share({
		// 		provider: "weixin",
		// 		scene: "WXSceneSession",
		// 		type: 1,
		// 		summary: "我正在使用丽湖双创小程序，赶紧跟我一起来体验！",
		// 		success: function(res) {
		// 			console.log("success:" + JSON.stringify(res));
		// 		},
		// 		fail: function(err) {
		// 			console.log("fail:" + JSON.stringify(err));
		// 		}
		// 	});
		// },
		onShow() {
			// if (!this.$store.state.user.openid) {
			this.getMag() // 调用app.js中的方法
			// }
			// this.getAllMessage() // 调用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.stuName == null ? '' : this.$store.state.user.stuName;
			// 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: 36rpx;
							height: 36rpx;
							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>