时间：2023-04-20 23:42:02 | 来源：网站运营
时间：2023-04-20 23:42:02 来源：网站运营
微信小程序2020-day-2 仿京东登录、注册：
在线咨询
{ "pages":[ "pages/login/login", "pages/mobile/mobile", "pages/company/company" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "京东登录", "navigationBarTextStyle":"black" }, "sitemapLocation": "sitemap.json"}/**app.wxss**/.content { width: 100%; height: 100%; display: flex; flex-direction: column; box-sizing: border-box;}<!--pages/login/login.wxml--><view class="content"> <view class="account"> <view class="title">账号</view> <view class="num"> <!-- bindinput 输入的时间 --> <input bindinput="accountInput" placeholder="用户名/邮箱/手机号" placeholder-style="color:#999;"/> </view> </view> <!-- 分割线 --> <view class="hr"></view> <view class="account"> <view class="title">密码</view> <view class="num"> <!-- bindblur 失去焦点 --> <input bindblur="pwdBlur" placeholder="请输入密码" placeholder-style="color:#999;" password/> </view> </view> <!-- 分割线 --> <view class="hr"></view> <button class="btn" disabled="{{disabled}}" type="{{btnstate}}" bindtap="login" >登录</button> <!-- 导航 --> <view class="operate"> <view><navigator url="../mobile/mobile">手机快速注册</navigator></view> <view><navigator url="../company/company">企业用户注册</navigator></view> <view>找回密码</view> </view></view>/* pages/login/login.wxss */.content{ margin-top: 80rpx;}.account{ display: flex; flex-direction: row; width: 90%; padding-left: 40rpx; padding-top: 40rpx; padding-bottom: 20rpx;}.title{ font-weight: bold; margin-right: 60rpx;}.hr{ width: 90%; opacity: 0.2; border: 2rpx solid #ccc; margin: 0 auto;}.btn{ width: 90%; margin-top: 80rpx; color: #999;}.operate{ display: flex; flex-direction: row;}.operate view{ font-size: 28rpx; color: #333; margin:0 auto; margin-top: 80rpx;}// pages/login/login.jsPage({ /** * 页面的初始数据 */ data: { disabled:true, btnstate:'default' }, accountInput:function(e){ // e 事件对象 // e.detail 获取触发标签的详情 // -->{value: "1", cursor: 1, keyCode: 49} // value 获取输入组件的值 var username = e.detail.value console.log(username); if (username != '') { this.setData({disabled:false,btnstate:'primary'}); } else { this.setData({disabled:true,btnstate:'default'}); } }, pwdBlur:function(e){ // e 事件对象 // e.detail 获取触发标签的详情 // value 获取输入组件的值 var password = e.detail.value console.log(password); if (password != '') { this.setData({disabled:false,btnstate:'primary'}); } else { this.setData({disabled:true,btnstate:'default'}); } }, login:function(e){ }})<!--pages/mobile/mobile.wxml--><view class="content"> <view class="hr"></view> <!-- 手机 --> <view class="numbg"> <view>+86</view> <view> <input placeholder="请输入手机号" maxlength="11" bindblur="mobileBlur"/> </view> </view> <!-- 协议 --> <view class="xieyi"> <icon type="success" color="red" size="18"></icon> <text class="agree">同意</text> <text class="opinion">京东用户注册协议</text> </view> <button class="btn" disabled="{{disabled}}" type="{{btnstate}}" bindtap="login" >下一步</button></view>/* pages/mobile/mobile.wxss */.content{ background: #f2f2f2; height: 1250rpx;}.hr{ padding-top: 40rpx;}.numbg{ border: 2rpx solid #ccc; border-radius: 10rpx; width: 90%; height: 100rpx; margin:0 auto; background: #fff; display: flex; flex-direction: row;}.numbg view{ margin-top: 28rpx; margin-left: 40rpx;}.xieyi{ margin-top: 60rpx; margin-left: 60rpx;}.agree{ font-size: 26rpx; color: #666; margin-left: 10rpx;}.opinion{ font-size: 26rpx; color: #666; font-weight: bold;}.btn{ width: 90%; margin-top: 60rpx;}// pages/mobile/mobile.jsPage({ /** * 页面的初始数据 */ data: { disabled:true,btnstate:'default' }, mobileBlur:function(e){ var phone = e.detail.value console.log(phone); if (phone != '') { this.setData({disabled:false,btnstate:'primary'}); } else { this.setData({disabled:true,btnstate:'default'}); } }}){ "usingComponents": {}, "navigationBarTitleText": "手机快速注册"}<!--pages/company/company.wxml--><form bindsubmit="forSubmit" bindreset="formReset"> <view class="content"> <view class="hr"></view> <view class="item"> <input type="text" name="loginName" placeholder="请设置4-20位用户名" placeholder-class="holder" bindblur="accountBlur"/> </view> <view class="item flex"> <input type="text" password name="password" placeholder="请设置6-20位登录密码" placeholder-class="holder" /> <!-- 开关组件 --> <switch type="switch" name="switch" checked="true"></switch> </view> <view class="item"> <input type="text" name="cpmpany" placeholder="请填写工商注册名称" placeholder-class="holder" /> </view> <view class="item"> <input type="text" name="username" placeholder="联系人姓名" placeholder-class="holder" /> </view> <view class="mobileInfo"> <view class="mobile"> <input type="text" name="mobile" placeholder="请输入手机号" placeholder-class="holder" /> </view> <view class="code">发送短信</view> </view> <view class="item"> <input type="text" name="code" placeholder="短信验证码" placeholder-class="holder" /> </view> <!-- form-type="submit" 表示form表单的提交事件由该btn触发 --> <button class="btn" disabled="{{disabled}}" type="{{btnstate}}" form-type="submit">注册</button> <view class="xieyi"> <text class="agree">注册即为同意</text> <text class="opinion">《京东用户注册协议》</text> </view> </view></form>/* pages/company/company.wxss */.content{ height: 1400rpx; background: #f2f2f2;}.hr{ padding-top: 80rpx;}.item{ margin:0 auto; width: 90%; height: 80rpx; border: 2rpx solid #ccc; border-radius: 6rpx; background: #fff; margin-bottom: 30rpx;}.item input{ height: 80rpx; line-height: 80rpx; margin-left: 20rpx;}.holder{ font-size: 28rpx; color: #999;}.flex{ display: flex; flex-direction: row;}.flex input{ width: 600rpx;}.item switch{ margin-top: 10rpx; margin-right: 10rpx;}.mobileInfo{ display: flex; flex-direction: row;}.mobile{ margin:0 auto; width: 50%; height: 80rpx; border-radius: 6rpx; border:2rpx solid #ccc; background: #fff; margin-bottom: 30rpx; margin-left: 5%; display: flex; flex-direction: row;}.mobile input{ margin-top: 16rpx; margin-left: 20rpx;}.code{ width: 30%; height: 80rpx; border-radius: 6rpx; border:2rpx solid #ccc; background: #efeeec; text-align: center; line-height: 80rpx; color: #999; margin-right: 35rpx; margin-bottom: 30rpx; font-size: 30rpx;}.btn{ width: 90%; color: #999; margin-top: 80rpx;}.xieyi{ margin-top: 30rpx; margin-left: 30rpx; font-size: 26rpx;}.agree{ margin-left: 10rpx; color: #666;}.opinion{ color: red; font-weight: bold; text-decoration: underline;}// pages/company/company.jsPage({ /** * 页面的初始数据 */ data: { disabled:true,btnstate:'default' }, accountBlur:function(e){ var username = e.detail.value console.log(username); if (username != '') { this.setData({disabled:false,btnstate:'primary'}); } else { this.setData({disabled:true,btnstate:'default'}); } }, forSubmit:function(e){ // 包含了所有input的值 console.log(e.detail.value); var user = new Object(); // 通过input.name获取 user.account = e.detail.value.loginName; user.password = e.detail.value.password; user.company = e.detail.value.company; user.username = e.detail.value.username; user.code = e.detail.value.code; user.mobile = e.detail.value.mobile; user.switch = e.detail.value.switch; // 本地缓存 wx.setStorageSync('user', user); // 短暂的对话框 wx.showToast({ title: '注册成功', icon:"success", duration:2000, success:function(){ wx.navigateTo({ url: '../login/login', }) } }); }, forReset:function(e){ }}){ "usingComponents": {}, "navigationBarTitleText": "企业用户注册"}关键词：注册,程序
