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
Unified 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": { "style": {
"navigationBarTitleText": "重置密码" "navigationBarTitleText": "重置密码"
} }

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

@ -1,9 +1,12 @@
<template> <template>
<view class="ChangePassword"> <view class="ChangePassword">
<view class="phone"> <!-- <view class="phone">
当前手机号: 当前手机号:
<input type="text" v-model="phone" disabled /> <input type="text" v-model="phone" disabled />
</view> </view> -->
<view class="title">
通过手机号来修改密码：
</view>
<view class="list"> <view class="list">
<view class="item"> <view class="item">
<input type="password" placeholder="设置新密码" v-model="password" /> <input type="password" placeholder="设置新密码" v-model="password" />
@ -19,12 +22,7 @@
<view class="confirmBnt bg-color-red" @click="confirm">确认修改</view> <view class="confirmBnt bg-color-red" @click="confirm">确认修改</view>
</view> </view>
</template> </template>
<style scoped lang="less">
.ChangePassword .phone input {
width: 2 * 100rpx;
text-align: center;
}
</style>
<script> <script>
// import { mapGetters } from "vuex"; // import { mapGetters } from "vuex";
import sendVerifyCode from '@/mixins/SendVerifyCode' import sendVerifyCode from '@/mixins/SendVerifyCode'
@ -133,3 +131,14 @@ export default {
}, },
} }
</script> </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" <view class="item" :class="current === index ? 'on' : ''" v-for="(item, index) in navList"
@click="navTap(index)" :key="index">{{ item }}</view> @click="navTap(index)" :key="index">{{ item }}</view>
</view> </view>
<!-- 手机号登录 -->
<view class="list" :hidden="current !== 0"> <view class="list" :hidden="current !== 0">
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<view class="item"> <view class="item getPhoneCode">
<view class="acea-row row-between-wrapper"> <view class="acea-row row-between-wrapper">
<input type="text" placeholder="输入手机号码" <input type="text" placeholder="输入手机号码"
v-model="account" required v-model="account" required/>
@input="checkPhone"/>
</view> </view>
<view class="phoneCode" @click="sendCode">
{{ clockText }}
</view>
</view> </view>
<view class="item" v-if="account.length === 11"> <view class="item">
<view class="acea-row row-between-wrapper"> <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>
</view> </view>
</form> </form>
</view> </view>
<!-- <view class="list" :hidden="current !== 1"> <!-- 账号密码登录 -->
<view class="list" :hidden="current !== 1">
<view class="item"> <view class="item">
<view class="acea-row row-between-wrapper"> <view class="acea-row row-between-wrapper">
<input type="text" placeholder="输入手机号码" v-model="account" /> <input type="text" placeholder="输入手机号码" v-model="account" />
</view> </view>
</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"> <view class="align-left">
<input type="text" placeholder="填写验证码" class="codeIput" v-model="captcha" /> <input type="text" placeholder="填写验证码" class="codeIput" v-model="captcha" />
<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" <button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''"
@click="code">{{ text }}</button> @click="code">{{ text }}</button>
</view> </view>
</view> </view> -->
</view> --> </view>
<view class="logon" @click="loginMobile" :hidden="current !== 1">登录</view> <view class="logon" @click="loginMobile" :hidden="current === 1">手机号登录</view>
<view class="logon" @click="submit" :hidden="current === 1">登录</view> <view class="logon" @click="submit" :hidden="current !== 1">登录</view>
<view class="tip"> <view class="tip">
没有账号? 第一次使用?
<text @click="formItem = 2" class="font-color-red">立即注册</text> <text @click="formItem = 2" class="font-color-red">立即注册</text>
</view> </view>
</view> </view>
@ -124,22 +134,21 @@
mixins: [sendVerifyCode], mixins: [sendVerifyCode],
data: function () { data: function () {
return { return {
navList: ["手机号登录"], // navList: ["手机号登录", "密码登录"],
navList: ["手机号登录",],
current: 0, current: 0,
account: "", account: "",
password: "", password: "",
captcha: "", captcha: "",
inviteCode: "", inviteCode: "",
formItem: 1, formItem: 1,
type: "login" type: "login",
timer: null,
clock: 60,
clockText: '获取验证码'
}; };
}, },
methods: { methods: {
checkPhone(e) {
if (e.target.value.length === 11) {
console.log('手机号')
}
},
async loginMobile() { async loginMobile() {
var that = this; var that = this;
const { const {
@ -166,16 +175,18 @@
return validatorDefaultCatch(e); return validatorDefaultCatch(e);
} }
loginMobile({ loginMobile({
phone: that.account, account: that.account,
captcha: that.captcha, captcha: that.captcha,
spread: cookie.get("spread") spread: cookie.get("spread")
}) })
.then(res => { .then(res => {
var data = res.data; var data = res.data;
that.$store.commit("login", data.token, dayjs(data.expires_time)); that.$store.commit("login", data.token, dayjs(data.expires_time));
that.$store.dispatch('userInfo', true)
handleGetUserInfo(); handleGetUserInfo();
}) })
.catch(err => { .catch(err => {
console.log(err)
uni.showToast({ uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message, title: err.msg || err.response.data.msg || err.response.data.message,
icon: "none", icon: "none",
@ -183,157 +194,215 @@
}); });
}); });
}, },
async register() { async register() {
var that = this; var that = this;
const { const {
account, account,
captcha, captcha,
password password
} = that; } = that;
try { try {
await that await that
.$validator({ .$validator({
account: [ account: [
required(required.message("手机号码")), required(required.message("手机号码")),
chs_phone(chs_phone.message()) chs_phone(chs_phone.message())
], ],
captcha: [ captcha: [
required(required.message("验证码")), required(required.message("验证码")),
alpha_num(alpha_num.message("验证码")) alpha_num(alpha_num.message("验证码"))
], ],
password: [ password: [
required(required.message("密码")), required(required.message("密码")),
attrs.range([6, 16], attrs.range.message("密码")), attrs.range([6, 16], attrs.range.message("密码")),
alpha_num(alpha_num.message("密码")) alpha_num(alpha_num.message("密码"))
] ]
}) })
.validate({ .validate({
account, account,
captcha, captcha,
password password
}); });
} catch (e) { } catch (e) {
return validatorDefaultCatch(e); return validatorDefaultCatch(e);
} }
register({ register({
account: that.account, account: that.account,
captcha: that.captcha, captcha: that.captcha,
password: that.password, password: that.password,
inviteCode: that.inviteCode, inviteCode: that.inviteCode,
spread: cookie.get("spread") spread: cookie.get("spread")
}) })
.then(res => { .then(res => {
uni.showToast({ uni.showToast({
title: res.msg, title: res.msg,
icon: "success", icon: "success",
duration: 2000 duration: 2000
}); });
that.formItem = 1; that.formItem = 1;
}) })
.catch(err => { .catch(err => {
uni.showToast({ uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message, title: err.msg || err.response.data.msg || err.response.data.message,
icon: "none", icon: "none",
duration: 2000 duration: 2000
}); });
}); });
}, },
// 获取验证码 // 获取验证码
async code() { async code() {
var that = this; const {
const { account
account } = this;
} = that; try {
try { await this
await that .$validator({
.$validator({ account: [
account: [ required(required.message("手机号码")),
required(required.message("手机号码")), chs_phone(chs_phone.message())
chs_phone(chs_phone.message()) ]
] })
}) .validate({
.validate({ account
account });
}); } catch (e) {
} catch (e) { return validatorDefaultCatch(e);
return validatorDefaultCatch(e); }
} if (this.formItem == 2) this.type = "register";
if (that.formItem == 2) that.type = "register"; this.showCode()
await registerVerify({ },
phone: that.account, // 手机号登录获取验证码
type: that.type async sendCode () {
}) const {
.then(res => { account
uni.showToast({ } = this;
title: res.msg, try {
icon: "success", await this
duration: 2000 .$validator({
}); account: [
that.sendCode(); required(required.message("手机号码")),
}) chs_phone(chs_phone.message())
.catch(err => { ]
uni.showToast({ })
title: err.msg || err.response.data.msg || err.response.data.message, .validate({
icon: "none", account
duration: 2000 });
}); } catch (e) {
}); return validatorDefaultCatch(e);
}, }
navTap: function (index) { // 倒计时
this.current = index; if (this.clock !== 60) {
}, return
async submit() { }
const { this.clock--
account, this.clockText = `${this.clock} 秒`
password this.timer = setInterval(() => {
} = this; if (parseInt(this.clock) === 1) {
try { clearTimeout(this.timer)
await this.$validator({ this.clock = 60
account: [ this.clockText = '获取验证码'
required(required.message("账号")), return
attrs.range([5, 16], attrs.range.message("账号")), }
alpha_num(alpha_num.message("账号")) this.clock--
], if (this.clock < 10) this.clock = `0${this.clock}`
password: [ this.clockText = `${this.clock} 秒`
required(required.message("密码")), }, 1000)
attrs.range([6, 16], attrs.range.message("密码")), this.showCode()
alpha_num(alpha_num.message("密码")) },
] // 验证码请求
}).validate({ showCode() {
account, return registerVerify({
password phone: this.account,
}); type: this.type
} catch (e) { })
return validatorDefaultCatch(e); .then(res => {
} uni.showToast({
title: res.msg,
login({ icon: "success",
username: account, duration: 2000
password, });
spread: cookie.get("spread") this.sendCode();
}) })
.then(({ .catch(err => {
data uni.showToast({
}) => { title: err.msg || err.response.data.msg || err.response.data.message,
this.$store.commit("login", data.token, dayjs(data.expires_time)); icon: "none",
handleGetUserInfo(); duration: 2000
// let replace=this.$yroute.query.replace });
// if(replace){ });
},
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({ // this.$yrouter.replace({
// path: this.$yroute.query.replace || '/pages/home/index' // path: this.$yroute.query.replace || '/pages/home/index'
// }); // });
}) })
.catch(err => { .catch(err => {
console.log(err); console.log(err);
uni.showToast({ uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message, title: err.msg || err.response.data.msg || err.response.data.message,
icon: "none", icon: "none",
duration: 2000 duration: 2000
}); });
}); });
} }
} }
}; };
</script> </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> <template>
<view class="personal-data"> <view class="personal-data">
<view class="wrapper"> <view class="wrapper">
<view class="wrapList"> <view class="wrapList">
<view class="item acea-row row-between-wrapper on"> <view class="item acea-row row-between-wrapper on">
<view class="picTxt acea-row row-between-wrapper"> <view class="picTxt acea-row row-between-wrapper">
<view class="pictrue" @tap="chooseImage"> <view class="pictrue" @tap="chooseImage">
<div class="pictrue"> <div class="pictrue">
<img :src="avatar" /> <img :src="avatar" />
</div> </div>
<image :src="`${$VUE_APP_RESOURCES_URL}/images/alter.png`" class="alter" /> <image :src="`${$VUE_APP_RESOURCES_URL}/images/alter.png`" class="alter" />
</view> </view>
<view class="text"> <view class="text">
<view class="name line1">{{ userInfo.nickname }}</view> <view class="name line1">{{ userInfo.nickname }}</view>
<view class="phone"> <view class="phone">
绑定手机号： 绑定手机号：
<text v-if="userInfo.phone">{{ userInfo.phone }}</text> <text v-if="userInfo.phone">{{ userInfo.phone }}</text>
<text v-else>未绑定</text> <text v-else>未绑定</text>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="list"> <view class="list">
<view class="item acea-row row-between-wrapper"> <view class="item acea-row row-between-wrapper">
<view>昵称</view> <view>昵称</view>
<view class="input"> <view class="input">
<input type="text" v-model="userInfo.nickname" /> <input type="text" v-model="userInfo.nickname" />
</view> </view>
</view> </view>
<view class="item acea-row row-between-wrapper"> <view class="item acea-row row-between-wrapper">
<view>ID号</view> <view>ID号</view>
<view class="input acea-row row-between-wrapper"> <view class="input acea-row row-between-wrapper">
<input type="text" :value="userInfo.uid" disabled class="id" /> <input type="text" :value="userInfo.uid" disabled class="id" />
<text class="iconfont icon-suozi"></text> <text class="iconfont icon-suozi"></text>
</view> </view>
</view> </view>
<view class="item acea-row row-between-wrapper"> <view class="item acea-row row-between-wrapper">
<view>手机号</view> <view>手机号</view>
<view class="input"> <view class="input">
<!-- <input type="text" v-model="userInfo.phone" placeholder="未绑定"/> --> <!-- <input type="text" v-model="userInfo.phone" placeholder="未绑定"/> -->
<input type="text" v-if="userInfo.phone" 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" /> <input type="text" v-else value="未绑定" disabled class="id" />
</view> </view>
</view> </view>
<!-- <!-- <view class="item acea-row row-between-wrapper" @click="goChangePassword()">
<view class="item acea-row row-between-wrapper" @click="goChangePassword()">
<view>密码</view> <view>密码</view>
<view class="input acea-row row-between-wrapper"> <view class="input acea-row row-between-wrapper">
<text>点击修改密码</text> <text>点击修改密码</text>
<text class="iconfont icon-suozi"></text> <text class="iconfont icon-suozi"></text>
</view> </view>
</view> </view> -->
-->
</view> </view>
<view class="modifyBnt bg-color-red" @click="submit">保存修改</view> <view class="modifyBnt bg-color-red" @click="submit">保存修改</view>
<!-- #ifndef MP-WEIXIN --> <!-- #ifndef MP-WEIXIN -->

1
utils/index.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save