ProAdvanced/components/side-bar/side-bar.vue

<template>
	<!-- @touchmove.stop.prevent="moveHandle" -->
	<view class="content">
		<view class="side-left" :data-position="pos" :prop="pos" :change:prop="side.sizeReady" @touchstart="side.touchstart"
		 @touchmove="side.touchmove" @touchend="side.touchend" @change="change">
			<!-- 侧边栏 bshow-->
			<view class="side-mask" v-if="bshow" @tap="closeSide"></view>
			<view class="side-handle">
				<view id="my-side-dialog" class="basis-xl bg-white selector-query-hock" :class="bOpen?'side-pointer':''" @tap.stop="">
					<scroll-view scroll-y="true" class="selector-query-hock" style="height: 100%;width: 100%;">
						<view class="cu-list menu text-left ">
							<view class="bg-image text-white" style="margin-bottom: 60rpx; padding-bottom: 60rpx;">
								<view class="blank-space"></view>
								<view class="flex-sub text-center">
									<view class="cu-avatar-group" style="position: relative; margin: 10rpx;">
										<view class="cu-avatar round " style="width: 146rpx;height: 146rpx;" :style="[{ backgroundImage:'url('+avatarUrl+')' }]"></view>

									</view>

									<!-- <view class="text-xsl">
										<image class="avatar-img bg-black" mode="aspectFit" :src="avatarUrl"></image>
									</view> -->
									<view class="flex justify-center align-center" @tap="onNavEditInfoPage">
										<view style="font-weight: bold; color: #000000; font-size: 22px;">{{userName}}</view>
										<image style="width: 34rpx;height: 34rpx; margin-left: 22rpx;" src="/static/sideEdit.png"></image>
									</view>
								</view>
								<view class="flex flex-direction justify-center align-center">
									<view class="bg-days margin">{{days}}天</view>
									<view class="text-more text-gray">
										{{signature!=='null'?signature:''}}
									</view>
								</view>

							</view>

							<view class="cu-item myarrow margin-view" v-for="(item,index) in sideList" :key="index" @tap="onNavListItem(item.page_type)">
								<view class="content flex align-center margin-top margin-bottom">
									<image :src="item.url" style="width: 34rpx;width: 34rpx; margin-bottom: 2rpx;margin-right:44rpx;" mode="aspectFit"></image>
									<text class="text-black text-16px text-bold">{{item.name}}</text>
								</view>

							</view>

							<view class="flex justify-center align-center " style="margin: 60px 0px;">
								<button class="cu-btn round text-16px line-mGrey" style="width: 250rpx; height: 80rpx;" @tap="onExit"> <span
									 style="color:#000000;">退出登录</span> </button>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>
<script src="./side-wxs.wxs" module="side" lang="wxs"></script>
<script>
	import sideBarData from '@/components/side-bar/sideBar.js';
	import config from '@/common/config.js'
	import reqUtil from '@/util/util-js/requstUtil.js';
	import mp from './mp'

	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		mixins: [mp],

		computed: mapState(['bCanvasShow', 'token', 'userName', 'avatarUrl', 'days', 'signature', 'weight',
			'height'
		]),



		data() {
			return {
				sideList: sideBarData.getSideBarList,
				bshow: false,
				bOpen: false,
				left: 0,
				/**
				 * 变量控制开关
				 */
				show: {
					type: Boolean,
					default: false
				}
			}
		},
		mounted() {
			// console.log("******",this.bshow);
		},
		methods: {
			...mapMutations(['loginUserInfo', 'onLuanchLogin', 'delectToken']),
			// 跳转我的页面
			onNavMyPage() {
				uni.navigateTo({
					url: '../../my-page/homepage/homepage',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});

			},
			// 跳转编辑信息页面
			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;
				}
				uni.navigateTo({
					url: url,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

			/**
			 * 退出登录
			 */
			onExit() {
				console.log("退出登录");
				// 清除token，退回首页
				this.delectToken({
					success: (res) => {
						uni.reLaunch({
							url: '../../login-page/login/login'
						})
					}
				});
			},

			showModal() {
				// console.log("showModal:",this.show);
				this.bshow = true;
				this.show = true;
			},
			hideModal() {
				// console.log("hideModal");
				this.bshow = false;
				this.show = false;
				this.$store.state.bCanvasShow = true;
				this.$emit("hideSideBar");
			},

			change(e) {
				// console.log("side change:", e);

				if (e.close) {
					this.hideModal();
					this.bOpen = false;
				} else {
					this.bOpen = true;
					this.show = true;
				}
			},
			closeSide() {
				if (!this.bOpen) return;
				// console.log("close side.");
				this.show = false;
			},
			moveHandle() {}
		}
	}
</script>

<style>
	.blank-space {
		height: 150rpx;
	}

	.bg-image {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		background-image: url(../../static/sidebar_white.png);
		opacity: 1;
	}

	.bg-days {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		background-image: url(../../static/bg-days.png);
		opacity: 1;
		width: 126rpx;
		height: 48rpx;
		font-size: 11px;
		line-height: 48rpx;
		text-align: right;
		padding-right: 14rpx;
	}

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

	.text-more {
		/* width: 200px; */
		font-size: 12px;
		line-height: 20px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box; //必须结合的属性，将对象作为弹性伸缩盒子模型显示
		-webkit-line-clamp: 2; //控制文本的行数
		-webkit-box-orient: vertical; //必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 
		/* border: 1rpx solid #aaa; */
	}

	.text-cut {
		font-size: 14px;
		line-height: 30px;
		width: 100px;
		height: 100px;
		/* font-weight: bold; */
		border: 1rpx solid #aaa;
		display: -webkit-box;
		/* 允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行 */
		word-break: break-all;
		/* 设置或检索伸缩盒对象的子元素的排列方式 */
		-webkit-box-orient: vertical;
		/* 可显示的最多行数 */
		-webkit-line-clamp: 2;
		/* 超出的文本内容隐藏 */
		overflow: hidden;
		/* 超出显示省略号 */
		text-overflow: ellipsis;
		/* background: rgba(0, 0, 0, 0.3); */
	}

	.margin-view {
		margin: 10px 114rpx 10px 70rpx;
	}

	.side-mask {
		display: flex;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1100;
		outline: 0;
		text-align: center;
		overflow-x: hidden;
		overflow-y: auto;
		backface-visibility: hidden;
		background: rgba(0, 0, 0, 0.6);
		opacity: 1;
		pointer-events: auto;
	}

	.side-handle {
		display: flex;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		outline: 0;
		text-align: center;
		backface-visibility: hidden;
		opacity: 1;
		pointer-events: none;
	}

	.side-opacity {
		opacity: 1;
	}

	.side-pointer {
		pointer-events: auto;
	}

	/* .side-handle::before {
		content: "\200B";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	} */


	.side-left {
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		/* border: 1rpx solid #007AFF; */
		width: 10px;
		height: 100%;
		z-index: 1110;
	}


	.ani {
		transition-property: transform;
		transition-duration: 0.3s;
		transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	}

	/* 开始设置一个x偏移值 */
	#my-side-dialog {
		transform: translateX(-500px);
		-webkit-transform: translateX(-500px)
	}
</style>