增加了contact 表单

components.d.ts

@@ -8,13 +8,21 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Contact: typeof import('./src/components/contact/index.vue')['default']
+    ContactForm: typeof import('./src/components/contact-form/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']
+    NutButton: typeof import('@nutui/nutui-taro')['Button']
+    NutCalendar: typeof import('@nutui/nutui-taro')['Calendar']
+    NutCell: typeof import('@nutui/nutui-taro')['Cell']
     NutCollapse: typeof import('@nutui/nutui-taro')['Collapse']
     NutCollapseItem: typeof import('@nutui/nutui-taro')['CollapseItem']
     NutDivider: typeof import('@nutui/nutui-taro')['Divider']
     NutElevator: typeof import('@nutui/nutui-taro')['Elevator']
+    NutForm: typeof import('@nutui/nutui-taro')['Form']
+    NutFormItem: typeof import('@nutui/nutui-taro')['FormItem']
+    NutInput: typeof import('@nutui/nutui-taro')['Input']
     NutSearchbar: typeof import('@nutui/nutui-taro')['Searchbar']
+    NutSwitch: typeof import('@nutui/nutui-taro')['Switch']
   }
 }

config/index.js

@@ -18,7 +18,7 @@ const config = {
   },
   sourceRoot: 'src',
   outputRoot: 'dist',
-  plugins: ['@tarojs/plugin-html'],
+  plugins: ['@tarojs/plugin-html', 'tarojs-router-next-plugin'],
   defineConstants: {
   },
   copy: {
@@ -60,6 +60,9 @@ const config = {
         resolvers: [NutUIResolver({taro: true})]
       }))
     },
+    miniCssExtractPluginOption: {
+      ignoreOrder: true,
+    },
     postcss: {
       pxtransform: {
         enable: true,

project.config.json

@@ -2,7 +2,7 @@
   "miniprogramRoot": "./dist",
   "projectname": "wxapp-visitor-invite",
   "description": "",
-  "appid": "wx0678f6f9ae39857e",
+  "appid": "wx72b4f0e248fc1b2b",
   "setting": {
     "urlCheck": true,
     "es6": false,

src/app.config.ts

@@ -2,6 +2,8 @@ export default defineAppConfig({
   pages: [
     'pages/index/index',
     'pages/contact/index',
+    'pages/contact-new/index',
+    'pages/contact-edit/index',
     'pages/invite/index',
     'pages/settings/index'
   ],

src/app.ts

@@ -2,6 +2,8 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import './app.scss'
 import '@nutui/touch-emulator'
+import 'taro-icons/scss/FontAwesome.scss'
+
 
 const App = createApp({
   onShow (options) {},

src/components/contact-form/index.json

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

src/components/contact-form/index.scss

@@ -0,0 +1,25 @@
+.suggestions {
+  position: absolute;
+  z-index: 10;
+  background-color: #FFF;
+  width: 100vw;
+  border: solid 1px #DDD;
+}
+.suggestions > view {
+  padding: 30px 20px 30px 50px;
+  border-bottom: solid 1px #DDD;
+  color: #888;
+}
+
+.label {
+  padding: 30px 20px 10px 50px;
+  color: #666;
+}
+
+.calendar > .nut-cell {
+  padding: 0;
+}
+
+.nut-avatar-cropper::after, .nut-avatar-cropper__edit-text {
+  background-color: transparent;
+}

src/components/contact-form/index.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import "./index.scss";
+import Taro from "@tarojs/taro";
+import { Router } from 'tarojs-router-next'
+import StringUtil from "../../utils/StringUtil";
+
+
+import { reactive, ref } from 'vue';
+
+const props = defineProps(['data'])
+
+// const isSuggestionsShow = ref(false)
+
+const state = reactive({
+  isSuggestionsShow: false,
+  name: props.data ? props.data.name : '',
+  company: props.data ? props.data.company : '',
+  avatar: props.data ? props.data.avatar : '',
+  number: '',
+  isFlexVisit: props.data ? props.data.isFlexVisit : true,
+  date: '',
+  isDateSelectorVisible: false
+});
+
+const openSwitch = (param) => {
+  state[`${param}`] = true;
+};
+const closeSwitch = (param) => {
+  state[`${param}`] = false;
+};
+const setChooseValue = (param) => {
+  state.date = param[3];
+};
+
+function setShowSuggestions(isShow: Boolean) {
+  state.isSuggestionsShow = isShow
+}
+
+const updateFacePhoto = () => {
+  Taro.chooseImage({
+    count: 1, // 默认9
+    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
+    success: function (res) {
+      // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
+      state.avatar = res.tempFilePaths
+      console.log(state.avatar)
+    },
+  })
+}
+
+</script>
+
+<template>
+
+  <nut-form>
+    <nut-form-item>
+      <view>
+        <view class="d-flex justify-content-center">
+          <nut-avatar size="192" @click="updateFacePhoto" class="overflow-hidden">
+            <img  v-if="state.avatar" :src="state.avatar" />
+            <view v-else class="d-flex align-items-center justify-content-center h-100 w-100">
+              <Text class="fas fa-user fa-6x"></Text>
+            </view>
+          </nut-avatar>
+        </view>
+        <view class="d-flex justify-content-center pt-3">
+          <view class="btn btn-secondary badge-pill" @tap="updateFacePhoto">{{state.avatar?'更换':'添加'}}面部识别照片</view>
+        </view>
+      </view>
+    </nut-form-item>
+    <nut-form-item label="姓名">
+      <nut-input v-model="state.name" class="nut-input-text" />
+    </nut-form-item>
+    <nut-form-item label="称呼">
+      <nut-input v-model="state.nickName" class="nut-input-text" @focus="setShowSuggestions(true)" @blur="setShowSuggestions(false)" />
+    </nut-form-item>
+    <view class="suggestions" v-show="state.isSuggestionsShow">
+      <view>先生</view>
+      <view>女士</view>
+      <view>小姐</view>
+      <view><Text className="fas fa-info-circle text-info"/> 您可以从列表中选择或直接填写</view>
+    </view>
+
+    <nut-form-item label="电话">
+      <nut-input v-model="state.phone" class="nut-input-text" />
+    </nut-form-item>
+    <nut-form-item label="公司">
+      <nut-input v-model="state.company" class="nut-input-text" />
+    </nut-form-item>
+
+    <nut-form-item label="VIP">
+      <view class="d-flex">
+        <view class="flex-grow-1"></view>
+        <nut-switch v-model="state.isVIP" active-color="blue" />
+      </view>
+    </nut-form-item>
+
+    <nut-form-item label="可随时来访">
+      <view class="d-flex">
+        <view class="flex-grow-1"></view>
+        <nut-switch v-model="state.isFlexVisit" active-color="blue" />
+      </view>
+    </nut-form-item>
+
+    <nut-form-item label="下次到访日期" v-show="!state.isFlexVisit">
+      <view class="d-flex calendar">
+        <view class="flex-grow-1"></view>
+        <view class="text-dark" @tap="openSwitch('isDateSelectorVisible')">
+          {{state.date ? state.date : '请选择'}}
+        </view>
+      </view>
+    </nut-form-item>
+
+  </nut-form>
+
+  <nut-calendar
+      v-model:visible="state.isDateSelectorVisible"
+      @close="closeSwitch('isDateSelectorVisible')"
+      @choose="setChooseValue"
+      :default-value="state.date"
+      :is-auto-back-fill="true"
+  >
+  </nut-calendar>
+
+</template>

src/components/contact/index.vue

@@ -1,18 +1,23 @@
 <script setup lang="ts">
 import Taro from "@tarojs/taro";
 import { Router } from 'tarojs-router-next'
-import 'taro-icons/scss/FontAwesome.scss'
 import StringUtil from "../../utils/StringUtil";
 import "./index.scss";
 
-
 const props = defineProps(['items'])
 
+const clickItem = (key: string, item: any)  => {
+  console.log(key);
+  console.log(item.name);
+
+  Router.toContactEdit({ data: item })
+}
+
 </script>
 
 <template>
-  <nut-elevator :index-list="props.items" is-sticky :height="(Taro.getSystemInfoSync().windowHeight)-50-32-40">
-  <template #default="{ item }" >
+  <nut-elevator :index-list="props.items" is-sticky :height="(Taro.getSystemInfoSync().windowHeight)-50-32-40" @click-item="clickItem">
+  <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)">

src/components/notification/index.vue

@@ -1,8 +1,6 @@
 <script setup>
 import './index.scss'
 import StringUtil from "../../utils/StringUtil";
-import 'taro-icons/scss/FontAwesome.scss'
-import { ArrowDown } from '@nutui/icons-vue-taro';
 
 
 /**
@@ -61,7 +59,7 @@ let todayPassJsonObject = JSON.parse(props.todayPassTime)
         <view v-if="todayPassJsonObject.length === 0">
           <nut-collapse>
             <nut-collapse-item name="name1" :title="'来访时间：'+ props.passDate" :value="props.passTime" :border=false>
-              <template #icon> <ArrowDown color="white"/> </template>
+              <template #icon> </template>
             </nut-collapse-item>
           </nut-collapse>
         </view>

src/pages/contact-edit/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '',
+  usingComponents: {}
+})

src/pages/contact-edit/index.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { Router } from 'tarojs-router-next'
+import './index.scss'
+
+
+const contactData = Router.getData()
+// const contactData = JSON.stringify(contactDataString)
+</script>
+
+<template>
+  <view class="p-3 d-flex">
+    <view class="flex-grow-1">
+      <view class="h2">更新联系人</view>
+      <view class="text-black-50">更新来访联系人信息，并设置下次到访时间</view>
+    </view>
+    <view class="pr-2 pt-2">
+      <view class="text-primary">保存</view>
+    </view>
+  </view>
+  <ContactForm :data="contactData"/>
+
+  <nut-cell title="来访记录">
+    <template #desc>
+      <Text className="fas fa-chevron-right"/>
+    </template>
+  </nut-cell>
+
+  <nut-cell title="编辑记录" sub-title="本联系人在公司中的所有信息修改记录">
+    <template #desc>
+      <Text className="fas fa-chevron-right"/>
+    </template>
+  </nut-cell>
+
+  <view class="p-3">
+    <nut-button block color="red" plain>加入黑名单</nut-button>
+  </view>
+
+  <view class="p-3">
+    <nut-button block color="red">删除联系人</nut-button>
+  </view>
+
+</template>

src/pages/contact-new/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '',
+  usingComponents: {}
+})

src/pages/contact-new/index.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { Router } from 'tarojs-router-next'
+import './index.scss'
+
+</script>
+
+<template>
+  <view class="p-3 d-flex">
+    <view class="flex-grow-1">
+      <view class="h2">新来访人</view>
+      <view class="text-black-50">新建来访联系人，并设置到访时间</view>
+    </view>
+    <view class="pr-2 pt-2">
+      <view class="text-primary">保存</view>
+    </view>
+  </view>
+
+  <ContactForm/>
+</template>

src/pages/contact/index.config.ts

@@ -1,4 +1,5 @@
 export default definePageConfig({
   navigationBarTitleText: '',
-  usingComponents: {}
+  usingComponents: {},
+  disableScroll: true
 })

src/pages/contact/index.vue

@@ -1,6 +1,5 @@
 <script setup>
 import Contact from "../../components/contact"
-import { Search2 } from '@nutui/icons-vue-taro';
 import { Router } from 'tarojs-router-next'
 import { ref } from 'vue';
 import './index.scss'
@@ -51,12 +50,12 @@ const data = ref([
         通讯录
       </view>
       <view class="pr-2">
-        <fa icon="fa fa-plus-circle text-primary" @tap="Router.toContactNew()"></fa>
+        <Text className="fas fa-plus-circle text-primary" @tap="Router.toContactNew()" />
       </view>
     </view>
     <nut-searchbar v-model="val">
       <template #rightin>
-        <Search2 />
+        <Text className="fas fa-search text-black-50"/>
       </template>
     </nut-searchbar>
     <Contact :items="data" style="height: 100%"/>

src/pages/index/index.vue

@@ -1,12 +1,12 @@
 <script setup>
-  import { reactive } from 'vue'
-  import { View, Text } from '@tarojs/components'
-  import './index.scss'
-  import Counter from '../../components/Counter.vue'
-  import { ref } from 'vue';
-  import {useDidShow, useLoad} from "@tarojs/taro";
-  import { Date } from '@nutui/icons-vue-taro';
-  import Notification from "../../components/notification";
+import { reactive } from 'vue'
+import { View, Text } from '@tarojs/components'
+import './index.scss'
+import Counter from '../../components/Counter.vue'
+import { ref } from 'vue'
+import {useDidShow, useLoad} from "@tarojs/taro";
+import { Date } from '@nutui/icons-vue-taro';
+import Notification from "../../components/notification";
   //
   //
   // const show = ref(false);
@@ -34,7 +34,7 @@
 
 
 <template>
-  <view>
+  <view class="w-100" style="overflow-x: hidden">
     <view class="pl-3 pt-3 pr-3 h2 d-flex">
       <view class="flex-grow-1">
         来访记录