From f1565c20d28b514c07fb554a8d2eb281a13b64d4 Mon Sep 17 00:00:00 2001
From: wangyang <test@qq.com>
Date: Fri, 29 Aug 2025 10:09:57 +0800
Subject: [PATCH] =?UTF-8?q?CRM-=E4=BC=98=E5=8C=96=E5=AE=A2=E6=88=B7?=
 =?UTF-8?q?=E6=9F=A5=E8=AF=A2=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../business/CRM/marketActivity/chooseCus.vue | 329 +++++++++++-------
 1 file changed, 208 insertions(+), 121 deletions(-)

diff --git a/src/pages/business/CRM/marketActivity/chooseCus.vue b/src/pages/business/CRM/marketActivity/chooseCus.vue
index d09cb6d..56bb92a 100644
--- a/src/pages/business/CRM/marketActivity/chooseCus.vue
+++ b/src/pages/business/CRM/marketActivity/chooseCus.vue
@@ -1,170 +1,257 @@
 <template>
-    <view class="con-body">
-        <view >
-            <!-- 头部 -->
-            <customHeader ref="customHeaderRef" :title="'选择客户单位'" :leftFlag="true" :rightFlag="false">
-            </customHeader>
-            <!-- 高度来避免头部遮挡 -->
-            <view class="top-height"></view>
-            <uni-easyinput prefixIcon="search" v-model="searchContent" placeholder="请输入客户单位名称" clearable
-                @iconClick="iconClick">
-            </uni-easyinput>
+  <view class="con-body">
+    <view class="con-bg">
+      <!-- 头部 -->
+      <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" :style="{ paddingTop: navBarPaddingTop + 'px' }"></view>
 
-		<view class="inner-box">
-			<view class="list-cont">
-				<radio-group class="block" @change="radioChange">
-					<view class="item"   v-for="(item, index) in dataList">
-						<radio class='radio' :value="index" ></radio>
-						<view class="name">{{item.cusName+"（"+item.shortName+"）"}}</view>
-					</view>
-				</radio-group>
-			</view>
-		</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" @clear="searchValue=''"
+          />
+          <!--          <button type="default" @click="searchValue=''" size="mini" class="btn-search">清空</button>-->
         </view>
+
+        <!-- 分页部分  -->
+        <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="white-bg" v-for="(item, index) in list" :key="index" @click="handleDetail(item)">
+              <radio class='radio'
+                     :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>
 </template>
 
 <script setup>
+
+import {ref, onMounted, getCurrentInstance, watch} from 'vue'
 import customHeader from '@/components/customHeader.vue'
-import { getYsCustomerList } from '../../../../api/crm/activity/activity'
-import { onMounted,  reactive, ref, watch } from 'vue'
-import { onLoad } from '@dcloudio/uni-app'
-import { useMessage } from '../../../../utils/message'
+import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
+import {getNavBarPaddingTop} from '@/utils/system.js'
+import {onLoad} from "@dcloudio/uni-app";
+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 queryParams = ref({
-    cusName: '',
-    nickName:'',
-    pageNum: 1,
-    pageSize: 10
-})
+const downOption = ref({
+  auto: true,
+  textInOffset: '下拉刷新',
+  textOutOffset: '释放更新',
+  textLoading: '刷新中...'
+});
 
+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);
+});
 
-
-
-//查询某一客户人员
-let searchContent = ref('')
-
-function iconClick() {
-    message.toast('点击了查询，当前内容：' + searchContent.value)
+// 下拉刷新
+const downCallback = async (mescroll) => {
+  try {
+    const res = await getList(1, upOption.value.page.size);
+    list.value = res.list;
+    // 正确结束下拉刷新状态
+    mescroll.endSuccess(res.list.length, res.total >= upOption.value.page.size);
+  } catch (error) {
+    console.log(error)
+    // 发生错误时结束下拉刷新
+    mescroll.endErr();
+  }
 }
 
-//监视查询的内容的变化
-let queryCusForm = reactive({})
-watch(searchContent,(newValue,oldValue)=>{
-    queryCusForm.cusName = searchContent.value
-    getYsCustomerList(queryCusForm).then(res=>{
-        dataList.value = res.rows
-    })
-})
-
-function radioChange(event) {
-     const selectedIndex = event.detail.value
-    let test = dataList.value[selectedIndex]
-    // 发送全局事件
-    uni.$emit('onCustomerSelected', test)
-    let cusName = test.cusName;//客户名称
-    let cusId = test.cusId;//客户ID
-    uni.navigateBack()//返回上一页
+// 上拉加载更多
+const upCallback = async (mescroll) => {
+  try {
+    const res = await getList(mescroll.num, mescroll.size);
+    if (mescroll.num === 1) {
+      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();
+  }
 }
 
+// 查询搜索跳转
+let handleSearch = async () => {
+  // 触发下拉刷新以重新加载数据
+  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',list.value[selectedIndex])
+  uni.navigateBack()
+}
 
 
 
 </script>
 
-<style scoped lang="scss">
-
-.con-body{
-    background: white;
+<style lang="scss" scoped>
+.all-body {
+  /* #ifdef APP-PLUS */
+  top: 150rpx;
+  height: calc(100vh - 75px);
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  top: 120rpx;
+  height: calc(100vh);
+  /* #endif */
 }
 
-
-/* Container for the checkbox group */
-.checkbox-group.block {
-    width: 100%;
+.search .btn-search {
+  border: none;
+  background: none;
+  line-height: normal;
+  color: #fff;
+  line-height: 56rpx !important;
+  padding: 10rpx 0 0;
+  text-align: left;
+  cursor: pointer;
 }
 
-/* Each item row */
-.itemClass {
-    display: flex;
-    align-items: center;
-    padding: 10rpx 0;
-    margin-left: 15rpx;
-    border-bottom: 1px solid #eee;
-    /* optional divider */
+.search .btn-search::after {
+  display: none;
 }
 
-/* Checkbox styling */
-.checkBoxClass {
-    margin-right: 12rpx;
+.scroll-h {
+  /* #ifdef APP-PLUS */
+  height: calc(100vh - 120px);
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  height: calc(100vh - 110px);
+  /* #endif */
 }
 
-/* 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 {
+.white-bg {
+  //padding-bottom:10rpx;
+  margin-bottom: 0;
+  overflow: hidden;
   display: flex;
   align-items: center;
-  padding: 12px 0;
-  border-bottom: 1px solid #eee;
 }
 
 .radio {
-  margin-right: 12px;
-  transform: scale(0.9);
+  padding-right: 20rpx;
 }
 
-.name {
-  flex: 1;
-  font-size: 16px;
-  color: #333;
+.title {
+  font-size: 32rpx;
+  line-height: 48rpx;
 }
 
-.checked {
-  color: #007AFF; /* 选中状态的颜色 */
+.report-list {
+  width: calc(100% - 70rpx);
+  //background-color: pink;
+}
+
+.border-bottom {
+  margin-top: 6rpx;
 }
 </style>