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 padding-left">
								<view class="">{{userInfo.cUserName}}</view>
								<view class=" text-sm flex">
									<view class="text-cut">
										<!-- <text class="cuIcon-infofill text-red  margin-right-xs"></text> -->
										{{userInfo.cUserId}}
									</view>
								</view>
								<view class="cu-tag round bg-dark-main-color sm "> <text class="text-sm"> {{userInfo.phone}}</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">{{userInfo.cSiteName}}</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.2.5.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: {}
			}
		},
		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'
				})
			},
			getInfo() {
				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>
	.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>