uni-app个人中心

个人中心页面

<template><view><view class="u-m-t-20"><view class="center"><view class="u-m-t-12 u-m-l-60"><!-- <u-avatar :src="src" mode="circle" size="160"></u-avatar> --><image :src="list.avatar" style="width: 180rpx; height: 180rpx; border-radius: 60px;"></image></view><!-- <image src=""></image> --><view class="center-item"><!-- <view>昵称：{{list.nickName}}</view> --><view>用户名：{{list.userName}}</view><view>账户ID：{{list.userId}}</view></view></view></view><view class="u-m-t-20"><u-cell-group><u-cell-item icon="account" title="个人信息" @click="toBaseInfo"></u-cell-item></u-cell-group></view><view class="u-m-t-20"><u-cell-group><u-cell-item icon="bag" title="订单"></u-cell-item><u-cell-item icon="reload" title="修改密码" @click="changePassword"></u-cell-item><u-cell-item icon="kefu-ermai" title="意见反馈"></u-cell-item></u-cell-group></view><view class="u-m-t-20"><u-cell-group><!-- <u-cell-item icon="account" title="登录" @click="login"></u-cell-item> --><u-cell-item icon="close" title="退出" @click="logout"></u-cell-item></u-cell-group></view></view></template>

<script>import api from "../../request/api.js"export default {data() {return {src: '../../static/phone/105.webp',list:[]}},onLoad() {// this.getuser()this.login()/* 判断是否token *//* if(!uni.getStorageSync('token')){this.$u.toast('请登录')setTimeout(()=>{uni.navigateTo({url:'../auth/login'})},3000)} */},onShow() {this.getuser()},methods: {/* 个人信息 */toBaseInfo(){uni.navigateTo({url:'./baseInfo'})},async getuser(){const res=await api.Getuser()console.log(res)this.list = res.user},/* 修改密码 */changePassword(){uni.navigateTo({url:'./changePassword'})},/* 登录 */login(){if(!uni.getStorageSync('token')){this.$u.toast('请登录')setTimeout(()=>{uni.navigateTo({url:'../auth/login'})},3000)}},/* 退出登录 */async logout(){uni.removeStorageSync('token')this.$u.toast('退出登录')setTimeout(()=>{uni.switchTab({url:'../index/index'})},1500)}}}
</script>

<style lang="scss" scoped>
page{background-color: #DCDFE6;
}.center{background-color: #FFFFFF;display: flex;/* image{height: 70px;width: 70px;margin-top: 20rpx;// margin: 130rpx;} */.center-item{margin-top:60rpx;margin-left: 40rpx;}}
</style>

登录页面

<template><view class="wrap"><view class="content"><view class="title">欢迎登录智慧城市</view><input class="u-border-bottom" type="text" v-model="username" placeholder="请输入用户名" /><input class="u-border-bottom" type="password" v-model="password" placeholder="请输入密码" /><button @tap="submit" :style="[inputStyle]" class="getCaptcha">登录</button><view class="alternative"><view class="password">找回密码</view><view class="issue" @click="register">注册</view></view></view></view>
</template><script>import api from '../../request/api.js'
export default {data() {return {username: '',password: ''}},async onLoad() {},computed: {inputStyle() {let style = {};if(this.username && this.password) {style.color = "#fff";style.backgroundColor = this.$u.color['warning'];}return style;}},methods: {register(){uni.redirectTo({url:'./register'})},async submit() {if(!this.username || !this.password) return//处理登录用的参数const params = {username:this.username,password:this.password}//请求API,执行登录const res  = await api.Login(params)uni.setStorageSync('token',res.token)setTimeout(()=>{uni.switchTab({url:'../center/center'})},1500)this.$u.toast('登录成功')}}
};
</script><style lang="scss" scoped>
.u-border-bottom{margin-bottom: 40rpx !important;
}
.wrap {font-size: 28rpx;.content {width: 600rpx;margin: 80rpx auto 0;.title {text-align: left;font-size: 60rpx;font-weight: 500;margin-bottom: 100rpx;}input {text-align: left;margin-bottom: 10rpx;padding-bottom: 6rpx;}.tips {color: $u-type-info;margin-bottom: 60rpx;margin-top: 8rpx;}.getCaptcha {background-color: rgb(253, 243, 208);color: $u-tips-color;border: none;font-size: 30rpx;padding: 12rpx 0;&::after {border: none;}}.alternative {color: $u-tips-color;display: flex;justify-content: space-between;margin-top: 30rpx;}}.buttom {.loginType {display: flex;padding: 350rpx 150rpx 150rpx 150rpx;justify-content:space-between;.item {display: flex;flex-direction: column;align-items: center;color: $u-content-color;font-size: 28rpx;}}.hint {padding: 20rpx 40rpx;font-size: 20rpx;color: $u-tips-color;.link {color: $u-type-warning;}}}
}
</style>

uni-app个人中心相关推荐

HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
Teams App 资源中心种草指南
备受企业关注的 Teams App 资源中心 IT 管理员.企业管理者的必备效率软件今日种草者免费安装人工录音 + AI 配音,高效创建企业资源,管理员随时下载内容数据资源中心作为一款提高企业生 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
【Android开发】App消息中心构建
如何构建App消息中心主要涉及到的类 LauncherApplication.java MsgCenter.java MsgUtil MsgPackage MsgEvent LauncherAppl ...
uni App+H5 实现人脸识别
uni App+H5 实现人脸识别通过h5的视频video管理设备摄像头(不要关),在打开视频摄像时快照截取人脸照片传送到后台通过API接口调用百度人脸识别结果并通过返回数据解析自己业务需求. 1. ...

uni-app个人中心

个人中心页面

登录页面

uni-app个人中心相关推荐

最新文章

热门文章