|
@@ -1,5 +1,5 @@
|
|
|
<script>
|
|
<script>
|
|
|
-import { clientLogin,sendMsg } from '@/api/newLogin.js'
|
|
|
|
|
|
|
+import { clientLogin, sendMsg } from '@/api/newLogin.js'
|
|
|
export default {
|
|
export default {
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
@@ -11,13 +11,13 @@ export default {
|
|
|
isSendingCode: false,
|
|
isSendingCode: false,
|
|
|
isBinding: false,
|
|
isBinding: false,
|
|
|
isPwdHide: true,
|
|
isPwdHide: true,
|
|
|
- isPasswordLogin:true,
|
|
|
|
|
- useCodeLogin:false,
|
|
|
|
|
|
|
+ isPasswordLogin: true,
|
|
|
|
|
+ useCodeLogin: false,
|
|
|
|
|
|
|
|
- showCaptcha:false, // 弹窗显隐
|
|
|
|
|
- imgCode:'', // 用户填写的图形验证码
|
|
|
|
|
- captchaImg:'', // 图形验证码图片地址
|
|
|
|
|
- captchaKey:'' // 后端返回验证码标识
|
|
|
|
|
|
|
+ showCaptcha: true, // 弹窗显隐
|
|
|
|
|
+ imgCode: '', // 用户填写的图形验证码
|
|
|
|
|
+ captchaImg: '', // 图形验证码图片地址
|
|
|
|
|
+ captchaKey: '' // 后端返回验证码标识
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
computed: {
|
|
computed: {
|
|
@@ -37,8 +37,8 @@ export default {
|
|
|
const reg = /^1[3-9]\d{9}$/
|
|
const reg = /^1[3-9]\d{9}$/
|
|
|
return reg.test(phone)
|
|
return reg.test(phone)
|
|
|
},
|
|
},
|
|
|
- nextStep(){
|
|
|
|
|
- if (!this.phone) {
|
|
|
|
|
|
|
+ nextStep() {
|
|
|
|
|
+ if (!this.phone) {
|
|
|
uni.showToast({
|
|
uni.showToast({
|
|
|
title: '请输入手机号',
|
|
title: '请输入手机号',
|
|
|
icon: 'none'
|
|
icon: 'none'
|
|
@@ -53,8 +53,8 @@ export default {
|
|
|
})
|
|
})
|
|
|
return
|
|
return
|
|
|
}
|
|
}
|
|
|
- if(!this.isPasswordLogin){
|
|
|
|
|
- this.showCaptcha=true
|
|
|
|
|
|
|
+ if (!this.isPasswordLogin) {
|
|
|
|
|
+ this.showCaptcha = true
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
},
|
|
},
|
|
@@ -90,9 +90,9 @@ export default {
|
|
|
this.isBinding = true
|
|
this.isBinding = true
|
|
|
clientLogin({
|
|
clientLogin({
|
|
|
//openId: uni.getStorageSync('wx_copenid'),
|
|
//openId: uni.getStorageSync('wx_copenid'),
|
|
|
- userType:'2',
|
|
|
|
|
|
|
+ userType: '2',
|
|
|
phone: _this.phone,
|
|
phone: _this.phone,
|
|
|
- codeSwitch:'false',//是否开启验证码登录 true-是 false-否
|
|
|
|
|
|
|
+ codeSwitch: 'false',//是否开启验证码登录 true-是 false-否
|
|
|
passWord: this.passWord
|
|
passWord: this.passWord
|
|
|
}).then(res => {
|
|
}).then(res => {
|
|
|
if (res.data.code == 200) {
|
|
if (res.data.code == 200) {
|
|
@@ -138,28 +138,28 @@ export default {
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
//图形验证码提交
|
|
//图形验证码提交
|
|
|
- submitImgCode(){
|
|
|
|
|
- if(!this.imgCode){
|
|
|
|
|
- uni.showToast({
|
|
|
|
|
|
|
+ submitImgCode() {
|
|
|
|
|
+ if (!this.imgCode) {
|
|
|
|
|
+ uni.showToast({
|
|
|
title: '请输入验证码',
|
|
title: '请输入验证码',
|
|
|
icon: 'none'
|
|
icon: 'none'
|
|
|
})
|
|
})
|
|
|
return
|
|
return
|
|
|
}
|
|
}
|
|
|
- sendMsg({phone :this.phone }).then(res=>{
|
|
|
|
|
|
|
+ sendMsg({ phone: this.phone }).then(res => {
|
|
|
console.log(res)
|
|
console.log(res)
|
|
|
uni.navigateTo({
|
|
uni.navigateTo({
|
|
|
- url: `/setting/myNew/useCodeLogin?phone=`+this.phone
|
|
|
|
|
|
|
+ url: `/setting/myNew/useCodeLogin?phone=` + this.phone
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
})
|
|
})
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
},
|
|
},
|
|
|
//忘记密码
|
|
//忘记密码
|
|
|
- forgetPassword(){
|
|
|
|
|
- uni.navigateTo({
|
|
|
|
|
- url: `/setting/myNew/forgetPassword?phone=`+this.phone
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ forgetPassword() {
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url: `/setting/myNew/forgetPassword?phone=` + this.phone
|
|
|
|
|
+ })
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -182,42 +182,46 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
|
<view class="greeting-area">
|
|
<view class="greeting-area">
|
|
|
- <view class="bubble-box">
|
|
|
|
|
- <view class="bubble-text">您好,欢迎使用广誉源!</view>
|
|
|
|
|
|
|
+ <view class="bubble-text">您好,欢迎使用广誉源!</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="greeting-area1"></view>
|
|
|
|
|
+ <view class="content">
|
|
|
|
|
+ <view class="input-box">
|
|
|
|
|
+ <u-input v-model="phone" type="number" border="none" maxlength="11" placeholder="请输入手机号"
|
|
|
|
|
+ placeholder-style="font-weight: 400;font-size: 30rpx;color: #C9CDD4;" class="input-item">
|
|
|
|
|
+ <!-- <template slot="prefix">
|
|
|
|
|
+ <view class="label">
|
|
|
|
|
+ <text>+86</text>
|
|
|
|
|
+ <u-line length="38rpx" color="#ccc" margin="0 12rpx 0 20rpx" direction="col"></u-line>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </template> -->
|
|
|
|
|
+ </u-input>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="input-box" style="margin-top: 180rpx;">
|
|
|
|
|
- <u-input v-model="phone" type="number" border="none" maxlength="11" placeholder="请输入手机号"
|
|
|
|
|
- placeholder-style="color: #999" class="input-item">
|
|
|
|
|
- <template slot="prefix">
|
|
|
|
|
- <view class="label">
|
|
|
|
|
- <text>+86</text>
|
|
|
|
|
- <u-line length="38rpx" color="#ccc" margin="0 12rpx 0 20rpx" direction="col"></u-line>
|
|
|
|
|
- </view>
|
|
|
|
|
- </template>
|
|
|
|
|
- </u-input>
|
|
|
|
|
|
|
+ <view class="input-box" v-if="isPasswordLogin">
|
|
|
|
|
+ <u-input v-model="password" customStyle="font-family: monospace" autocomplete="off" border="none"
|
|
|
|
|
+ :password="isPwdHide" maxlength="20" customClass="pwd-star" placeholder="请输入密码"
|
|
|
|
|
+ placeholder-style="font-weight: 400;font-size: 30rpx;color: #C9CDD4;" class="input-item">
|
|
|
|
|
+ <!-- <template #suffix>
|
|
|
|
|
+ <u-icon :name="isPwdHide ? 'eye-off' : 'eye'" @click="isPwdHide = !isPwdHide" size="32rpx" color="#999" />
|
|
|
|
|
+ </template> -->
|
|
|
|
|
+ </u-input>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="bind-btn">
|
|
|
|
|
+ <u-button v-if="isPasswordLogin || useCodeLogin" :loading="isBinding" type="primary"
|
|
|
|
|
+ @click="loginPhoneFun">登录</u-button>
|
|
|
|
|
+ <u-button v-if="!isPasswordLogin" :loading="isBinding" type="primary" @click="nextStep">下一步</u-button>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="textBox">
|
|
|
|
|
+ <view class="text1" v-if="isPasswordLogin" @click="isPasswordLogin = false">验证码登录</view>
|
|
|
|
|
+ <view class="text1" v-if="!isPasswordLogin" @click="isPasswordLogin = true">密码登录</view>
|
|
|
|
|
+ <view class="text2" v-if="isPasswordLogin" @click="forgetPassword">忘记密码</view>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
- <view class="input-box" v-if="isPasswordLogin">
|
|
|
|
|
- <u-input v-model="password" autocomplete="off" border="none" :password="isPwdHide" maxlength="20"
|
|
|
|
|
- placeholder="请输入密码" placeholder-style="color: #999" class="input-item">
|
|
|
|
|
- <template #suffix>
|
|
|
|
|
- <u-icon :name="isPwdHide ? 'eye-off' : 'eye'" @click="isPwdHide = !isPwdHide" size="32rpx" color="#999" />
|
|
|
|
|
- </template>
|
|
|
|
|
- </u-input>
|
|
|
|
|
- </view>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- <view class="bind-btn">
|
|
|
|
|
- <u-button v-if="isPasswordLogin || useCodeLogin" :loading="isBinding" type="primary" @click="loginPhoneFun">登录</u-button>
|
|
|
|
|
- <u-button v-if="!isPasswordLogin" :loading="isBinding" type="primary" @click="nextStep">下一步</u-button>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view style="display: flex;justify-content: space-between;margin-top: 30rpx;font-size: 28rpx;">
|
|
|
|
|
- <view v-if="isPasswordLogin" @click="isPasswordLogin=false">验证码登录</view>
|
|
|
|
|
- <view v-if="!isPasswordLogin" @click="isPasswordLogin=true">密码登录</view>
|
|
|
|
|
- <view v-if="isPasswordLogin" @click="forgetPassword">忘记密码</view>
|
|
|
|
|
- </view>
|
|
|
|
|
|
|
+
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@@ -227,26 +231,28 @@ export default {
|
|
|
<!-- //myNew/forgetPassword -->
|
|
<!-- //myNew/forgetPassword -->
|
|
|
|
|
|
|
|
<!-- 图形验证码弹窗 -->
|
|
<!-- 图形验证码弹窗 -->
|
|
|
- <u-popup :show="showCaptcha" mode="center" border-radius="12">
|
|
|
|
|
- <view class="captcha-box">
|
|
|
|
|
- <view class="captcha-title">
|
|
|
|
|
- <text>请输入下方图形验证码</text>
|
|
|
|
|
- <u-icon name="close" @click="showCaptcha=false"></u-icon>
|
|
|
|
|
|
|
+ <u-popup :show="showCaptcha" mode="center" border-radius="12">
|
|
|
|
|
+ <view class="captcha-box">
|
|
|
|
|
+ <view class="captcha-title">
|
|
|
|
|
+ <view>请输入下方图形验证码</view>
|
|
|
|
|
+ <u-icon custom-style="position: relative;left:90rpx ;" name="close" color="#C9CDD4" size="20"
|
|
|
|
|
+ @click="showCaptcha = false"></u-icon>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view style="padding: 0 48rpx;margin-top: 48rpx;">
|
|
|
|
|
+ <view style="display: flex;justify-content: space-between;height: 106rpx;border-bottom: 1rpx solid #E7E7E7;">
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 验证码输入框,唤起全字符键盘 -->
|
|
|
|
|
+ <u-input v-model="imgCode" placeholder="请输入图形验证码" :focus="showCaptcha" type="text" maxlength="4"
|
|
|
|
|
+ border="none" placeholder-style="font-weight: 400;font-size: 30rpx;color: #C9CDD4;"></u-input>
|
|
|
|
|
+ <!-- 图形验证码图片,点击刷新 -->
|
|
|
|
|
+ <image :src="captchaImg" @click="refreshCaptcha" class="captcha-img"></image>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="text">看不清? 换一张</view>
|
|
|
|
|
+ <u-button class="submitImgCode" @click="submitImgCode" block>确定</u-button>
|
|
|
|
|
+
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
- <!-- 图形验证码图片,点击刷新 -->
|
|
|
|
|
- <image :src="captchaImg" @click="refreshCaptcha" class="captcha-img"></image>
|
|
|
|
|
- <!-- 验证码输入框,唤起全字符键盘 -->
|
|
|
|
|
- <u-input
|
|
|
|
|
- v-model="imgCode"
|
|
|
|
|
- placeholder="请输入图形验证码"
|
|
|
|
|
- :focus="showCaptcha"
|
|
|
|
|
- type="text"
|
|
|
|
|
- maxlength="4"
|
|
|
|
|
- border="none"
|
|
|
|
|
- ></u-input>
|
|
|
|
|
- <u-button @click="submitImgCode" block custom-style="margin-top:20rpx;">确定</u-button>
|
|
|
|
|
- </view>
|
|
|
|
|
- </u-popup>
|
|
|
|
|
|
|
+ </u-popup>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@@ -254,40 +260,132 @@ export default {
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
-
|
|
|
|
|
-.captcha-box{
|
|
|
|
|
- width:600rpx;
|
|
|
|
|
- padding:30rpx;
|
|
|
|
|
-}
|
|
|
|
|
-.captcha-title{
|
|
|
|
|
- display:flex;
|
|
|
|
|
- justify-content:space-between;
|
|
|
|
|
- align-items:center;
|
|
|
|
|
- font-size:32rpx;
|
|
|
|
|
- margin-bottom:30rpx;
|
|
|
|
|
|
|
+::v-deep .u-popup__content {
|
|
|
|
|
+ background-color: #00000000;
|
|
|
}
|
|
}
|
|
|
-.captcha-img{
|
|
|
|
|
- width:100%;
|
|
|
|
|
- height:120rpx;
|
|
|
|
|
- margin-bottom:20rpx;
|
|
|
|
|
|
|
+
|
|
|
|
|
+.captcha-box {
|
|
|
|
|
+ width: 622rpx;
|
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
|
+ border-radius: 32rpx 32rpx 32rpx 32rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .captcha-title {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ color: #333333;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ padding: 32rpx 0;
|
|
|
|
|
+ border-bottom: 1rpx solid #E7E7E7;
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .captcha-img {
|
|
|
|
|
+ //width: 100%;
|
|
|
|
|
+ width: 200rpx;
|
|
|
|
|
+ height: 106rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .submitImgCode {
|
|
|
|
|
+ width: 526rpx;
|
|
|
|
|
+ height: 80rpx;
|
|
|
|
|
+ background: linear-gradient(263deg, #45FFD7 0%, #7FFFBD 100%);
|
|
|
|
|
+ border-radius: 60rpx 60rpx 60rpx 60rpx;
|
|
|
|
|
+ margin-top: 48rpx;
|
|
|
|
|
+
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ color: #1D2129;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ margin-bottom: 48rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .text {
|
|
|
|
|
+ margin-top: 12rpx;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ color: #86909C;
|
|
|
|
|
+ text-align: right;
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .u-input {}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
.sett-box {
|
|
.sett-box {
|
|
|
- width: 750rpx;
|
|
|
|
|
- height: 100vh;
|
|
|
|
|
- background: #F5F8F8;
|
|
|
|
|
- padding: 36rpx 40rpx;
|
|
|
|
|
|
|
+ background: #ffffff;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ min-height: 100vh;
|
|
|
|
|
+ line-height: 1;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+
|
|
|
|
|
+ //padding: 36rpx 40rpx;
|
|
|
|
|
+ .greeting-area1 {
|
|
|
|
|
+ height: 438rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .greeting-area {
|
|
|
|
|
+ background-image: url('/static/login/loginBg.png');
|
|
|
|
|
+ background-size: 100%;
|
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
|
+ padding-left: 64rpx;
|
|
|
|
|
+ padding-top: 256rpx;
|
|
|
|
|
+
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ z-index: 4;
|
|
|
|
|
+ height: 438rpx;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+
|
|
|
|
|
+ .bubble-text {
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ font-size: 52rpx;
|
|
|
|
|
+ color: #1D2129
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .content {
|
|
|
|
|
+ padding: 0 64rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .textBox {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ padding: 16rpx 42rpx 0 42rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .text1 {
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ color: #19D29B;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .text2 {
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ color: #86909C;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.input-box {
|
|
.input-box {
|
|
|
- width: 678rpx;
|
|
|
|
|
- height: 92rpx;
|
|
|
|
|
|
|
+ width: 622rpx;
|
|
|
|
|
+ height: 110rpx;
|
|
|
background: #FFFFFF;
|
|
background: #FFFFFF;
|
|
|
- border-radius: 24rpx;
|
|
|
|
|
- margin-bottom: 36rpx;
|
|
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- padding: 0 30rpx;
|
|
|
|
|
|
|
+ border-bottom: 1rpx solid #E7E7E7;
|
|
|
|
|
|
|
|
.label {
|
|
.label {
|
|
|
display: flex;
|
|
display: flex;
|
|
@@ -296,6 +394,12 @@ export default {
|
|
|
.input-item {
|
|
.input-item {
|
|
|
flex: 1;
|
|
flex: 1;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ ::v-deep .uni-input-input {
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
|
+ color: #1D2129;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.code-box {
|
|
.code-box {
|
|
@@ -317,14 +421,19 @@ export default {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.bind-btn {
|
|
.bind-btn {
|
|
|
|
|
+ margin-top: 120rpx;
|
|
|
|
|
|
|
|
::v-deep .u-button {
|
|
::v-deep .u-button {
|
|
|
- width: 678rpx;
|
|
|
|
|
- height: 84rpx;
|
|
|
|
|
- border-radius: 60rpx;
|
|
|
|
|
- font-size: 28rpx;
|
|
|
|
|
- background: linear-gradient(90deg, #2DB1A8 0%, #33BCB0 100%);
|
|
|
|
|
|
|
+ width: 622rpx;
|
|
|
|
|
+ height: 88rpx;
|
|
|
|
|
+ background: linear-gradient(263deg, #45FFD7 0%, #7FFFBD 100%);
|
|
|
|
|
+ border-radius: 60rpx 60rpx 60rpx 60rpx;
|
|
|
border: none;
|
|
border: none;
|
|
|
|
|
+
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ color: #1D2129;
|
|
|
|
|
+ text-align: center;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
::v-deep .u-button--disabled {
|
|
::v-deep .u-button--disabled {
|