uniapp页面设计中,个人中心页面中,只有当登录成功了,才显示真正的个人中心页面,写代码
时间: 2024-06-01 08:11:07 浏览: 19
<template>
<view>
<view v-if="isLogin">
<!-- 登录成功后显示的个人中心页面 -->
<view>欢迎来到个人中心</view>
<view>{{userInfo}}</view>
<button @click="logout">退出登录</button>
</view>
<view v-else>
<!-- 未登录时显示的页面 -->
<button @click="login">登录</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isLogin: false, // 是否登录
userInfo: {}, // 用户信息
}
},
methods: {
// 登录
login() {
// 调用登录接口,获取用户信息
// 如果登录成功,将isLogin设置为true,并将获取到的用户信息赋值给userInfo
// 如果登录失败,弹出提示信息
// 示例代码:
// this.isLogin = true;
// this.userInfo = {
// name: '张三',
// age: 18,
// sex: '男',
// };
// uni.showToast({
// title: '登录成功',
// icon: 'success',
// });
},
// 退出登录
logout() {
// 将isLogin设置为false,清空userInfo
// 示例代码:
// this.isLogin = false;
// this.userInfo = {};
// uni.showToast({
// title: '退出登录成功',
// icon: 'success',
// });
},
},
};
</script>