LSM_OIL_SITE/pages/setup/setup.vue

<template>
	<view class="page-content bg-white">
		<cu-custom class="main-totextbar bg-main-oil" bgColor="bg-main-oil">
			<block slot="content">个人中心</block>
		</cu-custom>
		<view class="bg-img  flex align-center" :style="'background-image: url('+mainURL+'user-info-bg.png);height:250upx;width:750upx'">
			<view class="position-re card-view">
				<view class="position-ab">
					<view class="cu-list  text-white menu-avatar padding  bg-transparent no-border">
						<view class="cu-item bg-transparent no-border">
							<view class="cu-avatar round xl " :style="'background-image: url('+mainURL+'default-avator.png)'">

							</view>
							<view class="content userInfoList padding-left">
								<view class="margin-left-xs">{{userInfo.name}}</view>
								<view class=" showIds " > <text class="text-sm"> {{userInfo.id}}</text></view>
								<view class="cu-tag round bg-dark-main-color sm "> <text class="text-sm"> {{userInfo.userPhone}}</text></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-list menu padding padding-top-lg bg-white">
			<view class="cu-item arrow">
				<view class="content">
					<text class="color-000">所属油站</text>
				</view>
				<view class="action" @tap="routerTo('/pages/station-info/station-info')">
					<text class="text-grey text-sm">{{accountName}}</text>
				</view>
			</view>

			<view class="cu-item arrow" @tap="changePhone">
				<view class="content">
					<text class="color-000">手机号码</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">更换手机号</text>
				</view>
			</view>



			<view class="cu-item arrow" @tap="setpwd">
				<view class="content">
					<text class="color-000">登录密码</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">修改密码</text>
				</view>
			</view>

			<view class="cu-item arrow">
				<view class="content">
					<text class="color-000">版本号</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">1.3.4</text>
				</view>
			</view>

			<view class="cu-item arrow" @tap="loginOut">
				<view class="content">
					<text class="color-000">退出登录</text>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import cloudSiteApi from '@/api/cloud-site.js'
	export default {
		data() {
			return {
				mainURL: this.global.mainURL,
				userInfo: {},
				channel:{},
				accountName:''
				
			}
		},
		created() {
			this.getInfo()
		},
		methods: {
			changePhone() {
				uni.navigateTo({
					url: '/packageSecurity/changePhone/auth',
					fail: (err) => {
						console.log(err)
					}
				})
			},
			loginOut() {
				uni.clearStorage()
				uni.reLaunch({
					url: '/pages/login/boforeLogin/boforeLogin?type=1' //
				})
			},
			getInfo() {
				this.userInfo = uni.getStorageSync('loginUser')
				this.accountName=uni.getStorageSync('siteOli'),
				console.log(this.userInfo)
				// cloudSiteApi.personCenter().then(res => {
				// 	if (res.code == 20000) {
				// 		this.userInfo = res.data
				// 		uni.setStorageSync('oldPhone', res.data.phone)
				// 	}
				// })
			},
			setpwd() {
				uni.navigateTo({
					url: '/packageSecurity/setPassword/setPassword',
					fail: (err) => {
						console.log(err)
					}
				})
			},
			routerTo(url) {
				uni.navigateTo({
					url: url
				})

			}
		}
	}
</script>

<style scoped>
	.userInfoList{
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-direction: column; 
	}
	.showIds{
		border-radius: 27rpx; 
	    padding: 0rpx 14rpx;
	    font-size: 15rpx;
	    line-height: 1.5;
	    margin-bottom: 3px; 
		margin-bottom: 10upx;
	}
	.cu-list+.cu-list {
		margin-top: 0;
	}

	.page-content {
		min-height: 100%;
	}

	.card-view {
		height: 250upx;
		width: 750upx;
	}

	.position-ab {
		width: 750upx;
		top: 20upx;
	}

	.bg-dark-main-color {
		background-color: #D30000;
	}

	/* 去边框 */
	.bg-img .cu-list.menu-avatar>.cu-item::after,
	.bg-img .cu-list.menu>.cu-item::after {
		border-bottom: 0;
	}
</style>