更新页面

src/app.scss

@@ -7,6 +7,12 @@
 .btn-hover-primary {
   color: #0056b3 !important;
 }
+.card-hover-gray {
+  background-color: #EEE;
+}
+.card-hover-white {
+  background-color: #FFF;
+}
 
 .btn-secondary:hover {
   background-color: #6c757d;

src/components/contact/index.scss

@@ -29,6 +29,3 @@
 .nut-elevator__list__item__name {
   padding: 0;
 }
-.item-hover {
-  background-color: #EEE;
-}

src/components/contact/index.vue

@@ -26,7 +26,7 @@ const clickItem = (key: string, item: ContactData)  => {
 <template>
   <nut-elevator :index-list="props.items" is-sticky style="height: 100%" :height="100" @click-item="clickItem">
   <template #default="{ item }">
-      <view class="d-flex flex-row pl-3 pr-3 pb-2 w-100" @tap="onItemTap(this)" hover-class="item-hover">
+      <view class="d-flex flex-row pl-3 pr-3 pb-2 w-100" hover-class="card-hover-gray">
         <view class="pr-4 pt-2 h6">
           <NutBadge :value="item.isVIP?'VIP':''">
             <NutAvatar size="normal" color="white" :bg-color="BjxHelper.mbString2RgbHex(item.name)" class="overflow-hidden">

src/components/notification/index.vue

@@ -1,6 +1,8 @@
 <script setup>
 import './index.scss'
 import { BjxHelper } from "../../utils";
+import {useContactsStore} from "../../stores/contacts";
+import {Router} from "tarojs-router-next";
 
 /**
  * props: todayPassTime: Json Array
@@ -11,6 +13,13 @@ const item = props.item.passRecords[0]
 const otherItems = props.item.passRecords.slice(1)
 // console.log(item.userName, otherItems.length , otherItems)
 let lastName = BjxHelper.getBJXFirstChar(item.userName)
+const contacts = useContactsStore()
+
+const goContactInfoPage = () => {
+  console.log(item)
+  const contactData = contacts.getContactById(item.userId)
+  Router.toContactEdit({ data: contactData })
+}
 
 </script>
 
@@ -18,7 +27,7 @@ let lastName = BjxHelper.getBJXFirstChar(item.userName)
   <view class="container">
     <view class="pt-2"></view>
     <view class="card mr-3 bg-light">
-      <view class="card-body">
+      <view class="card-body" hover-class="card-hover-white" @tap="goContactInfoPage">
         <view class="d-flex flex-row">
           <view class="pr-3 h6">
             <NutBadge :value="item.isVIP?'VIP':''">

src/pages/contact-edit/index.vue

@@ -132,17 +132,21 @@ const onDeleteConfirm = (item) => {
     <view class="scroll">
       <ContactForm :data="contactData"/>
 
-      <nut-cell title="来访记录" @tap="onClickPassRecords">
-        <template #desc>
-          <Text className="fas fa-chevron-right"/>
-        </template>
-      </nut-cell>
+      <view hover-class="card-hover-gray">
+        <nut-cell title="来访记录" @tap="onClickPassRecords">
+          <template #desc>
+            <Text className="fas fa-chevron-right"/>
+          </template>
+        </nut-cell>
+      </view>
 
+      <view hover-class="card-hover-gray">
       <nut-cell title="编辑记录" sub-title="本联系人在公司中的所有信息修改记录" @tap="onClickEditRecords">
         <template #desc>
           <Text className="fas fa-chevron-right"/>
         </template>
       </nut-cell>
+        </view>
 
       <view class="p-3">
         <nut-button v-if="contactData.isBlock" block color="red" plain @tap="onBlockConfirm">取消阻止此联系人</nut-button>

src/pages/index/index.vue

@@ -5,6 +5,7 @@ import { View } from '@tarojs/components'
 import './index.scss'
 import {weappAuth} from "../../utils";
 import {GroupedPassRecords, usePassRecordsStore} from "../../stores/pass-records";
+import {useContactsStore} from "../../stores/contacts";
 
 const state = reactive<{
   isPageDataLoading: boolean,
@@ -16,6 +17,7 @@ const state = reactive<{
   groupedPassRecords: [],
 })
 const passRecords = usePassRecordsStore()
+const contacts = useContactsStore()
 
 
 init()
@@ -26,10 +28,17 @@ function init() {
   weappAuth().then(r => {
     console.log(r)
     passRecords.loadPassRecordsFromServer().then( passRecords => {
-      state.isPageDataLoading = false
       state.groupedPassRecords = passRecords
       console.log("aaa",state.groupedPassRecords )
       // console.log(state.groupedPassRecords)
+      contacts.loadContactsFromServer().then( contacts => {
+        state.isPageDataLoading = false
+      })
+      .catch(contactError => {
+        console.log("error", contactError)
+        state.isAuthError = true
+        state.isPageDataLoading = false
+      })
     })
     .catch(error => {
       console.log("error", error)

src/stores/contacts.ts

@@ -76,6 +76,15 @@ export const useContactsStore = defineStore('contacts', () => {
     })
   }
 
+  function getContactById(id: number) {
+    for(const contact of allContacts.value) {
+      console.log(contact)
+      if (contact.id === id) {
+        return contact
+      }
+    }
+    return undefined
+  }
   function searchContacts(searchQuery: string) {
     const searchedContacts: ContactData[] = []
     for(const item of allContacts.value) {
@@ -86,7 +95,7 @@ export const useContactsStore = defineStore('contacts', () => {
     return searchedContacts
   }
 
-  return { allContacts , isContactsLoaded, loadContactsFromServer, searchContacts}
+  return { allContacts , isContactsLoaded, loadContactsFromServer, searchContacts, getContactById}
 })
 
 // You can even use a function (similar to a component setup()) to define a Store for more advanced use cases: