通訊錄 - 設定用戶類別及部份修正

src/api/index.js

@@ -79,12 +79,15 @@ export const getFlexcard = async () =>
   ajax(`/ads/getFlexcard`);
 
 //通訊錄
-export const getUserFaviList = async (params) =>
+export const getUserFaviList = async (cate_id) =>
-  ajax(`/UserFavi/getUserFaviList`, params , "GET");
+  ajax(`/UserFavi/getUserFaviList`, { cate_id }, "GET");
 
 export const addUserFavi = async (params) =>
   ajax(`/UserFavi/addUserFavi`, params, "POST");
 
+export const setUserFaviCate = async (params) =>
+  ajax(`/UserFavi/setUserFaviCate`, params , "POST");
+
 export const getUserCateList = async () =>
   ajax(`/UserCate/getUserCateList`);
 

src/views/Address/index.vue

@@ -1,12 +1,14 @@
 <script setup>
+import _ from 'lodash';
 
 import { showToast, showSuccessToast, showLoadingToast } from 'vant';
 
-import { getUserFaviList, getUserCateList, updateUserCate } from '@/api'
+import { getUserFaviList, getUserCateList, updateUserCate, setUserFaviCate } from '@/api'
 
 import { onMounted, reactive, ref, toRefs, computed, watch } from 'vue'
 
 
+
 const setShowPicker = ref(false);
 
 const selectVal1 = ref('all');
@@ -14,76 +16,113 @@ const selectVal2 = ref('普通');
 const selectOpt1 = ref([{ text: '全部', value: 'all' }]);
 const selectOpt2 = ref([{ text: '重要', value: '重要' }, { text: '普通', value: '普通' }]);
 
-const addressList = ref({
+const addressList = ref([]);
-  data:[
+
-    {
+onMounted(async () => {
-      id:"a1",
+  let res = await getUserFaviList(0);
-      real_name:"樹林李敏鎬",
+  if (res.code === 200) {
-      line:"test",
+    addressList.value = res.data;
-      user_cate_id:''
+  }
-    },
+
-    {
+  res = await getUserCateList();
-      id:"a2",
+  if (res.code === 200) {
-      real_name:"五條悟",
+    console.log('res.data', res.data)
-      line:"test",
+    columns.value = [columns.value[0], ...res.data];
-      user_cate_id:''
+    columns2.value = [columns2.value[0], ...res.data];
-    },
+    if(res.data.length > 0){
-    {
+      modalForm.value.sort = res.data;
-      id:"a3",
+    }else{
-      real_name:"機哩瓜啦",
+      modalForm.value.sort = [_.cloneDeep(defaultCate)];
-      line:"test",
+    }
-      user_cate_id:''
+  }
-    },
-  ]
 });
 
-const modalForm = ref({
+// START: 通訊錄類別
-  page: 1,
+const fieldValue = ref('全部-全部');
-  sort:[
+const showCatePicker = ref(false);
+
+const customFieldName = {
+  text: 'name',
+  value: 'id',
+  children: 'children',
+};
+
+const columns = ref([
   {
-      "id": 1,
+    id: 0,
-      "name": "第一類",
+    name: '全部',
-      "children": [
+    children: [
-        {"id": 4,"name": "普通"},
-        {"id": 5,"name": "重要"}
-      ]
-    },
       {
-      "id": 2,
+        id: 0,
-      "name": "第二類",
+        name: '全部'
-      "children": [
+      }
-        {"id": 6,"name": "普通"},
-        {"id": 7,"name": "重要"}
     ]
   },
+]);
+
+const onCateConfirm = async (value) => {
+  let res = await getUserFaviList(value.selectedValues[1]);
+  if (res.code === 200) {
+    addressList.value = res.data;
+  }
+
+  showCatePicker.value = false;
+};
+
+const onCateChange = (value) => {
+  fieldValue.value = value.selectedOptions.map((item) => item.name).join('-');
+};
+
+// END: 通訊錄類別
+
+// START: 更改好友類別
+const columns2 = ref([
   {
-      "id": 3,
+    id: 0,
-      "name": "第三類",
+    name: '未分類',
-      "children": [
+    children: [
-        {"id": 8,"name": "普通"},
+      {
-        {"id": 9,"name": "重要"},
+        id: 0,
-        {"name": "特殊"}
+        name: '未分類'
-      ]
       }
     ]
-});
+  },
+]);
 
-onMounted(async() => {
+const showChangeCatePicker = ref(false);
-  let res = await getUserFaviList();
+const changeUserId = ref('');
-  if (res.code === 200) {
-    addressList.value.data = res.data;
-  }
 
-  res = await getUserCateList();
+const handleChangeCate = (userId) => {
+  changeUserId.value = userId;
+  showChangeCatePicker.value = true;
+};
+
+const onChangeCateConfirm = async (value) => {
+
+  let res = await setUserFaviCate({ uf_user_id: changeUserId.value,cate_id : value.selectedValues[1] });
   if (res.code === 200) {
-    let sort = modalForm.value.sort;
+    showSuccessToast('更新成功')
-    sort.forEach((item, i) => {
+  } else {
-      selectOpt1.value.push({
+    showToast('更新失敗')
-        text:item.name,
-        value:i
-      })
-    });
   }
+  showChangeCatePicker.value = false;
+};
+
+const onChangeCateChange = (value) => {
+  console.log('Change Category');
+};
+
+// END: 更改好友類別
+
+// START: 編輯通訊錄
+const defaultCate = {
+  "id": 0,
+  "name": ""
+};
+
+const modalForm = ref({
+  page: 1,
+  sort: [_.cloneDeep(defaultCate)]
 });
 
 const sel1Change = (value) => {
@@ -106,16 +145,7 @@ const sel1Change = (value) => {
 };
 
 const addCard = () => {
-  modalForm.value.sort.push(
+  modalForm.value.sort.push(_.cloneDeep(defaultCate));
-    {
-      "name": "",
-      "children": [
-        {
-          "name": "普通"
-        }
-      ]
-    }
-  );
   modalForm.value.page = modalForm.value.sort.length;
 };
 
@@ -131,10 +161,7 @@ const addBtn = (page) => {
     modalForm.value.sort[page - 1].children = [];
   }
 
-  modalForm.value.sort[page - 1].children.push({
+  modalForm.value.sort[page - 1].children.push(_.cloneDeep(defaultCate));
-    "id": '',
-    "name": ""
-  });
 };
 
 const moveCard = (type, page) => {
@@ -188,8 +215,9 @@ const moveBtn = (type, index) => {
   }
 };
 
+
 const onSubmit = async () => {
-  let res = await updateUserCate(modalForm.value.sort)
+  let res = await updateUserCate({ category: modalForm.value.sort })
   if (res.code === 200) {
     showSuccessToast('更新成功')
     // router.push('/member')
@@ -203,13 +231,8 @@ const onSubmit = async () => {
 
 <template>
   <div class="address page">
-    <van-nav-bar
+    <van-nav-bar class="bg-skyBlue py-1" left-arrow right-arrow @click-left="$router.push('/')"
-      class="bg-skyBlue py-1"
+      @click-right="setShowPicker = true">
-      left-arrow
-      right-arrow
-      @click-left="$router.push('/')"
-      @click-right="setShowPicker = true"
-    >
       <template #title>
         <h5 class="text-white mb-1"><strong>通訊錄</strong></h5>
       </template>
@@ -223,26 +246,28 @@ const onSubmit = async () => {
     </van-nav-bar>
 
     <div class="content">
+      <!-- START: 通訊錄類別 -->
       <van-cell-group inset>
-        <van-dropdown-menu>
+        <van-field v-model="fieldValue" is-link readonly label="類別" placeholder="通訊錄類別" @click="showCatePicker = true" />
-          <van-dropdown-item v-model="selectVal1" :options="selectOpt1" @change="sel1Change"/>
+        <van-popup v-model:show="showCatePicker" round position="bottom">
-          <van-dropdown-item v-model="selectVal2" :options="selectOpt2" />
+          <van-picker :columns="columns" :columns-field-names="customFieldName" confirm-button-text="確認"
-        </van-dropdown-menu>
+            cancel-button-text="取消" @cancel="showCatePicker = false" @confirm="onCateConfirm" @change="onCateChange" />
+        </van-popup>
       </van-cell-group>
+      <!-- END: 通訊錄類別 -->
 
       <van-cell-group inset>
         <van-list>
-
+          <div class="list-item" v-for="(item, index) in addressList" :data-cateid="item.user_cate_id" :key="index">
-          <div class="list-item" v-for="(item, index) in addressList.data" :data-cateid="item.user_cate_id" :key="index">
             <div class="left">
-              <div class="avatar"><img :src="`https://fakeimg.pl/350x200/?text=${item.id}`"></div>
+              <div class="avatar"><img :src="item.avatar"></div>
               <div class="text">
                 <h5 class="name ellipsis">{{ item.real_name }}</h5>
                 <div class="desc ellipsis">@{{ item.line }}</div>
               </div>
             </div>
             <div class="right">
-              <van-button size="small" class="border-0">
+              <van-button size="small" class="border-0" @click="handleChangeCate(item.user_id)">
                 <h5><i class="fa-solid fa-heart text-darkBlue"></i></h5>
               </van-button>
               <van-button size="small" class="border-0" :url="`line://ti/p/@${item.line}`">
@@ -255,39 +280,19 @@ const onSubmit = async () => {
 
       </van-cell-group>
     </div>
-
+    <!-- START: 編輯通訊錄 -->
-    <van-dialog
+    <van-dialog v-model:show="setShowPicker" width="400" showCancelButton confirm-button-text="確認修改" @confirm="onSubmit">
-      v-model:show="setShowPicker"
-      width="400"
-      showCancelButton
-      confirm-button-text="確認修改"
-      @confirm="onSubmit"
-    >
       <van-form @submit="onSubmit">
-        <keep-alive>
         <div id="app">
-
           <div class="bg-lightPink px-2 pt-3">
             <ul class="nav nav-tabs">
-                <li
+              <li class="nav-item" v-for="(card, index) in modalForm.sort" :key="index"
-                  class="nav-item"
+                @click="modalForm.page = index + 1">
-                  v-for="(card, index) in modalForm.sort"
+                <button type="button" class="nav-link" :class="{ active: modalForm.page === index + 1 }">
-                  :key="index"
-                  @click="modalForm.page = index + 1"
-                >
-                  <button
-                    type="button"
-                    class="nav-link"
-                    :class="{ active: modalForm.page === index + 1 }"
-                  >
                   {{ index + 1 }}
                 </button>
               </li>
-                <li
+              <li class="nav-item" @click="addCard" v-if="modalForm.sort.length < 10">
-                  class="nav-item"
-                  @click="addCard"
-                  v-if="modalForm.sort.length < 10"
-                >
                 <button type="button" class="nav-link">
                   <i class="fa fa-plus-circle"></i>
                 </button>
@@ -296,104 +301,64 @@ const onSubmit = async () => {
           </div>
 
           <van-cell-group class="m-0 pt-2">
-              <van-field
+            <van-field label="調整卡片順序" :border="false" v-if="modalForm.sort.length > 1">
-                label="調整卡片順序"
-                :border="false"
-                v-if="modalForm.sort.length > 1"                
-              >
               <template #button>
-                  <van-button
+                <van-button size="small" class="ml-1 btn-skyBlue" icon="arrow-left"
-                    size="small"
+                  @click="moveCard(0, modalForm.page)">前移</van-button>
-                    class="ml-1 btn-skyBlue"
+                <van-button size="small" class="ml-1 btn-skyBlue" icon="arrow"
-                    icon="arrow-left"
+                  @click="moveCard(1, modalForm.page)">後移</van-button>
-                    @click="moveCard(0, modalForm.page)"
+                <van-button size="small" class="ml-1 btn-tomatoRed" icon="delete-o"
-                    >前移</van-button
+                  @click="delCard(modalForm.page)"></van-button>
-                  >
-                  <van-button
-                    size="small"
-                    class="ml-1 btn-skyBlue"
-                    icon="arrow"
-                    @click="moveCard(1, modalForm.page)"
-                    >後移</van-button
-                  >
-                  <van-button
-                    size="small"
-                    class="ml-1 btn-tomatoRed"
-                    icon="delete-o"
-                    @click="delCard(modalForm.page)"
-                  ></van-button>
               </template>
             </van-field>
 
-              <van-field
+            <van-field v-model="modalForm.sort[modalForm.page - 1].name" label="分類名稱" id="vcard-title" input-align="right"
-                v-model="modalForm.sort[modalForm.page - 1].name"
+              placeholder="請輸入分類名稱" />
-                label="分類名稱"
-                id="vcard-title"
-                input-align="right"
-                placeholder="請輸入分類名稱"
-              />     
 
             <div class="listCnt">
-                <div
+              <div class="item" v-for="(btn, index) in modalForm.sort[modalForm.page - 1].children" :key="index">
-                  class="item"
+                <van-field v-model="btn.name" id="cardbtn-text-0" placeholder="請輸入子項目名稱" class="bg-transparent">
-                  v-for="(btn, index) in modalForm.sort[modalForm.page - 1].children"
-                  :key="index"
-                >
-                  <van-field
-                    v-model="btn.name"
-                    id="cardbtn-text-0"
-                    placeholder="請輸入子項目名稱"
-                    class="bg-transparent"
-                  >
                   <template #button>
-                      <van-button
+                    <van-button size="small" class="bg-transparent border-0" icon="arrow-up" @click="moveBtn(0, index)"
-                        size="small"
+                      v-if="modalForm.sort[modalForm.page - 1].children.length > 1"></van-button>
-                        class="bg-transparent border-0"
+                    <van-button size="small" class="bg-transparent border-0" icon="arrow-down" @click="moveBtn(1, index)"
-                        icon="arrow-up"
+                      v-if="modalForm.sort[modalForm.page - 1].children.length > 1"></van-button>
-                        @click="moveBtn(0, index)"
+                    <van-button size="small" class="bg-transparent border-0" icon="delete-o"
-                        v-if="modalForm.sort[modalForm.page - 1].children.length > 1"
+                      @click="delBtn(index)"></van-button>
-                      ></van-button>
-                      <van-button
-                        size="small"
-                        class="bg-transparent border-0"
-                        icon="arrow-down"
-                        @click="moveBtn(1, index)"
-                        v-if="modalForm.sort[modalForm.page - 1].children.length > 1"
-                      ></van-button>
-                      <van-button
-                        size="small"
-                        class="bg-transparent border-0"
-                        icon="delete-o"
-                        @click="delBtn(index)"
-                      ></van-button>
                   </template>
                 </van-field>
               </div>
-                <van-button
+              <van-button block class="btn-tomatoRed" icon="add-o" @click="addBtn(modalForm.page)">
-                  block
-                  class="btn-tomatoRed"
-                  icon="add-o"
-                  @click="addBtn(modalForm.page)"
-                >
                 <h6>新增按鈕</h6>
               </van-button>
             </div>
 
           </van-cell-group>
         </div>
-        </keep-alive>
       </van-form>
 
     </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"
+        @change="onChangeCateChange" />
+    </van-popup>
+
   </div>
 </template>
 
 <style lang="less" scoped>
-
 .address {
   .content {
     min-height: calc(100vh - 54px);
   }
+
   .van-list {
     .list-item {
       display: flex;
@@ -447,6 +412,7 @@ const onSubmit = async () => {
       }
     }
   }
+
   .nav-tabs {
     .nav-link {
       color: #4a677d;
@@ -454,6 +420,7 @@ const onSubmit = async () => {
       border-color: transparent;
       margin-right: 4px;
     }
+
     .nav-item.show .nav-link,
     .nav-link.active {
       color: #fff;
@@ -464,6 +431,7 @@ const onSubmit = async () => {
 
   .listCnt {
     padding: 15px;
+
     .item {
       margin-bottom: 15px;
       border: 1px #ddd solid;
@@ -471,5 +439,4 @@ const onSubmit = async () => {
     }
   }
 }
-
 </style>

src/views/Card/Edit.vue

@@ -803,7 +803,7 @@ const handleSubmit = async () => {
   .flex-section {
     width: 100%;
   }
-  :deep .van-field__control{
+  :deep(.van-field__control){
     justify-content: center;
     .upload-main {
       flex-direction: column;