|
@@ -1,39 +1,75 @@
|
|
<template>
|
|
<template>
|
|
- <div class="choice-space content-box">
|
|
|
|
|
|
+ <div class="choice-space">
|
|
<div class="search">
|
|
<div class="search">
|
|
<div class="search-floor" @click="showPounp">
|
|
<div class="search-floor" @click="showPounp">
|
|
<span class="title">位置:</span>
|
|
<span class="title">位置:</span>
|
|
<span class="title">A栋134</span>
|
|
<span class="title">A栋134</span>
|
|
- <!-- <img :src="parseImgUrl('page-officehome','loading.svg')" alt=""> -->
|
|
|
|
|
|
+ <van-icon class="arrow-down" name="arrow-down" />
|
|
</div>
|
|
</div>
|
|
<div class="search-space">
|
|
<div class="search-space">
|
|
- <van-search class="name" placeholder="请输入搜索关键词" />
|
|
|
|
|
|
+ <div class="com-select">
|
|
|
|
+ <div class="com-text" @click="showSpaceTypePounp">
|
|
|
|
+ <span>ddfff</span>
|
|
|
|
+ <van-icon class="arrow-down" name="arrow-down" />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <van-search class="search-box" placeholder="请输入搜索关键词" />
|
|
|
|
+ <div class="search-icon">
|
|
|
|
+ <img :src="parseImgUrl('search-icon', 'search-icon.svg')" alt="" />
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <van-popup v-model:show="show" position="left">
|
|
|
|
|
|
+ <div class="space-content">
|
|
|
|
+ <div class="space-box" v-for="(item, index) in 10" :key="'space' + index">
|
|
|
|
+ <div class="space-item">
|
|
|
|
+ <span class="item-text"
|
|
|
|
+ >项目名称项目名称项目名称项目名称项目名称项目名称</span
|
|
|
|
+ >
|
|
|
|
+ <van-checkbox
|
|
|
|
+ class="item-check"
|
|
|
|
+ v-model="checked"
|
|
|
|
+ shape="square"
|
|
|
|
+ ></van-checkbox>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="next-btn-box">
|
|
|
|
+ <button @click="goNext">下一步</button>
|
|
|
|
+ </div>
|
|
|
|
+ <!--弹出模块-->
|
|
|
|
+ <van-popup v-model:show="show" position="bottom">
|
|
<van-tree-select
|
|
<van-tree-select
|
|
v-model:active-id="activeId"
|
|
v-model:active-id="activeId"
|
|
v-model:main-active-index="activeIndex"
|
|
v-model:main-active-index="activeIndex"
|
|
:items="items"
|
|
:items="items"
|
|
/>
|
|
/>
|
|
</van-popup>
|
|
</van-popup>
|
|
|
|
+ <van-popup v-model:show="showSpaceType" position="bottom">
|
|
|
|
+ <div class="space-type">
|
|
|
|
+ <span>ddd</span>
|
|
|
|
+ <span>ddd</span>
|
|
|
|
+ <span>ddd</span>
|
|
|
|
+ </div>
|
|
|
|
+ </van-popup>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
import { defineComponent, nextTick, onMounted, reactive, toRefs } from "vue";
|
|
import { defineComponent, nextTick, onMounted, reactive, toRefs } from "vue";
|
|
-import { useRoute, onBeforeRouteUpdate } from "vue-router";
|
|
|
|
-import { Search, TreeSelect, Popup } from "vant";
|
|
|
|
-import { parseImgUrl } from '@/utils'
|
|
|
|
|
|
+import { useRoute,useRouter, onBeforeRouteUpdate } from "vue-router";
|
|
|
|
+import { Search, TreeSelect, Popup, Checkbox } from "vant";
|
|
|
|
+import { parseImgUrl } from "@/utils";
|
|
|
|
|
|
export default defineComponent({
|
|
export default defineComponent({
|
|
components: {
|
|
components: {
|
|
vanSearch: Search,
|
|
vanSearch: Search,
|
|
VanPopup: Popup,
|
|
VanPopup: Popup,
|
|
VanTreeSelect: TreeSelect,
|
|
VanTreeSelect: TreeSelect,
|
|
|
|
+ VanCheckbox: Checkbox,
|
|
},
|
|
},
|
|
setup() {
|
|
setup() {
|
|
const route: any = useRoute();
|
|
const route: any = useRoute();
|
|
|
|
+ const router: any = useRouter();
|
|
const option1 = [
|
|
const option1 = [
|
|
{ text: "全部商ddddd品", value: 0 },
|
|
{ text: "全部商ddddd品", value: 0 },
|
|
{ text: "新款商ddd品", value: 1 },
|
|
{ text: "新款商ddd品", value: 1 },
|
|
@@ -52,16 +88,10 @@ export default defineComponent({
|
|
{ text: "温州", id: 2 },
|
|
{ text: "温州", id: 2 },
|
|
],
|
|
],
|
|
},
|
|
},
|
|
- {
|
|
|
|
- text: "江苏",
|
|
|
|
- children: [
|
|
|
|
- { text: "南京", id: 5 },
|
|
|
|
- { text: "无锡", id: 6 },
|
|
|
|
- ],
|
|
|
|
- },
|
|
|
|
];
|
|
];
|
|
const proxyData = reactive({
|
|
const proxyData = reactive({
|
|
- parseImgUrl:parseImgUrl,
|
|
|
|
|
|
+ parseImgUrl: parseImgUrl,
|
|
|
|
+ checked: false,
|
|
activeId: 1,
|
|
activeId: 1,
|
|
activeIndex: 0,
|
|
activeIndex: 0,
|
|
items: items,
|
|
items: items,
|
|
@@ -72,9 +102,17 @@ export default defineComponent({
|
|
value2: "a",
|
|
value2: "a",
|
|
transitionName: "slide-right",
|
|
transitionName: "slide-right",
|
|
showHeader: false,
|
|
showHeader: false,
|
|
- show: false, // 是否展示选择建筑的页面
|
|
|
|
- showPounp(){
|
|
|
|
- proxyData.show=!proxyData.show
|
|
|
|
|
|
+ showSpaceType: false,
|
|
|
|
+ show: false, // 是否展示选择建筑的页面
|
|
|
|
+ showPounp() {
|
|
|
|
+ proxyData.show = !proxyData.show;
|
|
|
|
+ },
|
|
|
|
+ showSpaceTypePounp() {
|
|
|
|
+ proxyData.showSpaceType = !proxyData.showSpaceType;
|
|
|
|
+ },
|
|
|
|
+ // 设置主空间
|
|
|
|
+ goNext(){
|
|
|
|
+ router.push({name:'setMainSpace'})
|
|
}
|
|
}
|
|
});
|
|
});
|
|
return {
|
|
return {
|
|
@@ -84,29 +122,179 @@ export default defineComponent({
|
|
});
|
|
});
|
|
</script>
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
|
+@import "~@/styles/comMedia.scss";
|
|
.choice-space {
|
|
.choice-space {
|
|
.search {
|
|
.search {
|
|
display: flex;
|
|
display: flex;
|
|
|
|
+ padding: 0 20px;
|
|
|
|
+ .arrow-down {
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 16px;
|
|
|
|
+ top: 50%;
|
|
|
|
+ transform: translateY(-50%);
|
|
|
|
+ color: #8d9399;
|
|
|
|
+ }
|
|
.search-floor {
|
|
.search-floor {
|
|
- // position: relative;
|
|
|
|
|
|
+ position: relative;
|
|
width: 226px;
|
|
width: 226px;
|
|
height: 44px;
|
|
height: 44px;
|
|
- line-height: 44px;
|
|
|
|
|
|
+ line-height: 42px;
|
|
background: #ffffff;
|
|
background: #ffffff;
|
|
border-radius: 22px;
|
|
border-radius: 22px;
|
|
|
|
+ padding-left: 10px;
|
|
.title {
|
|
.title {
|
|
display: inline-block;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
vertical-align: middle;
|
|
padding-left: 10px;
|
|
padding-left: 10px;
|
|
|
|
+ font-style: normal;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ line-height: 26px;
|
|
|
|
+ color: #1f2429;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.search-space {
|
|
.search-space {
|
|
|
|
+ display: flex;
|
|
flex: 1;
|
|
flex: 1;
|
|
|
|
+ margin-left: 20px;
|
|
|
|
+ .com-select {
|
|
|
|
+ position: relative;
|
|
|
|
+ width: 150px;
|
|
|
|
+ height: 44px;
|
|
|
|
+ // line-height: 44px;
|
|
|
|
+ border-radius: 22px 0 0 22px;
|
|
|
|
+ background: #fff;
|
|
|
|
+ .com-text {
|
|
|
|
+ height: 44px;
|
|
|
|
+ line-height: 44px;
|
|
|
|
+ padding-left: 30px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .search-box {
|
|
|
|
+ flex: 1;
|
|
|
|
+ height: 44px;
|
|
|
|
+ }
|
|
|
|
+ .search-icon {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ background: #fff;
|
|
|
|
+ // height: 44px;
|
|
|
|
+ // line-height: 44px;
|
|
|
|
+ // width: 42px;
|
|
|
|
+ padding-right: 20px;
|
|
|
|
+ border-radius: 0 22px 22px 0;
|
|
|
|
+ img {
|
|
|
|
+ width: 24px;
|
|
|
|
+ height: 24px;
|
|
|
|
+ margin-top: 10px;
|
|
|
|
+ }
|
|
|
|
+ // height: 22px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .space-content {
|
|
|
|
+ // display: flex;
|
|
|
|
+ width: 100%;
|
|
|
|
+ padding-top: 20px;
|
|
|
|
+ padding-right: 20px;
|
|
|
|
+ padding-left: 4px;
|
|
|
|
+ padding-bottom: 70px;
|
|
|
|
+ // justify-content: space-between;
|
|
|
|
+ .space-box {
|
|
|
|
+ // display: i;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 33.33%;
|
|
|
|
+ height: 100px;
|
|
|
|
+ // background: #fff;
|
|
|
|
+ padding-left: 20px;
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+ .space-item {
|
|
|
|
+ display: flex;
|
|
|
|
+ position: relative;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ // line-height: 100px;
|
|
|
|
+ // line-height: 1;
|
|
|
|
+ background: #ffffff;
|
|
|
|
+ /* divider/down */
|
|
|
|
+ box-shadow: inset 0px -1px 0px #e4e6e7;
|
|
|
|
+ border-radius: 25px;
|
|
|
|
+ background: #fff;
|
|
|
|
+ .item-text {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: calc(100% - 60px);
|
|
|
|
+ padding-left: 20px;
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 0px;
|
|
|
|
+ top: 50%;
|
|
|
|
+ transform: translateY(-50%);
|
|
|
|
+ }
|
|
|
|
+ .item-check {
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 28px;
|
|
|
|
+ top: 50%;
|
|
|
|
+ width: 24px;
|
|
|
|
+ height: 24px;
|
|
|
|
+ transform: translateY(-50%);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .space-type {
|
|
|
|
+ padding: 20px;
|
|
|
|
+ span {
|
|
|
|
+ display: block;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ padding: 10px 0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .next-btn-box {
|
|
|
|
+ position: fixed;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 60px;
|
|
|
|
+ left: 0;
|
|
|
|
+ bottom: 0%;
|
|
|
|
+ background: #ffffff;
|
|
|
|
+ box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.05),
|
|
|
|
+ 0px 4px 15px rgba(0, 0, 0, 0.05);
|
|
|
|
+ text-align: center;
|
|
|
|
+ button {
|
|
|
|
+ width: 46%;
|
|
|
|
+ height: 40px;
|
|
|
|
+ font-family: "PingFang SC";
|
|
|
|
+ font-style: normal;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ line-height: 24px;
|
|
|
|
+ color: $elActiveText;
|
|
|
|
+ margin-top: 10px;
|
|
|
|
+ background: $elActiveColor;
|
|
|
|
+ // opacity: 0.8;
|
|
|
|
+ border-radius: 16px;
|
|
|
|
+ border: none;
|
|
|
|
+ &:hover {
|
|
|
|
+ // opacity: 0.1;
|
|
|
|
+ background: $elActiveColor;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
-
|
|
|
|
|
|
+.choice-space {
|
|
|
|
+ .search-box {
|
|
|
|
+ .van-search__content {
|
|
|
|
+ background: transparent;
|
|
|
|
+ border-left: 1px solid #d9d9d9;
|
|
|
|
+ }
|
|
|
|
+ .van-field__left-icon {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .van-checkbox__icon--checked .van-icon {
|
|
|
|
+ background-color: $elActiveColor !important;
|
|
|
|
+ border-color: $elActiveColor !important;
|
|
|
|
+ }
|
|
|
|
+}
|
|
</style>
|
|
</style>
|
|
|
|
|