123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119 |
- <template>
- <div class="space-home">
- <div class="com-search">
- <van-search placeholder="搜索办公区"
- v-model="searchValue"
- @update:model-value="onSearch"
- @clear="onCancel" />
- </div>
- <div class="space-box">
- <div
- class="space-item"
- :key="'spaceItem' + index"
- @click="changeSpace(item)"
- v-for="(item, index) in spaceData"
- >
- <span> {{ item.spaceName }}</span>
- </div>
- </div>
- </div>
- </template>
-
- <script lang="ts">
- import {
- defineComponent,
- reactive,
- toRefs,
- onBeforeMount,
- onMounted,
- ref,
- watch,
- } from "vue";
- import { useRouter } from "vue-router";
- import { newNumber, parseImgUrl } from "@/utils";
- import { UserActionTypes } from "@/store/modules/user/action-types";
- import { useStore } from "@/store";
- import { login } from "@/apis/user";
- import { Search, Toast } from "vant";
- import { setToken } from "@/utils/cookies";
- export default defineComponent({
- props: {
- spaceData: {
- type: Array,
- default: () => [],
- },
- },
- components: {
- vanSearch: Search,
- },
- setup(props, contx) {
- let router: any = useRouter();
- const store = useStore();
- const spaceData: any = [];
- const proxyData = reactive({
- spaceData: spaceData,
- searchValue:'', // 搜索val
- changeSpace(item: any) {
- contx.emit("changeSpace", item);
- },
- // 搜索
- onSearch(){
- console.log("====")
- console.log(proxyData.searchValue)
- },
- // 取消搜索
- onCancel(){
- }
- });
- onMounted(() => {});
- watch(
- props,
- (newProps: any) => {
- proxyData.spaceData = newProps.spaceData;
- },
- {
- deep: false,
- immediate: true,
- }
- );
- return {
- ...toRefs(proxyData),
- };
- },
- });
- </script>
- <style lang="scss" scoped>
- .space-home {
- padding: 20px;
- width: 100%;
- height: 100%;
- background: $elBg;
- .space-box {
- // display: flex;
- // padding-top: 20px;
- // justify-content: space-between;
- .space-item {
- display: inline-block;
- margin-top: 20px;
- margin-right: 2%;
- width: 31.8%;
- height: 100px;
- background: #fff;
- box-shadow: inset 0px -1px 0px #e4e6e7;
- border-radius: 25px;
- span {
- display: block;
- width: 100%;
- line-height: 100px;
- text-align: center;
- }
- &:nth-child(3n) {
- margin-right: 0;
- }
- }
- }
- }
- </style>
-
|