<template> <view class="user-content"> <!-- 头部 --> <view class="user-head"> <view class="user-photo"> <open-data type="userAvatarUrl" class="avatar"></open-data> </view> <view class="user-info"> <text class="user-name">{{userInfoData.name || ''}}</text> <text class="user-phone">{{userInfoData.phone || ''}}</text> </view> </view> <!-- 列表 --> <view class="user-list"> <u-cell-group> <!-- <u-cell-item icon="search" icon-size="36" :icon-style="{color:'#ff0000'}" index="0" @click="toPage" title="用户乐豆查询及核销"></u-cell-item> --> <u-cell-item icon="info-circle" icon-size="38" :icon-style="{color:'#55aa00'}" index="2" @click="toPage" title="关于我们"></u-cell-item> <u-cell-item icon="file-text" icon-size="40" :icon-style="{color:'#ffaa00'}" index="1" @click="toPage" title="服务协议及隐私政策"></u-cell-item> <u-cell-item icon="lock" icon-size="38" :icon-style="{color:'#00aaff'}" index="3" @click="toPage" title="修改密码"></u-cell-item> </u-cell-group> </view> <!-- 退出 --> <view class="user-btn"> <u-button type="success" :custom-style="quitButton" @click="quitSys" shape="circle">退出登录</u-button> </view> </view> </template> <script> import {logout} from '@/api/login.js' import { getUserInfo } from '@/api/user.js' export default { data() { return { quitButton: { borderRadius:'100rpx', fontSize:'30rpx', background: '#2ab4e5' }, userInfoData: null, // 用户信息 userAvatarUrl: '' // 用户头像 }; }, onShow() { this.getUserInfo() }, onLoad() { }, methods:{ // 获取用户信息 getUserInfo(){ getUserInfo().then(res => { if(res.status == 200){ this.userInfoData = res.data }else{ this.userInfoData = null } }) }, // 打开对应的页面 toPage(index){ let pageUrl=[ '/pages/userCenter/leDouQuery', '/pages/agreement/agreement?fromPage=usercenter', '/pages/userCenter/aboutUs', '/pages/userCenter/changePwd' ] uni.navigateTo({ url: pageUrl[index] }) }, // 跳转 toUserPage(){ // 未登录跳转登录,已登录跳转用户信息页 uni.navigateTo({ url: '/pages/userCenter/userInfo/userInfo' }) }, // 乐豆明细 toLdPage(){ uni.navigateTo({ url: '/pages/userCenter/ldDetailed' }) }, bindGetUserInfo(res){ console.log(res) }, // 退出登录 quitSys(){ let _this = this uni.showModal({ title: '提示', content: '您确定要退出登录吗?', success(res) { if (res.confirm) { logout({}).then(res => { getApp().globalData.token = '' _this.$u.vuex('vuex_token','') // 关闭socket // _this.$store.commit("$closeWebsocket") uni.reLaunch({ url: '/pages/login/login' }) }) } } }) } } } </script> <style lang="scss"> .user-content{ width: 100%; .user-head{ background: #2ab4e5; display: flex; align-items: center; padding: 35rpx 55rpx; .user-photo{ flex-shrink: 0; margin-right: 5rpx; width: 130rpx; height: 130rpx; border-radius: 50%; overflow: hidden; } .user-info{ flex-grow: 1; padding: 0 20rpx; color: #FFFFFF; .user-name{ display: block; font-size: 30rpx; margin-bottom: 20rpx; } .user-phone{ display: block; font-size: 26rpx; } } } .user-list{ border-radius: 15upx; margin: 20upx; overflow: hidden; box-shadow: 0upx 3upx 6upx #eee; } .user-btn{ padding: 85rpx 200rpx; } } </style>