人脈紀錄

src/api/user.js

@@ -16,3 +16,8 @@ export const addUserCompany = async (params) => ajax(`/user/addUserCompany`,para
 export const updateUserCompany = async (params) => ajax(`/user/updateUserCompany`,params,'POST');
 export const deleteUserCompany = async (id) => ajax(`/user/deleteUserCompany`,{id},'POST');
 export const setUCDefault = async (id) => ajax(`/user/setUCDefault`,{id},'POST');
+
+export const getUserFavorite = async () => ajax(`/user/getFavorite`);
+export const getUserConnections = async () => ajax(`/user/getConnections`);
+export const addFavorite = async (userid)=> ajax(`/user/addFavorite`,{userid},"POST")
+export const delFavorite = async (id)=> ajax(`/user/delFavorite`,{id},"POST")

src/plugins/vant.js

@@ -15,6 +15,9 @@ import {
   Popup,
   Overlay,
   Switch,
+  Steps,
+  Step,
+  SwipeCell
 } from "vant";
 
 import zhTW from "vant/es/locale/lang/zh-TW";
@@ -37,5 +40,8 @@ export function vant(app) {
     .use(Dialog)
     .use(Popup)
     .use(Overlay)
-    .use(Switch);
+    .use(Switch)
+    .use(Steps)
+    .use(Step)
+    .use(SwipeCell)
 }

src/views/Connections/index.vue

@@ -17,11 +17,13 @@
     <div class="nav-wrap">
       <!-- Notification Tabs  Start -->
       <ul class="nav nav-tab2 nav-pills" id="pills-tab" role="tablist">
-          <li class="nav-item" role="presentation">
+        <li class="nav-item" role="presentation" @click="active = 1">
-            <button class="nav-link active" id="alert1-tab" data-bs-toggle="pill" data-bs-target="#alert1" type="button" role="tab" aria-controls="alert1" aria-selected="true">最愛</button>
+          <button class="nav-link active" id="alert1-tab" data-bs-toggle="pill" data-bs-target="#alert1" type="button"
+            role="tab" aria-controls="alert1" aria-selected="true">最愛</button>
         </li>
-          <li class="nav-item" role="presentation">
+        <li class="nav-item" role="presentation" @click="active = 2">
-            <button class="nav-link" id="offer1-tab" data-bs-toggle="pill" data-bs-target="#offer1" type="button" role="tab" aria-controls="offer1" aria-selected="true">紀錄</button>
+          <button class="nav-link" id="offer1-tab" data-bs-toggle="pill" data-bs-target="#offer1" type="button" role="tab"
+            aria-controls="offer1" aria-selected="true">紀錄</button>
         </li>
       </ul>
       <!-- Notification Tabs  End -->
@@ -29,42 +31,133 @@
     </div>
 
     <!-- Tab Content Start -->
-      <section class="tab-content ratio2_1" id="pills-tabContent">
+    <section class="tab-content ratio2_1" id="pills-tabContent" v-if="active == 1">
       <!-- Alert Content Start -->
       <div class="tab-pane fade show active" id="alert1" role="tabpanel" aria-labelledby="alert1-tab">
-          <!-- Last 7 Days Start -->
+        <template v-for="(uf, i) in userFavorite" :key="i">
+          <van-swipe-cell >
           <div class="offer-wrap">
-            <!-- Offer Box Start -->
+            <div class="offer-box" >
-            <div class="offer-box" v-for="i in 5" :key="i">
+            <div class="media" @click="goCard(uf.nfcurl)">
-              <div class="media">
+              <div class="icon-wrap bg-theme-orange-light avatar">
-                <div class="icon-wrap bg-theme-orange-light">
+                <img :src="uf.avatar" alt="avatar">
-                  <i class="iconly-Password icli"></i>
               </div>
               <div class="media-body">
-                  <h3 class="font-sm title-color">Wayne Hsu</h3>
+                <h3 class="font-sm title-color">{{ uf.real_name }}</h3>
-                  <span class="font-xs content-color">2023/2/14 13:00</span>
+                <div class="font-xs content-color">{{ uf.company }}</div>
+                <div class="font-xs content-color">{{ uf.title }}</div>
               </div>
-                <span class="badges bg-theme-theme-light font-theme">查看訊息</span>
             </div>
           </div>
-            <!-- Offer Box End -->
-
-
           </div>
-          <!-- Last 7 Days End -->
+          <template #right>
+            <van-button square text="删除" type="danger" class="delete-button" @click="handleDeleteUF(uf.ufid)"/>
+          </template>
+        </van-swipe-cell>
+        </template>
       </div>
       <!-- Alert Content End -->
     </section>
     <!-- Tab Content End -->
+
+    <section class="tab-content ratio2_1" id="pills-tabContent" v-else>
+      <van-steps direction="vertical" :active="0">
+        <van-step v-for="(v, i) in userConnections" :key="i">
+          <div class="user-conn">
+            <div class="user-conn-left">{{ v.name }}</div>
+            <div class="user-conn-right">
+              <i class="icon-heart" @click="handleAddFavorite(v.userid)">收藏</i>
+              <i class="icon-eye-circle" @click="goCard(v.nfcurl)">查看</i>
+            </div>
+          </div>
+          <p>{{ v.company }}</p>
+          <p>{{ v.time }}</p>
+        </van-step>
+      </van-steps>
+    </section>
   </main>
   <!-- Main End -->
   <Footer />
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue'
 import Footer from '@/components/Footer'
 
+import { getUserFavorite, getUserConnections, addFavorite, delFavorite } from '@/api/user'
+
+import { Toast } from 'vant'
+
+const active = ref(1)
+
+const userFavorite = ref()
+
+const userConnections = ref()
+
+onMounted(async () => {
+  let res = await getUserFavorite()
+  if (res.code === 200) {
+    userFavorite.value = res.data
+  }
+  let res2 = await getUserConnections()
+  if (res2.code === 200) {
+    userConnections.value = JSON.parse(res2.data)
+  }
+
+})
+
+
+const goCard = (url) => {
+  window.open(url + '&nouc=1', '_blank')
+}
+
+const handleAddFavorite = async (userid) => {
+  let res = await addFavorite(userid)
+  if (res.code === 200) {
+    return Toast('收藏成功')
+  }
+}
+
+const handleDeleteUF = async (id) => {
+  let res = await delFavorite(id)
+  if(res.code === 200){
+    userFavorite.value = userFavorite.value.filter(item => item.id !== id)
+  }
+}
+
 </script>
 
-<style>
+<style lang="less" scoped>
+.media {
+  .avatar {
+    img {
+      width: 50px;
+    }
+  }
+}
+
+.user-conn {
+  display: flex;
+  margin-bottom: 10px;
+
+  .user-conn-left {
+    flex: 1;
+    font-size: 18px;
+    font-weight: 500;
+  }
+
+  .user-conn-right {
+    width: 70px;
+
+    i {
+      font-size: 16px;
+      margin: 0 5px;
+    }
+  }
+}
+
+.delete-button {
+    height: 100%;
+    color: #FFF;
+  }
 </style>