123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300 |
- <template>
- <div class="choice-space">
- <div class="search">
- <div class="search-floor" @click="showPounp">
- <span class="title">位置:</span>
- <span class="title">A栋134</span>
- <van-icon class="arrow-down" name="arrow-down" />
- </div>
- <div class="search-space">
- <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 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
- v-model:active-id="activeId"
- v-model:main-active-index="activeIndex"
- :items="items"
- />
- </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>
- </template>
- <script lang="ts">
- import { defineComponent, nextTick, onMounted, reactive, toRefs } from "vue";
- import { useRoute,useRouter, onBeforeRouteUpdate } from "vue-router";
- import { Search, TreeSelect, Popup, Checkbox } from "vant";
- import { parseImgUrl } from "@/utils";
- export default defineComponent({
- components: {
- vanSearch: Search,
- VanPopup: Popup,
- VanTreeSelect: TreeSelect,
- VanCheckbox: Checkbox,
- },
- setup() {
- const route: any = useRoute();
- const router: any = useRouter();
- const option1 = [
- { text: "全部商ddddd品", value: 0 },
- { text: "新款商ddd品", value: 1 },
- { text: "活动商ddd品", value: 2 },
- ];
- const option2 = [
- { text: "默认排序", value: "a" },
- { text: "好评排ddd序", value: "b" },
- { text: "销量排序", value: "c" },
- ];
- const items: any = [
- {
- text: "浙江",
- children: [
- { text: "杭州", id: 1 },
- { text: "温州", id: 2 },
- ],
- },
- ];
- const proxyData = reactive({
- parseImgUrl: parseImgUrl,
- checked: false,
- activeId: 1,
- activeIndex: 0,
- items: items,
- route: route,
- option1: option1,
- option2: option2,
- value1: 0,
- value2: "a",
- transitionName: "slide-right",
- showHeader: false,
- showSpaceType: false,
- show: false, // 是否展示选择建筑的页面
- showPounp() {
- proxyData.show = !proxyData.show;
- },
- showSpaceTypePounp() {
- proxyData.showSpaceType = !proxyData.showSpaceType;
- },
- // 设置主空间
- goNext(){
- router.push({name:'setMainSpace'})
- }
- });
- return {
- ...toRefs(proxyData),
- };
- },
- });
- </script>
- <style lang="scss" scoped>
- @import "~@/styles/comMedia.scss";
- .choice-space {
- .search {
- display: flex;
- padding: 0 20px;
- .arrow-down {
- position: absolute;
- right: 16px;
- top: 50%;
- transform: translateY(-50%);
- color: #8d9399;
- }
- .search-floor {
- position: relative;
- width: 226px;
- height: 44px;
- line-height: 42px;
- background: #ffffff;
- border-radius: 22px;
- padding-left: 10px;
- .title {
- display: inline-block;
- vertical-align: middle;
- padding-left: 10px;
- font-style: normal;
- font-weight: 400;
- font-size: 16px;
- line-height: 26px;
- color: #1f2429;
- }
- }
- .search-space {
- display: flex;
- 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 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>
|