就关于vant调用插件实现固定框架的操作

最新推荐文章于 2024-04-29 04:43:45 发布

原来是啊棍

最新推荐文章于 2024-04-29 04:43:45 发布

阅读量682

点赞数 1

分类专栏：脚手架框架文章标签： vue

本文链接：https://blog.csdn.net/weixin_45408258/article/details/115512025

版权

本文档详细介绍了如何在Vue项目中利用Vant组件库进行页面布局，包括登录页面、首页以及任务和事件管理模块的构建。重点讲解了事件上报和任务详情、事件详情的固定框架实现步骤。

摘要由CSDN通过智能技术生成

登陆------------------

<template>
  <div class="">
        <div style="margin-top:-21px">
<img src="../assets/tou.jpg" width="100%" height="40%"> 
        </div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="账号"
        label="账号"
        placeholder="账号"
        :rules="[{ required: true, message: '请填写账号' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
           <van-button round block 
           type="info"
    style="background-color:rgb(100, 180, 140);
    color:white;
    margin-top:20px"
    native-type="submit">登陆</van-button>
      </div>
    </van-form>
    <div>
<van-goods-action>
  <van-goods-action-icon icon="wap-home-o" text="首页" @click="shouye"  class="gekai"/>
  <van-goods-action-icon icon="friends-o" text="事件上报" @click="shangbao"  class="gekai"/>
  <!-- @click="onClickIcon" -->
  <van-goods-action-icon icon="shop-o" @click="wode" text="我的"  class="gekai"/>
  <!-- @click="onClickIcon" -->
</van-goods-action>
</div>
  </div>
</template>

<script>
import{
    Dialog,Toast} from 'vant'
export default {
    
  props: {
    },
  components: {
    },
  data() {
    
    return {
    
      username: "",
      password: "",
    };
  },
  computed: {
    },
  created() {
    },
  methods: {
    
     wode(){
    
    this.$router.push("/my");
    },
      shouye(){
    
    this.$router.push("/Home");
      },
          shangbao(){
    
this.$router.push("/addEvent");
    },
    async onSubmit() {
    
      if (this.username.length >= 6) {
    
        var reg = /[\u4E00-\u9FA5]/;
        if (reg.test(this.username)) {
    
          Dialog.alert({
    
            theme: "round",
            title: "提示",
            width: "70%",
            heigth: "30%",
            message: "账号格式有误",
          }).then(() => {
    });
          return;
        }
      } else {
    
        Dialog.alert({
    
          theme: "round",
          title: "提示",
          width: "70%",
          heigth: "30%",
          message: "账号长度为6~12位",
        }).then(() => {
    });
        return;
      }
      if (this.password.length >= 6) {
    
        var reg = /[\u4E00-\u9FA5]/;
        if (reg.test(this.password)) {
    
          Dialog.alert({
    
            theme: "round",
            title: "提示",
            width: "70%",
            heigth: "30%",
            message: "密码格式有误",
          }).then(() => {
    });
          return;
        }
      } else {
    
        Dialog.alert({
    
          theme: "round",
          title: "提示",
          width: "70%",
          heigth: "30%",
          message: "账号长度为6~12位",
        }).then(() => {
    });
        return;
      }

      var user = {
    
        loginName: this.username,
        loginPassword: this.password,
      };

      const data = this.$qs.stringify(user);

      const res = await this.request({
    
        url: "/app/Employee/doLogin",
        data,
        method: "POST",
      });
      if (res.data.status == 200) {
    
        sessionStorage.setItem("set_token", res.data.data);
        this.$router.push("/Home");
        Toast.loading({
    
          message: "登录成功",
          position: "top",
        });
      } else {
    
        Toast.fail({
    
          message: "登录失败",
          pasition: "top",
        });
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.gekai{
    
    margin-left:60px
}
</style>

首页-----------------------

<template>
<div class="home">
    <van-cell-group class="my-info">
      <van-cell class="base-info" center :border="false">
        <van-image
          style="width:20%;"
          class="avatar"
          slot="icon"
          round
          fit="cover"
          :src="require('./../assets/logo.png')"
        />
  <div class="name" slot="title" 
  style="font-size:20px;color:white;"
   @click="xinwen">智慧城市
   </div>
      </van-cell>
      <div class="largeTitle">
        <div class="title">
          <span>今日作业人数</span>
          <span>{
  {eventCount}}</span>
        </div>

        <div class="title">
          <span>今日作业人数</span>
          <span>{
  {eventCount}}</span>
        </div>

        <div class="title">
          <span>今日作业人数</span>
          <span>{
  {eventCount}}</span>
        </div>
      </div>
    </van-cell-group>


<van-grid direction="horizontal" class="mb-4" style="margin-top:90px;">
       <van-button
  to="task"
  icon="search" 
  text="任务" 
  class="kai"
  ></van-button>
        <van-button 
  to="event"
  icon="bulb-o" 
  text="事件" 
  class="kai"></van-button>
    </van-grid>
<van-cell style="margin-top:20px" 
class="mb-4" 
title="修改密码" 
is-link to="/pwd"/>

<van-b