feats

jsconfig.json

+{
+  "compilerOptions": {
+     "target": "es2017",
+     "allowSyntheticDefaultImports": false,
+      "baseUrl": "./",
+      "paths": {
+          "@/*": ["src/*"]
+     }
+  },
+  "exclude": ["node_modules", "dist"]
+}

package.json

     "parserOptions": {
       "parser": "babel-eslint"
     },
-    "rules": {}
+    "rules": {
+      "no-unused-vars": "warn"
+    }
   },
   "browserslist": [
     "> 1%",

src/components/Shiro/index.vue

 <template>
-    <template v-if="!show">
-      <span style="display: inline-block" v-if="error">{{error}}</span>
-      <slot name="callback"></slot>
-    </template>
-    <slot v-else></slot>
+  <template v-if="!show">
+    <span style="display: inline-block" v-if="error">{{error}}</span>
+    <slot name="callback"></slot>
+  </template>
+  <slot v-else></slot>
 </template>
 
 <script>
     const show = computed(() => {
       const permission = permissions[props.name]
       if (typeof permission !== 'boolean') {
-        // return await getPermission(props.name)
         getPermission(props.name)
-        return false
       }
 
       return permission

src/components/XLoading/index.vue

       display: flex;
       justify-content: center;
       align-items: center;
+      height: 100%;
+      max-height: 100vh;
     }
   }
 }

src/components/contextC/Item.vue

+<template>
+
+</template>
+
+<script>
+export default {
+  props: {
+    item: Object
+  },
+
+  setup(props) {
+    
+  }
+}
+</script>

src/components/contextC/index.vue

 <template>
-  <div class="contextc">
-    <van-row>
-      <van-col
-        v-for="(item, index) in options"
-        :key="index"
-        :span="item.span || 12"
-        class="contextc-text"
-      >
-        <div>
-          <van-button
-            v-if="item.type == 'BUTTOM'"
-            type="default"
-            color="#d75e3a"
-            size="mini"
-            @click="item.click"
-            style="display:flex"
-            >{{item.name}}</van-button
+  <template v-for="(item, index) in options" :key="index">
+    <van-field :label="item.name">
+      <template #input>
+        <van-button
+          v-if="item.type == 'SECURITY'"
+          type="default"
+          color="#d75e3a"
+          size="small"
+          @click="item.click"
           >
-          <span v-else class="static" :class="{ 'contextc--required': item.required }">
-            {{ item.name }}: {{ item.value }}</span
-          >
-        </div>
-      </van-col>
-    </van-row>
-  </div>
+            {{`查看敏感信息 (${item.value})`}}
+        </van-button>
+        <div v-else>{{item.value}}</div>
+      </template>
+    </van-field>
+  </template>
 </template>
 
 <script>
-import { Col, Row, Button } from "vant";
+import { Field , Button } from "vant";
+
 export default {
   name: "contextc",
   components: {
-    [Row.name]: Row,
-    [Col.name]: Col,
+    [Field .name]: Field,
     [Button.name]: Button,
   },
   props: {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="less" scoped>
-.contextc {
-  font-size: 13px;
-  color: #999;
-  &-text {
-    line-height: 24px;
-    display: flex;
-  }
-  &--required::before {
-    left: 8px;
-    color: #ee0a24;
-    font-size: 14px;
-    content: "*";
-  }
-}
+
 </style>

src/main.js

 import store from './store'
 import 'vant/lib/index.css';
 
+import { Notify } from 'vant'
 import Shiro from './components/Shiro'
 import XLoading from './components/XLoading'
 import shiro from './utils/plugins/shiro'
 app.use(store);
 app.use(router);
 app.use(shiro);
+app.use(Notify);
 
 app.component('x-loading', XLoading)
 app.component('shiro', Shiro)

src/store/models/room.js

   ref
 } from "vue"
 import request from '@/utils/request'
+import { showDanger } from '@/utils'
 
 export default () => {
   const loading = ref(false)
   const list = ref([])
   const page = reactive({})
   const detail = reactive({})
+  const roomRole = reactive({})
+  const roomAuthBox = reactive({})
+  const roomKeyBox = reactive({})
 
   const getList = data => {
     loading.value = true
     })
   }
 
+  // 房源详情--基础信息
   const getDetail = data => {
     request({
       loadingId: 'room.view',
         id:data,
       }
     }).then(res => {
-      console.log(res, 'res')
-
-    Object.assign(detail, res)
-   
+      Object.assign(detail, res)
     }).catch(e => {
       console.error(e)
+      showDanger('获取详情失败')
     })
   }
 
-  const getSecurity = id => {
-  return  request({
-      loadingId: 'room.security',
-      url: '/room/security',
+  // 角色人信息
+  const getRole = data => {
+    request({
+      loadingId: 'room.role',
+      url: '/room/role',
       params: {
+        roomId:data,
+      }
+    }).then(res => {
+      Object.assign(roomRole, res)
+    }).catch(e => {
+      console.error(e)
+      showDanger('获取角色人失败')
+    })
+  }
 
-        roomId:id,
+  // 委托书信息
+  const getAuth = data => {
+    request({
+      loadingId: 'room.auth',
+      url: '/room/auth',
+      params: {
+        roomId: data,
       }
     }).then(res => {
-      console.log(res, 'res')
-   return res
+      Object.assign(roomAuthBox, res)
     }).catch(e => {
       console.error(e)
+      showDanger('获取委托书失败')
     })
   }
 
+  // 钥匙信息
+  const getKey = data => {
+    request({
+      loadingId: 'room.key',
+      url: '/room/key',
+      params: {
+        roomId: data,
+      }
+    }).then(res => {
+      Object.assign(roomKeyBox, res)
+    }).catch(e => {
+      console.error(e)
+      showDanger('获取钥匙失败')
+    })
+  }
 
+  // 敏感信息
+  const getSecurity = id => {
+    return  request({
+        loadingId: 'room.security',
+        url: '/room/security',
+        params: {
 
+          roomId:id,
+        }
+      }).then(res => {
+        console.log(res, 'res')
+        return res
+      }).catch(e => {
+        console.error(e)
+      })
+  }
 
   return {
     list,
     detail,
     getDetail,
     getSecurity,
-    loading
+    loading,
+    getRole,
+    roomRole,
+    roomAuthBox,
+    getAuth,
+    getKey,
+    roomKeyBox,
   }
 }

src/utils/index.js

 
+import { Notify } from 'vant'
+
+export function showDanger(message) {
+  return Notify({ type: 'danger', message })
+}
+
 export function isEmpty (o) {
   if (o === undefined || o === null || o === '') {
     return true

src/view/home/index.vue

 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-/deep/ .van-tab {
+:deep(.van-tab) {
   color: #000;
 }
 </style>

src/view/secondhand/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>
+
+        <van-field label=" " v-if="roomAuthBox.isCreate">
+          <template #input>
+            <van-button size="small" type="danger">删除委托书</van-button>
+          </template>
+        </van-field>
+
+        <van-field label="上传人">
+          <template #input>
+            {{roomAuth.authUserName}} ({{roomAuth.authUserPhone}})
+          </template>
+        </van-field>
+
+        <van-field label="上传时间">
+          <template #input>
+            {{roomAuth.updateTime}}
+          </template>
+        </van-field>
+        
+        <van-field label="委托书编号">
+          <template #input>
+            {{roomAuth.serialNum}}
+          </template>
+        </van-field>
+        
+        <van-field label="起始时间">
+          <template #input>
+            {{roomAuth.startTime}}
+          </template>
+        </van-field>
+        
+        <van-field label="截止时间">
+          <template #input>
+            {{roomAuth.startTime || '售出为止'}}
+          </template>
+        </van-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 { Field, Empty, Button, Image } from 'vant'
+import { useModel } from "@zjxpcyc/vue-tiny-store"
+import { computed, onMounted } from 'vue'
+
+export default {
+  components: {
+    [Field.name]: Field,
+    [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/secondhand/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/secondhand/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>
+
+        <van-field label=" " v-if="roomKeyBox.isCreate">
+          <template #input>
+            <van-button size="small" type="danger">删除钥匙</van-button>
+          </template>
+        </van-field>
+
+        <van-field label="上传人">
+          <template #input>
+            {{roomKey.keyUserName}} ({{roomKey.keyUserPhone}})
+          </template>
+        </van-field>
+
+        <van-field label="上传时间">
+          <template #input>
+            {{roomKey.updateTime}}
+          </template>
+        </van-field>
+
+        <van-field label="钥匙编号">
+          <template #input>
+            {{roomKey.keyNo}}
+          </template>
+        </van-field>
+
+        <van-field label="存储位置">
+          <template #input>
+            {{roomKey.address}}
+          </template>
+        </van-field>
+
+        <van-image width="100" height="100" :src="roomKey.url" />
+
+      </shiro>
+    </div>
+  </x-loading>
+</template>
+
+<script>
+import { Field, Empty, Button, Image } from 'vant'
+import { useModel } from "@zjxpcyc/vue-tiny-store"
+import { computed, onMounted } from 'vue'
+
+export default {
+  components: {
+    [Field.name]: Field,
+    [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/secondhand/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/secondhand/detail/index.vue

 <template>
   <div class="secondhanddetail">
     <!-- xId='room.view' -->
-    <XLoading tip="正在加载详情">
+    <x-loading x-id="room.view" tip="正在加载详情">
       <div>
         <Swiper></Swiper>
       </div>
 
       <div class="title">
-        <p>{{ detail.roomInfo?.title }}</p>
+        <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>
-
-          <div style="float:right">
-            <van-popover
-              v-model:show="showPopover"
-              :actions="actions"
-              @select="onSelect"
-              placement="bottom-end"
-            >
-              <template #reference>
-                <van-icon name="chat-o" />
-              </template>
-            </van-popover>
-          </div>
-        </div>
+      <van-cell-group title="房源信息">
         <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>
-
-      <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>
-
-      <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-cell-group>
+
+      <van-cell-group title="其他信息">
+        <van-collapse v-model="collapseItem" accordion @change="handleCollapseChange">
+          <van-collapse-item name="1">
+            <template #title>
+              <div>基础信息</div>
+            </template>
+            <Contextc :options="baseInformationOptions"></Contextc>
+          </van-collapse-item>
+
+          <van-collapse-item name="2">
+            <template #title>
+              <div>物业信息</div>
+            </template>
+            <Contextc :options="propertyInformationOptions"></Contextc>
+          </van-collapse-item>
+
+          <van-collapse-item name="role">
+            <template #title>
+              <div>角色人</div>
+            </template>
+            <x-loading x-id="room.role" tips="请稍等...">
+              <Contextc :options="roleInformationOptions"></Contextc>
+            </x-loading>
+          </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-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-share-sheet
         v-model:show="showShare"
           placeholder="请输入电话"
         />
       </van-dialog>
-    </XLoading>
+    </x-loading>
   </div>
 </template>
 
   ShareSheet,
   Toast,
   Field,
+  Cell,
+  CellGroup,
+  Collapse,
+  CollapseItem,
 } from "vant";
 import { useModel } from "@zjxpcyc/vue-tiny-store";
+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 Stepc from "../../../components/stepC";
 // import { router } from "../../../router";
 
-import XLoading from "../../../components/XLoading";
-
 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,
-    XLoading: XLoading,
+    RoomAuth,
+    RoomKey,
+    RoomFollow,
+    RoomLook,
   },
   data() {
     return {};
   },
 
   setup() {
-    const router = useRouter();
-    const roomId = router.currentRoute.value.query.roomId;
-    const showPopover = ref(false);
-    const showShare = ref(false);
-    const phoneShow = ref(false);
-    const phone = ref("");
-    const showInfo = ref(false);
-    const { detail, getDetail, getSecurity } = useModel("room");
-    const { dicts, getDict } = useModel("dicts");
+    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 showInfo = ref(false)
+
+    const { detail, roomRole, getDetail, getRole, getSecurity } = useModel("room")
+    const { dicts, getDict } = useModel("dicts")
 
     onMounted(() => {
       getDetail(roomId);
           : "敏感信息",
       },
       {
-        name: `查看敏感信息(${detail.leftSecurityNum})`,
-        value: "123",
-        type: "BUTTOM",
+        name: ' ',
+        value: detail.leftSecurityNum,
+        type: "SECURITY",
         click: () => onLookClick(),
       },
     ]);
       },
     ]);
 
-   const getNameFormat=(name,id)=>(name||'') + (name?`(ID:${id})`:'')
-   
     // 角色人
-    const roleInformationOptions =computed(() => [
+    const roleInformationOptions = computed(() => [
       {
         name: "首次录入人",
-        value: getNameFormat(detail.roomRole?.createName,detail.roomRole?.createId),
+        value: detail.createMethod === '1' ? '外部录入' : `${roomRole.createName}(ID: ${roomRole.createId})`,
       },
       {
-        name: "时间",
-        value:detail.roomRole?.createTime
+        name: "首次录入时间",
+        value: roomRole.createTime
       },
       {
         name: "录入人",
-        value: getNameFormat(detail.roomRole?.recordName,detail.roomRole?.recordId), 
+        value: detail.createMethod === '1' ? '外部录入' : `${roomRole.recordName}(ID: ${roomRole.recordId})`,
       },
       {
-        name: "时间",
-        value: detail.roomRole?.recordTime
+        name: "录入时间",
+        value: roomRole.recordTime
       },
       {
         name: "维护人",
-        value:  getNameFormat(detail.roomRole?.belongName,detail.roomRole?.belongId), 
+        value: roomRole.belongName && `${roomRole.belongName}(ID: ${roomRole.belongId})`,
       },
       {
         name: "查看电话",
       },
       {
         name: "实勘人",
-        value:   getNameFormat(detail.roomRole?.rescName,detail.roomRole?.rescId),  
+        value: roomRole.rescName && `${roomRole.rescName}(ID: ${roomRole.rescId})`,
       },
       {
-        name: "时间",
-        value: detail.roomRole?.rescTime,
+        name: "达成时间",
+        value: roomRole.rescTime,
       },
       {
         name: "钥匙人",
-        value:  getNameFormat(detail.roomRole?.keyName,detail.roomRole?.keyId),  
-        span: 24,
+        value: roomRole.keyName && `${roomRole.keyName}(ID: ${roomRole.keyId})`,
       },
       {
         name: "委托人",
-        value: getNameFormat(detail.roomRole?.authName,detail.roomRole?.authId), 
+        value: roomRole.authName && `${roomRole.authName}(ID: ${roomRole.authId})`,
       },
       {
-        name: "时间",
-        value:  detail.roomRole?.authTime,
+        name: "委托时间",
+        value: roomRole.authTime,
       },
       {
         name: "最后修改人",
-        value:  getNameFormat(detail.roomRole?.updateName,detail.roomRole?.updateId),  
+        value: roomRole.updateName && `${roomRole.updateName}(ID: ${roomRole.updateId})`,
       },
       {
-        name: "时间",
-        value: "123",
+        name: "最后修改时间",
+        value: roomRole.updateTime,
       },
     ]);
 
     // 委托书
-    const entrustOptions = [
+    const entrustOptions = computed(() => [
       {
         name: "委托书编号",
         value: "123",
         name: "截止时间",
         value: "123",
       },
-    ];
+    ]);
 
     // 钥匙
     const keyOptions = [
       showShare.value = false;
     };
 
+    // 查看房源内容
+    const handleCollapseChange = activeName => {
+      if (activeName === 'role' && roomId != roomRole.roomId) {
+        getRole(roomId)
+      }
+    }
+
     return {
       phone,
       housingInformationOptions,
       onShareSelect,
       shareOptions,
       detail,
+      collapseItem,
+      handleCollapseChange,
+      roomId,
     };
   },
 };
 <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; /*隐藏滚动条*/