login.vue 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454
  1. <template>
  2. <view class="content">
  3. <view class="info_bg">
  4. <image src="../../static/management/login-bg.png" class="bgImg"></image>
  5. <div class="title">
  6. <image src="../../static/management/logo.svg"></image>
  7. <!-- <text>双碳感知资产运营管理平台</text> -->
  8. <text>传能</text>
  9. </div>
  10. </view>
  11. <view class="form-box">
  12. <view class="loginTxt">登录</view>
  13. <view class="row-input">
  14. <u-icon
  15. name="account"
  16. color="#2979ff"
  17. size="50"
  18. style="padding: 0 20rpx"
  19. ></u-icon>
  20. <input
  21. v-model="account"
  22. placeholder="请输入用户账号"
  23. maxlength="18"
  24. clearable
  25. />
  26. </view>
  27. <view class="row-input">
  28. <u-icon
  29. name="lock"
  30. color="#2979ff"
  31. size="50"
  32. style="padding: 0 20rpx"
  33. ></u-icon>
  34. <input
  35. v-model="password"
  36. placeholder="登陆密码"
  37. clearable
  38. :password="!isShowPassword"
  39. />
  40. <u-icon
  41. name="eye-fill"
  42. color="#2979ff"
  43. size="50"
  44. style="padding-right: 20rpx"
  45. v-if="isShowPassword"
  46. @click="showOrHide"
  47. ></u-icon>
  48. <u-icon
  49. name="eye-off"
  50. color="#2979ff"
  51. size="50"
  52. style="padding-right: 0rpx"
  53. v-else
  54. @click="showOrHide"
  55. >
  56. </u-icon>
  57. </view>
  58. <view class="Userprotocols">
  59. <view class="Userprotocolchecked">
  60. <checkbox :checked="rememberPsw" @click="checkboxChange" />
  61. </view>
  62. <view class="Userprotocoltext">记住账号密码</view>
  63. </view>
  64. <view class="Userprotocol">
  65. <view class="Userprotocolchecked">
  66. <checkbox
  67. :checked="isChecked"
  68. @click="isChecked = !isChecked"
  69. style="transform: scale(0.7)"
  70. ></checkbox>
  71. </view>
  72. <view class="Userprotocoltext">我已阅读并同意 <span @click="useragement">用户协议</span> 和 <span @click="Userprotocol">隐私政策</span> </view
  73. >
  74. </view>
  75. <view class="login-btn" @click="loginbtn">登录</view>
  76. </view>
  77. <u-toast ref="uToast" />
  78. </view>
  79. </template>
  80. <script>
  81. export default {
  82. data() {
  83. return {
  84. isChecked: true,
  85. rememberPsw:true,
  86. isShowPassword: false,
  87. account: "",
  88. password: "",
  89. captcha: "",
  90. uuid: "",
  91. captchaPath: "",
  92. };
  93. },
  94. onLoad() {
  95. // this.getCaptcha();
  96. //this.getDeviceInfo();
  97. //this.getOAID();
  98. },
  99. onUnload() {
  100. //触发水印显示
  101. uni.$emit("ly-show-watermark");
  102. },
  103. mounted() {//记住密码
  104. //缓存的账号
  105. const HBusername = uni.getStorageSync('HBusername');
  106. //缓存的密码
  107. const HBpassword = uni.getStorageSync('HBpassword');
  108. //console.log("缓存的账号:"+HBusername)
  109. //console.log("缓存的密码:"+HBpassword)
  110. //有缓存就赋值给文本没有就清空
  111. if (HBusername && HBpassword) {
  112. this.account = HBusername;
  113. this.password = HBpassword;
  114. } else {
  115. this.account = '';
  116. this.password = '';
  117. }
  118. //自动登录
  119. },
  120. methods: {
  121. getDeviceInfo(){
  122. plus.device.getInfo({
  123. success:function(e){
  124. console.log('getDeviceInfo success: '+JSON.stringify(e));
  125. },
  126. fail:function(e){
  127. console.log('getDeviceInfo failed: '+JSON.stringify(e));
  128. }
  129. });
  130. },
  131. getOAID(){
  132. plus.device.getOAID({
  133. success:function(e){
  134. console.log('getOAID success: '+JSON.stringify(e));
  135. },
  136. fail:function(e){
  137. console.log('getOAID failed: '+JSON.stringify(e));
  138. }
  139. });
  140. },
  141. //复选框
  142. checkboxChange: function(e) {
  143. this.rememberPsw=!this.rememberPsw;
  144. console.log('111111111111111111',this.rememberPsw)
  145. if (this.rememberPsw == true) {
  146. //获取缓存的账号 赋值
  147. uni.getStorageSync('HBusername',this.account);
  148. uni.getStorageSync('HBpassword',this.password);
  149. } else {//销毁
  150. uni.removeStorageSync('HBusername');
  151. uni.removeStorageSync('HBpassword');
  152. }
  153. },
  154. loginbtn() {
  155. if (this.account == "") {
  156. this.$refs.uToast.show({
  157. type: "error",
  158. message: "请输入账号",
  159. });
  160. return false
  161. } else if (this.password == "") {
  162. this.$refs.uToast.show({
  163. type: "error",
  164. message: "请同意用户协议和隐私政策",
  165. });
  166. return false
  167. }
  168. let formData = {
  169. username: this.account,
  170. password: this.password,
  171. };
  172. //登录功能
  173. this.$api.post("/login", formData).then((res) => {
  174. if (res.data.code == 0) {
  175. uni.setStorageSync("tokendata", res.data.data.token); //token
  176. uni.setStorageSync("Userinformation", formData); //用户信息
  177. //获取用户的信息,如组织架构,个人信息,权限等
  178. Promise.all([
  179. this.getpermissions(),
  180. this.getDictList(),
  181. this.getuserInfo(),
  182. ]).then(() => {
  183. uni.navigateTo({
  184. url: "/pages/index/index",
  185. });
  186. });
  187. return false
  188. } else if (this.password == "") {
  189. this.$refs.uToast.show({
  190. type: "error",
  191. message: "请输入密码",
  192. });
  193. return false
  194. }
  195. let formData = {
  196. username: this.account,
  197. password: this.password,
  198. };
  199. //登录功能
  200. this.$api.post("/login", formData).then((res) => {
  201. if (res.data.code == 0) {
  202. uni.setStorageSync("tokendata", res.data.data.token); //token
  203. uni.setStorageSync("Userinformation", formData); //用户信息
  204. //勾选就缓存账号和密码
  205. if (this.rememberPsw) {
  206. uni.setStorageSync('HBusername', this.account);
  207. uni.setStorageSync('HBpassword', this.password);
  208. } else {//销毁缓存
  209. uni.removeStorageSync('HBusername');
  210. uni.removeStorageSync('HBpassword');
  211. }
  212. //获取用户的信息,如组织架构,个人信息,权限等
  213. Promise.all([
  214. this.getpermissions(),
  215. this.getDictList(),
  216. this.getuserInfo(),
  217. ]).then(() => {
  218. uni.navigateTo({
  219. url: "/pages/index/index",
  220. });
  221. });
  222. } else {
  223. this.$refs.uToast.show({
  224. type: "error",
  225. message: "账号或者密码错误,请重新输入",
  226. });
  227. }
  228. });
  229. })
  230. },
  231. getpermissions() {
  232. //获取用户权限功能
  233. return new Promise((resolve, reject) => {
  234. this.$api
  235. .get("/menu/permissions", {})
  236. .then((res) => {
  237. uni.setStorageSync("ButtonPermissions", res.data.data);
  238. resolve(res);
  239. })
  240. .catch((e) => {
  241. reject(e);
  242. });
  243. });
  244. },
  245. getDictList() {
  246. //获取字典列表, 添加并全局变量保存
  247. return new Promise((resolve, reject) => {
  248. this.$api
  249. .get("/all", {})
  250. .then((res) => {
  251. uni.setStorageSync("getDictDataList", res.data.data);
  252. resolve(res);
  253. // console.log('222222', res)
  254. })
  255. .catch((e) => {
  256. reject(e);
  257. });
  258. });
  259. },
  260. getuserInfo() {
  261. //获取用户信息
  262. return new Promise((resolve, reject) => {
  263. this.$api
  264. .get("/user/userInfo", {})
  265. .then((res) => {
  266. uni.setStorageSync("getuserInfo", res.data.data);
  267. resolve(res);
  268. })
  269. .catch((e) => {
  270. reject(e);
  271. });
  272. });
  273. },
  274. // 密码显示/密码隐藏
  275. showOrHide() {
  276. this.isShowPassword = !this.isShowPassword;
  277. },
  278. Userprotocol() {
  279. uni.navigateTo({
  280. url: "/pages/login/Privacyagreement",
  281. success: (res) => {},
  282. fail: () => {},
  283. complete: () => {},
  284. });
  285. },
  286. useragement(){
  287. uni.navigateTo({
  288. url: "/pages/login/useragree",
  289. success: (res) => {},
  290. fail: () => {},
  291. complete: () => {},
  292. });
  293. },
  294. // 找回密码
  295. forget() {
  296. uni.navigateTo({
  297. url: "/pages/login/forget",
  298. success: (res) => {},
  299. fail: () => {},
  300. complete: () => {},
  301. });
  302. },
  303. // 注册
  304. register() {
  305. uni.navigateTo({
  306. url: "/pages/login/register",
  307. success: (res) => {},
  308. fail: () => {},
  309. complete: () => {},
  310. });
  311. },
  312. },
  313. };
  314. </script>
  315. <style lang="scss">
  316. .Userprotocol{
  317. margin-top: 60rpx;
  318. display: flex;
  319. align-items: center;
  320. justify-content: flex-end;
  321. font-size: 12px;
  322. }
  323. .Userprotocols{
  324. margin-top: -30rpx;
  325. margin-right:-70rpx;
  326. display: flex;
  327. align-items: center;
  328. justify-content: flex-end;
  329. transform: scale(.75);
  330. }
  331. .Userprotocoltext{
  332. color: #5C8FFF;
  333. span{
  334. color: #a1a2a3;
  335. }
  336. }
  337. .form-box {
  338. width: 91%;
  339. background: #fff;
  340. margin: -148rpx auto 0;
  341. position: relative;
  342. z-index: 3;
  343. padding: 60rpx 40rpx 100rpx;
  344. box-sizing: border-box;
  345. border-radius: 32rpx;
  346. .loginTxt {
  347. color: #0c1935;
  348. font-size: 40rpx;
  349. margin-bottom: 80rpx;
  350. text-align: center;
  351. }
  352. .row-input {
  353. display: flex;
  354. align-items: center;
  355. height: 80rpx;
  356. background-color: #f4f7ff;
  357. border-radius: 36rpx;
  358. margin-bottom: 40rpx;
  359. padding: 0 20rpx;
  360. input {
  361. width: 460rpx;
  362. font-size: 30rpx;
  363. color: #a1a2a3;
  364. flex: 1;
  365. }
  366. }
  367. .Userprotocol{
  368. display: flex;
  369. align-items: center;
  370. justify-content: center;
  371. margin-top: 140rpx;
  372. }
  373. .login-btn {
  374. margin-top: 20rpx;
  375. font-size: 16px;
  376. letter-spacing: 7px;
  377. color: #ffffff;
  378. height: 40px;
  379. border-radius: 18px;
  380. background: #5c8fff;
  381. text-align: center;
  382. line-height: 40px;
  383. }
  384. }
  385. .content {
  386. .bgImg {
  387. width: 78%;
  388. position: absolute;
  389. left: -5px;
  390. top: 9px;
  391. z-index: 0;
  392. }
  393. .title {
  394. display: flex;
  395. align-items: center;
  396. justify-content: center;
  397. position: relative;
  398. z-index: 2;
  399. image {
  400. width: 64rpx;
  401. height: 64rpx;
  402. margin-right: 4rpx;
  403. }
  404. text {
  405. font-size: 36rpx;
  406. color: #fff;
  407. }
  408. }
  409. }
  410. .info_bg {
  411. padding-top: 60rpx;
  412. width: 100%;
  413. height: 400rpx;
  414. background: #5c8fff;
  415. border-radius: 0px 0px 32rpx 32rpx;
  416. position: relative;
  417. image {
  418. width: 272px;
  419. height: 157px;
  420. }
  421. }
  422. </style>