zk-driver-wechat-applet/pages/ucenter/index.vue

<template>
	<view>
		<top-box
		:token="token"
		:userinfo="userinfo"
		></top-box>
		<view class="ucenter">
			<view class="mydata">我的数据(累计)</view>
			<view class="data-box">
				<view class="datashow">
					<view class="icon"><image src="../../static/ucenter/icon3.png"></image></view>
					<view class="num">{{ucenter.exchangeCnt || '-'}}</view>
					<view>换电次数<text>/次</text></view>
				</view>
				<view class="datashow">
					<view class="icon"><image src="../../static/ucenter/icon4.png"></image></view>
					<view class="num">{{ucenter.exchangePower || '-'}}</view>
					<view class="unit">换电量<text>/(kW/h)</text></view>
				</view>
				<view class="datashow">
					<view class="icon"><image src="../../static/ucenter/icon5.png"></image></view>
					<view class="num">{{ucenter.powerFee || '-'}}</view>
					<view class="unit">预估费用<text>/元</text></view>
				</view>
			</view>
			<view class="common">
				<view class="title">常用功能</view>
				<view class="list" @click="getqrcode">
					<view><image src="../../static/ucenter/icon6.png"></image></view>
					<view>下载换电二维码</view>
					<view>></view>
				</view>
				<view class="list" @click="toCar">
					<view><image src="../../static/ucenter/icon7.png"></image></view>
					<view>我的车辆</view>
					<view>></view>
				</view>
				<view class="list" @click="toRecord">
					<view><image src="../../static/ucenter/icon8.png"></image></view>
					<view>换电记录</view>
					<view>></view>
				</view>
				<view class="list" @click="contact">
					<view><image src="../../static/ucenter/icon9.png"></image></view>
					<view>联系客服</view>
					<view>></view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" background-color="#fff" type="bottom">
			<view class="popuplist">
				<view><image src="../../static/code.jpg"></image></view>
				<view><text>车牌：</text> 渝AUU998</view>
				<view><text>车辆识别码：</text> LSPR********8273</view>
				<view>保存至相册</view>
			</view>
		</uni-popup>
		<tab-bar></tab-bar>
		<getmobile 
		v-if="isAuthShow"
		@updatetopinfo="updatetopinfo"
		></getmobile>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				qrcode:'../../static/code.jpg',
				isAuthShow:false,
				token:null,
				userinfo:null,
				serviceTel:null,//客服电话
				ucenter:{},
			}
		},
		onShow() {
			this.$store.dispatch("usersToken").then(()=>{
				//微信用户第二次登录
				this.isAuthShow = false;
				this.token=this.$store.getters.getToken
				this.userinfo=this.$store.getters.getUser
			}).catch(()=>{
				//微信用户首次登录
				this.isAuthShow = true;
			});
		},
		mounted() {
			this.getServiceTel()
			this.getUcenterData()
		},
		methods: {
			getUcenterData(){
				this.$http.ucenterData().then(rs=>{
					console.log(rs)
					if(rs.code === 0){
						this.ucenter=rs.data
					}else{
						this.$utils.msg(rs.msg);
					}
				}).catch(error=>{
					this.$utils.msg(error);
				});
			},
			//获取客服电话
			getServiceTel(){
				this.$http.getService().then(rs=>{
					if(rs.code === 0){
						this.serviceTel=rs.data
					}else{
						this.$utils.msg(rs.msg);
					}
				}).catch(error=>{
					this.$utils.msg(error);
				});
			},
			//更新头部信息
			updatetopinfo(data){
				if(this.$store.getters.getToken && this.$store.getters.getUser){
					this.token=data.token
					this.userinfo=data
				}
			},
			//联系电话
			contact(){
				let that=this;
				uni.showActionSheet({
					itemList: [`呼叫：${that.serviceTel}`],
					success: function (res) {
						if(!res.tapIndex){
							uni.makePhoneCall({
								phoneNumber:that.serviceTel,
							})
						}
					},
				});
			},
			//保存二维码到相册
			getqrcode(){
				this.$refs.popup.open('bottom')
			},
			toCar(){
				uni.navigateTo({
					url:'../ucenter/car'
				})
			},
			toRecord(){
				uni.navigateTo({
					url:'../ucenter/record'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popuplist{
		display: flex;
		flex-direction: column;
		text-align: center;
		image{
			width: 347rpx;
			height: 347rpx;
			margin-top: 20rpx;
		}
		text{
			color: #888e9c;
		}
		view{
			margin-top: 15rpx;
		}
		view:last-child{
			padding: 25rpx 0;
			border-top: 10rpx solid rgba(149, 150, 151, 0.5);
		}
	}
	.ucenter{
		padding: 0 30rpx;
		.mydata{
			color: #1d2129;
			font-size: 32rpx;
			font-weight: bold;
			margin: 40rpx 0;
			text-indent:10rpx;
		}
		.data-box{
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			padding: 25rpx;
			box-sizing: border-box;
			border-radius: 30rpx;
			.icon{
				height: 100rpx;
			}
			.num{
				color: #1d2129;
				font-weight: bold;
				font-size: 32rpx;
				height: 50rpx;
			}
			.unit{
				color: #666666;
				font-size: 30rpx;
			}
			image{
				width: 80rpx;
				height: 80rpx;
			}
			text{
				color: #86909c;
				font-size: 28rpx;
			}
		}
		.common{
			display: flex;
			margin-top: 20rpx;
			background-color: #fff;
			padding: 25rpx 35rpx;
			box-sizing: border-box;
			border-radius: 30rpx;
			flex-direction: column;
			height: 518rpx;
			justify-content:space-between;
			.title{
				color: #1d2129;
				font-size: 32rpx;
				font-weight: bold;
			}
			.list{
				display: flex;
				image{
					width: 36rpx;
					height: 36rpx;
				}
				view:first-child{
					width: 56rpx;
					padding-top: 5rpx;
				}
				view:nth-child(2){
					color: #1d2129;
					font-size: 30rpx;
					font-weight: 500;
					width: 558rpx;
				}
				view:last-child{
					color: #959ea8;
					font-weight: bold;
					font-size: 32rpx;
				}
			}
		}
	}
</style>