|
|
@@ -17,15 +17,31 @@
|
|
|
获取您的公开信息（昵称、头像等）
|
|
|
</view>
|
|
|
</view>
|
|
|
- <button
|
|
|
- class="auth-btn"
|
|
|
- open-type="getPhoneNumber"
|
|
|
- @getphonenumber="getPhoneNumber"
|
|
|
- :loading="loading"
|
|
|
- :disabled="loading"
|
|
|
- >
|
|
|
- 授权登录
|
|
|
- </button>
|
|
|
+ <view class="phone-form">
|
|
|
+ <view class="phone-form-phone">
|
|
|
+ <input
|
|
|
+ v-model="phone"
|
|
|
+ :maxlength="11"
|
|
|
+ type="tel"
|
|
|
+ class="phone-form-phone-input"
|
|
|
+ placeholder-style="color: #C7C7C7; font-size: 16px;"
|
|
|
+ placeholder="手机号"
|
|
|
+ />
|
|
|
+ <view
|
|
|
+ :class="['phone-form-phone-getCode', phoneIsTrue && 'phone-is-true']"
|
|
|
+ @click.stop="getCode"
|
|
|
+ >{{ state.codeMsg }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <input
|
|
|
+ v-model="code"
|
|
|
+ class="phone-form-code"
|
|
|
+ placeholder-style="color: #C7C7C7; font-size: 16px;"
|
|
|
+ placeholder="验证码"
|
|
|
+ />
|
|
|
+
|
|
|
+ <view :class="['phone-form-login', codeIsTrue && 'code-is-true']" @click="loginByCode">登录</view>
|
|
|
+ </view>
|
|
|
|
|
|
<view class="rule">
|
|
|
仅限中德智慧内部代理商使用
|
|
|
@@ -40,7 +56,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { Login } from '@/api/user.js'
|
|
|
+import { loginByCode, getCode } from '@/api/user.js'
|
|
|
import { setLocalStorage } from '@/utils/wxTool.js'
|
|
|
import { staticPicture } from '@/utils/global.js'
|
|
|
import Tip from '@/utils/tip'
|
|
|
@@ -50,41 +66,83 @@ export default {
|
|
|
statusBarHeight () {
|
|
|
return this.$store.state.systemInfo.statusBarHeight
|
|
|
},
|
|
|
+ phoneIsTrue() {
|
|
|
+ const reg =/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
|
|
|
+ return reg.test(this.phone) && !this.state.codeDisabled
|
|
|
+ },
|
|
|
+ // 验证码格式是否正确
|
|
|
+ codeIsTrue() {
|
|
|
+ const reg =/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
|
|
|
+ return reg.test(this.phone) && this.code && this.code.length === 4
|
|
|
+ }
|
|
|
},
|
|
|
onReady () {
|
|
|
- this.wxLogin()
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
code: '',
|
|
|
staticPicture,
|
|
|
- loading: false
|
|
|
+ loading: false,
|
|
|
+ phone: undefined,
|
|
|
+ state: {
|
|
|
+ smsTime: 60, // 短信倒计时时间
|
|
|
+ codeDisabled: false, // 短信是否禁用
|
|
|
+ codeMsg: "获取验证码", // 短信按钮上的文字
|
|
|
+ timer: null, // 短信上的定时器
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
- // wx.login
|
|
|
- async wxLogin () {
|
|
|
-
|
|
|
- const res = await wx.login()
|
|
|
- console.log(res);
|
|
|
- const { code } = res
|
|
|
- if (code) {
|
|
|
- this.code = code
|
|
|
+ // 获取验证码
|
|
|
+ async getCode() {
|
|
|
+ if(!this.phoneIsTrue) return
|
|
|
+
|
|
|
+ this.getCodeStr();
|
|
|
+
|
|
|
+ const {status, message} = await getCode(this.phone)
|
|
|
+ if(status === 200) {
|
|
|
+ await Tip.success('验证码发送成功')
|
|
|
+ }else {
|
|
|
+ Tip.error(message)
|
|
|
}
|
|
|
-
|
|
|
},
|
|
|
- //获取手机号
|
|
|
- getPhoneNumber (e) {
|
|
|
- console.log(e);
|
|
|
- const { encryptedData, iv} = e.detail
|
|
|
-
|
|
|
- this.Login(encryptedData, iv)
|
|
|
- // uni.setStorageSync('token', 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIzNCIsImV4cCI6MTYyNDM0OTAyN30.oaZKLHIJT3eTAWXWEoxrpockYEaLedgWpoTpjamHG30')
|
|
|
- // uni.reLaunch({
|
|
|
- // url: '/pages/user/index'
|
|
|
- // })
|
|
|
+ // 获取短信按钮上的文字
|
|
|
+ getCodeStr() {
|
|
|
+ this.state.codeDisabled = true;
|
|
|
+ // 验证码60秒倒计时
|
|
|
+ if (!this.state.timer) {
|
|
|
+ this.state.timer = setInterval(() => {
|
|
|
+ if (this.state.smsTime > 0 && this.state.smsTime <= 60) {
|
|
|
+ this.state.smsTime--;
|
|
|
+ if (this.state.smsTime !== 0) {
|
|
|
+ this.state.codeMsg = "重新发送(" + this.state.smsTime + ")";
|
|
|
+ } else {
|
|
|
+ clearInterval(this.state.timer);
|
|
|
+ this.state.codeMsg = "获取验证码";
|
|
|
+ this.state.smsTime = 60;
|
|
|
+ this.state.timer = null;
|
|
|
+ this.state.codeDisabled = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
},
|
|
|
+ async loginByCode() {
|
|
|
+ if(!this.codeIsTrue) return
|
|
|
+ const {status, message, data} = await loginByCode(this.phone, this.code)
|
|
|
+ if(status === 200) {
|
|
|
+ this.loading = false
|
|
|
+ Tip.success('登录成功')
|
|
|
+ setLocalStorage('token', data.token)
|
|
|
+ this.$store.commit('set_userInfo', data)
|
|
|
+ uni.reLaunch({
|
|
|
+ url: '/pages/user/index'
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.code = ''
|
|
|
+ }
|
|
|
+ },
|
|
|
// 用户登录
|
|
|
async Login (encryptedData, iv) {
|
|
|
this.loading = true
|
|
|
@@ -212,4 +270,90 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.phone-form {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 76rpx;
|
|
|
+
|
|
|
+ .phone-form-phone {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8rpx;
|
|
|
+ width: 622rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ background: #F7F7F7;
|
|
|
+ border-radius: 48rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .phone-form-phone-input {
|
|
|
+ padding-left: 32rpx;
|
|
|
+ width: 386rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ line-height: 96rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .phone-form-phone-getCode {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 220rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background: #D8D8D8;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .phone-is-true {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background: #193D9D;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .phone-form-code {
|
|
|
+ margin-top: 24rpx;
|
|
|
+ padding-left: 40rpx;
|
|
|
+ width: 622rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ background: #F7F7F7;
|
|
|
+ border-radius: 48rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .phone-form-login {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 60rpx;
|
|
|
+ width: 588rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background: #D9D9D9;
|
|
|
+ border-radius: 48rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .code-is-true {
|
|
|
+ background: #193D9D;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
lvkun996
