feats

src/components/XLoading/index.vue

@@ -12,9 +12,9 @@
 </template>
 
 <script>
-import { computed } from "vue"
-import { Loading } from "vant"
-import { useModel } from "@zjxpcyc/vue-tiny-store"
+import { computed } from 'vue'
+import { Loading } from 'vant'
+import { useModel } from '@zjxpcyc/vue-tiny-store'
 // import store from '../../store'
 
 export default {
@@ -27,7 +27,7 @@ export default {
     xId: String,
   },
   setup(props) {
-    const { loading } = useModel("loading")
+    const { loading } = useModel('loading')
 
     const show = computed(() => loading[props.xId])
 

src/components/detailCompents/swiper/index.vue

@@ -1,11 +1,22 @@
 <template>
   <div class="swiper">
     <van-swipe :autoplay="3000" @change="onChange" ref="swipe">
-      <van-swipe-item v-for="(image, index) in images" :key="index">
-        <van-image height="300" :src="image.image" @click="onPerView(index)" />
+      <van-swipe-item v-for="(item, index) in images" :key="index">
+        <van-image height="300" :src="item.image" @click="onPerView(index)" />
       </van-swipe-item>
+      <template #indicator>
+        <div class="swiper-indicator" ref="indicator">
+          <span
+            v-for="(item, index) in images"
+            :key="index"
+            :class="{ active: current === index }"
+          >
+            {{ item.text }}
+          </span>
+        </div>
+      </template>
     </van-swipe>
-    <div class="swiper-tabs">
+    <!-- <div class="swiper-tabs">
       <van-tabs
         v-model:active="current"
         background="rgba(0, 0, 0, 0.69)"
@@ -14,19 +25,16 @@
         title-active-color="#d75e3a"
         @click="onClickTab"
       >
-        <van-tab
-          v-for="(image, index) in images"
-          :key="index"
-          :title="image.text"
-        >
-        </van-tab>
+        <template v-for="(item, index) in images" :key="index">
+          <van-tab :title="item.text" />
+        </template>
       </van-tabs>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script>
-import { ref } from "vue"
+import { ref } from 'vue'
 import {
   Swipe,
   SwipeItem,
@@ -34,10 +42,10 @@ import {
   ImagePreview,
   Tabs,
   Tab,
-} from "vant"
+} from 'vant'
 
 export default {
-  name: "swiper",
+  name: 'swiper',
   components: {
     [Swipe.name]: Swipe,
     [SwipeItem.name]: SwipeItem,
@@ -55,9 +63,11 @@ export default {
   setup(props) {
     const current = ref(0)
     const swipe = ref()
+    const indicator = ref()
 
     const onChange = (index) => {
       current.value = index
+      // indicator.value.scrollTo({ left: 1000 })
     }
     const onPerView = (index) => {
       ImagePreview({
@@ -70,14 +80,15 @@ export default {
       swipe.value.swipeTo(index)
       swipe.value.resize()
 
-      console.log(index, "ongchawng")
+      console.log(index, 'ongchawng')
     }
 
     // refs.checkbox.toggle();
-    onPerView
+
     return {
       swipe,
       current,
+      indicator,
       onChange,
       onPerView,
       onClickTab,
@@ -101,11 +112,25 @@ export default {
     width: 100%;
   }
 }
-.swiper .van-swipe-item {
-  /* color: #fff;
-  font-size: 20px;
-  line-height: 150px;
-  text-align: center;
-  background-color: #39a9ed; */
+
+.swiper-indicator {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.69);
+  color: #aaa;
+  display: flex;
+  flex-wrap: nowrap;
+  font-size: 0.85em;
+
+  span {
+    display: inline-block;
+    padding: 0.8em;
+    flex: none;
+
+    &.active {
+      color: #d75e3a;
+    }
+  }
 }
 </style>

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

@@ -17,7 +17,6 @@
       block
       size="small"
       type="warning"
-      v-if="roomInfo.status === '0'"
       v-shiro="'room:info:addFollow'"
       @click="goToAddFollow"
     >

src/view/secondhand/detail/index.vue

@@ -16,8 +16,8 @@
 
       <van-cell-group title="房源信息">
         <RoomProfile
-          :room-info="roomInfo"
-          :building="building"
+          :room-info="detail.roomInfo"
+          :building="detail.building"
           :other-data="roomOtherData"
         />
       </van-cell-group>
@@ -95,7 +95,7 @@
 </template>
 
 <script>
-import { ref, onMounted, computed, watch } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { Swiper } from '@/components/detailCompents'
 import {
@@ -169,15 +169,15 @@ export default {
 
     const { detail, getDetail } = useModel('room')
 
-    const roomInfo = ref({})
-    const building = ref({})
-    watch(detail, (nw) => {
-      roomInfo.value = nw.roomInfo
-      building.value = nw.building
-      // console.log('--------->', nw.building)
-    })
-    // const roomInfo = computed(() => detail.roomInfo || {})
-    // const building = computed(() => detail.building || {})
+    // const roomInfo = ref({})
+    // const building = ref({})
+    // watch(detail, (nw) => {
+    //   roomInfo.value = nw.roomInfo
+    //   building.value = nw.building
+    //   // console.log('--------->', nw.building)
+    // })
+    const roomInfo = computed(() => detail.roomInfo || {})
+    const building = computed(() => detail.building || {})
 
     const isNormalStatus = computed(() => {
       return detail.roomInfo?.status === '0'

src/view/secondhand/edithouse/index.vue

@@ -11,15 +11,15 @@
 </template>
 
 <script>
-import { watch } from "vue"
-import { useModel } from "@zjxpcyc/vue-tiny-store"
-import { useRoute, useRouter } from "vue-router"
-import { alert, showDanger } from "@/utils"
-import RoomBasic from "./components/Basic"
-import RoomForm from "./components/Form"
+import { onMounted } from 'vue'
+import { useModel } from '@zjxpcyc/vue-tiny-store'
+import { useRoute, useRouter } from 'vue-router'
+import { alert, showDanger } from '@/utils'
+import RoomBasic from './components/Basic'
+import RoomForm from './components/Form'
 
 export default {
-  name: "secondhanddetail",
+  name: 'secondhanddetail',
   components: {
     RoomBasic,
     RoomForm,
@@ -28,22 +28,12 @@ export default {
   setup() {
     const route = useRoute()
     const router = useRouter()
-    const { detail, getDetail, houseEdit } = useModel("room")
-
-    watch(
-      () => route.query.roomId,
-      (nw, od) => {
-        if (nw != od && nw) {
-          getDetail(nw)
-        }
-      },
-      { immediate: true }
-    )
+    const { detail, getDetail, houseEdit } = useModel('room')
 
     const handleSumbit = (values) => {
       houseEdit(values)
         .then(() => {
-          alert("编辑成功").then(() => {
+          alert('编辑成功').then(() => {
             router.go(-1)
           })
         })
@@ -52,6 +42,10 @@ export default {
         })
     }
 
+    onMounted(() => {
+      getDetail(route.query.roomId)
+    })
+
     return {
       handleSumbit,
       detail,