【无标题】

index.wxml文件

    <view class="cod-box">
        <view class="input-name-code">
            <input type="text" class="input-code" placeholder="输入验证码" placeholder-style="color: #C0C4CC;" bindinput="codeInput"/>
        </view>
        <view class="code-img" bindtap="refreshCode">
            <image src="{{codeUrl}}" class="input-code-img" />
        </view>
    </view>

index.wxss文件

    randomString(e) {
        e = e || 32;
        let t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz1234567890",
            a = t.length,
            n = "";
        for (let i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
        return n
    },



  async refreshCode() {
        if(this.data.lock){
           return
        }   
        console.log(this.data.lock)
        let randomStr = this.randomString()
        let that = this
        wx.request({
            url: `${base_api_url}/ocular/wx/code` + '?randomStr=' + randomStr, //获取图片的URL
            method: "get",
            responseType: 'arraybuffer', //ArrayBuffer涉及面比较广，我的理解是ArrayBuffer代表内存之中的一段二进制数据，一旦生成不能再改。可以通过视图（TypedArray和DataView）进行操作。
            success(res) {
                console.log(res,'验证码')
                let url = 'data:image/png;base64,' + wx.arrayBufferToBase64(res.data)
                that.setData({
                    codeUrl: url, //设置data里面的图片url
                    randomStr: randomStr
                })
            },
            fail(res) {
               console.log(res)
            }
        })
        this.setData({
            lock:true
        });
        console.log(this.data.lock)
        setTimeout(() => {
            this.setData({
             lock:false
            });
          }, 500);
    },