Merge branch 'master' of http://git.ycjcjy.com/ershoufang/mp-agent into master

src/layout/index.vue

     <div class="lay-footer">
       <van-tabbar route>
         <van-tabbar-item replace to="/home" icon="home-o">首页</van-tabbar-item>
-        <van-tabbar-item replace to="/addhouse" icon="add-o">录入</van-tabbar-item>
+        <van-tabbar-item replace to="/house/add" icon="add-o">录入</van-tabbar-item>
         <van-tabbar-item replace to="/user" icon="user-o">我的</van-tabbar-item>
       </van-tabbar>
     </div>

src/store/models/renting.js

   ref
 } from "vue"
 import request from '@/utils/request'
+import { showDanger } from '@/utils'
 
 export default () => {
   const loading = ref(false)
   const getDetail = data => {
     // loading.value = true
     request({
-      loadingId: 'room.view',
-      url: '/rent/detail',
+      loadingId: 'rent.view',
+      url: '/rent/view',
       params: {
 
         id:data,
       console.log(res, 'res')
 
     Object.assign(detail, res)
-      // const { pageNo, pageSize, endRow, result } = res || {}
-      // Object.assign(page, {pageNo, pageSize, endRow})
-      // list.value = pageNo <= 1 ? result : list.value.concat(list.value)
-      // loading.value = false
+    
     }).catch(e => {
       console.error(e)
       // loading.value = false
+      showDanger('获取详情失败')
     })
   }
 
+  
+
 
 
   return {

src/view/renting/detail/components/Auth.vue

+<template>
+  <x-loading x-id="room.auth">
+    <p v-if="!roomAuth">暂无业主委托书</p>
+    <p v-else-if="roomAuth.status === '1'">当前委托书正在审核中</p>
+    <div v-else>
+      <shiro name="room:info:auth">
+        <template #callback>
+          <van-empty image="error" description="无委托书协议查看权限" />
+        </template>
+
+        <x-field label=" " v-if="roomAuthBox.isCreate">
+          <van-button size="small" type="danger">删除委托书</van-button>
+        </x-field>
+
+        <x-field label="上传人">
+          {{roomAuth.authUserName}} ({{roomAuth.authUserPhone}})
+        </x-field>
+
+        <x-field label="上传时间">
+          {{roomAuth.updateTime}}
+        </x-field>
+        
+        <x-field label="委托书编号">
+          {{roomAuth.serialNum}}
+        </x-field>
+        
+        <x-field label="起始时间">
+          {{roomAuth.startTime}}
+        </x-field>
+        
+        <x-field label="截止时间">
+          {{roomAuth.startTime || '售出为止'}}
+        </x-field>
+
+        <van-image width="100" height="100" :src="roomAuth.url" />
+      </shiro>
+
+      <div v-shiro="'room:info:addAuth'" v-if="!roomAuth">
+        <van-button size="small" type="warn">上传业主委托书</van-button>
+      </div>
+    </div>
+  </x-loading>
+</template>
+
+<script>
+import { Empty, Button, Image } from 'vant'
+import { useModel } from "@zjxpcyc/vue-tiny-store"
+import { computed, onMounted } from 'vue'
+
+export default {
+  components: {
+    [Empty.name]: Empty,
+    [Button.name]: Button,
+    [Image.name]: Image,
+  },
+  props: {
+    roomId: undefined
+  },
+  setup(props) {
+    const { detail, roomAuthBox, getAuth } = useModel("room")
+
+    const roomAuth = computed(() => roomAuthBox.roomAuth)
+
+    onMounted(() => {
+      if (!roomAuthBox.roomAuth) {
+        getAuth(props.roomId)
+      }
+    })
+
+    return {
+      detail,
+      roomAuthBox,
+      roomAuth,
+    }
+  }
+}
+</script>

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

+<template>
+  <div>
+    <x-field label="楼层">
+      {{ floor }}
+    </x-field>
+
+    <x-field label="居住现状">
+      {{ getDictLabel(roomInfo.liveStatus, "liveStatus") }}
+    </x-field>
+
+    <x-field label="朝向">
+      {{ getDictLabel(roomInfo.aspect, "aspect") }}
+    </x-field>
+
+    <x-field label="卧室">
+      {{ getDictLabel(roomInfo.livingRoom, "liveRoom") }}
+    </x-field>
+
+    <x-field label="性别限制">
+      {{ getDictLabel(roomInfo.limitSex, "limitSex") }}
+    </x-field>
+
+    <x-field label="房屋特色">
+      {{ getDictLabel(roomInfo.roomSpecial, "roomSpecial") }}
+    </x-field>
+
+    <x-field label="梯户比例">
+      {{ proportion }}
+    </x-field>
+
+    <x-field label="建筑类型">
+      {{ getDictLabel(roomInfo.buildType, "build_type") }}
+    </x-field>
+
+    <x-field label="房屋用途">
+      {{ getDictLabel(roomInfo.purpose, "purpose") }}
+    </x-field>
+
+    <x-field label="抵押信息">
+      {{ getDictLabel(roomInfo.isMortgage, "mortgage") || "无" }}
+    </x-field>
+
+    <x-field label="建成年代">
+      {{ roomInfo.buildYear }}
+    </x-field>
+
+    <x-field label="配备电梯">
+      {{ getDictLabel(roomInfo.elevator, "elevator") }}
+    </x-field>
+
+    <x-field label="车位">
+      {{ getDictLabel(roomInfo.parking, "parking") }}
+    </x-field>
+
+    <x-field label="地下室">
+      {{ getDictLabel(roomInfo.buildTime, "build_time") }}
+    </x-field>
+
+ <x-field label="物业费">
+      {{building.propertyPrice}} 元/m²/月
+    </x-field>
+
+    
+<x-field label="燃气管道">
+      {{ getDictLabel(roomInfo.gas, "gas") }}
+    </x-field>
+
+    <x-field label="家电">
+      {{ getDictLabel(roomInfo.electricEquipment, "electricEquipment") }}
+    </x-field>
+
+    <x-field label="隔断">
+      {{ getDictLabel(roomInfo.separate, "separate") }}
+    </x-field>
+    
+
+
+    <x-field label="来源">
+      {{ getDictLabel(roomInfo.sourceFrom, "sourceFrom") }}
+    </x-field>
+
+        <x-field label="优势推荐">
+      {{ roomInfo.specialDesc }}
+    </x-field>
+    
+  </div>
+</template>
+
+<script>
+import { computed } from "vue";
+import { useModel } from "@zjxpcyc/vue-tiny-store";
+
+export default {
+  props: {
+    roomInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+    building: {
+      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");
+    }
+
+    //居住现状
+    if (!dicts.liveStatus || !dicts.liveStatus.length) {
+      getDict("liveStatus");
+    }
+
+    // 性别限制
+    if (!dicts.limitSex || !dicts.limitSex.length) {
+      getDict("limitSex");
+    }
+
+    //卧室
+    if (!dicts.liveRoom || !dicts.liveRoom.length) {
+      getDict("liveRoom");
+    }
+    // 房屋特色
+    if (!dicts.roomSpecial || !dicts.roomSpecial.length) {
+      getDict("roomSpecial");
+    }
+
+    //车位
+    if (!dicts.parking || !dicts.parking.length) {
+      getDict("parking");
+    }
+
+// 地下室
+     if (!dicts.build_time || !dicts.build_time.length) {
+      getDict("build_time");
+    }
+// 物业费
+      if (!dicts.basement || !dicts.basement.length) {
+      getDict("basement");
+    }
+
+    // 燃气管道
+      if (!dicts.gas || !dicts.gas.length) {
+      getDict("gas");
+    }
+
+// 家电
+    if (!dicts.electricEquipment || !dicts.electricEquipment.length) {
+      getDict("electricEquipment");
+    }
+
+// 隔断
+    if (!dicts.separate || !dicts.separate.length) {
+      getDict("separate");
+    }
+    
+
+    const roomType = computed(() => {
+      const [a, b, c, d] = (props.roomInfo.roomType || "").split(",");
+      return `${a || ""}室 ${b || "0"}厅 ${c || "0"}厨 ${d || "0"}卫`;
+    });
+
+    const floor = computed(() => {
+      const [a, b, c] = (props.roomInfo.roomFloor || "").split(",");
+      return `${a || ""}/${b || ""}(${c || ""})`;
+    });
+
+    // 梯户比例
+    const proportion = computed(() => {
+      const [a, b] = (props.roomInfo.proportion || "").split(",");
+      return `${a || ""}梯${b || ""}户`;
+    });
+
+    // 获取字典对应名称
+    const getDictLabel = (val, key) => {
+      return dicts[key]?.filter((x) => x.value === val)[0]?.text;
+    };
+
+    return {
+      floor,
+      roomType,
+      proportion,
+      getDictLabel,
+    };
+  },
+};
+</script>

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

+<template>
+  <div v-if="buildInfo">
+    <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>
+  <p v-else>暂无物业信息</p>
+</template>
+
+<script>
+export default {
+  props: {
+    buildInfo: Object,
+    default: () => ({})
+  },
+  setup() {
+    //
+  }
+}
+</script>

src/view/renting/detail/components/Follow.vue

+<template>
+  <x-loading x-id="room.follow.list">
+    <p v-if="!list.length">暂无跟进记录</p>
+    <van-steps direction="vertical" :active="0" v-else>
+      <van-step v-for="(item, index) in list" :key="index">
+        <p>
+          {{item.followUserName}} {{item.createTime}}
+        </p>
+        <p>
+          {{item.followType === '0' ? '看房, ': ''}}
+          {{item.followDesc}}
+        </p>
+        <p v-if="item.followImg">
+          <van-image width="100" height="100" :src="item.followImg" />
+        </p>          
+      </van-step>
+    </van-steps>
+  </x-loading>
+</template>
+
+<script>
+import { onMounted, ref } from 'vue'
+import { List, Step, Steps, Image } from 'vant'
+import request from '@/utils/request'
+
+export default {
+  components: {
+    [List.name]: List,
+    [Steps.name]: Steps,
+    [Step.name]: Step,
+    [Image.name]: Image,
+  },
+  props: {
+    roomId: undefined,
+  },
+  setup(props) {
+    const list = ref([])
+
+    const handleLoad = () => {
+      request({
+        loadingId: 'room.follow.list',
+        url: '/room/follow/list',
+        params: {
+          roomId: props.roomId,
+          pageNo: 1,
+          pageSize: 100,
+        }
+      }).then(res => {
+        list.value = res.result
+      })
+    }
+
+    onMounted(() => {
+      handleLoad()
+    })
+
+    return {
+      list,
+      handleLoad,
+    }
+  }
+}
+</script>

src/view/renting/detail/components/Key.vue

+<template>
+  <x-loading x-id="room.key">
+    <p v-if="!roomKey">暂无钥匙信息</p>
+    <p v-else-if="roomKey.status === '1'">当前委托书正在审核中</p>
+    <div v-else>
+      <shiro name="room:info:key">
+        <template #callback>
+          <van-empty image="error" description="无钥匙协议查看权限" />
+        </template>
+
+        <x-field label=" " v-if="roomKeyBox.isCreate">
+          <van-button size="small" type="danger">删除钥匙</van-button>
+        </x-field>
+
+        <x-field label="上传人">
+          {{roomKey.keyUserName}} ({{roomKey.keyUserPhone}})
+        </x-field>
+
+        <x-field label="上传时间">
+          {{roomKey.updateTime}}
+        </x-field>
+
+        <x-field label="钥匙编号">
+          {{roomKey.keyNo}}
+        </x-field>
+
+        <x-field label="存储位置">
+          {{roomKey.address}}
+        </x-field>
+
+        <van-image width="100" height="100" :src="roomKey.url" />
+
+      </shiro>
+    </div>
+  </x-loading>
+</template>
+
+<script>
+import { Empty, Button, Image } from 'vant'
+import { useModel } from "@zjxpcyc/vue-tiny-store"
+import { computed, onMounted } from 'vue'
+
+export default {
+  components: {
+    [Empty.name]: Empty,
+    [Button.name]: Button,
+    [Image.name]: Image,
+  },
+  props: {
+    roomId: undefined
+  },
+  setup(props) {
+    const { detail, roomKeyBox, getKey } = useModel("room")
+
+    const roomKey = computed(() => roomKeyBox.roomKey)
+
+    onMounted(() => {
+      if (!roomKeyBox.roomKey) {
+        getKey(props.roomId)
+      }
+    })
+
+    return {
+      detail,
+      roomKeyBox,
+      roomKey,
+    }
+  }
+}
+</script>

src/view/renting/detail/components/Look.vue

+<template>
+  <x-loading x-id="room.look.list">
+    <p v-if="!list.length">暂无空看记录</p>
+    <van-steps direction="vertical" :active="0" v-else>
+      <van-step v-for="(item, index) in list" :key="index">
+        <p>
+          {{item.followUserName}} {{item.createTime}}
+        </p>
+        <p>
+          {{item.followType === '0' ? '看房, ': ''}}
+          {{item.followDesc}}
+        </p>
+        <p v-if="item.followImg">
+          <van-image width="100" height="100" :src="item.followImg" />
+        </p>          
+      </van-step>
+    </van-steps>
+  </x-loading>
+</template>
+
+<script>
+import { onMounted, ref } from 'vue'
+import { List, Step, Steps, Image } from 'vant'
+import request from '@/utils/request'
+
+export default {
+  components: {
+    [List.name]: List,
+    [Steps.name]: Steps,
+    [Step.name]: Step,
+    [Image.name]: Image,
+  },
+  props: {
+    roomId: undefined,
+  },
+  setup(props) {
+    const list = ref([])
+
+    const handleLoad = () => {
+      request({
+        loadingId: 'room.look.list',
+        url: '/room/look/list',
+        params: {
+          roomId: props.roomId,
+          pageNo: 1,
+          pageSize: 100,
+        }
+      }).then(res => {
+        list.value = res.result
+      })
+    }
+
+    onMounted(() => {
+      handleLoad()
+    })
+
+    return {
+      list,
+      handleLoad,
+    }
+  }
+}
+</script>

src/view/renting/detail/components/Main.vue

+<template>
+  <x-loading x-id="room.security">
+    <x-field label="房源ID"> {{ roomInfo.roomCode }}{{ roomInfo.id }} </x-field>
+
+    <x-field label="所属楼盘">
+      {{ roomInfo.buildingName }}
+    </x-field>
+
+    <x-field label="面积"> {{ roomInfo.acreage }} ㎡ </x-field>
+
+    <x-field label="居室">
+      {{ roomType }}
+    </x-field>
+
+    <x-field label="出租方式">
+      {{ leaseWay }}
+    </x-field>
+
+    <x-field label="付款方式">
+      {{ payWayOptions.filter((x) => x.value === roomInfo.payWay)[0]?.text }}
+    </x-field>
+
+    <x-field label="装修">
+      {{
+        decorationOptions.filter((x) => x.value === roomInfo.decoration)[0]
+          ?.text
+      }}
+    </x-field>
+
+
+
+    <x-field label="创建方式">
+      {{ roomInfo.createMethod === "1" ? "外部录入" : "荟居录入" }}
+    </x-field>
+
+    <!-- 
+
+
+    <x-field label="所属区县">
+      {{ otherData.roomCity.areaName }}
+    </x-field>
+
+    <x-field label="所属商圈">
+      {{ otherData.roomBusi.areaName }}
+    </x-field>
+
+  
+
+    <x-field label="价格">
+      {{ roomInfo.totalPrice }} 万元 / {{ avgPrice }} 元/㎡
+    </x-field> -->
+
+    <x-field label="楼栋">
+      {{ securityInfo.roomBuild || "敏感信息" }}
+    </x-field>
+
+    <x-field label="单元">
+      {{ securityInfo.roomUnit || "敏感信息" }}
+    </x-field>
+
+    <x-field label="楼房号">
+      {{ securityInfo.roomNum || "敏感信息" }}
+    </x-field>
+
+    <x-field label="业主姓名">
+      {{ securityInfo.ownerName || "敏感信息" }}
+    </x-field>
+
+    <x-field label="业主电话">
+      {{ securityInfo.ownerTel || "敏感信息" }}
+    </x-field>
+
+    <x-field label=" " v-shiro="'room:info:security'">
+      <van-button
+        v-if="!unfollowRoom"
+        size="small"
+        type="warning"
+        @click="handleSecurityClick"
+        >查看敏感信息（剩余 {{ otherData.leftSecurityNum }} 次）</van-button
+      >
+      <van-button
+        v-else
+        size="small"
+        type="primary"
+        v-shiro="'room:info:addFollow'"
+        @click="goToAddFollow"
+        >去跟进</van-button
+      >
+    </x-field>
+  </x-loading>
+</template>
+
+<script>
+import { computed, ref } from "vue";
+import { useRouter } from "vue-router";
+import { Button, Dialog } from "vant";
+import request from "@/utils/request";
+import { showDanger } from "@/utils";
+import { useModel } from "@zjxpcyc/vue-tiny-store";
+
+const getSecurity = (roomId) => {
+  return request({
+    loadingId: "room.security",
+    url: "/room/security",
+    params: { roomId },
+  })
+    .then((res) => {
+      return res;
+    })
+    .catch((e) => {
+      return Promise.reject(e);
+    });
+};
+
+export default {
+  components: {
+    [Button.name]: Button,
+  },
+  props: {
+    roomInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+    otherData: Object,
+  },
+  setup(props) {
+    const router = useRouter();
+    const securityInfo = ref({});
+    const unfollowRoom = ref();
+    const { dicts, getDict } = useModel("dicts");
+
+    // const floor = computed(() => {
+    //   const [a, b, c] = (props.roomInfo.roomFloor || "").split(",");
+    //   return `${a || ""}/${b || ""}(${c || ""})`;
+    // });
+
+    // 居室
+    const roomType = computed(() => {
+      const [a, b, c, d] = (props.roomInfo.roomType || "").split(",");
+      return `${a || 0}室${b || 0}厅${c || 0}厨${d || 0}卫`;
+    });
+    // 出租方式
+    const leaseWay = computed(() => {
+      console.log("出租方式", dicts["leaseWay"]);
+      return dicts["leaseWay"].filter(
+        (x) => x.value === props.roomInfo.leaseWay
+      )[0]?.text;
+    });
+
+    const avgPrice = computed(() => {
+      return Number(
+        (props.roomInfo.totalPrice * 10000) / props.roomInfo.acreage
+      ).toFixed(2);
+    });
+
+    // 支付方式
+    const payWayOptions = computed(() => {
+      const payWayDict = dicts.payWay || [];
+      if (!payWayDict.length) {
+        getDict("payWay");
+      }
+
+      return payWayDict;
+    });
+
+    const decorationOptions = computed(() => {
+      const decorationDict = dicts.decoration || [];
+      if (!decorationDict.length) {
+        getDict("decoration");
+      }
+
+      return decorationDict;
+    });
+
+    const goToAddFollow = () =>
+      router.push({
+        name: "secondhand.detail",
+        query: { roomId: unfollowRoom.value.id },
+      });
+
+    const handleSecurityClick = () => {
+      if (!securityInfo.value.roomBuild) {
+        getSecurity(props.roomInfo.id)
+          .then((res) => {
+            securityInfo.value = res || {};
+            unfollowRoom.value = undefined;
+          })
+          .catch((e) => {
+            if ("1003" === e.code) {
+              unfollowRoom.value = JSON.parse(e.message);
+
+              Dialog.alert({
+                title: "去跟进",
+                message: `您存在未跟进的房源，房源编号: ${unfollowRoom.value.id}`,
+              }).then(() => {
+                // todo
+              });
+            } else {
+              unfollowRoom.value = undefined;
+              showDanger("查看敏感信息失败");
+            }
+          });
+      }
+    };
+
+    return {
+      // floor,
+      roomType,
+      avgPrice,
+      leaseWay,
+
+      securityInfo,
+      handleSecurityClick,
+      unfollowRoom,
+      goToAddFollow,
+      payWayOptions,
+      decorationOptions,
+    };
+  },
+};
+</script>

src/view/renting/detail/components/Role.vue

+<template>
+  <x-loading x-id="room.role">
+    <x-field label="首次录入人">
+      {{firstInputUser}}
+    </x-field>
+    <x-field label="首次录入时间">
+      {{roomRole.createTime}}
+    </x-field>
+    
+    <x-field label="录入人">
+      {{inputUser}}
+    </x-field>
+    <x-field label="录入时间">
+      {{roomRole.recordTime}}
+    </x-field>
+    
+    <x-field label="维护人">
+      {{getNameFormated(roomRole.belongName, roomRole.belongId)}}
+    </x-field>
+    <x-field label=" " v-shiro="'room:info:belongTel'">
+      <van-button size="small" type="warning">查看电话</van-button>
+    </x-field>
+    
+    <x-field label="实勘人">
+      {{getNameFormated(roomRole.rescName, roomRole.rescId)}}
+    </x-field>
+    <x-field label="达成时间">
+      {{roomRole.rescTime}}
+    </x-field>
+    
+    <x-field label="钥匙人">
+      {{getNameFormated(roomRole.keyName, roomRole.keyId)}}
+    </x-field>
+
+    <x-field label="委托人">
+      {{getNameFormated(roomRole.authName, roomRole.authId)}}
+    </x-field>
+    <x-field label="委托时间">
+      {{roomRole.authTime}}
+    </x-field>
+
+    <x-field label="最后修改人">
+      {{getNameFormated(roomRole.updateName, roomRole.updateId)}}
+    </x-field>
+    <x-field label="最后修改时间">
+      {{roomRole.updateTime}}
+    </x-field>
+
+    <template v-if="roomInfo.roomStatus === '8'">
+      <x-field label="成交人">
+        {{getNameFormated(roomRole.doneName, roomRole.doneId)}}
+      </x-field>
+      <x-field label="成交时间">
+        {{roomRole.doneTime}}
+      </x-field>
+    </template>
+
+    <template v-if="roomInfo.roomStatus !== '0' && roomInfo.roomStatus !== '8'">
+      <x-field label="申请关闭人">
+        {{getNameFormated(roomRole.applyCloseName, roomRole.applyCloseId)}}
+      </x-field>
+      <x-field label="申请关闭时间">
+        {{roomRole.applyCloseTime}}
+      </x-field>
+      <x-field label="关闭操作人">
+        {{getNameFormated(roomRole.closeName, roomRole.closeId)}}
+      </x-field>
+      <x-field label="关闭操作时间">
+        {{roomRole.closeTime}}
+      </x-field>
+    </template>
+
+  </x-loading>
+</template>
+
+<script>
+import { useModel } from '@zjxpcyc/vue-tiny-store'
+import { computed, onMounted } from 'vue'
+import { Button } from 'vant'
+
+export default {
+  components: {
+    [Button.name]: Button,
+  },
+  props: {
+    roomInfo: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  setup(props) {
+    const { roomRole, getRole } = useModel("room")
+
+    const getNameFormated = (name, id) => {
+      return name + (name ? `(ID：${id})` : '')
+    }
+    
+    const firstInputUser = computed(() => {
+      const createMethod = props.roomInfo?.createMethod
+      if (createMethod === '1') {
+        return '外部录入'
+      } else {
+        return getNameFormated(roomRole.createName, roomRole.createId)
+      }
+    })
+
+    const inputUser = computed(() => {
+      const createMethod = props.roomInfo?.createMethod
+      if (createMethod === '1') {
+        return '外部录入'
+      } else {
+        return getNameFormated(roomRole.recordName, roomRole.recordId)
+      }
+    })
+
+    onMounted(() => {
+      getRole(props.roomInfo.id)
+    })
+
+    return {
+      roomRole,
+      firstInputUser,
+      inputUser,
+      getNameFormated,
+    }
+  }
+}
+</script>

src/view/renting/detail/index.vue

 <template>
   <div class="secondhanddetail">
-    <div>
-      <Swiper></Swiper>
-    </div>
+    <!-- xId='room.view' -->
+    <x-loading x-id="room.view" tip="正在加载详情">
+      <div>
+        <Swiper></Swiper>
+      </div>
 
-    <div class="title">
-      <p>TITLE</p>
-    </div>
+      <div class="title">
+        <p class="body">{{ detail.roomInfo?.title }}</p>
+        
+        <van-popover
+          v-model:show="showPopover"
+          :actions="actions"
+          @select="onSelect"
+          placement="bottom-end"
+        >
+          <template #reference>
+            <div class="action">
+              <van-icon name="wap-nav" />
+            </div>
+          </template>
+        </van-popover>
+      </div>
 
-    <div class="detailcard">
-      <div class="detailcard-title">
-        <span>房源信息</span>
+      <van-cell-group title="房源信息">
+        <RoomMain :room-info="detail.roomInfo" :other-data="roomOtherData" />
+      </van-cell-group>
 
-        <div style="float:right">
-          <van-popover
-            v-model:show="showPopover"
-            :actions="actions"
-            @select="onSelect"
-            placement="bottom-end"
-          >
-            <template #reference>
-              <van-icon name="chat-o" />
+      <van-cell-group title="其他信息">
+        <van-collapse v-model="collapseItem" accordion>
+          <van-collapse-item name="1">
+            <template #title>
+              <div>基础信息</div>
             </template>
-          </van-popover>
-        </div>
-      </div>
-      <Contextc :options="housingInformationOptions"></Contextc>
-    </div>
-    <div class="detailcard">
-      <div class="detailcard-title">
-        <span>基础信息</span>
-      </div>
-      <Contextc :options="baseInformationOptions"></Contextc>
-    </div>
-    <!-- <div class="detailcard">
-      <div class="detailcard-title">
-        <span>物业信息</span>
-      </div>
-      <Contextc :options="propertyInformationOptions"></Contextc>
-    </div> -->
-    <div class="detailcard">
-      <div class="detailcard-title">
-        <span>角色人</span>
-      </div>
-      <Contextc :options="roleInformationOptions"></Contextc>
-    </div>
-    <!-- <div class="detailcard">
-      <div class="detailcard-title">
-        <span>委托书</span>
-      </div>
-      <Contextc :options="entrustOptions" nodata=""></Contextc>
-    </div> -->
-    <div class="detailcard">
-      <div class="detailcard-title">
-        <span>钥匙</span>
-      </div>
-      <Contextc :options="keyOptions" nodata=""></Contextc>
-    </div>
+            <RoomBase :room-info="detail.roomInfo" :building="detail.building" />
+          </van-collapse-item>
 
-    <div class="detailcard">
-      <div class="detailcard-title">
-        <van-row>
-          <van-col span="12"> <span>跟进记录</span></van-col>
-          <van-col span="12" style="line-height:26px;display: flex;">
-            <van-button type="default" color="#d75e3a" size="mini"
-              >添加跟进</van-button
-            ></van-col
-          >
-        </van-row>
-      </div>
-      <div>
-        <Stepc></Stepc>
-      </div>
-    </div>
+          <van-collapse-item name="2">
+            <template #title>
+              <div>物业信息</div>
+            </template>
+            <RoomEstate :build-info="detail.building" />
+          </van-collapse-item>
 
-    <div class="detailcard">
-      <div class="detailcard-title">
-        <van-row>
-          <van-col span="12"> <span>空看记录</span></van-col>
-          <van-col span="12" style="line-height:26px;display: flex;">
-            <van-button type="default" color="#d75e3a" size="mini"
-              >添加空看</van-button
-            ></van-col
-          >
-        </van-row>
-      </div>
-      <div>
-        <Stepc></Stepc>
-      </div>
-    </div>
+          <van-collapse-item name="role">
+            <template #title>
+              <div>角色人</div>
+            </template>
+            <RoomRole :room-info="detail.roomInfo" />
+          </van-collapse-item>
+          
+          <van-collapse-item name="auth">
+            <template #title>
+              <div>委托书</div>
+            </template>
+            <RoomAuth :room-id="roomId" />
+          </van-collapse-item>
+          
+          <van-collapse-item name="key">
+            <template #title>
+              <div>钥匙</div>
+            </template>
+            <RoomKey :room-id="roomId" />
+          </van-collapse-item>
 
-    <van-share-sheet
-      v-model:show="showShare"
-      title="立即分享给好友"
-      :options="shareOptions"
-      @select="onShareSelect"
-    />
+          <van-collapse-item name="follow">
+            <template #title>
+              <div>跟进记录</div>
+            </template>
+            <RoomFollow :room-id="roomId" />
+          </van-collapse-item>
+
+          <van-collapse-item name="look">
+            <template #title>
+              <div>空看记录</div>
+            </template>
+            <RoomLook :room-id="roomId" />
+          </van-collapse-item>
+          
+        </van-collapse>
+      </van-cell-group>
 
-    <van-dialog v-model:show="phoneShow" title="新增电话" show-cancel-button>
-      <van-field
-        v-model="phone"
-        type="tel"
-        label="业主电话"
-        placeholder="请输入电话"
+      <van-share-sheet
+        v-model:show="showShare"
+        title="立即分享给好友"
+        :options="shareOptions"
+        @select="onShareSelect"
       />
-    </van-dialog>
+
+      <van-dialog v-model:show="phoneShow" title="新增电话" show-cancel-button>
+        <van-field
+          v-model="phone"
+          type="tel"
+          label="业主电话"
+          placeholder="请输入电话"
+        />
+      </van-dialog>
+    </x-loading>
   </div>
 </template>
 
 <script>
-import { reactive, ref } from "vue";
+import { ref, onMounted, computed } from "vue";
+import { useRouter } from "vue-router";
 import { Swiper } from "../../../components/detailCompents";
 import {
   Icon,
   ShareSheet,
   Toast,
   Field,
+  Cell,
+  CellGroup,
+  Collapse,
+  CollapseItem,
 } from "vant";
-import Contextc from "../../../components/contextC";
-import Stepc from "../../../components/stepC";
+import { useModel } from "@zjxpcyc/vue-tiny-store"
+import RoomMain from './components/Main'
+import RoomBase from './components/Base'
+import RoomEstate from './components/Estate'
+import RoomRole from './components/Role'
+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 { router } from "../../../router";
-import { useRouter } from "vue-router";
 
 export default {
   name: "secondhanddetail",
   components: {
+    [CellGroup.name]: CellGroup,
+    [Cell.name]: Cell,
+    [Collapse.name]: Collapse,
+    [CollapseItem.name]: CollapseItem,
     [Row.name]: Row,
     [Col.name]: Col,
     [Popover.name]: Popover,
     [Field.name]: Field,
     [Dialog.Component.name]: Dialog.Component,
 
-    Stepc: Stepc,
-    Contextc: Contextc,
     Swiper: Swiper,
+    RoomMain,
+    RoomBase,
+    RoomEstate,
+    RoomRole,
+    RoomAuth,
+    RoomKey,
+    RoomFollow,
+    RoomLook,
   },
   data() {
     return {};
   },
 
   setup() {
-    const router = useRouter();
-    const showPopover = ref(false);
-    const showShare = ref(false);
-    const phoneShow = ref(false);
-    const phone = ref("");
+    const router = useRouter()
+    const roomId = router.currentRoute.value.query.roomId
+    const showPopover = ref(false)
+    const showShare = ref(false)
+    const phoneShow = ref(false)
+    const collapseItem = ref()
+    const phone = ref("")
 
-    const data = reactive({})
+    const { detail, getDetail } = useModel("renting")
 
-  console.log(data)
+    onMounted(() => {
+      getDetail(roomId);
+    });
 
     // 通过 actions 属性来定义菜单选项
     const actions = [
-      // { text: "设置房源保护", value: "1" },
+      { text: "设置房源保护", value: "1" },
       { text: "新增业主电话", value: "2" },
       { text: "下架房源", value: "3" },
       { text: "修改房源", value: "4" },
-      // { text: "认领房源", value: "5" },
+      { text: "分享房源", value: "5" },
       { text: "房源实勘", value: "6" },
     ];
     // 设为房源保护后，只有录入人、同部门的上级以及上级部门的上级可以看到房源敏感信息。
         router.push("/closehouse");
       } else if (action.value == 4) {
         // 修改房源
-        router.push("/editrenting");
+        router.push("/editsecondhandhouse");
       } else if (action.value == 5) {
         // 分享房源
         showShare.value = true;
         router.push("/resc");
       }
     };
-    const onLookClick = () => {
-      console.log("onLookClick");
-    };
-
-    // 房源信息
-    const housingInformationOptions = [
-      {
-        name: "所属楼盘",
-        value: "123",
-        span: 24,
-      },
-      {
-        name: "房源id",
-        value: "123",
-      },
-      {
-        name: "租金",
-        value: "123",
-      },
-      {
-        name: "装修",
-        value: "123",
-      },
-      {
-        name: "出租方式",
-        value: "123",
-      },
-      {
-        name: "居室",
-        value: "123",
-      },
-      {
-        name: "付款方式",
-        value: "123",
-      },
-      {
-        name: "楼房号",
-        value: "123",
-      },
-      {
-        name: "单元",
-        value: "123",
-      },
-      {
-        name: "业主姓名",
-        value: "123",
-      },
-      {
-        name: "楼栋",
-        value: "123",
-      },
-      {
-        name: "业主电话",
-        value: "123",
-      },
-      {
-        name: "查看敏感信息",
-        value: "123",
-        type: "BUTTOM",
-        click: () => onLookClick(),
-      },
-    ];
-    // 基本信息
-    const baseInformationOptions = [
-      {
-        name: "楼层",
-        value: "123",
-      },
-      {
-        name: "朝向",
-        value: "123",
-      },
-      {
-        name: "居住现状",
-        value: "123",
-      },
-      {
-        name: "卧室",
-        value: "123",
-      },
-      {
-        name: "性别限制",
-        value: "123",
-      },
-      {
-        name: "建筑类型",
-        value: "123",
-      },
-      {
-        name: "抵押信息",
-        value: "123",
-      },
-      {
-        name: "建成年代",
-        value: "123",
-      },
-      {
-        name: "物业费",
-        value: "123",
-      },
-      {
-        name: "配备电梯",
-        value: "123",
-      },
-      {
-        name: "车位",
-        value: "123",
-      },
-      {
-        name: "地下室",
-        value: "123",
-      },
-      {
-        name: "管道燃气",
-        value: "123",
-      },
-      {
-        name: "家电",
-        value: "123",
-      },
-      {
-        name: "隔断",
-        value: "123",
-      },
-      {
-        name: "房源来源",
-        value: "123",
-      },
-      {
-        name: "优势推荐",
-        value: "123",
-      },
-    ];
-    // 物业信息
-    const propertyInformationOptions = [
-      {
-        name: "物业费",
-        value: "123",
-      },
-      {
-        name: "建筑年代",
-        value: "123",
-      },
-      {
-        name: "均价",
-        value: "123",
-      },
-      {
-        name: "开发商",
-        value: "123",
-      },
-      {
-        name: "物业公司",
-        value: "123",
-      },
-    ];
-    // 角色人
-    const roleInformationOptions = [
-      {
-        name: "首次录入人",
-        value: "123",
-      },
-      {
-        name: "时间",
-        value: "123",
-      },
-      {
-        name: "录入人",
-        value: "123",
-      },
-      {
-        name: "时间",
-        value: "123",
-      },
-      {
-        name: "维护人",
-        value: "123",
-      },
-      {
-        name: "查看电话",
-        value: "123",
-        type: "BUTTOM",
-        onClick: () => {},
-      },
-      {
-        name: "实勘人",
-        value: "123",
-      },
-      {
-        name: "时间",
-        value: "123",
-      },
-      {
-        name: "钥匙人",
-        value: "123",
-        span: 24,
-      },
-
-      {
-        name: "最后修改人",
-        value: "123",
-      },
-      {
-        name: "时间",
-        value: "123",
-      },
-    ];
-
-    // 委托书
-    const entrustOptions = [
-      {
-        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" },
       showShare.value = false;
     };
 
+    const roomOtherData = computed(() => {
+      return {
+        leftSecurityNum: detail.leftSecurityNum,
+        roomCity: {},
+        roomBusi: {}
+      }
+    })
+
     return {
       phone,
-      housingInformationOptions,
-      baseInformationOptions,
-      propertyInformationOptions,
-      roleInformationOptions,
-      entrustOptions,
-      keyOptions,
       actions,
       onSelect,
       showPopover,
       phoneShow,
       onShareSelect,
       shareOptions,
+      detail,
+      collapseItem,
+      roomId,
+      roomOtherData,
     };
   },
 };
 <style lang="less">
 .secondhanddetail {
   text-align: left;
+
+  .title {
+    padding-left: 1em;
+    display: flex;
+    align-items: center;
+
+    .body {
+      flex: auto;
+    }
+
+    .action {
+      text-align: center;
+      width: 64px;
+      flex: none;
+    }
+  }
 }
 .secondhand-main::-webkit-scrollbar {
   display: none; /*隐藏滚动条*/

vue.config.js

     proxy: {
       '/mp': {
         target: 'http://10.161.7.66:8080/',
-        target: 'http://localhost:8080/',
+        // target: 'http://localhost:8080/',
         ws: true,
         changeOrigin: true,
         // pathRewrite: {'^/mp': ''}