SpaceBox.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <template>
  2. <div class="space-home">
  3. <div class="com-search">
  4. <van-search placeholder="搜索办公区"
  5. v-model="searchValue"
  6. @update:model-value="onSearch"
  7. @clear="onCancel" />
  8. </div>
  9. <div class="space-box">
  10. <div
  11. class="space-item"
  12. :key="'spaceItem' + index"
  13. @click="changeSpace(item)"
  14. v-for="(item, index) in spaceData"
  15. >
  16. <span> {{ item.spaceName }}</span>
  17. </div>
  18. </div>
  19. </div>
  20. </template>
  21. <script lang="ts">
  22. import {
  23. defineComponent,
  24. reactive,
  25. toRefs,
  26. onBeforeMount,
  27. onMounted,
  28. ref,
  29. watch,
  30. } from "vue";
  31. import { useRouter } from "vue-router";
  32. import { newNumber, parseImgUrl } from "@/utils";
  33. import { UserActionTypes } from "@/store/modules/user/action-types";
  34. import { useStore } from "@/store";
  35. import { login } from "@/apis/user";
  36. import { Search, Toast } from "vant";
  37. import { setToken } from "@/utils/cookies";
  38. export default defineComponent({
  39. props: {
  40. spaceData: {
  41. type: Array,
  42. default: () => [],
  43. },
  44. },
  45. components: {
  46. vanSearch: Search,
  47. },
  48. setup(props, contx) {
  49. let router: any = useRouter();
  50. const store = useStore();
  51. const spaceData: any = [];
  52. const proxyData = reactive({
  53. spaceData: spaceData,
  54. searchValue:'', // 搜索val
  55. changeSpace(item: any) {
  56. contx.emit("changeSpace", item);
  57. },
  58. // 搜索
  59. onSearch(){
  60. console.log("====")
  61. console.log(proxyData.searchValue)
  62. },
  63. // 取消搜索
  64. onCancel(){
  65. }
  66. });
  67. onMounted(() => {});
  68. watch(
  69. props,
  70. (newProps: any) => {
  71. proxyData.spaceData = newProps.spaceData;
  72. },
  73. {
  74. deep: false,
  75. immediate: true,
  76. }
  77. );
  78. return {
  79. ...toRefs(proxyData),
  80. };
  81. },
  82. });
  83. </script>
  84. <style lang="scss" scoped>
  85. .space-home {
  86. padding: 20px;
  87. width: 100%;
  88. height: 100%;
  89. background: $elBg;
  90. .space-box {
  91. // display: flex;
  92. // padding-top: 20px;
  93. // justify-content: space-between;
  94. .space-item {
  95. display: inline-block;
  96. margin-top: 20px;
  97. margin-right: 2%;
  98. width: 31.8%;
  99. height: 100px;
  100. background: #fff;
  101. box-shadow: inset 0px -1px 0px #e4e6e7;
  102. border-radius: 25px;
  103. span {
  104. display: block;
  105. width: 100%;
  106. line-height: 100px;
  107. text-align: center;
  108. }
  109. &:nth-child(3n) {
  110. margin-right: 0;
  111. }
  112. }
  113. }
  114. }
  115. </style>