17 changed files with 462 additions and 223 deletions
-
38manifest.json
-
2pages/indexEntry/consult/record/record.vue
-
1pages/indexEntry/enroll/registInfo/chooseCoach/chooseCoach.vue
-
12pages/indexEntry/enroll/registInfo/comp/comfigPopup.vue
-
23pages/indexEntry/enroll/registInfo/registInfo.vue
-
6pages/indexEntry/findShcool/coachComment/coachInfo.vue
-
6pages/indexEntry/findShcool/searchShcool/searchShcool.vue
-
6pages/tabbar/index/index.vue
-
32pages/tabbar/learnCar/index.vue
-
3pages/tabbar/mine/index.vue
-
227pages/userCenter/login/login - 副本.vue
-
329pages/userCenter/login/login.vue
-
BINstatic/images/icon/箭头 拷贝 2(1).png
-
BINstatic/images/icon/箭头(1).png
-
BINstatic/images/mineIcon/二维码.png
-
0static/images/tabbar/byd.png
@ -0,0 +1,227 @@ |
|||
<template> |
|||
<view class="main" :style="{ background: `url(${imgUrl}) no-repeat`, backgroundSize: backgroundSize }"> |
|||
<view class="h1Img"> |
|||
<image src="../../../static/images/userCenter/loginTitle.png" mode=""></image> |
|||
</view> |
|||
<view class="btnCon"> |
|||
<!-- #ifdef MP-WEIXIN --> |
|||
<view class="btn" @click="getPhoneNumber">手机号快捷登录 <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="hide" v-if="isCheck">手机号</button> </view> |
|||
<!-- #endif --> |
|||
<view class="btn border" @click="$goPage('/pages/userCenter/login/loginByPhone?isCheck='+isCheck);">手机号登录/注册</view> |
|||
</view> |
|||
<view style="margin-top: 40rpx;"> |
|||
<privacyRadion :isCheck="isCheck" @changeRadio="changeRadio"></privacyRadion> |
|||
</view> |
|||
|
|||
<!-- <u-popup :show="show" :round="10" mode="center" > |
|||
<view class=""> |
|||
<view class="popupCon"> |
|||
<view class="h1">提 示</view> |
|||
<view class="msg">授权手机号，我们才能继续为您 <br>提供服务哦~</view> |
|||
<view class="oneBtn">我知道了</view> |
|||
</view> |
|||
</view> |
|||
</u-popup> --> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { imgUrl } from '@/config/site.config' |
|||
import privacyRadion from './comp/privacyRadion.vue' |
|||
import { weixinLogin } from '@/config/api.js' |
|||
export default { |
|||
components: {privacyRadion}, |
|||
data() { |
|||
return { |
|||
isCheck: false, |
|||
show: false, |
|||
imgUrl: imgUrl+'loginTopBg.png', |
|||
backgroundSize: '100% 360rpx', |
|||
} |
|||
}, |
|||
onLoad() { |
|||
// uni.getLocation({ |
|||
// type: 'wgs84', |
|||
// success: function (res) { |
|||
// console.log(res) |
|||
// console.log('当前位置的经度：' + res.longitude); |
|||
// console.log('当前位置的纬度：' + res.latitude); |
|||
// } |
|||
// }); |
|||
}, |
|||
methods: { |
|||
async getPhoneNumber (e) { |
|||
if(!this.isCheck) return this.$u.toast('请勾选产品协议与隐私政策'); |
|||
let phoneCode = e.detail.code |
|||
console.log(e.detail.errMsg) // 回调信息（成功失败都会返回） |
|||
console.log(e.detail) // 错误码（失败时返回） |
|||
const loginCode = await this.loginFn() |
|||
if(!loginCode||!phoneCode) return |
|||
console.log('登录验证码') |
|||
console.log(loginCode) |
|||
let obj = { |
|||
phoneCode, |
|||
loginCode |
|||
} |
|||
const {data: res} = await weixinLogin(obj) |
|||
this.$store.commit('update_vuex_loginInfo',res) |
|||
this.$store.dispatch('getUserInfo') |
|||
// this.$goPage('/pages/userCenter/login/face') |
|||
uni.switchTab({ |
|||
url: '/pages/tabbar/index/index' |
|||
}) |
|||
}, |
|||
|
|||
loginFn() { |
|||
// 微信登录 |
|||
return new Promise((resolve,reject)=>{ |
|||
uni.login({ |
|||
provider: 'weixin', |
|||
success: loginRes => { |
|||
if (loginRes.code) { |
|||
// 登录成功，获取用户信息 |
|||
console.log('loginRes.code') |
|||
console.log(loginRes.code) |
|||
resolve(loginRes.code) |
|||
// this.getUserInfo(loginRes.code); |
|||
} else { |
|||
console.error('微信登录失败'); |
|||
} |
|||
}, |
|||
fail: err => { |
|||
reject(null) |
|||
console.error('微信登录失败', err); |
|||
} |
|||
}); |
|||
}) |
|||
|
|||
}, |
|||
getUserInfo(code) { |
|||
// 获取用户信息 |
|||
uni.getUserInfo({ |
|||
provider: 'weixin', |
|||
success: userInfoRes => { |
|||
// 在这里处理获取到的用户信息 |
|||
console.log('用户信息', userInfoRes); |
|||
// 发送 code 和用户信息到后台进行登录操作 |
|||
this.loginBackend(code, userInfoRes); |
|||
}, |
|||
fail: err => { |
|||
console.error('获取用户信息失败', err); |
|||
} |
|||
}); |
|||
}, |
|||
loginBackend(code, userInfo) { |
|||
// 在这里发送 code 和用户信息到后台进行登录操作 |
|||
// 可以使用 uni.request 或其他 HTTP 库发送请求 |
|||
}, |
|||
|
|||
// 是否选择协议 |
|||
changeRadio(val) { |
|||
this.isCheck = val |
|||
}, |
|||
init() { |
|||
uni.login({ |
|||
provider: 'weixin', |
|||
"onlyAuthorize": true, |
|||
success: function (loginRes) { |
|||
console.log('11') |
|||
console.log(loginRes) |
|||
// 登录成功 |
|||
uni.getUserInfo({ |
|||
provider: 'weixin', |
|||
success: function(info) { |
|||
// 获取用户信息成功, info.authResult保存用户信息 |
|||
console.log('11') |
|||
console.log(info) |
|||
} |
|||
}) |
|||
}, |
|||
fail: function (err) { |
|||
// 登录授权失败 |
|||
// err.code是错误码 |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
// background: url('../../../static/images/userCenter/loginTopBg.png') no-repeat; |
|||
// background-size: 100% 360rpx; |
|||
.h1Img { |
|||
width: 658rpx; |
|||
height: 94rpx; |
|||
margin: 288rpx 0 120rpx 0; |
|||
} |
|||
.btnCon { |
|||
.btn { |
|||
width: 396rpx; |
|||
height: 72rpx; |
|||
background: #1989FA; |
|||
border-radius: 8rpx; |
|||
color: #fff; |
|||
margin-bottom: 32rpx; |
|||
text-align: center; |
|||
line-height: 72rpx; |
|||
font-size: 28rpx; |
|||
position: relative; |
|||
overflow: hidden; |
|||
.hide { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
display: inline-block; |
|||
opacity: 0; |
|||
} |
|||
&.border { |
|||
background: rgba(25,137,250,0.1); |
|||
border: 2rpx solid #1989FA; |
|||
color: $themC; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.popupCon { |
|||
width: 558rpx; |
|||
height: 344rpx; |
|||
border-radius: 16rpx; |
|||
overflow: hidden; |
|||
.h1 { |
|||
line-height: 124rpx; |
|||
text-align: center; |
|||
font-size: 36rpx; |
|||
font-weight: 600; |
|||
height: 124rpx; |
|||
width: 100%; |
|||
background: linear-gradient(180deg, #C1DFFE 0%, #FFFFFF 100%); |
|||
} |
|||
|
|||
.msg { |
|||
font-size: 28rpx; |
|||
color: #686B73; |
|||
padding: 0 0 30rpx 0; |
|||
text-align: center; |
|||
} |
|||
|
|||
.oneBtn { |
|||
line-height: 112rpx; |
|||
height: 112rpx; |
|||
border-top: 1px solid #E8E9EC; |
|||
text-align: center; |
|||
font-size: 36rpx; |
|||
color: $themC; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,227 +1,192 @@ |
|||
<template> |
|||
<view class="main" :style="{ background: `url(${imgUrl}) no-repeat`, backgroundSize: backgroundSize }"> |
|||
<view class="h1Img"> |
|||
<image src="../../../static/images/userCenter/loginTitle.png" mode=""></image> |
|||
</view> |
|||
<view class="btnCon"> |
|||
<!-- #ifdef MP-WEIXIN --> |
|||
<view class="btn" @click="getPhoneNumber">手机号快捷登录 <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="hide" v-if="isCheck">手机号</button> </view> |
|||
<!-- #endif --> |
|||
<view class="btn border" @click="$goPage('/pages/userCenter/login/loginByPhone?isCheck='+isCheck);">手机号登录/注册</view> |
|||
</view> |
|||
<view style="margin-top: 40rpx;"> |
|||
<privacyRadion :isCheck="isCheck" @changeRadio="changeRadio"></privacyRadion> |
|||
</view> |
|||
|
|||
<!-- <u-popup :show="show" :round="10" mode="center" > |
|||
<view class=""> |
|||
<view class="popupCon"> |
|||
<view class="h1">提 示</view> |
|||
<view class="msg">授权手机号，我们才能继续为您 <br>提供服务哦~</view> |
|||
<view class="oneBtn">我知道了</view> |
|||
<!-- <view class="u-back-top"> |
|||
<view class="backBox"> |
|||
<u-icon name="arrow-left" color="#333" size="28"></u-icon> |
|||
</view> |
|||
</view> --> |
|||
<u-navbar title=" " :bgColor="bgColor" :autoBack="true"></u-navbar> |
|||
<view class="title">短信验证码登录</view> |
|||
<view class="form"> |
|||
<view class="form-item"> |
|||
<view class="prefix"> |
|||
<view class="jia">+</view> |
|||
<view class="num">86</view> |
|||
<view class="" style="margin: 0 32rpx 0 12rpx;"> |
|||
<u-icon name="arrow-down" color="#333" size="16" ></u-icon> |
|||
</view> |
|||
</view> |
|||
<view class="inputBox my"> |
|||
<u--input placeholder="请输入手机号" border="none" clearable type="number" maxlength="11" v-model="FormData.phone"></u--input> |
|||
</view> |
|||
</view> |
|||
</u-popup> --> |
|||
<view class="form-item"> |
|||
<view class="inputBox my"> |
|||
<u--input placeholder="请输入验证码" border="none" clearable style="height: 100%;" :clearable="false" v-model="FormData.code"></u--input> |
|||
</view> |
|||
<view class="code" @click='goSms' :class="{active: isPhone&&!codeOn}">{{codeText}}</view> |
|||
</view> |
|||
<view class="loginBtn" :class="{active: btnHighlight}" @click="submitFn">登 录</view> |
|||
<view style="margin-top: 40rpx;"> |
|||
<privacyRadion :isCheck="isCheck" @changeRadio="changeRadio"></privacyRadion> |
|||
</view> |
|||
<!-- <button @click="$goPage('/pages/userCenter/login/face')">进入人脸识别</button> --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { imgUrl } from '@/config/site.config' |
|||
import { getLoginCode, loginSMS } from '@/config/api.js' |
|||
import privacyRadion from './comp/privacyRadion.vue' |
|||
import { weixinLogin } from '@/config/api.js' |
|||
import { imgUrl } from '@/config/site.config' |
|||
export default { |
|||
components: {privacyRadion}, |
|||
data() { |
|||
return { |
|||
isCheck: false, |
|||
show: false, |
|||
imgUrl: imgUrl+'loginTopBg.png', |
|||
backgroundSize: '100% 360rpx', |
|||
isCheck:false, |
|||
codeText: '获取验证码', |
|||
FormData: {}, |
|||
codeOn: false, |
|||
bgColor: 'transparent' |
|||
} |
|||
}, |
|||
onLoad() { |
|||
// uni.getLocation({ |
|||
// type: 'wgs84', |
|||
// success: function (res) { |
|||
// console.log(res) |
|||
// console.log('当前位置的经度：' + res.longitude); |
|||
// console.log('当前位置的纬度：' + res.latitude); |
|||
// } |
|||
// }); |
|||
onLoad(options) { |
|||
this.isCheck = options.isCheck=='true'?true:false |
|||
}, |
|||
computed: { |
|||
isPhone() { |
|||
return uni.$u.test.mobile(this.FormData.phone) |
|||
}, |
|||
btnHighlight() { |
|||
return this.isPhone&&uni.$u.test.code(this.FormData.code, 4) |
|||
} |
|||
}, |
|||
methods: { |
|||
async getPhoneNumber (e) { |
|||
// 是否选择协议 |
|||
changeRadio(val) { |
|||
this.isCheck = val |
|||
}, |
|||
// 发送短信验证码 |
|||
goSms() { |
|||
const { |
|||
FormData |
|||
} = this |
|||
if (!FormData.phone) return this.$u.toast('请输入手机号'); |
|||
if (!this.isPhone) return this.$u.toast('手机号格式有误'); |
|||
if (this.codeOn) return |
|||
this.codeOn = true; |
|||
getLoginCode({ |
|||
scene: 1, |
|||
mobile: FormData.phone, |
|||
}).then(()=>{ |
|||
var time = 30; |
|||
this.codeText = time + "秒后重新发送" |
|||
var timer = setInterval(() => { |
|||
time--; |
|||
this.codeText = time + "秒后重新发送" |
|||
if (time == 0) { |
|||
clearInterval(timer); |
|||
this.codeText = "获取验证码"; |
|||
this.codeOn = false; |
|||
} |
|||
}, 1000); |
|||
}).catch(()=>{ |
|||
this.codeOn = false; |
|||
}) |
|||
// 获取验证码 |
|||
|
|||
}, |
|||
async submitFn() { |
|||
if(!this.btnHighlight) return |
|||
if(!this.isCheck) return this.$u.toast('请勾选产品协议与隐私政策'); |
|||
let phoneCode = e.detail.code |
|||
console.log(e.detail.errMsg) // 回调信息（成功失败都会返回） |
|||
console.log(e.detail) // 错误码（失败时返回） |
|||
const loginCode = await this.loginFn() |
|||
if(!loginCode||!phoneCode) return |
|||
console.log('登录验证码') |
|||
console.log(loginCode) |
|||
let obj = { |
|||
phoneCode, |
|||
loginCode |
|||
mobile: this.FormData.phone, |
|||
code: this.FormData.code |
|||
} |
|||
const {data: res} = await weixinLogin(obj) |
|||
this.$store.commit('update_vuex_loginInfo',res) |
|||
const res = await loginSMS(obj) |
|||
this.$store.commit('update_vuex_loginInfo',res.data) |
|||
this.$store.dispatch('getUserInfo') |
|||
// this.$goPage('/pages/userCenter/login/face') |
|||
uni.switchTab({ |
|||
url: '/pages/tabbar/index/index' |
|||
}) |
|||
}, |
|||
|
|||
loginFn() { |
|||
// 微信登录 |
|||
return new Promise((resolve,reject)=>{ |
|||
uni.login({ |
|||
provider: 'weixin', |
|||
success: loginRes => { |
|||
if (loginRes.code) { |
|||
// 登录成功，获取用户信息 |
|||
console.log('loginRes.code') |
|||
console.log(loginRes.code) |
|||
resolve(loginRes.code) |
|||
// this.getUserInfo(loginRes.code); |
|||
} else { |
|||
console.error('微信登录失败'); |
|||
} |
|||
}, |
|||
fail: err => { |
|||
reject(null) |
|||
console.error('微信登录失败', err); |
|||
} |
|||
}); |
|||
}) |
|||
|
|||
}, |
|||
getUserInfo(code) { |
|||
// 获取用户信息 |
|||
uni.getUserInfo({ |
|||
provider: 'weixin', |
|||
success: userInfoRes => { |
|||
// 在这里处理获取到的用户信息 |
|||
console.log('用户信息', userInfoRes); |
|||
// 发送 code 和用户信息到后台进行登录操作 |
|||
this.loginBackend(code, userInfoRes); |
|||
}, |
|||
fail: err => { |
|||
console.error('获取用户信息失败', err); |
|||
} |
|||
}); |
|||
}, |
|||
loginBackend(code, userInfo) { |
|||
// 在这里发送 code 和用户信息到后台进行登录操作 |
|||
// 可以使用 uni.request 或其他 HTTP 库发送请求 |
|||
}, |
|||
|
|||
// 是否选择协议 |
|||
changeRadio(val) { |
|||
this.isCheck = val |
|||
}, |
|||
init() { |
|||
uni.login({ |
|||
provider: 'weixin', |
|||
"onlyAuthorize": true, |
|||
success: function (loginRes) { |
|||
console.log('11') |
|||
console.log(loginRes) |
|||
// 登录成功 |
|||
uni.getUserInfo({ |
|||
provider: 'weixin', |
|||
success: function(info) { |
|||
// 获取用户信息成功, info.authResult保存用户信息 |
|||
console.log('11') |
|||
console.log(info) |
|||
} |
|||
}) |
|||
}, |
|||
fail: function (err) { |
|||
// 登录授权失败 |
|||
// err.code是错误码 |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
.main { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
min-height: 100vh; |
|||
// background: url('../../../static/images/userCenter/loginTopBg.png') no-repeat; |
|||
// background-size: 100% 360rpx; |
|||
.h1Img { |
|||
width: 658rpx; |
|||
height: 94rpx; |
|||
margin: 288rpx 0 120rpx 0; |
|||
} |
|||
.btnCon { |
|||
.btn { |
|||
width: 396rpx; |
|||
height: 72rpx; |
|||
background: #1989FA; |
|||
border-radius: 8rpx; |
|||
color: #fff; |
|||
margin-bottom: 32rpx; |
|||
text-align: center; |
|||
line-height: 72rpx; |
|||
font-size: 28rpx; |
|||
position: relative; |
|||
overflow: hidden; |
|||
.hide { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
display: inline-block; |
|||
opacity: 0; |
|||
} |
|||
&.border { |
|||
background: rgba(25,137,250,0.1); |
|||
border: 2rpx solid #1989FA; |
|||
color: $themC; |
|||
} |
|||
.u-back-top { |
|||
padding: 32rpx 0 0 0; |
|||
.backBox { |
|||
padding: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.popupCon { |
|||
width: 558rpx; |
|||
height: 344rpx; |
|||
border-radius: 16rpx; |
|||
overflow: hidden; |
|||
.h1 { |
|||
line-height: 124rpx; |
|||
text-align: center; |
|||
font-size: 36rpx; |
|||
font-weight: 600; |
|||
height: 124rpx; |
|||
width: 100%; |
|||
background: linear-gradient(180deg, #C1DFFE 0%, #FFFFFF 100%); |
|||
.title { |
|||
font-size: 48rpx; |
|||
color: #333; |
|||
padding: 202rpx 0 80rpx 0; |
|||
text-align: center; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.msg { |
|||
font-size: 28rpx; |
|||
color: #686B73; |
|||
padding: 0 0 30rpx 0; |
|||
text-align: center; |
|||
} |
|||
.form { |
|||
padding: 0 46rpx; |
|||
.form-item { |
|||
height: 112rpx; |
|||
background: #F4F7FF; |
|||
border-radius: 16rpx; |
|||
width: 100%; |
|||
line-height: 112rpx; |
|||
display: flex; |
|||
margin-bottom: 40rpx; |
|||
padding: 0 40rpx; |
|||
.prefix { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 32rpx; |
|||
color: #333; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.inputBox { |
|||
flex: 1; |
|||
} |
|||
.code { |
|||
color: #BBBBBB; |
|||
margin-left: 30rpx; |
|||
&.active { |
|||
color: $themC |
|||
} |
|||
} |
|||
} |
|||
|
|||
.loginBtn { |
|||
width: 100%; |
|||
height: 112rpx; |
|||
background: rgba(25,137,250,0.3); |
|||
border-radius: 16rpx; |
|||
text-align: center; |
|||
line-height: 112rpx; |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #fff; |
|||
margin-top: 100rpx; |
|||
&.active { |
|||
background: rgba(25,137,250,1); |
|||
} |
|||
} |
|||
|
|||
.oneBtn { |
|||
line-height: 112rpx; |
|||
height: 112rpx; |
|||
border-top: 1px solid #E8E9EC; |
|||
text-align: center; |
|||
font-size: 36rpx; |
|||
color: $themC; |
|||
font-weight: 600; |
|||
|
|||
} |
|||
} |
|||
</style> |
|||
|
Before Width: 36 | Height: 36 | Size: 638 B |
|
Before Width: 22 | Height: 22 | Size: 669 B |
|
Before Width: 36 | Height: 36 | Size: 1.2 KiB |
|
Before Width: 40 | Height: 40 | Size: 1.5 KiB After Width: 40 | Height: 40 | Size: 1.5 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue