效果图：
index.wxml
<view class="page__bd">
<view class="weui-cells weui-cells_after-title" >
<view class="find_result">
<view class="result_inner">
<view class="result_inner_title">请在下方输入图形验证码</view>
<view class="result_inner_input">
<input value="" class="input_input" bindinput='makecodeInput'></input>
<view class='makecode'>{{code}}</view>
<view class="getcode" bindtap='getcode'>换一张</view>
</view>
<view class="result_btn">
<view bindtap="cancelBtn">取消注销</view>
<view bindtap="confirmBtn">确定注销</view>
</view>
</view>
</view>
</view>
</view>
index.wxss
.find_result{
margin: 30rpx auto 0;
690rpx;
height: 380rpx;
background: #FFFFFF;
border-radius:30rpx;
}
.result_inner{
padding-top: 48rpx;
margin:0 103rpx 0;
height: inherit
}
.result_inner_title{
100%;
text-align: center;
font-size: 30rpx;
color:#888888;
}
.result_inner_input{
480rpx;
height: 90rpx;
background: #F1F1F1;
border-radius:45rpx;
margin-top: 36rpx;
position: relative;
}
.input_input{
line-height: 90rpx;
height: 90rpx;
306rpx;
position: absolute;
left: 30rpx;
top: 0;
}
.makecode{
149rpx;
height: 53rpx;
background: #FFFFFF;
border-radius: 26.5rpx;
position: absolute;
right: 25rpx;
top:20rpx;
color:#0903EC;
text-align: center;
line-height: 53rpx;
}
.getcode{
font-size: 24rpx;
color:#444444;
position: absolute;
71rpx;
height: 23rpx;
right:-80rpx;
top:30rpx;
}
.result_btn{
/* 100%; */
margin-top: 49rpx;
height: 70rpx;
padding: 0rpx 30rpx;
margin-bottom: 60rpx;
}
.result_btn view{
180rpx;
height: 70rpx;
border-radius: 35rpx;
border:2rpx solid #97C9C6;
display: inline-block;
color: #97C9C6;
line-height: 70rpx;
text-align: center;
font-size:30rpx;
}
.result_btn view:nth-child(2){
background: #97C9C6;
color: #FFFFFF;
float: right;
}
index.js
Page({
/**
* 页面的初始数据
*/
data: {
code:"",
},
//验证码
createCode() {
var code;
//首先默认code为空字符串
code = '';
//设置长度，这里看需求，我这里设置了4
var codeLength = 4;
//设置随机字符
var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
//循环codeLength 我设置的4就是循环4次
for (var i = 0; i < codeLength; i++) {
//设置随机数范围,这设置为0 ~ 10
var index = Math.floor(Math.random() * 10);
//字符串拼接 将每次随机的字符 进行拼接
code += random[index];
}
//将拼接好的字符串赋值给展示的code
this.setData({
code: code
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
this.createCode();
},
getcode: function () {
this.createCode();
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
cancelBtn:function(){
wx.redirectTo({
url: '/pages/setup/setup',
})
},
confirmBtn: function () {
if (this.data.makecode != this.data.code) {
wx.showToast({
title: '验证码不正确',
icon: 'none',
duration: 2000
})
}else{
console.log("注销成功")
wx.redirectTo({
url: '/pages/setup/logoutSuccess',
})
}
},
//获取输入验证码
makecodeInput: function (e) {
this.setData({
makecode: e.detail.value
})
},
})
到此结束