123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244 |
- <template>
- <view class="phone-login">
- <view class="login-content">
- <view class="login-logo">
- <u-image src="/static/logo-s.png" width="380" height="246" class="logo"></u-image>
- </view>
- <u-form ref="uForm">
- <u-form-item>
- <u-input v-model="mobile" placeholder="请输入手机号" type="number" maxlength='11' />
- </u-form-item>
- <u-form-item>
- <u-input placeholder="请输入验证码" maxlength='4' type="number" v-model="code" />
- <u-button slot="right" class="yzmBtn" :custom-style="yzmBtn" shape="circle" :hair-line="false" size="mini"
- @click="checkMobile" :disabled="isDisabled">{{codeText}}</u-button>
- </u-form-item>
- <u-form-item class="form-btn" :border-bottom="false">
- <u-button :custom-style="submitBtn" type="warring" form-type="submit" shape="circle" :hair-line="false"
- @click="bindLogin">登录</u-button>
- </u-form-item>
- </u-form>
- </view>
-
- <view class="xieyi" @click="gotoXieyi()">
- 登录即代表同意 <text>《用户协议》和《隐私政策》</text>
- </view>
-
- <uni-popup @change="changeModal" ref="imageTxtPopup" type="center">
- <popup-con title="图文验证码" :popBtn="popBtn" :changeImg="changeImg" @captchaImg="captchaVerify"></popup-con>
- </uni-popup>
- </view>
- </template>
- <script>
- import {
- code2Session,
- login,
- sendLoginVerifyCode
- } from '../../api/login.js'
- import {
- mapState,
- mapMutations
- } from 'vuex'
- import uniPopup from '@/components/uni-popup/uni-popup.vue'
- import popupCon from '@/components/uni-popup/popup-con.vue'
- import {
- isvalidPhone
- } from '@/libs/validate.js'
- export default {
- components: {
- uniPopup,
- popupCon
- },
- data() {
- return {
- mobile: '',
- code: '',
- popBtn: [],
- changeImg: false,
- randomCode: '',
- codeText: '获取验证码',
- getCodeing: false,
- totalTime: 60,
- yzmBtn: {
- background: "#ffffff"
- },
- submitBtn: {
- background: "#1283d4",
- marginTop: '15px',
- color: '#ffffff'
- },
- isDisabled: false
- }
- },
- computed: mapState(['forcedLogin']),
- mounted() {
-
-
- this.$store.dispatch('wxLogin', 'weixin')
-
- },
- methods: {
- ...mapMutations(['login']),
-
- getCode() {
- let sid = null
- sid = setInterval(() => {
- if (this.totalTime > 0) {
- this.totalTime = this.totalTime - 1
- this.codeText = '已发送' + this.totalTime + 's'
- if (this.totalTime < 60) {
- this.isDisabled = true
- }
- } else {
- this.isDisabled = false
- clearInterval(sid)
- this.getCodeing = false
- this.codeText = '获取验证码'
- this.totalTime = 60
- }
- }, 1000)
- },
-
- checkMobile() {
- if (!this.getCodeing) {
- if (this.mobile) {
- if (!isvalidPhone(this.mobile)) {
- uni.showToast({
- title: '请输入正确的手机号码',
- icon: 'none'
- })
- return false
- } else {
- this.getCodeing = true
- this.retsetCode()
-
- this.$refs.imageTxtPopup.open()
- }
- }
- }
- },
- changeModal(val) {
- if (val.show == false) {
- this.getCodeing = false
- }
- },
-
- captchaVerify(code, nowRandomCode) {
- const _this = this
- let obj = {}
- obj.mobile = this.mobile
- obj.random = nowRandomCode
- obj.code = code
- obj.openid = this.$store.state.vuex_openid
- console.log(this.$store.state.vuex_openid)
-
- sendLoginVerifyCode(obj).then(res => {
- console.log(JSON.stringify(res.data))
- if (res.status == 200) {
- _this.randomCode = nowRandomCode
-
- _this.$refs.imageTxtPopup.close()
-
- _this.getCode()
- uni.showToast({
- icon: 'none',
- title: '验证码发送成功'
- })
- } else {
- _this.retsetCode()
- uni.showToast({
- icon: 'none',
- title: res.message,
- duration: 5000
- })
- }
- })
- },
-
- retsetCode() {
- const _this = this
- _this.code = ''
- _this.randomCode = ''
-
- _this.changeImg = false
- _this.$nextTick(function() {
- _this.changeImg = true
- })
- },
-
- bindLogin() {
- let mobile = this.mobile
- let openid = this.$store.state.vuex_openid
- let code = this.code
- let random = this.randomCode
- let data = {
- 'mobile': mobile,
- 'code': code,
- 'openid': openid,
- 'random': random
- }
- login(data).then(res => {
- console.log(res)
- if (res.status == 200) {
- this.toMain(res.data)
- } else {
- uni.showToast({
- title: res.message,
- icon: 'none'
- })
- }
- })
- },
- toMain(data) {
- this.login(data);
- uni.reLaunch({
- url: '/pages/index/index',
- });
- },
-
- gotoXieyi(url) {
- uni.navigateTo({
- url: '/pages/xieyi/index?id=0'
- })
- },
- },
- watch: {
- mobile(val) {
- this.mobile = val
- }
- }
- }
- </script>
- <style lang="scss">
- .phone-login {
- display: flex;
- flex-direction: column;
- width: 100%;
- height: 100vh;
- padding: 0 125upx;
- .login-content {
- flex: 1;
- .login-logo {
- text-align: center;
- .logo {
- display: inline-block;
- margin: 200upx 0 100upx;
- }
- }
- }
- .xieyi {
- font-size: 24upx;
- text-align: center;
- padding-bottom: 60upx;
- text {
- color: #1283d4
- }
- }
- }
- </style>
|