phoneLogin.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. <template>
  2. <view class="phone-login">
  3. <view class="login-content">
  4. <view class="login-logo">
  5. <u-image src="/static/logo-mini.png" width="396" height="76" class="logo"></u-image>
  6. </view>
  7. <u-form ref="uForm">
  8. <u-form-item>
  9. <u-input v-model="mobile" placeholder="请输入手机号" type="number" maxlength='11' />
  10. </u-form-item>
  11. <u-form-item>
  12. <u-input placeholder="请输入验证码" maxlength='4' type="number" v-model="code" />
  13. <u-button slot="right" class="yzmBtn" :custom-style="yzmBtn" shape="circle" :hair-line="false" size="mini"
  14. @click="checkMobile" :disabled="isDisabled">{{codeText}}</u-button>
  15. </u-form-item>
  16. <u-form-item class="form-btn" :border-bottom="false">
  17. <u-button :custom-style="submitBtn" type="warring" form-type="submit" shape="circle" :hair-line="false"
  18. @click="bindLogin">登录</u-button>
  19. </u-form-item>
  20. </u-form>
  21. </view>
  22. <view class="xieyi" @click="gotoXieyi()">
  23. 登录即代表同意 <text>《用户协议》和《隐私政策》</text>
  24. </view>
  25. <!-- 图文验证码 -->
  26. <uni-popup @change="changeModal" ref="imageTxtPopup" type="center">
  27. <popup-con title="图文验证码" :popBtn="popBtn" :changeImg="changeImg" @captchaImg="captchaVerify"></popup-con>
  28. </uni-popup>
  29. </view>
  30. </template>
  31. <script>
  32. import {
  33. code2Session,
  34. login,
  35. sendLoginVerifyCode
  36. } from '../../api/login.js'
  37. import {
  38. mapState,
  39. mapMutations
  40. } from 'vuex'
  41. import uniPopup from '@/components/uni-popup/uni-popup.vue'
  42. import popupCon from '@/components/uni-popup/popup-con.vue'
  43. import {
  44. isvalidPhone
  45. } from '@/libs/validate.js'
  46. export default {
  47. components: {
  48. uniPopup,
  49. popupCon
  50. },
  51. data() {
  52. return {
  53. mobile: '', // 手机号码
  54. code: '', // 短信验证码
  55. popBtn: [], // name为操作按钮名称,color为操作按钮颜色值
  56. changeImg: false, // 是否重新更换图形验证码
  57. randomCode: '', // 图片验证码随机码
  58. codeText: '获取验证码',
  59. getCodeing: false,
  60. totalTime: 60,
  61. yzmBtn: {
  62. background: "#ffffff",
  63. borderColor: '#eeeeee'
  64. },
  65. submitBtn: {
  66. background: "#58c4c4",
  67. marginTop: '15px',
  68. color: '#ffffff'
  69. },
  70. isDisabled: false // 倒计时按钮是否禁用
  71. }
  72. },
  73. computed: mapState(['forcedLogin']),
  74. mounted() {
  75. //微信平台登录
  76. //#ifdef MP-WEIXIN
  77. this.$store.dispatch('wxLogin', 'weixin')
  78. //#endif
  79. },
  80. methods: {
  81. ...mapMutations(['login']),
  82. // 获取验证码
  83. getCode() {
  84. let sid = null
  85. sid = setInterval(() => {
  86. if (this.totalTime > 0) {
  87. this.totalTime = this.totalTime - 1
  88. this.codeText = '已发送' + this.totalTime + 's'
  89. if (this.totalTime < 60) {
  90. this.isDisabled = true
  91. }
  92. } else {
  93. this.isDisabled = false
  94. clearInterval(sid)
  95. this.getCodeing = false
  96. this.codeText = '获取验证码'
  97. this.totalTime = 60
  98. }
  99. }, 1000)
  100. },
  101. // 验证手机
  102. checkMobile() {
  103. if (!this.getCodeing) {
  104. if (this.mobile) {
  105. if (!isvalidPhone(this.mobile)) {
  106. uni.showToast({
  107. title: '请输入正确的手机号码',
  108. icon: 'none'
  109. })
  110. return false
  111. } else {
  112. this.getCodeing = true
  113. this.retsetCode()
  114. // 图文验证码
  115. this.$refs.imageTxtPopup.open()
  116. }
  117. }else{
  118. uni.showToast({
  119. title: '请输入手机号码',
  120. icon: 'none'
  121. })
  122. }
  123. }
  124. },
  125. changeModal(val) {
  126. if (val.show == false) {
  127. this.getCodeing = false
  128. }
  129. },
  130. // 验证图片验证码
  131. captchaVerify(code, nowRandomCode) {
  132. const _this = this
  133. let obj = {}
  134. obj.mobile = this.mobile
  135. obj.random = nowRandomCode
  136. obj.code = code
  137. obj.openid = this.$store.state.vuex_openid
  138. console.log(this.$store.state.vuex_openid)
  139. // 发送短信验证码
  140. sendLoginVerifyCode(obj).then(res => {
  141. console.log(JSON.stringify(res.data))
  142. if (res.status == 200) { // 验证码输入正确
  143. _this.randomCode = nowRandomCode // 图片验证码随机码
  144. // 关闭 图形验证码 弹框
  145. _this.$refs.imageTxtPopup.close()
  146. // 开启倒计时
  147. _this.getCode()
  148. uni.showToast({
  149. icon: 'none',
  150. title: '验证码发送成功'
  151. })
  152. } else { // 验证码输入错误
  153. _this.retsetCode()
  154. uni.showToast({
  155. icon: 'none',
  156. title: res.message,
  157. duration: 5000
  158. })
  159. }
  160. })
  161. },
  162. // 重新触发获取图片验证码
  163. retsetCode() {
  164. const _this = this
  165. _this.code = ''
  166. _this.randomCode = ''
  167. // 切换验证码重新校验
  168. _this.changeImg = false
  169. _this.$nextTick(function() {
  170. _this.changeImg = true
  171. })
  172. },
  173. // 登录
  174. bindLogin() {
  175. if (this.mobile) {
  176. let data = {
  177. 'mobile': this.mobile,
  178. 'code': this.code,
  179. 'openid': this.$store.state.vuex_openid,
  180. 'random': this.randomCode
  181. }
  182. login(data).then(res => {
  183. console.log(res)
  184. if (res.status == 200) {
  185. this.toMain(res.data)
  186. } else {
  187. uni.showToast({
  188. title: res.message,
  189. icon: 'none'
  190. })
  191. }
  192. })
  193. }else{
  194. uni.showToast({
  195. title: '请输入手机号码',
  196. icon: 'none'
  197. })
  198. }
  199. },
  200. toMain(data) {
  201. this.login(data);
  202. uni.reLaunch({
  203. url: '/pages/index/index',
  204. });
  205. },
  206. // 用户协议
  207. gotoXieyi(url) {
  208. uni.navigateTo({
  209. url: '/pages/xieyi/index?id=0'
  210. })
  211. },
  212. },
  213. watch: {
  214. mobile(val) {
  215. this.mobile = val
  216. }
  217. }
  218. }
  219. </script>
  220. <style lang="scss">
  221. .phone-login {
  222. display: flex;
  223. flex-direction: column;
  224. width: 100%;
  225. height: 100vh;
  226. padding: 0 125upx;
  227. background-color: #fff;
  228. .login-content {
  229. flex: 1;
  230. .login-logo {
  231. text-align: center;
  232. .logo {
  233. display: inline-block;
  234. margin: 200upx 0 100upx;
  235. }
  236. }
  237. }
  238. .xieyi {
  239. font-size: 24upx;
  240. text-align: center;
  241. padding-bottom: 60upx;
  242. text {
  243. color: #1283d4
  244. }
  245. }
  246. }
  247. </style>