.

src/pages/Personal/Collection.vue

@@ -6,19 +6,18 @@
     </div>
     <ul class="collection-list">
       <li class="flex-center-between" v-for="(item, index) in list" :key="index">
-        <img class="image"
-          :src="item.coverImageUrl" alt="">
+        <img class="image" :src="item.coverImageUrl" alt="">
         <div class="collection-list-main">
           <div class="collection-list-main-left">
-            <div class="titles">UI界面设计教程</div>
+            <div class="titles">{{ item.courseTitle }}</div>
             <div class="gap10 tag">
-              <el-button type="primary" size="large" plain>技能标签</el-button>
+              <el-button type="primary" size="large" plain>{{ item.skillTag }}</el-button>
             </div>
-            <div class="">这是课程介绍这是课程介绍这是课程介绍这是课程介绍这是课程介绍这是课程介绍这是课程介绍这是课程介绍这是课程介绍</div>
+            <div class="">{{ item.courseIntro }}</div>
           </div>
-          <div class="btn flex-center">
-            <img src="/src/assets/imgs/my/star-a@2x.png" alt="">
-            <div class="">{{ index == 0 ? $t('common.collected') : $t('common.cancelCollect') }}</div>
+          <div @click="cancelCollect(item,index)" class="btn flex-center active">
+            <img src="/src/assets/imgs/my/star@2x.png" alt="">
+            <div class="">{{ $t('common.cancelCollect') }}</div>
           </div>
         </div>
       </li>
@@ -34,6 +33,13 @@
 import Pagination from '@/components/Pagination.vue'
 import { ref, onMounted } from 'vue'
 import { collectList } from '@/api/my.js'
+import { collect } from '@/api/course'
+
+import DGTMessage from '@/utils/message'
+
+import { useI18n } from 'vue-i18n' 
+const { t } = useI18n() 
+
 const form = ref({
   pageNum: 1,
   pageSize: 10,
@@ -42,6 +48,14 @@ const form = ref({
 
 const list = ref([])
 
+// 取消收藏
+const cancelCollect = async (item,index) =>{
+  let res = await collect({objectId:item.objectId});
+  console.log(res)
+   DGTMessage.success(`${t('common.unCollect')}${t('common.success')}`)
+  getList()
+}
+
 const getList = async () => {
   let res = await collectList(form.value);
   console.log(res);