ProAdvanced/platform/app-plus/subNVue/drawer.nvue

<template>
	<div>
		<scroller :style="{ height: systemInfo.windowHeight + 'px' }">
			<view class="drawerBg">
				<image style="width: 750rpx;height: 672rpx;" src="../../../static/sidebar_white.png"></image>
			</view>
			<view class="blank-space"></view>
			<view class="flex justify-center align-center " @tap="onNavEditInfoPage">
				<view style="width: 146rpx;height: 146rpx; border-radius: 45px;">
					<image class="avatar-img bg-black" mode="aspectFit" :src="avatarUrl">
					</image>
				</view>

				<view class="flex flex-direction-row align-center margin-12px ">
					<text class="text-22px text-bold">{{userName}}
					</text>
					<image style="width: 34rpx;height: 34rpx; margin-left: 22rpx;" src="/static/sideEdit.png"></image>
				</view>
			</view>
			<view class="flex justify-center align-center  position-relative" style="height: 256rpx;">
				<view class="position-absolute-center-top">
					<view class="pos-top-center ">
						<image class="bg-days" src="../../../static/bg-days.png"></image>
					</view>
					<text class="text-12px text-right text-white bg-days-text">{{days}}天</text>
				</view>
				<text class="text-more text-13px text-grey text-cut text-lines1">{{signature!=='null'?signature:''}}</text>
			</view>
			<list class="list-wrapper">
				<cell v-for="item in lists" :key="item.id">
					<block v-if="((1==item.id||2==item.id)&&(versionCodeState.showGame||versionCodeState.showVideo)) || (1!=item.id&&2!=item.id)">
						<div class="text-wrapper" @click="clickitem(item.id,item.page_type)">
							<view class="flex flex-direction-row align-center">
								<image style="width: 34rpx;height:34rpx; margin-right: 36rpx;" :src="item.url"></image>
								<text class="text-15px text-medium">{{item.name}}</text>
							</view>
							<text class="icon">&#xe583;</text>
						</div>
					</block>
				</cell>
			</list>
			<div class="flex justify-center align-center" style="margin-top: 140rpx; margin-bottom: 140rpx">
				<div class="close-drawer" @click="onExit">
					<text class="text-16px" style="color: #6B6B6B;">退出登录</text>
				</div>
			</div>
		</scroller>
	</div>
</template>

<script>
	import sideBarData from '@/components/side-bar/sideBar.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: mapState(['bCanvasShow', 'token', 'userName', 'avatarUrl', 'days', 'signature', 'weight',
			'height', 'systemInfo' , 'versionCodeState'
		]),
		data() {
			return {
				lists: sideBarData.getSideBarList
			}
		},
		beforeCreate() {
			const domModule = weex.requireModule('dom')
			domModule.addRule('fontFace', {
				fontFamily: "unibtn",
				'src': "url('../../../static/font/uni.ttf')"
			});
		},
		created() {
			// for (let i = 0; i < 5; i++) {
			// 	this.lists.push({
			// 		id: i,
			// 		name: 'Item' + i,
			// 	});
			// }
		},
		methods: {
			...mapMutations(['loginUserInfo', 'onLuanchLogin', 'delectToken', 'showPopupById']),
			hideDrawer(callback) {
				uni.getCurrentSubNVue().hide('auto', 200);

				setTimeout(() => {
					if (callback)
						callback();
				}, 300)
			},
			clickitem(e, _pageType) {
				// uni.$emit('drawer-page', e);
				this.onNavListItem(_pageType);
			},
			// 跳转编辑信息页面
			onNavEditInfoPage() {
				this.hideDrawer(() => {
					uni.navigateTo({
						url: '../../my-page/userInfo/userInfo',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				});
			},
			//侧边栏对应页面跳转
			onNavListItem(pageType) {
				this.hideDrawer(() => {
					if (pageType == "my") {
						this.onNavMyPage();
						return;
					}
					if (pageType == "signBoard") {
						this.showPopupById({
							type: 'signIn',
							item: null
						});
						return;
					}
					let url = '';
					switch (pageType) {
						case "recently":
						case "watchGame":
							url = '/pages/personal-page/list/list?type=' + pageType;
							break;
						case "ranking":
							url = '/pages/game-page/game-ranking/game-ranking';
							break;
						case "settings":
							url = '/pages/platform-page/settings/settings';
							break;
						case "friend":
							url = '/pages/friend-page/main/main';
							break;
					}
					uni.navigateTo({
						url: url,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				});
			},

			/**
			 * 退出登录
			 */
			onExit() {
				uni.showToast({
					title: '正在退出登录...',
					icon: 'loading',
					mask: true,
					duration: 5000
				})
				this.hideDrawer(() => {
					// 清除token，退回首页
					this.delectToken({
						success: (res) => {
							uni.hideToast();
							uni.reLaunch({
								url: '../../login-page/login/login'
							})
						}
					});
				});


			}
		}
	}
</script>

<style>
	.wrapper {
		flex-direction: column;
		flex: 1;
		text-align: center;
		padding: 60rpx 0rpx 0rpx 0rpx;
		background-color: #FFFFFF;
	}

	.drawerBg {
		position: absolute;
		top: 0;
		right: 0;
		/* bottom: 0; */
		left: 0;
		justify-content: center;
		align-items: center;
	}



	.blank-space {
		height: 150rpx;
	}


	.avatar-img {
		width: 146rpx;
		height: 146rpx;
		/* border: 8rpx solid rgba(255, 255, 255, 1); */
		border-radius: 50%;
	}

	.bg-days {
		width: 126rpx;
		height: 48rpx;
	}

	.bg-days-text {
		height: 48rpx;
		width: 110rpx;
		line-height: 48rpx;
	}

	.text-more {
		width: 200px;
		line-height: 20px;
		height: 20px;
	}

	/* 自定义导航栏的图片大小 */
	.png-more {
		width: 20px;
		height: 20px;
	}


	.nav-text {
		color: #8f8f94;
		/* #ifndef APP-PLUS-NVUE */
		margin-bottom: 40px;
		/* #endif */
		/* #ifdef APP-PLUS-NVUE */
		margin-bottom: 40rpx;
		/* #endif */
	}

	.list-wrapper {
		/* margin-top: 120rpx; */
		height: 540rpx;
		/* #ifdef APP-PLUS-NVUE */
		/* height: 500rpx; */
		/* #endif */
		/* #ifndef APP-PLUS-NVUE */
		/* height: 500px; */
		/* #endif */
	}

	.text-wrapper {
		justify-content: center;
		/* border-bottom-style: solid;
		border-bottom-width: 1rpx;
		border-bottom-color: rgba(0, 0, 0, .2); */
		margin-bottom: 54rpx;
		margin-left: 140rpx;
		margin-right: 98rpx;
		/* padding-bottom: 15rpx; */
	}

	.close-drawer {
		display: flex;
		justify-content: center;
		/* align-content: center; */
		align-items: center;
		background-color: #f8f8f8;
		width: 300rpx;
		padding: 15rpx;
		border-radius: 40rpx;
		border-style: solid;
		border-width: 1rpx;
		border-color: rgba(229, 229, 229, 1);
	}

	.icon {
		position: absolute;
		right: 0;
		color: #D1D1D1;
		font-family: unibtn;
		font-size: 30rpx;
		font-weight: 400;
	}
</style>