|
|
@@ -88,6 +88,38 @@
|
|
|
@blur="isPasswordRepeatInputOver=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
|
|
|
+ v-if="isShowVerifiCode"
|
|
|
+ class="verifi-code"
|
|
|
+ @click="onClickVerifiCode"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class=""
|
|
|
+ src="https://sit-cnzhengquan.4dage.com/api/show/getRandCode"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
<button
|
|
|
class="submit"
|
|
|
@@ -105,7 +137,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'
|
|
|
@@ -124,6 +156,7 @@ const account = ref('')
|
|
|
const phone = ref('')
|
|
|
const password = ref('')
|
|
|
const passwordRepeat = ref('')
|
|
|
+const verifiCode = ref('')
|
|
|
|
|
|
const accountTrimed = computed(() => {
|
|
|
return account.value.trim()
|
|
|
@@ -137,6 +170,9 @@ const passwordTrimed = computed(() => {
|
|
|
const passwordRepeatTrimed = computed(() => {
|
|
|
return passwordRepeat.value.trim()
|
|
|
})
|
|
|
+const verifiCodeTrimed = computed(() => {
|
|
|
+ return verifiCode.value.trim()
|
|
|
+})
|
|
|
|
|
|
const isAccountValid = computed(() => {
|
|
|
return !!accountTrimed.value
|
|
|
@@ -150,13 +186,23 @@ const isPasswordValid = computed(() => {
|
|
|
const isPasswordRepeatValid = computed(() => {
|
|
|
return passwordTrimed.value === passwordRepeatTrimed.value
|
|
|
})
|
|
|
+const isVerifiCodeValid = computed(() => {
|
|
|
+ return verifiCodeTrimed.value.length > 0
|
|
|
+})
|
|
|
|
|
|
const isAccountInputOver = ref(false)
|
|
|
const isPhoneInputOver = ref(false)
|
|
|
const isPasswordInputOver = ref(false)
|
|
|
const isPasswordRepeatInputOver = ref(false)
|
|
|
+const isVerifiCodeInputOver = ref(false)
|
|
|
|
|
|
-
|
|
|
+const isShowVerifiCode = ref(true)
|
|
|
+function onClickVerifiCode() {
|
|
|
+ isShowVerifiCode.value = false
|
|
|
+ nextTick(() => {
|
|
|
+ isShowVerifiCode.value = true
|
|
|
+ })
|
|
|
+}
|
|
|
|
|
|
function submit() {
|
|
|
if (!isAccountValid.value) {
|
|
|
@@ -191,8 +237,16 @@ function submit() {
|
|
|
isPasswordRepeatInputOver.value = true
|
|
|
return
|
|
|
}
|
|
|
+ if (!isVerifiCodeValid.value) {
|
|
|
+ showDialog({
|
|
|
+ message: '请输入验证码',
|
|
|
+ theme: 'round-button',
|
|
|
+ })
|
|
|
+ isVerifiCodeInputOver.value = true
|
|
|
+ return
|
|
|
+ }
|
|
|
|
|
|
- signUp(accountTrimed.value, phoneTrimed.value, passwordTrimed.value, passwordRepeatTrimed.value).then(() => {
|
|
|
+ signUp(accountTrimed.value, phoneTrimed.value, passwordTrimed.value, passwordRepeatTrimed.value, verifiCodeTrimed.value).then(() => {
|
|
|
showDialog({
|
|
|
message: '注册成功',
|
|
|
theme: 'round-button',
|
|
|
@@ -284,6 +338,54 @@ function submit() {
|
|
|
border-bottom: 1px solid red;
|
|
|
}
|
|
|
}
|
|
|
+ >.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: center;
|
|
|
+ >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{
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
>button.submit{
|
|
|
width: calc(332 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
height: calc(56 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
任一存