还是接着之前的内容
项目情况截图
代码
mine.vue
<template>
<view class="info">
<view class="user-info">
<image :src="userInfo.icon" mode="" class="avatar"></image>
<text class="nickname">{{userInfo.nickname}}</text>
<text class="username">用户名：{{userInfo.username}}</text>
</view>
<navigator url="/pages/mine/login/login">登录</navigator>
</view>
</template>
<script>
import {getMemberInfo} from '@/api/mine/index.js'
import mix from '@/minxins/index.js'
export default {
name:'Mine',
mixins:[mix],
data() {
return {
userInfo:null
};
},
methods:{
// getUser(){
// let token = uni.getStorageSync("b-token");
// if(token){
// let userInfo = uni.getStorageSync("b-userInfo");
// this.userInfo = userInfo;
// }else{
// uni.showModal({
// title:'登录提示',
// content:'暂未登录，是否重新登录',
// success(res) {
// console.log(res)
// if(res.confirm){
// //清空本地数据
// uni.clearStorageSync();
// uni.navigateTo({
// url:'/pages/mine/login/login'
// });
// }
// }
// })
// }
// }
},
onLoad() {
//this.getUser();
},
onShow() {
this.checkLogin();
}
}
</script>
<style lang="scss">
.info{
background-color: #F3EDE7;
width: 100%;
.user-info{
width: 100%;
height: 300rpx;
.avatar{
width: 230rpx;
height: 230rpx;
border: 1px solid black;
border-radius: 50%;
margin-top: 40rpx;
margin-left: 40rpx;
}
.nickname{
font-size: 30px;
position: absolute;
top: 100rpx;
left: 320rpx;
color: #6C7A77;
}
.username{
font-size: 14px;
position: absolute;
top: 200rpx;
left: 320rpx;
color: #C5C1C0;
}
}
}
</style>register.vue
<template>
<view class="register-area">
<view class="row">
<image src="/static/logo.png" style="width: 300rpx;height: 250rpx;margin: 0 auto;display: block;"></image>
</view>
<view class="row">
<input type="text" class="input" placeholder="用户名 该用户名将用于账号登录" v-model="relForm.username"/>
</view>
<view class="row">
<input type="password" class="input" placeholder="请输入登录密码" v-model="relForm.password"/>
</view>
<view class="row">
<input type="text" class="input" placeholder="手机号" v-model="relForm.phone"/>
</view>
<view class="row">
<input type="text" class="input" placeholder="请输入昵称" v-model="relForm.nickname"/>
</view>
<view class="row">
<button type="default" @tap="register" class="btn">注 册</button>
</view>
<navigator url="/pages/mine/login/login" class="register">返回登录</navigator>
</view>
</template>
<script>
import { doRegister } from '@/api/mine/register/index.js'
export default {
data() {
return {
relForm:{
phone:'',
password:'',
username:'',
nickname:''
}
};
},
methods:{
register(){
doRegister(this.relForm).then(res=>{
console.log(res)
if(res.success){
uni.showToast({
title:res.message,
icon:'success'
})
}else{
uni.showToast({
title:res.message,
icon:'none'
})
}
})
}
}
}
</script>
<style lang="scss">
.register-area{
background-color: #F3EDE7;
width: 100%;
.row{
margin: 10rpx auto;
min-height: 120rpx;
width: 90%;
.input{
margin-top: 20rpx;
border: 1px solid gray;
box-sizing: border-box;
height: 100rpx;
width: 100%;
font-size: 30rpx;
line-height: 30rpx;
border-radius: 50rpx;
padding: 10rpx 50rpx;
}
.btn{
background-color: #344B44;
border-radius: 50rpx;
color: #ffffff;
}
}
.register{
text-align: center;
font-size: 14px;
color: #625D5E;
}
}
</style>login.vue
<template>
<view class="login-area">
<view class="row">
<image src="/static/logo.png" style="width: 300rpx;height: 250rpx;margin: 0 auto;display: block;"></image>
</view>
<view class="row">
<input type="text" class="input" placeholder="用户名" v-model="loginForm.username"/>
</view>
<view class="row">
<input type="password" class="input" placeholder="密码" v-model="loginForm.password"/>
</view>
<view class="row">
<button type="default" @tap="login" class="btn">登录</button>
</view>
<navigator url="/pages/mine/register/register" class="register">没有账号？注册一个</navigator>
</view>
</template>
<script>
import {doLogin} from '@/api/mine/login/login.js'
import { getMemberInfo } from '@/api/mine/index.js'
export default {
data() {
return {
loginForm:{
username:'17596496508',
password:'123456'
}
};
},
methods:{
login(){
doLogin(this.loginForm).then(res=>{
console.log(res)
uni.showToast({
title:'登录成功',
icon:'success'
});
//登录成功，存token
uni.setStorageSync("b-token",res.data.token);
//同时获取用户信息，存用户
getMemberInfo().then(res=>{
uni.setStorageSync("b-userInfo",res.data.userInfo);
});
setTimeout(()=>{
uni.switchTab({
url:'/pages/mine/mine'
});
},1200);
})
}
}
}
</script>
<style lang="scss">
.login-area{
background-color: #F3EDE7;
width: 100%;
.row{
margin: 15rpx auto;
min-height: 150rpx;
width: 80%;
.input{
margin-top: 30rpx;
border: 1px solid gray;
box-sizing: border-box;
height: 100rpx;
width: 100%;
font-size: 30rpx;
line-height: 30rpx;
border-radius: 50rpx;
padding: 15rpx 20rpx;
}
.btn{
background-color: #344B44;
border-radius: 50rpx;
color: #ffffff;
}
}
.register{
text-align: center;
font-size: 14px;
color: #625D5E;
}
}
</style>find.vue
<template>
<view>
</view>
</template>
<script>
import mix from '@/minxins/index.js'
export default {
data() {
return {
};
},
mixins:[mix],
onShow() {
this.checkLogin();
}
}
</script>
<style lang="scss" scoped>
</style>minxins
let obj = {
methods:{
checkLogin(){
let token = uni.getStorageSync("b-token");
if(token){
let userInfo = uni.getStorageSync("b-userInfo");
this.userInfo = userInfo;
}else{
uni.showModal({
title:'登录提示',
content:'暂未登录，是否重新登录',
success(res) {
//console.log(res)
if(res.confirm){
//清空本地数据
uni.clearStorageSync();
uni.navigateTo({
url:'/pages/mine/login/login'
});
}else{
uni.showToast({
title:'已取消登录',
icon:'error'
});
uni.clearStorageSync();
}
}
})
}
}
}
}
export default objmine index.js
import request from '@/api/request.js'
export const getMemberInfo = ()=>{
return request({
url:'/lejuClient/login/getMemberInfo',
method: 'GET'
})
}mine register.js
import request from '@/api/request.js'
export const doRegister = (data)=> {
return request({
url:'/lejuClient/member/register',
method:'POST',
data: data
})
}mine login.js
import request from '@/api/request.js'
export const doLogin = (data)=> {
return request({
url:'/lejuClient/login/doLogin',
method: 'POST',
data: data
})
}request.js
import baseUrl from '@/api/baseUrl.js'
let instance = (config) => {
return new Promise((resolve,rejected)=>{
uni.request({
url: baseUrl + config.url,
timeout: 5000,
data:config.data,
method: config.method,
header:{
token: uni.getStorageSync("b-token")
},
success(res){
resolve(res.data);
}
})
})
}
export default instance;baseUrl.js
let baseUrl = "";
if(process.env.MODE_ENV == 'development'){
console.log("开发环境");
baseUrl = "http://leju.bufan.cloud";
}else{
console.log("生产环境");
baseUrl = "http://leju.bufan.cloud";
}
export default baseUrlpages.json
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path" : "pages/home/home",
"style" :
{
"navigationBarTitleText" : "首页",
"enablePullDownRefresh" : false,
//也可以去掉导航栏
"navigationStyle": "custom"
//在h5中，去掉导航栏
// "h5": {
// "titleNView": false
// }
}
},
{
"path" : "pages/kind/kind",
"style" :
{
"navigationBarTitleText" : "分类",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/find/find",
"style" :
{
"navigationBarTitleText" : "发现",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/mine/mine",
"style" :
{
"navigationBarTitleText" : "我的",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/index/index",
"style" :
{
"navigationBarTitleText" : "",
"enablePullDownRefresh" : false
}
},
{
"path": "pages/index2/index2",
"style": {
"navigationBarTitleText": "首页",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/kind/list/list",
"style" :
{
"navigationBarTitleText" : "",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/kind/goods/goods",
"style" :
{
"navigationBarTitleText" : "",
"enablePullDownRefresh" : true
}
},
{
"path" : "pages/info/info",
"style" :
{
"navigationBarTitleText" : "",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/mine/login/login",
"style" :
{
"navigationBarTitleText" : "",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/mine/register/register",
"style" :
{
"navigationBarTitleText" : "",
"enablePullDownRefresh" : false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/home/home",
"iconPath": "static/images/icon1.png",
"selectedIconPath": "static/images/icon2.png",
"text": "首页"
},
{
"pagePath": "pages/kind/kind",
"iconPath": "static/images/icon1.png",
"selectedIconPath": "static/images/icon2.png",
"text": "分类"
},
{
"pagePath": "pages/find/find",
"iconPath": "static/images/icon1.png",
"selectedIconPath": "static/images/icon2.png",
"text": "发现"
},
{
"pagePath": "pages/mine/mine",
"iconPath": "static/images/icon1.png",
"selectedIconPath": "static/images/icon2.png",
"text": "我的"
}
]
}
}
/*
接口文档
http://leju.bufan.cloud/swagger-ui.html#/23458251433147158583614129289367102716922359/addCartUsingPOST_1
*/测试
登录
注册
我的
发现
