Skip to content

H
hello_uni-id-pages

DCloud / hello_uni-id-pages

通知 1054
Star 31
Fork 43
H
hello_uni-id-pages
提交 9737d081 编写于 作者: DCloud_JSON's avatar DCloud_JSON
浏览文件
操作

1.0.20

上级 bf4fccfa
隐藏空白更改
内联 并排
Showing with 593 addition and 538 deletion
manifest.json
浏览文件 @ 9737d081
......@@ -128,7 +128,7 @@
"uniStatistics" : {
"enable" : false
},
"vueVersion" : "2",
"vueVersion" : "3",
"h5" : {
"unipush" : {
"enable" : false
......
uni_modules/uni-id-pages/changelog.md
浏览文件 @ 9737d081
## 1.0.20（2022-09-21）
- 新增 store 账号信息状态管理，详情：用户中心页面 路径：`/uni_modules/uni-id-pages/pages/userinfo/userinfo`
## 1.0.19（2022-09-20）
- 修复 小程序端，使用将自定义节点设置成[虚拟节点](https://uniapp.dcloud.net.cn/tutorial/vue-api.html#%E5%85%B6%E4%BB%96%E9%85%8D%E7%BD%AE)的uni-ui组件，样式错乱的问题
## 1.0.18（2022-09-20）
......
uni_modules/uni-id-pages/common/common.js 已删除 100644 → 0
浏览文件 @ bf4fccfa
import pagesJson from '@/pages.json'
const uniIdCo = uniCloud.importObject("uni-id-co")
export default {
async logout() {
await uniIdCo.logout()
uni.removeStorageSync('uni_id_token');
uni.setStorageSync('uni_id_token_expired', 0)
uni.redirectTo({
url: `/${pagesJson.uniIdRouter?.loginPage ?? 'uni_modules/uni-id-pages/pages/login/login-withoutpwd'}`,
});
uni.$emit('uni-id-pages-logout')
},
}
uni_modules/uni-id-pages/common/login-page.mixin.js
浏览文件 @ 9737d081
import loginSuccess from './loginSuccess.js';
import {
store,
mutations
} from '@/uni_modules/uni-id-pages/common/store.js'
import config from '@/uni_modules/uni-id-pages/config.js'
let mixin = {
data() {
......@@ -75,7 +78,7 @@ let mixin = {
},
methods: {
loginSuccess(e) {
loginSuccess({
mutations.loginSuccess({
...e,
uniIdRedirectUrl: this.uniIdRedirectUrl
})
......
uni_modules/uni-id-pages/common/login-page.scss
浏览文件 @ 9737d081
......@@ -51,7 +51,12 @@
.register-back{
display: none;
}
}
uni-button{
padding-bottom: 1px;
}
/* #endif */
}
......@@ -81,13 +86,13 @@
}
/* #ifdef MP */
/* #ifndef APP-NVUE */
// 解决小程序端开启虚拟节点virtualHost引起的 class = input-box丢失的问题 [详情参考](https://uniapp.dcloud.net.cn/matter.html#%E5%90%84%E5%AE%B6%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%AE%9E%E7%8E%B0%E6%9C%BA%E5%88%B6%E4%B8%8D%E5%90%8C-%E5%8F%AF%E8%83%BD%E5%AD%98%E5%9C%A8%E7%9A%84%E5%B9%B3%E5%8F%B0%E5%85%BC%E5%AE%B9%E9%97%AE%E9%A2%98)
.uni-content ::v-deep .uni-easyinput__content,
/* #endif */
.input-box {
padding: 4px;
height: 44px;
background-color: #F8F8F8 !important;
border-radius: 0;
font-size: 14px;
......
uni_modules/uni-id-pages/common/loginSuccess.js 已删除 100644 → 0
浏览文件 @ bf4fccfa
import pagesJson from '@/pages.json'
export default function(e = {}) {
const {
showToast = true, toastText = '登录成功', autoBack = true, uniIdRedirectUrl = ''
} = e
console.log({
toastText,
autoBack
});
if (showToast) {
uni.showToast({
title: toastText,
icon: 'none'
});
}
if (autoBack) {
let delta = 0; //判断需要返回几层
let pages = getCurrentPages();
uni.$emit('uni-id-pages-login-success',pages)
console.log(pages);
pages.forEach((page, index) => {
if (pages[pages.length - index - 1].route.split('/')[3] == 'login') {
delta++
}
})
console.log('判断需要返回几层:',pages, delta);
if (uniIdRedirectUrl) {
return uni.reLaunch({
url: uniIdRedirectUrl
})
}
// #ifdef H5
if(e.loginType == 'weixin'){
console.log('window.history',window.history);
return window.history.go(-3)
}
// #endif
if (delta) {
const page = pagesJson.pages[0]
return uni.reLaunch({
url: `/${page.path}`
})
}
uni.navigateBack({
delta
})
}
}
uni_modules/uni-id-pages/common/store.js 0 → 100644
浏览文件 @ 9737d081
import pagesJson from '@/pages.json'
const uniIdCo = uniCloud.importObject("uni-id-co")
const db = uniCloud.database();
const usersTable = db.collection('uni-id-users')
console.log(uni.getStorageSync('uni-id-pages-userInfo') || {});
const data = {
userInfo: uni.getStorageSync('uni-id-pages-userInfo') || {},
hasLogin: !!uni.getStorageSync('uni-id-pages-userInfo')
}
console.log('data', data);
// 定义 mutations, 修改属性
export const mutations = {
// data不为空，表示传递要更新的值(注意不是覆盖是合并),什么也不传时，直接查库获取更新
async updateUserInfo(data = false) {
if (data) {
usersTable.where('_id==$env.uid').update(data).then(e => {
console.log(e);
if (e.result.updated) {
uni.showToast({
title: "更新成功",
icon: 'none'
});
this.setUserInfo(data)
} else {
uni.showToast({
title: "没有改变",
icon: 'none'
});
}
})
} else {
try {
let res = await usersTable.where("'_id' == $cloudEnv_uid")
.field('mobile,nickname,user_name,email,avatar_file')
.get()
console.log('fromDbData',res.result.data);
this.setUserInfo(res.result.data[0])
} catch (e) {
this.setUserInfo({},{cover:true})
console.error(e.message, e.errCode);
}
}
},
async setUserInfo(data, {cover}={cover:false}) {
console.log('set-userInfo', data);
let userInfo = cover?data:Object.assign(store.userInfo,data)
store.userInfo = Object.assign({},userInfo)
store.hasLogin = Object.keys(store.userInfo).length != 0
console.log('store.userInfo', store.userInfo);
uni.setStorage({
key: "uni-id-pages-userInfo",
data:store.userInfo
})
return data
},
async logout() {
await uniIdCo.logout()
uni.removeStorageSync('uni_id_token');
uni.setStorageSync('uni_id_token_expired', 0)
uni.redirectTo({
url: `/${pagesJson.uniIdRouter?.loginPage ?? 'uni_modules/uni-id-pages/pages/login/login-withoutpwd'}`,
});
uni.$emit('uni-id-pages-logout')
this.setUserInfo({},{cover:true})
},
loginSuccess(e){
const {
showToast = true, toastText = '登录成功', autoBack = true, uniIdRedirectUrl = ''
} = e
console.log({
toastText,
autoBack
});
if (showToast) {
uni.showToast({
title: toastText,
icon: 'none'
});
}
this.updateUserInfo()
uni.$emit('uni-id-pages-login-success')
if (autoBack) {
let delta = 0; //判断需要返回几层
let pages = getCurrentPages();
// console.log(pages);
pages.forEach((page, index) => {
if (pages[pages.length - index - 1].route.split('/')[3] == 'login') {
delta++
}
})
console.log('判断需要返回几层:', pages, delta);
if (uniIdRedirectUrl) {
return uni.reLaunch({
url: uniIdRedirectUrl
})
}
// #ifdef H5
if (e.loginType == 'weixin') {
console.log('window.history', window.history);
return window.history.go(-3)
}
// #endif
if (delta) {
const page = pagesJson.pages[0]
return uni.reLaunch({
url: `/${page.path}`
})
}
uni.navigateBack({
delta
})
}
}
}
// #ifdef VUE2
import Vue from 'vue'
// 通过Vue.observable创建一个可响应的对象
export const store = Vue.observable(data)
// #endif
// #ifdef VUE3
import {
reactive
} from 'vue'
// 通过Vue.observable创建一个可响应的对象
export const store = reactive(data)
// #endif
uni_modules/uni-id-pages/components/uni-id-pages-agreements/uni-id-pages-agreements.vue
浏览文件 @ 9737d081
......@@ -67,7 +67,7 @@
},
methods: {
popupConfirm(){
console.log("popupConfirm");
// console.log("popupConfirm");
this.isAgree = true
retryFun()
// this.$emit('popupConfirm')
......
uni_modules/uni-id-pages/components/uni-id-pages-avatar/uni-id-pages-avatar.vue
浏览文件 @ 9737d081
<template>
<view @click="uploadAvatarImg">
<view @click="uploadAvatarImg" class="box" :class="{'showBorder':border}" :style="{width,height,lineHeight:height}">
<cloud-image v-if="avatar_file" :src="avatar_file.url" :width="width" :height="height"></cloud-image>
<uni-icons v-else :style="{width,height,lineHeight:height}" class="chooseAvatar" type="plusempty" size="30"
color="#dddddd"></uni-icons>
......@@ -7,20 +7,20 @@
</template>
<script>
const db = uniCloud.database();
const usersTable = db.collection('uni-id-users')
import {
store,
mutations
} from '@/uni_modules/uni-id-pages/common/store.js'
/**
* uni-id-pages-avatar
* @description 用户头像组件
* @property {String} width 图片的宽，默认为：50px
* @property {String} height 图片的高，默认为：50px
*/
export default {
export default {
data() {
return {
userInfo: {},
isPC: false,
hasLogin:false
isPC: false
}
},
props: {
......@@ -37,71 +37,38 @@
default () {
return "50px"
}
},
border:{
type: Boolean,
default () {
return false
}
}
},
async mounted() {
usersTable.where("'_id' == $cloudEnv_uid").field('avatar_file,mobile,nickname').get().then(res=>{
this.userInfo = res.result.data[0]||{}
console.log('this.userInfo', this.userInfo);
this.hasLogin = true
}).catch (e=>{
this.userInfo = {}
this.hasLogin = false
console.log(e.message, e.errCode);
})
// try {
// let res = await usersTable.where("'_id' == $cloudEnv_uid").field('avatar_file').get()
// this.userInfo = res.result.data[0]
// console.log('this.userInfo', this.userInfo);
// } catch (e) {
// console.log(e.message);
// }
// #ifdef H5
this.isPC = !['ios', 'android'].includes(uni.getSystemInfoSync().platform);
console.log(' this.isPC', this.isPC, uni.getSystemInfoSync().platform);
// #endif
},
computed: {
avatar_file() {
if (this.userInfo.avatar_file && this.userInfo.avatar_file.url) {
return this.userInfo.avatar_file
}
hasLogin() {
return store.hasLogin
},
userInfo() {
return store.userInfo
},
avatar_file() {
return store.userInfo.avatar_file
}
},
methods: {
setAvatarFile(avatar_file) {
uni.showLoading({
title: "设置中",
mask: true
});
// 使用 clientDB 提交数据
usersTable.where('_id==$env.uid').update({
avatar_file
}).then((res) => {
console.log(res);
if (avatar_file) {
uni.showToast({
icon: 'none',
title: "更新成功"
})
} else {
uni.showToast({
icon: 'none',
title: "删除成功"
})
}
this.$set(this.userInfo, 'avatar_file', avatar_file)
}).catch((err) => {
uni.showModal({
content: err.message || "请求失败",
showCancel: false
})
}).finally(() => {
uni.hideLoading()
})
// 使用 clientDB 提交数据
mutations.updateUserInfo({avatar_file})
},
uploadAvatarImg(res) {
uploadAvatarImg(res) {
console.log(this.hasLogin);
if(!this.hasLogin){
return uni.navigateTo({
url:'/uni_modules/uni-id-pages/pages/login/login-withoutpwd'
......@@ -176,13 +143,24 @@
}
</script>
<style>
<style>
/* #ifndef APP-NVUE */
.box{
overflow: hidden;
}
/* #endif */
.chooseAvatar {
/* #ifndef APP-NVUE */
display: inline-block;
display: inline-block;
box-sizing: border-box;
/* #endif */
border: dotted 1px #ddd;
border-radius: 10px;
text-align: center;
text-align: center;
padding: 1px;
}
.showBorder{
border: solid 1px #ddd;
}
</style>
uni_modules/uni-id-pages/components/uni-id-pages-fab-login/uni-id-pages-fab-login.vue
浏览文件 @ 9737d081
......@@ -14,8 +14,11 @@
</template>
<script>
import config from '@/uni_modules/uni-id-pages/config.js'
//前一个窗口的页面地址。控制点击切换快捷登录方式是创建还是返回
import loginSuccess from '../../common/loginSuccess.js';
//前一个窗口的页面地址。控制点击切换快捷登录方式是创建还是返回
import {
store,
mutations
} from '@/uni_modules/uni-id-pages/common/store.js'
const db = uniCloud.database();
const usersTable = db.collection('uni-id-users')
......@@ -438,8 +441,8 @@
});
// #ifdef MP-WEIXIN
//如果是微信小程序端的微信登录，且为首次登录，就弹出获取微信昵称+头像用于绑定资料
if (type == 'weixin' && result.type == "register") {
loginSuccess({
if (type == 'weixin' && result.type == "register") {
mutations.loginSuccess({
...result,
showToast: false,
autoBack: false
......@@ -450,7 +453,7 @@
// #ifdef H5
result.loginType = type
// #endif
loginSuccess(result)
mutations.loginSuccess(result)
})
.catch(e=>{
console.log(e);
......@@ -469,7 +472,7 @@
},
doUserProfileNext() {
try {
loginSuccess()
mutations.loginSuccess()
} catch (e) {
console.log(e);
}
......
uni_modules/uni-id-pages/package.json
浏览文件 @ 9737d081
{
"id": "uni-id-pages",
"displayName": "uni-id-pages",
"version": "1.0.19",
"version": "1.0.20",
"description": "云端一体简单、统一、可扩展的用户中心页面模版",
"keywords": [
"用户管理",
......
uni_modules/uni-id-pages/pages/login/login-withoutpwd.vue
浏览文件 @ 9737d081
......@@ -56,8 +56,8 @@
},
async onLoad(e) {
console.log(e);
let type = e.type
// console.log({type});
//获取通过url传递的参数type设置当前登录方式，如果没传递直接默认以配置的登录
let type = e.type || config.loginTypes[0]
this.type = type
if(type != 'univerify'){
this.focusPhone = true
......@@ -65,8 +65,7 @@
this.$nextTick(() => {
//关闭重复显示的登录快捷方式
if (['weixin', 'apple'].includes(type)) {
this.$refs.uniFabLogin.servicesList = this.$refs.uniFabLogin.servicesList.filter(item =>
item.id != type)
this.$refs.uniFabLogin.servicesList = this.$refs.uniFabLogin.servicesList.filter(item =>item.id != type)
}
})
uni.$on('uni-id-pages-set-login-type', type => {
......
uni_modules/uni-id-pages/pages/login/login-withpwd.vue
浏览文件 @ 9737d081
<!-- 账号密码登录页 -->
<template>
<view class="uni-content">
<view class="login-logo">
<image :src="logo"></image>
</view>
<!-- 顶部文字 -->
<text class="title title-box">账号密码登录</text>
<uni-forms>
<uni-forms-item name="username">
<uni-easyinput :focus="focusUsername" @blur="focusUsername = false" class="input-box" :inputBorder="false" v-model="username" placeholder="请输入手机号/用户名/邮箱" />
</uni-forms-item>
<uni-forms-item name="password">
<uni-easyinput :focus="focusPassword" @blur="focusPassword = false" class="input-box" clearable type="password" :inputBorder="false" v-model="password"
placeholder="请输入密码" />
</uni-forms-item>
</uni-forms>
<uni-captcha v-if="needCaptcha" focus ref="captcha" scene="login-by-pwd" v-model="captcha" />
<!-- 带选择框的隐私政策协议组件 -->
<uni-id-pages-agreements scope="login" ref="agreements" ></uni-id-pages-agreements>
<button class="uni-btn" type="primary" @click="pwdLogin">登录</button>
<!-- 忘记密码 -->
<view class="link-box">
<view v-if="!config.isAdmin">
<text class="forget">忘记了？</text>
<text class="link" @click="toRetrievePwd">找回密码</text>
</view>
<text class="link" @click="toRegister">{{config.isAdmin ? '注册管理员账号': '注册账号'}}</text>
<!-- <text class="link" @click="toRegister" v-if="!config.isAdmin">注册账号</text> -->
</view>
<!-- 悬浮登录方式组件 -->
<uni-id-pages-fab-login ref="uniFabLogin"></uni-id-pages-fab-login>
</view>
</template>
<script>
import mixin from '@/uni_modules/uni-id-pages/common/login-page.mixin.js';
const uniIdCo = uniCloud.importObject("uni-id-co",{
errorOptions:{
type:'toast'
}
})
export default {
mixins: [mixin],
data() {
return {
"password": "",
"username": "",
"captcha": "",
"needCaptcha": false,
"focusUsername":false,
"focusPassword":false,
"logo": "/static/logo.png"
}
},
onShow() {
// #ifdef H5
document.onkeydown = event => {
var e = event || window.event;
if (e && e.keyCode == 13) { //回车键的键值为13
this.pwdLogin()
}
};
// #endif
},
methods: {
// 页面跳转，找回密码
toRetrievePwd() {
let url = '/uni_modules/uni-id-pages/pages/retrieve/retrieve'
//如果刚好用户名输入框的值为手机号码，就把它传到retrieve页面，根据该手机号找回密码
if (/^1\d{10}$/.test(this.username)) {
url += `?phoneNumber=${this.username}`
}
uni.navigateTo({
url
})
},
/**
* 密码登录
*/
pwdLogin() {
if(!this.password.length){
this.focusPassword = true
return uni.showToast({
title: '请输入密码',
icon: 'none'
});
}
if(!this.username.length){
this.focusUsername = true
return uni.showToast({
title: '请输入手机号/用户名/邮箱',
icon: 'none'
});
}
if(this.needCaptcha && this.captcha.length!=4){
this.$refs.captcha.getImageCaptcha()
return uni.showToast({
title: '请输入验证码',
icon: 'none'
});
}
if (this.needAgreements && !this.agree) {
return this.$refs.agreements.popup(this.pwdLogin)
}
let data = {
"password": this.password,
"captcha": this.captcha
}
if (/^1\d{10}$/.test(this.username)) {
data.mobile = this.username
}else if(/@/.test(this.username)) {
data.email = this.username
}else{
data.username = this.username
}
uniIdCo.login(data).then(e => {
this.loginSuccess(e)
}).catch(e => {
if(e.errCode == 'uni-id-captcha-required'){
this.needCaptcha = true
}else if(this.needCaptcha){
//登录失败，自动重新获取验证码
this.$refs.captcha.getImageCaptcha()
}
})
},
/* 前往注册 */
toRegister() {
uni.navigateTo({
url: this.config.isAdmin ? '/uni_modules/uni-id-pages/pages/register/register-admin': '/uni_modules/uni-id-pages/pages/register/register',
fail(e) {
console.error(e);
}
})
}
}
}
</script>
<style lang="scss" scoped>
@import "@/uni_modules/uni-id-pages/common/login-page.scss";
@media screen and (min-width: 690px) {
}
.forget{
font-size: 12px;
color: #8a8f8b;
}
.link-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: space-between;
margin-top: 20px;
}
.link {
font-size: 12px;
}
<!-- 账号密码登录页 -->
<template>
<view class="uni-content">
<view class="login-logo">
<image :src="logo"></image>
</view>
<!-- 顶部文字 -->
<text class="title title-box">账号密码登录</text>
<uni-forms>
<uni-forms-item name="username">
<uni-easyinput :focus="focusUsername" @blur="focusUsername = false" class="input-box"
:inputBorder="false" v-model="username" placeholder="请输入手机号/用户名/邮箱" />
</uni-forms-item>
<uni-forms-item name="password">
<uni-easyinput :focus="focusPassword" @blur="focusPassword = false" class="input-box" clearable
type="password" :inputBorder="false" v-model="password" placeholder="请输入密码" />
</uni-forms-item>
</uni-forms>
<uni-captcha v-if="needCaptcha" focus ref="captcha" scene="login-by-pwd" v-model="captcha" />
<!-- 带选择框的隐私政策协议组件 -->
<uni-id-pages-agreements scope="login" ref="agreements"></uni-id-pages-agreements>
<button class="uni-btn" type="primary" @click="pwdLogin">登录</button>
<!-- 忘记密码 -->
<view class="link-box">
<view v-if="!config.isAdmin">
<text class="forget">忘记了？</text>
<text class="link" @click="toRetrievePwd">找回密码</text>
</view>
<text class="link" @click="toRegister">{{config.isAdmin ? '注册管理员账号': '注册账号'}}</text>
<!-- <text class="link" @click="toRegister" v-if="!config.isAdmin">注册账号</text> -->
</view>
<!-- 悬浮登录方式组件 -->
<uni-id-pages-fab-login ref="uniFabLogin"></uni-id-pages-fab-login>
</view>
</template>
<script>
import mixin from '@/uni_modules/uni-id-pages/common/login-page.mixin.js';
const uniIdCo = uniCloud.importObject("uni-id-co", {
errorOptions: {
type: 'toast'
}
})
export default {
mixins: [mixin],
data() {
return {
"password": "",
"username": "",
"captcha": "",
"needCaptcha": false,
"focusUsername": false,
"focusPassword": false,
"logo": "/static/logo.png"
}
},
onShow() {
// #ifdef H5
document.onkeydown = event => {
var e = event || window.event;
if (e && e.keyCode == 13) { //回车键的键值为13
this.pwdLogin()
}
};
// #endif
},
methods: {
// 页面跳转，找回密码
toRetrievePwd() {
let url = '/uni_modules/uni-id-pages/pages/retrieve/retrieve'
//如果刚好用户名输入框的值为手机号码，就把它传到retrieve页面，根据该手机号找回密码
if (/^1\d{10}$/.test(this.username)) {
url += `?phoneNumber=${this.username}`
}
uni.navigateTo({
url
})
},
/**
* 密码登录
*/
pwdLogin() {
if (!this.password.length) {
this.focusPassword = true
return uni.showToast({
title: '请输入密码',
icon: 'none'
});
}
if (!this.username.length) {
this.focusUsername = true
return uni.showToast({
title: '请输入手机号/用户名/邮箱',
icon: 'none'
});
}
if (this.needCaptcha && this.captcha.length != 4) {
this.$refs.captcha.getImageCaptcha()
return uni.showToast({
title: '请输入验证码',
icon: 'none'
});
}
if (this.needAgreements && !this.agree) {
return this.$refs.agreements.popup(this.pwdLogin)
}
let data = {
"password": this.password,
"captcha": this.captcha
}
if (/^1\d{10}$/.test(this.username)) {
data.mobile = this.username
} else if (/@/.test(this.username)) {
data.email = this.username
} else {
data.username = this.username
}
uniIdCo.login(data).then(e => {
this.loginSuccess(e)
}).catch(e => {
if (e.errCode == 'uni-id-captcha-required') {
this.needCaptcha = true
} else if (this.needCaptcha) {
//登录失败，自动重新获取验证码
this.$refs.captcha.getImageCaptcha()
}
})
},
/* 前往注册 */
toRegister() {
uni.navigateTo({
url: this.config.isAdmin ? '/uni_modules/uni-id-pages/pages/register/register-admin' :
'/uni_modules/uni-id-pages/pages/register/register',
fail(e) {
console.error(e);
}
})
}
}
}
</script>
<style lang="scss" scoped>
@import "@/uni_modules/uni-id-pages/common/login-page.scss";
@media screen and (min-width: 690px) {
.uni-content {
max-height: 650px;
}
}
.forget {
font-size: 12px;
color: #8a8f8b;
}
.link-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: space-between;
margin-top: 20px;
}
.link {
font-size: 12px;
}
</style>
uni_modules/uni-id-pages/pages/register/register-by-email.vue
浏览文件 @ 9737d081
......@@ -191,7 +191,7 @@
@media screen and (min-width: 690px) {
.uni-content{
padding: 30px 40px;
max-height: 550px;
max-height: 650px;
}
.link-box {
/* #ifndef APP-NVUE */
......
uni_modules/uni-id-pages/pages/register/register.vue
浏览文件 @ 9737d081
<!-- 账号注册页 -->
<template>
<view class="uni-content">
<match-media :min-width="690">
<view class="login-logo">
<image :src="logo"></image>
</view>
<!-- 顶部文字 -->
<text class="title title-box">用户名密码注册</text>
</match-media>
<uni-forms ref="form" :value="formData" :rules="rules" validate-trigger="submit" err-show-type="toast">
<uni-forms-item name="username" required>
<uni-easyinput :inputBorder="false" :focus="focusUsername" @blur="focusUsername = false"
class="input-box" placeholder="请输入用户名" v-model="formData.username" trim="both" />
</uni-forms-item>
<uni-forms-item name="nickname">
<uni-easyinput :inputBorder="false" :focus="focusNickname" @blur="focusNickname = false" class="input-box" placeholder="请输入用户昵称" v-model="formData.nickname"
trim="both" />
</uni-forms-item>
<uni-forms-item name="password" v-model="formData.password" required>
<uni-easyinput :inputBorder="false" :focus="focusPassword" @blur="focusPassword = false"
class="input-box" maxlength="20" :placeholder="'请输入' + (config.passwordStrength == 'weak'?'6':'8') + '-16位密码'" type="password"
v-model="formData.password" trim="both" />
</uni-forms-item>
<uni-forms-item name="password2" v-model="formData.password2" required>
<uni-easyinput :inputBorder="false" :focus="focusPassword2" @blur="focusPassword2 =false"
class="input-box" placeholder="再次输入密码" maxlength="20" type="password" v-model="formData.password2"
trim="both" />
</uni-forms-item>
<uni-forms-item>
<uni-captcha ref="captcha" scene="register" v-model="formData.captcha" />
</uni-forms-item>
<uni-id-pages-agreements scope="register" ref="agreements" ></uni-id-pages-agreements>
<button class="uni-btn" type="primary" @click="submit">注册</button>
<button @click="navigateBack" class="register-back">返回</button>
<match-media :min-width="690">
<view class="link-box">
<text class="link" @click="registerByEmail">邮箱验证码注册</text>
<text class="link" @click="toLogin">已有账号？点此登录</text>
</view>
</match-media>
</uni-forms>
</view>
</template>
<script>
import rules from './validator.js';
import mixin from '@/uni_modules/uni-id-pages/common/login-page.mixin.js';
import config from '@/uni_modules/uni-id-pages/config.js'
const uniIdCo = uniCloud.importObject("uni-id-co")
export default {
mixins: [mixin],
data() {
return {
formData: {
username: "",
nickname: "",
password: "",
password2: "",
captcha: ""
},
rules,
focusUsername:false,
focusNickname:false,
focusPassword:false,
focusPassword2:false,
logo: "/static/logo.png"
}
},
onReady() {
this.$refs.form.setRules(this.rules)
},
onShow() {
// #ifdef H5
document.onkeydown = event => {
var e = event || window.event;
if (e && e.keyCode == 13) { //回车键的键值为13
this.submit()
}
};
// #endif
},
methods: {
/**
* 触发表单提交
*/
submit() {
this.$refs.form.validate().then((res) => {
if(this.formData.captcha.length != 4){
this.$refs.captcha.focusCaptchaInput = true
return uni.showToast({
title: '请输入验证码',
icon: 'none'
});
}
if (this.needAgreements && !this.agree) {
return this.$refs.agreements.popup(()=>{
this.submitForm(res)
})
}
this.submitForm(res)
}).catch((errors) => {
let key = errors[0].key
key = key.replace(key[0], key[0].toUpperCase())
console.log(key);
this['focus'+key] = true
})
},
submitForm(params) {
uniIdCo.registerUser(this.formData).then(e => {
console.log(e);
uni.navigateBack()
})
.catch(e => {
console.log(e);
console.log(e.message);
//更好的体验：登录错误，直接刷新验证码
this.$refs.captcha.getImageCaptcha()
})
},
navigateBack() {
uni.navigateBack()
},
toLogin() {
uni.navigateTo({
url: '/uni_modules/uni-id-pages/pages/login/login-withpwd'
})
},
registerByEmail() {
uni.navigateTo({
url: '/uni_modules/uni-id-pages/pages/register/register-by-email'
})
}
}
}
</script>
<style lang="scss">
@import "@/uni_modules/uni-id-pages/common/login-page.scss";
@media screen and (max-width: 690px) {
.uni-content{
margin-top: 15px;
height: 100%;
<!-- 账号注册页 -->
<template>
<view class="uni-content">
<match-media :min-width="690">
<view class="login-logo">
<image :src="logo"></image>
</view>
<!-- 顶部文字 -->
<text class="title title-box">用户名密码注册</text>
</match-media>
<uni-forms ref="form" :value="formData" :rules="rules" validate-trigger="submit" err-show-type="toast">
<uni-forms-item name="username" required>
<uni-easyinput :inputBorder="false" :focus="focusUsername" @blur="focusUsername = false"
class="input-box" placeholder="请输入用户名" v-model="formData.username" trim="both" />
</uni-forms-item>
<uni-forms-item name="nickname">
<uni-easyinput :inputBorder="false" :focus="focusNickname" @blur="focusNickname = false"
class="input-box" placeholder="请输入用户昵称" v-model="formData.nickname" trim="both" />
</uni-forms-item>
<uni-forms-item name="password" v-model="formData.password" required>
<uni-easyinput :inputBorder="false" :focus="focusPassword" @blur="focusPassword = false"
class="input-box" maxlength="20"
:placeholder="'请输入' + (config.passwordStrength == 'weak'?'6':'8') + '-16位密码'" type="password"
v-model="formData.password" trim="both" />
</uni-forms-item>
<uni-forms-item name="password2" v-model="formData.password2" required>
<uni-easyinput :inputBorder="false" :focus="focusPassword2" @blur="focusPassword2 =false"
class="input-box" placeholder="再次输入密码" maxlength="20" type="password" v-model="formData.password2"
trim="both" />
</uni-forms-item>
<uni-forms-item>
<uni-captcha ref="captcha" scene="register" v-model="formData.captcha" />
</uni-forms-item>
<uni-id-pages-agreements scope="register" ref="agreements"></uni-id-pages-agreements>
<button class="uni-btn" type="primary" @click="submit">注册</button>
<button @click="navigateBack" class="register-back">返回</button>
<match-media :min-width="690">
<view class="link-box">
<text class="link" @click="registerByEmail">邮箱验证码注册</text>
<text class="link" @click="toLogin">已有账号？点此登录</text>
</view>
</match-media>
</uni-forms>
</view>
</template>
<script>
import rules from './validator.js';
import mixin from '@/uni_modules/uni-id-pages/common/login-page.mixin.js';
import config from '@/uni_modules/uni-id-pages/config.js'
import {
store,
mutations
} from '@/uni_modules/uni-id-pages/common/store.js'
const {
loginSuccess
} = mutations
const uniIdCo = uniCloud.importObject("uni-id-co")
export default {
mixins: [mixin],
data() {
return {
formData: {
username: "",
nickname: "",
password: "",
password2: "",
captcha: ""
},
rules,
focusUsername: false,
focusNickname: false,
focusPassword: false,
focusPassword2: false,
logo: "/static/logo.png"
}
},
onReady() {
this.$refs.form.setRules(this.rules)
},
onShow() {
// #ifdef H5
document.onkeydown = event => {
var e = event || window.event;
if (e && e.keyCode == 13) { //回车键的键值为13
this.submit()
}
};
// #endif
},
methods: {
/**
* 触发表单提交
*/
submit() {
this.$refs.form.validate().then((res) => {
if (this.formData.captcha.length != 4) {
this.$refs.captcha.focusCaptchaInput = true
return uni.showToast({
title: '请输入验证码',
icon: 'none'
});
}
if (this.needAgreements && !this.agree) {
return this.$refs.agreements.popup(() => {
this.submitForm(res)
})
}
this.submitForm(res)
}).catch((errors) => {
let key = errors[0].key
key = key.replace(key[0], key[0].toUpperCase())
console.log(key);
this['focus' + key] = true
})
},
submitForm(params) {
uniIdCo.registerUser(this.formData).then(e => {
console.log(e);
loginSuccess()
})
.catch(e => {
console.log(e);
console.log(e.message);
//更好的体验：登录错误，直接刷新验证码
this.$refs.captcha.getImageCaptcha()
})
},
navigateBack() {
uni.navigateBack()
},
toLogin() {
uni.navigateTo({
url: '/uni_modules/uni-id-pages/pages/login/login-withpwd'
})
},
registerByEmail() {
uni.navigateTo({
url: '/uni_modules/uni-id-pages/pages/register/register-by-email'
})
}
}
}
</script>
<style lang="scss">
@import "@/uni_modules/uni-id-pages/common/login-page.scss";
@media screen and (max-width: 690px) {
.uni-content {
margin-top: 15px;
height: 100%;
background-color: #fff;
}
}
@media screen and (min-width: 690px) {
.uni-content{
}
}
@media screen and (min-width: 690px) {
.uni-content {
padding: 30px 40px 60px;
}
.link-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: space-between;
margin-top: 10px;
}
.link {
font-size: 12px;
}
}
.uni-content ::v-deep .uni-forms-item__label {
position: absolute;
left: -15px;
}
button {
margin-top: 15px;
}
max-height: 530px;
}
.link-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: space-between;
margin-top: 10px;
}
.link {
font-size: 12px;
}
}
.uni-content ::v-deep .uni-forms-item__label {
position: absolute;
left: -15px;
}
button {
margin-top: 15px;
}
</style>
uni_modules/uni-id-pages/pages/retrieve/retrieve-by-email.vue
浏览文件 @ 9737d081
......@@ -204,6 +204,7 @@
@media screen and (min-width: 690px) {
.uni-content{
padding: 30px 40px 40px;
max-height: 650px;
}
.link-box {
......
uni_modules/uni-id-pages/pages/retrieve/retrieve.vue
浏览文件 @ 9737d081
......@@ -228,6 +228,7 @@
@media screen and (min-width: 690px) {
.uni-content{
padding: 30px 40px 40px;
max-height: 650px;
}
.link-box {
/* #ifndef APP-NVUE */
......
uni_modules/uni-id-pages/pages/userinfo/bind-mobile/bind-mobile.vue
浏览文件 @ 9737d081
......@@ -19,6 +19,10 @@
</view>
</template>
<script>
import {
store,
mutations
} from '@/uni_modules/uni-id-pages/common/store.js'
export default {
data() {
return {
......@@ -73,7 +77,7 @@
// #ifndef APP-NVUE
const eventChannel = this.getOpenerEventChannel();
// #endif
eventChannel.emit('getUserInfo')
mutations.setUserInfo(this.formData)
uni.navigateBack()
}).catch(e => {
console.log(e);
......
uni_modules/uni-id-pages/pages/userinfo/userinfo.vue
浏览文件 @ 9737d081
......@@ -22,9 +22,9 @@
placeholder="请输入要设置的昵称">
</uni-popup-dialog>
</uni-popup>
<uni-id-pages-bind-mobile ref="bind-mobile-by-sms" @success="getUserInfo"></uni-id-pages-bind-mobile>
<uni-id-pages-bind-mobile ref="bind-mobile-by-sms" @success="bindMobileSuccess"></uni-id-pages-bind-mobile>
<template v-if="showLoginManage">
<button v-if="hasLogin" @click="logout">退出登录</button>
<button v-if="userInfo._id" @click="logout">退出登录</button>
<button v-else @click="login">去登录</button>
</template>
</view>
......@@ -33,8 +33,16 @@
const db = uniCloud.database();
const usersTable = db.collection('uni-id-users')
const uniIdCo = uniCloud.importObject("uni-id-co")
import common from '@/uni_modules/uni-id-pages/common/common.js';
import {
store,
mutations
} from '@/uni_modules/uni-id-pages/common/store.js'
export default {
computed: {
userInfo() {
return store.userInfo
}
},
data() {
return {
univerifyStyle: {
......@@ -45,10 +53,10 @@
"title": "其他号码绑定",
}
},
userInfo: {
mobile:'',
nickname:''
},
// userInfo: {
// mobile:'',
// nickname:''
// },
hasLogin: false,
hasPwd:false,
showLoginManage:false//通过页面传参隐藏登录&退出登录按钮
......@@ -62,7 +70,6 @@
if(e.showLoginManage){
this.showLoginManage = true//通过页面传参隐藏登录&退出登录按钮
}
this.getUserInfo()
//判断当前用户是否有密码，否则就不显示密码修改功能
let res = await uniIdCo.getAccountInfo()
this.hasPwd = res.isPasswordSet
......@@ -76,7 +83,12 @@
}
})
},
logout:common.logout,
logout(){
mutations.logout()
},
bindMobileSuccess(){
mutations.updateUserInfo()
},
changePassword(){
uni.navigateTo({
url: '/uni_modules/uni-id-pages/pages/userinfo/change_pwd/change_pwd',
......@@ -85,24 +97,6 @@
}
})
},
getUserInfo(e) {
uni.showLoading({
mask: true
});
usersTable.where("'_id' == $cloudEnv_uid").field('mobile,nickname,email').get().then(res => {
console.log({res});
this.userInfo = res.result.data[0]
console.log('this.userInfo', this.userInfo);
this.hasLogin = true
}).catch(e => {
this.userInfo = {}
this.hasLogin = false
console.log(e.message, e.errCode);
}).finally(e => {
// console.log(e);
uni.hideLoading()
})
},
bindMobile() {
// #ifdef APP-PLUS
uni.preLogin({
......@@ -133,7 +127,7 @@
console.log(e.authResult);
uniIdCo.bindMobileByUniverify(e.authResult).then(res => {
console.log(res);
this.getUserInfo()
mutations.updateUserInfo()
}).catch(e => {
console.log(e);
}).finally(e=>{
......@@ -151,37 +145,13 @@
},
bindMobileBySmsCode() {
uni.navigateTo({
url: './bind-mobile/bind-mobile',
events: {
getUserInfo: () => {
this.getUserInfo()
}
},
complete(e) {
console.log(e);
}
url: './bind-mobile/bind-mobile'
})
},
setNickname(nickname) {
console.log(nickname);
if (nickname) {
usersTable.where('_id==$env.uid').update({
nickname
}).then(e => {
console.log(e);
if (e.result.updated) {
uni.showToast({
title: "更新成功",
icon: 'none'
});
this.userInfo.nickname = nickname
} else {
uni.showToast({
title: "没有改变",
icon: 'none'
});
}
})
mutations.updateUserInfo({nickname})
this.$refs.dialog.close()
} else {
this.$refs.dialog.open()
......@@ -196,7 +166,8 @@
}
</script>
<style lang="scss" scoped>
@import url("/uni_modules/uni-id-pages/common/login-page.scss");
@import "@/uni_modules/uni-id-pages/common/login-page.scss";
.uni-content {
padding: 0;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或