Skip to content

U
uni-starter

萌新之路 / uni-starter
与 Fork 源项目一致

Fork自 DCloud / uni-starter

通知 1
Star 1
Fork 0
U
uni-starter

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 948370a8 编写于 作者: DCloud_JSON's avatar DCloud_JSON
浏览文件
操作

简化逻辑

上级 de483cde
隐藏空白更改
内联 并排
Showing with 639 addition and 378 deletion
baseapp.config.js
浏览文件 @ 948370a8
......@@ -18,7 +18,7 @@ module.exports = {
"/uni_modules/uni-news-favorite/pages/uni-news-favorite/list",
"/pages/ucenter/edit/uploadCutImageToUnicloud"
],
"login": ["univerify", "smsCode", "username", "weixin", "apple"] //默认就是短信验证码登陆
"login": [ "smsCode","univerify", "username", "weixin", "apple"] //默认就是短信验证码登陆
},
"about": {
"appName": "base-app",
......
common/extiLogin.js 0 → 100644
浏览文件 @ 948370a8
export default function(result){
uni.showToast({
title: '登陆成功',
icon: 'none'
});
console.log('登陆成功',result);
uni.setStorageSync('uni_id_uid', result.uid)
uni.setStorageSync('uni_id_token', result.token)
uni.setStorageSync('uni_id_token_expired', result.tokenExpired)
//delete result.userInfo.token
// this.setUserInfo(result.userInfo)
var delta = 0//判断需要返回几层
let pages = getCurrentPages();
// console.log(pages);
pages.forEach((page,index)=>{
// console.log(pages[pages.length-index-1].route.split('/')[2]);
pages[pages.length-index-1].route.split('/')
if(pages[pages.length-index-1].route.split('/')[2] == 'login-page'){
delta ++
}
})
// console.log('判断需要返回几层',delta);
uni.navigateBack({delta})
}
\ No newline at end of file
components/send-sms-code/send-sms-code.vue
浏览文件 @ 948370a8
......@@ -79,8 +79,8 @@
{
"mobile": this.phone,
"type": this.codeType
},(data,result)=>{
console.log(data,result);
},result=>{
console.log(result);
uni.showToast({
title: "短信验证码发送成功",
icon: 'none'
......
components/uni-agreements/uni-agreements.vue 0 → 100644
浏览文件 @ 948370a8
<template>
<view class="root">
<text>登陆即表示同意</text>
<template v-for="(agreement,index) in agreements">
<text class="agreement" @click="navigateTo(agreement)">{{agreement.title}}</text>
<text class="hint" v-if="agreements.length-1>index">和</text>
</template>
</view>
</template>
<script>
export default {
name:"uni-agreements",
computed:{
agreements(){
return getApp().config.about.agreements
}
},
methods:{
navigateTo({url,title}){
uni.navigateTo({
url: '/pages/common/webview/webview?url='+url+'&title='+title,
success: res => {},
fail: () => {},
complete: () => {}
});
}
},
data() {
return {
};
}
}
</script>
<style>
.root{
flex-direction: row;
font-size: 28rpx;
color: #8a8f8b;
}
.agreement{
color:#04498c;
}
</style>
components/uni-quick-login/uni-quick-login.vue
浏览文件 @ 948370a8
......@@ -120,7 +120,7 @@
}),
getRoute(n = 0) {
let pages = getCurrentPages();
console.log('route-pages-length', pages.length);
// console.log('route-pages-length', pages.length);
if (n > pages.length) {
return ''
}
......@@ -211,7 +211,7 @@
},
quickLogin(params, type) { //联网验证登陆
console.log(params, type);
this.request('user-center/login_by_' + type, params, (data, result) => {
this.request('user-center/login_by_' + type, params, result => {
console.log(result);
if (result.code === 0) {
if (type == 'univerify') {
......@@ -251,7 +251,10 @@
.quick-login-box {
flex-direction: row;
width: 750rpx;
justify-content: space-around;
justify-content: space-around;
position: fixed;
bottom: 10rpx;
left: 0;
}
.item {
......
js_sdk/request.js
浏览文件 @ 948370a8
......@@ -23,7 +23,7 @@ export default function request(name,params,callback=false,{showLoading=false,lo
const {result:{data,code}} = e
console.log(data,code);
resolve(e)
return callback(data,e.result,e)
return callback(e.result,e)
},
fail(err){
reject(err)
......
pages.json
浏览文件 @ 948370a8
......@@ -100,25 +100,26 @@
// #endif
}
}, {
"path": "pages/ucenter/agree-list/agree-list",
"style": {
"navigationBarTitleText": "政策与协议"
}
}, {
"path": "pages/ucenter/agree-list/privacy/privacy",
"style": {
"navigationBarTitleText": "隐私政策"
}
},
// {
// "path": "pages/ucenter/agree-list/agree-list",
// "style": {
// "navigationBarTitleText": "政策与协议"
// }
}, {
"path": "pages/ucenter/agree-list/service/service",
"style": {
"navigationBarTitleText": "服务协议"
}
// }, {
// "path": "pages/ucenter/agree-list/privacy/privacy",
// "style": {
// "navigationBarTitleText": "隐私政策"
// }
}, {
// }, {
// "path": "pages/ucenter/agree-list/service/service",
// "style": {
// "navigationBarTitleText": "服务协议"
// }
// },
{
"path": "uni_modules/uni-upgrade-center-app/pages/upgrade-popup",
"style": {
"disableScroll": true,
......
pages/ucenter/edit/bind-mobile/bind-mobile.vue
浏览文件 @ 948370a8
......@@ -51,7 +51,7 @@
this.request('user-center/bind_mobile_by_sms', {
"mobile": this.formData.phone,
"code": this.formData.code
}, (data, result) => {
}, result=> {
console.log(result);
this.setUserInfo({"mobile":result.mobile})
uni.showToast({
......
pages/ucenter/edit/edit.vue
浏览文件 @ 948370a8
......@@ -71,7 +71,7 @@
console.log(e.authResult);
this.request('user-center/bind_mobile_by_univerify',
e.authResult,
(data, result) =>
result=>
{
console.log(result);
if(result.code===0){
......
pages/ucenter/login-page/common/login-page.css 0 → 100644
浏览文件 @ 948370a8
.content{
padding:0 50rpx;
width: 750rpx;
flex: 1;
}
.input-box{
padding:0 15px;
margin-top: 15px;
background-color: #F8F8F8;
border-radius: 6px;
font-size: 28rpx;
}
.get-code{
margin: 0;
margin-top:15px;
background-color: #007aff;
color: #FFFFFF;
}
.input-box,.get-code{
height: 50px;
line-height: 50px;
}
.title{
text-align: center;
padding-bottom: 5px;
}
.tip{
color: #666666;
font-size: 26rpx;
margin: 6px 0;
}
.easyinput{
background-color: #F8F8F8;
}
.send-btn{
height: 85rpx;
width: 100%;
margin-top:15px;
border-radius: 6rpx;
}
.link{
color: #04498c;
}
\ No newline at end of file
pages/ucenter/login-page/common/login-page.mixin.js 0 → 100644
浏览文件 @ 948370a8
import {mapMutations} from 'vuex';
import loginSuccess from './loginSuccess.js';
let mixin = {
methods:{
...mapMutations({
setUserInfo: 'user/login'
}),
loginSuccess(result){
loginSuccess(result)
delete result.userInfo.token
this.setUserInfo(result.userInfo)
}
}
}
export default mixin
\ No newline at end of file
pages/ucenter/login-page/common/loginPage.css
浏览文件 @ 948370a8
......@@ -27,10 +27,6 @@ page {
}
.content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
width: 630rpx;
flex-direction: column;
}
......
pages/ucenter/login-page/common/loginSuccess.js
浏览文件 @ 948370a8
......@@ -12,14 +12,14 @@ export default function(result){
var delta = 0//判断需要返回几层
let pages = getCurrentPages();
console.log(pages);
// console.log(pages);
pages.forEach((page,index)=>{
console.log(pages[pages.length-index-1].route.split('/')[2]);
// console.log(pages[pages.length-index-1].route.split('/')[2]);
pages[pages.length-index-1].route.split('/')
if(pages[pages.length-index-1].route.split('/')[2] == 'login-page'){
delta ++
}
})
console.log('判断需要返回几层',delta);
// console.log('判断需要返回几层',delta);
uni.navigateBack({delta})
}
\ No newline at end of file
pages/ucenter/login-page/index/index copy.vue 0 → 100644
浏览文件 @ 948370a8
<template>
<view class="wrap">
<view class="wrap-content">
<view class="content">
<!-- 顶部文字 -->
<text class="content-top-title">登陆后即可展示自己</text>
<login-ikonw class="login-iknow" :link="link" text="登录即表示同意用户协议和隐私政策"></login-ikonw>
<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
<uni-forms ref="form" :value="formData" :rules="rules">
<uni-forms-item name="phone">
<uni-easyinput type="number" class="phone-input-box" :inputBorder="false"
v-model="formData.phone" maxlength="11" placeholder="请输入手机号">
<!-- 当前仅支持中国大陆手机号 -->
<!-- <template slot="left">
<picker mode="selector" :range="phoneArea" @change="selectPhoneArea">
<text class="phone-area" @click="selectPhoneArea">{{currenPhoneArea}}</text>
</picker>
</template> -->
</uni-easyinput>
</uni-forms-item>
<button class="send-btn-box" :type="canGetShortMsg?'primary':'default'"
@click="sendShortMsg">获取短信验证码</button>
</uni-forms>
<!-- tip -->
<text class="tip-text">未注册的手机号验证通过后将自动注册</text>
<!-- 其他登录方式 -->
<!-- <view class="auth-box" v-if="loginList.includes('password')">
<text class="login-text" hover-class="hover" @click="toPwdLogin">密码登录</text>
<text class="login-text" hover-class="hover" @click="openLoginList">其他登录方式</text>
</view> -->
</view>
</view>
<!-- 登录按钮弹窗 -->
<login-action-sheet ref="loginActionSheet"></login-action-sheet>
<uni-quick-login ref="uniQuickLogin"></uni-quick-login>
</view>
</template>
<script>
var univerify_first,currentWebview;//是否一键登陆优先
import baseappConfig from '@/baseapp.config.js';
import mixin from '../common/loginPage.mixin.js';
var currentPage;
export default {
mixins:[mixin],
data() {
return {
phoneArea: ['+86'],
currenPhoneArea: '+86',
// loginList:[]
}
},
onLoad(e) {
// this.loginList = baseappConfig.router.login
univerify_first = e.univerify_first
//#ifdef APP-PLUS
if(univerify_first){
const pages = getCurrentPages();
currentWebview = pages[pages.length - 1].$getAppWebview();
currentWebview.setStyle({
"top":"2000px"
})
}
//#endif
},
onReady() {
//#ifdef APP-PLUS
if(univerify_first){
console.log('开始一键登陆');
setTimeout(()=>{
this.$refs.uniQuickLogin.login('univerify')
},100)
setTimeout(() => {
currentWebview.setStyle({
titleNView:{
autoBackButton:true,
backgroundColor:"#FFFFFF"
}
})
currentWebview.setStyle({
"top":"0"
})
}, 1500);
}
//#endif
},
computed: {
canGetShortMsg() {
return this.isPhone;
}
},
methods: {
selectPhoneArea(event) {
uni.showToast({
title: '当前仅支持中国大陆手机号',
icon: 'none'
});
// this.currenPhoneArea = this.phoneArea[event.detail.value];
},
sendShortMsg() {
/**
* 发送验证吗
*/
uni.showLoading();
uni.navigateTo({
url: '../phone-code/phone-code?phoneNumber=' + this.formData.phone + '&phoneArea=' +
this.currenPhoneArea,
success: res => {},
fail: () => {},
complete: () => {}
});
},
/**
* 去密码登录页
*/
toPwdLogin() {
uni.navigateTo({
url: '../pwd-login/pwd-login'
})
},
openLoginList() {
this.$refs.loginActionSheet.open();
},
back() {
uni.navigateBack()
}
}
}
</script>
<style>
@import url("../common/loginPage.css");
.content-top-title {
text-align: center;
}
.login-iknow {
justify-content: center;
}
.phone-area {
/* #ifdef APP-NVUE */
border-right-width: 1rpx;
border-right-color: #d7d9d8;
/* #endif */
/* #ifndef APP-NVUE */
border-right: 1rpx solid #d7d9d8;
/* #endif */
}
</style>
pages/ucenter/login-page/index/index.vue
浏览文件 @ 948370a8
<template>
<view class="wrap">
<view class="wrap-content">
<view class="content">
<!-- 顶部文字 -->
<text class="content-top-title">登陆后即可展示自己</text>
<login-ikonw class="login-iknow" :link="link" text="登录即表示同意用户协议和隐私政策"></login-ikonw>
<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
<uni-forms ref="form" :value="formData" :rules="rules">
<uni-forms-item name="phone">
<uni-easyinput type="number" class="phone-input-box" :inputBorder="false"
v-model="formData.phone" maxlength="11" placeholder="请输入手机号">
<!-- 当前仅支持中国大陆手机号 -->
<!-- <template slot="left">
<picker mode="selector" :range="phoneArea" @change="selectPhoneArea">
<text class="phone-area" @click="selectPhoneArea">{{currenPhoneArea}}</text>
</picker>
</template> -->
</uni-easyinput>
</uni-forms-item>
<button class="send-btn-box" :disabled="!canGetShortMsg" :type="canGetShortMsg?'primary':'default'"
@click="sendShortMsg">获取短信验证码</button>
</uni-forms>
<!-- tip -->
<text class="tip-text">未注册的手机号验证通过后将自动注册</text>
<!-- 其他登录方式 -->
<!-- <view class="auth-box" v-if="loginList.includes('password')">
<text class="login-text" hover-class="hover" @click="toPwdLogin">密码登录</text>
<text class="login-text" hover-class="hover" @click="openLoginList">其他登录方式</text>
</view> -->
</view>
</view>
<view class="content">
<!-- 顶部文字 -->
<text class="title">登陆后即可展示自己</text>
<uni-agreements></uni-agreements>
<!-- 登录框 -->
<input type="number" class="input-box" :inputBorder="false" v-model="phone" maxlength="11" placeholder="请输入手机号"/>
<button class="get-code" :class="{isPhone}" :disabled="!isPhone" :type="isPhone?'primary':'default'"
@click="sendShortMsg">获取短信验证码</button>
<text class="tip">未注册的手机号验证通过后将自动注册</text>
<!-- 登录按钮弹窗 -->
<login-action-sheet ref="loginActionSheet"></login-action-sheet>
<uni-quick-login ref="uniQuickLogin"></uni-quick-login>
</view>
</template>
<script>
var univerify_first,currentWebview;//是否一键登陆优先
import baseappConfig from '@/baseapp.config.js';
import mixin from '../common/loginPage.mixin.js';
var currentPage;
export default {
mixins:[mixin],
data() {
return {
phoneArea: ['+86'],
currenPhoneArea: '+86',
// loginList:[]
return {
phone:"17769516081"
}
},
computed: {
isPhone(){
return /^1\d{10}$/.test(this.phone);
}
},
onLoad(e) {
// this.loginList = baseappConfig.router.login
onLoad(e) {
//是否优先启动一键登陆。即：页面一加载就启动一键登录
univerify_first = e.univerify_first
//#ifdef APP-PLUS
if(univerify_first){
const pages = getCurrentPages();
currentWebview = pages[pages.length - 1].$getAppWebview();
currentWebview.setStyle({
"top":"2000px"
"top":"2000px" //隐藏当前页面窗体
})
}
//#endif
......@@ -86,68 +60,27 @@ import mixin from '../common/loginPage.mixin.js';
}
//#endif
},
computed: {
canGetShortMsg() {
return this.isPhone;
}
},
methods: {
selectPhoneArea(event) {
uni.showToast({
title: '当前仅支持中国大陆手机号',
icon: 'none'
});
// this.currenPhoneArea = this.phoneArea[event.detail.value];
},
sendShortMsg() {
/**
* 发送验证吗
*/
sendShortMsg() {
// 发送验证吗
uni.showLoading();
uni.navigateTo({
url: '../phone-code/phone-code?phoneNumber=' + this.formData.phone + '&phoneArea=' +
this.currenPhoneArea,
success: res => {},
fail: () => {},
complete: () => {}
url: '/pages/ucenter/login-page/phone-code/phone-code?phoneNumber=' + this.phone,
complete: () => {
uni.hideLoading();
}
});
},
/**
* 去密码登录页
*/
//去密码登录页
toPwdLogin() {
uni.navigateTo({
url: '../pwd-login/pwd-login'
})
},
openLoginList() {
this.$refs.loginActionSheet.open();
},
back() {
uni.navigateBack()
}
}
}
</script>
<style>
@import url("../common/loginPage.css");
.content-top-title {
text-align: center;
}
.login-iknow {
justify-content: center;
}
.phone-area {
/* #ifdef APP-NVUE */
border-right-width: 1rpx;
border-right-color: #d7d9d8;
/* #endif */
/* #ifndef APP-NVUE */
border-right: 1rpx solid #d7d9d8;
/* #endif */
}
<style lang="scss">
@import url("../common/login-page.css");
</style>
pages/ucenter/login-page/phone-code/phone-code.vue
浏览文件 @ 948370a8
<template>
<view class="wrap">
<view class="wrap-content">
<view class="content">
<!-- 顶部文字 -->
<text class="content-top-title">请输入验证码</text>
<login-ikonw class="login-iknow" :text="tipText"></login-ikonw>
<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
<uni-forms ref="form" :value="formData" :rules="rules">
<uni-forms-item name="phone">
<!-- <uni-easyinput type="number" class="phone-input-box" :inputBorder="false"
v-model="formData.phone" maxlength="11" placeholder="请输入手机号码">
</uni-easyinput> -->
<uni-easyinput type="number" class="phone-input-box" :inputBorder="false"
v-model="formData.code" maxlength="6" placeholder="请输入验证码">
<template slot="right">
<send-sms-code :phone="formData.phone" ref="shortCode"></send-sms-code>
</template>
</uni-easyinput>
</uni-forms-item>
<button class="send-btn-box" :disabled="!canSubmit" :type="canSubmit?'primary':'default'"
@click="submit">登录</button>
</uni-forms>
</view>
</view>
<uni-quick-login></uni-quick-login>
<view class="content">
<!-- 顶部文字 -->
<text class="tit">请输入验证码</text>
<text class="tip">{{tipText}}</text>
<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
<uni-easyinput type="number" class="easyinput" :inputBorder="false"
v-model="code" maxlength="6" placeholder="请输入验证码">
<template slot="right">
<send-sms-code :phone="phone" ref="sendSmsCode"></send-sms-code>
</template>
</uni-easyinput>
<button class="send-btn" :disabled="!canSubmit" :type="canSubmit?'primary':'default'"
@click="submit">登录</button>
</uni-forms>
<uni-quick-login></uni-quick-login>
</view>
</template>
<script>
import mixin from '../common/loginPage.mixin.js';
export default {
<script>
import mixin from '../common/login-page.mixin.js';
export default {
mixins:[mixin],
data() {
return {
currenPhoneArea: '',
code:'',
phone:''
}
},
computed: {
tipText() {
return `验证码已通过短信发送至${this.currenPhoneArea} ${this.formData.phone}。`;
return `验证码已通过短信发送至${this.phone}。`;
},
canSubmit() {
return this.isPhone && this.isCode;
canSubmit(){
return this.code.length==6;
}
},
onLoad({phoneNumber,phoneArea}) {
this.formData.phone = phoneNumber;
this.currenPhoneArea = '+' + Number(phoneArea);
this.phone = phoneNumber||'17769516081';
},
onReady() {
this.$refs.shortCode.start();
this.$refs.sendSmsCode.start();
},
methods: {
/**
* 完成并提交
*/
submit(){
uniCloud.callFunction({//联网验证登陆
"name": "user-center",
"data": {
"action": "loginBySms",
"params":{
"mobile":this.formData.phone,
"code":this.formData.code
}
},
success:async (e) => {
uni.hideLoading()
console.log(e.result);
if(e.result.code === 0){
this.loginSuccess(e.result)
}else{
uni.showModal({
title: '错误',
content: e.result.msg,
showCancel: false,
confirmText: '知道了',
});
}
},
fail: (err) => {
console.log(err);
uni.showModal({
title: '错误',
content: JSON.stringify(err),
showCancel: false,
confirmText: '知道了',
});
if(err.errCode===30002){
}
},
complete: () => {
uni.hideLoading()
}
})
methods: {
submit(){ //完成并提交
this.request('user-center/loginBySms',
{
"mobile":this.phone,
"code":this.code
},
e=>{
console.log(e);
this.loginSuccess(e)
}
)
}
}
}
</script>
<style>
@import url("../common/loginPage.css");
.phone-input-box{
margin-top: 10px;
}
@import url("../common/login-page.css");
</style>
pages/ucenter/login-page/pwd-login/pwd-login copy.vue 0 → 100644
浏览文件 @ 948370a8
<template>
<view class="wrap">
<view class="wrap-content">
<view class="content">
<!-- 顶部文字 -->
<text class="content-top-title">用户名密码登录</text>
<login-ikonw class="login-iknow" :link="link" text="登录即表示同意用户协议和隐私政策"></login-ikonw>
<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
<uni-forms ref="form" :value="formData" :rules="rules">
<uni-forms-item name="phone">
<uni-easyinput type="number" class="phone-input-box" :inputBorder="false"
v-model="formData.phone" maxlength="11" placeholder="请输入手机号/用户名">
<template slot="left">
<!-- 当前仅支持中国大陆手机号 -->
<!-- <picker mode="selector" :range="phoneArea" @change="selectPhoneArea"> -->
<text class="phone-area" @click="selectPhoneArea">{{currenPhoneArea}}</text>
<!-- </picker> -->
</template>
</uni-easyinput>
</uni-forms-item>
<uni-forms-item name="pwd">
<uni-easyinput type="password" class="phone-input-box" :inputBorder="false"
v-model="formData.pwd" placeholder="请输入密码"></uni-easyinput>
</uni-forms-item>
<button class="send-btn-box" :disabled="!canLogin" :type="canLogin?'primary':'default'"
@click="pwdLogin">登录</button>
</uni-forms>
<!-- 忘记密码 -->
<view class="auth-box">
<text class="login-text" @click="toRetrievePwd">忘记密码</text>
<text class="login-text" @click="toRegister">注册账号</text>
</view>
</view>
</view>
<uni-quick-login ref="uniQuickLogin"></uni-quick-login>
</view>
</template>
<script>
import mixin from '../common/loginPage.mixin.js';
export default {
mixins:[mixin],
data() {
return {
phoneArea: ['+86'],
currenPhoneArea: '+86',
}
},
computed: {
canLogin() {
return this.formData.phone.length && this.isPwd;
}
},
methods: {
/**
* 页面跳转，找回密码
*/
toRetrievePwd() {
// if (!this.isPhone) return uni.showToast({
// title: '请输入正确的手机号',
// icon: 'none'
// });
uni.navigateTo({
url: '../pwd-retrieve/pwd-retrieve?phoneNumber=' + (this.isPhone?this.formData.phone:'') + '&phoneArea=' + this.currenPhoneArea
})
},
/**
* 密码登录
*/
pwdLogin() {
// 下边是可以登录
uniCloud.callFunction({
name:"user-center",
"data":{
"action":"login",
"params":{
"username":this.formData.phone,
"password":this.formData.pwd
}
},
success:async (e) => {
uni.hideLoading()
console.log(e.result);
if(e.result.code === 0){
this.loginSuccess(e.result)
}else{
uni.showModal({
title: '错误',
content: e.result.msg,
showCancel: false,
confirmText: '知道了',
});
}
},
fail: (err) => {
console.log(err);
uni.showModal({
title: '错误',
content: JSON.stringify(err),
showCancel: false,
confirmText: '知道了',
});
if(err.errCode===30002){
}
},
complete: () => {
uni.hideLoading()
}
})
},
selectPhoneArea(event) {
uni.showToast({
title: '当前仅支持中国大陆手机号',
icon: 'none'
});
// this.currenPhoneArea = this.phoneArea[event.detail.value];
},
/* 前往注册 */
toRegister(e){
console.log(e);
uni.navigateTo({
url:'/pages/ucenter/login-page/register/register'
})
}
}
}
</script>
<style>
@import url("../common/loginPage.css");
.phone-input-box {
margin-top: 20rpx;
}
.auth-box {
justify-content: space-between;
margin-top: 20px;
}
.login-text-sub {
color: #8a8f8b;
}
.toRegister{
margin-top: 80px;
width: 600rpx;
}
</style>
pages/ucenter/login-page/pwd-login/pwd-login.vue
浏览文件 @ 948370a8
<template>
<view class="wrap">
<view class="wrap-content">
<view class="content">
<!-- 顶部文字 -->
<text class="content-top-title">用户名密码登录</text>
<login-ikonw class="login-iknow" :link="link" text="登录即表示同意用户协议和隐私政策"></login-ikonw>
<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
<uni-forms ref="form" :value="formData" :rules="rules">
<uni-forms-item name="phone">
<uni-easyinput type="number" class="phone-input-box" :inputBorder="false"
v-model="formData.phone" maxlength="11" placeholder="请输入手机号/用户名">
<template slot="left">
<!-- 当前仅支持中国大陆手机号 -->
<!-- <picker mode="selector" :range="phoneArea" @change="selectPhoneArea"> -->
<text class="phone-area" @click="selectPhoneArea">{{currenPhoneArea}}</text>
<!-- </picker> -->
</template>
</uni-easyinput>
</uni-forms-item>
<uni-forms-item name="pwd">
<uni-easyinput type="password" class="phone-input-box" :inputBorder="false"
v-model="formData.pwd" placeholder="请输入密码"></uni-easyinput>
</uni-forms-item>
<button class="send-btn-box" :disabled="!canLogin" :type="canLogin?'primary':'default'"
@click="pwdLogin">登录</button>
</uni-forms>
<!-- 忘记密码 -->
<view class="auth-box">
<text class="login-text" @click="toRetrievePwd">忘记密码</text>
<text class="login-text" @click="toRegister">注册账号</text>
</view>
</view>
</view>
<uni-quick-login ref="uniQuickLogin"></uni-quick-login>
<template>
<view class="content">
<!-- 顶部文字 -->
<text class="title">用户名密码登录</text>
<uni-agreements></uni-agreements>
<input type="number" class="input-box" :inputBorder="false" v-model="username" maxlength="11" placeholder="请输入手机号/用户名"></input>
<input type="password" class="input-box" :inputBorder="false" v-model="password" placeholder="请输入密码"></input>
<button class="send-btn" :disabled="!canLogin" :type="canLogin?'primary':'default'" @click="pwdLogin">登录</button>
<!-- 忘记密码 -->
<view class="auth-box">
<text class="link" @click="toRetrievePwd">忘记密码</text>
<text class="link" @click="toRegister">注册账号</text>
</view>
<uni-quick-login ref="uniQuickLogin"></uni-quick-login>
</view>
</template>
<script>
import mixin from '../common/loginPage.mixin.js';
import mixin from '../common/login-page.mixin.js';
export default {
mixins:[mixin],
data() {
return {
phoneArea: ['+86'],
currenPhoneArea: '+86',
return {
"password":"",
"username":""
}
},
computed: {
canLogin() {
return this.formData.phone.length && this.isPwd;
}
return this.username.length && this.isPwd;
},
isPwd(){
return /^.{6,20}$/.test(this.password);
},
isPhone(){
return /^1\d{10}$/.test(this.phone);
},
},
methods: {
/**
* 页面跳转，找回密码
*/
// 页面跳转，找回密码
toRetrievePwd() {
// if (!this.isPhone) return uni.showToast({
// title: '请输入正确的手机号',
// icon: 'none'
// });
uni.navigateTo({
url: '../pwd-retrieve/pwd-retrieve?phoneNumber=' + (this.isPhone?this.formData.phone:'') + '&phoneArea=' + this.currenPhoneArea
url: '../pwd-retrieve/pwd-retrieve?phoneNumber=' + (this.isPhone?this.username:'') + '&phoneArea=' + this.currenPhoneArea
})
},
/**
* 密码登录
*/
pwdLogin() {
// 下边是可以登录
uniCloud.callFunction({
name:"user-center",
"data":{
"action":"login",
"params":{
"username":this.formData.phone,
"password":this.formData.pwd
}
},
success:async (e) => {
uni.hideLoading()
console.log(e.result);
if(e.result.code === 0){
this.loginSuccess(e.result)
}else{
uni.showModal({
title: '错误',
content: e.result.msg,
showCancel: false,
confirmText: '知道了',
});
}
},
fail: (err) => {
console.log(err);
uni.showModal({
title: '错误',
content: JSON.stringify(err),
showCancel: false,
confirmText: '知道了',
});
if(err.errCode===30002){
}
},
complete: () => {
uni.hideLoading()
}
})
},
selectPhoneArea(event) {
uni.showToast({
title: '当前仅支持中国大陆手机号',
icon: 'none'
});
// this.currenPhoneArea = this.phoneArea[event.detail.value];
// 下边是可以登录
this.request('user-center/login',
{
"username":this.username,
"password":this.password
},result=>{
console.log(result);
if(result.code === 0){
this.loginSuccess(result)
}else{
uni.showModal({
title: '错误',
content: result.msg,
showCancel: false,
confirmText: '知道了'
});
}
}
)
},
/* 前往注册 */
toRegister(e){
......@@ -128,14 +79,15 @@
</script>
<style>
@import url("../common/loginPage.css");
.phone-input-box {
margin-top: 20rpx;
}
.auth-box {
@import url("../common/login-page.css");
.auth-box {
flex-direction: row;
justify-content: space-between;
margin-top: 20px;
}
margin-top: 20px;
}
.auth-box .link{
font-size: 26rpx;
}
.login-text-sub {
color: #8a8f8b;
}
......
pages/ucenter/login-page/pwd-retrieve/pwd-retrieve.vue
浏览文件 @ 948370a8
<template>
<view class="wrap">
<view class="wrap-content">
<view class="content">
<!-- 顶部文字 -->
<text class="content-top-title">重置密码</text>
<login-ikonw v-show="isPhone" class="login-iknow" :text="tipText"></login-ikonw>
<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
<uni-forms ref="form" :value="formData" :rules="rules">
<uni-forms-item name="phone">
<!-- focus规则如果上一页携带来“手机号码”数据就focus验证码输入框，否则focus手机号码输入框 -->
<uni-easyinput :focus="!formData.phone.length" type="number" class="phone-input-box" :inputBorder="false"
v-model="formData.phone" maxlength="11" placeholder="请输入手机号"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="code">
<uni-easyinput :focus="formData.phone.length" type="number" class="phone-input-box" :inputBorder="false"
v-model="formData.code" maxlength="6" placeholder="请输入验证码">
<template slot="right">
<send-sms-code ref="shortCode" :phone="formData.phone"></send-sms-code>
</template>
</uni-easyinput>
</uni-forms-item>
<uni-forms-item name="pwd">
<uni-easyinput type="password" class="phone-input-box" :inputBorder="false"
v-model="formData.pwd" placeholder="请输入新密码"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="pwd2">
<uni-easyinput type="password" class="phone-input-box" :inputBorder="false"
v-model="formData.pwd2" placeholder="请确认新密码"></uni-easyinput>
</uni-forms-item>
<button class="send-btn-box" :disabled="!canSubmit" :type="canSubmit?'primary':'default'"
@click="submit">完成</button>
</uni-forms>
</view>
</view>
<view class="content">
<!-- 顶部文字 -->
<text class="title">重置密码</text>
<login-ikonw v-show="isPhone" class="login-iknow" :text="tipText"></login-ikonw>
<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
<uni-forms ref="form" :value="formData" :rules="rules">
<uni-forms-item name="phone">
<!-- focus规则如果上一页携带来“手机号码”数据就focus验证码输入框，否则focus手机号码输入框 -->
<uni-easyinput :focus="!formData.phone.length" type="number" class="easyinput" :inputBorder="false"
v-model="formData.phone" maxlength="11" placeholder="请输入手机号"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="code">
<uni-easyinput :focus="formData.phone.length!=0" type="number" class="easyinput" :inputBorder="false"
v-model="formData.code" maxlength="6" placeholder="请输入验证码">
<template slot="right">
<send-sms-code ref="shortCode" :phone="formData.phone"></send-sms-code>
</template>
</uni-easyinput>
</uni-forms-item>
<uni-forms-item name="pwd">
<uni-easyinput type="password" class="easyinput" :inputBorder="false"
v-model="formData.pwd" placeholder="请输入新密码"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="pwd2">
<uni-easyinput type="password" class="easyinput" :inputBorder="false"
v-model="formData.pwd2" placeholder="请确认新密码"></uni-easyinput>
</uni-forms-item>
<button class="send-btn-box" :disabled="!canSubmit" :type="canSubmit?'primary':'default'"
@click="submit">完成</button>
</uni-forms>
</view>
</template>
......@@ -42,21 +38,34 @@ import mixin from '../common/loginPage.mixin.js';
mixins:[mixin],
data() {
return {
currenPhoneArea: ''
}
},
computed: {
tipText() {
return `验证码已通过短信发送至${this.currenPhoneArea} ${this.formData.phone}。密码为6 - 20位`
return `验证码已通过短信发送至${this.formData.phone}。密码为6 - 20位`
},
canSubmit() {
return this.isPhone && this.isPwd && this.isCode;
},
isPhone(){
let reg_phone = /^1\d{10}$/;
let isPhone = reg_phone.test(this.formData.phone);
return isPhone;
},
isPwd(){
let reg_pwd = /^.{6,20}$/;
let isPwd = reg_pwd.test(this.formData.pwd);
return isPwd;
},
isCode(){
let reg_code = /^\d{6}$/;
let isCode = reg_code.test(this.formData.code);
return isCode;
}
},
onLoad(event) {
if (event && event.phoneNumber) {
this.formData.phone = event.phoneNumber;
this.currenPhoneArea = '+' + Number(event.phoneArea);
}
},
onReady() {
......@@ -75,7 +84,7 @@ import mixin from '../common/loginPage.mixin.js';
"mobile":this.formData.phone,
"code":this.formData.code,
"password":this.formData.pwd
},(data,result)=>{
},result=>{
console.log(result);
uni.showToast({
title: result.msg,
......@@ -92,7 +101,7 @@ import mixin from '../common/loginPage.mixin.js';
</script>
<style>
@import url("../common/loginPage.css");
@import url("../common/login-page.css");
.content-top-title{
margin-bottom: 6px;
}
......
pages/ucenter/login-page/register/register.vue
浏览文件 @ 948370a8
......@@ -13,15 +13,15 @@
<uni-forms-item name="pwd2" v-model="formData.pwd2" required>
<uni-easyinput :inputBorder="false" class="phone-input-box" placeholder="再次输入密码" type="password" v-model="formData.pwd2" trim="both" />
</uni-forms-item>
<login-ikonw class="login-iknow" :link="link" text="登录即表示同意用户协议和隐私政策"></login-ikonw>
<button class="send-btn-box" type="primary" @click="submit">注册并登陆</button>
<uni-agreements></uni-agreements>
<button class="send-btn" type="primary" @click="submit">注册并登陆</button>
</uni-forms>
</view>
</template>
<script>
import rules from './validator.js';
import mixin from '../common/loginPage.mixin.js';
import mixin from '../common/login-page.mixin.js';
export default {
mixins:[mixin],
data() {
......@@ -56,7 +56,7 @@ import mixin from '../common/loginPage.mixin.js';
})
},
submitForm(value) {
this.request('user-center/register',value,(data,result)=>{
this.request('user-center/register',value,result=>{
console.log(result);
if(result.code === 0){
this.loginSuccess(result)
......@@ -71,8 +71,11 @@ import mixin from '../common/loginPage.mixin.js';
@import url("../common/loginPage.css");
.uni-container {
padding: 15px;
}
.send-btn{
margin-top: 5px;
}
/*
.uni-input-border,
.uni-textarea-border {
width: 100%;
......@@ -107,22 +110,5 @@ import mixin from '../common/loginPage.mixin.js';
border-radius: 4px;
line-height: 1;
margin: 0;
}
.avatar-box {
width: 700rpx;
height: 200rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
}
.avatar-img {
width: 150rpx;
height: 150rpx;
border-radius: 75rpx;
border: #F8F8F8 solid 3px;
}
} */
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或