yjxp-web/src/views/onlineRollCall/index.vue

<template>
  <div class="container">
    <div v-for="(item, index) in menuData" :key="index" class="box" @click="handleClick(item.key)">
      <div class="box-left">
        <i :class="item.img" />
      </div>
      <div class="label">{{ item.name }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup name="onlineRollCall">
import {reactive} from "vue";
import {useRouter} from "vue-router";
import {showConfirmDialog, showToast} from 'vant';
import {create_by_city_to_area, create_by_city_to_district} from "@/api/onlineRollCall";

const router = useRouter();
const menuData = reactive([
  { name: '一键点名全市至区县', key: '1', img: 'icon1' },
  { name: '一键点名全市至镇街', key: '2', img: 'icon1' },
  { name: '分区/县点名', key: '3', img: 'icon1' },
  { name: '在线点名记录', key: '4', img: 'icon2' },
  { name: '点名应答记录', key: '5', img: 'icon3' }
])
const handleClick = (key: string) => {
  if (key === '1') {
    showConfirmDialog({
      title: '提示',
      message: '确认一键点名全市至区县？'
    })
    .then(() => {
      create_by_city_to_area({}).then((res) => {
        showToast({type: 'success', message: res.msg, onClose:()=>{
          router.push({ name : 'RollCallDetails', query: { id: res.data }})
        }});
      })
    })
  } else if (key === '2') {
    showConfirmDialog({
      title: '提示',
      message: '确认一键点名全市至镇街？'
    })
    .then(() => {
      create_by_city_to_district({}).then((res) => {
        showToast({type: 'success', message: res.msg, onClose:()=>{
          router.push({ name : 'RollCallDetails', query: { id: res.data }})
        }});
      })
    })
  } else if (key === '3') {
    router.push({ name : 'DistrictCountyRollCall'});
  } else if (key === '4') {
    router.push({ name : 'RollCallRecord'});
  } else if (key === '5') {
    router.push({ name : 'rollCallRecord2'});
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  align-items: center;
  width: 100%;
  min-height: calc(100vh - 50px);
  .box {
    width: 358px;
    height: 89px;
    background: url('@/assets/images/onlineRollCall/box.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    //justify-content: center;
    align-items: center;
    margin-top: 16px;
    position: relative;
    .box-left {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 115px;
    }
    .icon1 {
      display: inline-block;
      width: 92px;
      height: 93px;
      background: url('@/assets/images/onlineRollCall/icon1.png') no-repeat;
      background-size: 100% 100%;
    }
    .icon2 {
      display: inline-block;
      width: 97px;
      height: 94px;
      background: url('@/assets/images/onlineRollCall/icon2.png') no-repeat;
      background-size: 100% 100%;
    }
    .icon3 {
      display: inline-block;
      width: 96px;
      height: 89px;
      background: url('@/assets/images/onlineRollCall/icon3.png') no-repeat;
      background-size: 100% 100%;
    }
    .label {
      color: #414F64;
      font-size: 16px;
      width: 144px;
      text-align: center;
    }
  }
}
</style>