loginWeixin.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  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("globalUser", weixinInfo);
  76. if (code == true) {
  77. uni.reLaunch({
  78. url: '/pages/Charts/mainStatistics',
  79. });
  80. }
  81. }, _ => void uni.stopPullDownRefresh());
  82. },
  83. },
  84. }
  85. </script>
  86. <style lang="scss">
  87. page {
  88. padding: 200upx 0 0 0;
  89. background-image: url('~@/static/backgrounds/login_bg.png');
  90. background-repeat: no-repeat;
  91. background-size: 100% 100%;
  92. position: absolute;
  93. top: 0;
  94. left: 0;
  95. right: 0;
  96. bottom: 0;
  97. .content {
  98. padding: 0 20upx;
  99. display: flex;
  100. flex-flow: column nowrap;
  101. align-items: center;
  102. .logo {
  103. width: 150upx;
  104. height: 150upx;
  105. text-align: center;
  106. margin: 50upx;
  107. }
  108. form {
  109. width: calc(100% - 100upx);
  110. padding: 50upx;
  111. .section {
  112. margin: 50upx 0;
  113. }
  114. .btn-area {
  115. margin-top: 100upx;
  116. button {
  117. background-color: $uni-color-primary;
  118. }
  119. }
  120. }
  121. }
  122. }
  123. </style>