login

最新推荐文章于 2023-05-21 15:27:59 发布

勾勾g

最新推荐文章于 2023-05-21 15:27:59 发布

阅读量106

点赞数

分类专栏：杂记

本文链接：https://blog.csdn.net/qq_44114279/article/details/118386593

版权

杂记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<template>
    <div class="login">
        <div>
            <van-swipe class="my-swipe" initial-swipe='2' indicator-color="white">
                <van-swipe-item @click="$router.push('/')">1</van-swipe-item>
                <van-swipe-item>2</van-swipe-item>
                <van-swipe-item>3</van-swipe-item>
                <van-swipe-item>4</van-swipe-item>
            </van-swipe>
        </div>
        <form @submit.prevent="login">
            <!-- <input type="text" v-model="username">
            <input type="text" v-model="password"> -->
            <van-field v-model="username" label="用户:" />
            <van-field v-model="password" type="password" label="密码：" />
            <van-button type="primary">登录</van-button>
        </form>
    </div>
</template>

<script>
import Vue from 'vue'
import { Button, Field, Dialog, Swipe, SwipeItem } from 'vant'

import { instance2 } from "@/utils/http"
Vue.use(Button)
Vue.use(Field)
Vue.use(Swipe)
Vue.use(SwipeItem)
export default {
  data () {
    return {
      username:'',
      password:''
    }
  },
  methods:{
    login () {
      if (!this.username.trim() || !this.password.trim()) {
        Dialog({
          message: "用户名或者密码必须要传！",
          closeOnClickOverlay:true
        })

        /* Dialog.confirm({
                    title: '标题',
                    message: '弹窗内容',
                    confirmButtonText:"好了",
                    cancelButtonText:"回退"
                }).then(() => {
                    console.log("1111111111111")
                }).catch(() => {
                    console.log("22222222222222")
                }); */

        return
      }
      instance2.post("/api/login", {
        username:this.username,
        password:this.password
      }).then(res => {
        // 将token保存到本地存储里面去
        localStorage.setItem("token", res.token)
        // 跳转到个人中心
        this.$router.replace("/center")
      }).catch(err => {
        Dialog({ message: err, closeOnClickOverlay:true })
      })
    }
  }
}
</script>

<style lang="scss" scoped>

    .login{
        padding: 10px;
        margin-top:1.46rem;
        button{
            width:100%;
            margin-top:10px;
        }
    }

    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
    }
</style>