feats

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
-    <router-view />
-    
+    <!-- 加 key 是为了强制路由刷新 -->
+    <router-view :key="$route.fullPath" />
   </div>
 </template>
 

src/view/secondhand/detail/components/Base.vue

@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <x-field label="户型">
+      {{roomType}}
+    </x-field>
+
+    <x-field label="朝向">
+      {{getDictLabel(roomInfo.aspect, 'aspect')}}
+    </x-field>
+
+    <x-field label="装修">
+      {{getDictLabel(roomInfo.decoration, 'decoration')}}
+    </x-field>
+
+    <x-field label="房屋用途">
+      {{getDictLabel(roomInfo.purpose, 'purpose')}}
+    </x-field>
+
+    <x-field label="建筑类型">
+      {{getDictLabel(roomInfo.buildType, 'build_type')}}
+    </x-field>
+
+    <x-field label="配备电梯">
+      {{getDictLabel(roomInfo.elevator, 'elevator')}}
+    </x-field>
+
+    <x-field label="抵押信息">
+      {{getDictLabel(roomInfo.isMortgage, 'mortgage') || '无'}}
+    </x-field>
+
+    <x-field label="税费">
+      {{getDictLabel(roomInfo.buildTime, 'build_time') || '未知'}}
+    </x-field>
+
+    <x-field label="来源">
+      {{getDictLabel(roomInfo.sourceFrom, 'sourceFrom')}}
+    </x-field>
+
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue'
+import { useModel } from '@zjxpcyc/vue-tiny-store'
+
+export default {
+  props: {
+    roomInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const { dicts, getDict } = useModel('dicts')
+
+    // 朝向
+    if (!dicts.aspect || !dicts.aspect.length) {
+      getDict('aspect')
+    }
+
+    // 装修
+    if (!dicts.decoration || !dicts.decoration.length) {
+      getDict('decoration')
+    }
+
+    // 房屋用途
+    if (!dicts.purpose || !dicts.purpose.length) {
+      getDict('purpose')
+    }
+
+    // 建筑类型
+    if (!dicts['build_type'] || !dicts['build_type'].length) {
+      getDict('build_type')
+    }
+
+    // 电梯
+    if (!dicts.elevator || !dicts.elevator.length) {
+      getDict('elevator')
+    }
+
+    // 抵押信息
+    if (!dicts.mortgage || !dicts.mortgage.length) {
+      getDict('mortgage')
+    }
+
+    // 税费
+    if (!dicts['build_time'] || !dicts['build_time'].length) {
+      getDict('build_time')
+    }
+
+    // 来源
+    if (!dicts.sourceFrom || !dicts.sourceFrom.length) {
+      getDict('sourceFrom')
+    }
+
+    const roomType = computed(() => {
+      const [a, b, c, d] = (props.roomInfo.roomType || '').split(',')
+      return `${a || ''}室 ${b || '0'}厅 ${c || '0'}厨 ${d || '0'}卫`
+    })
+
+    // 获取字典对应名称
+    const getDictLabel = (val, key) => {
+      return dicts[key]?.filter(x => x.code === val)[0]?.name
+    }
+
+    return {
+      roomType,
+      getDictLabel,
+    }
+  }
+}
+</script>

src/view/secondhand/detail/components/Estate.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <x-field label="物业费">
+      {{buildInfo.propertyPrice}} 元/m²/月
+    </x-field>
+    <x-field label="建筑年代">
+      {{buildInfo.buildYear}}
+    </x-field>
+    <x-field label="均价">
+      {{buildInfo.averagePrice}}
+    </x-field>
+    <x-field label="开发商">
+      {{buildInfo.developer}}
+    </x-field>
+    <x-field label="物业公司">
+      {{buildInfo.propertyCompany}}
+    </x-field>
+  </div>
+
+</template>
+
+<script>
+export default {
+  props: {
+    buildInfo: Object,
+    default: () => ({})
+  },
+  setup() {
+    //
+  }
+}
+</script>

src/view/secondhand/detail/index.vue

@@ -33,14 +33,14 @@
             <template #title>
               <div>基础信息</div>
             </template>
-            <Contextc :options="baseInformationOptions"></Contextc>
+            <RoomBase :room-info="detail.roomInfo" />
           </van-collapse-item>
 
           <van-collapse-item name="2">
             <template #title>
               <div>物业信息</div>
             </template>
-            <Contextc :options="propertyInformationOptions"></Contextc>
+            <RoomEstate :build-info="detail.buildInfo" />
           </van-collapse-item>
 
           <van-collapse-item name="role">
@@ -48,7 +48,7 @@
               <div>角色人</div>
             </template>
             <x-loading x-id="room.role" tips="请稍等...">
-              <Contextc :options="roleInformationOptions"></Contextc>
+              <!-- <Contextc :options="roleInformationOptions"></Contextc> -->
             </x-loading>
           </van-collapse-item>
           
@@ -125,11 +125,13 @@ import {
 } from "vant";
 import { useModel } from "@zjxpcyc/vue-tiny-store"
 import RoomMain from './components/Main'
+import RoomBase from './components/Base'
+import RoomEstate from './components/Estate'
 import RoomAuth from './components/Auth'
 import RoomKey from './components/Key'
 import RoomFollow from './components/Follow'
 import RoomLook from './components/Look'
-import Contextc from "../../../components/contextC"
+// import Contextc from "../../../components/contextC"
 // import { router } from "../../../router";
 
 export default {
@@ -150,9 +152,10 @@ export default {
     [Field.name]: Field,
     [Dialog.Component.name]: Dialog.Component,
 
-    Contextc: Contextc,
     Swiper: Swiper,
     RoomMain,
+    RoomBase,
+    RoomEstate,
     RoomAuth,
     RoomKey,
     RoomFollow,
@@ -170,91 +173,13 @@ export default {
     const phoneShow = ref(false)
     const collapseItem = ref()
     const phone = ref("")
-    const showInfo = ref(false)
 
     const { detail, roomRole, getDetail, getRole } = useModel("room")
-    const { dicts, getDict } = useModel("dicts")
 
     onMounted(() => {
       getDetail(roomId);
     });
 
-    // 字典
-    // 朝向
-    const aspectOptions = computed(() => {
-      const aspectDict = dicts.aspect || [];
-      if (!aspectDict.length) {
-        getDict("aspect");
-      }
-      console.log(aspectDict, "aspectDict");
-      return aspectDict;
-    });
-    // 装修
-    const decorationOptions = computed(() => {
-      const decorationDict = dicts.decoration || [];
-      if (!decorationDict.length) {
-        getDict("decoration");
-      }
-
-      return decorationDict;
-    });
-    //房屋用途
-    const purposeOptions = computed(() => {
-      const purposeDict = dicts.purpose || [];
-      if (!purposeDict.length) {
-        getDict("purpose");
-      }
-
-      return purposeDict;
-    });
-    //建筑类型
-    const buildTypeOptions = computed(() => {
-      const buildTypeDict = dicts.buildType || [];
-      if (!buildTypeDict.length) {
-        getDict("build_type");
-      }
-
-      return buildTypeDict;
-    });
-
-    //配备电梯
-    const elevatorOptions = computed(() => {
-      const elevatorDict = dicts.elevator || [];
-      if (!elevatorDict.length) {
-        getDict("elevator");
-      }
-
-      return elevatorDict;
-    });
-    // 抵押信息
-    const mortgageOptions = computed(() => {
-      const mortgageDict = dicts.mortgage || [];
-      if (!mortgageDict.length) {
-        getDict("mortgage");
-      }
-
-      return mortgageDict;
-    });
-    // 税费
-    const buildTimeOptions = computed(() => {
-      const buildTimeDict = dicts.buildTime || [];
-      if (!buildTimeDict.length) {
-        getDict("build_time");
-      }
-
-      return buildTimeDict;
-    });
-
-    // 来源
-    const sourceFromOptions = computed(() => {
-      const sourceFromDict = dicts.sourceFrom || [];
-      if (!sourceFromDict.length) {
-        getDict("sourceFrom");
-      }
-
-      return sourceFromDict;
-    });
-
     // 通过 actions 属性来定义菜单选项
     const actions = [
       { text: "设置房源保护", value: "1" },
@@ -299,264 +224,7 @@ export default {
         router.push("/resc");
       }
     };
-    const onLookClick = () => {
-      console.log("onLookClick");
-      if (showInfo.value) return;
-    };
-    const getRoomFloor = (data) => {
-      const [a, b, c] = (data || "").split(",");
-
-      return `${a || ""}/${b || ""}(${c || ""})`;
-    };
-
-    // 房源信息
-    const housingInformationOptions = computed(() => [
-      {
-        name: "所属楼盘",
-        value: detail.building?.buildingName,
-        span: 24,
-      },
-      {
-        name: "房源id",
-        value: `${detail.roomInfo?.roomCode || ""}${detail.roomInfo?.id || ""}`,
-      },
-      {
-        name: "楼层",
-        value: getRoomFloor(detail.roomInfo?.roomFloor),
-      },
-      {
-        name: "所属区县",
-        value: detail.roomCity?.areaName,
-      },
-      {
-        name: "面积",
-        value: detail.roomInfo?.acreage + "㎡",
-      },
-      {
-        name: "所属商圈",
-        value: detail.roomBusiness?.areaName,
-      },
-      {
-        name: "价格",
-        value: `${detail.roomInfo?.totalPrice}万元/${(
-          (detail.roomInfo?.totalPrice * 1000) /
-          detail.roomInfo?.acreage
-        ).toFixed(2)}元/㎡`,
-      },
-      {
-        name: "楼房号",
-        value: showInfo.value ? detail.roomInfo?.roomNum : "敏感信息",
-      },
-      {
-        name: "单元",
-        value: showInfo.value ? detail.roomInfo?.roomUnit : "敏感信息",
-      },
-      {
-        name: "业主姓名",
-        value: showInfo.value ? detail.roomInfo?.ownerName : "敏感信息",
-      },
-      {
-        name: "楼栋",
-        value: showInfo.value ? detail.roomInfo?.roomBuild : "敏感信息",
-      },
-      {
-        name: "业主电话",
-        value: showInfo.value
-          ? (detail.roomInfo?.ownerTel || "").split(",")[0]
-          : "敏感信息",
-      },
-      {
-        name: ' ',
-        value: detail.leftSecurityNum,
-        type: "SECURITY",
-        click: () => onLookClick(),
-      },
-    ]);
-
-    const getRoomType = (data) => {
-      const [a, b, c, d] = (data || "").split(",");
-
-      return `${a || ""}室 ${b || ""}厅 ${c || ""}厨 ${d || ""}卫`;
-    };
-    // 基本信息
-    const baseInformationOptions = computed(() => [
-      {
-        name: "户型",
-        value: getRoomType(detail.roomInfo?.roomType),
-      },
-      {
-        name: "朝向",
-        value: aspectOptions.value.filter(
-          (x) => x.value == detail.roomInfo?.aspect
-        )[0]?.text,
-      },
-      {
-        name: "装修",
-        value: decorationOptions.value.filter(
-          (x) => x.value == detail.roomInfo?.decoration
-        )[0]?.text,
-      },
-      {
-        name: "房屋用途",
-        value: purposeOptions.value.filter(
-          (x) => x.value == detail.roomInfo?.purpose
-        )[0]?.text,
-      },
-      {
-        name: "建筑类型",
-        value: buildTypeOptions.value.filter(
-          (x) => x.value == detail.roomInfo?.buildType
-        )[0]?.text,
-      },
-      {
-        name: "配备电梯",
-        value: elevatorOptions.value.filter(
-          (x) => x.value == detail.roomInfo?.elevator
-        )[0]?.text,
-      },
-      {
-        name: "抵押信息",
-        value:
-          mortgageOptions.value.filter(
-            (x) => x.value == detail.roomInfo?.isMortgage
-          )[0]?.text || "暂无",
-      },
-      {
-        name: "税费",
-        value:
-          buildTimeOptions.value.filter(
-            (x) => x.value == detail.roomInfo?.buildTime
-          )[0]?.text || "未知",
-      },
-
-      {
-        name: "来源",
-        value: sourceFromOptions.value.filter(
-          (x) => x.value == detail.roomInfo?.sourceFrom
-        )[0]?.text,
-
-        span: 24,
-      },
-    ]);
-    // 物业信息
-    const propertyInformationOptions = computed(() =>[
-      {
-        name: "物业费",
-        value: `${(detail.building?.propertyPrice||0).toFixed(2)}元/m²/月`
-      },
-      {
-        name: "建筑年代",
-        value:  detail.building?.buildYear
-      },
-      {
-        name: "均价",
-        value: `${(detail.building?.averagePrice||0).toFixed(2)}元/m²` 
-      },
-      {
-        name: "开发商",
-        value:  detail.building?.developer
-      },
-      {
-        name: "物业公司",
-        value: detail.building?.propertyCompany
-      },
-    ]);
-
-    // 角色人
-    const roleInformationOptions = computed(() => [
-      {
-        name: "首次录入人",
-        value: detail.createMethod === '1' ? '外部录入' : `${roomRole.createName}(ID: ${roomRole.createId})`,
-      },
-      {
-        name: "首次录入时间",
-        value: roomRole.createTime
-      },
-      {
-        name: "录入人",
-        value: detail.createMethod === '1' ? '外部录入' : `${roomRole.recordName}(ID: ${roomRole.recordId})`,
-      },
-      {
-        name: "录入时间",
-        value: roomRole.recordTime
-      },
-      {
-        name: "维护人",
-        value: roomRole.belongName && `${roomRole.belongName}(ID: ${roomRole.belongId})`,
-      },
-      {
-        name: "查看电话",
-        value: "123",
-        type: "BUTTOM",
-        onClick: () => {},
-      },
-      {
-        name: "实勘人",
-        value: roomRole.rescName && `${roomRole.rescName}(ID: ${roomRole.rescId})`,
-      },
-      {
-        name: "达成时间",
-        value: roomRole.rescTime,
-      },
-      {
-        name: "钥匙人",
-        value: roomRole.keyName && `${roomRole.keyName}(ID: ${roomRole.keyId})`,
-      },
-      {
-        name: "委托人",
-        value: roomRole.authName && `${roomRole.authName}(ID: ${roomRole.authId})`,
-      },
-      {
-        name: "委托时间",
-        value: roomRole.authTime,
-      },
-      {
-        name: "最后修改人",
-        value: roomRole.updateName && `${roomRole.updateName}(ID: ${roomRole.updateId})`,
-      },
-      {
-        name: "最后修改时间",
-        value: roomRole.updateTime,
-      },
-    ]);
-
-    // 委托书
-    const entrustOptions = computed(() => [
-      {
-        name: "委托书编号",
-        value: "123",
-      },
-      {
-        name: "查看委托书",
-        value: "123",
-        type: "BUTTOM",
-        onClick: () => {},
-      },
-      {
-        name: "开始时间",
-        value: "123",
-      },
-      {
-        name: "截止时间",
-        value: "123",
-      },
-    ]);
-
-    // 钥匙
-    const keyOptions = [
-      {
-        name: "钥匙编号",
-        value: "123",
-        span: 24,
-      },
-
-      {
-        name: "存放地址",
-        value: "123",
-        span: 24,
-      },
-    ];
-
+        
     const shareOptions = [
       { name: "微信", icon: "wechat" },
       { name: "微博", icon: "weibo" },
@@ -587,12 +255,6 @@ export default {
 
     return {
       phone,
-      housingInformationOptions,
-      baseInformationOptions,
-      propertyInformationOptions,
-      roleInformationOptions,
-      entrustOptions,
-      keyOptions,
       actions,
       onSelect,
       showPopover,