1

app.json

@@ -1,7 +1,7 @@
 {
   "pages": [
-    "pages/index/index",
     "pages/login/index",
+    "pages/index/index",
     "pages/home/index",
     "pages/apply/index",
     "pages/apply/detail",

pages/login copy/index.js

@@ -0,0 +1,124 @@
+// pages/login/login.js
+import WxValidate from '../../utils/wxValidate'
+const app = getApp()
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    frameStyle: { useTop: true, 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) => { },
+      })
+      // params.name = '顾红伟';
+      // app.globalData.userInfo = params;
+      // wx.setStorage({ key: "token", data: 'token' })
+      // wx.setStorage({ key: "role", data: params.role })
+      // wx.showToast({ title: `账号登录成功`, icon: 'success', duration: 2000 })
+      // wx.navigateTo({ url: '/pages/home/index' })
+    }
+  },
+  // 微信登录
+  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 - (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/login copy/index.json

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

pages/login copy/index.wxml

@@ -0,0 +1,30 @@
+<mobile-main frameStyle="{{frameStyle}}" bind:back="back">
+  <view slot="info" class="main" style="height:{{infoHeight}}px;">
+    <view class="one">
+      欢迎登录
+    </view>
+    <view class="two">
+      <form bindsubmit="onSubmit">
+        <view class="content">
+          <view class="left">
+            <text class=" icon iconfont icon-dianhua"></text>
+          </view>
+          <view class="right">
+            <input type='number' name="phone" value="{{form.phone}}" maxlength="11" placeholder='请输入账号' placeholder-class="placeholder"></input>
+          </view>
+        </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="save">
+          <button type="primary" size="mini" form-type="submit">提交登录</button>
+        </view>
+      </form>
+    </view>
+  </view>
+</mobile-main>

pages/login copy/index.wxss

@@ -0,0 +1,54 @@
+.main {
+  position: relative;
+  width: 100%;
+  background-image: linear-gradient(#409eff9f, #9198e5);
+}
+
+.main .one {
+  position: relative;
+  text-align: center;
+  color: #ffffff;
+  font-size: 30px;
+  font-family: cursive;
+  padding: 50px 0;
+  font-weight: bold;
+}
+
+.main .two {
+  position: relative;
+  padding: 0 30px;
+}
+
+.main .two .content {
+  position: relative;
+  background-color: #ffffff9f;
+  padding: 10px 0;
+  border-radius: 30px;
+  margin: 0 0 15px 0;
+}
+
+.main .two .content .left {
+  float: left;
+  margin: 0 10px;
+}
+
+.main .two .content .left .icon {
+  color: #ffffff;
+}
+
+.main .two .content .right input {
+  color: #ffffff;
+}
+
+.main .two .content .right .placeholder {
+  color: #ffffff;
+}
+
+.main .two .content .right .picker view {
+  color: #ffffff;
+}
+
+.main .two .save {
+  margin: 30px 10px;
+  text-align: center;
+}

pages/login/index.js

@@ -1,5 +1,5 @@
 // pages/login/login.js
-import WxValidate from '../../utils/wxValidate'
+import * as methods from '../../utils/login'
 const app = getApp()
 Page({
 
@@ -7,19 +7,34 @@ Page({
    * 页面的初始数据
    */
   data: {
-    frameStyle: { useTop: true, name: '登录', leftArrow: false, useBar: false },
-    // 主体高度
-    infoHeight: '',
+    frameStyle: { useTop: false, name: '登录页面', leftArrow: false, useBar: false },
+    //判断协议是否选中
+    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)
   },
-  // 提交登录
-  onSubmit: function (e) {
-    const params = e.detail.value;
+  //登录
+  formSubmit: function (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;
     if (!this.WxValidate.checkForm(params)) {
       const error = this.WxValidate.errorList[0];
       wx.showToast({ title: `${error.msg}`, icon: 'error', duration: 2000 })
@@ -28,63 +43,104 @@ Page({
       wx.request({
         url: app.globalData.publicUrl + `/api/hc/user/login`,
         method: "post",
-        data: { ...params },
+        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' })
+            wx.navigateTo({ url: `/pages/home/index` })
           } else {
-            wx.showToast({ title: res.data.errmsg, icon: 'error' })
+            wx.showToast({ title: `${res.data.errmsg}`, icon: 'fail', duration: 2000 })
           }
         },
         fail: (res) => { },
         complete: (res) => { },
       })
-      // params.name = '顾红伟';
-      // app.globalData.userInfo = params;
-      // wx.setStorage({ key: "token", data: 'token' })
-      // wx.setStorage({ key: "role", data: params.role })
-      // wx.showToast({ title: `账号登录成功`, icon: 'success', duration: 2000 })
-      // wx.navigateTo({ url: '/pages/home/index' })
     }
   },
-  // 微信登录
-  wxLogin: function () {
+  //微信登录
+  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) => { },
+      })
+    }
+  },
+  //注册
+  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', })
+  },
+  //忘记密码
+  noopen: function () {
     wx.showToast({ title: `暂未开放`, icon: 'error', duration: 2000 })
-    // wx.navigateTo({ url: '/pages/home/index' })
+  },
+  //使用协议
+  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 - (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 () {
+
   },
 
   /**

pages/login/index.wxml

@@ -1,30 +1,58 @@
 <mobile-main frameStyle="{{frameStyle}}" bind:back="back">
-  <view slot="info" class="main" style="height:{{infoHeight}}px;">
+  <view slot="info">
     <view class="one">
-      欢迎登录
-    </view>
-    <view class="two">
-      <form bindsubmit="onSubmit">
-        <view class="content">
-          <view class="left">
-            <text class=" icon iconfont icon-dianhua"></text>
-          </view>
-          <view class="right">
-            <input type='number' name="phone" value="{{form.phone}}" maxlength="11" placeholder='请输入账号' placeholder-class="placeholder"></input>
+      <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>
-        </view>
-        <view class="content">
-          <view class="left">
-            <text class="icon iconfont icon-mima"></text>
+          <!-- 提示框  使用以下方式登录 -->
+          <view class="v3">
+            <view class="line"></view>
+            <view class="lText">您还可以使用以下方式登录</view>
+            <view class="line"></view>
           </view>
-          <view class="right">
-            <input type='text' name="password" value="{{form.password}}" password placeholder='请输入密码' placeholder-class="placeholder"></input>
+          <view class="one_2">
+            <button type="primary" size="mini" bindtap="wxlogin">微信登录</button>
           </view>
         </view>
-        <view class="save">
-          <button type="primary" size="mini" form-type="submit">提交登录</button>
-        </view>
-      </form>
+      </view>
     </view>
   </view>
 </mobile-main>

pages/login/index.wxss

@@ -1,54 +1,190 @@
-.main {
-  position: relative;
+.one {
+  float: left;
   width: 100%;
-  background-image: linear-gradient(#409eff9f, #9198e5);
 }
 
-.main .one {
-  position: relative;
+.one .one_1 {
+  float: left;
+  width: 100%;
   text-align: center;
-  color: #ffffff;
-  font-size: 30px;
-  font-family: cursive;
-  padding: 50px 0;
-  font-weight: bold;
+  /* margin: 20px 0; */
+  font-size: 25px;
 }
 
-.main .two {
-  position: relative;
-  padding: 0 30px;
+.one .one_2 {
+  float: left;
+  width: 100%;
+  text-align: center;
+  margin: 20px 0;
 }
-
-.main .two .content {
+/* 最大的父元素 */
+.v1{
+  display: block;
+  position:absolute;
+  height: 100%;
+  width: 100%;
+  background: #356363;
+  /* 换图片 */
+  
+}
+/* 白色区域 */
+.v1 .v2{
   position: relative;
-  background-color: #ffffff9f;
-  padding: 10px 0;
-  border-radius: 30px;
-  margin: 0 0 15px 0;
+  margin-top: 40%;
+  left: 100rpx; 
+  width: 545rpx;
+  height: 750rpx;
+  background: #FFFFFF;
+  border-radius: 50rpx;
 }
-
-.main .two .content .left {
-  float: left;
-  margin: 0 10px;
+/* 白色区域内的登录文本 */
+.v1 .v2 .dltext{
+  margin-top: 30rpx;
+  position: absolute;
+  margin-left:50rpx;
+  width: 250rpx;
+  height: 100rpx;
+  font-size: 35rpx;
+  font-family: Helvetica;
+  color: #000000;
+  line-height: 100rpx;
+  letter-spacing: 2rpx;
 }
-
-.main .two .content .left .icon {
-  color: #ffffff;
+/* 手机图片+输入框+下划线的父容器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);
 }
-
-.main .two .content .right input {
-  color: #ffffff;
+/* 手机图标 */
+.v1 .v2 .phoneCs .ph{
+  margin-top: 5rpx;
+  margin-left: 30rpx;
+  width: 55rpx;
+  height: 55rpx;
 }
-
-.main .two .content .right .placeholder {
-  color: #ffffff;
+/* 手机号输入框 */
+.v1 .v2 .phoneCs input{
+  width: 200rpx;
+  font-size: 25rpx ;
+  margin-top: 20rpx;
+  margin-left: 30rpx;
 }
-
-.main .two .content .right .picker view {
-  color: #ffffff;
+/* 密码图标+输入框+小眼睛图标+下划线父容器view */
+.v1 .v2 .passwordCs{
+  margin-top: 400rpx;
+  margin-left: 35rpx;
+  position: absolute;
+  display: flex;
+  width:450rpx ;
+  height: 80rpx ;
+  border-bottom: 3rpx solid rgb(58, 57, 57);
 }
-
-.main .two .save {
-  margin: 30px 10px;
-  text-align: center;
+/* 密码图标 */
+.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{
+  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{
+  padding: 0rpx;
+  line-height: 50rpx;
+  font-size: 25rpx;
+  width: 100%;
+  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;
+  /* 修改复选框的大小 */
+  transform:scale(.6);
+}
+/* 协议文本 */
+.v1 .v2 .xieyi .text-xy{
+  margin-left: 5rpx;
+  margin-top: 25rpx;
+  color: #000000;
+  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;
+}
+/* qq wx wb */
+.qwwIcon{
+  margin-top: 100rpx;
+  padding-top: 50rpx;
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 150rpx;
+}
+.qwwIcon image{
+  padding-left: 120rpx;
+  width: 80rpx;
+  height: 80rpx;
 }