wxapp-visitor-invite/src/components/notification/index.vue

<script setup>
import './index.scss'
import { BjxHelper } from "../../utils";

/**
 * props: todayPassTime: Json Array
 * example: [["YYYY-MM-DD hh:mm:ss"], ["YYYY-MM-DD hh:mm:ss"]]
 */
const props = defineProps(['item'])
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)
// let isVIP = props.isVip
// let todayPassJsonObject = JSON.parse(props.todayPassTime)

</script>

<template>
  <view class="container">
    <view class="pt-2"></view>
    <view class="card mr-3 bg-light">
      <view class="card-body">
        <view class="d-flex flex-row">
          <view class="pr-3 h6">
            <NutBadge :value="item.isVIP?'VIP':''">
              <NutAvatar size="normal" color="white" :bg-color="BjxHelper.mbString2RgbHex(item.userName)" class="overflow-hidden">
                <img  v-if="item.faceUrl" :src="item.faceUrl" />
                <view v-else-if="BjxHelper.getBJXFirstChar(item.userName)">{{BjxHelper.getBJXFirstChar(item.userName)}}</view>
                <view v-else>
                  <Text className='fas fa-user fa-lg'/>
                </view>
              </NutAvatar>
            </NutBadge>

          </view>
          <view class="flex-grow-1">
            <view class="d-flex flex-row">
              <view v-if="item.userName" class="name">{{item.userName}}</view>
              <view v-else>
                <view class="text-black-50 name">
                  <Text className='text-info fas fa-exclamation-circle'/> 无姓名
                </view>
              </view>
            </view>
            <view class="company text-black-50">
              <view v-if="item.company">{{item.company}}</view>
              <view v-else>
                <Text className='text-info fas fa-exclamation-circle'/> 无公司信息
              </view>
            </view>
          </view>
          <view class="pr-4 d-flex justify-content-end">
            <h5 class="pt-3" v-if="item.isBlock" style="line-height: unset !important;">
              <view class="badge badge-pill badge-light text-danger">
                <Text className="fas fa-ban text-danger"></Text>
                被阻止人员
              </view>
            </h5>
            <view v-else></view>
          </view>
        </view>
      </view>

      <view class="card-footer bg-white">
        <view v-if="otherItems.length === 0">
          <nut-collapse>
            <nut-collapse-item name="name1" :title="'来访时间：'+ item.date" :value="item.time" :border=false>
              <template #icon> </template>
            </nut-collapse-item>
          </nut-collapse>
        </view>
        <view v-else>
          <nut-collapse>
            <nut-collapse-item name="name1" :title="'来访时间：'+ item.date" :value="item.time" :border=false>
              <view v-for="(passTime, index) in otherItems" :key="passTime.id">
                <view class="d-flex">
                  <view class="flex-grow-1">
                    <view v-if="index === 0">当日还有 {{otherItems.length}} 次记录</view>
                    <view v-else></view>
                  </view>
                  <view> {{ passTime.time }} </view>
                </view>
              </view>
            </nut-collapse-item>
          </nut-collapse>
        </view>

      </view>

    </view>
  </view>

</template>