微信小程序 + Go 开发《共享遛狗》（第二篇）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

第二篇（扫码识别+上传图片+表单注册）

扫码

给扫码遛狗按钮添加 handleScanTap 事件。

wx.scanCode(Object object)。调起客户端扫码界面进行扫码

developers.weixin.qq.com/miniprogram…

handleScanTap() {
  wx.scanCode({
    success(res) {
      console.log('res', res)
    }
  })
},

点击真机调试

随便找一个二维码进行扫描。

扫码之后，跳转到身份认证页面。

  handleScanTap() {
    wx.scanCode({
      success: (res) => {
        if (res) {
          wx.navigateTo({
            url: '/pages/resgister/resgister'
          })
        }
      }
    })
  },

在 pages 下生成页面。

<!--pages/resgister/resgister.wxml-->
<view class="container padding-top-xl">
    <view class="lic-tmpl" bindtap="onUploadImage">
        <image class="lic-tmpl-img stretch" src="images/b.jpeg" />
        <view class="cuIcon-camerafill"></view>
        <view class="instruction">请上传身份证照片</view>
    </view>
</view>

编译模式

如果觉得每次都需要点击跳转太麻烦了，那么可以选择编译模式。这样的话，就可以在当前页面编译刷新了。

选择图片

  onUploadImage() {
    wx.chooseMedia({
      success: (res) => {
        this.setData({
          IDImgURL: res.tempFiles[0].tempFilePath
        })
      }
    })
  }

页面的 html 中使用 wx:if 进行判断显示。

<view>
    <view  wx:if="{{!IDImgURL}}" bindtap="onUploadImage">
        // ...
    </view>
    <block wx:else>
        <view class="lic-tmpl">
            <image class="stretch" src="{{IDImgURL}}" />
        </view>
    </block>
</view>

表单部分

使用 ColorUI 中 form 部分

<view class="lic-form margin-top-xl">
  <view class="cu-form-group">
    <view class="title">驾驶证号</view>
    <input placeholder="驾驶证号" model:value="{{ID}}"></input>
  </view>
  <view class="cu-form-group">
    <view class="title">姓名</view>
    <input placeholder="姓名" model:value="{{name}}"></input>
  </view>
  <view class="cu-form-group">
    <view class="title">性别</view>
    <picker bindchange="onGenderChange" value="{{genderIndex}}" range="{{genders}}">
      <view class="picker">
        {{genders[genderIndex]}}
      </view>
    </picker>
  </view>
  <view class="cu-form-group">
    <view class="title">出生日期</view>
    <picker mode="date" value="{{birthDate}}" bindchange="onBirthDateChange">
      <view class="picker">
        {{birthDate}}
      </view>
    </picker>
  </view>
</view>

在 js 文件中编写 onChange 事件

onGenderChange(e: any) {
  this.setData({
    genderIndex: parseInt(e.detail.value),
  })
},

onBirthDateChange(e: any) {
  this.setData({
    birthDate: e.detail.value,
  })
},

下面再来一个按钮

<button class="cu-btn bg-red lg margin-top-xl" bindtap="onSubmit">
    提交审核
</button>

模拟返回数据

在选择图片上传之后，我们进行数据模拟，假设一秒钟之后，返回数据。

onUploadImage() {
  wx.chooseMedia({
    success: (res) => {
      this.setData({
        IDImgURL: res.tempFiles[0].tempFilePath
      })
      setTimeout(() => {
        this.setData({
          ID: 372802196812323,
          name: "李静",
          genderIndex: 2,
          birthDate: '1968-10-22'
        })
      }, 1000);
    }
  })
},

按钮状态变化

按钮一共是有三个状态

<button wx:if="{{state==='UNSUBMITTED'}}" class="cu-btn bg-red lg margin-top-xl" bindtap="onSubmit">
  提交审核
</button>
<button wx:if="{{state==='PENDING'}}" class="cu-btn block line-blue margin-top-xl lg" disabled>
  审核中
</button>
<button wx:if="{{state==='VERIFIED'}}" class="cu-btn bg-red lg margin-top-xl" bindtap="onResubmit">
  重新提交审核
</button>

onSubmit 的时候，将按钮的状态变为 PENDING。

onSubmit() {
  this.setData({
    state: "PENDING"
  })
},

既然是审核状态，那么上面的表单信息，应该也是不可以改动的。disabled 的条件就是 state!=='UNSUBMITTED'。

<view class="lic-form margin-top-xl">
  <view class="cu-form-group">
    <input disabled="{{state!=='UNSUBMITTED'}}"></input>
  </view>
  <view class="cu-form-group">
    <input disabled="{{state!=='UNSUBMITTED'}}"></input>
  </view>
  <view class="cu-form-group">
    <picker disabled="{{state!=='UNSUBMITTED'}}">
    </picker>
  </view>
  <view class="cu-form-group">
    <picker disabled="{{state!=='UNSUBMITTED'}}">
      <view class="picker">
        {{birthDate}}
      </view>
    </picker>
  </view>
</view>

模拟审查流程

上传图片 -> 提交审核 -> 审核中 -> 审核通过（重新提交审核）-> 开始遛狗

onSubmit() {
  this.setData({
    state: "PENDING"
  })
  setTimeout(() => {
    this.onIDVerified()
  }, 3000);
},

onResubmit() {
  this.setData({
    state: 'UNSUBMITTED',
    IDImgURL: ''
  })
},

onIDVerified() {
  this.setData({
    state: 'VERIFIED',
  })
  wx.redirectTo({
    url: "/pages/lock/lock"
  })
}