cc-wap/src/views/login/login_index.vue

<script>
import {userLogin} from "@/api/member";

export default {
  components:{},
  data() {
    return {
      formData: {
        phone: '',
        password: ''
      }
    };
  },
  mounted(){},
  methods: {
    login(){
      userLogin(this.formData).then((res) => {
        if(res.code === 1) {
          localStorage.setItem('token',res.data.token)
          localStorage.setItem('m_id',res.data.m_id)
          this.$router.push('/cc_list')
        }else {
          this.$message.error(res.msg)
        }
      })
    },
    goToUrl() {
      this.$router.push('/invite')
    }
  }
}
</script>

<template>
<div class="flex-common-css p-24 box-sizing-border bgc-f">
  <div class="fs-24 mb-30 fw-600">
    嗨，欢迎登录
  </div>
  <el-image
      class="img-box"
      :src="require('@/assets/img/logo/logo.png')"
      fit="cover"></el-image>
  <div class="text-align-center fw-600 mb-32">
    芭芭拉
  </div>
  <div class="fs-18 fw-600 mb-16">
    手机号
  </div>
  <div class="b-rad-100 bgc-F6F6F6 input-box align-items-center mb-16">
    <i class="el-icon-lock fs-16"></i>
    <el-input type="number" class="el-input-box" v-model="formData.phone" placeholder="请输入手机号"></el-input>
  </div>
  <div class="b-rad-100 bgc-F6F6F6 input-box align-items-center mb-13">
    <i class="el-icon-lock fs-16"></i>
    <el-input type="password" class="el-input-box" v-model="formData.password" placeholder="请输入登录密码"></el-input>
  </div>
  <div class="fs-14 fc-6 mb-40">
    忘记密码？
  </div>
  <div class="b-rad-100 bgc-16BB5D align-items-center flex-justify-center fs-16 fc-f fw-600 login-but mb-30" @click="login">
    登录
  </div>
  <div class="fs-16 fc-9 align-items-center flex-justify-center">
    没有账号？<p class="fs-16 fc-16BB5D" @click="goToUrl">立即注册</p>
  </div>
</div>
</template>

<style scoped lang="scss">
.img-box{
  width: 62px;
  height: 62px;
  margin: 0 auto 10px;
}
.input-box{
  height: 46px;
  line-height: 46px;
  padding: 0 12px;
}
.i-box{
  width: 16px;
  height: 16px;
}
::v-deep .el-input__inner{
  background: transparent;
  border: none;
  font-size: 16px;
  color: black;
}
.login-but{
  width: 100%;
  height: 46px;
}
</style>