teaching-uniapp/pages/mine/mine.vue

<template>
	<view>
		<statusBar :item="navBarData"></statusBar>
		<view class="mineBox">
			<view class="userInformation" @click="gotoMineEdit">
				<view class="userAvatar">
					<image
						:src="userAvatar!=='' ? userAvatar : 'https://teacherapi.cocorobo.cn/teaching-file/static//mine/Avatar_default.png'"
						mode="aspectFill"></image>
				</view>
				<view class="userInfo">
					<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;">个性签名</text>
					</view>
				</view>
			</view>
			<view class="userOptionsBox">
				<view class="optionsItemBox">
					<view class="optionItem" @click="goToSub(1)">
						<view class="option_left">
							<span class="option_icon">
								<image src="https://teacherapi.cocorobo.cn/teaching-file/static//mine/Subscribe.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="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>
					<!-- <beUpload @getFile="getFile" :navName="'上传文件'" :accept="accept" :progress="progress">111</beUpload> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				accept: "*",
				progress: {
					value: 50,
					show: false,
				},
				navBarData: {
					title: '我的',
					btn: 0
				},
				username: '',
				userAvatar: 'https://teacherapi.cocorobo.cn/teaching-file/static//mine/Avatar.png',
				isManage: ''
			};
		},
		methods: {
			getFile(val) {
				// console.log(val);

				this.ajax
					.post("https://cxcy.ssti.net.cn/api/UploadFirmFile", {
						uid: this.$store.state.userInfo.userid,
						file: JSON.stringify(val),
					})
					.then((res) => {
						if (res.data == 1) {
							this.$message.success("上传成功");
						} else {
							this.$message.error("上传失败");
						}
						this.getData();
					});
			},
			goToSub(i) {
				uni.navigateTo({
					url: '/pages/mineSubscribe/mineSubscribe'
				});
			},

			gotoMineClass() {
				uni.navigateTo({
					url: '/pages/mineClass/mineClass'
				})
			},
			gotoMineCollect() {
				uni.navigateTo({
					url: '/pages/mineCollect/mineCollect'
				})
			},
			gotoMineEdit() {
				uni.navigateTo({
					url: '/pages/mineEdit/mineEdit'
				})
			},
			gotoMineEdit() {
				uni.navigateTo({
					url: '/pages/mineEdit/mineEdit'
				})
			},
			gotoMineActive() {
				uni.navigateTo({
					url: '/pages/mineActive/mineActive'
				})
			},
			gotomyRelease() {
				const value = this.$store.state.user.openid;
				if (value == '') {
					uni.navigateTo({
						url: "/pages/login_Wechat/login_Wechat",
					});
				} else {
					uni.navigateTo({
						url: '/pages/mineRelease/mineRelease'
					})
				}
			}
		},
		onShow() {
			console.log(this.$store.state);
			this.userAvatar = this.$store.state.user.avatar;
			this.username = this.$store.state.user.username;
			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;
					}
				}
			}
		}

		// 个人资料选项
		.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;

						image {
							height: 34rpx;
							width: 30rpx;
						}
					}
				}
			}
		}
	}
</style>