login页面

components/com-button/com-button.vue

@@ -0,0 +1,102 @@
+<template>
+	<view 
+	  :class="{'com-button': true, 'default': defaultClass }" 
+		:style="{width: btnWidth, height: btnHeight, borderRadius: btnRadius,background:background}"
+		 @click="btnClick">
+		<text class="btn-text" :style="{fontSize: fSize}">{{ btnText }}</text>
+	</view>
+</template>
+
+<script>
+	export default {
+		props:{
+			width: { // 按钮宽度(直接写设计稿量取大小即可
+				type: Number,
+				default: () => {
+					return  160 
+				}
+			},
+			height: { // 按钮宽度(直接写设计稿量取大小即可
+				type: Number,
+				default: () => {
+					return  64 
+				}
+			},
+			btnText: {
+				type: String,
+				default: () => {
+					return  '完成' 
+				}
+			},
+			fontSize: {
+				type: Number,
+				default: () => {
+					return  28 
+				}
+			},
+			type: {
+				type: String,
+				default: () => {
+					return 'pramary' 
+				}
+			},
+			background: {
+				type: String,
+				default: () => {
+					return 'linear-gradient(90deg, #3377FF 0%, #4D97FF 100%)' 
+				}
+			}
+		},
+		computed: {
+			btnWidth() {
+				return this.width * 750 / 1200 + 'rpx';
+			},
+			btnHeight() {
+				return this.height * 750 / 1200 + 'rpx';
+			},
+			btnRadius() {
+				return this.height / 2 * 750 / 1200 + 'rpx';
+			},	
+			fSize() {
+				return this.fontSize * 750 / 1200 + 'rpx';
+			},
+			defaultClass() {
+				return this.type === 'default' ? true : false
+			},
+		},
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			btnClick() {
+				this.$emit('btnClick')
+			}
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.com-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 62.5rpx;
+		height: 31.25rpx;
+		background: linear-gradient(90deg, #3377FF 0%, #4D97FF 100%);
+		border-radius: 37.5rpx;
+		overflow: hidden;
+		color: #FFFFFF;
+		
+		.btn-text {
+			font-size: 10.93rpx;
+		}
+	}
+	
+	.default {
+		background: #E6EAF2;
+		color: #7A8599;
+	}
+
+</style>

package-lock.json

@@ -1,9 +1,14 @@
 {
-  "name": "web_nurseside",
+  "name": "web_TracerMethodology",
   "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "crypto-js": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.0.0.tgz",
+      "integrity": "sha512-bzHZN8Pn+gS7DQA6n+iUmBfl0hO5DJq++QP3U6uTucDtk/0iGpXd/Gg7CGR0p8tJhofJyaKoWBuJI4eAO00BBg=="
+    },
     "moment": {
       "version": "2.29.1",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",

package.json

@@ -4,6 +4,7 @@
   "description": "---\r 1. 公共样式写在App.vue;\r 2. 【pages/index】是公共页，包括左侧信息栏、顶部导航栏、添加按钮，也是所有页面的入口。",
   "main": "main.js",
   "dependencies": {
+    "crypto-js": "^4.0.0",
     "moment": "^2.29.1",
     "qs": "^6.9.6",
     "uview-ui": "^1.8.3",

pages.json

@@ -1,27 +1,30 @@
 {
-  "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-    {
-      "path": "pages/index/index"
-    }
-  ],
-  "globalStyle": {
-    "navigationBarTitleText": "追踪方法学",
-    "navigationStyle": "custom",
-    "style": {
-      "app-plus": {
-        "background": "#2D43B3"
-      }
-    },
-    "rpxCalcMaxDeviceWidth": 9999
-  },
-  "condition": { //模式配置，仅开发期间生效
-    "current": 0, //当前激活的模式(list 的索引项)
-    "list": [
-      {
-        "name": "开发模式", //模式名称
-        "path": "pages/index/index", //启动页面，必选
-        "query": "" //启动参数，在页面的onLoad函数里面得到
-      }
-    ]
-  }
-}
+	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		{
+			"path": "pages/login/login"
+
+		},
+		{
+			"path": "pages/index/index"
+		}
+
+	],
+	"globalStyle": {
+		"navigationBarTitleText": "追踪方法学",
+		"navigationStyle": "custom",
+		"style": {
+			"app-plus": {
+				"background": "#2D43B3"
+			}
+		},
+		"rpxCalcMaxDeviceWidth": 9999
+	},
+	"condition": { //模式配置，仅开发期间生效
+		"current": 0, //当前激活的模式(list 的索引项)
+		"list": [{
+			"name": "开发模式", //模式名称
+			"path": "pages/index/index", //启动页面，必选
+			"query": "" //启动参数，在页面的onLoad函数里面得到
+		}]
+	}
+}

pages/login/login.vue

@@ -0,0 +1,111 @@
+<template>
+	<view class="login-model">
+		<view class="com-model">
+			<view class="top-box">
+				<image class="pic" src="/static/images/底纹.png"></image>
+				<text class="title-top">你好，</text>
+				<text class="title-buttom">欢迎使用追踪方法学系统</text>
+			</view>
+			<view class="main-content">
+				<input class="uni-input-box"
+				  placeholder="请输入账号"
+					placeholder-style="color: #A1A7B3"
+					v-model="username" />
+				<input class="uni-input-box"
+				  placeholder="请输入密码"
+					placeholder-style="color: #A1A7B3"
+					password
+					v-model="password" />
+				<com-button class="login-button"  
+					:width="998" :height="120" :fontSize="48" :background="isLogin?'#A3B1CC':''" btnText="登录" @btnClick="login" />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import encryption from "../../utils/crypto.js";
+	export default {
+		data() {
+			return {
+				username: '', // 用户名
+				password: '' // 密码
+			}
+		},
+		methods: {
+			login() {
+				if(this.isLogin) return
+				this.$store.dispatch({
+					type: 'login/commActions',
+					payload: {
+						key: 'login',
+						data: {
+							username: encryption(this.username),
+							password: encryption(this.password)
+						}
+					}
+				}).then((data) => {
+					if (data) {
+						uni.setStorageSync('token', data.hiId);
+						uni.setStorageSync('token', data.permissions);
+			      uni.setStorageSync('token', data.token);
+					  uni.setStorageSync('token', data.nowPermission);
+					}
+				});
+			}
+		},
+		computed:{
+			//判断是否输入了用户名和密码
+			isLogin(){
+				return !this.username || !this.password;
+			}
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+ .pic{
+	 height: 281.25rpx;
+	 width: 430rpx;
+	 float: right;
+ }
+ .title-top{
+	 height: 45rpx;
+	 font-size: 45rpx;
+	 font-weight: bold;
+	 margin-top: 250rpx;
+	 margin-left: 62.5rpx;
+	 font-family: SourceHanSansCN-Bold, SourceHanSansCN;
+	 color: #2E2F33;
+	 float: left;
+ }
+ .title-buttom{
+	 height: 45rpx;
+	 font-size: 45rpx;
+	 font-family: SourceHanSansCN-Bold, SourceHanSansCN;
+	 font-weight: bold;
+	 color: #2E2F33;
+	 float: left;
+	 margin-left: 62.5rpx;
+	 margin-top: 40rpx;
+ }
+ .main-content{
+	 margin-top: 37.5rpx;
+	 float: left;
+ }
+ .uni-input-box{
+	 width: 625rpx;
+	 float: left;
+	 margin-left: 62.5rpx;
+	 margin-top: 62.5rpx;
+	 font-size: 30rpx;
+	 padding-bottom: 25rpx;
+	 border-bottom:1.25rpx solid #E6EAF2 ;
+ }
+ .login-button{
+	  float: left;
+	  margin-left: 62.5rpx;
+	  margin-top: 62.5rpx;
+	  background-color: #A3B1CC;
+ }
+</style>

pages/login/model.js

@@ -0,0 +1,14 @@
+import { commServer } from './server.js';
+
+export default {
+  namespaced: true,
+  state: {
+  },
+  mutations: {},
+  actions: {
+		commActions({ commit, state }, { payload }) {
+			// payload = {key,data} // data是请求数据，key是请求接口id
+      return commServer(payload);
+		},
+  }
+}

pages/login/server.js

@@ -0,0 +1,13 @@
+import { creatRequest } from '../../utils/request.js';
+
+const requestList = {
+  //登录
+  login: {
+    method: 'POST',
+    url: 'imed/pfm/login/in'
+  },
+};
+export const commServer = ({ key, data }) => {
+  let obj = requestList[key];
+  return creatRequest(obj, data);
+}

pages/model.js

@@ -1,5 +1,7 @@
 import index from './index/model.js';
+import login from './login/model.js';
 
 export default module = {
   index,
+	login
 }

utils/crypto.js

@@ -0,0 +1,16 @@
+//传参加密
+// import CryptoJS from 'crypto-js';
+var CryptoJS = require("crypto-js");
+
+function encryption(params) {
+  let key = CryptoJS.enc.Utf8.parse('&qsh9li1KxZa9la@')
+  let iv = CryptoJS.enc.Utf8.parse('&qsh9li1KxZa9la@')
+  let srcs = CryptoJS.enc.Utf8.parse(params)
+  let result = CryptoJS.AES.encrypt(srcs, key, {
+    iv,
+    mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7
+  }).toString()
+  return result
+};
+
+export default encryption;

utils/request.js

@@ -8,7 +8,7 @@
 import { URL } from "./requestUrl";
 import { stringify } from 'qs';
 
-const BASE_URL = `${URL}/topro/`;
+const BASE_URL = `${URL}/`;
 let AllRequestNum = 0; // 存放请求数，以保证有请求未返回就持续loading
 
 /**