ChuangHengWx/pages/my.vue

<template>
	<view class="tabPage" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='我的' bgColor="transparent" :showback="false"></cus-header>
		<div class="info">
			<div class="i_top adfac">
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/16/0bdaa978-db1a-4edb-8a41-fc45b096380f.png"></image>
				<div class="it_texts">
					<p>{{userName||''}}</p>
					<p>{{mobile||''}}</p>
				</div>
			</div>
			<div class="i_tips">
				<p>所属公司：{{'甜梦巧克力公司甜梦巧克力公司'}}</p>
				<p>所属团队：{{'甜梦巧克力团队'}}</p>
			</div>
		</div>
		<div class="box">
			<div class="b_pre adfacjb">
				<div class="bp_l adfac">
					<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/16/ecb80887-6d86-420c-b797-7f12c5916871.png"></image>
					<text>版本</text>
				</div>
				<div class="bp_r">1.0.0</div>
			</div>
			<div class="b_pre adfacjb" @tap="exitLogin">
				<div class="bp_l adfac">
					<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/16/4d10c9ef-8a13-4502-adfd-d388628446ab.png"></image>
					<text>退出登录</text>
				</div>
				<div class="bp_r">
					<u-icon name="arrow-right" color="#D3D2D2" size="32"></u-icon>
				</div>
			</div>
		</div>
		<Tabbar :tabbarIndex="1"></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/components/CusTabbar/index.vue'
	export default {
		components:{ Tabbar },
		data(){
			return {
				userName:'',
				mobile:'',
			}
		},
		onLoad() {
			if(uni.getStorageSync('userInfo')){
				this.userName = JSON.parse(uni.getStorageSync('userInfo')).realName||'';
				this.mobile = JSON.parse(uni.getStorageSync('userInfo')).mobile||'';
				if(this.mobile) this.mobile = this.mobile.replace(this.mobile.substr(3,4),' **** ')
			}
		},
		methods:{
			exitLogin(){
				uni.clearStorageSync();
				uni.reLaunch({
					url:'/pages/login'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.tabPage{
		background: linear-gradient( 270deg, #EEEFF8 0%, #F6ECF4 100%, #F6ECF4 100%);
		padding: 0 0 172rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		.info{
			padding: 54rpx 40rpx;
			.i_top{
				image{
					width: 188rpx;
					height: 188rpx;
				}
				.it_texts{
					padding-left: 30rpx;
					p{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 40rpx;
						color: #252525;
						line-height: 40rpx;
						&:last-child{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 32rpx;
							color: #646464;
							line-height: 32rpx;
							margin-top: 36rpx;
						}
					}
				}
			}
			.i_tips{
				margin-top: 48rpx;
				overflow: hidden;
				p{
					margin-top: 40rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #6B7280;
					line-height: 28rpx;
				}
			}
		}
		.box{
			padding: 30rpx;
			background: #FFFFFF;
			flex: 1;
			.b_pre{
				background: #FFFFFF;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECECEC;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
				padding: 39rpx 0;
				.bp_l{
					image{
						width: 36rpx;
						height: 36rpx;
					}
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #111111;
						line-height: 32rpx;
						margin-left: 30rpx;
					}
				}
				.bp_r{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #111111;
					line-height: 32rpx;
					text-align: right;
				}
			}
		}
	}
</style>