login1

pages/login1/index.js

@@ -1,66 +1,120 @@
-// pages/login1/index.js
+// pages/login/login.js
+import WxValidate from '../../utils/wxValidate'
+const app = getApp()
 Page({
 
-    /**
-     * 页面的初始数据
-     */
-    data: {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面加载
-     */
-    onLoad: function (options) {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面初次渲染完成
-     */
-    onReady: function () {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面显示
-     */
-    onShow: function () {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面隐藏
-     */
-    onHide: function () {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面卸载
-     */
-    onUnload: function () {
-
-    },
-
-    /**
-     * 页面相关事件处理函数--监听用户下拉动作
-     */
-    onPullDownRefresh: function () {
-
-    },
-
-    /**
-     * 页面上拉触底事件的处理函数
-     */
-    onReachBottom: function () {
-
-    },
-
-    /**
-     * 用户点击右上角分享
-     */
-    onShareAppMessage: function () {
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    frameStyle: { useTop: false, name: '登录', leftArrow: false, useBar: false },
+    // 主体高度
+    infoHeight: '',
+  },
+  initValidate() {
+    const rules = { phone: { required: true, tel: true }, password: { required: true, } }
+    // 验证字段的提示信息，若不传则调用默认的信息
+    const messages = { phone: { required: '请输入账号', }, password: { required: '请输入密码', } };
+    this.WxValidate = new WxValidate(rules, messages)
+  },
+  // 提交登录
+  onSubmit: function (e) {
+    const params = e.detail.value;
+    if (!this.WxValidate.checkForm(params)) {
+      const error = this.WxValidate.errorList[0];
+      wx.showToast({ title: `${error.msg}`, icon: 'error', duration: 2000 })
+      return false
+    } else {
+      wx.request({
+        url: app.globalData.publicUrl + `/api/hc/user/login`,
+        method: "post",
+        data: { ...params },
+        header: {},
+        success: (res) => {
+          if (res.data.errcode == '0') {
+            wx.setStorage({ key: "user", data: res.data.data });
+            app.globalData.userInfo = res.data.data;
+            wx.showToast({ title: `账号登录成功`, icon: 'success', duration: 2000 })
+            wx.navigateTo({ url: '/pages/home/index' })
+          } else {
+            wx.showToast({ title: res.data.errmsg, icon: 'error' })
+          }
+        },
+        fail: (res) => { },
+        complete: (res) => { },
+      })
 
     }
+  },
+  // 微信登录
+  wxLogin: function () {
+    wx.showToast({ title: `暂未开放`, icon: 'error', duration: 2000 })
+    // wx.navigateTo({ url: '/pages/home/index' })
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    //验证规则函数
+    this.initValidate()
+    // 计算高度
+    this.searchHeight()
+  },
+  // 计算高度
+  searchHeight: function () {
+    let frameStyle = this.data.frameStyle;
+    let client = app.globalData.client;
+    let infoHeight = client.windowHeight;
+    // 是否去掉状态栏
+    if (frameStyle.useTop) infoHeight = infoHeight - (client.statusBarHeight + client.getMenu.height + (client.getMenu.top - client.statusBarHeight) * 2);
+    // 是否减去底部菜单
+    if (frameStyle.useBar) infoHeight = infoHeight - 50;
+    if (infoHeight) this.setData({ infoHeight: infoHeight })
+  },
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
 })

pages/login1/index.json

@@ -1,3 +1,6 @@
 {
-  "usingComponents": {}
-}
+  "component": true,
+  "usingComponents": {
+   "mobile-main": "/commpents/mobile-frame/mobile-main"
+  }
+ }

pages/login1/index.wxml

@@ -1,2 +1,41 @@
-<!--pages/login1/index.wxml-->
-<text>pages/login1/index.wxml</text>
+<mobile-main frameStyle="{{frameStyle}}" bind:back="back">
+ <view slot="info" class="main" style="height:{{infoHeight}}px;">
+  <view class="one">
+   <view class="one_1">
+    <form catchsubmit="formSubmit" catchreset="formReset">
+     <view class="one_1_1">登录</view>
+     <view class="one_1_2">
+      <view class="con">
+       <text class="icon iconfont icon-dianhua"></text>
+      </view>
+      <input class="input" name="input" placeholder="请输入手机号" />
+     </view>
+     <view class="one_1_3">
+      <view class="con">
+       <text class="icon iconfont icon-mima"></text>
+      </view>
+      <input class="input" password type="text" placeholder="请输入密码" />
+     </view>
+     <view class="one_1_4">
+      <text class="text-btn1">立即注册</text>
+      <text class="text-btn2">忘记密码？</text>
+      <button class="btn" type="primary" size="mini">登录</button>
+     </view>
+     <view class="one_1_5">
+      <checkbox-group name="checkbox">
+       <label>
+        <checkbox class="check" value="checkbox1" />我已详细阅读并同意《使用协议》
+       </label>
+      </checkbox-group>
+     </view>
+    </form>
+   </view>
+   <view class="one_2">
+    一一一一<text>您还可以使用一下方式登录</text>一一一一
+   </view>
+   <view class="one_3">
+    <button class="mini-btn" type="primary" size="mini">微信登录</button>
+   </view>
+  </view>
+ </view>
+</mobile-main>

pages/login1/index.wxss

@@ -1 +1,115 @@
-/* pages/login1/index.wxss */
+/* pages/login1/index.wxss */
+.main {
+ position: absolute;
+ width: 100%;
+ background: #356363;
+}
+
+.main .one {
+ float: left;
+ width: 80%;
+ margin: 25% 10% 0 10%;
+}
+
+.main .one .one_1 {
+ float: left;
+ width: 93%;
+ height: 350px;
+ overflow: hidden;
+ border-radius: 20px;
+ padding: 10px;
+ background: #fffdfd;
+ margin: 0 0 15px 0;
+}
+
+.main .one .one_1 .one_1_1 {
+ font-size: 20px;
+ padding: 10px 0 0 10px;
+}
+
+.main .one .one_1 .one_1_2 {
+ border-bottom: 1px #000 solid;
+ margin: 20px 20px;
+ height: 30px;
+ padding: 30px 0 0 0;
+}
+
+.main .one .one_1 .one_1_2 .con {
+ width: 20px;
+}
+
+.main .one .one_1 .one_1_2 .input {
+ position: relative;
+ text-align: left;
+ left: 30px;
+ top: -20px;
+ width: 60%;
+ font-size: 14px;
+}
+
+.main .one .one_1 .one_1_3 {
+ border-bottom: 1px #000 solid;
+ margin: 0 20px;
+ height: 30px;
+ padding: 30px 0 0 0;
+}
+
+.main .one .one_1 .one_1_3 .con {
+ width: 20px;
+}
+
+.main .one .one_1 .one_1_3 .input {
+ position: relative;
+ text-align: left;
+ left: 30px;
+ top: -20px;
+ width: 60%;
+ font-size: 14px;
+}
+
+.main .one .one_1 .one_1_4 {
+ height: 50px;
+ line-height: 50px;
+}
+
+.main .one .one_1 .one_1_4 .text-btn1 {
+ margin: 0 30px 0 50px;
+ font-size: 14px;
+}
+
+.main .one .one_1 .one_1_4 .text-btn2 {
+ margin: 0 30px 0 31px;
+ font-size: 14px;
+}
+
+.main .one .one_1 .one_1_4 .btn {
+ width: 190px;
+ border-radius: 50px;
+ margin: 0 45px;
+ background: #58c76b;
+}
+
+.main .one .one_1 .one_1_5 {
+ font-size: 10px;
+ color: #666;
+ padding: 70px 0 0 50px;
+}
+
+.main .one .one_1 .one_1_5 .check {
+ transform: scale(.6);
+}
+
+.main .one .one_2 {
+ float: left;
+ width: 100%;
+ color: #fff;
+ font-size: 14px;
+ margin: 0 0 10px 0;
+ padding: 0 7px;
+}
+
+.main .one .one_3 {
+ float: left;
+ width: 100%;
+ padding: 40px 35% 0;
+}