zs 2 years ago
parent
commit
87a072b4c2
5 changed files with 241 additions and 375 deletions
  1. 57 91
      pages/login/index.js
  2. 40 49
      pages/login/index.wxml
  3. 101 159
      pages/login/index.wxss
  4. 39 76
      project.config.json
  5. 4 0
      project.private.config.json

+ 57 - 91
pages/login/index.js

@@ -1,5 +1,5 @@
 // pages/login/login.js
-import * as methods from '../../utils/login'
+import WxValidate from '../../utils/wxValidate'
 const app = getApp()
 Page({
 
@@ -7,126 +7,92 @@ Page({
    * 页面的初始数据
    */
   data: {
-    frameStyle: { useTop: false, name: '登录页面', leftArrow: false, useBar: false },
+    frameStyle: { useTop: false, name: '登录', leftArrow: false, useBar: false },
+    // 主体高度
+    infoHeight: '',
     //判断协议是否选中
     agreement: false,
-    //登录数据
-    form: {},
   },
-  // 验证字段的提示信息,若不传则调用默认的信息
   initValidate() {
-    const rules = {
-      phone: { required: true, tel: true },
-      password: { required: true, },
-    }
-    const messages = {
-      phone: { required: '请您输入电话号', },
-      password: { required: '请您输入密码', },
-    };
+    const rules = { phone: { required: true, tel: true }, password: { required: true, } }
+    // 验证字段的提示信息,若不传则调用默认的信息
+    const messages = { phone: { required: '请输入账号', }, password: { required: '请输入密码', } };
     this.WxValidate = new WxValidate(rules, messages)
   },
-  //登录
-  formSubmit: function (e) {
+  back: function () {
+    wx.navigateBack({ url: '/pages/home/index' })
+  },
+  //使用协议
+  checkboxChange(e) {
     const that = this;
-    if (that.data.agreement) {
-      wx.showToast({ title: `已同意使用协议`, icon: 'success', duration: 2000 })
-    } else {
-      wx.showToast({ title: `请同意使用协议`, icon: 'error', duration: 2000 })
-      return false
-    }
-    let params = e.detail.value;
+    let value = e.detail.value;
+    if (value.length > 0) that.setData({ agreement: true })
+    else that.setData({ agreement: false })
+  },
+  // 提交登录
+  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') {
-            app.globalData.userInfo = res.data.data;
-            wx.navigateTo({ url: `/pages/home/index` })
-          } else {
-            wx.showToast({ title: `${res.data.errmsg}`, icon: 'fail', duration: 2000 })
-          }
-        },
-        fail: (res) => { },
-        complete: (res) => { },
-      })
+      if (this.data.agreement) {
+        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) => { },
+        })
+      } else {
+        wx.showToast({ title: `请同意使用协议`, icon: 'error', duration: 1000 })
+      }
+
     }
   },
   //微信登录
   wxlogin: function () {
-    const that = this;
-    // 曹悠男:o54og4xQGLGSuuBIbIprE9OEIjbo
-    if (that.data.agreement) {
-      wx.showToast({ title: `已同意使用协议`, icon: 'success', duration: 1000 })
-    } else {
-      wx.showToast({ title: `请同意使用协议`, icon: 'error', duration: 1000 })
-      return false
-    }
-    let { openid } = app.globalData.wxInfo;
-    if (openid) {
-      wx.request({
-        url: app.globalData.publicUrl + `/api/hc/user/login`,
-        method: "post",
-        data: { openid: openid },
-        header: {},
-        success: (res) => {
-          if (res.data.errcode == '0') {
-            app.globalData.userInfo = res.data.data;
-            wx.navigateTo({ url: `/pages/home/index` })
-          } else {
-            wx.showModal({
-              title: '信息提示',
-              content: '当前微信未绑定系统,您是否需要完善资料?',
-              success: (res) => {
-                if (res.confirm) {
-                  wx.navigateTo({ url: `/pages/register/index` })
-                } else if (res.cancel) {
-                  console.log('取消');
-                }
-              }
-            })
-          }
-        },
-        fail: (res) => { },
-        complete: (res) => { },
-      })
-    }
+    wx.showToast({ title: `暂未开放`, icon: 'error', duration: 2000 })
   },
   //注册
   register: function () {
-    const that = this;
-    if (that.data.agreement) {
-      wx.showToast({ title: `已同意使用协议`, icon: 'success', duration: 1000 })
-    } else {
-      wx.showToast({ title: `请同意使用协议`, icon: 'error', duration: 1000 })
-      return false
-    }
-    wx.navigateTo({ url: '/pages/register/index', })
+    wx.showToast({ title: `暂未开放`, icon: 'error', duration: 2000 })
   },
   //忘记密码
   noopen: function () {
     wx.showToast({ title: `暂未开放`, icon: 'error', duration: 2000 })
   },
-  //使用协议
-  checkboxChange(e) {
-    const that = this;
-    let value = e.detail.value;
-    if (value.length > 0) that.setData({ agreement: true })
-    else that.setData({ agreement: false })
-  },
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-    methods.toLogin()
     //验证规则函数
     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 })
   },
 
   /**

+ 40 - 49
pages/login/index.wxml

@@ -1,58 +1,49 @@
 <mobile-main frameStyle="{{frameStyle}}" bind:back="back">
-  <view slot="info">
+  <view slot="info" class="main" style="height:{{infoHeight}}px;">
     <view class="one">
-      <view class="one_1">
-        <view class="v1">
-          <!-- v2父容器  子view使用绝对布局 -->
-          <view class="v2">
-            <view class="dltext">耗材采购平台</view>
-            <!-- 手机号 -->
-            <form catchsubmit="formSubmit" catchreset="formReset">
-              <view class="phoneCs">
-                <view class="ph">
-                  <text class="icon iconfont icon-dianhua"></text>
-                </view>
-                <input name="phone" value="{{form.phone}}" placeholder="请您输入手机号" />
-              </view>
-              <!-- 密码 -->
-              <view class="passwordCs">
-                <view class="ps">
-                  <text class="icon iconfont icon-mima"></text>
-                </view>
-                <input name="password" value="{{form.password}}" placeholder="请您输入密码" password />
-                <view class="eye">
-                  <text class="icon iconfont icon-yanjing"></text>
-                </view>
-              </view>
-              <!-- 注册 和忘记密码  -->
-              <view class="zhuce">
-                <view bindtap="register">立即注册</view>
-                <view bindtap="noopen">忘记密码?</view>
-              </view>
-              <!-- 登录按钮 -->
-              <view class="denglu">
-                <button class="btn-dl" type="primary" formType="submit">登录</button>
-              </view>
-            </form>
-            <!-- 协议区  xieyi -->
-            <view class="xieyi">
-              <checkbox-group bindchange="checkboxChange">
-                <checkbox class="isXY" value="true" />
-              </checkbox-group>
-              <view class="text-xy">同意小程序的《使用协议》</view>
-            </view>
+      <view class="one_1">耗材采购平台</view>
+      <form bindsubmit="onSubmit">
+        <view class="content">
+          <view class="left">
+            <text class=" icon iconfont icon-dianhua"></text>
           </view>
-          <!-- 提示框  使用以下方式登录 -->
-          <view class="v3">
-            <view class="line"></view>
-            <view class="lText">您还可以使用以下方式登录</view>
-            <view class="line"></view>
+          <view class="right">
+            <input type='number' name="phone" value="{{form.phone}}" maxlength="11" placeholder='请输入账号' placeholder-class="placeholder"></input>
           </view>
-          <view class="one_2">
-            <button type="primary" size="mini" bindtap="wxlogin">微信登录</button>
+        </view>
+        <view class="content">
+          <view class="left">
+            <text class="icon iconfont icon-mima"></text>
+          </view>
+          <view class="right">
+            <input type='text' name="password" value="{{form.password}}" password placeholder='请输入密码' placeholder-class="placeholder"></input>
+          </view>
+        </view>
+        <view class="one_2">
+          <view class="left">
+            <view bindtap="register">立即注册</view>
+          </view>
+          <view class="right">
+            <view bindtap="noopen">忘记密码?</view>
           </view>
         </view>
-      </view>
+        <view class="save">
+          <button type="primary" size="mini" form-type="submit">登录</button>
+        </view>
+        <view class="one_3">
+          <checkbox-group bindchange="checkboxChange">
+            <checkbox class="box" value="true" />
+          </checkbox-group>
+          <view class="box_text">同意小程序的《使用协议》</view>
+        </view>
+      </form>
+    </view>
+    <view class="two">
+      <view class="line"></view>
+      <view class="lText">—————您还可以使用以下方式登录—————</view>
+    </view>
+    <view class="thr">
+      <button type="primary" size="mini" bindtap="wxlogin">微信登录</button>
     </view>
   </view>
 </mobile-main>

+ 101 - 159
pages/login/index.wxss

@@ -1,190 +1,132 @@
-.one {
-  float: left;
+.main {
+  position: relative;
   width: 100%;
+  background: #356363;
 }
 
-.one .one_1 {
+.main .one {
   float: left;
-  width: 100%;
-  text-align: center;
-  /* margin: 20px 0; */
-  font-size: 25px;
+  width: 80%;
+  margin-top: 25%;
+  margin-left: 10%;
+  background: #FFFFFF;
+  border-radius: 50rpx;
 }
 
-.one .one_2 {
+.main .one .one_1 {
   float: left;
   width: 100%;
-  text-align: center;
-  margin: 20px 0;
-}
-/* 最大的父元素 */
-.v1{
-  display: block;
-  position:absolute;
-  height: 100%;
-  width: 100%;
-  background: #356363;
-  /* 换图片 */
-  
-}
-/* 白色区域 */
-.v1 .v2{
-  position: relative;
-  margin-top: 40%;
-  left: 100rpx; 
-  width: 545rpx;
-  height: 750rpx;
-  background: #FFFFFF;
-  border-radius: 50rpx;
-}
-/* 白色区域内的登录文本 */
-.v1 .v2 .dltext{
-  margin-top: 30rpx;
-  position: absolute;
-  margin-left:50rpx;
-  width: 250rpx;
-  height: 100rpx;
-  font-size: 35rpx;
+  margin-top: 5%;
+  margin-left: 10%;
+  margin-bottom: 5%;
+  font-size: 40rpx;
   font-family: Helvetica;
   color: #000000;
   line-height: 100rpx;
   letter-spacing: 2rpx;
 }
-/* 手机图片+输入框+下划线的父容器view */
-.v1 .v2 .phoneCs{
-  margin-top: 200rpx;
-  margin-left: 35rpx;
-  position: absolute;
-  display: flex;
-  width:450rpx ;
-  height: 80rpx ;
-  border-bottom: 3rpx solid rgb(58, 57, 57);
-}
-/* 手机图标 */
-.v1 .v2 .phoneCs .ph{
-  margin-top: 5rpx;
-  margin-left: 30rpx;
-  width: 55rpx;
-  height: 55rpx;
-}
-/* 手机号输入框 */
-.v1 .v2 .phoneCs input{
-  width: 200rpx;
-  font-size: 25rpx ;
-  margin-top: 20rpx;
-  margin-left: 30rpx;
-}
-/* 密码图标+输入框+小眼睛图标+下划线父容器view */
-.v1 .v2 .passwordCs{
-  margin-top: 400rpx;
-  margin-left: 35rpx;
-  position: absolute;
-  display: flex;
-  width:450rpx ;
-  height: 80rpx ;
+
+.main .one .content {
+  float: left;
+  width: 80%;
+  margin-left: 10%;
+  text-align: center;
+  margin-bottom: 15%;
   border-bottom: 3rpx solid rgb(58, 57, 57);
 }
-/* 密码图标 */
-.v1 .v2 .passwordCs .ps{
-  margin-top: 5rpx;
-  margin-left: 30rpx;
-  width: 55rpx;
-  height: 55rpx;
-}
-/* 眼睛 图标*/
-.v1 .v2 .passwordCs .eye{
-  margin-top: 5rpx;
-  margin-left: 65rpx;
-  width: 55rpx;
-  height: 55rpx;
-}
-/* 密码输入框 */
-.v1 .v2 .passwordCs input{
-  width: 200rpx;
-  font-size: 25rpx ;
-  margin-top: 20rpx;
-  margin-left: 30rpx;
-}
-/* 注册+忘记密码父容器 */
-.v1 .v2 .zhuce{
+.main .one .one_2 {
+  float: left;
+  width: 80%;
+  margin-left: 10%;
+  margin-bottom: 5%;
   font-size: 25rpx;
-  margin-left: 85rpx;
-  width: 370rpx;
-  margin-top: 540rpx;
-  position: absolute;
-  display: flex;
-  justify-content: space-between;
-}
-/* 登录按钮容器view */
-.v1 .v2 .denglu{
-  width: 350rpx;
-  height: 50rpx;
-  position: absolute;
-  margin-top: 600rpx;
-  margin-left: 85rpx;
-  
-}
-/* 登录按钮 */
-.v1 .v2 .denglu button{
+}
+.main .one .one_2 .left {
+  float: left;
+  width: 40%;
+  margin: 0 30px;
+}
+
+.main .one .one_2 .right {
+  float: left;
+  width: 30%;
+}
+
+.main .one .content .left {
+  float: left;
+  width: 20%;
+}
+
+.main .one .content .right {
+  float: left;
+  width: 60%;
+  text-align: left;
+  margin-bottom: 2.5%;
+}
+
+.main .one .content .left .icon {
+  color: black;
+}
+
+.main .one .content .right input {
+  color: black;
+}
+
+.main .one .content .right .placeholder {
+  color: black;
+}
+
+.main .one .content .right .picker view {
+  color: #ffffff;
+}
+
+.main .one .save {
+  margin: 15px 10px;
+  text-align: center;
+}
+
+.main .one .save button {
   padding: 0rpx;
   line-height: 50rpx;
   font-size: 25rpx;
-  width: 100%;
+  width: 60%;
   height: 100%;
   border-radius: 30rpx;
 }
-/* 复选框+协议文字容器view */
-.v1 .v2 .xieyi{
-  margin-left: 10rpx;
-  margin-top: 680rpx;
-  width: 400rpx;
-  display: flex;
-  position: absolute;
-}
-/* 复选框 */
-.v1 .v2 .xieyi .isXY{
-  margin-left: 95rpx;
-  /* 修改复选框的大小 */
+.main .one .one_3{
+  float: left;
+  width: 100%;
+  margin-bottom: 2.5%;
+}
+.main .one .one_3 .box{
+  float: left;
+  margin-left: 29%;
+  width: 10%;
   transform:scale(.6);
 }
-/* 协议文本 */
-.v1 .v2 .xieyi .text-xy{
-  margin-left: 5rpx;
-  margin-top: 25rpx;
+.main .one .one_3 .box_text{
+  float: left;
+  width: 40%;
   color: #000000;
+  margin-top: 2%;
   font-size:18rpx;
 }
-/* 提示文本 */
-.v3{
-  padding-left: 100rpx;
-  display: flex;
-  position: relative;
-  width: 80%;
-  height: 60rpx;
-  padding-top: 50rpx;
-}
-.v3 .line{
-  margin-left: 5rpx;
-  margin-top: 18rpx;
-  width: 120rpx;
-  height: 3rpx;
- background-color:#FFFFFF;
-}
-.v3 .lText{
-  color: #FFFFFF;
-  font-size: 25rpx;
+.mian .one .two{
+  float: left;
+  width: 100%;
+  text-align: center;
 }
-/* qq wx wb */
-.qwwIcon{
-  margin-top: 100rpx;
-  padding-top: 50rpx;
-  position: relative;
-  display: flex;
+.main .two {
+  float: left;
   width: 100%;
-  height: 150rpx;
+  margin-top: 5%;
+  text-align: center;
+  color: #ffffff;
+  font-size: 25rpx;
 }
-.qwwIcon image{
-  padding-left: 120rpx;
-  width: 80rpx;
-  height: 80rpx;
+.main .thr {
+  float: left;
+  width: 100%;
+  text-align: center;
+  margin-top: 5%;
 }

+ 39 - 76
project.config.json

@@ -1,79 +1,42 @@
 {
-    "description": "项目配置文件",
-    "packOptions": {
-        "ignore": []
+  "description": "项目配置文件",
+  "setting": {
+    "urlCheck": false,
+    "es6": true,
+    "enhance": true,
+    "postcss": false,
+    "preloadBackgroundData": false,
+    "minified": false,
+    "coverView": true,
+    "autoAudits": false,
+    "showShadowRootInWxmlPanel": true,
+    "uglifyFileName": false,
+    "checkInvalidKey": true,
+    "uploadWithSourceMap": true,
+    "compileHotReLoad": false,
+    "lazyloadPlaceholderEnable": false,
+    "useMultiFrameRuntime": true,
+    "useApiHook": true,
+    "useApiHostProcess": true,
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
     },
-    "setting": {
-        "urlCheck": false,
-        "es6": true,
-        "enhance": true,
-        "postcss": false,
-        "preloadBackgroundData": false,
-        "minified": false,
-        "newFeature": false,
-        "coverView": true,
-        "nodeModules": true,
-        "autoAudits": false,
-        "showShadowRootInWxmlPanel": true,
-        "scopeDataCheck": false,
-        "uglifyFileName": false,
-        "checkInvalidKey": true,
-        "checkSiteMap": true,
-        "uploadWithSourceMap": true,
-        "compileHotReLoad": false,
-        "lazyloadPlaceholderEnable": false,
-        "useMultiFrameRuntime": true,
-        "useApiHook": true,
-        "useApiHostProcess": true,
-        "babelSetting": {
-            "ignore": [],
-            "disablePlugins": [],
-            "outputPath": ""
-        },
-        "enableEngineNative": false,
-        "useIsolateContext": false,
-        "userConfirmedBundleSwitch": false,
-        "packNpmManually": false,
-        "packNpmRelationList": [],
-        "minifyWXSS": false,
-        "disableUseStrict": false,
-        "minifyWXML": true,
-        "showES6CompileOption": false,
-        "useCompilerPlugins": false
-    },
-    "compileType": "miniprogram",
-    "libVersion": "2.20.0",
-    "appid": "wx475e4ad8b65a5ccf",
-    "projectname": "mobiles",
-    "debugOptions": {
-        "hidedInDevtools": []
-    },
-    "scripts": {},
-    "staticServerOptions": {
-        "baseURL": "",
-        "servePath": ""
-    },
-    "isGameTourist": false,
-    "simulatorType": "wechat",
-    "simulatorPluginLibVersion": {},
-    "condition": {
-        "search": {
-            "list": []
-        },
-        "conversation": {
-            "list": []
-        },
-        "game": {
-            "list": []
-        },
-        "plugin": {
-            "list": []
-        },
-        "gamePlugin": {
-            "list": []
-        },
-        "miniprogram": {
-            "list": []
-        }
-    }
+    "useIsolateContext": false,
+    "packNpmManually": false,
+    "packNpmRelationList": [],
+    "minifyWXSS": false,
+    "disableUseStrict": false,
+    "minifyWXML": true,
+    "showES6CompileOption": false,
+    "useCompilerPlugins": false
+  },
+  "compileType": "miniprogram",
+  "libVersion": "2.24.2",
+  "appid": "wx475e4ad8b65a5ccf",
+  "projectname": "mobiles",
+  "simulatorType": "wechat",
+  "simulatorPluginLibVersion": {},
+  "condition": {}
 }

+ 4 - 0
project.private.config.json

@@ -0,0 +1,4 @@
+{
+  "projectname": "mobiles",
+  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html"
+}