样式调整

src/pages/facility/index/index.vue

@@ -5,21 +5,14 @@
         <wd-search :placeholder-left="true" placeholder="请输入内容" v-model="state.text">
           <template #suffix>
             <view style="display: flex;align-items: center;margin: 0 20rpx;">
-              <view style="margin-right: 20rpx;">
-                <wd-button size="small" @click="onClickSearch">
-                  搜索
-                </wd-button>
-              </view>
-              <view>
-                <wd-button type="info" size="small" @click="onClickReset">
-                  重置
-                </wd-button>
-              </view>
+              <wd-button size="small" @click="onClickSearch">
+                搜索
+              </wd-button>
             </view>
           </template>
         </wd-search>
-        <wd-tabs slidable="always" v-model="state.tabValue" @click="onclickFacilityList()">
-          <wd-tab v-for="(item, index) in state.tabList" :title="item.label" :key="index"/>
+        <wd-tabs slidable="always" v-model="state.tabValue" @change="onChangeTabs">
+          <wd-tab v-for="(item, index) in state.tabList" :title="item.label" :name="item.value" :key="index" />
         </wd-tabs>
       </view>
     </wd-sticky>
@@ -50,11 +43,11 @@ import { apis } from '@/apis';
 
 interface State {
   text?: string,
-  tabValue?: string,
   tabList: {
     label: string,
     value: string,
   }[],
+  tabValue?: string,
   list: {
     id: string,
     url: string,
@@ -63,7 +56,7 @@ interface State {
     description: string,
   }[],
   page: {
-    pageNum: number,
+    pageNumber: number,
     pageSize: number,
     total: number,
   },
@@ -71,11 +64,11 @@ interface State {
 
 const state = reactive<State>({
   text: undefined,
-  tabValue: undefined,
   tabList: [],
+  tabValue: undefined,
   list: [],
   page: {
-    pageNum: 1,
+    pageNumber: 1,
     pageSize: 20,
     total: 0,
   },
@@ -95,8 +88,8 @@ const api = {
           value: item.dictValue,
         }
       });
-      state.tabValue = list.length ? list[0].value : undefined;
       state.tabList = list;
+      state.tabValue = list.length ? list[0].value : undefined;
     } catch (error: any) {
       console.error(error);
     }
@@ -110,7 +103,7 @@ const api = {
       const data = {
         facilitiesTitle: state.text,
         dictType: state.tabValue,
-        pageNum: state.page.pageNum,
+        pageNum: state.page.pageNumber,
         pageSize: state.page.pageSize,
       };
       const res = await apis.fetchFacilityList(data);
@@ -137,30 +130,27 @@ const api = {
 }
 
 const init = async () => {
-  uni.showLoading({
-    title: '加载中',
-  });
   // 获取区域列表
-  api.fetchRegionList();
+  await api.fetchRegionList();
   // 获取设施列表
-  api.fetchFacilityList();
-  uni.hideLoading();
+  await api.fetchFacilityList();
 };
 
 onShow(() => {
   state.page = {
     ...state.page,
-    pageNum: 1,
+    pageNumber: 1,
   };
   init();
 });
 
+// 更改分页
 const onChangePagination = async () => {
-  const { pageNum, pageSize, total } = state.page;
-  if (total > pageNum * pageSize) {
+  const { pageNumber, pageSize, total } = state.page;
+  if (total > pageNumber * pageSize) {
     state.page = {
       ...state.page,
-      pageNum: pageNum + 1,
+      pageNumber: pageNumber + 1,
     }
     // 获取设施列表
     await api.fetchFacilityList(true);
@@ -175,19 +165,17 @@ onReachBottom(() => {
 const onClickSearch = async () => {
   state.page = {
     ...state.page,
-    pageNum: 1,
+    pageNumber: 1,
   };
   // 获取设施列表
   await api.fetchFacilityList();
 }
 
-// 点击重置
-const onClickReset = async () => {
-  state.text = undefined;
-  state.tabValue = undefined
+// 更改标签页
+const onChangeTabs = async ({ index, value }: { index: number, value: string }) => {
   state.page = {
     ...state.page,
-    pageNum: 1,
+    pageNumber: 1,
   };
   // 获取设施列表
   await api.fetchFacilityList();
@@ -199,16 +187,6 @@ const onClickNavigate = (id: string) => {
     url: `/pages/facility/facilityDetail/index?id=${id}`,
   });
 }
-
-// 点击搜索
-const onclickFacilityList = async () => {
-  state.page = {
-    ...state.page,
-    pageNum: 1,
-  };
-  // 获取设施列表
-  await api.fetchFacilityList();
-}
 </script>
 
 <style lang="scss" scoped>

src/pages/home/houseDetail/index.vue

@@ -7,21 +7,11 @@
         {{ state.info.title }}
       </view>
       <view class="home-houseDetail-content-chunk">
-        <view style="display: flex;" v-if="state.info.size">
-          <view>
-            {{ state.info.size }}m²
-          </view>
-          <view style="margin:0 20rpx;">
-            |
-          </view>
+        <view v-if="state.info.size">
+          {{ state.info.size }}m²
         </view>
-        <view style="display: flex;" v-if="state.info.direction">
-          <view>
-            {{ state.info.direction }}
-          </view>
-          <view style="margin:0 20rpx;">
-            |
-          </view>
+        <view v-if="state.info.direction">
+          {{ state.info.direction }}
         </view>
         <view v-if="state.info.floorNum">
           {{ state.info.floorNum }}楼
@@ -159,6 +149,16 @@ const onClickSwiper = (list: string[]) => {
       color: #717376;
       display: flex;
       align-items: center;
+
+      view {
+        padding-right: 20rpx;
+        border-right: 2rpx solid #717376;
+        margin-right: 20rpx;
+      }
+
+      view:last-child {
+        border-right: none;
+      }
     }
 
     &-text {