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="phoneCall(phoneNo)">
          <u-icon slot="icon" custom-prefix="custom-icon" size="35" name="dianhua"></u-icon>
        </u-cell-item>
      </u-cell-group>
    </view>

    <!-- <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: [],
      phoneNo: '0851-38222696',
      logoutPop: false,
      messageNum: 0
    }
  },
  onLoad() {},
  onShow() {
		this.getMsgNum()
    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: {
		/**
		 * 打开新页面
		 * @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
      });
    },
		// 登出
    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>