sugarpark-mini-program/pagesSub/setting/setting.vue

<template>
	<view class="container">
		<view id="topnav" class="topnav flex-between"  :style="{'height':`${topbarOffsetHeight-statusBarHeight}px`,'padding-top':`${statusBarHeight}px`}">
			<view class="nav-item flex-center" @click="back">
				<image :src="`${assetsUrl}back.png`" mode="widthFix" class="nav-img"></image>
			</view>
			<view class="nav-text font32 fw600">
				{{topbarTitle}}
			</view>
			<view class="nav-item"></view>
		</view>
		<view class="setting-box flex-between" :style="{'margin-top':`${topNavHeight+15}px`}">
			<view class="setting-item flex-between" @click="toBlackList">
				<view class="setting-text font28 fw600">
					黑名单
				</view>
				<image :src="`${assetsUrl}setting-more.png`" mode="widthFix" class="setting-icon"></image>
			</view>
			<view class="setting-item flex-between" @click="loginOut">
				<view class="setting-text font28 fw600">
					退出登录
				</view>
				<image :src="`${assetsUrl}setting-more.png`" mode="widthFix" class="setting-icon"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topbarIcon:'back',
				topbarTitle:'设置',
				assetsUrl:this.$util.assetsUrl,
				topNavHeight:0,
			};
		},
		mounted() {
			this.computedScollviewHeight();
		},
		computed: {
			statusBarHeight() {
				return this.$store.state.statusBarHeight;
			},
			topbarOffsetHeight() {
				return this.$store.state.topbarOffsetHeight;
			},
			userInfo(){
				return this.$store.state.userInfo||JSON.parse(uni.getStorageSync('userInfo'))
			}
		},
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			toBlackList(){
				uni.navigateTo({
					url:'../setting/blacklist'
				})
			},
			/**
			 * 计算scroll高度
			 */
			computedScollviewHeight() {
				let query = uni.createSelectorQuery().in(this);
				let heightLeaf =0;
				query.select('#topnav').boundingClientRect(data => {
					this.topNavHeight=data.height;
					heightLeaf += data.height;
				}).exec(() => {
					let sysInfo = uni.getSystemInfoSync();
					this.scrollHeight = sysInfo.windowHeight - heightLeaf;
				});
			
			},
			loginOut(){
				uni.showModal({
					title:'退出登录',
					content:'退出登录后将清除所有本机数据，下次登录自动登录，是否继续？',
					confirmColor:'#6C52F4',
					confirmText:'继续',
					success:(res)=>{
						if(res.confirm){
							uni.$TUIKit.logout();
							uni.$TUIKit.destroy();
							uni.setStorageSync('token','');
							uni.setStorageSync('LL_Ukn','');
							uni.setStorageSync('userInfo','');
							uni.setStorageSync('user','');
							uni.setStorageSync('isLogin','no');
							uni.reLaunch({
								url:'/pages/login/login'
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	width: 100vw;
	height: 100vh;
	background-color: $bgcolor1;
	overflow: hidden;
	.topnav {
		padding: 0 10rpx;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		z-index: 100;
		background-color: $bgcolor1;
		.nav-item{
			width: 40rpx;
			height: 40rpx;
			margin-left: 16rpx;
			
			.nav-img{
				width: 40rpx;
				height: 40rpx;
			}
		}
		.nav-text{
			flex: 1;
			color: $fontcolor5;
			height: 40rpx;
			text-align: center;
		}
	}
	.setting-box{
		margin: 16rpx;
		
		
		
		flex-direction: column;
		.setting-item{
			width: 100%;
			height: 112rpx;
			padding: 0rpx 32rpx;
			box-sizing: border-box;
			margin-bottom: 10rpx;
			background-color: $bgcolor3;
			border-radius: 8rpx;
			.setting-text{
				color: $fontcolor5;
			}
			.setting-icon{
				width: 24rpx;
				height: 24rpx;
			}
		}
	}
}
</style>