增加通讯录的demo

components.d.ts

@@ -7,12 +7,14 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    Contact: typeof import('./src/components/contact/index.vue')['default']
     Counter: typeof import('./src/components/Counter.vue')['default']
     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']
-    NutNavbar: typeof import('@nutui/nutui-taro')['Navbar']
+    NutElevator: typeof import('@nutui/nutui-taro')['Elevator']
+    NutSearchbar: typeof import('@nutui/nutui-taro')['Searchbar']
   }
 }

package-lock.json

@@ -26,6 +26,7 @@
         "@tarojs/runtime": "3.6.20",
         "@tarojs/shared": "3.6.20",
         "@tarojs/taro": "3.6.20",
+        "chinese2pinyin": "^1.0.1",
         "graphql": "^16.8.1",
         "graphql-tag": "^2.12.6",
         "moment": "^2.29.4",
@@ -6820,6 +6821,11 @@
         "node": "*"
       }
     },
+    "node_modules/chinese2pinyin": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/chinese2pinyin/-/chinese2pinyin-1.0.1.tgz",
+      "integrity": "sha512-qBbOtxO09/yjYuF4CnzpNutklSGNJxkb0U7keMuXpXQuk4l8KmNOAUL0aPFfZq6uoc0ZpOe0xoOktgfA2pUm3Q=="
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",

package.json

@@ -53,6 +53,7 @@
     "@tarojs/runtime": "3.6.20",
     "@tarojs/shared": "3.6.20",
     "@tarojs/taro": "3.6.20",
+    "chinese2pinyin": "^1.0.1",
     "graphql": "^16.8.1",
     "graphql-tag": "^2.12.6",
     "moment": "^2.29.4",

src/components/contact/index.json

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

src/components/contact/index.scss

@@ -0,0 +1,18 @@
+.nut-elevator__list__item__name {
+  height: auto;
+}
+.company {
+  height: "20rpx";
+  line-height: normal;
+}
+.name {
+  font-size:1.5em;
+  line-height: normal;
+}
+.vip {
+  line-height: normal;
+  vertical-align: baseline;
+}
+.vip > .badge {
+  line-height: normal;
+}

src/components/contact/index.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import "./index.scss";
+import Taro from "@tarojs/taro";
+import StringUtil from "../../utils/StringUtil";
+
+const props = defineProps(['items'])
+
+</script>
+
+<template>
+  <nut-elevator :index-list="props.items" is-sticky :height="(Taro.getSystemInfoSync().windowHeight)-50-32-40">
+  <template #default="{ item }">
+      <view class="d-flex flex-row pb-2">
+        <view class="pr-4 pt-2">
+          <nut-avatar size="normal" color="white" :bg-color="StringUtil.mbString2RgbHex(item.name)">
+            <view v-if="StringUtil.getBJXFirstChar(item.name)">{{StringUtil.getBJXFirstChar(item.name)}}</view>
+            <view v-else><fa icon="fa fa-user fa-lg"></fa></view>
+          </nut-avatar>
+        </view>
+        <view>
+          <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">
+              <fa icon="text-info fa fa-exclamation-circle name"></fa> 无姓名
+            </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">
+              <fa icon="text-info fa fa-exclamation-circle"></fa> 无公司信息
+            </view>
+          </view>
+        </view>
+      </view>
+
+
+  </template>
+  </nut-elevator>
+</template>

src/components/notification/index.vue

@@ -1,6 +1,5 @@
 <script setup>
 import './index.scss'
-import bjxJson from '../../utils/baijiaxing.json'
 import StringUtil from "../../utils/StringUtil";
 import { ArrowDown } from '@nutui/icons-vue-taro';
 
@@ -9,21 +8,11 @@ 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', 'is-vip', 'pass-date', 'pass-time', 'today-pass-time'])
-let lastName = props.name
+const props = defineProps(['avatar', 'name', 'company', 'is-vip', 'pass-date', 'pass-time', 'today-pass-time'])
+let lastName = StringUtil.getBJXFirstChar(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);
-  if (regex.test(props.name)) {
-      lastName = item.name
-  }
-  else {
-    lastName = props.name.substring(0, 1)
-  }
-}
-
 </script>
 
 <template>
@@ -38,14 +27,14 @@ for (const item of bjxJson) {
               <view v-else><fa icon="fa fa-user fa-lg"></fa></view>
             </nut-avatar>
           </view>
-          <view class="">
+          <view>
             <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-if="isVIP" class="badge badge-pill badge-danger">VIP</view>
                 <view v-else></view>
               </view>
             </view>

src/pages/contact/index.config.ts

@@ -1,4 +1,6 @@
 export default definePageConfig({
   navigationBarTitleText: '',
-  "usingComponents": {}
+  usingComponents: {
+    "fa": "../../components/fa"
+  }
 })

src/pages/contact/index.vue

@@ -1,8 +1,59 @@
+<script setup>
+import Contact from "../../components/contact"
+import { ref } from 'vue';
+import { Search2 } from '@nutui/icons-vue-taro';
+const val = ref('');
+
+
+const data = ref([
+  {
+    title: 'A',
+    list: [
+      { id: 1, name: '', isVIP: true, company: '阿姨公司', avatar: null },
+    ]
+  },
+  {
+    title: 'B',
+    list: [
+      { id: 2, name: '包子', isVIP: false, company: '公司', avatar: null },
+      { id: 3, name: '白老师', isVIP: true, company: '', avatar: null },
+      { id: 4, name: '八哥', isVIP: false, company: '', avatar: null },
+      { id: 5, name: '保生', isVIP: false, company: '', avatar: null },
+      { id: 6, name: '巴金', isVIP: false, company: null, avatar: null },
+    ]
+  },
+  {
+    title: 'G',
+    list: [
+      { id: 7, name: '高工', isVIP: false, company: null, avatar: null },
+      { id: 8, name: '国总', isVIP: false, company: null, avatar: null },
+      { id: 9, name: '宫崎骏', isVIP: false, company: null, avatar: null },
+    ]
+  },
+  {
+    title: 'H',
+    list: [
+      { id: 10, name: '何同学', isVIP: false, company: null, avatar: null },
+      { id: 11, name: '韩红', isVIP: false, company: null, avatar: null },
+      { id: 12, name: '洪秀权', isVIP: false, company: null, avatar: null },
+    ]
+  }
+]);
+
+</script>
+
 <template>
   <view class="index">
-    <text>我是通讯录！</text>
+    <view class="pl-3 pt-3 pr-3 h2 d-flex">
+      <view class="flex-grow-1">
+        通讯录
+      </view>
+    </view>
+    <nut-searchbar v-model="val">
+      <template #rightin>
+        <Search2 />
+      </template>
+    </nut-searchbar>
+    <Contact :items="data" style="height: 100%"/>
   </view>
 </template>
-
-<script setup>
-</script>

src/pages/index/index.config.ts

@@ -1,6 +1,6 @@
 export default {
   navigationBarTitleText: '',
-  "usingComponents": {
-    "fa": "../../components/fa/index"
+  usingComponents: {
+    "fa": "../../components/fa"
   }
 }

src/pages/invite/index.config.ts

@@ -1,4 +1,6 @@
 export default definePageConfig({
   navigationBarTitleText: '',
-  "usingComponents": {}
+  usingComponents: {
+    "fa": "../../components/fa"
+  }
 })

src/pages/settings/index.config.ts

@@ -1,4 +1,6 @@
 export default definePageConfig({
   navigationBarTitleText: '',
-  "usingComponents": {}
+  usingComponents: {
+    "fa": "../../components/fa"
+  }
 })

src/utils/StringUtil.ts

@@ -1,4 +1,10 @@
+import bjxJson from './baijiaxing.json'
+
 export default class StringUtil {
+    /**
+     * 文字转RGB颜色
+     * @param str
+     */
     static mbString2RgbHex = (str) => {
         if (str == '') {
             return "#CCC"
@@ -17,6 +23,23 @@ export default class StringUtil {
         }
         str = ar.join('')
 
-        return "#"+ str.substring(0, 7)
+        return "#"+ str.substring(0, 6)
+    }
+
+    /**
+     * 获取百家姓的第一个字
+     * @param name
+     */
+    static getBJXFirstChar(name) {
+        if (name === null || name === "") {
+            return ""
+        }
+        for (const item of bjxJson) {
+            const regex = new RegExp('^'+item.name);
+            if (regex.test(name)) {
+                return item.name
+            }
+        }
+        return name.substring(0, 1)
     }
 }