horzi_rai_wxa/pages/my/my.vue

<template>
	<view class="container my-container" v-if="haveData">
		<view class="my-top-info">
			<image :src="userInfo.Headimgurl" class="avatar" v-if="isLogin&&userInfo.Headimgurl"></image>
			<image src="@/static/img/default_avatar.png" class="avatar" v-else></image>
			<view class="right-section">
				<template v-if="isLogin">
					<view class="info-item space-item text_oneLine" v-if="userInfo.Mobile || userInfo.Email">
						<view class="item-label" decode="true">{{userInfo.Mobile?'手机号':'邮&nbsp;&nbsp;&nbsp;箱'}}</view>
						：{{userInfo.Mobile || userInfo.Email}}
					</view>
					<view class="info-item space-item text_oneLine">
						<view class="item-label" decode="true">姓&nbsp;&nbsp;&nbsp;名</view>：{{userInfo.RealName || '暂无'}}
					</view>
					<view class="info-item text_oneLine">
						<view class="item-label" decode="true">公&nbsp;&nbsp;&nbsp;司</view>：{{userInfo.CompanyName || '暂无'}}
					</view>
				</template>
				<button class="no-log" v-else @click="loginHandle">{{login_txt}}</button>
			</view>
		</view>
		<view class="auth-cont">
			<image src="@/static/img/auth_bg.png" class="auth_bg"></image>
			<view class="auth-info">
				<template v-if="isLogin">
					<text class="info-label">我的权限：</text>
					<scroll-view
					scroll-x="true" 
					scroll-with-animation 
					class="auth-ul" v-if="userInfo.HasPermission===0">
						<!-- <view class="auth-ul" > -->
							<text class="auth-li" v-for="item in authList" :key="item">{{item}}</text>
						<!-- </view> -->
					</scroll-view>
					<block v-else>
						<text class="no-auth">{{userInfo.HasPermission === 3?'权限申请已提交，请等待审核':'暂未开通行业权限'}}</text>
						<button class="auth-btn" @click="applyAuth" v-if="userInfo.HasPermission != 3">申请开通</button>
					</block>
				</template>
				<text class="notlog-tip" v-else>让好的研究不再是奢侈品</text>
			</view>
		</view>
		<view class="my-bot-cont">
			<view class="list-item border_bottom" v-for="type in typeArr" :key="type" @click="itemClickHandle(type)">
				<text>{{type}}</text>
				<u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import { Mine,checkToken,User } from '@/config/api.js'
	let app = getApp()
	export default {
		data() {
			return {
				isLogin:false,//是否绑定且授权
				login_txt:'',
				haveData:null,//显示页面
				typeArr:['我的收藏','访谈申请','浏览历史','优化建议'],
				typeObj:new Map([
					['我的收藏','myCollection'],
					['访谈申请','applyInterview'],
					['浏览历史','browseHistory'],
					['优化建议','advice']
				]),
				userInfo:{},
				authList:[],
			};
		},
		onShow() {
			this.$store.dispatch('checkHandle').then(res => {
				this.haveData = true;
				app.globalData.isAuth = res.IsAuth;
				app.globalData.isBind = res.IsBind;
				if((!res.IsAuth) && (!res.IsBind)) { //已授权已绑定
					this.isLogin = true;
					this.getUser()
				}else {
					this.login_txt = res.IsAuth? '点击登录' : '绑定联系方式';
					this.isLogin = false;
				}
			})
		},
		methods:{
			/* 检查状态 */
			/* 获取用户信息 */
			getUser() {
				Mine.getInfo().then(res => {
					if(res.Ret === 200) {
						this.authList = res.Data.PermissionName&&res.Data.PermissionName.split(',');
						this.userInfo = res.Data;
						res.Data.Mobile && this.$db.set('mobile',res.Data.Mobile); 
					}
				})
			},
			/* 点击登录 检验是否绑定或是否授权*/
			loginHandle() {
				/* 先授权再绑定 */
				if(app.globalData.isAuth) {
					uni.navigateTo({
						url:'/pages/authGuide/authGuide'
					})
				}else {
					app.globalData.isBind && uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			},
			/* 申请开通权限 */
			applyAuth() {
				/* 查看是否是潜在用户 */
				this.userInfo.HasPermission === 1 
				? User.applyTry({
						ApplyMethod:3
					}).then(res => {
						if(res.Ret === 200) {								
							uni.navigateTo({
								url:"/pages/applyResult/applyResult"
							})
						}
					})
				:	this.userInfo.HasPermission === 2
				?  uni.navigateTo({
						url:"/pages/applyTrial/applyTrial"
					})
				:	this.userInfo.HasPermission === 3
				?  uni.showModal({
						title: '',
						content: '您已经提交过申请了，请耐心等待',
						showCancel:false,
						confirmColor:'#365595',
						success: function (res) {
						}
					})
				:''
			},
			/* 路径跳转 */
			itemClickHandle(type) {
				/* 是否登录 */
				if(this.isLogin) { 
					let path = this.typeObj.get(type);
					uni.navigateTo({
						url:`/pages/${path}/${path}`
					});
				}else {
					this.loginHandle();
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
.my-container {
	background-color: #fff;
	.my-top-info {
		padding: 30rpx 34rpx;
		display: flex;
		align-items: center;
		.avatar {
			width: 168rpx;
			height: 168rpx;
			border-radius: 50%;
			margin-right: 45rpx;
			border:1rpx solid #ccc;
		}
		.right-section {
			font-size: 34rpx;
			.info-item{
				width: 450rpx;
				.item-label {
					// text-align: justify;
					// text-align-last: justify;
					display: inline-block;
					// width: 110rpx;
				}
				&.space-item {
					margin-bottom: 10rpx;
				}
			}
			.no-log {
				// width: 139rpx;
				padding:0 20rpx;
				height: 56rpx;
				background-color: #FFF;
				color: #3385FF;
				font-size: 24rpx;
				border: 2rpx solid #3385FF;
			}
		}
	}
	.auth-cont {
		width: 682rpx;
		height: 153rpx;
		margin: 38rpx auto ;
		padding: 24rpx 36rpx;
		position: relative;
		color: #4A4A4A;
		.auth_bg {
			width: 682rpx;
			height: 153rpx;
			position: absolute;
			left: 0;
			top: 0;
		}
		.auth-info {
			position: relative;
			.notlog-tip {
				font-size: 30rpx;
				color:#333333;
				line-height: 105rpx;
				text-align: center;
			}
			.info-label {
				font-size: 34rpx;
			}
			.auth-ul {
				// display: flex;
				// align-items: center;
				// flex-wrap: wrap;
				width: 100%;
				white-space: nowrap;
				margin-top: 15rpx;
				color: #333;
				.auth-li {
					display: inline-block;
					padding: 6rpx 20rpx;
					border: 1rpx solid #333333;
					border-radius: 4rpx;
					font-size: 24rpx;
					margin-right: 20rpx;
					&:last-child {
						margin-right: 0;
					}
				}
			}
			.no-auth {
				font-size: 28rpx;
				margin-top: 20rpx;
			}
			.auth-btn {
				width: 139rpx;
				height: 56rpx;
				background:rgba(255,255, 255, 0.1);
				color: #3385FF;
				font-size: 24rpx;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				line-height: 56rpx;
				border: 2rpx solid #3385FF;
			}	
		}
	}
	.my-bot-cont {
		.list-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 34rpx;
			color: #4A4A4A;
			padding: 33rpx 34rpx;
			.icon-area {
				width: 100rpx;
			}
		}
	}
}
</style>