From fe1ad1f98a6247f2d193de59880b1fa2e0cdb35b Mon Sep 17 00:00:00 2001
From: Wayne <wwayne.hsu@gmail.com>
Date: Wed, 4 Sep 2024 14:34:06 +0800
Subject: [PATCH] 0001245

---
 src/api/faviLog.js          |  13 ++
 src/views/Address/index.vue | 240 +++++++++++++++++++++++++++++-------
 2 files changed, 209 insertions(+), 44 deletions(-)
 create mode 100644 src/api/faviLog.js

diff --git a/src/api/faviLog.js b/src/api/faviLog.js
new file mode 100644
index 0000000..d6a6332
--- /dev/null
+++ b/src/api/faviLog.js
@@ -0,0 +1,13 @@
+import ajax from "./ajax";
+
+export const getFaviLogs = async (id) =>
+  ajax(`/faviLog/getFaviLogs`,{id},"GET");
+
+export const addFaviLog = async (params) =>
+  ajax(`/faviLog/addFaviLog`,params,"POST");
+
+export const deleteFaviLog = async (id) =>
+  ajax(`/faviLog/deleteFaviLog`,{id},"GET");
+
+export const updateFaviLog = async (params) =>
+  ajax(`/faviLog/updateFaviLog`,params,"POST");
\ No newline at end of file
diff --git a/src/views/Address/index.vue b/src/views/Address/index.vue
index 49e9994..d2b35c5 100644
--- a/src/views/Address/index.vue
+++ b/src/views/Address/index.vue
@@ -1,8 +1,8 @@
 <script setup>
 import _ from 'lodash';
-import { onMounted, onBeforeMount, ref } from 'vue'
+import { onMounted, onBeforeMount, ref , watch } from 'vue'
 import { toClipboard } from "@soerenmartius/vue3-clipboard";
-import { showToast, showSuccessToast, showConfirmDialog } from 'vant';
+import { showToast, showSuccessToast, showConfirmDialog,showFailToast } from 'vant';
 import { useRoute } from 'vue-router';
 
 import {
@@ -14,8 +14,9 @@ import {
   , deleteUserFavi
 } from '@/api'
 
-import { getAreaList } from '@/api/system';
+import { getFaviLogs, addFaviLog ,deleteFaviLog,updateFaviLog } from '@/api/faviLog'
 
+import { getAreaList } from '@/api/system';
 
 const route = useRoute();
 
@@ -28,10 +29,12 @@ const selectOpt2 = ref([{ text: '重要', value: '重要' }, { text: '普通', v
 
 const addressList = ref([]);
 
+const showFaviLog = ref(false);
+
 onMounted(async () => {
   if (route.query.act === 'add') {
     let res = await addUserFavi({ uf_user_id: route.query.cardid });
-    if(res.code === 445){
+    if (res.code === 445) {
       showToast('您為基本型用戶僅能最多收藏10人');
     }
   }
@@ -161,7 +164,7 @@ const onChangeCateConfirm = async (value) => {
 };
 
 const onChangeCateChange = (value) => {
-  console.log('Change Category');
+  // console.log('Change Category');
 };
 
 // END: 更改好友類別
@@ -276,7 +279,6 @@ const onSubmit = async () => {
     showSuccessToast('更新成功')
     // router.push('/member')
   } else {
-    console.log(res.code);
     showToast('更新失敗')
   }
 };
@@ -297,20 +299,20 @@ const areaName = ref('')
 //取得區域資料
 let areaRes = await getAreaList()
 if (areaRes.code === 200) {
-    tab3columns.value = areaRes.data
-    // tab3columns加上第一項為全部
-    tab3columns.value.unshift({
-      text: '全部',
-      value: 0
-    })
+  tab3columns.value = areaRes.data
+  // tab3columns加上第一項為全部
+  tab3columns.value.unshift({
+    text: '全部',
+    value: 0
+  })
 
-    //取得區域名稱
-    // if (areaRes.data.length > 0) {
-    //   const findRes = _.find(areaRes.data, { value: form.value.area })
-    //   if (findRes) {
-    //     areaName.value = findRes.text
-    //   }
-    // }
+  //取得區域名稱
+  // if (areaRes.data.length > 0) {
+  //   const findRes = _.find(areaRes.data, { value: form.value.area })
+  //   if (findRes) {
+  //     areaName.value = findRes.text
+  //   }
+  // }
 }
 
 const tab3OnConfirm = (value) => {
@@ -350,8 +352,87 @@ const handleSearch = async () => {
   }
 
 }
-  
 
+// START:好友往來紀錄
+const faviLogId = ref(0)  // 往來紀錄id
+const faviLogMsg = ref('')  // 輸入的往來紀錄訊息
+const faviLogList = ref([])  // 往來紀錄列表
+const faviLogEditId = ref(0) // 編輯往來紀錄id
+
+const handleFaviLog = (id) => {
+  showFaviLog.value = true
+  faviLogId.value = id
+}
+
+watch(faviLogId, async (val) => {
+  if (val > 0) {
+    // 取得往來紀錄
+    loadFaviLog()
+  }
+})
+
+const loadFaviLog = async () => {
+  let res = await getFaviLogs(faviLogId.value)
+  if(res.code === 200){
+    faviLogList.value = res.data
+  }
+}
+
+const handleAddFaviLog = async () => {
+  let res = await addFaviLog({ uf_id: faviLogId.value, note: faviLogMsg.value })
+  if(res.code === 200){
+    showToast('新增成功')
+    faviLogMsg.value = ''
+    loadFaviLog()
+  }else{
+    showFailToast('新增失敗')
+  }
+}
+
+const handleDeleteFaviLog = async (id) => {
+  let res = await deleteFaviLog(id)
+  if(res.code === 200){
+    showToast('刪除成功')
+    loadFaviLog()
+  }else{
+    showFailToast('刪除失敗')
+  }
+}
+
+const handleEditFaviLog = async (item) => {
+  let res = await updateFaviLog(item)
+  if(res.code === 200){
+    showToast('更新成功')
+    faviLogEditId.value = 0
+    // loadFaviLog()
+  }else{
+    showFailToast('更新失敗')
+  }
+}
+
+const handleCloseFaviLog = () => {
+  faviLogId.value = 0
+  faviLogMsg.value = ''
+  showFaviLog.value = false
+}
+
+const formatNote = (note) => {
+  // 匹配電郵地址
+  const emailRegex = /([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi;
+  // 匹配電話號碼, 格式為0983214434
+  const phoneRegex = /(0[2-9]\d{7,8}|09\d{8})/g;
+  // 匹配網址
+  const urlRegex = /(https?:\/\/[^\s]+)/g;
+
+  let formattedNote = note
+    .replace(emailRegex, '<a href="mailto:$1">$1</a>')
+    .replace(phoneRegex, '<a href="tel:$1">$1</a>')
+    .replace(urlRegex, '<a href="$1" target="_blank">$1</a>');
+
+  return formattedNote;
+};
+
+// END:好友往來紀錄
 </script>
 
 <template>
@@ -373,35 +454,29 @@ const handleSearch = async () => {
     <div class="content">
       <!-- START: 通訊錄類別 -->
       <van-cell-group inset>
-        <van-field v-model="fieldValue" is-link readonly label="類別" placeholder="通訊錄類別" @click="showCatePicker = true" />
+        <van-field v-model="fieldValue" is-link readonly label="類別" placeholder="通訊錄類別"
+          @click="showCatePicker = true" />
         <van-popup v-model:show="showCatePicker" round position="bottom">
           <van-picker :columns="columns" :columns-field-names="customFieldName" confirm-button-text="確認"
             cancel-button-text="取消" @cancel="showCatePicker = false" @confirm="onCateConfirm" @change="onCateChange" />
         </van-popup>
-      </van-cell-group>      
+      </van-cell-group>
       <van-cell-group inset>
         <van-row gutter="0" align="center">
           <van-col span="5">
-            <van-field v-model="areaName" is-link readonly name="picker" 
-              :border="false" 
-              placeholder="縣市"
+            <van-field v-model="areaName" is-link readonly name="picker" :border="false" placeholder="縣市"
               @click="tab3showPicker = true" />
             <van-popup v-model:show="tab3showPicker" position="bottom">
-              <van-picker confirm-button-text="確認" cancel-button-text="取消" :columns="tab3columns" @confirm="tab3OnConfirm"
-                @cancel="tab3showPicker = false" />
+              <van-picker confirm-button-text="確認" cancel-button-text="取消" :columns="tab3columns"
+                @confirm="tab3OnConfirm" @cancel="tab3showPicker = false" />
             </van-popup>
           </van-col>
           <van-col span="5">
-            <van-field v-model="sexName" 
-              is-link 
-              readonly 
-              name="picker"
-              :border="false"
-              placeholder="性別"
+            <van-field v-model="sexName" is-link readonly name="picker" :border="false" placeholder="性別"
               @click="tab4showPicker = true" />
             <van-popup v-model:show="tab4showPicker" position="bottom">
-              <van-picker confirm-button-text="確認" cancel-button-text="取消" :columns="tab4columns" @confirm="tab4OnConfirm"
-                @cancel="tab4showPicker = false" />
+              <van-picker confirm-button-text="確認" cancel-button-text="取消" :columns="tab4columns"
+                @confirm="tab4OnConfirm" @cancel="tab4showPicker = false" />
             </van-popup>
           </van-col>
           <van-col span="14">
@@ -419,6 +494,14 @@ const handleSearch = async () => {
 
       <van-cell-group inset>
         <van-list>
+          <div class="list-item" style="font-weight: 700;">
+            <div class="left">
+              電子名片
+            </div>
+            <div class="right">
+              分類/紀錄/刪除
+            </div>
+          </div>
           <div class="list-item" v-for="(item, index) in addressList" :data-cateid="item.user_cate_id" :key="index">
             <div class="left" @click="handleGoNfc(item)">
               <div class="avatar"><img :src="item.avatar"></div>
@@ -431,7 +514,7 @@ const handleSearch = async () => {
               <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" @click="doCopy(item.nfcurl)">
+              <van-button size="small" class="border-0" @click="handleFaviLog(item.uf_id)">
                 <h5><i class="fa-solid fa-share-nodes text-darkBlue"></i></h5>
               </van-button>
               <van-button size="small" class="border-0" @click="handleDeleteFavi(item.uf_id)">
@@ -439,13 +522,12 @@ const handleSearch = async () => {
               </van-button>
             </div>
           </div>
-
         </van-list>
-
       </van-cell-group>
     </div>
     <!-- START: 編輯通訊錄 -->
-    <van-dialog v-model:show="setShowPicker" width="400" showCancelButton confirm-button-text="確認修改" @confirm="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">
@@ -477,8 +559,8 @@ const handleSearch = async () => {
               </template>
             </van-field>
 
-            <van-field v-model="modalForm.sort[modalForm.page - 1].name" label="分類名稱" id="vcard-title" input-align="right"
-              placeholder="請輸入分類名稱" />
+            <van-field v-model="modalForm.sort[modalForm.page - 1].name" label="分類名稱" id="vcard-title"
+              input-align="right" placeholder="請輸入分類名稱" />
 
             <div class="listCnt">
               <div class="item" v-for="(btn, index) in modalForm.sort[modalForm.page - 1].children" :key="index">
@@ -486,7 +568,8 @@ const handleSearch = async () => {
                   <template #button>
                     <van-button size="small" class="bg-transparent border-0" icon="arrow-up" @click="moveBtn(0, index)"
                       v-if="modalForm.sort[modalForm.page - 1].children.length > 1"></van-button>
-                    <van-button size="small" class="bg-transparent border-0" icon="arrow-down" @click="moveBtn(1, index)"
+                    <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>
@@ -509,13 +592,56 @@ const handleSearch = async () => {
         cancel-button-text="取消" @cancel="showChangeCatePicker = false" @confirm="onChangeCateConfirm"
         @change="onChangeCateChange" />
     </van-popup>
-
+    <!-- START: 往來紀錄 -->
+    <van-popup v-model:show="showFaviLog" round closeable position="bottom" @close="handleCloseFaviLog" :style="{ height: '90%' }">
+      <div style="padding-top: 50px;border: 1px;height: 100%;" class="content">
+        <!-- 好友往來紀錄 -->
+          <van-cell-group inset>
+          <van-field v-model="faviLogMsg" center label="往來紀錄" placeholder="請輸入往來紀錄">
+            <template #button>
+              <van-button size="small" class="btn-darkBlue" @click="handleAddFaviLog">送出</van-button>
+            </template>
+          </van-field>
+          </van-cell-group>
+          <van-cell-group inset>
+        <van-steps direction="vertical">
+          <van-step v-for="item in faviLogList" :key="item.id">
+            <div class="favi-log">
+              <div class="title">
+                <div class="left">
+                  <h5>{{ item.create_time }}</h5>
+                </div>
+                <div class="right">
+                  <van-button  size="small" plain type="primary" @click="faviLogEditId = item.id">修改</van-button>
+                  &nbsp;
+                  <van-button  size="small" type="danger" @click="handleDeleteFaviLog(item.id)">刪除</van-button>
+                </div>
+              </div>
+              <div class="body">
+                <template v-if="faviLogEditId === item.id">
+                  <van-field v-model="item.note" center>
+                    <template #button>
+                      <van-button size="small" type="primary" @click="handleEditFaviLog(item)">送出</van-button>
+                    </template>
+                  </van-field>
+                </template>
+                <template v-else>
+                  <p v-html="formatNote(item.note)"></p>
+                </template>
+              </div>
+            </div>
+          </van-step>
+        </van-steps>
+        </van-cell-group>
+      </div>
+    </van-popup>
+    <!-- END: 往來紀錄 -->
   </div>
 </template>
 
 <style lang="less" scoped>
 .address {
-  .content {
+  >.content {
     min-height: calc(100vh - 54px);
   }
 
@@ -600,8 +726,34 @@ const handleSearch = async () => {
   }
 }
 
+.favi-log {
+  .title {
+    display: flex;
+
+    .left {
+      flex: 1 0 0%;
+    }
+
+    .right {
+      width: 100px;
+    }
+  }
+  .body {
+    padding: 10px;
+
+    :deep(a) {
+      color: #1989fa;
+      text-decoration: none;
+    }
+  }
+}
+
 .address-block {
   max-height: 80vh;
   overflow-y: auto;
 }
+
+:deep(.van-popup__close-icon) {
+  color: #fff !important;
+}
 </style>