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 ">
				<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 " @tap="onNavEditInfoPage">
					<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="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>
				<text
					class="text-more text-13px text-gray text-cut text-lines1 margin-12px ">{{signature!=='null'?signature:'111111111'}}</text>
			</view>
			<list class="list-wrapper">
				<cell v-for="item in lists" :key="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>
				</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'
		]),
		data() {
			return {
				lists: sideBarData.getSideBarList,
				signature: null
			}
		},
		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']),
			hideDrawer() {
				uni.getCurrentSubNVue().hide('auto')
			},
			clickitem(e,_pageType) {
				// uni.$emit('drawer-page', e);
				this.onNavListItem(_pageType);
			},
			// 跳转编辑信息页面
			onNavEditInfoPage() {
				uni.navigateTo({
					url: '../../my-page/userInfo/userInfo',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//侧边栏对应页面跳转
			onNavListItem(pageType) {
				// console.log(pageType);
				if (pageType == "my") {
					this.onNavMyPage();
					return;
				}
				// 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 "feedback":
						url = '/pages/login-page/feedback/feedback';
						break;
					case "friend":
						url = '/pages/friend-page/main/main';
						break;
				}
				uni.navigateTo({
					url: url,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			
			/**
			 * 退出登录
			 */
			onExit() {
				console.log("退出登录");
				// 清除token，退回首页
				this.delectToken({
					success: (res) => {
						uni.reLaunch({
							url: '../../login-page/login/login'
						})
					}
				});
			}
		}
	}
</script>

<style src="@/util/util-css/main-nvue.css"></style>
<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: 13px;
		height: 13px;
	}

	/* 自定义导航栏的图片大小 */
	.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>