增加通行记录VIP 显示

components.d.ts

@@ -13,5 +13,6 @@ declare module 'vue' {
     NutCollapse: typeof import('@nutui/nutui-taro')['Collapse']
     NutCollapseItem: typeof import('@nutui/nutui-taro')['CollapseItem']
     NutDivider: typeof import('@nutui/nutui-taro')['Divider']
+    NutNavbar: typeof import('@nutui/nutui-taro')['Navbar']
   }
 }

src/components/notification/index.scss

@@ -19,3 +19,7 @@
   right: 50rpx;
   color: rgba(0, 0, 0, 0.5);
 }
+
+.nut-collapse-item__border .nut-collapse-item__title::after {
+  border-bottom-color: #FFF;
+}

src/components/notification/index.vue

@@ -2,13 +2,17 @@
 import './index.scss'
 import bjxJson from '../../utils/baijiaxing.json'
 import StringUtil from "../../utils/StringUtil";
+import { ArrowDown } from '@nutui/icons-vue-taro';
+
 
 /**
  * props: todayPassTime: Json Array
  * example: [["YYYY-MM-DD hh:mm:ss"], ["YYYY-MM-DD hh:mm:ss"]]
  */
-const props = defineProps(['name', 'company', 'pass-date', 'pass-time', 'today-pass-time'])
+const props = defineProps(['name', 'company', 'is-vip', 'pass-date', 'pass-time', 'today-pass-time'])
 let lastName = props.name
+let isVIP = JSON.parse(props.isVip)
+let todayPassJsonObject = JSON.parse(props.todayPassTime)
 
 for (const item of bjxJson) {
   const regex = new RegExp('^'+item.name);
@@ -19,11 +23,7 @@ for (const item of bjxJson) {
     lastName = props.name.substring(0, 1)
   }
 }
-let todayPassJsonObject = JSON.parse(props.todayPassTime)
 
-const onClick = (event) => {
-  console.log(event.currentTarget)
-}
 </script>
 
 <template>
@@ -38,12 +38,16 @@ const onClick = (event) => {
               <view v-else><fa icon="fa fa-user fa-lg"></fa></view>
             </nut-avatar>
           </view>
-          <view>
-            <view class="h4 pt-2">
-              <view v-if="props.name">{{props.name}}</view>
-              <view v-else class="text-black-50">
+          <view class="">
+            <view class="d-flex flex-row pt-2">
+              <view v-if="props.name" class="h4">{{props.name}}</view>
+              <view v-else class="text-black-50 h4">
                 <fa icon="text-info fa fa-exclamation-circle"></fa> 无姓名
               </view>
+              <view class="pl-2">
+                <view v-if="isVIP" class="badge badge-danger">VIP</view>
+                <view v-else></view>
+              </view>
             </view>
             <view>
               <view v-if="props.company">{{props.company}}</view>
@@ -57,13 +61,16 @@ const onClick = (event) => {
 
       <view class="card-footer bg-white">
 
-        <view v-if="todayPassJsonObject.length === 0" class="d-flex text-black-50">
-          <view class="flex-grow-1">来访时间：{{props.passDate}}</view>
-          <view>{{props.passTime}}</view>
+        <view v-if="todayPassJsonObject.length === 0">
+          <nut-collapse>
+            <nut-collapse-item name="name1" :title="'来访时间：'+ props.passDate" :value="props.passTime" border="false">
+              <template #icon> <ArrowDown color="white"/> </template>
+            </nut-collapse-item>
+          </nut-collapse>
         </view>
         <view v-else>
           <nut-collapse>
-            <nut-collapse-item name="name1" :title="'来访时间：'+ props.passDate" :value="props.passTime">
+            <nut-collapse-item name="name1" :title="'来访时间：'+ props.passDate" :value="props.passTime" border="false">
               <view v-for="(passTime, index) in todayPassJsonObject" :key="passTime" class="d-flex">
                 <view class="flex-grow-1">
                   <view v-if="index === 0">当日还有 {{todayPassJsonObject.length}} 次记录</view>
@@ -73,6 +80,7 @@ const onClick = (event) => {
               </view>
             </nut-collapse-item>
           </nut-collapse>
+
         </view>
 
       </view>

src/pages/index/index.vue

@@ -45,10 +45,10 @@
     <view>最近30天的来访</view>
   </view>
 <!--  <Counter/>-->
-  <Notification name="" company="小明科技2" pass-date="2023-12-25" pass-time="22:22:22" today-pass-time='["22:22:21","22:22:20"]'/>
-  <Notification name="王远" company="joydata科技"  pass-date="2023-12-25" pass-time="22:22:22" today-pass-time='[]'/>
-  <Notification name="华雨" company="joydata科技"  pass-date="2023-12-25" pass-time="22:22:22" today-pass-time='["22:22:21"]'/>
-  <Notification name="邸为荣" company=""  pass-date="2023-12-25" pass-time="22:22:22" today-pass-time='["22:22:21","22:22:20"]'/>
+  <Notification name="" company="小明科技2" is-vip="true" pass-date="2023-12-25" pass-time="22:22:22" today-pass-time='["22:22:21","22:22:20"]'/>
+  <Notification name="王远" company="joydata科技" is-vip="true" pass-date="2023-12-25" pass-time="22:22:22" today-pass-time='[]'/>
+  <Notification name="华雨" company="joydata科技" is-vip="false" pass-date="2023-12-25" pass-time="22:22:22" today-pass-time='["22:22:21"]'/>
+  <Notification name="邸为荣" company="" is-vip="false"  pass-date="2023-12-25" pass-time="22:22:22" today-pass-time='["22:22:21","22:22:20"]'/>
 
   <view class="container pt-5 pb-3">
     <view class="row">