|
@@ -5,7 +5,8 @@
|
|
|
<input class="u-border-bottom" type="number" maxlength="11" v-model="tel" placeholder="请输入手机号" />
|
|
|
<view class="u-text-center u-type-error u-m-t-20" v-if="telError">手机号输入错误</view>
|
|
|
<button @tap="submit" :style="[inputStyle]" class="getCaptcha">获取短信验证码</button>
|
|
|
- <u-message-input v-if="show" :focus="true" :value="messageCode" @change="change" @finish="finish" mode="bottomLine" :maxlength="codelength"></u-message-input>
|
|
|
+ <u-message-input v-if="show" :focus="true" :value="messageCode" @change="change" @finish="finish"
|
|
|
+ mode="bottomLine" :maxlength="codelength"></u-message-input>
|
|
|
</view>
|
|
|
<!-- <view class="u-text-center u-type-error" v-if="phoneError">手机号输入错误</view> -->
|
|
|
<view class="captcha">
|
|
@@ -25,262 +26,273 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import getUrlParams from "./../../../utils/getUrlParams.js";
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- tel: '',
|
|
|
- messageCode:'',
|
|
|
- messageShow: false,
|
|
|
- messageDisable: false,
|
|
|
- codelength: 4,
|
|
|
- show: false,
|
|
|
- second:60,
|
|
|
- toastMsg:'',
|
|
|
- toastUrl:'',
|
|
|
- toastType:'',
|
|
|
- accessToken:'',
|
|
|
- userId:'',
|
|
|
- telError:false,
|
|
|
- // messageError:false
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(page) {
|
|
|
- // 如果存在code 则认为是微信登录完成后跳转过来的,直接获取信息跳转首页或者指定页面
|
|
|
- let locationLocaturl = window.location.search;
|
|
|
- this.code = getUrlParams(locationLocaturl, "code"); // 截取code
|
|
|
- if (this.code) {
|
|
|
- this.handleGetWXInfo(this.code) //把code传给后台获取用户信息
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- inputStyle() {
|
|
|
- let style = {};
|
|
|
- if(this.tel.length == 11&&this.messageDisable==false&&this.$u.test.mobile(this.tel)) {
|
|
|
- style.color = "#fff";
|
|
|
- style.backgroundColor = '#5295F5';
|
|
|
- this.telError = false;
|
|
|
- // style.backgroundColor = this.$u.color['warning'];
|
|
|
- }else if(this.tel.length==11&&!this.$u.test.mobile(this.tel)){
|
|
|
- this.telError = true;
|
|
|
+ import getUrlParams from "./../../../utils/getUrlParams.js";
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tel: '',
|
|
|
+ messageCode: '',
|
|
|
+ messageShow: false,
|
|
|
+ messageDisable: false,
|
|
|
+ codelength: 4,
|
|
|
+ show: false,
|
|
|
+ second: 60,
|
|
|
+ toastMsg: '',
|
|
|
+ toastUrl: '',
|
|
|
+ toastType: '',
|
|
|
+ accessToken: '',
|
|
|
+ userId: '',
|
|
|
+ telError: false,
|
|
|
+ // messageError:false
|
|
|
}
|
|
|
- return style;
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- showToast() {
|
|
|
- this.$refs.uToast.show({
|
|
|
- title: this.toastMsg,
|
|
|
- type: this.toastType,
|
|
|
- url: this.toastUrl
|
|
|
- })
|
|
|
},
|
|
|
- submit() {
|
|
|
- if(this.$u.test.mobile(this.tel)&&this.messageDisable==false) {
|
|
|
- let that = this;
|
|
|
- this.$u.api.getPhoneLoginCode({mobile:this.tel})
|
|
|
- .then(res =>{
|
|
|
- this.messageDisable = true;
|
|
|
- this.messageShow = true;
|
|
|
- this.show = true;
|
|
|
- let interval = setInterval(() => {
|
|
|
- that.second--;
|
|
|
- if (that.second <= 0) {
|
|
|
- that.messageDisable=false
|
|
|
- that.messageShow = false;
|
|
|
- if (that.messageCode.lenth != 4) {
|
|
|
- // this.messageError = true;
|
|
|
- }
|
|
|
- clearInterval(interval);
|
|
|
- that.second=60;
|
|
|
- }
|
|
|
- }, 1000);
|
|
|
- this.accessToken = res.data.accessToken;
|
|
|
- this.$u.vuex('vuex_token', res.data.accessToken);
|
|
|
- this.userId = res.data.userId;
|
|
|
- }).catch(err=>{
|
|
|
- this.toastMsg = err.code + ":" + err.msg;
|
|
|
- this.showToast();
|
|
|
- });
|
|
|
+ onLoad(page) {
|
|
|
+ // 如果存在code 则认为是微信登录完成后跳转过来的,直接获取信息跳转首页或者指定页面
|
|
|
+ let locationLocaturl = window.location.search;
|
|
|
+ this.code = getUrlParams(locationLocaturl, "code"); // 截取code
|
|
|
+ if (this.code) {
|
|
|
+ this.handleGetWXInfo(this.code) //把code传给后台获取用户信息
|
|
|
}
|
|
|
},
|
|
|
- // 收不到验证码选择时的选择
|
|
|
- // noCaptcha() {
|
|
|
- // uni.showActionSheet({
|
|
|
- // itemList: ['重新获取验证码', '接听语音验证码'],
|
|
|
- // success: function(res) {
|
|
|
-
|
|
|
- // },
|
|
|
- // fail: function(res) {
|
|
|
-
|
|
|
- // }
|
|
|
- // });
|
|
|
- // },
|
|
|
- // change事件侦听
|
|
|
- change(value) {
|
|
|
- // console.log('change', value);
|
|
|
- },
|
|
|
- // 输入完验证码最后一位执行
|
|
|
- finish(value) {
|
|
|
- let params = {
|
|
|
- accessToken:this.accessToken,
|
|
|
- userId:this.userId,
|
|
|
- code:value
|
|
|
- };
|
|
|
- this.$u.api.phoneLoginAuth(params)
|
|
|
- .then(res =>{
|
|
|
- if(res.code=='200'){
|
|
|
- this.$u.vuex('vuex_user', res.data);
|
|
|
- this.$u.vuex('vuex_hasLogin', true);
|
|
|
- this.wechatLogin()
|
|
|
-
|
|
|
- }else{
|
|
|
- this.toastMsg = res.msg;
|
|
|
- this.showToast();
|
|
|
+ computed: {
|
|
|
+ inputStyle() {
|
|
|
+ let style = {};
|
|
|
+ if (this.tel.length == 11 && this.messageDisable == false && this.$u.test.mobile(this.tel)) {
|
|
|
+ style.color = "#fff";
|
|
|
+ style.backgroundColor = '#5295F5';
|
|
|
+ this.telError = false;
|
|
|
+ // style.backgroundColor = this.$u.color['warning'];
|
|
|
+ } else if (this.tel.length == 11 && !this.$u.test.mobile(this.tel)) {
|
|
|
+ this.telError = true;
|
|
|
}
|
|
|
- }).catch(err=>{
|
|
|
- this.toastMsg = err.msg;
|
|
|
- this.showToast();
|
|
|
- });
|
|
|
- },
|
|
|
- // 微信登录
|
|
|
- wechatLogin() {
|
|
|
- this.jumpIndex()
|
|
|
- // const openId = this.$store.state.vuex_wxinfo?.openId
|
|
|
- // if (openId) {
|
|
|
- // this.jumpIndex()
|
|
|
- // } else {
|
|
|
- // this.getCode()
|
|
|
- // }
|
|
|
+ return style;
|
|
|
+ }
|
|
|
},
|
|
|
- // 微信已登录则跳转到首页
|
|
|
- jumpIndex() {
|
|
|
- let ret = localStorage.getItem('backUrl')
|
|
|
- if (ret && ret.indexOf('phoneLogin') < 0) {
|
|
|
- // 截取url
|
|
|
- const pagesIndex = ret.indexOf('pages')
|
|
|
- if (pagesIndex > (-1)) {
|
|
|
- const pageUrl = ret.slice(pagesIndex)
|
|
|
- const tabbarUrl = ['pages/center/index', 'pages/parkingLists/parkingLists']
|
|
|
- if (tabbarUrl.indexOf(pageUrl) > (-1)) {
|
|
|
- setTimeout(() => {
|
|
|
- uni.switchTab({
|
|
|
- url: '../../index/index'
|
|
|
- })
|
|
|
- }, 100)
|
|
|
+ methods: {
|
|
|
+ showToast() {
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ title: this.toastMsg,
|
|
|
+ type: this.toastType,
|
|
|
+ url: this.toastUrl
|
|
|
+ })
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ if (this.$u.test.mobile(this.tel) && this.messageDisable == false) {
|
|
|
+ let that = this;
|
|
|
+ this.$u.api.getPhoneLoginCode({
|
|
|
+ mobile: this.tel
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.messageDisable = true;
|
|
|
+ this.messageShow = true;
|
|
|
+ this.show = true;
|
|
|
+ let interval = setInterval(() => {
|
|
|
+ that.second--;
|
|
|
+ if (that.second <= 0) {
|
|
|
+ that.messageDisable = false
|
|
|
+ that.messageShow = false;
|
|
|
+ if (that.messageCode.lenth != 4) {
|
|
|
+ // this.messageError = true;
|
|
|
+ }
|
|
|
+ clearInterval(interval);
|
|
|
+ that.second = 60;
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ this.accessToken = res.data.accessToken;
|
|
|
+ this.userId = res.data.userId;
|
|
|
+ }).catch(err => {
|
|
|
+ this.toastMsg = err.code + ":" + err.msg;
|
|
|
+ this.showToast();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 收不到验证码选择时的选择
|
|
|
+ // noCaptcha() {
|
|
|
+ // uni.showActionSheet({
|
|
|
+ // itemList: ['重新获取验证码', '接听语音验证码'],
|
|
|
+ // success: function(res) {
|
|
|
+
|
|
|
+ // },
|
|
|
+ // fail: function(res) {
|
|
|
+
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ // change事件侦听
|
|
|
+ change(value) {
|
|
|
+ // console.log('change', value);
|
|
|
+ },
|
|
|
+ // 输入完验证码最后一位执行
|
|
|
+ finish(value) {
|
|
|
+ let params = {
|
|
|
+ accessToken: this.accessToken,
|
|
|
+ userId: this.userId,
|
|
|
+ code: value
|
|
|
+ };
|
|
|
+ this.$u.api.phoneLoginAuth(params)
|
|
|
+ .then(res => {
|
|
|
+ if (res.code == '200') {
|
|
|
+ this.$u.vuex('vuex_token', this.accessToken);
|
|
|
+ this.$u.vuex('vuex_user', res.data);
|
|
|
+ this.$u.vuex('vuex_hasLogin', true);
|
|
|
+ this.wechatLogin()
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.toastMsg = res.msg;
|
|
|
+ this.showToast();
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ this.toastMsg = err.msg;
|
|
|
+ this.showToast();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 微信登录
|
|
|
+ wechatLogin() {
|
|
|
+ this.jumpIndex()
|
|
|
+ // const openId = this.$store.state.vuex_wxinfo?.openId
|
|
|
+ // if (openId) {
|
|
|
+ // this.jumpIndex()
|
|
|
+ // } else {
|
|
|
+ // this.getCode()
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ // 微信已登录则跳转到首页
|
|
|
+ jumpIndex() {
|
|
|
+ let ret = localStorage.getItem('backUrl')
|
|
|
+ if (ret && ret.indexOf('phoneLogin') < 0) {
|
|
|
+ // 截取url
|
|
|
+ const pagesIndex = ret.indexOf('pages')
|
|
|
+ if (pagesIndex > (-1)) {
|
|
|
+ const pageUrl = ret.slice(pagesIndex)
|
|
|
+ const tabbarUrl = ['pages/center/index', 'pages/parkingLists/parkingLists']
|
|
|
+ if (tabbarUrl.indexOf(pageUrl) > (-1)) {
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.switchTab({
|
|
|
+ url: '../../index/index'
|
|
|
+ })
|
|
|
+ }, 100)
|
|
|
+ } else {
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/' + pageUrl
|
|
|
+ })
|
|
|
+ }, 100)
|
|
|
+ }
|
|
|
} else {
|
|
|
- setTimeout(() => {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/' + pageUrl
|
|
|
- })
|
|
|
- }, 100)
|
|
|
+ uni.switchTab({
|
|
|
+ url: '../../index/index'
|
|
|
+ })
|
|
|
}
|
|
|
} else {
|
|
|
uni.switchTab({
|
|
|
url: '../../index/index'
|
|
|
})
|
|
|
}
|
|
|
- } else {
|
|
|
- uni.switchTab({
|
|
|
- url: '../../index/index'
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- // 获取code
|
|
|
- getCode () {
|
|
|
- const local = window.location.href // 获取页面url
|
|
|
- let locationLocaturl = window.location.search;
|
|
|
- this.code = getUrlParams(locationLocaturl, "code"); // 截取code
|
|
|
- if (this.code) { // 如果没有code,则去请求
|
|
|
- this.handleGetWXInfo(this.code) //把code传给后台获取用户信息
|
|
|
- } else {
|
|
|
- window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.config.wxAppid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&#wechat_redirect`
|
|
|
- }
|
|
|
- },
|
|
|
- // 通过code获取 openId等用户信息,/api/user/wechat/login 为后台接口
|
|
|
- handleGetWXInfo (code) {
|
|
|
- uni.showLoading({
|
|
|
- title: '加载中'
|
|
|
- })
|
|
|
- this.$u.api.getWXInfo(code).then((res) => {
|
|
|
- if (res.code === 200 ) {
|
|
|
- this.$u.vuex('vuex_wxinfo', res.data);
|
|
|
- this.jumpIndex()
|
|
|
+ },
|
|
|
+ // 获取code
|
|
|
+ getCode() {
|
|
|
+ const local = window.location.href // 获取页面url
|
|
|
+ let locationLocaturl = window.location.search;
|
|
|
+ this.code = getUrlParams(locationLocaturl, "code"); // 截取code
|
|
|
+ if (this.code) { // 如果没有code,则去请求
|
|
|
+ this.handleGetWXInfo(this.code) //把code传给后台获取用户信息
|
|
|
} else {
|
|
|
+ window.location.href =
|
|
|
+ `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.config.wxAppid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&#wechat_redirect`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 通过code获取 openId等用户信息,/api/user/wechat/login 为后台接口
|
|
|
+ handleGetWXInfo(code) {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ })
|
|
|
+ this.$u.api.getWXInfo(code).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$u.vuex('vuex_wxinfo', res.data);
|
|
|
+ this.jumpIndex()
|
|
|
+ } else {
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ title: '获取用户信息失败!',
|
|
|
+ type: 'error',
|
|
|
+ });
|
|
|
+ }
|
|
|
+ uni.hideLoading()
|
|
|
+ }).catch((err) => {
|
|
|
this.$refs.uToast.show({
|
|
|
title: '获取用户信息失败!',
|
|
|
type: 'error',
|
|
|
});
|
|
|
- }
|
|
|
- uni.hideLoading()
|
|
|
- }).catch((err) => {
|
|
|
- this.$refs.uToast.show({
|
|
|
- title: '获取用户信息失败!',
|
|
|
- type: 'error',
|
|
|
- });
|
|
|
- })
|
|
|
- },
|
|
|
- /**
|
|
|
- * 跳转页面
|
|
|
- * */
|
|
|
- jumpToPage(flag){
|
|
|
- uni.navigateTo({
|
|
|
- url: "/pages/privacyPolicy/privacyPolicy?termsType=" + flag,
|
|
|
- })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 跳转页面
|
|
|
+ * */
|
|
|
+ jumpToPage(flag) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/privacyPolicy/privacyPolicy?termsType=" + flag,
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-};
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.hide{display: none!important;}
|
|
|
-.wrap {
|
|
|
- font-size: 28rpx;
|
|
|
- .content {
|
|
|
- width: 600rpx;
|
|
|
- margin: 80rpx auto 0;
|
|
|
+ .hide {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
|
|
|
- .title {
|
|
|
- text-align: left;
|
|
|
- font-size: 60rpx;
|
|
|
- font-weight: 500;
|
|
|
- margin-bottom: 100rpx;
|
|
|
- }
|
|
|
- input {
|
|
|
- text-align: left;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- padding-bottom: 20rpx;
|
|
|
- border-bottom: 1px solid #ddd;
|
|
|
- }
|
|
|
- .getCaptcha {
|
|
|
- margin: 45rpx auto 130rpx;
|
|
|
- background-color: #a8c6f1;
|
|
|
- color: $u-tips-color;
|
|
|
- border: none;
|
|
|
- font-size: 30rpx;
|
|
|
- padding: 12rpx 0;
|
|
|
-
|
|
|
- &::after {
|
|
|
+ .wrap {
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 600rpx;
|
|
|
+ margin: 80rpx auto 0;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ text-align: left;
|
|
|
+ font-size: 60rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 100rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ input {
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ border-bottom: 1px solid #ddd;
|
|
|
+ }
|
|
|
+
|
|
|
+ .getCaptcha {
|
|
|
+ margin: 45rpx auto 130rpx;
|
|
|
+ background-color: #a8c6f1;
|
|
|
+ color: $u-tips-color;
|
|
|
border: none;
|
|
|
+ font-size: 30rpx;
|
|
|
+ padding: 12rpx 0;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .buttom {
|
|
|
- .hint {
|
|
|
- padding: 20rpx 40rpx;
|
|
|
- font-size: 20rpx;
|
|
|
- color: $u-tips-color;
|
|
|
-
|
|
|
- .link {
|
|
|
- color: $u-type-warning;
|
|
|
+
|
|
|
+ .buttom {
|
|
|
+ .hint {
|
|
|
+ padding: 20rpx 40rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: $u-tips-color;
|
|
|
+
|
|
|
+ .link {
|
|
|
+ color: $u-type-warning;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .captcha {
|
|
|
+ color: $u-type-warning;
|
|
|
+ font-size: 30rpx;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
}
|
|
|
- .captcha {
|
|
|
- color: $u-type-warning;
|
|
|
- font-size: 30rpx;
|
|
|
- margin-top: 40rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-}
|
|
|
</style>
|