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

<script setup lang="ts">
import Taro from "@tarojs/taro";
import { Router } from 'tarojs-router-next'
import {BjxHelper, ScreenHelper} from "../../utils";
import "./index.scss";
import {ref} from "vue";
import {ContactData} from "../../stores/contacts";

const props = defineProps(['items'])
// const elevatorHeight = ref(ScreenHelper.getScreenHeight() - ScreenHelper.getStatusBarHeight() - ScreenHelper.getWindowBarHeight())

const clickItem = (key: string, item: ContactData)  => {
  console.log(key, item.name);
  console.log(item);

  Router.toContactEdit({ data: item })
}

// ScreenHelper.getDomObjectHeight(".scroll").then( calcElevatorHeight => {
//   console.log("calcElevatorHeight", calcElevatorHeight)
//   elevatorHeight.value = calcElevatorHeight
// })

</script>

<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="pr-4 pt-2 h6">
          <NutBadge :value="item.isVIP?'VIP':''">
            <NutAvatar size="normal" color="white" :bg-color="BjxHelper.mbString2RgbHex(item.name)" class="overflow-hidden">
              <img  v-if="item.avatar" :src="item.avatar" />
              <view v-else-if="BjxHelper.getBJXFirstChar(item.name)">{{BjxHelper.getBJXFirstChar(item.name)}}</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 pt-2">
            <view v-if="item.name" class="name">{{item.name}}</view>
            <view v-else class="text-black-50 name">
              <Text className='text-info fas fa-exclamation-circle'/> 无姓名
            </view>
<!--            <view class="pl-2 vip pt-1">-->
<!--              <view v-if="item.isVIP" class="badge badge-pill badge-danger">VIP</view>-->
<!--              <view v-else></view>-->
<!--            </view>-->
          </view>
          <view class="company">
            <view v-if="item.company">{{item.company}}</view>
            <view v-else class="text-black-50">
              <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>

  </template>
  </nut-elevator>
</template>