jp-charge/pages/user/index.vue

<template>
	<view>
		<u-navbar title="个人中心" :is-back="false"  :background="background" title-color="#fff" :border-bottom="false"></u-navbar>
		<view class="userHead">
			<view class="userHead-top">
				<view class="userHead-data">
					<p>余额(元)</p>
					<h2>{{detail.balance}}</h2>
				</view>
				<view class="userHead-img">
					<u-avatar class="userHead-head" :src="src" size="144"></u-avatar>
				</view>
				<view class="userHead-btn" 
				 @click="gotoUrl('pages/user/recharge')" >
					<u-icon name="jiagebaohu" custom-prefix="custom-icon" color="#1677ff" size="32"></u-icon>
					<span>充值</span>
				</view>
			</view>
			<view class="userHead-bot">
				<view class="userHead-bot-item">
					<p>充电度数</p>
					<h2>{{detail.electricQuantity}}</h2>
				</view>
				<view class="userHead-bot-item">
					<p>充电次数</p>
					<h2>{{detail.chargingTimes}}</h2>
				</view>
			</view>
			<view class="user-cell">
				<view 
				@click="gotoUrl('pages/user/rechargeList')"
				
				class="user-cell-item">
					<view class="user-cell-title">
						<u-icon name="jiagebaohu" custom-prefix="custom-icon" color="#1677ff" size="32"></u-icon>
						<span>充值记录</span>
					</view>
					<view class="user-cell-value"></view>
				</view>
				<view 
				@click="gotoUrl('pages/charge/chargeList')"
				class="user-cell-item">
					<view class="user-cell-title">
						<u-icon name="shoujichongdian" custom-prefix="custom-icon" color="#1677ff" size="32"></u-icon>
						<span>充电记录</span>
					</view>
					<view class="user-cell-value"></view>
				</view>
				<view class="user-cell-item" @click="phone()">
					<view class="user-cell-title">
						<u-icon name="kefu" custom-prefix="custom-icon" color="#1677ff" size="32"></u-icon>
						<span>我的客服</span>
					</view>
					<view class="user-cell-value">{{tel}}</view>
				</view>
				<view class="user-cell-item" @click="logout">
					<view class="user-cell-title">
						<u-icon name="tuichu" custom-prefix="custom-icon" color="#1677ff" size="32"></u-icon>
						<span>退出账户</span>
					</view>
					<view class="user-cell-value"></view>
				</view>
			</view>
		</view>
			<Tabbar :current="2" ></Tabbar>
 	</view>
</template>

<script>
	import Tabbar from '@/components/Tabbar.vue'
	import * as API from '@/apis/index.js'
	
	export default {
		data() {
			return {
				src:'',
				isReady:false,
				tel:'400-8899-619',
				detail:{},
				background: {
					backgroundColor: '#1677ff',
				},
				
			}
		},onLoad(op){
			this.init();
		},
		methods: {
			init(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
			
				API.personalCenter().then((res) => {
					this.detail = res.data
					this.src= res.data.regUser.headImg
					this.isReady=true;
					uni.hideLoading()
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			logoutApi(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var data = {
					
				};
				 
				API.logout(data).then((res) => {
					this.carhelp.setToken("");
					this.carhelp.set("token_tdate","")
					this.carhelp.setPersonInfo("");
					uni.reLaunch({
						url:"/pages/login/index?phone="+this.detail.regUser.phone
					})
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			logout(){
				uni.showModal({
				    title: '提示',
				    content: '确认是否退出？',
				    success: res=> {
				        if (res.confirm) {
				           //付钱  改为组件
				           this.logoutApi();
				           
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			phone(){
				uni.makePhoneCall({
				    phoneNumber:this.tel //仅为示例
				});
			}
		},onShow() {
			if(this.isReady){
				this.init()
			}
		
		},
		components: {
			Tabbar
		},
	}
</script>

<style lang="scss" scoped>
	.user-cell-item{
		padding: 13px 15px;
		position: relative;
		border-bottom: 1px solid #f7f7f7;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.user-cell-value{
			flex: 1;
			text-align: right;
			padding-right: 25px;
			color:#999;
		}
		&:after{
			content:'\e77c';
			font-family: "custom-icon" !important;
			font-size: 16px;
			position: absolute;
			right: 15px;
			top: 15px;
			color:#999;
		}
		.user-cell-title{
			span{
				margin-left: 5px;
			}
		}
	}
	.userHead{
		.userHead-top{
			background-color: #1677ff;
			height: 120px;
			position: relative;
			padding: 0 30px;
			.userHead-data{
				color:#fff;
				text-align: center;
				position: absolute;
				top: 35px;
				left: 30px;
				p{
					margin-bottom: 5px;
				}
				h2{
					font-weight: normal;
				}
			}
			.userHead-img{
				position: absolute;
				left: 50%;
				margin-left: -36px;
				top:24px ;
				.userHead-head{
					border:4px solid  #5ca0ff;
				}
			}
			.userHead-btn{
				position: absolute;
				top: 46px;
				right: 20px;
				width: 80px;
				height: 28px;
				border-radius: 14px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #FFFFFF;
				span{
					margin-left: 5px;
					color:#1677ff;
				}
			}
		}
		.userHead-bot{
			background-color: #125fcc;
			height: 60px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.userHead-bot-item{
				text-align: center;
				color:#fff;
				h2{
					font-weight: normal;
				}
			}
		}
	}
</style>