loginWeixin.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  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. isShowLoading: false
  46. };
  47. },
  48. onShow() {
  49. var weixinInfo = uni.getStorageSync("weixinInfo");
  50. this.nickName = weixinInfo.nickName;
  51. this.openId = weixinInfo.openId;
  52. this.avatarUrl = weixinInfo.avatarUrl;
  53. },
  54. computed: {
  55. ...mapState(['isLoading']),
  56. },
  57. methods: {
  58. loginwxSubmit(event) {
  59. console.log("yy");
  60. if (!this.isShowLoading) {
  61. uni.showLoading({
  62. title: '加载中',
  63. icon: 'loading',
  64. })
  65. this.isShowLoading = true;
  66. }
  67. if (this.isShowLoading) {
  68. uni.hideLoading()
  69. this.isShowLoading = false;
  70. }
  71. // if (this.isShowLoading) {
  72. // uni.hideLoading()
  73. // }
  74. // uni.showToast({
  75. // title: '没有更多数据了',
  76. // icon: 'none',
  77. // });
  78. // uni.hideKeyboard();
  79. // const { value: loginForm } = event.detail;
  80. // debugger
  81. var username = event.detail.value.username;
  82. var pass = event.detail.value.password;
  83. var password = MD5(pass);
  84. var serverUrl = this.serverurl;
  85. this.parm['username'] = username;
  86. this.parm['password'] = password;
  87. this.parm['avatarUrl'] = this.avatarUrl;
  88. this.parm['nickName'] = this.nickName;
  89. this.parm['openId'] = this.openId;
  90. // debugger;
  91. this.$store.dispatch('loginWXCZ', this.parm)
  92. .then(data => {
  93. if (this.isShowLoading) {
  94. uni.hideLoading()
  95. }
  96. uni.showToast({
  97. title: '绑定成功',
  98. icon: 'none',
  99. });
  100. var result = data.message;
  101. var weixinInfo = data.data;
  102. var code = data.code;
  103. uni.setStorageSync("token", data.token);
  104. uni.setStorageSync("globalUser", weixinInfo);
  105. if (code == true) {
  106. uni.reLaunch({
  107. url: '/pages/Charts/mainStatistics',
  108. });
  109. }
  110. }, _ => void uni.stopPullDownRefresh());
  111. },
  112. },
  113. }
  114. </script>
  115. <style lang="scss">
  116. page {
  117. padding: 200upx 0 0 0;
  118. background-image: url('~@/static/backgrounds/login_bg.png');
  119. background-repeat: no-repeat;
  120. background-size: 100% 100%;
  121. position: absolute;
  122. top: 0;
  123. left: 0;
  124. right: 0;
  125. bottom: 0;
  126. .content {
  127. padding: 0 20upx;
  128. display: flex;
  129. flex-flow: column nowrap;
  130. align-items: center;
  131. .logo {
  132. width: 150upx;
  133. height: 150upx;
  134. text-align: center;
  135. margin: 50upx;
  136. }
  137. form {
  138. width: calc(100% - 100upx);
  139. padding: 50upx;
  140. .section {
  141. margin: 50upx 0;
  142. }
  143. .btn-area {
  144. margin-top: 100upx;
  145. button {
  146. background-color: $uni-color-primary;
  147. }
  148. }
  149. }
  150. }
  151. }
  152. </style>