CRM-走访查看，优化查询页面

src/pages/business/CRM/marketActivity/visitReportView.vue

@@ -2,21 +2,34 @@
   <view class="con-body">
     <view class="con-bg">
       <!-- 头部 -->
-            <customHeader ref="customHeaderRef" :title="'走访查看'" :leftFlag="true" :rightFlag="false"></customHeader>
+      <customHeader
+          ref="customHeaderRef"
+          :title="!searchShow?'走访查看':'走访搜索'"
+          :leftFlag="true"
+          :rightFlag="false"
+          @back="handleBack" :searchType="searchShow?1:undefined"
+      ></customHeader>
       <!-- 高度来避免头部遮挡 -->
       <view class="top-height" :style="{ paddingTop: navBarPaddingTop + 'px' }"></view>
 
       <!-- 正文内容 -->
       <view class="all-body">
-                <!-- 搜索  @blur="blur" @focus="focus" @input="input" @cancel="cancel" @clear="clear"-->
-                <view class="search">
-                    <uni-search-bar class="custom-search" radius="28" placeholder="请输入客户名称" clearButton="auto"
-                        cancelButton="none" bgColor="#6FA2F8" textColor="#ffffff" v-model="searchValue" />
-                    <button type="default" @click="handleSearch" size="mini" class="btn-search">查询</button>
+        <!-- 搜索处理 -->
+        <customSearch v-if="searchShow" :searchKeywords="searchText" :searchType="searchTypeObj"
+                      :checkTypeObj="notictTypeCheck" :searchTypeList="noticeTypeList" @confirm="handleSearchConfirm">
+        </customSearch>
+        <view class="search" v-else @click="handleSearchFocus">
+          <view class="search-bg">
+            <view class="search-left">{{ notictTypeCheck.name ? notictTypeCheck.name : '全部' }}</view>
+            <view class="search-right">
+              <input class="uni-input" v-model="inputval" placeholder="请输入您想查询的内容"
+                     placeholder-class="search-color"/>
+            </view>
+          </view>
         </view>
 
         <!-- 分页部分  -->
-                <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
+        <mescroll-uni ref="mescrollRef" v-if="!searchShow" @init="mescrollInit" @down="downCallback" @up="upCallback"
                       :up="upOption" :down="downOption" :fixed="false" textColor="#ffffff" bgColor="#ffffff"
                       class="scroll-h" :class="{ 'loading-scroll': cssFlag }">
           <view class="white-bg margin-bottom20" v-for="(item, index) in list" :key="index"
@@ -66,17 +79,102 @@
 </template>
 
 <script setup>
-import customHeader from '@/components/customHeader.vue'
-import { ref, reactive, onMounted } from 'vue'
+import {ref, reactive, onMounted, watch} from 'vue'
 import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
-import { getNavBarPaddingTop } from '@/utils/system.js'
-import { getQueryVisistList } from '../../../../api/crm/activity/activity';
-import {onShow} from "@dcloudio/uni-app";
+import {getNavBarPaddingTop} from '@/utils/system.js'
+import {getQueryVisistList} from '../../../../api/crm/activity/activity';
+import {onHide, onShow} from "@dcloudio/uni-app";
+import customHeader from '@/components/customHeader.vue'
+import customSearch from '@/components/customSearch.vue'
+// 搜索处理
+let searchShow = ref(false);
+let searchText = ref(undefined);
+let notictTypeCheck = ref({}); //选中类型
+// 新增状态变量存储搜索条件
+const selValue = ref(''); // 搜索类型名称
+const inputval = ref(''); // 搜索内容
+//点击查询方法，搜索当前报告信息
+let searchValue = ref(null)
+let noticeTypeList = ref([{
+  id: 1,
+  name: '客户全称'
+},
+  {
+    id: 2,
+    name: '客户简称'
+  },
+  {
+    id: 3,
+    name: '业务员名称'
+  },
+  {
+    id: 4,
+    name: '活动单号'
+  },
+  {
+    id: 5,
+    name: '活动内容'
+  },
+  {
+    id: 6,
+    name: '模糊搜索'
+  },
+  {
+    id: 7,
+    name: '未读内容'
+  }
+]);
+// 搜索返回操作
+const handleBack=()=>{
+  searchShow.value=false;
+}
+// 获取input 焦点跳转
+const handleSearchFocus = () => {
+  searchShow.value = true;
+}
+let searchTypeObj = ref({
+  typeId: 3,
+  typeName: '消息类型'
+});
+// 搜索完返回处理
+const handleSearchConfirm = (param1, param2) => {
+  notictTypeCheck.value = param1.value;
+  inputval.value = param2.value || '';
+  selValue.value = param1.value.name || '';
+  searchValue.value = param2.value;
+  console.log("selValue" + selValue.value)
+  console.log("inputval" + inputval.value)
+  // 重置mescroll触发刷新
+  if (mescrollRef.value) {
+    mescrollRef.value.resetUpScroll();
+  }
+  searchShow.value = false;
+}
 
-onShow(()=>{
-  downCallback(mescrollRef.value.mescroll)
+//监视查询的内容的变化
+// watch(searchValue, (newValue, oldValue) => {
+//   //变化了之后，重新查询内容
+//   var data = {
+//     pageNum: 1,
+//     pageSize: 10,
+//   };
+//   getQueryVisistList(data).then(res => {
+//     if (res.code == 200) {
+//       //设置列表数据
+//       list.value = res.rows;
+//     }
+//   })
+// })
+onHide(()=>{
+  searchShow.value=false;
 })
 
+//====================
+
+// onShow(() => {
+//   getList();
+// })
+
 let list = ref([])
 let queryParams = reactive({
   selValue: ''
@@ -103,10 +201,9 @@ const downCallback = async (mescroll) => {
       queryParams.pageNum = 1;
       queryParams.pageSize = upOption.value.page.size;
       //获取当前页的信息
-            const res = await getQueryVisistList(queryParams)
+      const res = await getViewReportList(1, upOption.value.page.size)
       cssFlag.value = false;
       list.value = res.rows;
-            mescroll.resetUpScroll();
     }, 500);
   } catch (error) {
     mescroll.endErr();
@@ -122,23 +219,48 @@ const downCallback = async (mescroll) => {
 const upCallback = async (mescroll) => {
   try {
     setTimeout(async () => {
-          queryParams.pageNum = 1;
-          queryParams.pageSize = upOption.value.page.size;
-            const res = await getQueryVisistList(queryParams);
+      const res = await getViewReportList(mescroll.num, mescroll.size, selValue.value,
+          inputval.value);
       if (mescroll.num === 1) {
-                list.value = res.rows;
+        list.value = res.list;
       } else {
-                list.value.push(...res.rows);
+        list.value.push(...res.list);
       }
-            mescroll.endBySize(res.rows.length, res.total);
+      mescroll.endBySize(list.value.length, res.total);
     }, 500);
   } catch (error) {
     mescroll.endErr();
   }
 }
 
+function getList() {
+  queryParams.pageNum = 1;
+  queryParams.pageSize = upOption.value.page.size;
+  getQueryVisistList(queryParams).then(res => {
+    list.value = res.rows;
+  })
+}
+
+// 获取数据列表
+const getViewReportList = (pageNum, pageSize) => {
+  return new Promise(async (resolve) => {
+    let param = {
+      pageNum,
+      pageSize,
+      // 添加搜索条件参数
+      selValue: selValue.value,
+      inputval: inputval.value
+    }
+    let res = await getQueryVisistList(param);
+    resolve({
+      list: res.rows,
+      total: res.total
+    });
+  });
+}
+
 const upOption = ref({
-    page: { num: 0, size: 10 },
+  page: {num: 0, size: 10},
   noMoreSize: 5,
   empty: {
     tip: '~ 空空如也 ~',
@@ -162,12 +284,12 @@ function showDetail(item) {
   })
 }
 
-//点击查询方法，搜索当前报告信息
-let searchValue = ref()
-function handleSearch() {
-    queryParams.inputval = searchValue.value
-    downCallback(mescrollRef.value.mescroll);
-}
+
+
+// function handleSearch() {
+//   queryParams.inputval = searchValue.value
+//   downCallback(mescrollRef.value.mescroll);
+// }
 
 </script>