bind.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. <template>
  2. <view class="normal-login-container">
  3. <view class="logo-content align-center justify-center flex">
  4. <image :src="login_top" mode="widthFix" class="width100" style="margin-top: -80upx;"></image>
  5. </view>
  6. <!-- 账号密码框 -->
  7. <view class="login-form-content">
  8. <text style="color: #98AEAF;">账号</text>
  9. <view class="input-item flex align-center">
  10. <view class="iconfont icon-user icon"></view>
  11. <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
  12. </view>
  13. <text style="color: #98AEAF;">密码</text>
  14. <view class="input-item flex align-center">
  15. <view class="iconfont icon-password icon"></view>
  16. <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
  17. </view>
  18. <!-- 绑定按钮 -->
  19. <view class="login-form-content2">
  20. <button @click="handleLogin" class="login-btn cu-btn block lg">确认绑定</button>
  21. <button @click="goregister" class="sign-btn cu-btn block lg">前往注册</button>
  22. </view>
  23. </view>
  24. <!-- <view class="xieyi text-center">
  25. <text class="text-grey1">登录即代表同意</text>
  26. <text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
  27. <text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
  28. </view> -->
  29. </view>
  30. </template>
  31. <script>
  32. // #ifdef H5
  33. import Verify from '@/pagesA/components/verifition/Verify';
  34. // #endif
  35. import config from '@/config'
  36. const baseUrlImg = config.baseUrlImg
  37. export default {
  38. name: 'Login',
  39. components: {
  40. // #ifdef H5
  41. Verify
  42. // #endif
  43. },
  44. data() {
  45. return {
  46. description: `${baseUrlImg}/login/description.png`, //登录页面顶部装饰图
  47. login_top: `${baseUrlImg}/login/login_top.png`,
  48. //登录页面顶部
  49. captchaEnabled: true, // 验证码开关 TODO 芋艿:需要抽到配置里
  50. canIUseGetUserProfile: false, // 用来判断用哪个登录
  51. globalConfig: getApp().globalData.config,
  52. userInfo: '',
  53. loginForm: {
  54. username: '',
  55. password: '',
  56. socialCode: '',
  57. socialType: 34,
  58. socialState: '9b2ffbc1-7425-4155-9894-9d5c08541d62'
  59. }
  60. };
  61. },
  62. onLoad(option) {
  63. this.loginForm.socialCode = option.socialCode
  64. },
  65. methods: {
  66. //前往注册
  67. goregister() {
  68. uni.navigateTo({
  69. url: `/pages/sign/sign?socialCode=${this.loginForm.socialCode}`
  70. })
  71. },
  72. // 登录方法
  73. async handleLogin(params) {
  74. if (this.loginForm.username === '') {
  75. this.$modal.msgError('请输入您的账号');
  76. } else if (this.loginForm.password === '') {
  77. this.$modal.msgError('请输入您的密码');
  78. } else {
  79. // 显示验证码
  80. // if (this.captchaEnabled) {
  81. // this.$refs.verify.show()
  82. // } else { // 直接登录
  83. await this.pwdLogin({});
  84. // }
  85. }
  86. },
  87. // 密码登录
  88. async pwdLogin(captchaParams) {
  89. this.$modal.loading('登录中,请耐心等待...');
  90. // 执行登录
  91. this.loginForm.captchaVerification = captchaParams.captchaVerification;
  92. this.$store.dispatch('Login', this.loginForm).then(() => {
  93. // uni.setStorageSync('token', res.data.data.token);
  94. this.$modal.closeLoading();
  95. this.loginSuccess();
  96. });
  97. },
  98. // 登录成功后,处理函数
  99. loginSuccess(result) {
  100. this.$store.dispatch('loadDictDatas');
  101. // 设置用户信息
  102. this.$store.dispatch('GetInfo').then(res => {
  103. this.$tab.reLaunch('/pages/index');
  104. // this.$tab.reLaunch('/pages/work/index');
  105. });
  106. }
  107. }
  108. };
  109. </script>
  110. <style lang="scss">
  111. page {
  112. background-color: #ffffff;
  113. }
  114. .normal-login-container {
  115. width: 100%;
  116. .logo-content {
  117. width: 100%;
  118. font-size: 21px;
  119. text-align: center;
  120. image {
  121. border-radius: 4px;
  122. }
  123. .title {
  124. margin-left: 10px;
  125. }
  126. }
  127. .login-form-content {
  128. text-align: left;
  129. margin: 20px auto;
  130. margin-top: 10%;
  131. width: 80%;
  132. .input-item {
  133. margin: 15px auto;
  134. background-color: #f5f9f7;
  135. height: 45px;
  136. border-radius: 20px;
  137. .icon {
  138. font-size: 38rpx;
  139. margin-left: 10px;
  140. color: #999;
  141. }
  142. .input {
  143. width: 100%;
  144. font-size: 14px;
  145. line-height: 20px;
  146. text-align: left;
  147. padding-left: 15px;
  148. }
  149. }
  150. .login-btn,
  151. .sign-btn {
  152. margin-top: 30px;
  153. height: 90upx;
  154. border-radius: 356upx;
  155. background-color: #4cb2b6;
  156. color: #ffffff;
  157. box-shadow: 0px 2upx 6upx 0px rgba(123, 123, 123, 0.3);
  158. }
  159. .sign-btn {
  160. color: #4cb2b6;
  161. background-color: #f5f9f7;
  162. }
  163. .xieyi {
  164. color: #333;
  165. margin-top: 20px;
  166. }
  167. }
  168. .easyinput {
  169. width: 100%;
  170. }
  171. }
  172. // 登录按钮
  173. .login-form-content2 {
  174. text-align: center;
  175. margin: 20px auto;
  176. margin-top: 0%;
  177. width: 75%;
  178. .wx_login {
  179. height: 100upx;
  180. width: 450upx;
  181. // font-size: 16px;
  182. // padding-top: 2px;
  183. // background-color: #f5f7f9;
  184. // color: #728f90;
  185. // border-radius: 356upx;
  186. // box-shadow: 0px 2upx 6upx 0px rgba(123, 123, 123, 0.3);
  187. }
  188. .or {
  189. font-size: 20upx;
  190. margin: 20upx;
  191. color: #98aeaf;
  192. }
  193. }
  194. .login-code-img {
  195. height: 45px;
  196. }
  197. .wx_icon {
  198. position: relative;
  199. margin-top: 27%;
  200. margin-left: 42%;
  201. }
  202. </style>