<template> <view class="content"> <view class="list-container"> <view class="list-item margin-bot"> <view class="list-item-left"> <text>头像</text> </view> <view class="list-item-right"> <open-data class="user-photo" type="userAvatarUrl"></open-data> <!-- <u-icon class="back-img" name="arrow-right" color="#9DA8B5"></u-icon> --> </view> </view> <view class="list-item border-bottom"> <view class="list-item-left"> <text>名称</text> </view> <view class="list-item-right"> <open-data type="userNickName"></open-data> <!-- <u-icon class="back-img" name="arrow-right" color="#9DA8B5"></u-icon> --> </view> </view> <view class="list-item margin-bot"> <view class="list-item-left"> <text>性别</text> </view> <view class="list-item-right"> <open-data type="userGender" lang="zh_CN"></open-data> <!-- <u-icon class="back-img" name="arrow-right" color="#9DA8B5"></u-icon> --> </view> </view> <view class="list-item "> <view class="list-item-left"> <text>联系电话</text> </view> <view class="list-item-right"> <text>{{userInfo.mobile}}</text> <!-- <u-icon class="back-img" name="arrow-right" color="#9DA8B5"></u-icon> --> </view> </view> </view> <view class="bottom-cont" @click="loginOut"> 退出登录 </view> <uni-popup ref="openModal" type="center"> <uni-popup-dialog content="确定退出登录吗?" @confirm="onOk" :title="title"></uni-popup-dialog> </uni-popup> </view> </template> <script> import uniPopup from '@/components/uni-popup/uni-popup.vue' import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue' import service from '../../service.js'; import mIcon from '../../components/m-icon/m-icon.vue' import { mapState, mapMutations } from 'vuex' export default { components: { mIcon,uniPopup,uniPopupDialog }, data() { return { userInfo:'', title:'', } }, onShow() { //检测是否登录 this.$store.dispatch('checkLogin') }, computed: { ...mapState(['hasLogin']) }, methods: { loginOut(){ this.$refs.openModal.open() // this.$store.dispatch('userLogout'); // setTimeout(function(){ // uni.redirectTo({ // url: '/pages/login/login' // }); // },300) }, onOk(){ this.$refs.openModal.close() this.$store.dispatch('userLogout'); setTimeout(function(){ uni.redirectTo({ url: '/pages/login/login' }); },300) } }, onLoad() { let UserInfo = uni.getStorageSync('userInfo'); this.userInfo = UserInfo; console.log(UserInfo,"UserInfo") // 开启分享 uni.showShareMenu({ withShareTicket: true, menus: ['shareAppMessage', 'shareTimeline'] }) }, onReady() { } } </script> <style lang="less" scoped> .content{ padding: 0; background: rgb(245,245,245); } .list-container{ width: 100%; box-sizing:border-box; .border-bottom{ padding-left: 32rpx; border-bottom: 1px solid #E5E5E5; } .margin-bot{ margin-bottom: 20rpx; } .list-item{ width: 100%; background-color: #fff; display: flex; padding: 30rpx 32rpx; justify-content: space-between; align-items:center; // border-bottom: 1px solid #E5E5E5; .user-photo{ display: block; width: 100rpx; height: 100rpx; border-radius: 50%; overflow: hidden; } .list-item-left{ font-size: 36rpx; color: #191919; } .list-item-right{ font-size: 36rpx; color: #666666; display: flex; align-items: center; .back-img{ width: 18rpx; height: 34rpx; margin-left: 20rpx; } } } } .bottom-cont{ position: fixed; bottom: 0; width: 100%; background-color: #fff; height: 110rpx; font-size: 36rpx; color: #999999; text-align: center; line-height: 110rpx; } </style>