zhxg_xsbdV1.0/pages/own/index.vue

<template>
	<view class="own">
		<!-- 个人信息 begin -->
		<view class="information">
			<view class="bigbox">
				<view class="left">
					<text>{{stu_name.length > 3 ? stu_name.substring(0,3)+"..." : stu_name }}</text>
					<text>学号:{{stu_no}}</text>
				</view>
				<text class="state">{{reg_status}}</text>
				<view class="right">
					<u-avatar :text="stu_name.substring(0,1)"   size="120rpx" randomBgColor></u-avatar>
				</view>
			</view>
		</view>
		<!-- 个人信息 end -->
		<!-- 列表begin -->
		<view class="list">
			<view class="sm-list" v-for="(item,index) in ListIcon" :key="index" @click="toPage(item.navigator)">
				<view class="smlist">
					<view class="iconText">
						<image :src="item.icon" mode=""></image>
						<text>{{item.name}}</text>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<button @click="doLogOut">退出登录1</button>
		<FloatBall />
	</view>
</template>

<script>
	import {getUserInfo} from "@/api/validApi.js";
	import {logOut} from "@/middleware/storage.js";
	import {isEmpty,getRegStatus} from "@/api/helpFunc.js";
	import { getOwnRoomInfo} from "@/api/dormApi.js";
	import FloatBall from "@/pages/compoents/FloatBall.vue";
	export default {
		components: {
			FloatBall
		}, 
		data() {
			return {
				stu_name: "新同学",
				stu_no: "xxxxxx",
				reg_status : "未激活",
				// 列表图标
				ListIcon: [{
						name: "个人资料",
						icon: "https://wap.wzzyhp.com/profile/uniapp/static/own-icon/carbon_user-filled.png",
						navigator: "/pages/Userinformation/Userinformation"
					}, 
					{
						name: "继续流程",
						icon: "https://wap.wzzyhp.com/profile/uniapp/static/own-icon/bi_funnel-fill.png",
						navigator: "/pages/newindex/newindex"
					}, 
					{
						name: "帮助与反馈",
						icon: "https://wap.wzzyhp.com/profile/uniapp/static/own-icon/solar_pen-new-round-bold.png",
						navigator: "/pages/help-and-feedback/help-and-feedback"
					},
				],

			}
		},
		onLoad() {
			this.getOwnInfo();
		},
		methods: {
			async getOwnInfo() {
				let res = await getUserInfo();

				if (res.code == 200) {
					let data = {
						...res.data
					};
					if (!isEmpty(data.xsxm)) {
						uni.setStorageSync("stu_no",data.xh);
						this.stu_name = data.xsxm;
						this.stu_no = data.xh;
						this.reg_status = getRegStatus(data.regStatus);
					}
				}
				
				let res2 = await getOwnRoomInfo();
				if(res2.code == 200){
					let data = res2.data;
					
					uni.setStorageSync("own_dorm",data.DormId);
					
				}

			},
			doLogOut() {
				logOut()
				uni.clearStorageSync("token")
			},
			toPage(url){
				uni.navigateTo({
					url
				})
			}
		}
	} 
</script>

<style lang="scss" scoped>
	.own {
		//height: 100vh;
		background-color: #F6F7F9;

		// 信息 begin
		.information {
			// width: 100%;
			height: 140rpx;
			background-color: white;
			padding-top: 180rpx;
			
		}

		.bigbox {
			display: flex;
			justify-content: space-between;
			align-self: center;
			width: 650rpx;
			height: 120rpx;
			padding: 0 24px;
			position: relative;
			
			.state{
				margin: 6rpx 0 0 30rpx;
				display: block;
				// width: 90rpx;
				padding:0 5rpx 0 5rpx;
				height: 40rpx;
				 
				background-color: rgb(232,244,255);
				text-align: center;
				line-height: 40rpx;
				color: rgb(24,144,255);
				border: 1px solid rgb(209,233,255);
				border-radius: 40rpx;
				position: absolute;
				left: 25%;
				top: 10rpx;
			}

			.left {
				display: flex;
				flex-direction: column;
				width: 290rpx;
				height: 120rpx;


				text:nth-child(1) {
					 
					color: #131313;
				}

				text:nth-child(2) {
					margin-top: 5px;
					 
					color: #808080;
				}
			}

			.right {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;

			}
		}

		// 信息end
		// 列表begin
		.list {

			height: 780rpx;
			margin-top: 15px;
			


			.sm-list {
				display: flex;
				align-items: center;
				width: 780rpx;
				height: 100rpx;
				padding: 0 20px;
				background-color: white;
				margin-bottom: 10px;

				.smlist {
					display: flex;
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}

				.iconText {
					display: flex;
					align-items: center;
					width: 220rpx;
					padding: 0 215px 0 0;

					text {
						color: #202020;
						padding-left: 5px;
						 
					}
				}
			}
		}

		// 列表end
		// 按钮
		button {

			margin-top: 20px;
			width: 720rpx;
			height: 90rpx;
			background-color: #409EFF;
			color: white;
		}
	}
</style>