lookcommon_course/pages/user/index.vue

<template>
	<view>
		<view class="user-info">
			<view class="left justify-start align-center" @click="openPersonInfo()">
				<!-- <view class="head-img">
					<image :src="user.avatar==null?'/static/images/detault_head.jpg':user.avatar" mode="aspectFill"></image>
				</view> -->
				<u-avatar :src="avatar" ></u-avatar>
				<view class="name-phone ml20">
					<view class="name">{{user.nickname?user.nickname:"游客01"}}</view>
					<!-- <view class="phone" v-if="user.phone!=''">{{utils.parsePhone(user.phone)}}</view> -->
				</view>
			</view>
			<view class="right">
			</view>
		</view>
		<view class="p20" style="margin-top: 40rpx" v-if="isOpen">
		<!-- <view class="p20" style="margin-top: 40rpx"> -->
			<view class="menu-box" style="margin-top: -40rpx">
				<view class="title-box">
					<image class="icon" :src="imgPath + '/app/manergevip/chang.png'"></image>
					<view class="title">常用功能</view>
				</view>
				<view class="line"></view>
				<view class="menus">
					<view class="menu-item" @click="navTo()">
						<image :src="imgPath + '/app/manergevip/chang.png'"></image>
						<view class="m-name">管理工具</view>
					</view>
				</view>
			</view>
		</view>
		<view class="func-box" style="margin-top: 20rpx;">
			<view class="func-left-box btn-w">
				<button plain class="btn-ww" openType="share">
					<image src="/static/images/share.png"></image>
					<text>我要分享</text>
				</button>
			</view>
			<view class="rightArrow-box">
				<text></text>
				<image src="/static/images/rightArrow.png"></image>
			</view>
		</view>
		<view @tap="clearCache" class="func-box">
			<view class="func-left-box">
				<image src="/static/images/delete.png"></image>
				<text>清除缓存</text>
			</view>
			<view class="rightArrow-box">
				<image src="/static/images/rightArrow.png"></image>
			</view>
		</view>
		
		<view class="func-box bs" data-url="support">
			<view class="func-left-box">
				<image src="/static/images/about.png"></image>
				<text>关于</text>
			</view>
			<view class="rightArrow-box">
				<text>版本号 v{{ version }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {queryIsTownOn} from "@/api/class.js";
	export default {
		data() {
			return {
				avatar:'',
				show:false,
				title:'提示',
				content:'确认退出吗？',
				usertoken:'',
				version:"1.0",
				isOpen:false
			}
		},
		computed: {
		    imgPath() {
		      return this.$store.state.imgpath
		    }
		},
		mounted() {
		   this.getCheckAppId();
		},
		onLoad() {
			const accountInfo = wx.getAccountInfoSync();
			this.version = accountInfo.miniProgram.version ;
		},
		methods: {
			openH5(type){
				uni.navigateTo({
					url:"/pages/user/userAgreement?type="+type
				})
			},
			clearCache: function () {
			    uni.clearStorage();
			    uni.showToast({
			        title: '清理成功',
			        icon: 'none',
			        duration: 2000
			    });
			},
			getCheckAppId() {
				console.error('获取AppID', uni.getAccountInfoSync());
			      try {
			        const accountInfo = uni.getAccountInfoSync();
			        if(accountInfo && accountInfo.miniProgram) {
					   let appId=accountInfo.miniProgram.appId;
					   this.queryIsTownOn(appId)
			        }
			      } catch(e) {
			          console.error('获取AppID失败', e);
			      }
			},
			queryIsTownOn(appId){
				queryIsTownOn({"appId":appId}).then(res=>{
					if(res.date=="001"){
						this.isOpen=true;
					}else{
						this.isOpen=false;
					}
				});
			},
			navTo(urls){
				if(!uni.getStorageSync('ManageToken')){
					uni.navigateTo({
						url:'/pages_manage/login'
					})
				}else{
					uni.navigateTo({
						url:'/pages_manage/index'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.menu-box {
		box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
		width: 100%;
		margin-top: 30rpx;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 15rpx;
		.title-box {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			.icon {
				width: 40rpx;
				height: 40rpx;
			}
			.title {
				margin-left: 10rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				color: #111;
			}
		}
		.line {
			margin-top: 15rpx;
			height: 0.5rpx;
			width: 100%;
			background-color: #efefef;
		}
		.menus {
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
		}
		.menu-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 25%;
			margin-bottom: 20rpx;
			image {
				width: 60rpx;
				height: 60rpx;
			}
			.m-name {
				margin-top: 10rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				color: #111;
			}
		}
	}
.user-info{
	padding: 40upx 30upx 0 30upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.left{
		position: relative;
		display: flex;
		.head-img{
			width: 120upx;
			height: 120upx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 30upx;
			border: 4upx solid #FFFFFF;
			box-shadow: 0px 5px 15px 2px rgba(0,0,0,0.1);
			image{
				width: 100%;
				height: 100%;
			}
		}
		.name-phone{
			// padding-top: 15upx;
			.name{
				font-size: 40upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #111111;
				line-height: 1;
			}
			.phone{
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 1;
				margin-top: 30upx;
			}
		}
	}
	.right{
		display: flex;
		align-items: center;
		justify-content: center;
		.msg-box{
			margin-left: 10upx;
			width: 44upx;
			height: 44upx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.set{
			
			width: 44upx;
			height: 44upx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	
}
.used-tools{
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 16upx;
		padding: 40upx 30upx;
		
		.title{
			font-size: 34upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #222222;
			line-height: 1;
		}
		.tools-list{
			margin-top: 50upx;
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			.item{
				box-sizing: border-box;
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-bottom: 50upx;
				position: relative;
				image{
					width: 50upx;
					height: 50upx;
				}
				.text{
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #111111;
					line-height: 1;
					margin-top: 10upx;
				}
				.contact-btn{
					display: inline-block;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					opacity: 0;
				}
			}
		}
	}
	.func-box {
		box-sizing: border-box;
		width: 100%;
		padding: 30rpx 25rpx;
		background-color: #fff;
	}
	
	.func-box,
	.rightArrow-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.rightArrow-box image {
		width: 35rpx;
		height: 35rpx;
	}
	
	.rightArrow-box text {
		font-size: 26rpx;
		color: #5f5f5f;
		margin-right: 10rpx;
	}
	
	.func-left-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0rpx;
		margin: 0rpx;
		height: 40rpx;
	}
	
	.func-left-box image {
		width: 35rpx;
		height: 35rpx;
	}
	
	.func-left-box text {
		font-size: 30rpx;
		color: #1b1b1b;
		margin-left: 20rpx;
	}
	
	.func-left-box button {
		border: none;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0rpx;
		margin: 0rpx;
	}
	
	.btn-w {
		width: 80vw;
	}
	
	.btn-ww {
		width: 100%;
		text-align: left;
		display: flex !important;
		justify-content: flex-start !important;
	}
	
	.admin {
		background-color: #fff;
		box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.05);
	}
	
	.welcome {
		padding: 20rpx 25rpx;
		font-size: 26rpx;
		color: #1b1b1b;
		border-bottom: 1rpx solid #d6eaf7;
	}
	
	.func,
	.welcome {
		width: 100%;
		box-sizing: border-box;
	}
	
	.func {
		padding: 25rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.func-item {
		width: 25%;
		box-sizing: border-box;
	}
	
	.num {
		font-size: 40rpx;
		font-weight: 700;
		color: #3452e5;
	}
	
	.name,
	.num {
		width: 100%;
		text-align: center;
	}
	
	.name {
		margin-top: 10rpx;
		font-size: 26rpx;
	}
	
	.line {
		width: 100%;
		height: 20rpx;
		background-color: #f3f4f6;
	}
	
	.bs {
		box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.05);
	}
</style>