bind.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  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. console.log(this.loginForm, 'this.loginForm');
  92. this.loginForm.captchaVerification = captchaParams.captchaVerification;
  93. this.$store.dispatch('Login', this.loginForm).then(() => {
  94. // uni.setStorageSync('token', res.data.data.token);
  95. this.$modal.closeLoading();
  96. this.loginSuccess();
  97. });
  98. },
  99. // 登录成功后,处理函数
  100. loginSuccess(result) {
  101. this.$store.dispatch('loadDictDatas');
  102. // 设置用户信息
  103. this.$store.dispatch('GetInfo').then(res => {
  104. this.$tab.reLaunch('/pages/index');
  105. // this.$tab.reLaunch('/pages/work/index');
  106. });
  107. }
  108. }
  109. };
  110. </script>
  111. <style lang="scss">
  112. page {
  113. background-color: #ffffff;
  114. }
  115. .normal-login-container {
  116. width: 100%;
  117. .logo-content {
  118. width: 100%;
  119. font-size: 21px;
  120. text-align: center;
  121. image {
  122. border-radius: 4px;
  123. }
  124. .title {
  125. margin-left: 10px;
  126. }
  127. }
  128. .login-form-content {
  129. text-align: left;
  130. margin: 20px auto;
  131. margin-top: 10%;
  132. width: 80%;
  133. .input-item {
  134. margin: 15px auto;
  135. background-color: #f5f9f7;
  136. height: 45px;
  137. border-radius: 20px;
  138. .icon {
  139. font-size: 38rpx;
  140. margin-left: 10px;
  141. color: #999;
  142. }
  143. .input {
  144. width: 100%;
  145. font-size: 14px;
  146. line-height: 20px;
  147. text-align: left;
  148. padding-left: 15px;
  149. }
  150. }
  151. .login-btn,
  152. .sign-btn {
  153. margin-top: 30px;
  154. height: 90upx;
  155. border-radius: 356upx;
  156. background-color: #4cb2b6;
  157. color: #ffffff;
  158. box-shadow: 0px 2upx 6upx 0px rgba(123, 123, 123, 0.3);
  159. }
  160. .sign-btn {
  161. color: #4cb2b6;
  162. background-color: #f5f9f7;
  163. }
  164. .xieyi {
  165. color: #333;
  166. margin-top: 20px;
  167. }
  168. }
  169. .easyinput {
  170. width: 100%;
  171. }
  172. }
  173. // 登录按钮
  174. .login-form-content2 {
  175. text-align: center;
  176. margin: 20px auto;
  177. margin-top: 0%;
  178. width: 75%;
  179. .wx_login {
  180. height: 100upx;
  181. width: 450upx;
  182. // font-size: 16px;
  183. // padding-top: 2px;
  184. // background-color: #f5f7f9;
  185. // color: #728f90;
  186. // border-radius: 356upx;
  187. // box-shadow: 0px 2upx 6upx 0px rgba(123, 123, 123, 0.3);
  188. }
  189. .or {
  190. font-size: 20upx;
  191. margin: 20upx;
  192. color: #98aeaf;
  193. }
  194. }
  195. .login-code-img {
  196. height: 45px;
  197. }
  198. .wx_icon {
  199. position: relative;
  200. margin-top: 27%;
  201. margin-left: 42%;
  202. }
  203. </style>