FE-lab-xcx/pages/views/supplierCylinderManagement/mine.vue

<template>
	<view class="supplierCylinderManagement-mine">
		<!-- 背景渐变色 -->
		<view class="back-img-box"></view>
		<!-- 信息面板 -->
		<view class="user-info-box">
			<view class="left-img-box">
				<img v-if="userData.avatar" class="avatar-img" :src="baseUrl+userData.avatar">
				<img v-else class="avatar-img" :src="imagesUrl('commonality/icon_01.png')">
				<!-- <img class="edit-img" :src="imagesUrl('commonality/icon_wd_bj@1x.png')"> -->
			</view>
			<view class="right-name-box">
				<view class="right-name-top-box">
					<view>{{userData.userName}}</view>
				</view>
				<view class="right-name-bottom-box">{{userData.deptName}}</view>
			</view>
		</view>
		<view class="null-flex-p"></view>
		<view class="out-button" @click="clickOut">退出登录</view>
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		logout,
		systemUserProfile,
		studentinfoFacemy,
		creditAppletGetMyPointsLogInfo,
	} from '@/pages/api/index.js'

	import {
		pageRestrictVerify
	} from '@/utils/index'
	import {
		tabBar
	} from '@/pages/views/supplierCylinderManagement/tabBar.vue'
	export default {
		name: "supplierCylinderManagement-mine",
		components: {
			tabBar,
		},
		data() {
			return {
				baseUrl: config.base_url,
				userData: {
					userName:'',
				},
				bonusPoints: null,
				creditScore: null,
				faceImg:'',
				signatureUrl:'',
			}
		},
		created() {
		},
		mounted() {
			this.$set(this.userData,'userName',uni.getStorageSync('supplierUserName'));
		},
		onShow(){
		},
		methods: {
			//退出按钮
			clickOut() {
				let self = this;
				uni.showModal({
					// title: '确认要退出吗?',
					content: '确认要退出吗',
					cancelColor: "#999",
					confirmColor: "#0183FA",
					success: function(res) {
						if (res.confirm) {
							self.logout();
						} else if (res.cancel) {}
					}
				});
			},
			//退出登录
			async logout() {
				let self = this;
				const {
					data
				} = await logout();
				if (data.code == 200) {
					uni.removeStorageSync('token');
					uni.removeStorageSync('userId');
					uni.removeStorageSync('userType');
					uni.redirectTo({
						url: '/pages/views/login/login',
					});
				}
			},
		}
	}
</script>

<style lang="stylus" scoped>
	.supplierCylinderManagement-mine {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow-y: scroll;
		overflow-x: hidden;
		padding-bottom:200rpx;

		.back-img-box {
			z-index: 0;
			position: absolute;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 291rpx;
			background: linear-gradient(180deg, rgba(1, 131, 250, 1) 0%, rgba(255, 255, 255, 0) 100%);
		}

		.user-info-box {
			z-index: 10;
			margin: 39rpx 24rpx 0;
			display: flex;

			.left-img-box {
				width: 132rpx;
				height: 132rpx;
				position: relative;
				margin-right: 22rpx;

				.avatar-img {
					position: absolute;
					top: 6rpx;
					left: 6rpx;
					width: 116rpx;
					height: 116rpx;
					border-radius: 50%;
					border: 2rpx solid #fff;
				}

				.edit-img {
					z-index: 5;
					position: absolute;
					right: 0;
					bottom: 6rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}

			.right-name-box {
				padding-top: 6rpx;

				.right-name-top-box {
					display: flex;
					margin-top:30rpx;
					view:nth-child(1) {
						height: 68rpx;
						line-height: 62rpx;
						font-size: 32rpx;
						color: #fff;
					}

					view:nth-child(2) {
						margin-top: 14rpx;
						margin-left: 30rpx;
						width: 120rpx;
						height: 40rpx;
						line-height: 40rpx;
						background: #FF8C00;
						border-radius: 50rpx;
						font-size: 24rpx;
						color: #fff;
						text-align: center;
					}
				}

				.right-name-bottom-box {
					height: 50rpx;
					line-height: 50rpx;
					font-size: 28rpx;
					color: #fff;
				}
			}
		}

		.points-max-box {
			z-index: 10;
			width: 690rpx;
			height: 160rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 38rpx 30rpx 0;
			display: flex;

			.points-big-box {
				flex: 1;

				.num-p {
					margin: 39rpx 0 19rpx 0;
					text-align: center;
					font-size: 28rpx;
					line-height: 39rpx;
				}

				.img-box {
					display: flex;

					img {
						width: 30rpx;
						height: 30rpx;
						display: block;
						margin: 0 20rpx 0 42rpx;
					}

					view {
						color: #333333;
						line-height: 30rpx;
						font-size: 28rpx;
					}
				}

				.colorA {
					color: #0183FA;
				}

				.colorB {
					color: #26C736;
				}

				.colorC {
					color: #333333;
				}
			}

			.border-null-p {
				width: 1rpx;
				height: 40rpx;
				margin: 60rpx 0 0;
				background-color: #e0e0e0;
			}
		}

		.button-max-big-box {
			background-color: #fff;
			border-radius: 20rpx;
			margin: 20rpx 30rpx 0;

			.button-big-box:nth-child(1) {
				border-top: none;
			}

			.button-big-box {
				border-top: 1px solid #E0E0E0;
				display: flex;
				padding: 0 30rpx 0 26rpx;

				.left-img {
					display: block;
					width: 36rpx;
					height: 36rpx;
					margin-top: 25rpx;
					margin-right: 21rpx;
				}

				.left-text-p {
					flex: 1;
					front-size: 30rpx;
					line-height: 40rpx;
					margin: 20rpx 0;
				}

				.right-text-p {
					front-size: 30rpx;
					line-height: 40rpx;
					margin: 20rpx 0;
				}

				.right-img {
					display: block;
					width: 30rpx;
					height: 30rpx;
					margin-top: 28rpx;
				}
			}
			.color-D{
				color:#0183FA!important;
			}
		}
		.null-flex-p{
			flex:1;
		}
		.out-button {
			// position absolute;
			// bottom: 140rpx;
			// left: 75rpx;
			margin:20rpx 0 20rpx 75rpx;
			width: 600rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 100rpx;
			text-align center;
			background #0183FA;
			color: #ffffff;
			font-size: 30rpx;
		}
	}
</style>