JP-ChargeTeam51/pages/user/index.vue

<template>
	<view>
		<view class="userHead" @click="toData">
			<view class="userHead-img">
				<u-avatar :src="userId ? headImg : '../../assets/img/head.png'" size="96"></u-avatar>
			</view>
			<view class="userHead-text">
				<h3>{{userId ? userPhone : '点击登录/注册'}}</h3>
			</view>
		</view>
		<view class="userData">
			<view class="userData-num" @click="toBalance">
				<view class="userData-data">￥{{personAccount.availableAmount != null ? personAccount.availableAmount.toFixed(2) : '0.00'}}</view>
				<view class="userData-foot">可用余额</view>
			</view>
			<view class="userInfo-btn" @click="toRecharge">充值</view>
		</view>
		<view class="userBanner">
		
				<u-image style="    border-radius: 8px;"  width="100%" height="80px" src="../../static/img/9999.png"></u-image>
		</view>
		<view class="userIcon">
			<view class="userIcon-tit">
				<h3>常用功能</h3>
			</view>
			<view class="userIcon-main">
				<view class="userIcon-item">
					<view class="userIcon-icon userIcon-icon1">
						<u-icon name="qr-scan-2-line" custom-prefix="custom-icon" color="#fff" size="36"></u-icon>
					</view>
					<p>扫码充电</p>
				</view>
				<view class="userIcon-item">
					<view class="userIcon-icon userIcon-icon2">
						<u-icon name="wallet-3-line" custom-prefix="custom-icon" color="#fff" size="36"></u-icon>
					</view>
					<p>快速充值</p>
				</view>
				<view class="userIcon-item">
					<view class="userIcon-icon userIcon-icon3">
						<u-icon name="todo-line" custom-prefix="custom-icon" color="#fff" size="36"></u-icon>
					</view>
					<p>充电记录</p>
				</view>
				<view class="userIcon-item">
					<view class="userIcon-icon userIcon-icon4">
						<u-icon name="road-map-line" custom-prefix="custom-icon" color="#fff" size="36"></u-icon>
					</view>
					<p>附近站点</p>
				</view>
			</view>
		</view>
		<view class="userCell">
			<view class="userCell-item" @click="carManage">
				<view class="userCell-title">
					<u-icon name="menu_cwcl" custom-prefix="custom-icon" color="#6BC6A7" size="36"></u-icon>
					<p>车辆管理</p>
				</view>
				<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="32"></u-icon>
			</view>
			<view class="userCell-item" @click="gotoUrl('pages/user/help')">
				<view class="userCell-title">
					<u-icon name="compass-3-fill" custom-prefix="custom-icon" color="#6BC6A7" size="36"></u-icon>
					<p>操作指南</p>
				</view>
				<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="32"></u-icon>
			</view>
			<view class="userCell-item" @click="feedback">
				<view class="userCell-title">
					<u-icon name="feedback-fill" custom-prefix="custom-icon" color="#6BC6A7" size="36"></u-icon>
					<p>意见反馈</p>
				</view>
				<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="32"></u-icon>
			</view>
			<view class="userCell-item" @click="gotoUrl('pages/user/about')">
				<view class="userCell-title">
					<u-icon name="information-fill" custom-prefix="custom-icon" color="#6BC6A7" size="36"></u-icon>
					<p>关于我们</p>
				</view>
				<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="32"></u-icon>
			</view>
			<view class="userCell-item" @click="openModal">
				<view class="userCell-title">
					<u-icon name="customer-service-fill" custom-prefix="custom-icon" color="#6BC6A7" size="36"></u-icon>
					<p>联系客服</p>
				</view>
				<span>{{content}}</span>
			</view>
			<view>
				<u-modal v-model="show" @confirm="confirmPhone" :confirm-text="confirmText" confirm-color="#606266" :show-cancel-button="true" ref="uModal" 
					:asyncClose="true" :title="title" :content="content"></u-modal>
			</view>
			<view class="userCell-item" @click="setUp">
				<view class="userCell-title">
					<u-icon name="settings-4-fill" custom-prefix="custom-icon" color="#6BC6A7" size="36"></u-icon>
					<p>设置</p>
				</view>
				<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="32"></u-icon>
			</view>
		</view>
		
		<Tabbar :current="2"></Tabbar>
	</view>
</template>

<script>
	import * as userApi from '@/apis/user.js'
	import * as loginApi from '@/apis/login.js'
	import Tabbar from '@/components/Tabbar.vue'
	
	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				personAccount: {},
				userId: '',
				headImg: '',
				userPhone: '',
				show: false,
				title: '联系客服',
				content: '0716-8123456',
				confirmText: '拨打电话',
				background:{
					background: 'none'
				},
			}
		},
		onShow() {
			if(this.carhelp.getPersonInfo()) {
				this.userId = this.carhelp.getPersonInfo().id;
				
				this.getCarPersonAccount();
				this.getUserInfo();			
			}
		},
		onReady() {
			var  consumerPhone=this.carhelp.getConfig().consumerPhone
			// img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"		
			if(consumerPhone){
				this.content=consumerPhone
 			}
		},
		methods: {
			getUserInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				loginApi.findByOpenId({
					openId: this.carhelp.getOpenId()
				}).then((res) => {
					uni.hideLoading();
					this.headImg = res.data.regUser.headImg;
					
					var phone = res.data.regUser.phone;
					var phone1 = phone.slice(0,3);
					var phone2 = phone.slice(-4);
					this.userPhone = phone1 + '****' + phone2;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			toData() {			
				if(this.userId) {
					uni.navigateTo({
						url: '/pages/user/data'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			toBalance() {			
				if(this.userId) {
					uni.navigateTo({
						url: '/pages/user/finance/balance'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			toRecharge() {	
				if(this.userId) {
					uni.navigateTo({
						url: '/pages/user/finance/recharge'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			carManage() {
				if(this.userId) {
					uni.navigateTo({
						url: '/pages/user/car/index'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			feedback() {
				if(this.userId) {
					uni.navigateTo({
						url: '/pages/user/message'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}		
			},
			setUp() {
				if(this.userId) {
					uni.navigateTo({
						url: '/pages/user/setting'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			openModal() {
				this.show = true;
			},
			confirmPhone(){
				this.show = false;
				uni.makePhoneCall({
					phoneNumber:this.content //仅为示例
				});
			},
			getCarPersonAccount() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				userApi.carPersonAccount().then((res) => {
					uni.hideLoading();
					
					this.personAccount = res.data;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>
<style>
	page{
		background:url(../../assets/img/index_header_bg.png) no-repeat top center #f7f7f7;
		background-size: 100%;
	}
</style>
<style lang="scss" scoped>
	.userBanner{
		margin: 16px;
	}
	.userIcon{
		background-color: #fff;
		margin: 16px;
		border-radius: 8px;
		padding: 16px;
	}
	.userIcon-item{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.userIcon-main{
		margin-top: 16px;
		display: flex;
		justify-content: space-between;
	}
	.userIcon-icon{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 40px;
		width: 40px;
		border-radius: 50%;
		margin-bottom: 6px;
	}
	.userIcon-icon1{background-color: #59D96E;}
	.userIcon-icon2{background-color: #4BD2C0;}
	.userIcon-icon3{background-color: #6FA5FF;}
	.userIcon-icon4{background-color: #9D9FFF;}
	.userCell{
		background-color: #fff;
		border-radius: 8px;
		margin: 16px;
		.userCell-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16px;
			.userCell-title{
				display: flex;
				align-items: center;
				p{
					margin-left: 8px;
				}
			}
			span{
				color:#999;
			}
		}
	}
	
	.userHead{
		display: flex;
		align-items: center;
		align-items: center;
		padding:40px 20px 0;
		.userHead-img{

		}
		.userHead-text{
			margin-left: 12px;
			h3{
				font-size: 20px;
				color:#fff;
				font-weight: normal;
			}
			
		}
	}
	.userData{
		background-color: #fff;
		margin: 16px;
		padding: 16px 24px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.userData-num{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content:space-between;
		padding-left: 30px;
		.userData-data{
			font-size: 24px;
		}
		.userData-name{
			font-size: 16px;
		}
		.userData-foot{
			margin-top: 4px;
			color:#999;	
			font-size: 12px;
		}
	}
	.userInfo-btn{
		padding: 6px 30px;
		background-color: #00B962;
		color:#fff;
		border-radius: 15px;
	}
</style>