時(shí)間：2023-04-20 23:42:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-04-20 23:42:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)
微信小程序2020-day-2 仿京東登錄、注冊(cè)：
在線咨詢
{ "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">賬號(hào)</view> <view class="num"> <!-- bindinput 輸入的時(shí)間 --> <input bindinput="accountInput" placeholder="用戶名/郵箱/手機(jī)號(hào)" placeholder-style="color:#999;"/> </view> </view> <!-- 分割線 --> <view class="hr"></view> <view class="account"> <view class="title">密碼</view> <view class="num"> <!-- bindblur 失去焦點(diǎn) --> <input bindblur="pwdBlur" placeholder="請(qǐng)輸入密碼" placeholder-style="color:#999;" password/> </view> </view> <!-- 分割線 --> <view class="hr"></view> <button class="btn" disabled="{{disabled}}" type="{{btnstate}}" bindtap="login" >登錄</button> <!-- 導(dǎo)航 --> <view class="operate"> <view><navigator url="../mobile/mobile">手機(jī)快速注冊(cè)</navigator></view> <view><navigator url="../company/company">企業(yè)用戶注冊(cè)</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({ /** * 頁(yè)面的初始數(shù)據(jù) */ data: { disabled:true, btnstate:'default' }, accountInput:function(e){ // e 事件對(duì)象 // e.detail 獲取觸發(fā)標(biāo)簽的詳情 // -->{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 事件對(duì)象 // e.detail 獲取觸發(fā)標(biāo)簽的詳情 // 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> <!-- 手機(jī) --> <view class="numbg"> <view>+86</view> <view> <input placeholder="請(qǐng)輸入手機(jī)號(hào)" maxlength="11" bindblur="mobileBlur"/> </view> </view> <!-- 協(xié)議 --> <view class="xieyi"> <icon type="success" color="red" size="18"></icon> <text class="agree">同意</text> <text class="opinion">京東用戶注冊(cè)協(xié)議</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({ /** * 頁(yè)面的初始數(shù)據(jù) */ 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": "手機(jī)快速注冊(cè)"}<!--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="請(qǐng)?jiān)O(shè)置4-20位用戶名" placeholder-class="holder" bindblur="accountBlur"/> </view> <view class="item flex"> <input type="text" password name="password" placeholder="請(qǐng)?jiān)O(shè)置6-20位登錄密碼" placeholder-class="holder" /> <!-- 開(kāi)關(guān)組件 --> <switch type="switch" name="switch" checked="true"></switch> </view> <view class="item"> <input type="text" name="cpmpany" placeholder="請(qǐng)?zhí)顚?xiě)工商注冊(cè)名稱" placeholder-class="holder" /> </view> <view class="item"> <input type="text" name="username" placeholder="聯(lián)系人姓名" placeholder-class="holder" /> </view> <view class="mobileInfo"> <view class="mobile"> <input type="text" name="mobile" placeholder="請(qǐng)輸入手機(jī)號(hào)" placeholder-class="holder" /> </view> <view class="code">發(fā)送短信</view> </view> <view class="item"> <input type="text" name="code" placeholder="短信驗(yàn)證碼" placeholder-class="holder" /> </view> <!-- form-type="submit" 表示form表單的提交事件由該btn觸發(fā) --> <button class="btn" disabled="{{disabled}}" type="{{btnstate}}" form-type="submit">注冊(cè)</button> <view class="xieyi"> <text class="agree">注冊(cè)即為同意</text> <text class="opinion">《京東用戶注冊(cè)協(xié)議》</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({ /** * 頁(yè)面的初始數(shù)據(jù) */ 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(); // 通過(guò)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); // 短暫的對(duì)話框 wx.showToast({ title: '注冊(cè)成功', icon:"success", duration:2000, success:function(){ wx.navigateTo({ url: '../login/login', }) } }); }, forReset:function(e){ }}){ "usingComponents": {}, "navigationBarTitleText": "企業(yè)用戶注冊(cè)"}關(guān)鍵詞：注冊(cè),程序
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
