更新选择称呼的方式

src/app.scss

@@ -4,6 +4,10 @@
   background-color: #007bff;
 }
 
+.btn-hover-primary {
+  color: #0056b3 !important;
+}
+
 .btn-secondary:hover {
   background-color: #6c757d;
 }

src/components/contact-form/index.vue

@@ -15,8 +15,9 @@ const contacts = useContactsStore()
 const contact = useContactItemStore()
 contact.setNewAvatar("")
 
+const onShowSuggestionsMenu = ref(false)
+
 const state = reactive({
-  isNickNameSuggestionsShow: false,
   newAvatar: undefined,
   isDateSelectorVisible: false
 });
@@ -32,8 +33,8 @@ const setChooseDate = (param) => {
   contact.contact.nextVisitDate = param[3]
 }
 
-function setShowSuggestions(isShow: Boolean) {
-  state.isNickNameSuggestionsShow = isShow
+function onShowSuggestions() {
+  onShowSuggestionsMenu.value = true
 }
 
 const updateFacePhoto = () => {
@@ -48,13 +49,9 @@ const updateFacePhoto = () => {
     },
   })
 }
-const updateNickName = (value) => {
-  if (value === null) {
-    state.isNickNameSuggestionsShow = false
-  }
-  else {
-    contact.contact.nickName = BjxHelper.getBJXFirstChar(contact.contact.name) + value;
-  }
+const onNickNameSelected = (value) => {
+  console.log(value)
+  contact.contact.nickName = value.name;
 }
 </script>
 
@@ -81,21 +78,25 @@ const updateNickName = (value) => {
       <nut-input v-model="contact.contact.name" class="nut-input-text" />
     </nut-form-item>
     <nut-form-item label="称呼">
-      <nut-input v-model="contact.contact.nickName" @change="state.isNickNameSuggestionsShow = false" class="nut-input-text" @focus="setShowSuggestions(true)" @blur="setShowSuggestions(false)" />
+      <nut-input v-model="contact.contact.nickName" class="nut-input-text">
+        <template #right>
+          <nut-button type="default" plain size="small" @tap="onShowSuggestions">选择</nut-button>
+        </template>
+      </nut-input>
     </nut-form-item>
-    <view class="suggestions" style="background-color: #EEE" v-show="state.isNickNameSuggestionsShow">
-      <view @tap="updateNickName('先生')">{{BjxHelper.getBJXFirstChar(contact.contact.name)}}先生</view>
-      <view @tap="updateNickName('女士')">{{BjxHelper.getBJXFirstChar(contact.contact.name)}}女士</view>
-      <view @tap="updateNickName('小姐')">{{BjxHelper.getBJXFirstChar(contact.contact.name)}}小姐</view>
-      <view @tap="updateNickName(null)">
-        <View class="d-flex">
-          <View class="flex-grow-1">
-            <Text className="fas fa-info-circle text-info"/> 您可以从列表中选择或直接填写
-          </View>
-          <View class="text-primary pr-3">关闭</View>
-        </View>
-      </view>
-    </view>
+<!--    <view class="suggestions" style="background-color: #EEE" v-show="state.isNickNameSuggestionsShow">-->
+<!--      <view @tap="updateNickName('先生')">{{BjxHelper.getBJXFirstChar(contact.contact.name)}}先生</view>-->
+<!--      <view @tap="updateNickName('女士')">{{BjxHelper.getBJXFirstChar(contact.contact.name)}}女士</view>-->
+<!--      <view @tap="updateNickName('小姐')">{{BjxHelper.getBJXFirstChar(contact.contact.name)}}小姐</view>-->
+<!--      <view @tap="updateNickName(null)">-->
+<!--        <View class="d-flex">-->
+<!--          <View class="flex-grow-1">-->
+<!--            <Text className="fas fa-info-circle text-info"/> 您可以从列表中选择或直接填写-->
+<!--          </View>-->
+<!--          <View class="text-primary pr-3">关闭</View>-->
+<!--        </View>-->
+<!--      </view>-->
+<!--    </view>-->
 
     <nut-form-item label="电话">
       <nut-input v-model="contact.contact.phone" class="nut-input-text" />
@@ -138,4 +139,12 @@ const updateNickName = (value) => {
   >
   </nut-calendar>
 
+  <nut-action-sheet v-model:visible="onShowSuggestionsMenu" title="此联系人到访时将会发出警告通知。"
+                    :menu-items="[
+                      {name: BjxHelper.getBJXFirstChar(contact.contact.name) + '先生'},
+                      {name: BjxHelper.getBJXFirstChar(contact.contact.name) + '女士'},
+                      {name: BjxHelper.getBJXFirstChar(contact.contact.name) + '小姐'},
+                    ]" cancel-txt="取消" @choose="onNickNameSelected">
+  </nut-action-sheet>
+
 </template>

src/pages/contact-edit/index.vue

@@ -116,7 +116,7 @@ const onDeleteConfirm = (item) => {
         <view class="text-black-50">更新来访联系人信息，并设置下次到访时间</view>
       </view>
       <view class="d-flex align-items-end">
-        <view class="text-primary save-button" @tap="onSaveClicked">保存</view>
+        <view class="text-primary save-button" hover-class="btn-hover-primary" @tap="onSaveClicked">保存</view>
       </view>
     </view>
 
@@ -145,12 +145,11 @@ const onDeleteConfirm = (item) => {
         <nut-button block color="red" @tap="onDeleteVisitor">删除联系人</nut-button>
       </view>
     </view>
-  </view>
-
-  <nut-action-sheet v-model:visible="showDeleteConfirmMenu" title="此联系人将从公司联系人中删除，并不可恢复。" :menu-items="[{name: '删除'}]" cancel-txt="取消" @choose="onDeleteConfirm">
-  </nut-action-sheet>
-  <nut-action-sheet v-model:visible="showBlockConfirmMenu" title="此联系人到访时将会发出警告通知。" :menu-items="[{name: '阻止联系人'}]" cancel-txt="取消" @choose="onBlockConfirm">
-  </nut-action-sheet>
+    <nut-action-sheet v-model:visible="showDeleteConfirmMenu" title="此联系人将从公司联系人中删除，并不可恢复。" :menu-items="[{name: '删除'}]" cancel-txt="取消" @choose="onDeleteConfirm">
+    </nut-action-sheet>
+    <nut-action-sheet v-model:visible="showBlockConfirmMenu" title="此联系人到访时将会发出警告通知。" :menu-items="[{name: '阻止联系人'}]" cancel-txt="取消" @choose="onBlockConfirm">
+    </nut-action-sheet>
 
+  </view>
 
 </template>

src/pages/contact-new/index.vue

@@ -53,7 +53,7 @@ const onSaveClicked = () => {
         <view class="text-black-50">新建来访联系人，并设置到访时间</view>
       </view>
       <view class="d-flex align-items-end">
-        <view class="text-primary save-button" @tap="onSaveClicked">保存</view>
+        <view class="text-primary save-button" hover-class="btn-hover-primary" @tap="onSaveClicked">保存</view>
       </view>
     </view>
 

src/pages/contact/index.vue

@@ -126,8 +126,8 @@ const generateContactGroupList = (contactList: ContactData[]) => {
             <Text className="fas fa-search text-black-50"/>
           </template>
         </nut-searchbar>
-      <view class="d-flex align-items-center pr-3">
-        <Text className="fas fa-plus-circle text-primary fa-2x" @tap="Router.toContactNew()" />
+      <view class="d-flex align-items-center pr-3 text-primary" hover-class="btn-hover-primary">
+        <Text className="fas fa-plus-circle fa-2x" @tap="Router.toContactNew()" />
       </view>
     </View>