phoneLogin.vue 6.6 KB

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