0000827

src/api/index.js

@@ -85,6 +85,10 @@ export const getUserFaviList = async (cate_id) =>
 export const addUserFavi = async (params) =>
   ajax(`/UserFavi/addUserFavi`, params, "POST");
 
+export const deleteUserFavi = async (id) =>
+  ajax(`/UserFavi/deleteUserFavi`, { id }, "GET");
+
+
 export const setUserFaviCate = async (params) =>
   ajax(`/UserFavi/setUserFaviCate`, params , "POST");
 

src/views/Address/index.vue

@@ -1,13 +1,16 @@
 <script setup>
 import _ from 'lodash';
 
-import { showToast, showSuccessToast } from 'vant';
+import { showToast, showSuccessToast, showConfirmDialog } from 'vant';
 
-import { getUserFaviList
-          , getUserCateList
-          , updateUserCate
-          , setUserFaviCate
-          , addUserFavi } from '@/api'
+import {
+  getUserFaviList
+  , getUserCateList
+  , updateUserCate
+  , setUserFaviCate
+  , addUserFavi
+  , deleteUserFavi
+} from '@/api'
 
 import { onMounted, onBeforeMount, ref } from 'vue'
 import { useRoute } from 'vue-router';
@@ -24,32 +27,60 @@ const selectOpt2 = ref([{ text: '重要', value: '重要' }, { text: '普通', v
 const addressList = ref([]);
 
 onBeforeMount(async () => {
-  if(route.query.act === 'add'){
-    let res = await addUserFavi({uf_user_id : route.query.cardid});
+  if (route.query.act === 'add') {
+    let res = await addUserFavi({ uf_user_id: route.query.cardid });
   }
 });
 
 onMounted(async () => {
+  initData();
+  getCateList();
+});
+
+const initData = async () => {
   let res = await getUserFaviList(0);
   if (res.code === 200) {
     addressList.value = res.data;
   }
-
-  getCateList();
-});
+};
 
 const getCateList = async () => {
   let res = await getUserCateList();
   if (res.code === 200) {
     columns.value = [columns.value[0], ...res.data];
     columns2.value = [columns2.value[0], ...res.data];
-    if(res.data.length > 0){
+    if (res.data.length > 0) {
       modalForm.value.sort = res.data;
-    }else{
+    } else {
       modalForm.value.sort = [_.cloneDeep(defaultCate)];
     }
   }
 }
+
+const handleDeleteFavi = async (id) => {
+  // vant 詢問是否刪除
+  showConfirmDialog({
+    title: '確認刪除',
+    message:
+      '是否確認刪除好友?',
+    cancelButtonText: '取消',
+    confirmButtonText: '確認',
+  })
+    .then(async () => {
+      let res = await deleteUserFavi(id);
+      if (res.code === 200) {
+        initData();
+        showSuccessToast('刪除成功')
+      } else {
+        showToast('刪除失敗')
+      }
+    })
+    .catch(() => {
+    });
+
+};
+
+
 // START: 通訊錄類別
 const fieldValue = ref('全部-全部');
 const showCatePicker = ref(false);
@@ -112,7 +143,7 @@ const handleChangeCate = (userId) => {
 
 const onChangeCateConfirm = async (value) => {
 
-  let res = await setUserFaviCate({ uf_user_id: changeUserId.value,cate_id : value.selectedValues[1] });
+  let res = await setUserFaviCate({ uf_user_id: changeUserId.value, cate_id: value.selectedValues[1] });
   if (res.code === 200) {
     getCateList();
     showSuccessToast('更新成功')
@@ -289,6 +320,9 @@ const onSubmit = async () => {
               <van-button size="small" class="border-0" :url="`line://ti/p/@${item.line}`">
                 <h5><i class="fa-solid fa-share-nodes text-darkBlue"></i></h5>
               </van-button>
+              <van-button size="small" class="border-0" @click="handleDeleteFavi(item.id)">
+                <h5><i class="fa-solid fa-trash text-darkBlue"></i></h5>
+              </van-button>
             </div>
           </div>
 
@@ -297,14 +331,9 @@ const onSubmit = async () => {
       </van-cell-group>
     </div>
     <!-- START: 編輯通訊錄 -->
-    <van-dialog 
-    v-model:show="setShowPicker" 
-    width="400" 
-    showCancelButton 
-    confirm-button-text="確認修改" 
-    @confirm="onSubmit">
-
-    <van-form @submit="onSubmit">
+    <van-dialog v-model:show="setShowPicker" width="400" showCancelButton confirm-button-text="確認修改" @confirm="onSubmit">
+
+      <van-form @submit="onSubmit">
         <div id="app" class="address-block">
           <div class="bg-lightPink px-2 pt-3">
             <ul class="nav nav-tabs">
@@ -362,13 +391,8 @@ const onSubmit = async () => {
     </van-dialog>
     <!-- END: 編輯通訊錄 -->
     <van-popup v-model:show="showChangeCatePicker" round position="bottom">
-      <van-picker 
-        :columns="columns2" 
-        :columns-field-names="customFieldName" 
-        confirm-button-text="確認"
-        cancel-button-text="取消" 
-        @cancel="showChangeCatePicker = false" 
-        @confirm="onChangeCateConfirm"
+      <van-picker :columns="columns2" :columns-field-names="customFieldName" confirm-button-text="確認"
+        cancel-button-text="取消" @cancel="showChangeCatePicker = false" @confirm="onChangeCateConfirm"
         @change="onChangeCateChange" />
     </van-popup>
 
@@ -462,7 +486,7 @@ const onSubmit = async () => {
   }
 }
 
-.address-block{
+.address-block {
   max-height: 80vh;
   overflow-y: auto;
 }