Login.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  1. <template>
  2. <view class="content">
  3. <image class="logo" src="/static/icons/logo.png"></image>
  4. <view class="title">
  5. {{$t('login.title')}}
  6. </view>
  7. <form @submit="loginSubmit">
  8. <view class="section">
  9. <input class="input-account" name="userName" :placeholder="$t('login.username')" />
  10. </view>
  11. <view class="section">
  12. <input class="input-pwd" password name="password" :placeholder="$t('login.password')" />
  13. </view>
  14. <view class="btn-area">
  15. <button type="primary" formType="submit" :loading="isLoading">{{loginBtnLabel}}</button>
  16. </view>
  17. </form>
  18. <!-- 第三方登录H5不支持,所以隐藏掉 -->
  19. <!-- #ifndef H5 -->
  20. <view class="third-wapper">
  21. <view class="third-line">
  22. <view class="single-line">
  23. <view class="line"></view>
  24. </view>
  25. <view class="third-words">绑定微信一键登录</view>
  26. <view class="single-line">
  27. <view class="line"></view>
  28. </view>
  29. </view>
  30. <view class="third-icos-wapper">
  31. <!-- 5+app 用qq/微信/微博 登录 小程序用微信小程序登录 h5不支持 -->
  32. <!-- #ifdef MP-WEIXIN -->
  33. <button open-type='getUserInfo' @getuserinfo="wxLogin" class="third-btn-ico">
  34. </button>
  35. <!-- #endif -->
  36. </view>
  37. </view>
  38. <!-- #endif -->
  39. </view>
  40. </view>
  41. </template>
  42. <script>
  43. import {
  44. mapState
  45. } from 'vuex';
  46. export default {
  47. data() {
  48. return {
  49. parm: {
  50. avatarUrl: "",
  51. nickName: "",
  52. openId: ""
  53. }
  54. };
  55. },
  56. computed: {
  57. ...mapState(['isLoading']),
  58. loginBtnLabel() {
  59. return this.isLoading ? '' : this.$t('login.login');
  60. }
  61. },
  62. methods: {
  63. loginSubmit(event) {
  64. uni.hideKeyboard();
  65. const {
  66. value: loginForm
  67. } = event.detail;
  68. this.$store.dispatch('login', loginForm)
  69. .then(_ => {
  70. //标记刚登录跳转
  71. uni.setStorageSync('test', '1');
  72. uni.reLaunch({
  73. url: '../select/select',
  74. });
  75. });
  76. },
  77. // 实现在微信小程序端的微信登录
  78. async wxLogin(e) {
  79. var serverUrl = this.serverurl;
  80. // 通过微信开发能力,获得微信用户的基本信息
  81. var userInfo = e.detail.userInfo;
  82. var parm1 = '';
  83. // 实现微信登录
  84. await uni.login({
  85. provider: "weixin",
  86. success:(loginResult)=> {
  87. // 获得微信登录的code:授权码
  88. var code = loginResult.code;
  89. var openid = "";
  90. uni.request({
  91. url: serverUrl+"/TUserWeixin/getOpenid?code="+code,
  92. mothod: "GET",
  93. success: (userResult) => {
  94. openid = userResult.data.data;
  95. var parm = {
  96. avatarUrl: "",
  97. nickName: "",
  98. openId: ""
  99. };
  100. parm['avatarUrl'] = userInfo.avatarUrl;
  101. parm['nickName'] = userInfo.nickName;
  102. parm['openId'] = openid;
  103. uni.setStorageSync("newparm", parm);
  104. this.loginweixin();
  105. }
  106. });
  107. }
  108. });
  109. },
  110. loginweixin() {
  111. var parm = uni.getStorageSync("newparm");
  112. if (parm.openId != null) {
  113. this.$store.dispatch('loginWX', parm)
  114. .then(data => {
  115. var result = data.message;
  116. var userInfo = data.data;
  117. if (result == "off") {
  118. uni.setStorageSync("weixinInfo", userInfo);
  119. //没有绑定,跳转到微信绑定页面
  120. uni.reLaunch({
  121. url: "loginWeixin",
  122. });
  123. };
  124. if (result == "SUCCESS") {
  125. // uni.setStorageSync("weixinInfo", weixinInfo);
  126. uni.setStorageSync('test', '1');
  127. uni.reLaunch({
  128. url: '../select/select',
  129. });
  130. uni.setStorageSync("globalUser", userInfo);
  131. uni.setStorageSync("level", userInfo.level);
  132. }
  133. });
  134. }
  135. },
  136. }
  137. }
  138. </script>
  139. <style lang="scss">
  140. page {
  141. padding: 200upx 0 0 0;
  142. background-image: url('~@/static/backgrounds/login_bg.png');
  143. background-repeat: no-repeat;
  144. background-size: 100% 100%;
  145. position: absolute;
  146. top: 0;
  147. left: 0;
  148. right: 0;
  149. bottom: 0;
  150. .content {
  151. padding: 0 20upx;
  152. display: flex;
  153. flex-flow: column nowrap;
  154. align-items: center;
  155. .logo {
  156. width: 401upx;
  157. height: 125upx;
  158. text-align: center;
  159. margin: 50upx;
  160. }
  161. form {
  162. width: calc(100% - 100upx);
  163. padding: 50upx;
  164. .section {
  165. margin: 50upx 0;
  166. }
  167. .input-account, .input-pwd {
  168. border: 1px outset #1aad19; /* 设置边框颜色为绿色,边框宽度为2px */
  169. border-radius: 4px; /* 添加圆角 */
  170. box-sizing: border-box; /* 确保内边距和边框不会影响元素的总宽度 */
  171. // box-shadow: 0 0 0 0.1rem #1aad19;
  172. }
  173. .btn-area {
  174. margin-top: 100upx;
  175. button {
  176. background-color: $uni-color-primary;
  177. }
  178. }
  179. }
  180. }
  181. }
  182. /* 第三方登录 start */
  183. .third-wapper {
  184. width: 100%;
  185. /* 固定底部 */
  186. /* bottom: 0;
  187. position: fixed; */
  188. margin-top: 60upx;
  189. }
  190. .third-line {
  191. display: flex;
  192. flex-direction: row;
  193. justify-content: center
  194. }
  195. .third-words {
  196. color: #A9A9A9;
  197. font-size: 13px;
  198. display: flex;
  199. flex-direction: column;
  200. justify-content: center;
  201. }
  202. .single-line {
  203. padding: 15upx 20upx;
  204. width: 25%;
  205. align-items: center;
  206. }
  207. .third-icos-wapper {
  208. margin-top: 30upx;
  209. display: flex;
  210. flex-direction: row;
  211. justify-content: center
  212. }
  213. .third-ico {
  214. width: 60upx;
  215. height: 60upx;
  216. }
  217. .third-btn-ico {
  218. // background-image:url(http://122.152.205.72:88/group1/M00/00/05/CpoxxFxFO-yAOjTaAAATCIZEzRU503.png);
  219. background-image: url('~@/static/backgrounds/weixin.png');
  220. width: 120upx;
  221. height: 120upx;
  222. background-color: white;
  223. background-size: 120upx 120upx;
  224. // background-repeat:no-repeat;
  225. border: none;
  226. padding: 0;
  227. }
  228. button::after {
  229. border: none;
  230. }
  231. /* 第三方登录 end */
  232. </style>