parking_h5/pages/center/index.vue

<template>
	<view>
		<!-- ===================================== tabbar ===================================== -->
		<u-navbar title-color="#fff" :custom-back="customBack" :border-bottom="false" back-icon-color="#CCE8FF"
			:background="{ background: '#008CFF' }" title="我的"></u-navbar>

		<!-- ===================================== 头像 ===================================== -->
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30 u-p-t-30">
			<view class="u-m-r-24" @click="clickHead">
				<u-avatar :src="userInfo.headImgUrl || pic" size="140"></u-avatar>
			</view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20">{{ userInfo.nickname || userInfo.mobile }}</view>
				<view class="u-font-14">手机号:{{ userInfo.mobile || '暂无' }}</view>
			</view>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<!-- <u-cell-item title="贵州银行支付" @click="guizhouPay()">
					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="wodecheliang"></u-icon>
        </u-cell-item>-->
				<u-cell-item title="我的车辆" @click="openPage('pages/myCars/myCars', true)">
					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="wodecheliang"></u-icon>
				</u-cell-item>
				<u-cell-item title="停车记录" @click="openPage('pages/center/order/order')">
					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="tingchejilu"></u-icon>
				</u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<!-- <u-cell-item title="充值" @click="openPage('pages/myCars/myCars')">
					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="chongzhi"></u-icon>
        </u-cell-item>-->
				<u-cell-item title="包月" @click="openPage('pages/center/monthly/monthly')">
					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="baoyue"></u-icon>
				</u-cell-item>
				<!-- <u-cell-item title="提现" @click="openPage('pages/center/order/order')">
					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="tixian"></u-icon>
        </u-cell-item>-->
				<!-- <u-cell-item title="退款" @click="openPage('pages/center/order/order')">
					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="tuikuan"></u-icon>
        </u-cell-item>-->
				<!-- <u-cell-item title="账单记录" @click="openPage('pages/center/order/order')">
					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="zhangdanjilu"></u-icon>
        </u-cell-item>-->
			</u-cell-group>
		</view>

		<!-- <view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item title="我的优惠" @click="openPage('pages/myCars/myCars')">
					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="wodeyouhui"></u-icon>
				</u-cell-item>
			</u-cell-group>
    </view>-->
		<!-- <view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item title="发票管理" @click="openPage('pages/center/invoice/invoice')">
					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="fapiaoguanli"></u-icon>
				</u-cell-item>
			</u-cell-group>
    </view>-->

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item title="消息中心" @click="openPage('pages/message/message', true)">
					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="xiaoxi"></u-icon>
					<u-badge type="success" :count="messageNum" :offset="[38, 80]"></u-badge>
				</u-cell-item>
			</u-cell-group>
		</view>
		<view class="u-m-t-20 u-m-b-40">
			<u-cell-group>
				<u-cell-item title="拨打客服电话" @click="callPhoneShow = true">
					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="dianhua"></u-icon>
				</u-cell-item>
			</u-cell-group>
		</view>
		<u-select v-model="callPhoneShow" :list="callPhoneList" @confirm="phoneCall"></u-select>

		<!-- <view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="phone" title="手机号登录" @click="openPage('/pages/center/phoneLogin/phoneLogin')"></u-cell-item>
			</u-cell-group>
    </view>-->

		<!-- ===================================== 登出提示 ===================================== -->
		<u-modal v-model="logoutPop" :title-style="{ color: '#404040' }" title="登出提示" :show-confirm-button="true"
			confirm-text="确认" :confirm-style="{ backgroundColor: '#3397FA', color: '#fff' }" :show-cancel-button="true"
			cancel-text="取消" @cancel="logoutPop = false"
			:cancel-style="{ backgroundColor: '#EBF1FF', color: '#3397FA' }" @confirm="loginOut">
			<view class="slot-content">
				<view class="pay-tips">你确认退出登录吗?</view>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import getUrlParams from '../../utils/getUrlParams.js'
	export default {
		data() {
			return {
				// 默认头像
				pic: '/static/img/default-avatar.png',
				// 用户信息
				userInfo: [],
				logoutPop: false,
				messageNum: 0,
				callPhoneShow: false,
				callPhoneList: []
			}
		},
		onLoad() {},
		onShow() {
			this.getMsgNum()
			this.getDict()
			if (this.$store.state.vuex_hasLogin) {
				this.userInfo = this.$store.state.vuex_user;
				if (this.$store.state.vuex_wxinfo) {
					this.userInfo = Object.assign(this.userInfo, this.$store.state.vuex_wxinfo);
				}
			} else {
				this.userInfo = [];
			}
		},
		methods: {
			/**
			 * 获取客服电话字典
			 */
			getDict() {
				this.$u.api.getDictApi({
					type: 'customer_service_phone'
				}).then(res => {
					if (res.code === 200) {
						this.callPhoneList = res.data.map(item => {
							return {
								value: item.dictValue,
								label: item.dictLabel
							}
						})
					}
				})
			},
			/**
			 * 打开新页面
			 * @param {String} path 跳转路径
			 * @param {flag} flag 返回存储标识
			 * */
			openPage(path, flag) {
				this.$u.route({
					url: path
				})
				if (flag) {
					uni.setStorage({
						key: 'messageBack',
						data: 'pages/center/index'
					})
				}
			},
			// 获取消息未读条数
			getMsgNum() {
				this.$u.api.getIndexData()
					.then(res => {
						if (res.code === 200) {
							let num = 0
							if (res.data.news) {
								res.data.news.forEach(item => {
									if (item.readFlag == 0) {
										num += 1
									}
								})
							}
							this.messageNum = num
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							})
						}
					})
			},
			// tabbar 返回
			customBack() {
				this.$u.route({
					type: 'switchTab',
					url: 'pages/index/index'
				});
			},
			// 拨打电话
			phoneCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone[0].value || '0851-38222696'
				});
			},
			// 登出
			loginOut() {
				this.$u.api.codeV2Api.logoutApi().then(res => {
					if (res.code === 200) {
						this.$u.vuex('vuex_hasLogin', false);
						this.$u.vuex('vuex_token', '');
						this.$u.vuex('vuex_user', null);
						uni.removeStorage({
							key: 'jumpUrl'
						});
						uni.removeStorage({
							key: 'backUrl'
						});
						setTimeout(() => {
							this.logoutPop = false
							uni.navigateTo({
								url: '/pages/center/phoneLogin/phoneLogin'
							})
						}, 500)
					} else {
						this.$refs.uToast.show({
							title: res.msg || '登出失败',
							type: 'error'
						})
					}
				})
			},
			// 点击头像
			clickHead() {
				if (this.$store.state.vuex_hasLogin) {
					this.logoutPop = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: $my-page-bg-color;
	}

	.user-box {
		position: relative;
		background-color: $my-main-color;
		color: #fff;

		&:after {
			position: absolute;
			right: 0;
			bottom: 0;
			content: "";
			background: url(../../static/img/center-top-bg.png) no-repeat;
			background-position: -90rpx 0;
			width: 305rpx;
			height: 145rpx;
			z-index: 999;
		}
	}

	.u-avatar {
		border: 10rpx solid #4caeff;
	}

	.u-cell-box /deep/ .u-cell__left-icon-wrap,
	.u-cell-box /deep/ .custom-icon {
		color: $my-main-color;
		margin-right: 10rpx;
	}

	.pay-tips {
		text-align: center;
		margin: 30rpx 0;
	}
</style>