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>
				<img class="md" src="../../assets/img/md-verified_user@3x.png" alt="">
			</view>
			<view class="userHead-text">
				<h3 :style="elderStatus ? 'font-size: 28px;' : ''">{{userId ? userPhone : '点击登录/注册'}}</h3>
				<view class="tag">
					<view class="tag-1">
						<text>服务费包月卡</text><text class="iconfont iconfont-right" >&#xe600;</text>
					</view>
					<view class="tag-2">
						免电费会员<text class="iconfont iconfont-right">&#xe600;</text>
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- 引导模块 -->
		<view class="userLead" v-if="userId&&!userCardBool">
			<view class="text">
				<view class="text1">
					<img class="svg-img" src="../../assets/img/antFill-crown@3x.png" alt="" >充电服务费包月卡
				</view>
				<view class="text2">
					开通后充电服务费<text class="free">全免</text>
				</view>
				
			</view>
			<view class="btn">
				<button class="open"  @click="gotoUrl('pages/monthlyCardActivity/monthlyCardBuy')" >立即开通</button>
			</view>
		</view>
		<!-- 包月卡 -->
		<view class="monthly-card"  v-if="userId&&userCardBool"   @click="gotoUrl('pages/monthlyCardActivity/monthlyCardBuy')">
			<view class="img-box"><img class="svg-img" src="../../assets/img/antFill-crown@3x.png" alt="" ></view>
			<view class="flex">
			<view class="text">
				
				充电服务费包月卡
			</view>
			<view class="date">
				{{userCard.endTime?userCard.endTime.slice(0,10):''}}到期<text class="iconfont">&#xe600;</text>
			</view>	
			</view>
		</view>
		<!-- 企业会员 -->
		<!-- <view class="monthly-card company-monthly-card"  >
			<view class="img-box"><img class="svg-img" src="../../assets/img/riFill-building-fill@3x.png" alt="" ></view>
			<view class="flex">
			<view class="text">
				
				企业充电免电费会员
			</view>
			<view class="date">
				查看<text class="iconfont">&#xe600;</text>
			</view>	
			</view>
		</view> -->
		<view class="userData">
			<view class="userData-num" @click="toBalance">
				<view class="userData-data oldTextjp" oldstyle="font-size: 28px;">{{personAccount.availableAmount != null ? personAccount.availableAmount.toFixed(2) : '0.00'}}元</view>
				<view class="userData-foot" :style="elderStatus ? 'font-size: 16px;' : ''">可用余额{{" "}}<span class="userData-foot-look">查看</span></view>
			</view>
			<view class="line">
				
			</view>
			<view class="userData-num" @click="toMyCoupon">
				<view class="userData-data oldTextjp" oldstyle="font-size: 28px;">{{recordsTotal}}张</view>
				<view class="userData-foot" :style="elderStatus ? 'font-size: 16px;' : ''">优惠券{{" "}}<span class="userData-foot-look">查看</span></view>
			</view>
		</view>
		<view class="userBanner">
<!-- 			<u-image width="100%" height="80px" src="../../static/img/banner.jpg" border-radius="16"></u-image>
 -->			<u-swiper  bg-color="#fff"
			 :img-mode="'scaleToFill'" height="160" 
			 :list="bannerList" @click="clickBanner"  :name="'picUrl'" >
			</u-swiper> 
		
		</view>
		<view class="userIcon">
			<view class="userIcon-tit" :style="elderStatus ? 'font-size: 20px;' : ''">
				<h3>我的服务</h3>
			</view>
			<!-- <view class="userIcon-main">
				<view class="userIcon-item" @click="getScanCode">
					<view class="userIcon-icon userIcon-icon1">
						<u-icon name="qr-scan-2-line" custom-prefix="custom-icon" " size="36"></u-icon>
					</view>
					<p :style="elderStatus ? 'font-size: 18px;' : ''">扫码充电</p>
				</view>
				<view class="userIcon-item" @click="fastRecharge">
					<view class="userIcon-icon userIcon-icon2">
						<u-icon name="wallet-3-line" custom-prefix="custom-icon" color="#fff" size="36"></u-icon>
					</view>
					<p :style="elderStatus ? 'font-size: 18px;' : ''">快速充值</p>
				</view>
				<view class="userIcon-item" @click="chargingRecord">
					<view class="userIcon-icon userIcon-icon3">
						<u-icon name="todo-line" custom-prefix="custom-icon" color="#fff" size="36"></u-icon>
					</view>
					<p :style="elderStatus ? 'font-size: 18px;' : ''">充电记录</p>
				</view>
				<view class="userIcon-item" @click="toSearchPile">
					<view class="userIcon-icon userIcon-icon4">
						<u-icon name="road-map-line" custom-prefix="custom-icon" color="#fff" size="36"></u-icon>
					</view>
					<p :style="elderStatus ? 'font-size: 18px;' : ''">附近站点</p>
				</view>
			</view> -->
			<view class="userIcon-main">
				<view class="userIcon-item" @click="chargingRecord">
					<view class="userIcon-icon">
						<img src="../../static/img/riFill-file-list-3-fill@1x.png" alt="">
					</view>
					<p :style="elderStatus ? 'font-size: 18px;' : ''">充电记录</p>
				</view>
				<view class="userIcon-item" @click="carManage">
					<view class="userIcon-icon">
						<img src="../../static/img/riFill-car-fill@1x.png" alt="">
					</view>
					<p :style="elderStatus ? 'font-size: 18px;' : ''">车辆管理</p>
				</view>
				<view class="userIcon-item" @click="myAppointment">
					<view class="userIcon-icon">
						<img src="../../static/img/riFill-map-pin-time-fill.svg" alt="">
					</view>
					<p :style="elderStatus ? 'font-size: 18px;' : ''">我的预约</p>
				</view>
				<view class="userIcon-item " @click="toInvoice" >
					<view class="userIcon-icon">
						<img src="../../static/img/riFill-money-cny-box-fill.svg" alt="">
					</view>
					<p :style="elderStatus ? 'font-size: 18px;' : ''">我的发票</p>
				</view>
				<view class="userIcon-item" @click="toFreeInstallation">
					<view class="userIcon-icon">
						<img src="../../static/img/riFill-file-add-fill.svg" alt="">
					</view>
					<p :style="elderStatus ? 'font-size: 18px;' : ''">免费安桩</p>
				</view>
				<view class="userIcon-item" @click="toJoin">
					<view class="userIcon-icon">
						<img src="../../static/img/riFill-service-fill.svg" alt="">
					</view>
					<p :style="elderStatus ? 'font-size: 18px;' : ''">我要加盟</p>
				</view>
				<view class="userIcon-item lucency" >
					<view class="userIcon-icon">
						<img src="../../static/img/riFill-tools-fill.svg" alt="">
					</view>
					<p :style="elderStatus ? 'font-size: 18px;' : ''">我要报修</p>
				</view>
			
				<view class="userIcon-item lucency" >
					<view class="userIcon-icon">
						<img src="../../static/img/riFill-shield-user-fill.svg" alt="">
					</view>
					<p :style="elderStatus ? 'font-size: 18px;' : ''">实名认证</p>
				</view>
				
			</view>
		</view>
		<view class="userCell">
			<!-- <view class="userCell-item" @click="carManage">
				<view class="userCell-title oldTextjp" oldstyle="font-size: 20px;">
					<u-icon name="menu_cwcl" custom-prefix="custom-icon" color="#6BC6A7" size="36"></u-icon>
					<p>车辆管理</p>
				</view>
				<view>
					<text class="add" :style="elderStatus ? 'font-size: 16px;' : ''">添加车牌号</text>
					<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="32"></u-icon>
				</view>
			</view> -->
			<view class="userCell-item" @click="gotoUrl('pages/user/help')">
				<view class="userCell-title oldTextjp" oldstyle="font-size: 20px;">
					<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 oldTextjp" oldstyle="font-size: 20px;">
					<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 oldTextjp" oldstyle="font-size: 20px;">
					<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 oldTextjp" oldstyle="font-size: 20px;">
					<u-icon name="customer-service-fill" custom-prefix="custom-icon" color="#6BC6A7" size="36"></u-icon>
					<p>联系客服</p>
				</view>
				<span :style="elderStatus ? 'font-size: 16px;' : ''">{{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" :content-style="{fontSize: '24px',color: '#101010'}"></u-modal>
			</view>
			<view class="userCell-item" @click="setUp">
				<view class="userCell-title oldTextjp" oldstyle="font-size: 20px;">
					<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"  ref="tabbarMain" :elderStatus="elderStatus"></Tabbar>
	</view>
</template>

<script>
	import * as API from '@/apis/index.js'
	import * as userApi from '@/apis/user.js'
	import * as loginApi from '@/apis/login.js'
	import * as WxJsApi from '@/utils/wxJsApi.js'
	import Tabbar from '@/components/Tabbar.vue'
	import * as newsApi from '@/apis/news.js'
	
	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				userCard:null,
				recordsTotal: 0,
				myCouponList: [],
				elderStatus: false,
				personAccount: {},
				userId: '',
				headImg: '',
				userPhone: '',
				show: false,
				title: '联系客服',
				content: '400-8899-619',
				confirmText: '拨打电话',
				bannerList:[],
				background:{
					background: 'none'
				},
			}
		},
		onShow() {
			if(this.carhelp.getPersonInfo()) {
				this.userId = this.carhelp.getPersonInfo().id;
				
				this.getCarPersonAccount();
				this.getUserInfo();
				this.getCouponList();
			}
			if(this.$refs.tabbarMain){
				this.$refs.tabbarMain.setcount(2);
			}
			
			if(this.carhelp.get("getElderModeClass") == "长辈模式") {
				this.elderStatus = true;
			} else {
				this.elderStatus = false;
			}
		},
		computed:{
			userCardBool(){
				if(this.userCard){
					var date=new Date().getTime()
					var date2=new Date(this.userCard.endTime).getTime();
					if(date<date2){
						return true;
					}
				}
				return false
			}
		},
		onReady() {
			WxJsApi.getWxConfig(['getLocation', 'addEventListener', 'scanQRCode']).then((res) => {
				// //(res)
			}).catch(error => {
				//(error)
			})
			
			var  consumerPhone=this.carhelp.getConfig().consumerPhone
			// img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"		
			if(consumerPhone){
				this.content=consumerPhone
 			}
			this.getBannerInfo("userinfo")
		},
		methods: {
			clickBanner(index){
				var mod= this.bannerList[index]
				
				if(mod.linkUrl.indexOf('http')==0){
				    window.location=mod.linkUrl;
				}
				else if(mod.linkUrl.indexOf('#/')==0){
					if(mod.linkUrl.indexOf("?")==-1){
						mod.linkUrl+='?';
					}
				    //window.location=mod.linkUrl;
					var url=mod.linkUrl.split("#")[1]
					//window.location = mod.clickUrl;
					uni.navigateTo({
						url: url
					})
				}
				else if(mod.linkUrl=='#'||mod.linkUrl==''){
				
				}
				else{
					uni.navigateTo({
						url:mod.linkUrl
					})
				}
				
			},
			getBannerInfo(code){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				newsApi.getBannerInfo(code).then((res) => {
					uni.hideLoading();
					this.bannerList =res.data;
					
					// document.getElementsByClassName("uni-swiper-wrapper")[0].parentNode.style="background-color: rgb(255, 255, 255); height: 300px;"
				 }).catch(error => {
						uni.showToast({
						
							title: error,icon: "none"
						})
				})
			},
			getCouponList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				userApi.couponList({
					status: '0'
				}).then((res) => {
					uni.hideLoading();
					
					this.myCouponList = res.data.data;
					this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			//微信扫二维码
			getScanCode() {
				if (this.userId) {
					WxJsApi.scanQRCode(1).then(res => {
						if(res) {
							API.scanCode(res).then((response) => {
						
							}).catch(error => {
								uni.showToast({
									title: error,
									icon: "none"
								})
							})
						}
					}).catch(error => {
			
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			fastRecharge() {
				if (this.userId) {
					uni.navigateTo({
						url: '/pages/user/finance/recharge'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			toInvoice(){
				if (this.userId) {
					uni.navigateTo({
						url: '/pages/MyInvoice/invoiceManagement'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			chargingRecord() {
				if (this.userId) {
					uni.navigateTo({
						url: '/pages/record/index'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			toSearchPile() {
				uni.navigateTo({
					url: '/pages/searchPile/searchPile'
				})
			},
			getUserInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				loginApi.findByOpenId({
					openId: this.carhelp.getOpenId()
				}).then((res) => {
					uni.hideLoading();
					this.headImg = res.data.regUser.headImg;
					this.userCard=res.data.userCard;
					var phone = res.data.regUser.phone;
					var phone1 = phone.slice(0,3);
					var phone2 = phone.slice(-4);
					this.userPhone = phone1 + '****' + phone2;
					
					if (res.code == 200&&res.result) {
						var token = res ? res.data.token : '';					
						this.carhelp.setPersonInfo(res.data.regUser );
						this.carhelp.setToken(token);
						this.carhelp.setPersonInfoPlus(res.data);
						console.log("setPersonInfoPlus")
					}
				}).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'
					})
				}
			},
			toMyCoupon() {
				if(this.userId) {
					uni.navigateTo({
						url: '/pages/user/coupon/myCoupon'
					})
				} 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'
					})
				}
			},
			myAppointment() {
				if(this.userId) {
					uni.navigateTo({
						url: '/pages/user/myReservation/myReservation'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			toFreeInstallation() {
				if(this.userId) {
					uni.navigateTo({
						url: '/pages/user/freeInstallment?isback=1'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			toJoin() {
				if(this.userId) {
					uni.navigateTo({
						url: '/pages/user/toJoin?isback=1'
					})
				} 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;
		margin-top: 18px;
		width: 25%;
		font-size: 14px
		
	}
	.lucency{
		opacity: 0.5;
	}

	.userIcon-main{
		display: flex;
		justify-content: space-between;
	    flex-wrap: wrap;
		font-size: 16px;
	}
	.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{
				font-size: 16px;
				display: flex;
				align-items: center;
				p{
					margin-left: 8px;
				}
			}
			span{
				color:#999;
			}
			.add{
				color:#999;
			}
		}
	}
	
	.userHead{
		display: flex;
		align-items: center;
		align-items: center;
		padding:40px 20px 0;
		
	.tag{
		display: flex;
		line-height: 20px;
		font-size: 12px;
		.iconfont-right{
			font-size: 12px;
			
		}
		.tag-1{
			padding-left: 12px;
			padding-right: 6px;
			border-radius: 50px;
			background: linear-gradient(to right,#D8C5A0,#F7EFDC);
			text-align: center;
			.iconfont{
				color: #9F9E9D;
			}
		}
		
		.tag-2{
			padding-left: 12px;
			padding-right: 6px;
			margin-left: 10px;
			border-radius: 50px;
			background-color: rgba(70, 255, 97, 100);
			color: rgba(0, 62, 30, 100);
			.iconfont{
				color: #008D4B ;
			}
			
		}
	}
		.userHead-img{
          position: relative;
		  
		}
		.md{
			width: 16px;
			height: 16px;
			background-color: #fff;
			border-radius: 999px;
			position: absolute;
			bottom: 0px;
			right: 0px;
		}
		.userHead-text{
			margin-left: 12px;
			h3{
				font-size: 20px;
				color:#fff;
				font-weight: normal;
			}
			
		}
	}
// 引导模块
   .userLead{
	   padding: 16px;
	   margin: 16px;
	   border-radius: 12px;
	   display: flex;
	   background-color: rgba(255, 255, 243, 100);
	   border: 1px solid rgba(226, 210, 187, 100);
	   .text1{
		   color: rgba(16, 16, 16, 100);
		   font-size: 32rpx;
		   line-height: 20px;
		   margin-bottom: 6px;
		   .svg-img{
			   width: 16px;
			   height: 16px;
			   margin-right: 4px;
		   }
	   }
	   .text2{
		   color: rgba(16, 16, 16, 100);
		   font-size: 36rpx;
		   line-height: 22px;
		   .free{
			   color: #ff7600;
		   }
	   }
	   .btn{
		   line-height: 100%;
		     margin: auto 13px;
		     margin-right: 0px;
		   .open{
			   
			   font-size: 32rpx;
			   line-height: 32px;
			   border-radius: 8px;
			   background: linear-gradient(#ff3d00, #ff9600);
			   color: #fff;
		
			   
		   }
	   }
   }
   // 包月卡
   .monthly-card{
	   padding: 16px;
	   margin: 16px;
	     margin-top: 45px;
	   border-radius: 8px;
	   background: linear-gradient(to right,#d3bd9e,#f5eedf);
	   display: flex;
	  .flex{
		  display: flex;
		  justify-content: space-between;
		  flex: 1;
		  line-height: 22px;
	  }
	   .img-box{
	   			   display: inline-block;
	   			   width: 22px;
	   			   height: 22px;
	   			   border-radius: 4px;
	   			   margin-right: 8px;
	   			   background-color: #fff;
	   			   text-align: center;
	   			   
	   			   .svg-img{
	   				   width: 16px;
	   				   height: 16px;
	   				   vertical-align: middle;
	   			   }
	   }
	   .text{
		    display: flex;
			color: #28241f;
		   
		   
	   }
	   .date{
		   float: right;
		   margin-right: 0;
		   color: #696056;
		   .iconfont{
			   
		   }
	   }
   }

	.userData{
		background-color: #fff;
		margin: 16px;
		padding: 16px ;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.userData-num{
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content:space-between;
		padding-right: 5px;
		.userData-data{
			font-size: 24px;
			font-weight: 600;
		
		}
		.userData-name{
			font-size: 16px;
		}
		.userData-foot{
			margin-top: 4px;
			color:#999;	
			font-size: 12px;
			.userData-foot-look {
				color: #00B962;
			}
		}
	}
	.userInfo-btn{
		padding: 6px 30px;
		// background-color: #00B962;
		// color:#fff;
		// border-radius: 15px;
	}
	.line{
		width: 0px;
		height: 36px;
		border: 1px solid rgba(237, 237, 237, 100);
	}
</style>