uniapp 学习笔记二十 用户登录信息存储和跨组件使用

uniapp 学习笔记二十 用户登录信息存储和跨组件使用

 

app.vue

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
            //全局生命周期
            try{
                const value = uni.getStorageSync('userInfo');
                if (value) {
                    console.log(value);
                    this.$store.commit('user/initInfo',value)
                }
            }catch(e){
                //TODO handle the exception
                console.log('提取用户信息失败');
            }
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
    /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
    @import "@/uni_modules/uview-ui/index.scss";

	/*每个页面公共css */
    @import url("@/common/uni.css");
    
</style>

index.js

import Vue from "vue"
import Vuex from "vuex"
import count from './count.js'
import condition from './condition.js'
import user from './user.js'
Vue.use(Vuex)
const store = new Vuex.Store({
    // 定义状态对象
    // state:{
    //     num:100
    // }
    modules:{
        count,
        condition,
        user
    }
})
export default store

user.js

import {$post} from '../utils/request.js'
export default {
    namespaced:true, //开启命名空间后,访问所有属性都需要带模块名
    state(){
        return {
            userInfo:null
        }
    },
    mutations:{
        initInfo(state,info){
            // 存入状态机变量
            state.userInfo = info
        }
    },
    actions:{
        userLoginAct(context,info){
            $post('/1.1/login',info).then(res=>{
                console.log(res)
                let {code} = res
                if (code) {
                    let title = code == 211 ? '账号不存在' : '密码错误'
                    uni.showToast({
                        title,
                        icon:'none'
                    })
                    return
                }
                context.commit('initInfo',res)
                // 存入本地存储
                uni.setStorage({
                    key:'userInfo',
                    data:info
                })
                // 返回上一页
                uni.navigateBack({
                    delta:1
                })
            })
        }
    }
}

login.vue

<template>
	<view class="content">
		<view class="logo"><image src="../../static/kitty-BasicLogin/logo.png" mode=""></image></view>
		<view class="uni-form-item uni-column">
			<!-- <input type="tel" class="uni-input" name="" placeholder="请输入手机号" /> -->
			<input v-model="info.username" type="text" class="uni-input" name="" placeholder="请输入用户名" />
		</view>
		<view class="uni-form-item uni-column">
			<input v-model="info.password" type="password" class="uni-input" name="" placeholder="请输入密码" />
		</view>
		<button type="primary" @tap="handleLogin">登陆</button>
		<view class="links"><view @tap="gotoForgetPassword">忘记密码？</view><view>|</view><view class="link-highlight" @tap="gotoRegistration">注册账号</view></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{
				    username:'曹国舅',
				    password:'123'
				}
			}
		},
		onLoad() {
			
		},
		methods: {
			gotoRegistration: function () {
				uni.navigateTo({url: 'registration'});
			},
			gotoForgetPassword: function () {
				uni.navigateTo({url: 'forget-password'});
			},
            handleLogin(){
                /* 
                //方法一
                this.$post('/1.1/login',this.info).then(res=>{
                    console.log(res)
                }) */
                // 方法二 通过状态机
                this.$store.dispatch('user/userLoginAct',this.info)
            }
		}
	}
</script>

<style lang="scss" scoped>
	$color-primary: #b49950;
	.content{
		padding: 100upx;
	}
	.logo{
	    text-align: center;
		image{
		    height: 200upx;
		    width: 200upx;
		    margin: 0 0 60upx;
		}
	}
	.uni-form-item{
		margin-bottom: 40upx;
		padding: 0;
		border-bottom: 1px solid #e3e3e3;
		.uni-input{
			font-size: 30upx;
			padding: 7px 0;
            height: 70upx;
		}
	}
	button[type="primary"]{
		background-color: $color-primary;
		border-radius: 0;
		font-size: 34upx;
		margin-top: 60upx;
	}
	.links{
		text-align: center;
		margin-top: 40upx;
		font-size: 26upx;
		color: #999;
		view{
			display: inline-block;
			vertical-align: top;
			margin: 0 10upx;
		}
		.link-highlight{
			color: $color-primary
		}
	}
</style>

my.vue

<template>
    <view class="">
        
        <view class="cont"></view>
        <view class="margin bg-fff">
            <view class="text-center" @tap="handlerUser">
                <image class="avatar" src="../../static/logo.png" />
            </view>
            <view class="fs-28 text-center">
                {{username}}
            </view>
            <view class="flex grid">
                <view v-for="(item,index) in gridArr" class="flex flex-direction align-center padding">
                    <text :class="['iconfont margin-bottom-xs', item.icon]"></text>
                    {{item.name}}
                </view>
                <view v-for="(item,index) in gridArr" class="flex flex-direction align-center padding">
                    <text :class="['iconfont margin-bottom-xs', item.icon]"></text>
                    {{item.name}}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                gridArr:[
                    {
                        icon:'icon-zhangdan-xianxing',
                        name:'我的订单',
                    },{
                        icon:'icon-weicheng',
                        name:'待收货',
                    },{
                        icon:'icon-kaoqinchuqin',
                        name:'待付款',
                    },{
                        icon:'icon-yonghuziliao',
                        name:'会员等级',
                    },
                ],
                
            }
        },
        methods: {
            handlerUser(){
                uni.navigateTo({
                    url:'../user/login'
                })
            }
        },
        computed:{
            username(){
                let {userInfo} = this.$store.state.user
                let name = userInfo ? userInfo.username : '尚未登陆'
                return name
            }
        }
    }
</script>

<style lang="scss">
.cont{
    background-color: #f6f6f6;
    height: 400upx;
}
.grid .iconfont{
    font-size: 70upx;
    color: #888888;
}
.avatar{
    width: 150upx;
    height: 150upx;
    border-radius: 50%;
    // transform: translateY(-50%);
    margin-top: -75upx;
}
.margin.bg-fff{
    margin-top: -200upx;
}
</style>