微信小程序输入邀请码至此栏页面样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<!-- 输入口令 -->
<view class="invitation-page">
    
    <!-- 输入框 -->
    <view class="section">
        <input bindinput="changeInput" placeholder="请粘贴或输入邀请码至此栏" auto-focus/>
    </view>

    <!-- 下一步 -->
    <view class="next-btn" bindtap="next">
        <text>下一步</text>
    </view>

    <!-- 提示信息 -->
    <modal confirm-text="确定"no-confirm  no-cancel hidden="{{modalHidden}}" mask bindconfirm="modalChange">
        请输入有效口令
    </modal>
</view>

二、wxss样式文件代码如下：

.section{
  margin-top: 30rpx;
}
.section input{
  font-size: 36rpx;
  height: 100rpx;
  line-height: 100rpx;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0; 
  background-color: #fff;
  padding: 0 36rpx;
}
.next-btn{
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 80rpx;
  color: #fff;
  font-size: 36rpx;
  margin: 50rpx 26rpx;
  border-radius: 10rpx;
  background-color: #2fcc85;
}

三、js页面代码如下：

Page({
  data: {
    invitation: '',
    modalHidden: true
  },
  changeInput: function (e) {
    this.setData({
      invitation: e.detail.value
    })
  },
  modalChange: function (e) {
    this.setData({
      modalHidden: true
    })
  },
  next: function () {
    var invitation = this.data.invitation;

    if (/^[A-Za-z0-9]{24}$/.test(invitation)) {
      wx.navigateTo({
        url: '/pages/add/add?taskID=' + invitation,
        success: function(res){
          // success
        },
        fail: function() {
          // fail
        },
        complete: function() {
          // complete
        }
      })
    } else {
      this.setData({
          modalHidden: false
      });
    }
  }
})

模板简介：该模板名称为【微信小程序输入邀请码至此栏页面样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。