hongze_yb_xcx/pages/user/user.vue

<template>
	<view class="user-page">
		<view class="flex base-info-wrap">
			<view class="avatar">
				<open-data type="userAvatarUrl"></open-data>
			</view>
			<view>
				<view style="margin-top:6px;margin-bottom:18px">手机号：{{userInfo.mobile}}</view>
				<view>姓名：{{userInfo.real_name}}</view>
			</view>
		</view>
		<view class="main-info-wrap">
			<view class="title">我的信息</view>
			<view class="info-list">
				<view class="flex item">
					<text class="label">公司名称：</text>
					<text>{{userInfo.company_name}}</text>
				</view>
				<view class="flex item">
					<text class="label">品种权限：</text>
					<template v-if="userInfo.permission_list.length==0">
						<text>暂无权限</text>
						<van-button custom-class="apply-btn" plain round color="#DDAA6A" size="small" @click="handleGoApplyPermission">立即申请</van-button>
					</template>
				</view>
			</view>
			<view class="tips" v-if="userInfo.permission_list.length!=0">服务截止日期：2022.11.11</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
			
		},
		
		methods: {
			handleGoApplyPermission(){
				uni.navigateTo({
					url:"/pages-applyPermission/applyPermission"
				})
			}
		}
	}
</script>

<style lang="scss">
	.base-info-wrap{
			width: 100%;
			height: 393rpx;
			background-color: #373634;
			padding-top: 99rpx;
			padding-left: 50rpx;
			color: $global-text-color-white;
			font-size: $global-font-size-lg;
			font-weight: bold;
			.avatar{
				width: 154rpx;
				height: 154rpx;
				border-radius: 16rpx;
				overflow: hidden;
				margin-right: 40rpx;
			}
		}
	.main-info-wrap{
		width: calc(100% - 68rpx);
		min-height: 561rpx;
		margin-left: auto;
		margin-right: auto;
		margin-top: -30rpx;
		padding: 30rpx;
		background-color: $global-bg-color;
		box-shadow: 0px 3rpx 12rpx rgba(0, 0, 0, 0.16);
		border-radius: 16rpx;
		.title{
			font-size: $global-font-size-lg;
			font-weight: bold;
			padding-bottom: 30rpx;
			border-bottom: 1px solid $global-border-color;
		}
		.tips{
			font-size: $global-font-size-sm;
			color: $global-text-color-999;
		}
	}
	.info-list{
		min-height: 300rpx;
		.item{
			margin-top: 40rpx;
			.apply-btn{
				font-size: $global-font-size-sm;
				height: 48rpx;
				margin-left: 20rpx;
			}
		}
	}
</style>