<template> <view class="user-content"> <!-- 头部 --> <view class="user-head" > <view> <open-data type="userAvatarUrl" class="user-photo"></open-data> <!-- <u-image v-show="!hasLogin" src="/static/logo.png" width="100" height="100"></u-image> --> </view> <view class="user-info"> <view v-if="hasLogin" class="user-info-item">{{userData.stationName || ''}}</view> <view v-if="hasLogin" class="user-info-item">{{userData.gatherName||''}} {{userData.gatherPhone || ''}}</view> <u-button v-else="!hasLogin" plain size="mini" shape="circle" @click="toLoginPage">立即登录</u-button> </view> </view> <!-- 列表 --> <view class="user-list"> <u-cell-group> <u-cell-item icon="file-text" icon-size="40" :icon-style="{color:'#ffaa00'}" index="0" @click="toPage" title="服务协议及隐私政策"></u-cell-item> <u-cell-item v-if="hasLogin" icon="lock" icon-size="38" :icon-style="{color:'#00aaff'}" index="1" @click="toPage" title="修改密码"></u-cell-item> </u-cell-group> </view> <view class="user-list quit"> <u-cell-group> <u-cell-item v-if="hasLogin" icon="minus-circle" icon-size="40" index="3" @click="quitSys" title="退出登录"></u-cell-item> </u-cell-group> </view> </view> </template> <script> import { checkLogin, getUserInfo, logout } from '@/api/login.js' export default { data() { return { hasLogin: false, userData: {}, }; }, onShow() { checkLogin().then(res => { this.hasLogin = res.status == 200 console.log(this.hasLogin,res,'this.hasLogin') if(this.hasLogin){ this.getUserInfo() }else{ // uni.navigateTo({ // url:"/pages/login/login" // }) } }) }, computed: { user() { return this.userData } }, onLoad() { // 开启分享 uni.showShareMenu({ withShareTicket: true, menus: ['shareAppMessage', 'shareTimeline'] }), // uni.getSystemInfo({ // success: function(res) { // console.log(res.model,'1') // console.log(res.pixelRatio,'2') // console.log(res.windowWidth,'3') // console.log(res.windowHeight,'4') // console.log(res.language,'5') // console.log(res.version,'6') // console.log(res.SDKVersion,'7','---当前使用小程序版本号') // console.log(res.swanNativeVersion,'7','宿主平台版本号') // } // }) }, methods:{ // 获取用户信息 getUserInfo(){ getUserInfo().then(res => { console.log(res,'getUserInfo') if(res.status == 200){ this.$u.vuex("vuex_userData",res.data) this.userData = res.data console.log(this.userData,'-----用户信息') } }) }, // 打开对应的页面 toPage(index){ console.log(index) let pageUrl=[ '/pages/agreement/agreement?fromPage=usercenter', '/pages/userCenter/changePwd', ] uni.navigateTo({ url: pageUrl[index] }) }, // 退出登录 quitSys(){ let _this = this uni.showModal({ title: '提示', content: '您确定要退出登录吗?', success(res) { if (res.confirm) { logout().then(res => { console.log(res,'logout') getApp().globalData.token = '' _this.$u.vuex('vuex_token','') // 关闭socket uni.reLaunch({ url: '/pages/login/login' }) }) } } }) }, toLoginPage(){ uni.navigateTo({ url: '/pages/login/login' }) } } } </script> <style lang="scss"> .user-content{ width: 100%; .user-head{ background: #0DC55F; display: flex; align-items: center; padding: 35rpx 55rpx; .user-info{ flex-grow: 1; padding: 0 20rpx; color: #FFFFFF; .user-info-item{ margin: 10rpx 0; :first-child{ font-size: 34upx; } } } .user-photo{ display: block; width: 100rpx; height: 100rpx; border-radius: 50%; overflow: hidden; } } .my-ledou{ background: #FFFFFF; border-radius: 15upx; display: flex; align-items: center; justify-content: space-between; padding: 20upx; margin: 20upx; box-shadow: 0upx 3upx 6upx #eee; .user-jifen{ display: flex; align-items: center; text{ font-size: 40upx; font-weight: bold; color: red; } >view{ &:first-child{ display: flex; align-items: center; } } } } .user-list{ border-radius: 15upx; margin: 20upx; overflow: hidden; box-shadow: 0upx 3upx 6upx #eee; .quit{ margin-top: 20upx; } } .user-btn{ padding: 85rpx 200rpx; } } </style>