Loki
/
zsw-farm-bxg
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

h5登录方式修改为手机号登录

zyh
Aaron 4 years ago
parent
f4a9cd5f38
commit
c42fc330d7
5 changed files with 304 additions and 228 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      pages.json
  2. 25
      pages/user/ChangePassword/index.vue
  3. 411
      pages/user/Login/index.vue
  4. 92
      pages/user/PersonalData/index.vue
  5. 1
      utils/index.js

3
pages.json
Unescape View File

@ -25,7 +25,8 @@
}
},
{
"path": "pages/user/RetrievePassword/index",
// "path": "pages/user/RetrievePassword/index",
"path": "pages/user/ChangePassword/index",
"style": {
"navigationBarTitleText": "重置密码"
}

25
pages/user/ChangePassword/index.vue
Unescape View File

@ -1,9 +1,12 @@
<template>
<view class="ChangePassword">
<view class="phone">
<!-- <view class="phone">
当前手机号:
<input type="text" v-model="phone" disabled />
</view>
</view> -->
<view class="title">
通过手机号来修改密码：
</view>
<view class="list">
<view class="item">
<input type="password" placeholder="设置新密码" v-model="password" />
@ -19,12 +22,7 @@
<view class="confirmBnt bg-color-red" @click="confirm">确认修改</view>
</view>
</template>
<style scoped lang="less">
.ChangePassword .phone input {
width: 2 * 100rpx;
text-align: center;
}
</style>
<script>
// import { mapGetters } from "vuex";
import sendVerifyCode from '@/mixins/SendVerifyCode'
@ -133,3 +131,14 @@ export default {
},
}
</script>
<style scoped lang="less">
.ChangePassword {
.list{
width: 100%;
padding: 0 10%;
background-color: #FFFFFF;
.code{}
}
}
</style>

411
pages/user/Login/index.vue
Unescape View File

@ -5,40 +5,50 @@
<view class="item" :class="current === index ? 'on' : ''" v-for="(item, index) in navList"
@click="navTap(index)" :key="index">{{ item }}</view>
</view>
<!-- 手机号登录 -->
<view class="list" :hidden="current !== 0">
<form @submit.prevent="submit">
<view class="item">
<view class="item getPhoneCode">
<view class="acea-row row-between-wrapper">
<input type="text" placeholder="输入手机号码"
v-model="account" required
@input="checkPhone"/>
v-model="account" required/>
</view>
<view class="phoneCode" @click="sendCode">
{{ clockText }}
</view>
</view>
<view class="item" v-if="account.length === 11">
<view class="item">
<view class="acea-row row-between-wrapper">
<input type="password" placeholder="填写登录密码" v-model="password" required />
<input type="text" placeholder="请输入验证码" v-model="captcha" required />
<!-- <input type="password" placeholder="填写登录密码" v-model="password" required /> -->
</view>
</view>
</form>
</view>
<!-- <view class="list" :hidden="current !== 1">
<!-- 账号密码登录 -->
<view class="list" :hidden="current !== 1">
<view class="item">
<view class="acea-row row-between-wrapper">
<input type="text" placeholder="输入手机号码" v-model="account" />
</view>
</view>
<view class="item">
<view class="item">
<view class="acea-row row-between-wrapper">
<input type="text" placeholder="输入密码" v-model="password" />
</view>
</view>
<!-- <view class="item">
<view class="align-left">
<input type="text" placeholder="填写验证码" class="codeIput" v-model="captcha" />
<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''"
@click="code">{{ text }}</button>
</view>
</view>
</view> -->
<view class="logon" @click="loginMobile" :hidden="current !== 1">登录</view>
<view class="logon" @click="submit" :hidden="current === 1">登录</view>
</view> -->
</view>
<view class="logon" @click="loginMobile" :hidden="current === 1">手机号登录</view>
<view class="logon" @click="submit" :hidden="current !== 1">登录</view>
<view class="tip">
没有账号?
第一次使用?
<text @click="formItem = 2" class="font-color-red">立即注册</text>
</view>
</view>
@ -124,22 +134,21 @@
mixins: [sendVerifyCode],
data: function () {
return {
navList: ["手机号登录"],
// navList: ["手机号登录", "密码登录"],
navList: ["手机号登录",],
current: 0,
account: "",
password: "",
captcha: "",
inviteCode: "",
formItem: 1,
type: "login"
type: "login",
timer: null,
clock: 60,
clockText: '获取验证码'
};
},
methods: {
checkPhone(e) {
if (e.target.value.length === 11) {
console.log('手机号')
}
},
async loginMobile() {
var that = this;
const {
@ -166,16 +175,18 @@
return validatorDefaultCatch(e);
}
loginMobile({
phone: that.account,
account: that.account,
captcha: that.captcha,
spread: cookie.get("spread")
})
.then(res => {
.then(res => {
var data = res.data;
that.$store.commit("login", data.token, dayjs(data.expires_time));
that.$store.dispatch('userInfo', true)
handleGetUserInfo();
})
.catch(err => {
console.log(err)
uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message,
icon: "none",
@ -183,157 +194,215 @@
});
});
},
async register() {
var that = this;
const {
account,
captcha,
password
} = that;
try {
await that
.$validator({
account: [
required(required.message("手机号码")),
chs_phone(chs_phone.message())
],
captcha: [
required(required.message("验证码")),
alpha_num(alpha_num.message("验证码"))
],
password: [
required(required.message("密码")),
attrs.range([6, 16], attrs.range.message("密码")),
alpha_num(alpha_num.message("密码"))
]
})
.validate({
account,
captcha,
password
});
} catch (e) {
return validatorDefaultCatch(e);
}
register({
account: that.account,
captcha: that.captcha,
password: that.password,
inviteCode: that.inviteCode,
spread: cookie.get("spread")
})
.then(res => {
uni.showToast({
title: res.msg,
icon: "success",
duration: 2000
});
that.formItem = 1;
})
.catch(err => {
uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message,
icon: "none",
duration: 2000
});
});
},
// 获取验证码
async code() {
var that = this;
const {
account
} = that;
try {
await that
.$validator({
account: [
required(required.message("手机号码")),
chs_phone(chs_phone.message())
]
})
.validate({
account
});
} catch (e) {
return validatorDefaultCatch(e);
}
if (that.formItem == 2) that.type = "register";
await registerVerify({
phone: that.account,
type: that.type
})
.then(res => {
uni.showToast({
title: res.msg,
icon: "success",
duration: 2000
});
that.sendCode();
})
.catch(err => {
uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message,
icon: "none",
duration: 2000
});
});
},
navTap: function (index) {
this.current = index;
},
async submit() {
const {
account,
password
} = this;
try {
await this.$validator({
account: [
required(required.message("账号")),
attrs.range([5, 16], attrs.range.message("账号")),
alpha_num(alpha_num.message("账号"))
],
password: [
required(required.message("密码")),
attrs.range([6, 16], attrs.range.message("密码")),
alpha_num(alpha_num.message("密码"))
]
}).validate({
account,
password
});
} catch (e) {
return validatorDefaultCatch(e);
}
login({
username: account,
password,
spread: cookie.get("spread")
})
.then(({
data
}) => {
this.$store.commit("login", data.token, dayjs(data.expires_time));
handleGetUserInfo();
// let replace=this.$yroute.query.replace
// if(replace){
async register() {
var that = this;
const {
account,
captcha,
password
} = that;
try {
await that
.$validator({
account: [
required(required.message("手机号码")),
chs_phone(chs_phone.message())
],
captcha: [
required(required.message("验证码")),
alpha_num(alpha_num.message("验证码"))
],
password: [
required(required.message("密码")),
attrs.range([6, 16], attrs.range.message("密码")),
alpha_num(alpha_num.message("密码"))
]
})
.validate({
account,
captcha,
password
});
} catch (e) {
return validatorDefaultCatch(e);
}
register({
account: that.account,
captcha: that.captcha,
password: that.password,
inviteCode: that.inviteCode,
spread: cookie.get("spread")
})
.then(res => {
uni.showToast({
title: res.msg,
icon: "success",
duration: 2000
});
that.formItem = 1;
})
.catch(err => {
uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message,
icon: "none",
duration: 2000
});
});
},
// 获取验证码
async code() {
const {
account
} = this;
try {
await this
.$validator({
account: [
required(required.message("手机号码")),
chs_phone(chs_phone.message())
]
})
.validate({
account
});
} catch (e) {
return validatorDefaultCatch(e);
}
if (this.formItem == 2) this.type = "register";
this.showCode()
},
// 手机号登录获取验证码
async sendCode () {
const {
account
} = this;
try {
await this
.$validator({
account: [
required(required.message("手机号码")),
chs_phone(chs_phone.message())
]
})
.validate({
account
});
} catch (e) {
return validatorDefaultCatch(e);
}
// 倒计时
if (this.clock !== 60) {
return
}
this.clock--
this.clockText = `${this.clock} 秒`
this.timer = setInterval(() => {
if (parseInt(this.clock) === 1) {
clearTimeout(this.timer)
this.clock = 60
this.clockText = '获取验证码'
return
}
this.clock--
if (this.clock < 10) this.clock = `0${this.clock}`
this.clockText = `${this.clock} 秒`
}, 1000)
this.showCode()
},
// 验证码请求
showCode() {
return registerVerify({
phone: this.account,
type: this.type
})
.then(res => {
uni.showToast({
title: res.msg,
icon: "success",
duration: 2000
});
this.sendCode();
})
.catch(err => {
uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message,
icon: "none",
duration: 2000
});
});
},
navTap(index) { this.current = index; },
async submit() {
const {
account,
password
} = this;
try {
await this.$validator({
account: [
required(required.message("账号")),
attrs.range([5, 16], attrs.range.message("账号")),
alpha_num(alpha_num.message("账号"))
],
password: [
required(required.message("密码")),
attrs.range([6, 16], attrs.range.message("密码")),
alpha_num(alpha_num.message("密码"))
]
}).validate({
account,
password
});
} catch (e) {
return validatorDefaultCatch(e);
}
// 账号密码登录
login({
username: account,
password,
spread: cookie.get("spread")
})
.then(({
data
}) => {
this.$store.commit("login", data.token, dayjs(data.expires_time));
handleGetUserInfo();
// let replace=this.$yroute.query.replace
// if(replace){
// }
// this.$yrouter.replace({
// path: this.$yroute.query.replace || '/pages/home/index'
// });
})
.catch(err => {
console.log(err);
uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message,
icon: "none",
duration: 2000
});
});
}
// }
// this.$yrouter.replace({
// path: this.$yroute.query.replace || '/pages/home/index'
// });
})
.catch(err => {
console.log(err);
uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message,
icon: "none",
duration: 2000
});
});
}
}
};
</script>
<style lang="scss">
.register .whiteBg .title .item{
border-bottom: 2px solid;
}
.register .whiteBg .title .item.on{
border-bottom-color: #f35749;
}
.getPhoneCode{
display: flex;
justify-content: space-between;
.phoneCode{
color: #FFFFFF;
background-color: #f35749;
padding: 12rpx;
border-radius: 30rpx;
}
}
</style>

92
pages/user/PersonalData/index.vue
Unescape View File

@ -1,58 +1,56 @@
<template>
<view class="personal-data">
<view class="wrapper">
<view class="wrapList">
<view class="item acea-row row-between-wrapper on">
<view class="picTxt acea-row row-between-wrapper">
<view class="pictrue" @tap="chooseImage">
<div class="pictrue">
<img :src="avatar" />
</div>
<image :src="`${$VUE_APP_RESOURCES_URL}/images/alter.png`" class="alter" />
</view>
<view class="text">
<view class="name line1">{{ userInfo.nickname }}</view>
<view class="phone">
绑定手机号：
<text v-if="userInfo.phone">{{ userInfo.phone }}</text>
<text v-else>未绑定</text>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="list">
<view class="item acea-row row-between-wrapper">
<view>昵称</view>
<view class="input">
<input type="text" v-model="userInfo.nickname" />
</view>
</view>
<view class="item acea-row row-between-wrapper">
<view>ID号</view>
<view class="input acea-row row-between-wrapper">
<input type="text" :value="userInfo.uid" disabled class="id" />
<text class="iconfont icon-suozi"></text>
</view>
</view>
<view class="item acea-row row-between-wrapper">
<view>手机号</view>
<view class="input">
<!-- <input type="text" v-model="userInfo.phone" placeholder="未绑定"/> -->
<input type="text" v-if="userInfo.phone" v-model="userInfo.phone" placeholder="未绑定"/>
<input type="text" v-else value="未绑定" disabled class="id" />
</view>
</view>
<!--
<view class="item acea-row row-between-wrapper" @click="goChangePassword()">
<view class="wrapList">
<view class="item acea-row row-between-wrapper on">
<view class="picTxt acea-row row-between-wrapper">
<view class="pictrue" @tap="chooseImage">
<div class="pictrue">
<img :src="avatar" />
</div>
<image :src="`${$VUE_APP_RESOURCES_URL}/images/alter.png`" class="alter" />
</view>
<view class="text">
<view class="name line1">{{ userInfo.nickname }}</view>
<view class="phone">
绑定手机号：
<text v-if="userInfo.phone">{{ userInfo.phone }}</text>
<text v-else>未绑定</text>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="list">
<view class="item acea-row row-between-wrapper">
<view>昵称</view>
<view class="input">
<input type="text" v-model="userInfo.nickname" />
</view>
</view>
<view class="item acea-row row-between-wrapper">
<view>ID号</view>
<view class="input acea-row row-between-wrapper">
<input type="text" :value="userInfo.uid" disabled class="id" />
<text class="iconfont icon-suozi"></text>
</view>
</view>
<view class="item acea-row row-between-wrapper">
<view>手机号</view>
<view class="input">
<!-- <input type="text" v-model="userInfo.phone" placeholder="未绑定"/> -->
<input type="text" v-if="userInfo.phone" v-model="userInfo.phone" placeholder="未绑定"/>
<input type="text" v-else value="未绑定" disabled class="id" />
</view>
</view>
<!-- <view class="item acea-row row-between-wrapper" @click="goChangePassword()">
<view>密码</view>
<view class="input acea-row row-between-wrapper">
<text>点击修改密码</text>
<text class="iconfont icon-suozi"></text>
</view>
</view>
-->
</view> -->
</view>
<view class="modifyBnt bg-color-red" @click="submit">保存修改</view>
<!-- #ifndef MP-WEIXIN -->

1
utils/index.js
Unescape View File

@ -354,7 +354,6 @@ export const handleGetUserInfo = () => {
console.log('获取用户信息')
store.dispatch('setUserInfo', res.data)
console.log('获取用户信息后跳转回显的页面')
let redirect = cookie.get('redirect').replace(/\ /g, '')
if (redirect) {
reLaunch({

Write Preview
Loading…
Cancel
Save