在下载的势力基础上操作的:
1.新建otherpages/details/details页面,将pages/index的页面复制进去
<template>
<view class="content">
<view class="text-area">
<text>请输入验证码</text>
<!-- <codeInput ref="codeInput" @verificationCode="verificationCode" codeType="block" :errorType="errorType"></codeInput> -->
<codeInput ref="codeInput" @verificationCode="verificationCode" codeType="line" :errorType="errorType" :blockNum="blockNum"></codeInput>
</view>
</view>
</template>
<script>
import codeInput from '@/components/verification-codeInput/verification-codeInput.vue'
export default {
name:'index',
components:{
codeInput
},
data() {
return {
title: 'Hello',
textCode:'0000',
errorType:false,
blockNum:4
}
},
onLoad() {
},
methods: {
verificationCode(code){
if(code!=this.textCode){
uni.showToast({
title:"验证不通过"
})
this.$refs.codeInput.errorType = true
}else{
uni.showToast({
title:"验证通过"
})
}
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
flex-direction: column;
height: 30vh;
justify-content: space-between;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
- index的页面内容删掉,添加文本
<text @click="todetail">获取验证码</text>
todetail() {
uni.navigateTo({
url:'/otherPages/detail/detail',
complete: (complete) => {
console.log('complete:::', complete)
}
})
},
0 个回复