loginWeixin.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <template>
  2. <view class="content">
  3. <image class="logo" :src="avatarUrl"></image>
  4. <view class="title">
  5. {{nickName}}
  6. </view>
  7. <form @submit="loginwxSubmit">
  8. <view class="section">
  9. <input class="input-account" name="username" placeholder="请输入用户名" />
  10. </view>
  11. <view class="section">
  12. <input class="input-pwd" password name="password" placeholder="请输入密码" />
  13. </view>
  14. <view class="btn-area">
  15. <button type="primary" formType="submit" :loading="isLoading">绑定微信</button>
  16. </view>
  17. </form>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. import {
  23. mapState
  24. } from 'vuex';
  25. import MD5 from '@/assets/scripts/md5';
  26. export default {
  27. data() {
  28. return {
  29. nickName: '',
  30. openId: '',
  31. avatarUrl: '',
  32. pname: '',
  33. password: '',
  34. parm: {
  35. username: "",
  36. password: "",
  37. avatarUrl: "",
  38. nickName: "",
  39. openId: ""
  40. },
  41. keyEventBind: {
  42. backbutton: false, //Boolean(默认truee)关闭back按键监听
  43. menubutton: false //Boolean(默认true)关闭menu按键监听
  44. }
  45. };
  46. },
  47. onShow() {
  48. var weixinInfo = uni.getStorageSync("weixinInfo");
  49. this.nickName = weixinInfo.nickName;
  50. this.openId = weixinInfo.openId;
  51. this.avatarUrl = weixinInfo.avatarUrl;
  52. },
  53. computed: {
  54. ...mapState(['isLoading']),
  55. },
  56. methods: {
  57. loginwxSubmit(event) {
  58. uni.hideKeyboard();
  59. // const { value: loginForm } = event.detail;
  60. var username = event.detail.value.username;
  61. var pass = event.detail.value.password;
  62. var password = MD5(pass);
  63. var serverUrl = this.serverurl;
  64. this.parm['username'] = username;
  65. this.parm['password'] = password;
  66. this.parm['avatarUrl'] = this.avatarUrl;
  67. this.parm['nickName'] = this.nickName;
  68. this.parm['openId'] = this.openId;
  69. // debugger;
  70. this.$store.dispatch('loginWXCZ', this.parm)
  71. .then(data => {
  72. var result = data.message;
  73. var weixinInfo = data.data;
  74. var code = data.code;
  75. uni.setStorageSync("token", data.token);
  76. uni.setStorageSync("globalUser", weixinInfo);
  77. if (code == true) {
  78. uni.reLaunch({
  79. url: '/pages/Charts/mainStatistics',
  80. });
  81. }
  82. }, _ => void uni.stopPullDownRefresh());
  83. },
  84. },
  85. }
  86. </script>
  87. <style lang="scss">
  88. page {
  89. padding: 200upx 0 0 0;
  90. background-image: url('~@/static/backgrounds/login_bg.png');
  91. background-repeat: no-repeat;
  92. background-size: 100% 100%;
  93. position: absolute;
  94. top: 0;
  95. left: 0;
  96. right: 0;
  97. bottom: 0;
  98. .content {
  99. padding: 0 20upx;
  100. display: flex;
  101. flex-flow: column nowrap;
  102. align-items: center;
  103. .logo {
  104. width: 150upx;
  105. height: 150upx;
  106. text-align: center;
  107. margin: 50upx;
  108. }
  109. form {
  110. width: calc(100% - 100upx);
  111. padding: 50upx;
  112. .section {
  113. margin: 50upx 0;
  114. }
  115. .btn-area {
  116. margin-top: 100upx;
  117. button {
  118. background-color: $uni-color-primary;
  119. }
  120. }
  121. }
  122. }
  123. }
  124. </style>