登录页面开发完成

App.vue

@@ -1,8 +1,8 @@
 <script>
-import { mapActions } from "vuex";
+// import { mapActions } from "vuex";
 export default {
   methods: {
-    ...mapActions("demo", ["getData"]),
+    // ...mapActions("demo", ["getData"]),
   },
   onLaunch: function () {
     console.log("App Launch");
@@ -14,9 +14,9 @@ export default {
     console.log("App Hide");
   },
   mounted() {
-    this.getData().then((res) => {
-      console.log(res);
-    });
+    // this.getData().then((res) => {
+    //   console.log(res);
+    // });
   },
 };
 </script>
@@ -30,11 +30,5 @@ page {
   * {
     box-sizing: border-box;
   }
-  .red {
-    color: $textColorRed;
-  }
-  .green {
-    color: $defaultColor;
-  }
 }
 </style>

package-lock.json

@@ -9,13 +9,19 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "animate.css": "^4.1.1"
+        "animate.css": "^4.1.1",
+        "crypto-js": "^4.1.1"
       }
     },
     "node_modules/animate.css": {
       "version": "4.1.1",
       "resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz",
       "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
+    "node_modules/crypto-js": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.1.1.tgz",
+      "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
     }
   },
   "dependencies": {
@@ -23,6 +29,11 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz",
       "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
+    "crypto-js": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.1.1.tgz",
+      "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
     }
   }
 }

package.json

@@ -14,6 +14,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "animate.css": "^4.1.1"
+    "animate.css": "^4.1.1",
+    "crypto-js": "^4.1.1"
   }
 }

pages.json

@@ -1,17 +1,24 @@
 {
-	"pages": [{
-		"path": "pages/index/index",
-		"style": {
-			"navigationBarTitleText": "uni-app"
-		}
-	}],
-	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8",
-		"app-plus": {
-			"background": "#efeff4"
-		}
-	}
+  "pages": [{
+      "path": "pages/login/login",
+      "style": {
+        "navigationBarTitleText": "登录"
+      }
+    },
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": "首页"
+      }
+    }
+  ],
+  "globalStyle": {
+    "navigationBarTextStyle": "white",
+    "navigationBarTitleText": "医疗服务中心转运系统",
+    "navigationBarBackgroundColor": "#353639",
+    "backgroundColor": "#F8F8F8",
+    "app-plus": {
+      "background": "#efeff4"
+    }
+  }
 }

pages/login/login.vue

@@ -0,0 +1,195 @@
+<template>
+  <view class="login">
+    <view class="login_title"> 医疗服务中心转运系统 </view>
+    <form @submit="login" class="form">
+      <view class="form_item">
+        <view class="form_title">用户名：</view>
+        <input class="form_input" name="username" :value="username" placeholder="请输入用户名" />
+      </view>
+      <view class="form_item">
+        <view class="form_title">密<text class="placeholder"></text>码：</view>
+        <input class="form_input" name="password" :value="password" password placeholder="请输入密码" />
+      </view>
+      <view class="form_item">
+        <checkbox-group name="savePassword">
+          <label>
+            <checkbox value="true" :checked="savePassword" /><text>记住密码</text>
+          </label>
+        </checkbox-group>
+      </view>
+      <view class="form_submit">
+        <button form-type="submit">登录</button>
+      </view>
+    </form>
+    <view class="tips red">
+      (此系统为护士人员使用，其他科室人员请勿进行操作)
+    </view>
+  </view>
+</template>
+
+<script>
+  import {
+    encryptByEnAES,
+    encryptByDeAES
+  } from '../../utils/index.js'
+  import {
+    mapActions
+  } from "vuex";
+  export default {
+    data() {
+      return {
+        username: '', //用户名
+        password: '', //密码
+        savePassword: false, //是否记住密码
+      };
+    },
+    methods: {
+      ...mapActions("user", ["vxLogin"]),
+      // 登录
+      login(e) {
+        let {
+          username, //账号
+          password, //密码
+          savePassword //是否记住密码
+        } = e.detail.value;
+
+        savePassword = savePassword.length > 0;
+        username = username.trim();
+        password = password.trim();
+
+        // 用户名，密码,域名(ip)不能为空
+        if (username === "" || password === "") {
+          uni.showToast({
+            icon: "none",
+            title: "账号或密码错误",
+          });
+          return;
+        }
+
+        uni.showLoading({
+          title: "登录中",
+          mask: true,
+        });
+
+        let postData = {
+          username,
+          password,
+          type: 'APP'
+        };
+
+        this.vxLogin(postData).then((res) => {
+          uni.hideLoading();
+
+          if (res.status == 200) {
+            //获取角色信息
+            let role = res.user.user.role;
+            // 护士角色才能登录
+            let nurseRole = role.some((item) => item.rolecode === "nurse");
+            if (!nurseRole) {
+              uni.showToast({
+                icon: "none",
+                title: "暂无护士角色权限！",
+              });
+              return;
+            }
+            // 如果记住密码,则缓存到本地
+            if (savePassword) {
+              //记住密码
+              uni.setStorageSync("savePasswordObj", {
+                username: encryptByEnAES(username), //用户名
+                password: encryptByEnAES(password), //密码
+                effectiveDuration: Date.now(), //当前时间戳
+              })
+            } else {
+              uni.removeStorageSync('savePasswordObj');
+            }
+            // 跳转到首页
+            uni.navigateTo({
+              url: '../index/index'
+            })
+
+          } else {
+            uni.showToast({
+              icon: "none",
+              title: res.remarks || "登录失败",
+            });
+          }
+        });
+      },
+    },
+    onLoad() {
+      // 是否记住密码
+      let savePasswordObj = uni.getStorageSync("savePasswordObj");
+      if (savePasswordObj) {
+        console.log(savePasswordObj);
+        let {
+          username,
+          password,
+          effectiveDuration
+        } = savePasswordObj;
+        if (Date.now() - effectiveDuration < 10 * 24 * 60 * 60 * 1000) {
+          //记住密码,10天内有效
+          this.username = encryptByDeAES(username);
+          this.password = encryptByDeAES(password);
+          this.savePassword = true;
+        }
+      }
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .login {
+    padding: 180rpx 32rpx 32rpx;
+    height: 100vh;
+    background: url("../../static/imgs/background.png") no-repeat center bottom;
+    background-size: contain;
+
+    .login_title {
+      text-align: center;
+      color: $defaultColor;
+      font-weight: bold;
+    }
+
+    .form {
+      .form_item {
+        margin-top: 32rpx;
+        @include flex;
+
+        .form_title {
+          @include flex(flex-start, center);
+          width: 140rpx;
+
+          .placeholder {
+            display: inline-block;
+            width: 1em;
+          }
+        }
+
+        .form_input {
+          box-sizing: content-box;
+          flex: 1;
+          padding: 16rpx;
+          background-color: #fff;
+        }
+      }
+
+      .form_submit {
+        margin-top: 60rpx;
+        border-radius: 16rpx;
+
+        uni-button {
+          @include btn_background;
+          color: #fff;
+          font-weight: bold;
+        }
+      }
+    }
+
+    .tips {
+      font-size: 28rpx;
+      margin-top: 16rpx;
+    }
+  }
+</style>

request/config.js

@@ -11,8 +11,8 @@ const config = {
 };
 // 后端服务地址
 const baseUrls = {
-  development: "http://itsmpoc.dashitech.com/service", //开发环境
-  production: "http://itsmpoc.dashitech.com/service", //生产环境
+  development: "http://192.168.3.108/service", //开发环境
+  production: "http://192.168.3.108/service", //生产环境
 };
 config.baseUrl = baseUrls[process.env.NODE_ENV];
 export default config;

request/demo.js

@@ -1,6 +0,0 @@
-import { request } from "./index.js";
-// 测试接口
-export const reqGetData = () =>
-  request({
-    url: "/auth/getSysName",
-  });

request/user.js

@@ -0,0 +1,10 @@
+import {
+  request
+} from "./index.js";
+// 测试接口
+export const reqLogin = (postData) =>
+  request({
+    url: "/auth/login",
+    data: postData,
+    method: 'POST'
+  });

store/index.js

@@ -8,7 +8,7 @@
 import Vue from "vue";
 import Vuex from "vuex";
 
-import demo from "@/store/modules/demo";
+import user from "@/store/modules/user";
 
 Vue.use(Vuex);
 
@@ -25,7 +25,7 @@ const myPlugin = (store) => {
 
 export default new Vuex.Store({
   modules: {
-    demo,
+    user,
   },
   plugins: [myPlugin],
 });

store/modules/demo.js

@@ -1,25 +0,0 @@
-import { reqGetData } from "@/request/demo.js";
-const state = {
-  dataList: [],
-};
-const getters = {};
-const mutations = {
-  // 获取三级导航
-  getData(state, dataList) {
-    state.dataList = dataList;
-  },
-};
-const actions = {
-  async getData({ commit, state }) {
-    console.log(state);
-    let result = await reqGetData();
-    commit("getData", result.data);
-  },
-};
-export default {
-  namespaced: true,
-  state,
-  getters,
-  mutations,
-  actions,
-};

store/modules/user.js

@@ -0,0 +1,30 @@
+import {
+  reqLogin
+} from "@/request/user.js";
+const state = {
+  loginInfo: {},
+};
+const getters = {};
+const mutations = {
+  vxLogin(state, args) {
+    state.loginInfo = args;
+  },
+};
+const actions = {
+  async vxLogin({
+    commit
+  }, args) {
+    let result = await reqLogin(args);
+    if (result.status == 200) {
+      commit("vxLogin", result.user);
+    }
+    return result;
+  },
+};
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions,
+};

uni.scss

@@ -22,3 +22,26 @@ $textColorRed: #ff3b53;
   align-items: $alignItem;
   flex-direction: $flexDirection;
 }
+// 按钮背景色
+@mixin btn_background {
+  background-image: linear-gradient(90deg,#72c172,#3bb197);
+}
+
+// 全局样式
+.red {
+  color: $textColorRed;
+}
+.green {
+  color: $defaultColor;
+}
+// 内置复选框 start
+.uni-label-pointer{
+  @include flex;
+}
+uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
+    border-color: $defaultColor;
+}
+.uni-checkbox-input-checked{
+  color: $defaultColor !important;
+}
+// 内置复选框 end

utils/index.js

@@ -0,0 +1,24 @@
+import {
+  AES,
+  mode,
+  pad,
+  enc
+} from "crypto-js";
+//aes加密
+export function encryptByEnAES(data) {
+  let Key = "dsadmin";
+  let tmpAES = AES.encrypt(data, Key, {
+    mode: mode.CBC,
+    padding: pad.Pkcs7,
+  });
+  return tmpAES.toString();
+}
+//aes解密
+export function encryptByDeAES(data) {
+  let Key = "dsadmin";
+  let tmpDeAES = AES.decrypt(data, Key, {
+    mode: mode.CBC,
+    padding: pad.Pkcs7,
+  });
+  return tmpDeAES.toString(enc.Utf8);
+}