choiceSpace.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
  1. <template>
  2. <div class="choice-space">
  3. <div class="search">
  4. <div class="search-floor" @click="showPounp">
  5. <span class="title">位置:</span>
  6. <span class="title">A栋134</span>
  7. <van-icon class="arrow-down" name="arrow-down" />
  8. </div>
  9. <div class="search-space">
  10. <div class="com-select">
  11. <div class="com-text" @click="showSpaceTypePounp">
  12. <span>ddfff</span>
  13. <van-icon class="arrow-down" name="arrow-down" />
  14. </div>
  15. </div>
  16. <van-search class="search-box" placeholder="请输入搜索关键词" />
  17. <div class="search-icon">
  18. <img :src="parseImgUrl('search-icon', 'search-icon.svg')" alt="" />
  19. </div>
  20. </div>
  21. </div>
  22. <div class="space-content">
  23. <div class="space-box" v-for="(item, index) in 10" :key="'space' + index">
  24. <div class="space-item">
  25. <span class="item-text"
  26. >项目名称项目名称项目名称项目名称项目名称项目名称</span
  27. >
  28. <van-checkbox
  29. class="item-check"
  30. v-model="checked"
  31. shape="square"
  32. ></van-checkbox>
  33. </div>
  34. </div>
  35. </div>
  36. <div class="next-btn-box">
  37. <button @click="goNext">下一步</button>
  38. </div>
  39. <!--弹出模块-->
  40. <van-popup v-model:show="show" position="bottom">
  41. <van-tree-select
  42. v-model:active-id="activeId"
  43. v-model:main-active-index="activeIndex"
  44. :items="items"
  45. />
  46. </van-popup>
  47. <van-popup v-model:show="showSpaceType" position="bottom">
  48. <div class="space-type">
  49. <span>ddd</span>
  50. <span>ddd</span>
  51. <span>ddd</span>
  52. </div>
  53. </van-popup>
  54. </div>
  55. </template>
  56. <script lang="ts">
  57. import { defineComponent, nextTick, onMounted, reactive, toRefs } from "vue";
  58. import { useRoute,useRouter, onBeforeRouteUpdate } from "vue-router";
  59. import { Search, TreeSelect, Popup, Checkbox } from "vant";
  60. import { parseImgUrl } from "@/utils";
  61. export default defineComponent({
  62. components: {
  63. vanSearch: Search,
  64. VanPopup: Popup,
  65. VanTreeSelect: TreeSelect,
  66. VanCheckbox: Checkbox,
  67. },
  68. setup() {
  69. const route: any = useRoute();
  70. const router: any = useRouter();
  71. const option1 = [
  72. { text: "全部商ddddd品", value: 0 },
  73. { text: "新款商ddd品", value: 1 },
  74. { text: "活动商ddd品", value: 2 },
  75. ];
  76. const option2 = [
  77. { text: "默认排序", value: "a" },
  78. { text: "好评排ddd序", value: "b" },
  79. { text: "销量排序", value: "c" },
  80. ];
  81. const items: any = [
  82. {
  83. text: "浙江",
  84. children: [
  85. { text: "杭州", id: 1 },
  86. { text: "温州", id: 2 },
  87. ],
  88. },
  89. ];
  90. const proxyData = reactive({
  91. parseImgUrl: parseImgUrl,
  92. checked: false,
  93. activeId: 1,
  94. activeIndex: 0,
  95. items: items,
  96. route: route,
  97. option1: option1,
  98. option2: option2,
  99. value1: 0,
  100. value2: "a",
  101. transitionName: "slide-right",
  102. showHeader: false,
  103. showSpaceType: false,
  104. show: false, // 是否展示选择建筑的页面
  105. showPounp() {
  106. proxyData.show = !proxyData.show;
  107. },
  108. showSpaceTypePounp() {
  109. proxyData.showSpaceType = !proxyData.showSpaceType;
  110. },
  111. // 设置主空间
  112. goNext(){
  113. router.push({name:'setMainSpace'})
  114. }
  115. });
  116. return {
  117. ...toRefs(proxyData),
  118. };
  119. },
  120. });
  121. </script>
  122. <style lang="scss" scoped>
  123. @import "~@/styles/comMedia.scss";
  124. .choice-space {
  125. .search {
  126. display: flex;
  127. padding: 0 20px;
  128. .arrow-down {
  129. position: absolute;
  130. right: 16px;
  131. top: 50%;
  132. transform: translateY(-50%);
  133. color: #8d9399;
  134. }
  135. .search-floor {
  136. position: relative;
  137. width: 226px;
  138. height: 44px;
  139. line-height: 42px;
  140. background: #ffffff;
  141. border-radius: 22px;
  142. padding-left: 10px;
  143. .title {
  144. display: inline-block;
  145. vertical-align: middle;
  146. padding-left: 10px;
  147. font-style: normal;
  148. font-weight: 400;
  149. font-size: 16px;
  150. line-height: 26px;
  151. color: #1f2429;
  152. }
  153. }
  154. .search-space {
  155. display: flex;
  156. flex: 1;
  157. margin-left: 20px;
  158. .com-select {
  159. position: relative;
  160. width: 150px;
  161. height: 44px;
  162. // line-height: 44px;
  163. border-radius: 22px 0 0 22px;
  164. background: #fff;
  165. .com-text {
  166. height: 44px;
  167. line-height: 44px;
  168. padding-left: 30px;
  169. }
  170. }
  171. .search-box {
  172. flex: 1;
  173. height: 44px;
  174. }
  175. .search-icon {
  176. display: inline-block;
  177. background: #fff;
  178. // height: 44px;
  179. // line-height: 44px;
  180. // width: 42px;
  181. padding-right: 20px;
  182. border-radius: 0 22px 22px 0;
  183. img {
  184. width: 24px;
  185. height: 24px;
  186. margin-top: 10px;
  187. }
  188. // height: 22px;
  189. }
  190. }
  191. }
  192. .space-content {
  193. // display: flex;
  194. width: 100%;
  195. padding-top: 20px;
  196. padding-right: 20px;
  197. padding-left: 4px;
  198. padding-bottom: 70px;
  199. // justify-content: space-between;
  200. .space-box {
  201. // display: i;
  202. display: inline-block;
  203. width: 33.33%;
  204. height: 100px;
  205. // background: #fff;
  206. padding-left: 20px;
  207. margin-bottom: 20px;
  208. .space-item {
  209. display: flex;
  210. position: relative;
  211. width: 100%;
  212. height: 100%;
  213. // line-height: 100px;
  214. // line-height: 1;
  215. background: #ffffff;
  216. /* divider/down */
  217. box-shadow: inset 0px -1px 0px #e4e6e7;
  218. border-radius: 25px;
  219. background: #fff;
  220. .item-text {
  221. display: inline-block;
  222. width: calc(100% - 60px);
  223. padding-left: 20px;
  224. position: absolute;
  225. left: 0px;
  226. top: 50%;
  227. transform: translateY(-50%);
  228. }
  229. .item-check {
  230. position: absolute;
  231. right: 28px;
  232. top: 50%;
  233. width: 24px;
  234. height: 24px;
  235. transform: translateY(-50%);
  236. }
  237. }
  238. }
  239. }
  240. .space-type {
  241. padding: 20px;
  242. span {
  243. display: block;
  244. font-size: 16px;
  245. padding: 10px 0;
  246. }
  247. }
  248. .next-btn-box {
  249. position: fixed;
  250. width: 100%;
  251. height: 60px;
  252. left: 0;
  253. bottom: 0%;
  254. background: #ffffff;
  255. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.05),
  256. 0px 4px 15px rgba(0, 0, 0, 0.05);
  257. text-align: center;
  258. button {
  259. width: 46%;
  260. height: 40px;
  261. font-family: "PingFang SC";
  262. font-style: normal;
  263. font-weight: 500;
  264. font-size: 20px;
  265. line-height: 24px;
  266. color: $elActiveText;
  267. margin-top: 10px;
  268. background: $elActiveColor;
  269. // opacity: 0.8;
  270. border-radius: 16px;
  271. border: none;
  272. &:hover {
  273. // opacity: 0.1;
  274. background: $elActiveColor;
  275. }
  276. }
  277. }
  278. }
  279. </style>
  280. <style lang="scss">
  281. .choice-space {
  282. .search-box {
  283. .van-search__content {
  284. background: transparent;
  285. border-left: 1px solid #d9d9d9;
  286. }
  287. .van-field__left-icon {
  288. display: none;
  289. }
  290. }
  291. .van-checkbox__icon--checked .van-icon {
  292. background-color: $elActiveColor !important;
  293. border-color: $elActiveColor !important;
  294. }
  295. }
  296. </style>