login.uvue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  1. <template>
  2. <view class=" normal-login-container my-page">
  3. <view class="logo-content align-center justify-center flex">
  4. <image class="my-image" style="width: 150rpx;height: 150rpx;" :src="(globalConfig['appInfo'] as UTSJSONObject)['logo'] as string" mode="widthFix">
  5. </image>
  6. <text class="title">系统登录</text>
  7. </view>
  8. <view class=" login-form-content">
  9. <view class=" input-item flex align-center uni-row">
  10. <view class=" icon"></view>
  11. <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
  12. </view>
  13. <view class=" input-item flex align-center uni-row">
  14. <view class="icon"></view>
  15. <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
  16. </view>
  17. <!--
  18. <view class="input-item flex align-center uni-row" style="width: 60%;margin-top: 10px;" v-if="captchaEnabled">
  19. <view class=" iconfont icon-code icon"></view>
  20. <input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
  21. <view class=" login-code">
  22. <image :src="codeUrl" @click="getCode" class="login-code-img my-image"></image>
  23. </view>
  24. </view> -->
  25. <view>
  26. <button @click="handleLogin" class="login-btn block bg-blue lg round">登录</button>
  27. </view>
  28. <view class=" reg" v-if="register">
  29. <text class="text-grey1">没有账号?</text>
  30. <text @click="handleUserRegister" class="text-blue">立即注册</text>
  31. </view>
  32. <view class=" xieyi justify-center flex uni-row">
  33. <text class="text-grey1 font-14">登录即代表同意</text>
  34. <text @click="handleUserAgrement" class="text-blue font-14">《用户协议》</text>
  35. <text @click="handlePrivacy" class="text-blue font-14">《隐私协议》</text>
  36. </view>
  37. </view>
  38. </view>
  39. </template>
  40. <script lang="uts">
  41. import { GlobalConfig } from '../config'
  42. import { getCodeImg } from '@/api/login'
  43. import {Login,GetInfo, SetName, SetUserName} from '@/store'
  44. type LoginForm={
  45. username: string,
  46. password: string,
  47. code: string,
  48. uuid: string
  49. }
  50. export default {
  51. data() {
  52. return {
  53. codeUrl: "" as string,
  54. captchaEnabled: false as boolean,
  55. // 用户注册开关
  56. register: false as boolean,
  57. globalConfig: getApp().globalData.config as UTSJSONObject,
  58. loginForm: {
  59. username: "admin",
  60. name: "管理员",
  61. password: "admin123",
  62. code: "",
  63. uuid: ''
  64. } as UTSJSONObject
  65. }
  66. },
  67. created() {
  68. //this.getCode()
  69. },
  70. methods: {
  71. // 用户注册
  72. handleUserRegister() {
  73. uni.redirectTo({
  74. url: '/pages/register'
  75. });
  76. },
  77. // 隐私协议
  78. handlePrivacy() {
  79. let appInfo = this.globalConfig['appInfo'] as UTSJSONObject;
  80. let agreements = appInfo['agreements'] as UTSJSONObject[];
  81. let site = agreements[0] as UTSJSONObject;
  82. uni.navigateTo({
  83. url: `/pages/common/webview/index?title=${site.title}&url=${site.url}`
  84. });
  85. },
  86. // 用户协议
  87. handleUserAgrement() {
  88. let appInfo = this.globalConfig['appInfo'] as UTSJSONObject;
  89. let agreements = appInfo['agreements'] as UTSJSONObject[];
  90. let site = agreements[1] as UTSJSONObject;
  91. uni.navigateTo({
  92. url: `/pages/common/webview/index?title=${site.title}&url=${site.url}`
  93. });
  94. },
  95. // 登录方法
  96. async handleLogin() {
  97. if (this.loginForm.username === "") {
  98. uni.showToast({
  99. title: '请输入您的账号',
  100. icon: 'error',
  101. duration: 2000
  102. });
  103. } else if (this.loginForm.password === "") {
  104. uni.showToast({
  105. title: '请输入您的密码',
  106. icon: 'error',
  107. duration: 2000
  108. });
  109. }
  110. else {
  111. uni.showLoading({
  112. title: '登录中,请耐心等待...'
  113. });
  114. this.pwdLogin()
  115. }
  116. },
  117. // 密码登录
  118. async pwdLogin() {
  119. Login(this.loginForm).then(() => {
  120. uni.hideLoading();
  121. this.loginSuccess()
  122. }).catch((e) => {
  123. uni.hideLoading();
  124. console.log(e)
  125. uni.showToast({
  126. title: e as string,
  127. icon: 'error',
  128. duration: 2000
  129. });
  130. if (this.captchaEnabled) {
  131. //this.getCode()
  132. }
  133. })
  134. },
  135. // 登录成功后,处理函数
  136. loginSuccess() {
  137. // 设置用户信息
  138. GetInfo().then((res:UTSJSONObject) => {
  139. uni.reLaunch({
  140. url: '/pages/work/index'
  141. });
  142. })
  143. }
  144. }
  145. }
  146. </script>
  147. <style lang="scss">
  148. .my-page {
  149. background-color: #ffffff;
  150. width: 100%;
  151. height: 100%;
  152. }
  153. .normal-login-container {
  154. width: 100%;
  155. align-items: center;
  156. justify-content: center;
  157. .logo-content {
  158. width: 100%;
  159. padding-top: 15%;
  160. .my-image {
  161. border-radius: 4px;
  162. }
  163. .title {
  164. text-align: center;
  165. margin-left: 10px;
  166. font-size: 21px;
  167. margin-top: 15rpx;
  168. }
  169. }
  170. .login-form-content {
  171. /* #ifdef APP-NVUE */
  172. text-align: center;
  173. /* #endif */
  174. margin: 20px auto;
  175. margin-top: 15%;
  176. width: 80%;
  177. .input-item {
  178. margin: 10px 0;
  179. background-color: #f5f6f7;
  180. height: 45px;
  181. border-radius: 20px;
  182. .icon {
  183. /* #ifdef APP-NVUE */
  184. font-size: 38rpx;
  185. color: #999;
  186. /* #endif */
  187. // margin-left: 10px;
  188. }
  189. .input {
  190. width: 100%;
  191. font-size: 14px;
  192. /* #ifdef APP-NVUE */
  193. line-height: 20px;
  194. /* #endif */
  195. text-align: left;
  196. padding-left: 15px;
  197. }
  198. }
  199. .login-btn {
  200. margin-top: 30px;
  201. height: 45px;
  202. }
  203. .reg {
  204. margin-top: 15px;
  205. flex-direction: row;
  206. }
  207. .xieyi {
  208. /* #ifdef APP-NVUE */
  209. color: #333;
  210. /* #endif */
  211. margin-top: 20px;
  212. }
  213. .login-code {
  214. height: 38px;
  215. width: 200rpx;
  216. .login-code-img {
  217. height: 38px;
  218. position: fixed;
  219. margin-left: -20px;
  220. width: 200rpx;
  221. }
  222. }
  223. }
  224. }
  225. </style>