phoneLogin.vue 6.5 KB

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