<template>
?? ?<view>
?? ??? ?<form @submit="formSubmit">
? ? ?? ?<view class="down">
?? ??? ??? ?<view>驗證碼：</view>
?? ??? ??? ?<input class="down_input" name="code"></input>
?? ??? ??? ?<text class="true_code" @tap="changeCode">{[code]}</text>
?? ??? ?</view>
?? ??? ?<button class="btn" form-type="submit">提交</button>
?? ??? ?</form>
?? ?</view>
</template>

<style>
?? ?.down{
?? ??? ?width: 90%;
?? ??? ?margin: 0 auto;
?? ??? ?height: 50rpx;
?? ??? ?display: flex;
?? ??? ?flex-direction: row;
?? ??? ?margin-top: 20rpx;
?? ?}
?? ?.down_input{
?? ??? ?width: 110rpx;
?? ??? ?height: 50rpx;
?? ??? ?line-height: 50rpx;
?? ??? ?border: ?1px solid #CCCCCC;
?? ??? ?border-radius: 6px;
?? ??? ?padding-left: 20rpx;
?? ?}
?? ?.btn{
?? ??? ?width: 300rpx;
?? ??? ?height: 70rpx;
?? ??? ?line-height: 70rpx;
?? ??? ?margin:0 auto;
?? ??? ?margin-top: 50rpx;
?? ??? ?color: white;
?? ??? ?background: #23EBB9;
?? ??? ?
?? ?}
?? ?.true_code{
?? ??? ? ?width: 150rpx;
?? ??? ? ?height: 52rpx;
?? ??? ? ?line-height: 50rpx;
?? ??? ? ?text-align: center;
?? ??? ? ?font-family: Arial;
?? ??? ? ?font-style: italic;
?? ??? ? ?font-weight: bold;
?? ??? ? ?border: 0;
?? ??? ? ?letter-spacing: 3px;
?? ??? ? ?font-size: 18px;
?? ??? ? ?background-color: #ccc;
?? ??? ? ?margin-left: 30rpx;
/* ?? ??? ? ?padding: 10rpx; */
?? ??? ? ?margin-right: 20rpx;
?? ??? ? ?color: black;
?? ?}
</style>

<script>
?? ?export default {
?? ??? ?data() {
?? ??? ??? ?return {
?? ??? ??? ??? ?code:""
?? ??? ??? ?}
?? ??? ?},
?? ??? ?methods: {
?? ??? ??? ?formSubmit(e){
?? ??? ??? ??? ?if(e.detail.value.code=""){
?? ??? ??? ??? ??? ?uni.showToast({
?? ??? ??? ??? ??? ??? ?title:"請輸入驗證碼",
?? ??? ??? ??? ??? ??? ?icon:"none"
?? ??? ??? ??? ??? ?})
?? ??? ??? ??? ?}
? ? ? ? ? ? ? ? //將輸入的驗證碼和生成的驗證碼都轉(zhuǎn)為全大寫字母，然后再比較是否相等
? ? ? ? ? ? ? ? else if(e.detail.value.code.toUpperCase()==this.code.toUpperCase()){
?? ??? ??? ??? ??? ?console.log("驗證碼輸入正確")
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?changeCode(e){
?? ??? ??? ??? ? ? ?var code;
?? ??? ??? ??? ? ? ?//首先默認(rèn)code為空字符串
?? ??? ??? ??? ? ? ?code = '';
?? ??? ??? ??? ? ? ?//設(shè)置長度，這里看需求
?? ??? ??? ??? ? ? ?var codeLength = 4;
?? ??? ??? ??? ? ? ?//設(shè)置隨機(jī)字符
?? ??? ??? ??? ? ? ?var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,?
?? ??? ??? ??? ??? ?'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
?? ??? ??? ??? ??? ?'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z');
?? ??? ??? ??? ? ? ?//循環(huán)codeLength 我設(shè)置的4就是循環(huán)4次
?? ??? ??? ??? ? ? ?for (var i = 0; i < codeLength; i++) {
?? ??? ??? ??? ? ? ? ?//設(shè)置隨機(jī)數(shù)范圍,這設(shè)置為0 ~ 62（10+26+26）
?? ??? ??? ??? ??? ? ?var index = Math.floor(Math.random() * 62);
?? ??? ??? ??? ? ? ? ?//字符串拼接 將每次隨機(jī)的字符 進(jìn)行拼接
?? ??? ??? ??? ? ? ? ?code += random[index];
?? ??? ??? ??? ? ? ?}
?? ??? ??? ??? ??? ?this.code=code;
?? ??? ??? ?}
?? ??? ?},
?? ??? ?onLoad() {
?? ??? ??? ?this.changeCode();
?? ??? ?}
?? ?}
</script>