feats

src/main.js

-import { createApp } from "vue"
-import App from "./App.vue"
-import { router } from "./router"
-import store from "./store"
-import "vant/lib/index.css"
+import { createApp } from 'vue'
+import App from './App.vue'
+import { router } from './router'
+import store from './store'
+import 'vant/lib/index.css'
 
-import { Notify, Dialog } from "vant"
-import GSection from "./components/GSection"
-import Shiro from "./components/Shiro"
-import XLoading from "./components/XLoading"
-import XField from "./components/XField"
-import shiro from "./utils/plugins/shiro"
+import { Notify, Dialog } from 'vant'
+import GSection from './components/GSection'
+import Shiro from './components/Shiro'
+import XLoading from './components/XLoading'
+import XField from './components/XField'
+import shiro from './utils/plugins/shiro'
 
 const app = createApp(App)
 app.use(store)
 
 app.component(Notify.Component.name, Notify.Component)
 app.component(Dialog.Component.name, Dialog.Component)
-app.component("g-section", GSection)
-app.component("x-loading", XLoading)
-app.component("x-field", XField)
-app.component("shiro", Shiro)
+app.component('g-section', GSection)
+app.component('x-loading', XLoading)
+app.component('x-field', XField)
+app.component('shiro', Shiro)
 
-app.mount("#app")
+app.config.errorHandler = (err, vm, info) => {
+  console.error('VUE ERROR')
+  console.error(err)
+  console.error(vm)
+  console.error(info)
+}
+
+app.mount('#app')

src/view/login/index.vue

 </template>
 
 <script>
-import { reactive } from "vue"
-import { Form, Button, Field, checkbox } from "vant"
-import { useRouter } from "vue-router"
+import { reactive } from 'vue'
+import { Form, Button, Field, checkbox } from 'vant'
+import { useRouter } from 'vue-router'
 
-import usericon from "./../../assets/user.png"
-import passwordicon from "./../../assets/password.png"
-import request from "../../utils/request"
+import usericon from './../../assets/user.png'
+import passwordicon from './../../assets/password.png'
+import request from '../../utils/request'
 export default {
-  name: "login",
+  name: 'login',
   components: {
     [Form.name]: Form,
     [Button.name]: Button,
     const state = reactive({})
     const router = useRouter()
     const onSubmit = (values) => {
-      console.log(values.loginName && values.password, "submit", values)
+      console.log(values.loginName && values.password, 'submit', values)
       if (values.loginName && values.password) {
         request({
-          url: "/login",
+          url: '/login',
           params: values,
         }).then((res) => {
-          console.log(res, "res")
-
-          router.push("/home")
+          router.replace('/home')
         })
       }
     }

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

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

src/view/secondhand/detail/components/Main.vue → src/view/secondhand/detail/components/Profile.vue

     <x-field label="房源ID"> {{ roomInfo.roomCode }}{{ roomInfo.id }} </x-field>
 
     <x-field label="所属楼盘">
-      {{ otherData.building.buildingName }}
+      {{ otherData.building?.buildingName }}
     </x-field>
 
     <x-field label="所属区县">
-      {{ otherData.roomCity.areaName }}
+      {{ otherData.roomCity?.areaName }}
     </x-field>
 
     <x-field label="所属商圈">
-      {{ otherData.roomBusi.areaName }}
+      {{ otherData.roomBusi?.areaName }}
     </x-field>
 
     <x-field label="楼层">
     <x-field label="面积"> {{ roomInfo.acreage }} ㎡ </x-field>
 
     <x-field label="价格">
-      {{ roomInfo.totalPrice }} 万元 / {{ avgPrice }} 元/㎡
+      {{ price }}
     </x-field>
 
     <x-field label="创建方式">
 </template>
 
 <script>
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import { Button, Dialog } from 'vant'
+import { Button } from 'vant'
 import request from '@/utils/request'
-import { showDanger } from '@/utils'
+import { showDanger, alert } from '@/utils'
 
 const getSecurity = (roomId) => {
   return request({
       type: Object,
       default: () => ({}),
     },
-    otherData: Object,
+    building: {
+      type: Object,
+      default: () => ({}),
+    },
+    otherData: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   setup(props) {
     const router = useRouter()
     const unfollowRoom = ref()
 
     const floor = computed(() => {
-      const [a, b, c] = (props.roomInfo.roomFloor || '').split(',')
+      const [a, b, c] = (props.roomInfo?.roomFloor || '').split(',')
       return `${a || ''}/${b || ''}(${c || ''})`
     })
 
-    const avgPrice = computed(() => {
-      return Number(
-        (props.roomInfo.totalPrice * 10000) / props.roomInfo.acreage
-      ).toFixed(2)
+    const price = computed(() => {
+      const total = props.roomInfo?.totalPrice
+      const acreage = props.roomInfo?.acreage
+      const avg =
+        total && acreage
+          ? Number((total * 10000) / acreage).toFixed(2)
+          : undefined
+
+      return `${total || ''} 万元 / ${avg || ''} 元/㎡`
     })
 
     const goToAddFollow = () =>
             if ('1003' === e.code) {
               unfollowRoom.value = JSON.parse(e.message)
 
-              Dialog.alert({
+              alert({
                 title: '去跟进',
                 message: `您存在未跟进的房源，房源编号: ${unfollowRoom.value.id}`,
               }).then(() => {
       }
     }
 
+    watch(
+      () => props.roomInfo,
+      () => {
+        console.log('------Main-------->')
+      }
+    )
+
     return {
       floor,
-      avgPrice,
+      price,
       securityInfo,
       handleSecurityClick,
       unfollowRoom,

src/view/secondhand/detail/index.vue

       </div>
 
       <div class="title">
-        <p class="body">{{ detail.roomInfo?.title }}</p>
-
+        <div class="body">
+          <div>{{ detail.roomInfo.title }}</div>
+          <div><RoomTag :room-info="detail.roomInfo" /></div>
+        </div>
         <MoreActions v-if="isNormalStatus" :room-info="detail.roomInfo" />
       </div>
 
       <van-cell-group title="房源信息">
-        <RoomMain :room-info="detail.roomInfo" :other-data="roomOtherData" />
+        <RoomProfile
+          :room-info="detail.roomInfo"
+          :building="detail.building"
+          :other-data="roomOtherData"
+        />
       </van-cell-group>
 
       <van-cell-group title="其他信息">
   CollapseItem,
 } from 'vant'
 import { useModel } from '@zjxpcyc/vue-tiny-store'
+import RoomTag from '@/components/RoomTag'
 import MoreActions from './components/MoreActions'
-import RoomMain from './components/Main'
+import RoomProfile from './components/Profile'
 import RoomBase from './components/Base'
 import RoomEstate from './components/Estate'
 import RoomRole from './components/Role'
 import RoomKey from './components/Key'
 import RoomFollow from './components/Follow'
 import RoomLook from './components/Look'
-// import Contextc from "../../../components/contextC"
-// import { router } from "../../../router";
 
 export default {
   name: 'secondhanddetail',
     [Dialog.Component.name]: Dialog.Component,
 
     Swiper,
+    RoomTag,
     MoreActions,
-    RoomMain,
+    RoomProfile,
     RoomBase,
     RoomEstate,
     RoomRole,
     RoomFollow,
     RoomLook,
   },
-  data() {
-    return {}
-  },
 
   setup() {
     const router = useRouter()
         .map((x) => ({ image: x.url, text: getRescType(x.imgType) }))
     })
 
-    onMounted(() => {
-      getDetail(roomId)
-      getDict('roomResc_type')
-    })
-
     const shareOptions = [
       { name: '微信', icon: 'wechat' },
       { name: '微博', icon: 'weibo' },
     const roomOtherData = computed(() => {
       return {
         leftSecurityNum: detail.leftSecurityNum,
-        roomCity: detail.roomCity || {},
-        roomBusi: detail.roomBusiness || {},
-        building: detail.building || {},
+        roomCity: detail.roomCity,
+        roomBusi: detail.roomBusiness,
       }
     })
 
+    onMounted(() => {
+      getDetail(roomId)
+      getDict('roomResc_type')
+    })
+
     return {
       phone,
       imageList,
 
     .body {
       flex: auto;
+      padding-top: 1em;
     }
 
     .action {

src/view/secondhand/index.vue

     }
 
     onMounted(() => {
-      const loadInst = Toast.loading({
-        message: '请稍候...',
-        forbidClick: true,
-        overlay: true,
-        duration: 0,
-      })
-
-      onLoad()
-        .then(() => {
-          loadInst.clear()
+      if (page.pageNo !== 1) {
+        const loadInst = Toast.loading({
+          message: '请稍候...',
+          forbidClick: true,
+          overlay: true,
+          duration: 0,
         })
-        .catch(() => loadInst.clear())
+
+        onLoad()
+          .then(() => {
+            loadInst.clear()
+          })
+          .catch(() => loadInst.clear())
+      }
     })
 
     const toDetail = (item) => {