1

pages/user/index.vue

@@ -1,309 +1,375 @@
-<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="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: '400-8899-619',
-				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%;
-	/* 	##padding-bottom: 25px; */
-	}
-</style>
-<style lang="scss" scoped>
-	.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: 5px;
-		.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>
+<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>