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

<template>
	<view>
		<top-box :userinfo="userinfo" :days="days" keys="2"></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*1).toFixed(2) || '-'}}</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*1).toFixed(2) || '-'}}</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><image src="../../static/ucenter/dayu.png"></image></view>
				</view>
				<view class="list" @click="toRecord">
					<view>
						<image src="../../static/ucenter/icon8.png"></image>
					</view>
					<view>换电记录</view>
					<view><image src="../../static/ucenter/dayu.png"></image></view>
				</view>
				<view class="list" @click="contact">
					<view>
						<image src="../../static/ucenter/icon9.png"></image>
					</view>
					<view>联系客服</view>
					<view><image src="../../static/ucenter/dayu.png"></image></view>
				</view>
				<view class="list" @click="goAbout">
					<view><image src="../../static/ucenter/icon10.png"></image></view>
					<view>关于我们</view>
					<view><image src="../../static/ucenter/dayu.png"></image></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>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// qrcode: '../../static/code.jpg',
				token: this.$store.state.users.token,
				userinfo: this.$store.state.users,
				serviceTel: null, //客服电话
				ucenter: {},
				days: 0,
			}
		},
		onShow() {
			this.getServiceTel()
			this.getUcenterData()
			this.getUserDays()
		},
		methods: {
			//获取加入天数
			getUserDays() {
				this.$http.getDays().then(res => {
					if (res.code === 0) {
						this.days = res.data
					} else {
						this.$utils.msg(res.msg);
					}
				})
			},
			getUcenterData() {
				this.$http.ucenterData().then(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.$storage.getJson("token") && this.$store.state.users) {
					this.token = data.token
					this.userinfo = data
				}
			},
			//关于我们
			goAbout(){
				uni.navigateTo({
					url:'/pages/ucenter/about'
				})
			},
			//联系电话
			contact() {
				let that = this;
				const modelPhone = uni.getSystemInfoSync();
				if (modelPhone.platform == 'ios') {
					uni.makePhoneCall({
						phoneNumber: that.serviceTel,
					})
				}else{
					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;

			.datashow {
				background-color: #fff;
				box-sizing: border-box;
				border-radius: 25rpx;
				box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(226,226,226,0.25);
				padding: 25rpx;
				.icon {
					height: 100rpx;
				}

				.num {
					color: #1d2129;
					font-weight: bold;
					font-size: 32rpx;
					height: 50rpx;
				}

				.unit {
					color: #666666;
					font-size: 30rpx;
				}

				image {
					width: 60rpx;
					height: 60rpx;
				}

				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-around;

			.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>