抖音小程序发布平台
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
 
 

306 строки
6.5 KiB

  1. <template>
  2. <div class="bg">
  3. <div class="login">
  4. <el-form
  5. :model="ruleForm2"
  6. status-icon
  7. :rules="rules2"
  8. ref="ruleForm2"
  9. class="demo-ruleForm login_form"
  10. >
  11. <h1>小程序第三方管理平台</h1>
  12. <el-form-item class="inputs" label="" prop="username">
  13. <el-input
  14. v-model.number="ruleForm2.username"
  15. placeholder="请输入账号"
  16. ></el-input>
  17. </el-form-item>
  18. <el-form-item class="inputs" label="" prop="password">
  19. <el-input
  20. type="password"
  21. v-model="ruleForm2.password"
  22. auto-complete="off"
  23. placeholder="请输入密码"
  24. ></el-input>
  25. </el-form-item>
  26. <el-form-item class="inputs" label="" prop="captcha">
  27. <el-input
  28. v-model="ruleForm2.captcha"
  29. @keydown.enter.native="login('ruleForm2')"
  30. auto-complete="off"
  31. placeholder="看不清?点击图片刷新"
  32. >
  33. </el-input>
  34. <div class="refreImg">
  35. <img alt="" :src="src" @click="refreshCode" />
  36. </div>
  37. </el-form-item>
  38. <el-form-item>
  39. <el-button
  40. class="login-btn"
  41. :loading="submitButton"
  42. type="primary"
  43. @click="login('ruleForm2')"
  44. >登录</el-button
  45. >
  46. </el-form-item>
  47. </el-form>
  48. <div
  49. style="position: absolute;top: 96%;right: 2%;color: #fff;"
  50. id="_version"
  51. ></div>
  52. </div>
  53. </div>
  54. </template>
  55. <script>
  56. import AjaxUtil from "../../core/tool/ajaxService";
  57. import Util from "../../core/tool/commonUtil";
  58. import { configUrl } from "./../../utils/config.js";
  59. export default {
  60. extends: AjaxUtil,
  61. name: "Login",
  62. data() {
  63. return {
  64. submitButton: false,
  65. src: "",
  66. ruleForm2: {
  67. username: "",
  68. password: "",
  69. captcha: "",
  70. },
  71. rules2: {
  72. username: [
  73. {
  74. required: true,
  75. message: "抱歉,不能识别您输入的账号",
  76. trigger: "blur",
  77. },
  78. ],
  79. password: [
  80. {
  81. required: true,
  82. message: "抱歉,不能识别您输入的密码",
  83. trigger: "blur",
  84. },
  85. ],
  86. captcha: [
  87. {
  88. required: true,
  89. message: "抱歉,不能识别您输入的验证码",
  90. trigger: "blur",
  91. },
  92. ],
  93. },
  94. };
  95. },
  96. methods: {
  97. login: function() {
  98. this.submitButton = true;
  99. let name = this.ruleForm2.username;
  100. let pwd = this.ruleForm2.password;
  101. let captcha = this.ruleForm2.captcha;
  102. this.postFetch(configUrl.doLogin, {
  103. username: name,
  104. password: pwd,
  105. captcha: captcha,
  106. })
  107. .then((d) => {
  108. console.log(d);
  109. this.submitButton = false;
  110. this.showNotify(
  111. "success",
  112. "欢迎进入小程序第三方管理平台",
  113. "登录成功"
  114. );
  115. Util.cookie.setCookie("uname", d.data.username);
  116. this.$router.push({
  117. path: "/layout",
  118. });
  119. })
  120. .catch((err) => {
  121. this.submitButton = false;
  122. this.refreshCode();
  123. this.$message.error(err.data);
  124. });
  125. },
  126. refreshCode: function() {
  127. this.src = configUrl.captcha + "?t=" + Date();
  128. console.log(this.src);
  129. },
  130. },
  131. created() {
  132. this.refreshCode();
  133. },
  134. mounted() {
  135. let metas = document.getElementsByTagName("meta");
  136. let version = "";
  137. for (let index = 0; index < metas.length; index++) {
  138. if (metas[index].getAttribute("name") == "version") {
  139. version = metas[index].getAttribute("content");
  140. break;
  141. }
  142. }
  143. console.log(configUrl.getversion, "configUrl.getversion");
  144. this.getFetch(configUrl.getversion)
  145. .then((d) => {
  146. console.log(d, 22222);
  147. document.getElementById("_version").innerHTML =
  148. "version:" + version.substr(4) + "." + d.data.split("_")[1];
  149. })
  150. .catch((e) => {
  151. document.getElementById("_version").innerHTML =
  152. "version:" + version.substr(4);
  153. });
  154. },
  155. };
  156. </script>
  157. <style scoped>
  158. .qrcode {
  159. width: 36px;
  160. position: absolute;
  161. right: 7px;
  162. top: 5px;
  163. z-index: 1000;
  164. }
  165. #login_container {
  166. position: absolute;
  167. left: 0;
  168. right: 0;
  169. margin: auto;
  170. top: 0;
  171. bottom: 0;
  172. }
  173. .inputs {
  174. width: 315px;
  175. height: 44px;
  176. margin: 0 auto 22px;
  177. line-height: 44px;
  178. }
  179. .el-input__inner {
  180. font-size: 16px !important;
  181. color: rgb(0, 0, 0, 0.25) !important;
  182. padding: 0 35px !important;
  183. }
  184. .refreImg img {
  185. width: 100%;
  186. height: 100%;
  187. border-radius: 2px;
  188. cursor: pointer;
  189. }
  190. a {
  191. text-decoration: none;
  192. }
  193. .frechBox {
  194. display: block;
  195. margin-top: -10px;
  196. }
  197. .refreImg {
  198. width: 38.2%;
  199. height: 40px;
  200. /* line-height: 20px; */
  201. position: absolute;
  202. z-index: 1000;
  203. right: 0;
  204. top: -1px;
  205. background-color: #ededed;
  206. }
  207. .bg {
  208. background: url(../../static/images/login-bg.png) no-repeat;
  209. position: fixed;
  210. top: 0;
  211. left: 0;
  212. right: 0;
  213. bottom: 0;
  214. background-size: cover;
  215. }
  216. .login h1 {
  217. font-size: 22px;
  218. font-weight: 400;
  219. color: rgba(85, 85, 85, 1);
  220. line-height: 24px;
  221. margin-bottom: 28px;
  222. }
  223. .login-item {
  224. width: 368px;
  225. margin: 0 auto;
  226. height: 40px;
  227. margin-bottom: 16px;
  228. border: 1px solid #d9d9d9;
  229. border-radius: 4px;
  230. box-sizing: border-box;
  231. overflow: hidden;
  232. position: relative;
  233. }
  234. .login-item input {
  235. width: 100%;
  236. line-height: 38px;
  237. background: #fff;
  238. font-size: 16px;
  239. color: rgba(0, 0, 0, 0.25);
  240. padding: 0 0 0 36px;
  241. display: block;
  242. border: none;
  243. outline: none;
  244. }
  245. .login-btn {
  246. width: 315px;
  247. line-height: 44px;
  248. background: #3fc497;
  249. text-align: center;
  250. border-radius: 4px;
  251. font-size: 16px;
  252. color: #fff;
  253. padding: 0;
  254. border: none;
  255. cursor: pointer;
  256. margin: 0 auto;
  257. }
  258. .forgot-password {
  259. color: rgba(24, 144, 255, 1);
  260. width: 368px;
  261. margin: 0 auto;
  262. text-align: right;
  263. line-height: 22px;
  264. margin-bottom: 4px;
  265. }
  266. .forgot-password label {
  267. font-weight: 400 !important;
  268. font-size: 14px;
  269. cursor: pointer;
  270. margin-right: 26px;
  271. color: #555;
  272. }
  273. .el-input__inner {
  274. font-size: 16px !important;
  275. color: rgb(0, 0, 0, 0.25) !important;
  276. padding: 0 35px !important;
  277. }
  278. .login {
  279. background: #f9fafc;
  280. border-radius: 6px;
  281. overflow: hidden;
  282. width: 375px;
  283. position: relative;
  284. left: 50%;
  285. top: 50%;
  286. height: 340px;
  287. transform: translate(-50%, -50%);
  288. -webkit-transform: translate(-50%, -50%);
  289. box-shadow: 0px 3px 24px 0px rgba(0, 0, 0, 0.24);
  290. }
  291. </style>