cxc/yshopb2c-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

登录方式重构

Browse Source
This commit is contained in:
Aaron
2021-07-19 19:37:35 +08:00
parent 79305d7497
commit b196b5237d
21 changed files with 858 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
pages/user/Login/index.vue
View File

@ -1,7 +1,7 @@
<template>
<view class="register absolute">
<view class="whiteBg" v-if="formItem === 1">
<view class="title acea-row row-between-wrapper">
<view class="title acea-row">
<view class="item" :class="current === index ? 'on' : ''" v-for="(item, index) in navList"
@click="navTap(index)" :key="index">{{ item }}</view>
</view>
@ -9,42 +9,32 @@
<form @submit.prevent="submit">
<view class="item">
<view class="acea-row row-between-wrapper">
<!-- <svg class="icon" aria-hidden="true">
<use xlink:href="#icon-phone_" />
</svg>-->
<input type="text" placeholder="输入手机号码" v-model="account" required />
<input type="text" placeholder="输入手机号码"
v-model="account" required
@input="checkPhone"/>
</view>
</view>
<view class="item">
<view class="item" v-if="account.length === 11">
<view class="acea-row row-between-wrapper">
<!-- <svg class="icon" aria-hidden="true">
<use xlink:href="#icon-code_" />
</svg>-->
<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">
<!-- <svg class="icon" aria-hidden="true">
<use xlink:href="#icon-phone_" />
</svg>-->
<input type="text" placeholder="输入手机号码" v-model="account" />
</view>
</view>
<view class="item">
<view class="align-left">
<!-- <svg class="icon" aria-hidden="true">
<use xlink:href="#icon-code_1" />
</svg>-->
<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> -->
<view class="logon" @click="loginMobile" :hidden="current !== 1">登录</view>
<view class="logon" @click="submit" :hidden="current === 1">登录</view>
<view class="tip">
@ -52,6 +42,7 @@
<text @click="formItem = 2" class="font-color-red">立即注册</text>
</view>
</view>
<!-- 注册 -->
<view class="whiteBg" v-else>
<view class="title acea-row row-between-wrapper">
<view class="item on">注册账号</view>
@ -133,7 +124,7 @@
mixins: [sendVerifyCode],
data: function () {
return {
navList: ["账号登录"],
navList: ["手机号登录"],
current: 0,
account: "",
password: "",
@ -144,49 +135,54 @@
};
},
methods: {
async loginMobile() {
var that = this;
const {
account,
captcha
} = that;
try {
await that
.$validator({
account: [
required(required.message("手机号码")),
chs_phone(chs_phone.message())
],
captcha: [
required(required.message("验证码")),
alpha_num(alpha_num.message("验证码"))
]
})
.validate({
account,
captcha
});
} catch (e) {
return validatorDefaultCatch(e);
}
loginMobile({
phone: that.account,
captcha: that.captcha,
spread: cookie.get("spread")
})
.then(res => {
var data = res.data;
that.$store.commit("login", data.token, dayjs(data.expires_time));
handleGetUserInfo();
})
.catch(err => {
uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message,
icon: "none",
duration: 2000
});
});
},
checkPhone(e) {
if (e.target.value.length === 11) {
console.log('手机号')
}
},
async loginMobile() {
var that = this;
const {
account,
captcha
} = that;
try {
await that
.$validator({
account: [
required(required.message("手机号码")),
chs_phone(chs_phone.message())
],
captcha: [
required(required.message("验证码")),
alpha_num(alpha_num.message("验证码"))
]
})
.validate({
account,
captcha
});
} catch (e) {
return validatorDefaultCatch(e);
}
loginMobile({
phone: that.account,
captcha: that.captcha,
spread: cookie.get("spread")
})
.then(res => {
var data = res.data;
that.$store.commit("login", data.token, dayjs(data.expires_time));
handleGetUserInfo();
})
.catch(err => {
uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message,
icon: "none",
duration: 2000
});
});
},
async register() {
var that = this;
const {

343
pages/user/Login/login.vue Normal file
View File

@ -0,0 +1,343 @@
<template>
<view class="register absolute">
<view class="whiteBg" v-if="formItem === 1">
<view class="title acea-row">
<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="acea-row row-between-wrapper">
<!-- <svg class="icon" aria-hidden="true">
<use xlink:href="#icon-phone_" />
</svg>-->
<input type="text" placeholder="输入手机号码" v-model="account" required />
</view>
</view>
<view class="item">
<view class="acea-row row-between-wrapper">
<!-- <svg class="icon" aria-hidden="true">
<use xlink:href="#icon-code_" />
</svg>-->
<input type="password" placeholder="填写登录密码" v-model="password" required />
</view>
</view>
</form>
</view>
<view class="list" :hidden="current !== 1">
<view class="item">
<view class="acea-row row-between-wrapper">
<!-- <svg class="icon" aria-hidden="true">
<use xlink:href="#icon-phone_" />
</svg>-->
<input type="text" placeholder="输入手机号码" v-model="account" />
</view>
</view>
<view class="item">
<view class="align-left">
<!-- <svg class="icon" aria-hidden="true">
<use xlink:href="#icon-code_1" />
</svg>-->
<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 class="tip">
没有账号?
<text @click="formItem = 2" class="font-color-red">立即注册</text>
</view>
</view>
<!-- 注册 -->
<view class="whiteBg" v-else>
<view class="title acea-row row-between-wrapper">
<view class="item on">注册账号</view>
</view>
<view class="list">
<view class="item">
<view>
<!-- <svg class="icon" aria-hidden="true">
<use xlink:href="#icon-phone_" />
</svg>-->
<input name="account" type="text" placeholder="输入手机号码" v-model="account" />
</view>
</view>
<view class="item">
<view class="align-left">
<!-- <svg class="icon" aria-hidden="true">
<use xlink:href="#icon-code_1" />
</svg>-->
<input name="verifyCode" type="text" placeholder="填写验证码" class="codeIput" v-model="captcha" />
<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''"
@click="code">{{ text }}</button>
</view>
</view>
<view class="item">
<view>
<!-- <svg class="icon" aria-hidden="true">
<use xlink:href="#icon-code_" />
</svg>-->
<input name="password" type="password" placeholder="填写您的登录密码" v-model="password" />
</view>
</view>
<!-- #ifndef H5 -->
<view class="item">
<view>
<!-- <svg class="icon" aria-hidden="true">
<use xlink:href="#icon-phone_" />
</svg>-->
<input name="inviteCode" type="text" placeholder="输入邀请码" v-model="inviteCode" />
</view>
</view>
<!-- #endif -->
</view>
<view class="logon" @click="register">注册</view>
<view class="tip">
已有账号?
<text @click="formItem = 1" class="font-color-red">立即登录</text>
</view>
</view>
</view>
</template>
<script>
import sendVerifyCode from "@/mixins/SendVerifyCode";
import {
login,
loginMobile,
registerVerify,
register
} from "@/api/user";
import attrs, {
required,
alpha_num,
chs_phone
} from "@/utils/validate";
import {
validatorDefaultCatch
} from "@/utils/dialog";
import dayjs from "dayjs";
import cookie from "@/utils/store/cookie";
import {
handleGetUserInfo
} from "@/utils";
const BACK_URL = "login_back_url";
export default {
name: "Login",
mixins: [sendVerifyCode],
data: function () {
return {
navList: ["账号登录", "修改密码"],
current: 0,
account: "",
password: "",
captcha: "",
inviteCode: "",
formItem: 1,
type: "login"
};
},
methods: {
async loginMobile() {
var that = this;
const {
account,
captcha
} = that;
try {
await that
.$validator({
account: [
required(required.message("手机号码")),
chs_phone(chs_phone.message())
],
captcha: [
required(required.message("验证码")),
alpha_num(alpha_num.message("验证码"))
]
})
.validate({
account,
captcha
});
} catch (e) {
return validatorDefaultCatch(e);
}
loginMobile({
phone: that.account,
captcha: that.captcha,
spread: cookie.get("spread")
})
.then(res => {
var data = res.data;
that.$store.commit("login", data.token, dayjs(data.expires_time));
handleGetUserInfo();
})
.catch(err => {
uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message,
icon: "none",
duration: 2000
});
});
},
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){
// }
// 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>

4
pages/user/PersonalData/index.vue
View File

@ -39,7 +39,8 @@
<view class="item acea-row row-between-wrapper">
<view>手机号</view>
<view class="input">
<input type="text" v-if="userInfo.phone" v-model="userInfo.phone" />
<!-- <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>
@ -156,7 +157,6 @@ export default {
},
chooseImage() {
chooseImage((img) => {
console.log(img);
this.avatar = img;
});
},

180
pages/user/User/index.vue
View File

@ -1,7 +1,11 @@
<template>
<view class="user">
<view v-if="$store.getters.token || userInfo.uid">
<view class="header bg-color-red acea-row row-between-wrapper">
<view class="getUserBaseData header bg-color-red acea-row row-between-wrapper" v-if="!userInfo.avatar && !userInfo.nickname">
<button class="userDataBtn" v-if="canIUseGetUserProfile" @tap="getUserInfoProfile">授权并查看用户信息</button>
<button class="userDataBtn" v-else @getuserinfo="getUserInfo" open-type="getUserInfo">授权并查看用户信息</button>
</view>
<view class="header bg-color-red acea-row row-between-wrapper" v-else>
<view class="picTxt acea-row row-between-wrapper">
<view class="pictrue">
<image :src="userInfo.avatar" />
@ -19,15 +23,15 @@
<text class="iconfont icon-bianji1"></text>
</view>
<!-- #ifdef MP-WEIXIN -->
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="binding" v-else>
<!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="binding" v-else>
<text>绑定手机号</text>
</button>
</button> -->
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<button class="binding" @click="goBindPhone()" v-else>
<!-- <button class="binding" @click="goBindPhone()" v-else>
<text>绑定手机号</text>
</button>
</button> -->
<!-- #endif -->
</view>
</view>
@ -128,11 +132,11 @@
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
import { getUserInfo, getMenuUser, bindingPhone, wxappBindingPhone } from '@/api/user'
import { isWeixin, VUE_APP_RESOURCES_URL } from '@/utils'
import cookie from '@/utils/store/cookie'
import { getUserInfo, getMenuUser, wxappAuth, bindingPhone, wxappBindingPhone, wxappGetUserInfo } from '@/api/user'
import { isWeixin, VUE_APP_RESOURCES_URL, parseQuery, getProvider } from '@/utils'
import SwitchWindow from '@/components/SwitchWindow'
import Authorization from '@/pages/authorization/index'
import cookie from '@/utils/store/cookie'
const NAME = 'User'
@ -145,14 +149,23 @@ export default {
props: {},
data: function() {
return {
MyMenus: [],
switchActive: false,
isWeixin: false,
canIUseGetUserProfile: false,
MyMenus: [],
switchActive: false,
isWeixin: false,
}
},
computed: mapGetters(['userInfo']),
onLoad() {
if (wx.getUserProfile) {
this.canIUseGetUserProfile = true
}
},
methods: {
...mapMutations(['updateAuthorizationPage']),
toLogin() {
this.$yrouter.push('/pages/user/Login/index')
},
goReturnList() {
this.$yrouter.push('/pages/order/ReturnList/index')
},
@ -165,9 +178,7 @@ export default {
})
},
goBindPhone() {
this.$yrouter.push({
path: '/pages/user/BindingPhone/index',
})
this.$yrouter.push('/pages/user/BindingPhone/index')
},
goUserCoupon() {
this.$yrouter.push('/pages/user/coupon/UserCoupon/index')
@ -179,45 +190,41 @@ export default {
this.$yrouter.push('/pages/user/promotion/UserPromotion/index')
},
goUserAccount() {
this.$yrouter.push({
path: '/pages/user/UserAccount/index',
})
this.$yrouter.push('/pages/user/UserAccount/index')
},
goPersonalData() {
this.$yrouter.push('/pages/user/PersonalData/index')
},
getPhoneNumber: function(e) {
let thit = this
console.log(e)
// 判断一下这里是不是小程序 如果是小程序，走获取微信手机号进行绑定
if (e.mp.detail.errMsg == 'getPhoneNumber:ok') {
uni.showLoading({
title: '绑定中',
})
wxappBindingPhone({
encryptedData: e.mp.detail.encryptedData,
iv: e.mp.detail.iv,
})
.then(res => {
// this.User();
thit.$store.dispatch('userInfo', true)
uni.hideLoading()
uni.showToast({
title: res.msg,
icon: 'success',
duration: 2000,
})
})
.catch(error => {
uni.hideLoading()
thit.$store.dispatch('userInfo', true)
console.log(error)
uni.showToast({
title: error.msg || error.response.data.msg || error.response.data.message,
icon: 'none',
duration: 2000,
})
})
getPhoneNumber (e) {
// 判断一下这里是不是小程序 如果是小程序，走获取微信手机号进行绑定
if (e.mp.detail.errMsg == 'getPhoneNumber:ok') {
uni.showLoading({
title: '绑定中',
})
wxappBindingPhone({
encryptedData: e.mp.detail.encryptedData,
iv: e.mp.detail.iv,
})
.then(res => {
// this.User();
this.$store.dispatch('userInfo', true)
uni.hideLoading()
uni.showToast({
title: res.msg,
icon: 'success',
duration: 2000,
})
})
.catch(error => {
uni.hideLoading()
this.$store.dispatch('userInfo', true)
console.log(error)
uni.showToast({
title: error.msg || error.response.data.msg || error.response.data.message,
icon: 'none',
duration: 2000,
})
})
// // 获取当前环境的服务商
// uni.getProvider({
// service: "oauth",
@ -233,7 +240,7 @@ export default {
// })
// .then(res => {
// // this.User();
// thit.$store.dispatch("userInfo", true);
// this.$store.dispatch("userInfo", true);
// uni.hideLoading();
// uni.showToast({
// title: res.msg,
@ -243,7 +250,7 @@ export default {
// })
// .catch(error => {
// uni.hideLoading();
// thit.$store.dispatch("userInfo", true);
// this.$store.dispatch("userInfo", true);
// console.log(error);
// uni.showToast({
// title: error.msg ||
@ -264,15 +271,67 @@ export default {
// reject("获取环境服务商失败");
// }
// });
} else {
} else {
uni.showToast({
title: '已拒绝授权',
icon: 'none',
duration: 2000,
})
}
},
// 获取用户授权，读取头像、昵称
getUserInfo(data) {
if (data.detail.errMsg == 'getUserInfo:fail auth deny') {
uni.showToast({
title: '已拒绝授权',
title: '取消授权',
icon: 'none',
duration: 2000,
})
return
}
},
changeswitch(data) {
// 申请获取用户信息
getUserInfoProfile(data) {
wx.getUserProfile({
lang: 'zh_CN',
desc: '需要获取您的信息用来展示',
success: res => {
uni.showLoading({
title: '正在更新信息...',
duration: 2000,
})
getProvider()
.then(provider => { // 环境提供商
if (!provider) {
reject()
}
// 获取开发code
uni.login({
provider: provider,
success: async loginRes => {
wxappGetUserInfo({
encryptedData: res.encryptedData,
iv: res.iv,
code: loginRes.code, // 开发code
}).then(res => {
console.log(res === 200)
if (res.status === 200) {
this.userInfo.avatar = res.data.avatar
this.userInfo.nickname = res.data.nickname
} else {
uni.showLoading({
title: res.msg,
duration: 2000,
})
}
})
}
})
})
}
})
},
changeswitch(data) {
this.switchActive = data
},
// 获取用户信息
@ -357,6 +416,19 @@ export default {
</script>
<style lang="less">
.getUserBaseData{
.userDataBtn{
width: 80%;
height: 80rpx;
background: linear-gradient(to right, #f35447 0%, #ff8e3c 100%);
background: -moz-linear-gradient(to right, #f35447 0%, #ff8e3c 100%);
border-radius: 40rpx;
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
}
}
.footer-line-height {
height: 1 * 100rpx;
}

19
pages/user/coupon/GetCoupon/index.vue
View File

@ -97,18 +97,17 @@ export default {
})
})
},
getUseCoupons: function() {
let that = this
if (that.loading) return //阻止下次请求（false可以进行请求）；
if (that.loadend) return //阻止结束当前请求（false可以进行请求）；
that.loading = true
let q = { page: that.page, limit: that.limit }
getUseCoupons() {
if (this.loading) return //阻止下次请求（false可以进行请求）；
if (this.loadend) return //阻止结束当前请求（false可以进行请求）；
this.loading = true
let q = { page: this.page, limit: this.limit }
getCoupon(q).then(res => {
that.loading = false
this.loading = false
//apply();js将一个数组插入另一个数组;
that.couponsList.push.apply(that.couponsList, res.data)
that.loadend = res.data.length < that.limit //判断所有数据是否加载完成；
that.page = that.page + 1
this.couponsList.push.apply(this.couponsList, res.data)
this.loadend = res.data.length < this.limit //判断所有数据是否加载完成；
this.page = this.page + 1
})
},
},

4
pages/user/signIn/Sign/index.vue
View File

@ -7,9 +7,9 @@
<image :src="userInfo.avatar" />
</view>
<view class="text">
<view class="line1">{{ userInfo.nickname }}</view>
<view class="line1">{{ userInfo.nickname || '' }}</view>
<view class="integral acea-row">
<text>积分: {{ userInfo.integral }}</text>
<text>积分: {{ userInfo.integral || 0 }}</text>
</view>
</view>
</view>