jjx-wap/pages/login/login.vue

<template> <!-- 登录 -->
  <view class="wrap pos-r h-100 flex flex-col justify-start items-center" style="background-color: #AB0011">
    <u-image src="/static/img/login.jpg" width="750rpx" height="470rpx" mode=""></u-image>
    <view class="layout-login card" style="z-index: 10">
      <view class="login-title">会员登录</view>
      <view class="login-type flex justify-between m-top-30">
        <view :class="['type', {red : tabIndex == 1}]" @click="handTab(1)">账号密码登录</view>
        <!--                <view :class="['type', {red : tabIndex == 2}]" @click="handTab(2)">短信验证登录</view>-->
      </view>
      <view class="login-form">
        <view class="m-top-30">
          <u--input
            v-model="form.username"
            placeholder="请输入手机号"
            prefixIcon="account"
            prefixIconStyle="font-size: 26px;color: #909399"
          ></u--input>
        </view>
        <view class="m-top-30" v-if="tabIndex == 1">
          <u--input
            v-model="form.password"
            placeholder="请输入密码"
            prefixIcon="lock"
            type="password"
            prefixIconStyle="font-size: 26px;color: #909399"
          ></u--input>
        </view>
        <view class="m-top-30" v-if="tabIndex == 2">
          <u--input
            v-model="form.smsCode"
            placeholder="请输入验证码"
            prefixIcon="email"
            prefixIconStyle="font-size: 26px;color: #909399"
          >
            <template slot="suffix">
              <u-code
                ref="uCode"
                @change="codeChange"
                seconds="20"
                changeText="X秒重新获取"
              ></u-code>
              <u-button
                @tap="getCode"
                :text="tips"
                type="success"
                size="mini"
                color="#db1c2c"
              ></u-button>
            </template>
          </u--input>
        </view>
        <!--        <view class="m-top-30">-->
        <!--          <drag-verify ref="dragVerify" :width="280" :isPassing.sync="isPassing"-->
        <!--                       text="请按住滑块拖动" successText="验证通过"-->
        <!--                       handlerIcon="el-icon-d-arrow-right" successIcon="el-icon-circle-check">-->
        <!--            <i v-show="!isPassing" slot="textBefore" class="el-icon-lock"></i>-->
        <!--          </drag-verify>-->
        <!--        </view>-->
        <view class="m-top-30">
          <u-button color="#db1c2c" text="立即登录" @click="handleSubmit"></u-button>
        </view>
        <view class="flex justify-between m-top-20">
          <view class="fg" @click="registerLink">免费注册新账号</view>
          <view class="fg" @click="forgetLink">找回密码</view>
        </view>
        <view class="m-top-30 p-top-20">
          <u-divider text="第三方登录"></u-divider>
        </view>
        <view class="flex justify-center align-center">
          <u-icon name="weixin-circle-fill" color="#05BC04" size="38" @click="wechatLogin"></u-icon>
          <!--                    <view style="width: 50rpx;"></view>-->
          <!--                    <u-icon name="qq-circle-fill" color="#2286EA" size="38"></u-icon>-->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import dragVerify from 'vue-drag-verify2'

export default {
  components: {dragVerify},
  data() {
    return {
      tabIndex: 1,
      tips: '',
      isPassing: false,
      form: {
        mobile: '',
        password: '',
        smsCode: '',
        username: ''
      },
    }
  },
  methods: {
    registerLink() {
      uni.$u.route('/pages/login/register')
    },
    forgetLink() {
      uni.$u.route('/pages/login/forget')
    },
    handTab(index) {
      this.tabIndex = index
    },
    codeChange(text) {
      this.tips = text;
    },
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码'
        })
        setTimeout(() => {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          uni.$u.toast('验证码已发送');
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        }, 2000);
      } else {
        uni.$u.toast('倒计时结束后再发送');
      }
    },
    handleSubmit() {
      // if (!this.isPassing) return this.$message.error('请先完成滑块验证')
      let data = {}

      const {
        username,
        password,
        mobile,
        smsCode
      } = this.form

      if (this.tabIndex === 1) {
        data = {
          username,
          password,
        }
        vk.userCenter.login({
          loading: false,
          data,
          success: (data) => {
            this.loginSuccess()
          }
        })
      } else {
        vk.userCenter.loginBySms({
          loading: false,
          data: {
            mobile: mobile,
            code: smsCode,
          },
          success: (data) => {
            this.loginSuccess()
          }
        }).catch(() => {
          // this.$refs.dragVerify.reset()
        })
      }
    },
    loginSuccess() {
      uni.reLaunch({
        url: '/'
      })
    },
    wechatLogin(){
      const redirect_uri = 'https://m.jinjiuxinzg.cn/pages/login/wechat'
      const state = `jjx_2`
      let url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx950c88b951cadd52'
      url += '&redirect_uri=' + encodeURIComponent(redirect_uri)
      url += `&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`
      window.location.href = url
    }
  },
  onLoad() {

  },
}
</script>

<style lang="scss">
.login-img {
  width: 100%;
  height: 330rpx;
}

.layout-login {
  margin: 40rpx 30rpx;
  padding: 30rpx 30rpx 50rpx;
  width: 80%;

  .login-title {
    font-size: 44rpx;
    font-weight: 500;
    line-height: 60rpx;
    text-align: center;
    color: #101010;
  }

  .login-type {
    font-size: 24rpx;
    line-height: 36rpx;
    color: #8e8e8e;
  }

  .login-role .role {
    position: relative;
    margin: 0 50rpx;
    padding-left: 60rpx;
    font-size: 30rpx;
    line-height: 40rpx;
    color: #666666;

    &:before {
      position: absolute;
      left: 0;
      top: 50%;
      z-index: 9;
      content: '';
      transform: translateY(-50%);
      width: 36rpx;
      height: 36rpx;
      padding: 10rpx;
      border: 1px solid #f2f2f2;
      border-radius: 50%;
      box-sizing: border-box;
      background-clip: content-box;
      background-color: #ffffff;
    }
  }

  .login-role .active {
    color: #A92924;

    &:before {
      border-color: #A92924;
      background-color: #A92924;
    }
  }

  .fg {
    font-size: 28rpx;
    line-height: 40rpx;
    color: #666666;
  }
}
</style>