123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114 |
- <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>
|