parking_h5/pages/center/index.vue

<template>
	<view>
		<u-navbar title-color="#fff" :custom-back="customBack" :border-bottom="false" back-icon-color="#CCE8FF" :background="{background: '#008CFF' }" title="我的"></u-navbar>
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
			<view class="u-m-r-24" @click="login($store.state.vuex_hasLogin)">
				<u-avatar :src="userInfo.headImgUrl || userInfo.avatar||pic" size="140"></u-avatar>
			</view>
			<view class="u-flex-1" @click="login($store.state.vuex_hasLogin)">
				<view class="u-font-18 u-p-b-20">{{ userInfo.nickname || userInfo.userName || '请登录' }}</view>
				<view class="u-font-14">手机号:{{ userInfo.mobile || '暂无' }}</view>
			</view>
			<!-- <view class="u-m-l-10 u-p-10">
				<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
			</view> -->
		</view>
		
		<view class="u-m-t-20">
			<u-cell-group>				
				<u-cell-item title="我的车辆" @click="openPage('pages/myCars/myCars')">
					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="wodecheliang"></u-icon>
				</u-cell-item>
				<u-cell-item title="停车记录" @click="openPage('pages/center/order/order')">
					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="tingchejilu"></u-icon>
				</u-cell-item>
			</u-cell-group>
		</view>
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item title="充值" @click="openPage('pages/myCars/myCars')">
					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="chongzhi"></u-icon>
				</u-cell-item>
				<u-cell-item title="包月" @click="openPage('pages/center/order/order')">
					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="baoyue"></u-icon>
				</u-cell-item>
				<u-cell-item title="提现" @click="openPage('pages/center/order/order')">
					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="tixian"></u-icon>
				</u-cell-item>
				<u-cell-item title="退款" @click="openPage('pages/center/order/order')">
					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="tk"></u-icon>
				</u-cell-item>
				<u-cell-item title="账单记录" @click="openPage('pages/center/order/order')">
					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="zhangdanjilu"></u-icon>
				</u-cell-item>
			</u-cell-group>
		</view>
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item title="我的优惠" @click="openPage('pages/myCars/myCars')">
					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="wodeyouhui"></u-icon>
				</u-cell-item>
			</u-cell-group>
		</view>
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item title="发票管理" @click="openPage('pages/center/invoice/invoice')">
					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="fapiaoguanli"></u-icon>
				</u-cell-item>
			</u-cell-group>
		</view>
		<view class="u-m-t-20 u-m-b-40">
			<u-cell-group>
				<u-cell-item title="拨打客服电话" @click="phoneCall(phoneNo)">
					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="dianhua"></u-icon>
				</u-cell-item>
			</u-cell-group>
		</view>
		
		<!-- <view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="phone" title="手机号登录" @click="openPage('/pages/center/phoneLogin/phoneLogin')"></u-cell-item>
			</u-cell-group>
		</view> -->
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import getUrlParams from "../../utils/getUrlParams.js";
	export default {
		data() {
			return {
				pic:'/static/img/default-avatar.png',
				userInfo:[],
				code:null,
				phoneNo:'114',
				
			}
		},
		onLoad() {
			
		},
		onShow() {
			if(this.$store.state.vuex_hasLogin){
				this.userInfo = this.$store.state.vuex_user;
				if(this.$store.state.vuex_wxinfo){
					this.userInfo = Object.assign(this.userInfo,this.$store.state.vuex_wxinfo);
				}
			}else{
				this.userInfo = [];
			};
			let locationLocaturl = window.location.search;
			this.code = getUrlParams(locationLocaturl,"code");
			if(this.code&&!this.$store.state.vuex_wxinfo.openId){this.handleGetWXInfo(this.code)};
			

		},
		methods: {
			openPage(path) {
				console.log('path',path);
				this.$u.route({ 
					url: path
				})
			},
			//登录判断
			login(status){
				console.log('this.$store.state.vuex_hasLogin',this.$store.state.vuex_hasLogin);
				if(!status){
					console.log('config',this.config);
					this.$u.route({
						url: 'pages/center/phoneLogin/phoneLogin'
					});
				}
			},
			customBack(){
				this.$u.route({
					type:'switchTab',
					url: 'pages/index/index'
				});
			},
			phoneCall(phone){
				uni.makePhoneCall({
				    phoneNumber: phone
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
page{background-color: $my-page-bg-color;}
.user-box{
	position: relative;
	background-color: $my-main-color;
	color: #fff;
	&:after{
		position: absolute;
		right: 0;
		bottom: 0;
		content: '';
		background: url(../../static/img/center-top-bg.png) no-repeat;
		background-position: -90rpx 0;
		width: 305rpx;
		height: 145rpx;
		z-index: 999;
	}
}
.u-avatar{border: 10rpx solid #4CAEFF;}
.u-cell-box /deep/ .u-cell__left-icon-wrap,
.u-cell-box /deep/ .custom-icon
{color: $my-main-color;margin-right: 10rpx;}
</style>