index.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <template>
  2. <div class="container">
  3. <div v-for="(item, index) in menuData" :key="index" class="box" @click="handleClick(item.key)">
  4. <div class="box-left">
  5. <i :class="item.img" />
  6. </div>
  7. <div class="label">{{ item.name }}</div>
  8. </div>
  9. </div>
  10. </template>
  11. <script lang="ts" setup name="onlineRollCall">
  12. import {reactive} from "vue";
  13. import {useRouter} from "vue-router";
  14. import {showConfirmDialog, showToast} from 'vant';
  15. import {create_by_city_to_area, create_by_city_to_district} from "@/api/onlineRollCall";
  16. const router = useRouter();
  17. const menuData = reactive([
  18. { name: '一键点名全市至区县', key: '1', img: 'icon1' },
  19. { name: '一键点名全市至镇街', key: '2', img: 'icon1' },
  20. { name: '分区/县点名', key: '3', img: 'icon1' },
  21. { name: '在线点名记录', key: '4', img: 'icon2' },
  22. { name: '点名应答记录', key: '5', img: 'icon3' }
  23. ])
  24. const handleClick = (key: string) => {
  25. if (key === '1') {
  26. showConfirmDialog({
  27. title: '提示',
  28. message: '确认一键点名全市至区县?'
  29. })
  30. .then(() => {
  31. create_by_city_to_area({}).then((res) => {
  32. showToast({type: 'success', message: res.msg, onClose:()=>{
  33. router.push({ name : 'RollCallDetails', query: { id: res.data }})
  34. }});
  35. })
  36. })
  37. } else if (key === '2') {
  38. showConfirmDialog({
  39. title: '提示',
  40. message: '确认一键点名全市至镇街?'
  41. })
  42. .then(() => {
  43. create_by_city_to_district({}).then((res) => {
  44. showToast({type: 'success', message: res.msg, onClose:()=>{
  45. router.push({ name : 'RollCallDetails', query: { id: res.data }})
  46. }});
  47. })
  48. })
  49. } else if (key === '3') {
  50. router.push({ name : 'DistrictCountyRollCall'});
  51. } else if (key === '4') {
  52. router.push({ name : 'RollCallRecord'});
  53. } else if (key === '5') {
  54. router.push({ name : 'rollCallRecord2'});
  55. }
  56. }
  57. </script>
  58. <style lang="scss" scoped>
  59. .container {
  60. display: flex;
  61. flex-direction: column;
  62. padding: 20px 0;
  63. align-items: center;
  64. width: 100%;
  65. min-height: calc(100vh - 50px);
  66. .box {
  67. width: 358px;
  68. height: 89px;
  69. background: url('@/assets/images/onlineRollCall/box.png') no-repeat;
  70. background-size: 100% 100%;
  71. display: flex;
  72. //justify-content: center;
  73. align-items: center;
  74. margin-top: 16px;
  75. position: relative;
  76. .box-left {
  77. display: flex;
  78. justify-content: center;
  79. align-items: center;
  80. width: 115px;
  81. }
  82. .icon1 {
  83. display: inline-block;
  84. width: 92px;
  85. height: 93px;
  86. background: url('@/assets/images/onlineRollCall/icon1.png') no-repeat;
  87. background-size: 100% 100%;
  88. }
  89. .icon2 {
  90. display: inline-block;
  91. width: 97px;
  92. height: 94px;
  93. background: url('@/assets/images/onlineRollCall/icon2.png') no-repeat;
  94. background-size: 100% 100%;
  95. }
  96. .icon3 {
  97. display: inline-block;
  98. width: 96px;
  99. height: 89px;
  100. background: url('@/assets/images/onlineRollCall/icon3.png') no-repeat;
  101. background-size: 100% 100%;
  102. }
  103. .label {
  104. color: #414F64;
  105. font-size: 16px;
  106. width: 144px;
  107. text-align: center;
  108. }
  109. }
  110. }
  111. </style>