登录，区县人员，修改密码

app.js

@@ -12,6 +12,7 @@ App({
       success: (res) => {
         let data = res;
         data.getMenu = wx.getMenuButtonBoundingClientRect();
+        console.log(data);
         // console.log(data.statusBarHeight + data.getMenu.height + (data.getMenu.top - data.statusBarHeight)*2);
         this.globalData.client = data
       }
@@ -19,7 +20,11 @@ App({
 
   },
   globalData: {
-    userInfo: {},
+    userInfo: {
+      name: '顾红伟',
+      phone: '13174420325',
+      role: '1'
+    },
     // 微信用户openid，sessionKey
     wxInfo: {},
     client: {},

app.json

@@ -1,6 +1,10 @@
 {
   "pages": [
     "pages/login/index",
+    "pages/home/index",
+    "pages/county/index",
+    "pages/county/detail",
+    "pages/password/index",
     "pages/test/index",
     "pages/index/index"
   ],

app.wxss

@@ -7,4 +7,12 @@
   justify-content: space-between;
   padding: 200rpx 0;
   box-sizing: border-box;
-} 
+}
+
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@import "/icon/icon.wxss";

commpents/mobile-frame/mobile-main.js

@@ -13,8 +13,6 @@ Component({
    * 组件的初始数据
    */
   data: {
-    windowHeight: app.globalData.client.windowHeight,
-    statusBarHeight: app.globalData.client.statusBarHeight,
     infoHeight: ''
   },
   // 生命周期函数，可以为函数，或一个在methods段中定义的方法名

icon/icon.wxss

@@ -0,0 +1,67 @@
+@font-face {
+  font-family: "iconfont";
+  /* Project id 3094003 */
+  src: url('//at.alicdn.com/t/font_3094003_z3j0v2jnnuj.woff2?t=1640770192881') format('woff2'),
+    url('//at.alicdn.com/t/font_3094003_z3j0v2jnnuj.woff?t=1640770192881') format('woff'),
+    url('//at.alicdn.com/t/font_3094003_z3j0v2jnnuj.ttf?t=1640770192881') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-dianhua:before {
+  content: "\e8ad";
+}
+
+.icon-dianziyouxiang1:before {
+  content: "\e616";
+}
+
+.icon-commpany:before {
+  content: "\e611";
+}
+
+.icon-xingming:before {
+  content: "\e62a";
+}
+
+.icon-bangongdianhua:before {
+  content: "\e67e";
+}
+
+.icon-dizhi:before {
+  content: "\e814";
+}
+
+.icon-quxiantongxunlu:before {
+  content: "\e612";
+}
+
+.icon-bangdingweixin:before {
+  content: "\e62b";
+}
+
+.icon-tuichudenglu:before {
+  content: "\e647";
+}
+
+.icon-xiugaimima:before {
+  content: "\e618";
+}
+
+.icon-weixin:before {
+  content: "\e607";
+}
+
+.icon-mima:before {
+  content: "\e600";
+}
+
+.icon-shenfenleibie:before {
+  content: "\e64c";
+}

pages/county/detail.js

@@ -0,0 +1,115 @@
+// pages/login/login.js
+import WxValidate from '../../utils/wxValidate'
+const app = getApp()
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    frameStyle: { useTop: true, name: '信息管理', leftArrow: true, useBar: false },
+    // 主体高度
+    infoHeight: '',
+    form: {},
+  },
+  initValidate() {
+    const rules = { name: { required: true, }, phone: { required: true, tel: true }, password: { required: true, }, email: { required: true }, address: { required: true, }, company: { required: true, }, office_phone: { required: true, } }
+    // 验证字段的提示信息，若不传则调用默认的信息
+    const messages = { name: { required: '请输入姓名', }, phone: { required: '请输入联系电话', }, password: { required: '请输入密码', }, email: { required: '请输入电子邮箱', }, address: { required: '请输入联系地址', }, company: { required: '请输入工作单位', }, office_phone: { required: '请输入办公电话', } };
+    this.WxValidate = new WxValidate(rules, messages)
+  },
+  back: function () {
+    wx.navigateBack({ url: '/pages/county/index' })
+  },
+  // 取消保存
+  onReset: function (e) {
+    this.back()
+  },
+  // 提交保存
+  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 {
+      console.log(params);
+      wx.showToast({ title: `创建信息成功`, icon: 'success', duration: 2000 })
+    }
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    //验证规则函数
+    this.initValidate()
+    const { id } = options;
+    // 查询信息
+    if (id) this.search(id);
+    // 计算高度
+    this.searchHeight()
+  },
+  // 查询信息
+  search: function (id) {
+    console.log(id);
+  },
+  // 计算高度
+  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/county/detail.json

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

pages/county/detail.wxml

@@ -0,0 +1,68 @@
+<mobile-main frameStyle="{{frameStyle}}" bind:back="back">
+  <view slot="info" class="main" style="height:{{infoHeight}}px;">
+    <view class="one">
+      <form bindsubmit="onSubmit" catchreset="onReset">
+        <view class="content">
+          <view class="left">
+            <text class="icon iconfont icon-xingming"></text>
+          </view>
+          <view class="right">
+            <input name="name" value="{{form.name}}" placeholder='请输入姓名' placeholder-class="placeholder"></input>
+          </view>
+        </view>
+        <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="content">
+          <view class="left">
+            <text class="icon iconfont icon-dianziyouxiang1"></text>
+          </view>
+          <view class="right">
+            <input name="email" value="{{form.email}}" placeholder='请输入电子邮箱' placeholder-class="placeholder"></input>
+          </view>
+        </view>
+        <view class="content">
+          <view class="left">
+            <text class="icon iconfont icon-dizhi"></text>
+          </view>
+          <view class="right">
+            <input name="address" value="{{form.address}}" placeholder='请输入联系地址' placeholder-class="placeholder"></input>
+          </view>
+        </view>
+        <view class="content">
+          <view class="left">
+            <text class="icon iconfont icon-commpany"></text>
+          </view>
+          <view class="right">
+            <input name="company" value="{{form.company}}" placeholder='请输入工作单位' placeholder-class="placeholder"></input>
+          </view>
+        </view>
+        <view class="content">
+          <view class="left">
+            <text class="icon iconfont icon-bangongdianhua"></text>
+          </view>
+          <view class="right">
+            <input name="office_phone" value="{{form.office_phone}}" placeholder='请输入办公电话' placeholder-class="placeholder"></input>
+          </view>
+        </view>
+        <view class="save">
+          <button type="warn" size="mini" formType="reset">取消保存</button>
+          <button type="primary" size="mini" formType="submit">提交保存</button>
+        </view>
+      </form>
+    </view>
+  </view>
+</mobile-main>

pages/county/detail.wxss

@@ -0,0 +1,38 @@
+.main {
+  position: relative;
+  width: 100%;
+}
+
+.main .one {
+  position: relative;
+  padding: 10px;
+}
+
+.main .one .content {
+  position: relative;
+  padding: 10px 0;
+  box-shadow: 0 0 5px #000000;
+  margin: 0 0 10px 0;
+  border-radius: 5px;
+}
+
+.main .one .content .left {
+  float: left;
+  margin: 0 10px;
+}
+
+.main .one .content .left .icon {
+  color: #000000;
+}
+
+.main .one .content .right input {
+  color: #000000;
+}
+
+.main .one .save {
+  text-align: center;
+}
+
+.main .one .save button {
+  margin: 10px;
+}

pages/county/index.js

@@ -0,0 +1,119 @@
+// pages/login/login.js
+const app = getApp()
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    frameStyle: { useTop: true, name: '区县人员', leftArrow: true, useBar: false },
+    // 主体高度
+    infoHeight: '',
+    // 区县人员
+    list: [
+      { id: '1', name: '测试区县', phone: '13174420325', address: '吉林省长春市' },
+      { id: '2', ame: '测试区县', phone: '13174420325', address: '吉林省长春市' },
+    ],
+    // 弹框
+    dialog: { title: '详细信息', show: false, type: '1' },
+    // 详细信息
+    info: { id: '1', name: '测试区县', phone: '13174420325', address: '吉林省长春市' },
+  },
+  back: function () {
+    wx.navigateBack({ url: '/pages/home/index' })
+  },
+  // 添加人员
+  toAdd: function () {
+    wx.navigateTo({ url: `/pages/county/detail` })
+  },
+  // 详细信息
+  toView: function (e) {
+    const { id } = e.currentTarget.dataset;
+    console.log(id);
+    // this.setData({ info: {} })
+    this.setData({ dialog: { title: '详细信息', show: true, type: '1' } })
+  },
+  // 信息变更
+  toEdit: function (e) {
+    const { id } = e.currentTarget.dataset;
+    wx.navigateTo({ url: `/pages/county/detail?id=${id}` })
+  },
+  // 密码重置
+  toReset: function (e) {
+    const { id } = e.currentTarget.dataset;
+    console.log(id);
+    wx.showToast({ title: `密码重置成功`, icon: 'success', duration: 2000 })
+  },
+  // 微信解绑
+  toUnbound: function (e) {
+    const { id } = e.currentTarget.dataset;
+    console.log(id);
+    wx.showToast({ title: `微信解绑成功`, icon: 'success', duration: 2000 })
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    // 计算高度
+    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/county/index.json

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

pages/county/index.wxml

@@ -0,0 +1,54 @@
+<mobile-main frameStyle="{{frameStyle}}" bind:back="back">
+  <view slot="info" class="main" style="height:{{infoHeight}}px;">
+    <view class="one">
+      <button type="primary" size="mini" bindtap="toAdd">添加人员</button>
+    </view>
+    <view class="two">
+      <view class="list" wx:key="item" wx:for="{{list}}">
+        <view class="name">{{item.name}}</view>
+        <view class="other">
+          <view class="otherInfo">联系电话：<text>{{item.phone||'暂无' }}</text></view>
+          <view class="otherInfo textOver">联系地址：<text>{{item.address||'暂无' }}</text></view>
+        </view>
+        <view class="btn">
+          <button type="info" size="mini" bindtap="toView" data-id="{{item.id}}">详细信息</button>
+          <button type="info" size="mini" bindtap="toEdit" data-id="{{item.id}}">信息变更</button>
+          <button type="warn" size="mini" bindtap="toReset" data-id="{{item.id}}">密码重置</button>
+          <button type="warn" size="mini" bindtap="toUnbound" data-id="{{item.id}}">微信解绑</button>
+        </view>
+      </view>
+    </view>
+  </view>
+</mobile-main>
+<van-dialog use-slot title="{{dialog.title}}" show="{{ dialog.show }}" confirmButtonText="返回">
+  <view class="dialog">
+    <view wx:if="{{dialog.type=='1'}}" class="dialog_1">
+      <form>
+        <view class="content">
+          <view class="left"><text>姓名</text></view>
+          <view class="right"><input name="name" value="{{info.name}}" disabled></input></view>
+        </view>
+        <view class="content">
+          <view class="left"><text>联系电话</text></view>
+          <view class="right"><input name="phone" value="{{info.phone}}" disabled></input></view>
+        </view>
+        <view class="content">
+          <view class="left"><text>电子邮箱</text></view>
+          <view class="right"><input name="email" value="{{info.email}}" disabled></input></view>
+        </view>
+        <view class="content">
+          <view class="left"><text>联系地址</text></view>
+          <view class="right"><input name="address" value="{{info.address}}" disabled></input></view>
+        </view>
+        <view class="content">
+          <view class="left"><text>工作单位</text></view>
+          <view class="right"><input name="company" value="{{info.company}}" disabled></input></view>
+        </view>
+        <view class="content">
+          <view class="left"><text>办公电话</text></view>
+          <view class="right"><input name="office_phone" value="{{info.office_phone}}" disabled></input></view>
+        </view>
+      </form>
+    </view>
+  </view>
+</van-dialog>

pages/county/index.wxss

@@ -0,0 +1,88 @@
+.main {
+  position: relative;
+  width: 100%;
+}
+
+.main .one {
+  position: relative;
+  width: 100%;
+  text-align: center;
+  border-bottom: 1px dashed #000000;
+}
+
+.main .one button {
+  margin: 10px;
+}
+
+.main .two {
+  position: relative;
+  padding: 10px;
+}
+
+.main .two .list {
+  float: left;
+  width: 100%;
+  margin: 0 0 8px 0;
+  background-color: #f9f9f9;
+  border-radius: 5px;
+  padding: 8px 0;
+}
+
+.main .two .list .name {
+  font-size: 16px;
+  margin: 0 0 5px 0;
+  padding: 0 10px;
+}
+
+.main .two .list .other .otherInfo {
+  margin: 0 0 5px 0;
+  font-size: 14px;
+  color: #666666;
+  padding: 0 10px;
+}
+
+.main .two .list .other .otherInfo text {
+  color: #000000;
+}
+
+.main .two .list .btn {
+  text-align: center;
+}
+
+.main .two .list .btn button {
+  margin: 0 5px;
+}
+
+.dialog {
+  min-height: 30px;
+  max-height: 320px;
+  overflow-y: auto;
+  padding: 0 8px;
+}
+
+.dialog .dialog_1 .content {
+  position: relative;
+  padding: 8px 0;
+  border-radius: 6px;
+  margin: 0 0 5px 0;
+  background-color: #f1f1f1;
+}
+
+.dialog .dialog_1 .content .left {
+  float: left;
+  margin: 0 10px;
+}
+
+.dialog .dialog_1 .content .left text {
+  font-size: 14px;
+  color: #666666;
+}
+
+.dialog .dialog_1 .content .right input {
+  font-size: 12px;
+}
+
+.van-dialog__header {
+  padding-top: 0 !important;
+  padding: 10px 0 !important;
+}

pages/home/index.js

@@ -0,0 +1,103 @@
+// pages/login/login.js
+const app = getApp()
+const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    frameStyle: { useTop: true, name: '个人中心', leftArrow: false, useBar: false },
+    // 主体高度
+    infoHeight: '',
+    avatarUrl: defaultAvatarUrl,
+    userInfo: {},
+    routerList: [
+      { icon: 'icon-quxiantongxunlu', title: '区县人员', router: 'county' },
+      { icon: 'icon-bangdingweixin', title: '绑定微信', router: '', is_routine: '1' },
+      { icon: 'icon-xiugaimima', title: '修改密码', router: 'password', },
+      { icon: 'icon-tuichudenglu', title: '退出登录', router: 'login' },
+    ]
+  },
+  // 获取头像
+  onChooseAvatar(e) {
+    const { avatarUrl } = e.detail;
+    this.setData({ avatarUrl })
+  },
+  // 跳转页面
+  toPath: function (e) {
+    const { data } = e.currentTarget.dataset;
+    if (data.is_routine && data.is_routine == '1') {
+      wx.showToast({ title: `绑定微信成功`, icon: 'success', duration: 2000 })
+    } else {
+      wx.navigateTo({ url: `/pages/${data.router}/index` })
+    }
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    // 计算高度
+    this.searchHeight()
+    let userInfo = app.globalData.userInfo;
+    if (userInfo) this.setData({ userInfo: userInfo })
+  },
+  // 计算高度
+  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/home/index.json

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

pages/home/index.wxml

@@ -0,0 +1,23 @@
+<mobile-main frameStyle="{{frameStyle}}" bind:back="back">
+  <view slot="info" class="main" style="height:{{infoHeight}}px;">
+    <view class="one">
+      <view class="one_1">
+        <view class="left">
+          <button open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
+            <image class="image" src="{{avatarUrl}}"></image>
+          </button>
+        </view>
+        <view class="right">
+          <view class="name">{{userInfo.name}}</view>
+          <view class="other">{{userInfo.phone}}</view>
+        </view>
+      </view>
+    </view>
+    <view class="two">
+      <view class="list" wx:key="item" wx:for="{{routerList}}" bindtap="toPath" data-data="{{item}}">
+        <view class="icon iconfont {{item.icon}}"></view>
+        <view class="title">{{item.title}}</view>
+      </view>
+    </view>
+  </view>
+</mobile-main>

pages/home/index.wxss

@@ -0,0 +1,83 @@
+.main {
+  position: relative;
+  width: 100%;
+}
+
+.main .one {
+  position: relative;
+  height: 90px;
+  overflow: hidden;
+  padding: 10px;
+  background-color: #2E36431f;
+}
+
+.main .one_1 {
+  position: relative;
+  height: 90px;
+  background-image: linear-gradient(to right, #409eff9f, #9198e5);
+  border-radius: 15px;
+}
+
+.main .one .left {
+  float: left;
+  width: 66px;
+  margin: 10px;
+}
+
+.main .one .left button {
+  padding: 0;
+  background-color: transparent;
+  border-radius: 50%;
+}
+
+.main .one .left .image {
+  display: block;
+  width: 66px;
+  height: 66px;
+  overflow: hidden;
+  border-radius: 50%;
+  background-color: transparent;
+}
+
+.main .one .right {
+  float: left;
+  margin: 18px 0;
+}
+
+.main .one .right .name {
+  font-size: 20px;
+  color: #fff;
+  margin: 0 0 5px 0;
+}
+
+.main .one .right .other {
+  color: #fff;
+}
+
+.main .two {
+  position: relative;
+  padding: 10px;
+}
+
+.main .two .list {
+  float: left;
+  width: 22.6%;
+  text-align: center;
+  box-shadow: 0 0 5px #ccc;
+  margin: 0 10px 10px 0;
+  border-radius: 10px;
+}
+
+.main .two .list:nth-child(4n) {
+  margin: 0 0 10px 0;
+}
+
+.main .two .list .icon {
+  font-size: 30px;
+  margin: 10px 0 5px 0;
+}
+
+.main .two .list .title {
+  font-size: 10px;
+  margin: 0 0 10px 0;
+}

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,13 +7,67 @@ Page({
    * 页面的初始数据
    */
   data: {
-    frameStyle: { useTop: true, name: '登录', leftArrow: false, useBar: false }
+    frameStyle: { useTop: true, name: '登录', leftArrow: false, useBar: false },
+    // 主体高度
+    infoHeight: '',
+    // 用户类别
+    roleList: [
+      { role: '1', name: '管理人员' },
+      { role: '2', name: '区县人员' },
+      { role: '3', name: '办案人员' },
+    ]
+  },
+  initValidate() {
+    const rules = { phone: { required: true, tel: true }, password: { required: true, }, role: { required: true, }, }
+    // 验证字段的提示信息，若不传则调用默认的信息
+    const messages = { phone: { required: '请输入账号', }, password: { required: '请输入密码', }, role: { required: '请输入用户类别', }, };
+    this.WxValidate = new WxValidate(rules, messages)
+  },
+  // 选择用户类别
+  roleChange: function (e) {
+    let { value } = e.detail;
+    let data = this.data.roleList[value];
+    this.setData({ 'form.role': data.role })
+    this.setData({ 'form.name': data.name })
+
+  },
+  // 提交登录
+  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 {
+      console.log(params);
+      app.globalData.userInfo = params;
+      wx.showToast({ title: `账号登录成功`, icon: 'success', duration: 2000 })
+      wx.navigateTo({ url: '/pages/home/index' })
+    }
+  },
+  // 微信登录
+  wxLogin: function () {
+    wx.showToast({ title: `微信登录成功`, icon: 'success', 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 })
   },
 
   /**

pages/login/index.wxml

@@ -1,5 +1,46 @@
 <mobile-main frameStyle="{{frameStyle}}" bind:back="back">
-  <view slot="info">
-    测试
+  <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="content">
+          <view class="left">
+            <text class="icon iconfont icon-shenfenleibie"></text>
+          </view>
+          <view class="right">
+            <picker class="picker" bindchange="roleChange" name="role" value="{{form.role}}" range="{{roleList}}" range-key="name">
+              <view>{{form.name||'选择用户类别'}}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="save">
+          <button type="primary" size="mini" form-type="submit">提交登录</button>
+        </view>
+      </form>
+    </view>
+    <view class="thr">
+      <view class="thr_1"><text>一一一一一</text><text>其他登录方式</text><text>一一一一一</text></view>
+      <view class="thr_2">
+        <text class="iconfont icon-weixin" bindtap="wxLogin"></text>
+      </view>
+    </view>
   </view>
 </mobile-main>

pages/login/index.wxss

@@ -1,18 +1,77 @@
-.one {
-  float: left;
+.main {
+  position: relative;
   width: 100%;
+  background-image: linear-gradient(#409eff9f, #9198e5);
 }
 
-.one .one_1 {
-  float: left;
-  width: 100%;
+.main .one {
+  position: relative;
   text-align: center;
-  margin: 20px 0;
-  font-size: 25px;
+  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;
 }
 
-.one .one_2 {
+.main .two .content .left {
   float: left;
-  width: 100%;
+  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;
+}
+
+.main .thr {
+  text-align: center;
+}
+
+.main .thr .thr_1 {
+  position: relative;
+  margin: 0 0 20px 0;
+}
+
+.main .thr .thr_1 text {
+  color: #ffffff;
+  font-weight: bold;
+}
+
+.main .thr .thr_1 text:nth-child(2) {
+  margin: 0 15px;
+}
+
+.main .thr .thr_2 text {
+  color: #1AAD19;
+  font-size: 40px;
 }

pages/password/index.js

@@ -0,0 +1,107 @@
+// pages/login/login.js
+import WxValidate from '../../utils/wxValidate'
+const app = getApp()
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    frameStyle: { useTop: true, name: '修改密码', leftArrow: true, useBar: false },
+    // 主体高度
+    infoHeight: '',
+  },
+  initValidate() {
+    const rules = { oldPassword: { required: true, }, newPassword: { required: true, }, }
+    // 验证字段的提示信息，若不传则调用默认的信息
+    const messages = { oldPassword: { required: '请输入旧密码', }, newPassword: { required: '请输入新密码', } };
+    this.WxValidate = new WxValidate(rules, messages)
+  },
+  back: function () {
+    wx.navigateBack({ url: '/pages/home/index' })
+  },
+  // 取消修改
+  onReset: function () {
+    this.back()
+  },
+  // 提交修改
+  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 {
+      console.log(params);
+      wx.showToast({ title: `修改密码成功`, icon: 'success', duration: 2000 })
+    }
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  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/password/index.json

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

pages/password/index.wxml

@@ -0,0 +1,28 @@
+<mobile-main frameStyle="{{frameStyle}}" bind:back="back">
+  <view slot="info" class="main" style="height:{{infoHeight}}px;">
+    <view class="one">
+      <form bindsubmit="onSubmit" catchreset="onReset">
+        <view class="content">
+          <view class="left">
+            <text class="icon iconfont icon-mima"></text>
+          </view>
+          <view class="right">
+            <input type='text' name="oldPassword" value="{{form.oldPassword}}" password 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="newPassword" value="{{form.newPassword}}" password placeholder='请输入新密码' placeholder-class="placeholder"></input>
+          </view>
+        </view>
+        <view class="save">
+          <button type="warn" size="mini" formType="reset">取消修改</button>
+          <button type="primary" size="mini" formType="submit">提交修改</button>
+        </view>
+      </form>
+    </view>
+  </view>
+</mobile-main>

pages/password/index.wxss

@@ -0,0 +1,38 @@
+.main {
+  position: relative;
+  width: 100%;
+}
+
+.main .one {
+  position: relative;
+  padding: 10px;
+}
+
+.main .one .content {
+  position: relative;
+  padding: 10px 0;
+  box-shadow: 0 0 5px #000000;
+  margin: 0 0 10px 0;
+  border-radius: 5px;
+}
+
+.main .one .content .left {
+  float: left;
+  margin: 0 10px;
+}
+
+.main .one .content .left .icon {
+  color: #000000;
+}
+
+.main .one .content .right input {
+  color: #000000;
+}
+
+.main .one .save {
+  text-align: center;
+}
+
+.main .one .save button {
+  margin: 10px;
+}

pages/test/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,16 +7,29 @@ Page({
    * 页面的初始数据
    */
   data: {
-    frameStyle: { useTop: true, name: '测试', leftArrow: false, useBar: false }
+    frameStyle: { useTop: true, name: '登录', leftArrow: false, useBar: false },
+    // 主体高度
+    infoHeight: '',
   },
-  login: function () {
-
+  back: function () {
+    wx.navigateBack({ url: '/pages/home/index' })
   },
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-
+    // 计算高度
+    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 })
   },
 
   /**

pages/test/index.wxml

@@ -1,5 +1,5 @@
 <mobile-main frameStyle="{{frameStyle}}" bind:back="back">
-  <view slot="info">
-    测试页面
+  <view slot="info" class="main" style="height:{{infoHeight}}px;">
+    模板
   </view>
 </mobile-main>

pages/test/index.wxss

@@ -1,18 +1,4 @@
-.one {
-  float: left;
+.main {
+  position: relative;
   width: 100%;
-}
-
-.one .one_1 {
-  float: left;
-  width: 100%;
-  text-align: center;
-  margin: 20px 0;
-  font-size: 25px;
-}
-
-.one .one_2 {
-  float: left;
-  width: 100%;
-  text-align: center;
 }

utils/wxValidate.js

@@ -40,7 +40,7 @@ class WxValidate {
       messages: {
         required: '这是必填字段。',
         email: '请输入有效的电子邮件地址。',
-        tel: '请输入11位的手机号码。',
+        tel: '请输入有效号码。',
         url: '请输入有效的网址。',
         date: '请输入有效的日期。',
         dateISO: '请输入有效的日期（ISO），例如：2009-06-23，1998/01/22。',