|
|
@@ -50,15 +50,40 @@
|
|
|
@blur="isPasswordInputOver=true"
|
|
|
>
|
|
|
</div>
|
|
|
+ <div class="form-item form-item-verifi">
|
|
|
+ <div class="title">
|
|
|
+ <!-- <img
|
|
|
+ src="@/assets/images/icon-lock.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ > -->
|
|
|
+ <span>验证码</span>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <input
|
|
|
+ v-model="verifiCode"
|
|
|
+ placeholder="请输入验证码"
|
|
|
+ :class="{
|
|
|
+ invalid: isVerifiCodeInputOver && !isVerifiCodeValid
|
|
|
+ }"
|
|
|
+ @blur="isVerifiCodeInputOver=true"
|
|
|
+ >
|
|
|
+ <button
|
|
|
+ class="get-verifi-code"
|
|
|
+ @click="onClickVerifiCode"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ v-if="isShowVerifiCode"
|
|
|
+ class=""
|
|
|
+ src="https://sit-cnzhengquan.4dage.com/api/show/getRandCode"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
|
|
|
- <button
|
|
|
- class="forget"
|
|
|
- @click="router.push({
|
|
|
- name: 'FindPassword',
|
|
|
- })"
|
|
|
- >
|
|
|
- 忘记密码？
|
|
|
- </button>
|
|
|
|
|
|
<button
|
|
|
class="submit"
|
|
|
@@ -66,14 +91,24 @@
|
|
|
>
|
|
|
登录
|
|
|
</button>
|
|
|
- <button
|
|
|
- class="sign-up"
|
|
|
- @click="$router.push({
|
|
|
- name: 'SignUp',
|
|
|
- })"
|
|
|
- >
|
|
|
- 暂无账号，去注册
|
|
|
- </button>
|
|
|
+ <div class="row-wrapper">
|
|
|
+ <button
|
|
|
+ class="sign-up"
|
|
|
+ @click="$router.push({
|
|
|
+ name: 'SignUp',
|
|
|
+ })"
|
|
|
+ >
|
|
|
+ 暂无账号，去注册
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ class="forget"
|
|
|
+ @click="router.push({
|
|
|
+ name: 'FindPassword',
|
|
|
+ })"
|
|
|
+ >
|
|
|
+ 忘记密码？
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
<button
|
|
|
class="return"
|
|
|
@click="$router.go(-1)"
|
|
|
@@ -84,7 +119,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, computed, watch, onMounted } from "vue"
|
|
|
+import { ref, computed, watch, onMounted, nextTick } from "vue"
|
|
|
import { useRoute, useRouter } from "vue-router"
|
|
|
import { useStore } from "vuex"
|
|
|
import { showDialog } from 'vant'
|
|
|
@@ -101,6 +136,7 @@ const {
|
|
|
|
|
|
const account = ref('')
|
|
|
const password = ref('')
|
|
|
+const verifiCode = ref('')
|
|
|
|
|
|
const accountTrimed = computed(() => {
|
|
|
return account.value.trim()
|
|
|
@@ -108,6 +144,9 @@ const accountTrimed = computed(() => {
|
|
|
const passwordTrimed = computed(() => {
|
|
|
return password.value.trim()
|
|
|
})
|
|
|
+const verifiCodeTrimed = computed(() => {
|
|
|
+ return verifiCode.value.trim()
|
|
|
+})
|
|
|
|
|
|
const isAccountValid = computed(() => {
|
|
|
return !!accountTrimed.value
|
|
|
@@ -115,9 +154,21 @@ const isAccountValid = computed(() => {
|
|
|
const isPasswordValid = computed(() => {
|
|
|
return passwordTrimed.value.length >= 6 && passwordTrimed.value.length <= 10 && passwordTrimed.value.search(/^[0-9a-zA-Z].*$/) === 0
|
|
|
})
|
|
|
+const isVerifiCodeValid = computed(() => {
|
|
|
+ return verifiCodeTrimed.value.length > 0
|
|
|
+})
|
|
|
|
|
|
const isAccountInputOver = ref(false)
|
|
|
const isPasswordInputOver = ref(false)
|
|
|
+const isVerifiCodeInputOver = ref(false)
|
|
|
+
|
|
|
+const isShowVerifiCode = ref(true)
|
|
|
+const onClickVerifiCode = utils.throttle(() => {
|
|
|
+ isShowVerifiCode.value = false
|
|
|
+ nextTick(() => {
|
|
|
+ isShowVerifiCode.value = true
|
|
|
+ })
|
|
|
+}, 333)
|
|
|
|
|
|
function submit() {
|
|
|
if (!isAccountValid.value) {
|
|
|
@@ -136,8 +187,16 @@ function submit() {
|
|
|
isPasswordInputOver.value = true
|
|
|
return
|
|
|
}
|
|
|
+ if (!isVerifiCodeValid.value) {
|
|
|
+ showDialog({
|
|
|
+ message: '请输入验证码',
|
|
|
+ theme: 'round-button',
|
|
|
+ })
|
|
|
+ isVerifiCodeInputOver.value = true
|
|
|
+ return
|
|
|
+ }
|
|
|
|
|
|
- login(accountTrimed.value, passwordTrimed.value).then(() => {
|
|
|
+ login(accountTrimed.value, passwordTrimed.value, verifiCodeTrimed.value).then(() => {
|
|
|
router.replace({
|
|
|
name: 'HomeView'
|
|
|
})
|
|
|
@@ -217,15 +276,57 @@ function submit() {
|
|
|
border-bottom: 1px solid red;
|
|
|
}
|
|
|
}
|
|
|
- >button.forget{
|
|
|
- margin-top: calc(-14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
- margin-left: auto;
|
|
|
- margin-right: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
- font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
- font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #B4B4B4;
|
|
|
- line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ >.form-item{
|
|
|
+ >.title{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ >img{
|
|
|
+ width: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ height: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ margin-right: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ }
|
|
|
+ >span{
|
|
|
+ font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #D1B489;
|
|
|
+ line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >div.row{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-end;
|
|
|
+ margin-top: calc(-11 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ >input{
|
|
|
+ width: 50%;
|
|
|
+ height: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ border-bottom: 1px solid #D9D9D9;
|
|
|
+ font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: black;
|
|
|
+ line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ &::placeholder {
|
|
|
+ font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #B8B8B8;
|
|
|
+ line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >input.invalid{
|
|
|
+ border-bottom: 1px solid red;
|
|
|
+ }
|
|
|
+ >button.get-verifi-code{
|
|
|
+ height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ >img{
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
>button.submit{
|
|
|
margin-top: calc(73 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
@@ -239,27 +340,40 @@ function submit() {
|
|
|
color: #FFFFFF;
|
|
|
line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
}
|
|
|
- >button.sign-up{
|
|
|
- margin-top: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ >.row-wrapper{
|
|
|
+ margin-top: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
width: calc(332 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
- height: calc(56 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
- background: rgba(197, 161, 108, 0.8);
|
|
|
- border-radius: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
- font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
- font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #FFFFFF;
|
|
|
- line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+
|
|
|
+ >button.sign-up{
|
|
|
+ font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #D1B489;
|
|
|
+ line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ }
|
|
|
+ >button.forget{
|
|
|
+ font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #B4B4B4;
|
|
|
+ line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ }
|
|
|
}
|
|
|
>button.return{
|
|
|
- margin-top: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ bottom: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
font-weight: 400;
|
|
|
- color: #A97C46;
|
|
|
+ color: #0D0D0D;
|
|
|
line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
- padding: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
opacity: 0.5;
|
|
|
+ padding: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
}
|
|
|
}
|
|
|
</style>
|
aamin