通行记录

.eslintrc.js

@@ -1,5 +1,8 @@
 // ESLint 检查 .vue 文件需要单独配置编辑器：
 // https://eslint.vuejs.org/user-guide/#editor-integrations
 module.exports = {
-  'extends': ['taro/vue3']
+  'extends': ['taro/vue3'],
+  rules: {
+    'vue/multi-word-component-names': 0,
+  },
 }

components.d.ts

@@ -8,8 +8,10 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Counter: typeof import('./src/components/Counter.vue')['default']
-    NutButton: typeof import('@nutui/nutui-taro')['Button']
-    NutCell: typeof import('@nutui/nutui-taro')['Cell']
-    NutPopup: typeof import('@nutui/nutui-taro')['Popup']
+    Notification: typeof import('./src/components/notification/index.vue')['default']
+    NutAvatar: typeof import('@nutui/nutui-taro')['Avatar']
+    NutCollapse: typeof import('@nutui/nutui-taro')['Collapse']
+    NutCollapseItem: typeof import('@nutui/nutui-taro')['CollapseItem']
+    NutDivider: typeof import('@nutui/nutui-taro')['Divider']
   }
 }

src/components/notification/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

src/components/notification/index.scss

@@ -0,0 +1,21 @@
+.card-body {
+  padding-top: 20rpx;
+  padding-bottom: 10rpx;
+}
+.nut-collapse-item .nut-collapse-item__title {
+  padding: 0;
+  color: rgba(0, 0, 0, 0.5)
+}
+
+.nut-collapse-item .nut-collapse__item-wrapper .nut-collapse__item-wrapper__content, .nut-collapse-item .nut-collapse__item-wrapper .nut-collapse__item-extraWrapper__extraRender, .nut-collapse-item .nut-collapse__item-extraWrapper .nut-collapse__item-wrapper__content, .nut-collapse-item .nut-collapse__item-extraWrapper .nut-collapse__item-extraWrapper__extraRender {
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-left: 0;
+  color: rgba(0, 0, 0, 0.5)
+}
+
+.nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-sub
+{
+  right: 50rpx;
+  color: rgba(0, 0, 0, 0.5);
+}

src/components/notification/index.vue

@@ -0,0 +1,83 @@
+<script setup>
+import './index.scss'
+import bjxJson from '../../utils/baijiaxing.json'
+import StringUtil from "../../utils/StringUtil";
+
+/**
+ * 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'])
+let lastName = props.name
+
+for (const item of bjxJson) {
+  const regex = new RegExp('^'+item.name);
+  if (regex.test(props.name)) {
+      lastName = item.name
+  }
+  else {
+    lastName = props.name.substring(0, 1)
+  }
+}
+let todayPassJsonObject = JSON.parse(props.todayPassTime)
+
+const onClick = (event) => {
+  console.log(event.currentTarget)
+}
+</script>
+
+<template>
+  <view class="pt-2"></view>
+  <view class="container">
+    <view class="card mr-3 bg-light">
+      <view class="card-body">
+        <view class="d-flex flex-row">
+          <view class="pr-4 h4">
+            <nut-avatar size="large" color="white" :bg-color="StringUtil.mbString2RgbHex(lastName)">
+              <view v-if="lastName">{{lastName}}</view>
+              <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">
+                <fa icon="text-info fa fa-exclamation-circle"></fa> 无姓名
+              </view>
+            </view>
+            <view>
+              <view v-if="props.company">{{props.company}}</view>
+              <view v-else class="text-black-50">
+                <fa icon="text-info fa fa-exclamation-circle"></fa> 无公司信息
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <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>
+        <view v-else>
+          <nut-collapse>
+            <nut-collapse-item name="name1" :title="'来访时间：'+ props.passDate" :value="props.passTime">
+              <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>
+                  <view v-else></view>
+                </view>
+                <view> {{ passTime }} </view>
+              </view>
+            </nut-collapse-item>
+          </nut-collapse>
+        </view>
+
+      </view>
+
+    </view>
+  </view>
+
+</template>