wxapp-visitor-invite/src/pages/index/index.vue

<script lang="ts" setup>
import Contact from "../../components/contact"
import { Router } from 'tarojs-router-next'
import {reactive, ref} from 'vue';
import './index.scss'
import { useContactsStore, ContactData } from '../../stores/contacts'
import { registerRouterBackListener } from 'tarojs-router-next'
import {BjxHelper} from "../../utils";




import {gql} from "graphql-tag";
import {PinyinHelper, GQLRequest, weappAuth} from "../../utils";
import {useAuthStore} from "../../stores/auth";

// defineExpose({
//   loadContactsFromServer,
// });

const state = reactive<{
  isAuthError: boolean,
  isContactDataLoadError: boolean,
  isContactDataLoading: boolean,
  searchQuery: string,
  normalContacts: ContactData[],
  flexContacts: ContactData[], // Generic type for now
}>({
  isAuthError: false,
  isContactDataLoadError: false,
  isContactDataLoading: true,
  searchQuery: "",
  normalContacts: [],
  flexContacts: []
})
const contacts = useContactsStore()

init()

function init() {
  state.isAuthError = false
  state.isContactDataLoadError = false
  state.isContactDataLoading = true
  weappAuth()
      .then(r => {
        contacts.loadContactsFromServer().then(
            contactList => {
              console.log("contactList", contactList)
              generateContactGroupList(contactList)
              state.isContactDataLoading = false
            })
            .catch(e => {
              state.isAuthError = false
              state.isContactDataLoadError = true
              state.isContactDataLoading = false
            })
      })
      .catch(e=> {
        console.log("error", e)
        state.isAuthError = true
        state.isContactDataLoadError = false
        state.isContactDataLoading = false
      })


  registerRouterBackListener((to, from) => {
    if ((from.url === "/pages/contact-new/index" && to.url === "/pages/index/index")
        || (from.url === "/pages/contact-edit/index" && to.url === "/pages/index/index")
    ) {
      generateContactGroupList(contacts.allContacts)
    }
  })
}

const onAuthErrorRefresh = () => {
  init()
}
const onContactDataLoadErrorRefresh = () => {
  state.isContactDataLoadError = false
  state.isContactDataLoading = true
  contacts.loadContactsFromServer().then(
      contactList => {
        console.log("contactList", contactList)
        generateContactGroupList(contactList)
        state.isContactDataLoading = false
      })
      .catch(e => {
        state.isContactDataLoadError = true
        state.isContactDataLoading = false
      })
}


const generateContactGroupList = (contactList: ContactData[]) => {
  state.normalContacts = []
  state.flexContacts = []
  for (const item of contactList) {
    if (item.flexVisit === true) state.flexContacts.push(item)
    else state.normalContacts.push(item)
  }
}
const goToContactNewPage = () => {
  Router.toContactNew()
}
const goToContactEditPage = (item) => {
  Router.toContactEdit({ data: item })
}

</script>

<template>
  <view class="h-100 d-flex flex-column">
    <BackgroundBasic/>
    <NutNavbar title=""></NutNavbar>
    <view class="pl-3 pt-3 pr-3 h3 d-flex">
      <view class="flex-grow-1">
        我的邀约
      </view>
    </view>
    <View class="scroll 100vh w-100">
      <View class="mt-3 p-3" v-if="state.isContactDataLoading === false && state.isAuthError === false && state.isContactDataLoadError === false">
        <View class="border shadow bg-white p-3 d-flex flex-column" hover-class="card-hover-gray" @tap="goToContactNewPage()" >
          <View class="d-flex justify-content-center">
            <Image :src="require('./invite.jpeg')" class="p-3" mode='heightFix' style="height: 15vh"/>
          </View>
          <View class="d-flex justify-content-center">
            <View class="fas fa-plus-circle text-black-50" style="font-size: 120%"> 新邀约</View>
          </View>
        </View>
      </View>
      <View v-else></View>

      <View v-if="!state.isContactDataLoading">
        <View v-if="state.isAuthError">
          <nut-empty description="连接出现问题，请稍后重试">
            <div style="margin-top: 10px">
              <nut-button type="default" @tap="onAuthErrorRefresh">刷新</nut-button>
            </div>
          </nut-empty>
        </View>
        <View v-else-if="state.isContactDataLoadError">
          <nut-empty description="连接出现问题，请稍后重试">
            <div style="margin-top: 10px">
              <nut-button type="default" @tap="onContactDataLoadErrorRefresh">刷新</nut-button>
            </div>
          </nut-empty>
        </View>
        <View v-else>
          <View v-if="state.normalContacts.length === 0 && state.flexContacts.length === 0">
            <View class="d-flex flex-column p-3">
              <View class="d-flex justify-content-center p-3">
                <View class="h4 text-muted">还没有邀约</View>
              </View>
              <View class="d-flex justify-content-center">
                <View class="text-muted" >添加您邀约的访客，让数字人认识他</View>
              </View>
            </View>
          </View>

          <View v-else>
            <View class="h4 p-3" v-if="state.normalContacts.length !== 0">来访联系人</View>
            <View v-else></View>
            <View class="w-100 d-flex flex-wrap">
              <View style="width: 25vw" v-for="item in state.normalContacts">
                <View class="m-2 p-3 shadow-sm border" hover-class="card-hover-gray" @tap="goToContactEditPage(item)">
                  <View class="d-flex justify-content-center">
                    <NutBadge :value="item.isBlock?'阻止':''">
                      <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>
                    </NutBadge>
                  </View>
                  <View class="d-flex justify-content-center small b pt-2 text-nowrap overflow-hidden">
                    {{item.name}}
                  </View>

                </View>
              </View>

            </View>

            <View class="h4 p-3" v-if="state.normalContacts.length !== 0">可随时来访联系人</View>
            <View v-else></View>
            <View class="w-100 d-flex flex-wrap">
              <View style="width: 25vw" v-for="item in state.flexContacts">
                <View class="m-2 p-3 shadow-sm border" hover-class="card-hover-gray" @tap="goToContactEditPage(item)">
                  <View class="d-flex justify-content-center">
                    <NutBadge :value="item.isBlock?'阻止':''">
                      <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>
                    </NutBadge>
                  </View>
                  <View class="d-flex justify-content-center small b pt-2 text-nowrap overflow-hidden">
                    {{item.name}}
                  </View>

                </View>
              </View>

            </View>
          </View>
        </View>
      </View>

      <View v-else class="d-flex flex-column pt-5">
        <View class="row w-100 pt-4">
          <View style="width: 25vw" v-for="_ in 20" class="pb-5 skeleton-avatar d-flex justify-content-center">
            <NutSkeleton class="p-3" height="15px" animated avatar avatar-size="50px" row="0"/>
          </View>
        </View>
      </View>
    </View>

  </view>
</template>