login.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416
  1. <template>
  2. <view class="container login">
  3. <view class="login-main">
  4. <image class="logo" src="https://static.caimei365.com/app/img/icon/logo@2x.png" mode=""></image>
  5. </view>
  6. <view class="login-form" v-if="loginType === 0">
  7. <view class="login-input">
  8. <text class="iconfont icon-shouji"></text>
  9. <input
  10. type="number"
  11. v-model="codeParams.mobile"
  12. maxlength="11"
  13. class="input"
  14. placeholder="请输入邮箱/手机号"
  15. @input="handleMobile"
  16. />
  17. </view>
  18. <view class="login-input">
  19. <text class="iconfont icon-duanxin"></text>
  20. <input
  21. type="number"
  22. v-model="codeParams.code"
  23. maxlength="6"
  24. class="input code"
  25. placeholder="请输入短信验证码"
  26. @input="handleSmsCode"
  27. />
  28. <view class="code-btn" @click.stop="handleMobileCode"> {{ mobileCodeText }} </view>
  29. </view>
  30. <view class="login-input link">
  31. <view class="login-reg" @click.stop="navigatorRegirst('/pages/login/register-supplier')" v-if="JSON.parse(getOption).state == '1'">免费注册</view>
  32. <view class="login-reg" @click.stop="navigatorRegirst('/pages/login/register')" v-else>免费注册</view>
  33. <view class="login-pwd" @click.stop="handeleLogin(1)">密码登录</view>
  34. </view>
  35. </view>
  36. <view class="login-form" v-if="loginType === 1">
  37. <view class="login-input">
  38. <text class="iconfont icon-shouji"></text>
  39. <input
  40. type="text"
  41. v-model="accountParams.mobileOrEmail"
  42. maxlength="30"
  43. class="input"
  44. placeholder="请输入手机号"
  45. @input="handleMobileOrEmail"
  46. />
  47. </view>
  48. <view class="login-input">
  49. <text class="iconfont icon-mima"></text>
  50. <input
  51. type="text"
  52. v-model="accountParams.password"
  53. maxlength="18"
  54. class="input"
  55. placeholder="请输入密码"
  56. autocomplete="new-password"
  57. @input="handlePassword"
  58. />
  59. </view>
  60. <view class="login-input link">
  61. <view class="login-reg" v-if="JSON.parse(getOption).state == '1'" @click.stop="navigatorRegirst('/pages/login/register-supplier')">免费注册</view>
  62. <view class="login-reg" v-else @click.stop="navigatorRegirst('/pages/login/register')">免费注册</view>
  63. <view class="login-pwd" @click.stop="handeleLogin(0)">验证码登录</view>
  64. </view>
  65. </view>
  66. <button class="login-btn" :disabled="isDisabled" :class="isDisabled ? 'disabled' : ''" @click="handleSubLogin">
  67. 登录
  68. </button>
  69. <view class="login-text" v-if="loginType === 1" @click.stop="this.$api.navigateTo('/pages/login/password')"
  70. >忘记密码?</view
  71. >
  72. <view class="login-btn-last" @click.stop="this.$api.navigateTo(`/pages/login/logincode?data=${getOption}`)"
  73. >邀请码登录></view
  74. >
  75. </view>
  76. </template>
  77. <script>
  78. import { mapState, mapMutations } from 'vuex'
  79. import authorize from '@/common/config/authorize.js'
  80. import wxLogin from '@/common/config/wxLogin.js'
  81. export default {
  82. data() {
  83. return {
  84. getOption: '', //页面传递参数
  85. accountParams: {
  86. mobileOrEmail: '', //用户登录账号
  87. password: '', //用户登录密码
  88. unionId: ''
  89. },
  90. codeParams: {
  91. mobile: '', //用户登录手机号
  92. code: '',
  93. unionId: ''
  94. },
  95. smsCodeParams: {
  96. mobile: '' ,//用户登录手机号
  97. imgCode:'',
  98. platformType:0,
  99. isCheckCaptcha:1,
  100. activateCodeType:7
  101. },
  102. loginType: 0,
  103. isMobileDisabled: false, //手机验证码按钮控制
  104. mobilCount: '', //倒计时
  105. mobileCodeText: '获取验证码',
  106. mobilTime: null,
  107. isDisabled: true
  108. }
  109. },
  110. onLoad(option) {
  111. this.getOption = JSON.stringify(option)
  112. console.log(JSON.parse(this.getOption))
  113. },
  114. computed: {
  115. ...mapState(['hasLogin', 'isWxAuthorize', 'isLoginType'])
  116. },
  117. methods: {
  118. ...mapMutations(['login']),
  119. handleMobileOrEmail(e) {
  120. //账号输入
  121. this.accountParams.mobileOrEmail = e.detail.value
  122. this.handldeCheckInput()
  123. },
  124. handlePassword(e) {
  125. //密码输入
  126. this.accountParams.password = e.detail.value
  127. this.handldeCheckInput()
  128. },
  129. handleMobile(e) {
  130. //短信验证手机号输入
  131. this.codeParams.mobile = this.smsCodeParams.mobile = e.detail.value
  132. this.handldeCheckInput()
  133. },
  134. handleSmsCode(e) {
  135. //短信验证码输入
  136. this.codeParams.code = e.detail.value
  137. this.handldeCheckInput()
  138. },
  139. handldeCheckInput() {
  140. // 控制按钮按钮高亮
  141. if (this.loginType === 0) {
  142. this.isDisabled = !(this.codeParams.mobile !== '' && this.codeParams.code !== '')
  143. } else {
  144. this.isDisabled = !(this.accountParams.mobileOrEmail !== '' && this.accountParams.password !== '')
  145. }
  146. },
  147. handleMobileCode() {
  148. // 获取短信验证码
  149. if (this.smsCodeParams.mobile == '') {
  150. this.$util.msg('请输入手机号', 2000)
  151. return
  152. }
  153. if (!this.$reg.isMobile(this.smsCodeParams.mobile)) {
  154. this.$util.msg('请输入正确的手机号', 2000)
  155. return
  156. }
  157. this.isMobileDisabled = true
  158. this.userLoginCode(this.smsCodeParams)
  159. },
  160. userLoginCode(params) {
  161. // 获取登录短息验证码
  162. this.UserService.userLoginCode(params)
  163. .then(response => {
  164. this.$util.msg('获取验证码成功', 2000)
  165. const TIME_COUNT = 60
  166. if (!this.mobilTime) {
  167. this.mobilCount = TIME_COUNT
  168. this.isMobileDisabled = true
  169. this.mobilTime = setInterval(() => {
  170. if (this.mobilCount > 1 && this.mobilCount <= TIME_COUNT) {
  171. this.mobilCount--
  172. this.mobileCodeText = this.mobilCount + 's'
  173. } else {
  174. this.isMobileDisabled = false
  175. clearInterval(this.mobilTime)
  176. this.mobilTime = null
  177. this.mobileCodeText = '获取验证码'
  178. }
  179. }, 1000)
  180. }
  181. })
  182. .catch(error => {
  183. this.$util.msg(error.msg, 2000)
  184. this.isMobileDisabled = false
  185. })
  186. },
  187. async handleSubLogin() {
  188. // 点击登录
  189. const _storage = await this.$api.getStorage()
  190. this.accountParams.unionId = this.codeParams.unionId = _storage.unionId ? _storage.unionId : ''
  191. if (this.loginType === 0) {
  192. this.userCodeLogin()
  193. } else {
  194. this.userPasswordLogin()
  195. }
  196. },
  197. userCodeLogin() {
  198. // 短信验证码登录
  199. this.UserService.userCodeLogin(this.codeParams).then(response => {
  200. this.updataeStatus(response)
  201. })
  202. },
  203. userPasswordLogin() {
  204. // 账号密码登录
  205. this.UserService.AorganizationLogin(this.accountParams).then(response => {
  206. this.updataeStatus(response)
  207. })
  208. },
  209. updataeStatus(data) {
  210. // 处理返回数据
  211. if (data.code === 0) {
  212. uni.setStorageSync('token', data.data.token)
  213. this.$store.commit('updateStatus', data.data)
  214. this.login(data.data)
  215. this.$api.navigateTo(
  216. `/pages/login/bindwechat?data=${JSON.stringify(this.getOption)}&codeType=${data.code}`
  217. )
  218. } else if (data.code === -3) {
  219. this.$util.modal('', '您的企业账号审核未通过,请修改资料', '前往修改', '', false, () => {
  220. this.$store.commit('updateStatus', data.data)
  221. this.$api.navigateTo('/pages/login/apply-supplier')
  222. })
  223. } else {
  224. this.$util.msg(data.msg, 2000)
  225. }
  226. },
  227. navigatorRegirst(url) {
  228. // 友盟埋点注册入口点击事件
  229. if (process.env.NODE_ENV != 'development') {
  230. this.$uma.trackEvent('Um_Event_Regiest', {
  231. Um_Key_PageName: '立即注册',
  232. Um_Key_SourcePage: '登录页面'
  233. })
  234. }
  235. console.log(url)
  236. this.$api.navigateTo(url)
  237. },
  238. handeleLogin(type) {
  239. this.loginType = type
  240. },
  241. async checkedAuthorize() {
  242. //是否已授权 0:为取消授权 1:为已授权 2:为未操作
  243. wxLogin.wxLoginQuick()
  244. }
  245. },
  246. onShow() {
  247. this.checkedAuthorize()
  248. }
  249. }
  250. </script>
  251. <style lang="scss">
  252. .login {
  253. width: 100%;
  254. height: auto;
  255. .model-warp.none {
  256. display: none;
  257. }
  258. .model-warp.show {
  259. display: block;
  260. }
  261. .login-main {
  262. width: 100%;
  263. display: flex;
  264. flex-direction: column;
  265. align-items: center;
  266. height: 284rpx;
  267. padding: 60rpx 0 40rpx 0;
  268. margin-bottom: 70rpx;
  269. .logo {
  270. width: 611rpx;
  271. height: 284rpx;
  272. display: block;
  273. }
  274. }
  275. .login-input {
  276. width: 600rpx;
  277. height: 88rpx;
  278. padding: 24rpx 0;
  279. margin: 0 auto;
  280. margin-bottom: 30rpx;
  281. background: #ffffff;
  282. position: relative;
  283. box-sizing: border-box;
  284. border-bottom: 1px solid #e1e1e1;
  285. .input {
  286. width: 100%;
  287. height: 100%;
  288. background: #ffffff;
  289. font-size: $font-size-28;
  290. line-height: 88rpx;
  291. color: #333333;
  292. padding-left: 100rpx;
  293. box-sizing: border-box;
  294. &.code {
  295. padding-right: 200rpx;
  296. }
  297. }
  298. .code-btn {
  299. width: 200rpx;
  300. height: 80rpx;
  301. position: absolute;
  302. right: 0;
  303. top: 0;
  304. line-height: 80rpx;
  305. text-align: center;
  306. color: $color-system;
  307. font-size: $font-size-26;
  308. }
  309. .iconfont {
  310. position: absolute;
  311. left: 0;
  312. top: 0;
  313. font-size: 48rpx;
  314. color: #333333;
  315. width: 100rpx;
  316. height: 88rpx;
  317. line-height: 88rpx;
  318. text-align: left;
  319. }
  320. &.link {
  321. background: #ffffff;
  322. margin-bottom: 40rpx;
  323. padding: 0 0;
  324. line-height: 40rpx;
  325. font-size: $font-size-28;
  326. border-bottom: none;
  327. .login-reg {
  328. float: left;
  329. color: $color-system;
  330. }
  331. .login-pwd {
  332. float: right;
  333. color: $text-color;
  334. }
  335. }
  336. }
  337. .login-btn {
  338. width: 600rpx;
  339. height: 88rpx;
  340. border-radius: 44rpx;
  341. font-size: $font-size-28;
  342. line-height: 88rpx;
  343. color: #ffffff;
  344. margin: 0 auto;
  345. text-align: center;
  346. background: $btn-confirm;
  347. &.disabled {
  348. background: #e2e2e2;
  349. }
  350. }
  351. .login-text {
  352. width: 600rpx;
  353. height: 88rpx;
  354. font-size: $font-size-28;
  355. line-height: 88rpx;
  356. color: #333333;
  357. margin: 0 auto;
  358. text-align: center;
  359. }
  360. .login-btn-last {
  361. width: 600rpx;
  362. height: 86rpx;
  363. font-size: $font-size-28;
  364. line-height: 88rpx;
  365. color: $color-system;
  366. margin: 0 auto;
  367. text-align: center;
  368. margin-top: 100rpx;
  369. }
  370. .login-tel {
  371. width: 702rpx;
  372. font-size: $font-size-28;
  373. line-height: 80rpx;
  374. margin: 0 auto;
  375. color: $text-color;
  376. text-align: center;
  377. margin-top: 150rpx;
  378. }
  379. .model-authorization {
  380. width: 100%;
  381. height: 100%;
  382. position: fixed;
  383. top: 0;
  384. left: 0;
  385. z-index: 999;
  386. .authorization {
  387. width: 518rpx;
  388. height: 320rpx;
  389. position: absolute;
  390. background: rgba(255, 255, 255, 0.7);
  391. left: 0;
  392. right: 0;
  393. bottom: 0;
  394. top: 0;
  395. margin: auto;
  396. .to-btn {
  397. position: absolute;
  398. top: 0;
  399. left: 0;
  400. right: 0;
  401. bottom: 0;
  402. margin: auto;
  403. width: 70%;
  404. height: 88rpx;
  405. font-size: $font-size-28;
  406. line-height: 88rpx;
  407. color: #ffffff;
  408. text-align: center;
  409. border-radius: 44rpx;
  410. }
  411. }
  412. }
  413. }
  414. </style>