提交

src/components/public/apartment-item.vue

@@ -36,7 +36,6 @@ const props = defineProps({
     item: Object,
 });
 
-let imgse = ref('https://oss.gter.net/Zvt57TuJSUvkyhw-xG7Y2l-R-Josd3fqqsgFptxhXa6RWi26P-BuTQccE7DK7tkb8MVYZjQ0Mjk~')
 </script>
 
 <style lang="less" scoped>

src/components/public/public-list-item.vue

@@ -69,21 +69,28 @@
                     listData.intermediary[data.intermediary] }}</div>
                 <img src="../../assets/homeImage/intermediaryTabImg.png" v-else class="intermediary-tab-img" alt="">
             </div>
-            <img class="" src="@/assets/img/publicImage/black-circle-cross.svg">
+            <div class="cancel-collection flexcenter" @click="cancelCollection(data.token)">
+                <img class="icon" src="@/assets/img/publicImage/black-circle-cross.svg">
+                取消收藏
+            </div>
         </div>
     </div>
 </template>
   
 <script setup>
-import { ref, defineProps, reactive, onMounted, getCurrentInstance } from "vue";
+import { ref, defineProps, reactive, defineEmits, onMounted, getCurrentInstance } from "vue";
 import { useRoute, useRouter } from 'vue-router';
 import store from '../../store/index';
 let props = defineProps({
     item: {
         type: Object
-    }
+    },
+    index: Number
 })
 
+const emit = defineEmits(['cancelCollection'])
+
+
 // console.log("item", props.item);
 let data = {}
 data = props.item
@@ -131,6 +138,10 @@ const stateObj = { // btn: 0  删除 编辑 1 删除 编辑 上架  2 删除 编
     }
 }
 
+const cancelCollection = token => {
+    emit('cancelCollection', { token, index: props['index'] })
+}
+
 </script>
 <style scoped lang="less">
 img {
@@ -371,6 +382,20 @@ img {
             color: #555555;
             text-align: center;
         }
+
+        .cancel-collection {
+            font-size: 14px;
+            color: #333333;
+            // padding: 0 23px;
+            height: 100%;
+            cursor: pointer;
+
+            .icon {
+                width: 16px;
+                height: 16px;
+                margin-right: 3px;
+            }
+        }
     }
 }
 </style>

src/views/user.vue

@@ -70,13 +70,13 @@
     }} | 下架 {{ stat['offshelf'] }}）</div>
 
     <div class="list wid1200 flexflex" v-if="tabState == 'fav'">
-        <div class="item" v-for="item in favData['list']">
+        <div class="item" v-for="(item, index) in favData['list']" :key="index">
-            <public-list-item :item="item"></public-list-item>
+            <public-list-item :item="item" :index="index" @cancelCollection="cancelCollection"></public-list-item>
         </div>
     </div>
     <div class="list wid1200 flexflex" v-if="tabState == 'publish'">
-        <div class="item" v-for="item in publishData['list']">
+        <div class="item" v-for="(item, index) in publishData['list']" :key="index">
-            <public-list-item :item="item"></public-list-item>
+            <public-list-item :item="item" :index="index" @cancelCollection="cancelCollection"></public-list-item>
         </div>
     </div>
 
@@ -141,7 +141,14 @@ async function init() {
     });
 }
 
-let loading = null
+// let loading = null
+
+let loading = ElLoading.service({
+  lock: true,
+  text: 'Loading',
+  background: 'rgba(0, 0, 0, 0.7)',
+  visible: false
+});
 
 let publishData = ref({
     page: 1,
@@ -151,7 +158,7 @@ let publishData = ref({
 let stat = ref({}) // 我的发布的详细数量
 // 获取发布数据
 const getPublishData = () => {
-    if (publishData.value['page'] == 0 || loading) return
+    if (publishData.value['page'] == 0 || loading['visible'].value) return
     loading = ElLoading.service({
         lock: true,
         text: 'Loading',
@@ -177,7 +184,7 @@ let favData = ref({
 
 // 获取收藏数据
 const getFavData = () => {
-    if (favData.value['page'] == 0 || loading) return
+    if (favData.value['page'] == 0 || loading['visible'].value) return
     loading = ElLoading.service({
         lock: true,
         text: 'Loading',
@@ -202,6 +209,16 @@ const cutTab = (value) => {
     else if (tabState.value == 'fav' && favData.value['list'].length == 0) getFavData()
 }
 
+let cancelCollection = data => {
+
+    favData.value.list.splice(data['index'], 1)
+
+    // proxy.$post("/tenement/pc/api/user/favList", {
+    // }).then(res => {
+    //     console.log(res, "res");
+    // })
+}
+
 </script>
 
 <style lang="less">