CRM-优化客户查询列表

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

@@ -1,170 +1,257 @@
 <template>
   <view class="con-body">
-        <view >
+    <view class="con-bg">
       <!-- 头部 -->
-            <customHeader ref="customHeaderRef" :title="'选择客户单位'" :leftFlag="true" :rightFlag="false">
+      <customHeader ref="customHeaderRef" :title="'客户名称列表'" :leftFlag="true" :rightFlag="false">
+        <template #right>
+          <view class="head-right" @click="handleAdd">
+            <uni-icons type="plus" size="24" color="#B7D2FF"></uni-icons>
+            新增
+          </view>
+        </template>
       </customHeader>
+
       <!-- 高度来避免头部遮挡 -->
-            <view class="top-height"></view>
+      <view class="top-height" :style="{ paddingTop: navBarPaddingTop + 'px' }"></view>
-            <uni-easyinput prefixIcon="search" v-model="searchContent" placeholder="请输入客户单位名称" clearable
-                @iconClick="iconClick">
-            </uni-easyinput>
 
+      <!-- 正文内容 -->
+      <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" @clear="searchValue=''"
+          />
+          <!--          <button type="default" @click="searchValue=''" size="mini" class="btn-search">清空</button>-->
+        </view>
 
-		<view class="inner-box">
+        <!-- 分页部分  -->
-			<view class="list-cont">
+        <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
+                      :up="upOption" :down="downOption" :fixed="false" textColor="#ffffff" bgColor="#ffffff"
+                      class="scroll-h" :class="{'loading-scroll':cssFlag}"
+        ><!-- @down="downCallback"-->
           <radio-group class="block" @change="radioChange">
-					<view class="item"   v-for="(item, index) in dataList">
+            <view class="white-bg" v-for="(item, index) in list" :key="index" @click="handleDetail(item)">
-						<radio class='radio' :value="index" ></radio>
+              <radio class='radio'
-						<view class="name">{{item.cusName+"（"+item.shortName+"）"}}</view>
+                     :class="index === selectIndex ? 'checked' : ''"
+                     :checked="index === selectIndex"
+                     :value="index+''">
+              </radio>
+
+              <view class="report-list">
+                <view class="title">{{ item.cusName }}</view>
+                <!--              <view class="r-list">
+                                <view class="r-name">{{ item.shortName }}</view>
+                                <view class="r-right btn-orange" size="mini">{{ item.statusName }}</view>
+                              </view>-->
+                <view class="border-bottom"></view>
+                <!--              <view class="r-list">
+                                <view class="r-left">日期</view>
+                                <view class="r-right">{{ new Date(item.createTime).toLocaleDateString()}}</view>
+                              </view>-->
+              </view>
             </view>
           </radio-group>
+        </mescroll-uni>
       </view>
     </view>
-
-        </view>
   </view>
 </template>
 
 <script setup>
+
+import {ref, onMounted, getCurrentInstance, watch} from 'vue'
 import customHeader from '@/components/customHeader.vue'
-import { getYsCustomerList } from '../../../../api/crm/activity/activity'
+import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
-import { onMounted,  reactive, ref, watch } from 'vue'
+import {getNavBarPaddingTop} from '@/utils/system.js'
-import { onLoad } from '@dcloudio/uni-app'
+import {onLoad} from "@dcloudio/uni-app";
-import { useMessage } from '../../../../utils/message'
+import {getCustomerList} from "@/api/crm/customer/getCustomer";
 
+let instance = null;
+// 获取导航栏高度用于内容区域padding
+const navBarPaddingTop = ref(0);
+// 查询列表
+let list = ref([]);
+const mescrollRef = ref(null);
+let searchValue = ref('')
 
+let cssFlag=ref(false);//控制样式
 
-const message = useMessage();
+const upOption = ref({
+  page: { num: 0, size: 10 },
+  noMoreSize: 5,
+  empty: {
+    tip: '~ 空空如也 ~',
+    icon: "../../static/images/mescroll-empty.png"
+  },
+  textLoading: '加载中...',
+  textNoMore: '已经到底了'
+});
 
-//点击查询客户人员
+const downOption = ref({
-const queryParams = ref({
+  auto: true,
-    cusName: '',
+  textInOffset: '下拉刷新',
-    nickName:'',
+  textOutOffset: '释放更新',
-    pageNum: 1,
+  textLoading: '刷新中...'
-    pageSize: 10
+});
-})
 
+const mescrollInit = (mescroll) => {
+  cssFlag.value = true;
+  mescrollRef.value = mescroll;
+};
 
 onMounted(() => {
-
+  navBarPaddingTop.value = getNavBarPaddingTop() * 2;
 })
 
-onLoad(options => {
+
-    queryParams.value.cusName = options.cusName
+onLoad((options)=>{
+  instance = getCurrentInstance().proxy;
+  const eventChannel = instance.getOpenerEventChannel();
+  eventChannel.on('requestCusList', async (res) => {
+    let {cusName} = res.data;
+    // console.log(cusName, "客户选择页读取到参数");
+    searchValue.value = cusName;
+  })
 })
-const dataList = ref([])
 
+let timerId = null;
+// 搜索
+watch(searchValue, (newValue, oldValue) => {
+  // console.log(`新值: ${newValue}, 旧值: ${oldValue}`);
+  if(timerId) clearTimeout(timerId);
+  timerId = setTimeout(async ()=>{
+    handleSearch();
+    clearTimeout(timerId);
+    timerId = null;
+  }, 500);
+});
 
-
+// 下拉刷新
-
+const downCallback = async (mescroll) => {
-//查询某一客户人员
+  try {
-let searchContent = ref('')
+    const res = await getList(1, upOption.value.page.size);
-
+    list.value = res.list;
-function iconClick() {
+    // 正确结束下拉刷新状态
-    message.toast('点击了查询，当前内容：' + searchContent.value)
+    mescroll.endSuccess(res.list.length, res.total >= upOption.value.page.size);
+  } catch (error) {
+    console.log(error)
+    // 发生错误时结束下拉刷新
+    mescroll.endErr();
+  }
 }
 
-//监视查询的内容的变化
+// 上拉加载更多
-let queryCusForm = reactive({})
+const upCallback = async (mescroll) => {
-watch(searchContent,(newValue,oldValue)=>{
+  try {
-    queryCusForm.cusName = searchContent.value
+    const res = await getList(mescroll.num, mescroll.size);
-    getYsCustomerList(queryCusForm).then(res=>{
+    if (mescroll.num === 1) {
-        dataList.value = res.rows
+      list.value = res.list;
-    })
+    } else {
-})
+      list.value.push(...res.list);
+    }
+    // 正确结束上拉加载状态
+    mescroll.endSuccess(res.list.length, res.list.length >= mescroll.size);
+  } catch (error) {
+    console.log(error)
+    // 发生错误时结束上拉加载
+    mescroll.endErr();
+  }
+}
 
-function radioChange(event) {
+// 查询搜索跳转
-     const selectedIndex = event.detail.value
+let handleSearch = async () => {
-    let test = dataList.value[selectedIndex]
+  // 触发下拉刷新以重新加载数据
+  if (mescrollRef.value) {
+    cssFlag.value = true;
+    uni.showLoading()
+    await downCallback(mescrollRef.value.mescroll);
+    uni.hideLoading()
+    cssFlag.value = false;
+  }
+}
+// 获取数据列表
+const getList = async (pageIndex, pageSize) => {
+  let param = {
+    pageNum: pageIndex,
+    pageSize,
+    cusName: searchValue.value
+  }
+  let { rows, total  } = await getCustomerList(param)
+  return {list: rows, total};
+}
+// 选中项的索引号
+const selectIndex = ref(null);
+const radioChange = (e) => {
+  const selectedIndex = e.detail.value;
   //发送全局事件
-    uni.$emit('onCustomerSelected', test)
+  uni.$emit('onCustomerSelected',list.value[selectedIndex])
-    let cusName = test.cusName;//客户名称
+  uni.navigateBack()
-    let cusId = test.cusId;//客户ID
-    uni.navigateBack()//返回上一页
 }
 
 
 
-
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
-
+.all-body {
-.con-body{
+  /* #ifdef APP-PLUS */
-    background: white;
+  top: 150rpx;
+  height: calc(100vh - 75px);
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  top: 120rpx;
+  height: calc(100vh);
+  /* #endif */
 }
 
-
+.search .btn-search {
-/* Container for the checkbox group */
+  border: none;
-.checkbox-group.block {
+  background: none;
-    width: 100%;
+  line-height: normal;
+  color: #fff;
+  line-height: 56rpx !important;
+  padding: 10rpx 0 0;
+  text-align: left;
+  cursor: pointer;
 }
 
-/* Each item row */
+.search .btn-search::after {
-.itemClass {
+  display: none;
+}
+
+.scroll-h {
+  /* #ifdef APP-PLUS */
+  height: calc(100vh - 120px);
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  height: calc(100vh - 110px);
+  /* #endif */
+}
+
+.white-bg {
+  //padding-bottom:10rpx;
+  margin-bottom: 0;
+  overflow: hidden;
   display: flex;
   align-items: center;
-    padding: 10rpx 0;
-    margin-left: 15rpx;
-    border-bottom: 1px solid #eee;
-    /* optional divider */
-}
-
-/* Checkbox styling */
-.checkBoxClass {
-    margin-right: 12rpx;
-}
-
-/* Content container */
-.clientClass {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    font-size: 36rpx;
-    color: #333;
-    /* default text color */
-}
-
-/* Blue username text */
-.blue-text {
-    /* or any blue you prefer */
-    margin-right: 5rpx;
-}
-.inner-box {
-  width: 100%;
-  padding: 10px;
-  box-sizing: border-box;
-}
-
-.list-cont {
-  width: 100%;
-}
-
-.block {
-  width: 100%;
-}
-
-.item {
-  display: flex;
-  align-items: center;
-  padding: 12px 0;
-  border-bottom: 1px solid #eee;
 }
 
 .radio {
-  margin-right: 12px;
+  padding-right: 20rpx;
-  transform: scale(0.9);
 }
 
-.name {
+.title {
-  flex: 1;
+  font-size: 32rpx;
-  font-size: 16px;
+  line-height: 48rpx;
-  color: #333;
 }
 
-.checked {
+.report-list {
-  color: #007AFF; /* 选中状态的颜色 */
+  width: calc(100% - 70rpx);
+  //background-color: pink;
+}
+
+.border-bottom {
+  margin-top: 6rpx;
 }
 </style>