weapp-online/pages/mine/mine.vue

<template>
	<view class="mine">
		<view class="top">
			<view class="top_title" :style="{ 'padding-top': top + 'px', height: height + 'px', 'line-height': height + 'px' }">我的</view>
			<view class="top_con flexA">
				<view class="left flexS">
					<view class="avatar"><open-data type="userAvatarUrl"></open-data></view>
					<view>
						<view class="nikename"><open-data type="userNickName"></open-data></view>
						<view class="role flexC">
							<text class="iconfont iconwodexunzhang" style="font-size: 30rpx;margin-right: 5rpx;"></text>
							<text>{{ userInfo.level ? userInfo.level : '管理员' }}</text>
						</view>
					</view>
				</view>
				<view class="right flexS" @click="skipDetail(8)">
					<text>个人资料</text>
					<text class="iconfont iconyoujiantou" style="font-size:25rpx;color:#fff;margin-left:3rpx;"></text>
				</view>
			</view>
		</view>
		<view class="middle flexA" v-if="userInfo.type == 0">
			<view class="flexCC" @click="skipDetail(5)">
				<image src="../../static/imgs/voucher.png" style="width: 46rpx;height:36rpx;"></image>
				<text>报名凭证</text>
			</view>
			<view class="flexCC" @click="skipDetail(6)">
				<image src="../../static/imgs/mine_collect.png" style="width: 46rpx;height:41rpx;"></image>
				<text>我的收藏</text>
			</view>
			<!-- <view class="flexCC" @click="skipDetail(10)">
				<image src="../../static/imgs/note_in.png" style="width: 42rpx;height:42rpx;"></image>
				<text>我的便签</text>
			</view> -->
		</view>
		<view class="list">
			<view class="list_con flexB" @click="skipDetail(1)" v-if="userInfo.type == 0">
				<view class="flexS">
					<image src="../../static/imgs/military_order.png" style="width: 45rpx;height:40rpx;"></image>
					<text>军令状</text>
				</view>
				<text class="arrow iconfont iconyoujiantou"></text>
			</view>
			<view class="list_con flexB" @click="skipDetail(2)" v-if="userInfo.type == 0">
				<view class="flexS">
					<image src="../../static/imgs/bill.png" style="width: 36rpx;height:41rpx;"></image>
					<text>我的账单</text>
				</view>
				<text class="arrow iconfont iconyoujiantou"></text>
			</view>
			<view class="list_con flexB" @click="skipDetail(3)" v-if="userInfo.type == 1">
				<view class="flexS">
					<image src="../../static/imgs/sign_in.png" style="width: 36rpx;height:42rpx;"></image>
					<text>签到码</text>
				</view>
				<text class="arrow iconfont iconyoujiantou"></text>
			</view>
			<!-- <view class="list_con flexB" @click="skipDetail(4)" v-if="userInfo.type == 0">
				<view class="flexS">
					<image src="../../static/imgs/role.png" style="width: 38rpx;height:42rpx;"></image>
					<text>身份徽章</text>
				</view>
				<text class="arrow iconfont iconyoujiantou"></text>
			</view> -->
			<view class="list_con flexB" @click="skipDetail(6)" v-if="userInfo.type == 1">
				<view class="flexS">
					<image src="../../static/imgs/mine_collect.png" style="width: 46rpx;height:41rpx;"></image>
					<text>我的收藏</text>
				</view>
				<text class="arrow iconfont iconyoujiantou"></text>
			</view>
			<view class="list_con flexB" @click="skipDetail(7)" v-if="userInfo.type == 0">
				<view class="flexS">
					<image src="../../static/imgs/history.png" style="width: 38rpx;height:38rpx;"></image>
					<text>报名历史</text>
				</view>
				<text class="arrow iconfont iconyoujiantou"></text>
			</view>
			<!-- <view class="list_con flexB" @click="skipDetail(9)">
				<view class="flexS">
					<image src="../../static/imgs/msg_board.png" style="width: 38rpx;height:35rpx;"></image>
					<text>留言板</text>
				</view>
				<text class="arrow iconfont iconyoujiantou"></text>
			</view> -->
			<view class="list_con flexB">
				<view class="flexS">
					<image src="../../static/imgs/join_num.png" style="width: 40rpx;height:40rpx;"></image>
					<text>参加次数(实战营)</text>
				</view>
				<text>{{ userInfo.join_one_num || 0 }}次</text>
			</view>
			<view v-if="userInfo.level === '代理公司'" class="list_con flexB">
				<view class="flexS">
					<image src="../../static/imgs/join_num.png" style="width: 40rpx;height:40rpx;"></image>
					<text>参加次数(密训营)</text>
				</view>
				<text>{{ userInfo.join_two_num || 0 }}次</text>
			</view>

		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			currentPage: 'mine',
			top: '', //胶囊距顶部的距离
			height: '', //胶囊的高度
			userInfo: '' //用户信息
		};
	},
	onLoad() {
		let { top, height } = wx.getMenuButtonBoundingClientRect(); //获取胶囊的高度和距顶部的距离
		this.top = top;
		this.height = height;
	},
	onShow() {
		if (uni.getStorageSync('userInfo')) {
			this.userInfo = uni.getStorageSync('userInfo');
		}
	},
	methods: {
		/*跳转到详情页
		 * id
		 *【1：军令状】 【2：我的账单】【3：签到码】
		 *【4：身份徽章】 【5：报名凭证】 【6：我的收藏】
		 *【7：报名历史】【8：个人信息】 【9：留言板】
		 * 【10：便签】
		 */
		skipDetail(id) {
			if ((id === 5 || id === 1 || id === 4) && !this.userInfo.sign_type) {
				uni.showModal({
					content: '您还没有报过名',
					showCancel: false
				});
				return false;
			}
			if (id === 1 && this.userInfo.enroll_t) {
				uni.showModal({
					title: '温馨提示',
					content: '已发生过一次退款,无法查看军令状\n给您带来不便，敬请谅解！',
					showCancel: false
				});
				return false;
			}
			let url = '';
			switch (id) {
				case 1:
					url = '../military_order/military_order'; //军令状
					break;
				case 2:
					url = '../my_bill/my_bill'; //我的账单
					break;
				case 3:
					url = '../sign_in_code/sign_in_code'; //签到码
					break;
				case 4:
					url = '../identity/identity'; //身份徽章
					break;
				case 5:
					url = '../sign_up_voucher/sign_up_voucher'; //报名凭证
					break;
				case 6:
					url = '../my_collect/my_collect'; //我的收藏
					break;
				case 7:
					url = '../sign_up_history/sign_up_history'; //报名历史
					break;
				case 8:
					url = '../personal_info/personal_info'; //个人信息
					break;
				case 9:
					url = '../msg_board/msg_board'; //留言板
					break;
				case 10:
					url = '../note_pad/note_pad'; //便签
					break;
					dedault: break;
			}
			uni.navigateTo({
				url
			});
		}
	}
};
</script>
<style>
page {
	height: 100%;
	width: 100%;
	background: #f9f9f9;
}
</style>
<style lang="scss">
.mine {
	.top {
		width: 100%;
		height: 360rpx;
		background: #f44242;
		color: #fff;

		.top_title {
			font-size: 36rpx;
			text-align: center;
		}
		.top_con {
			margin-top: 80rpx;
			.left {
				.avatar {
					height: 88rpx;
					width: 88rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 30rpx;
				}
				.nikename {
					font-size: 32rpx;
				}
				.role {
					width: 160rpx;
					height: 38rpx;
					background: #fff;
					border-radius: 44rpx;
					margin-top: 14rpx;

					image {
						width: 26rpx;
						height: 28rpx;
					}

					text {
						font-size: 24rpx;
						color: #e94941;
					}
				}
			}

			.right {
				text {
					font-size: 28rpx;
				}
			}
		}
	}

	.middle,
	.list {
		width: 690rpx;
		background: #fff;
		margin: 0 auto;
		border-radius: 6rpx;
		color: #656565;
		font-size: 28rpx;
	}

	.middle {
		margin: -50rpx auto 0;
		height: 160rpx;
		text {
			margin-top: 30rpx;
			color: #656565;
			font-size: 28rpx;
		}
	}

	.list {
		margin-top: 20rpx;
		.list_con {
			height: 106rpx;
			border-bottom: 1rpx solid #f9f9f9;
			padding: 0 30rpx;
			box-sizing: border-box;

			text {
				margin-left: 24rpx;
			}
		}
		.arrow {
			color: #343434;
			font-size: 30rpx;
		}
	}
}
</style>