From b5d6d4496f8a4a818b4d7b0c7fe65043ce098ee3 Mon Sep 17 00:00:00 2001
From: wangzhuo <wangzhuo03@sevenstatr.com>
Date: Tue, 12 Aug 2025 20:39:25 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=B8=8B=E6=8B=89=E5=88=B7=E6=96=B0?=
 =?UTF-8?q?=E3=80=81=E4=B8=8A=E6=8B=89=E5=8A=A0=E8=BD=BD=E6=9B=B4=E5=A4=9A?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../business/CRM/customer/selectCustomer.vue  | 265 ++++++++++++++++++
 1 file changed, 265 insertions(+)
 create mode 100644 src/pages/business/CRM/customer/selectCustomer.vue

diff --git a/src/pages/business/CRM/customer/selectCustomer.vue b/src/pages/business/CRM/customer/selectCustomer.vue
new file mode 100644
index 0000000..591053b
--- /dev/null
+++ b/src/pages/business/CRM/customer/selectCustomer.vue
@@ -0,0 +1,265 @@
+<template>
+  <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="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="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?true:false"
+                     :value="item"
+                     :data-index="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 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 upOption = ref({
+  page: { num: 0, size: 10 },
+  noMoreSize: 5,
+  empty: { tip: '~ 空空如也 ~' },
+  textLoading: '加载中...',
+  textNoMore: '已经到底了'
+});
+
+const downOption = ref({
+  auto: true,
+  textInOffset: '下拉刷新',
+  textOutOffset: '释放更新',
+  textLoading: '刷新中...'
+});
+
+const mescrollInit = (mescroll) => {
+  cssFlag.value = true;
+  mescrollRef.value = mescroll;
+};
+
+onMounted(() => {
+  navBarPaddingTop.value = getNavBarPaddingTop() * 2;
+})
+
+
+onLoad((options)=>{
+  instance = getCurrentInstance().proxy;
+  const eventChannel = instance.getOpenerEventChannel();
+  eventChannel.on('requestCusList', async (res) => {
+      let {cusName} = res.data;
+      // console.log(cusName, "客户选择页读取到参数");
+      searchValue.value = cusName;
+  })
+})
+
+let timerId = null;
+// 搜索
+watch(searchValue, (newValue, oldValue) => {
+  // console.log(`新值: ${newValue}, 旧值: ${oldValue}`);
+  if(!timerId) clearTimeout(timerId);
+  cssFlag.value = true;
+  timerId = setTimeout(async ()=>{
+     handleSearch();
+     clearTimeout(timerId);
+    timerId = null;
+  }, 500);
+});
+
+// 下拉刷新
+const downCallback = async (mescroll) => {
+  try {
+    const res = await getList(1, upOption.value.page.size);
+    cssFlag.value = false;
+    list.value = res.list;
+    // 正确结束下拉刷新状态
+    mescroll.endSuccess(res.list.length, res.total >= upOption.value.page.size);
+  } catch (error) {
+    // 发生错误时结束下拉刷新
+    mescroll.endErr();
+  }
+}
+
+// 上拉加载更多
+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) {
+    // 发生错误时结束上拉加载
+    mescroll.endErr();
+  }
+}
+
+// 查询搜索跳转
+let handleSearch = () => {
+  // 触发下拉刷新以重新加载数据
+  if (mescrollRef.value) {
+    downCallback(mescrollRef.value.mescroll);
+  }
+}
+// 获取数据列表
+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) => {
+  let {value} = e.detail;
+  let {index} = e.target.dataset;
+  // console.log(value);
+  // console.log(e.target.dataset);
+  const eventChannel = instance.getOpenerEventChannel();
+  eventChannel.emit('cuSelected', value);
+  uni.navigateBack()
+}
+
+</script>
+
+<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 */
+}
+
+.search {
+  display: flex;
+}
+
+.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;
+}
+
+.search .btn-search::after {
+  display: none;
+}
+
+.search .custom-search {
+  width: 80%;
+
+}
+
+.search .custom-search.uni-searchbar {
+  padding-right: 0 !important;
+}
+
+.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;
+}
+
+.radio {
+  padding-right: 20rpx;
+}
+
+.title {
+  font-size: 32rpx;
+  line-height: 48rpx;
+}
+
+.report-list {
+  width: calc(100% - 70rpx);
+  //background-color: pink;
+}
+
+.border-bottom {
+  margin-top: 6rpx;
+}
+</style>
\ No newline at end of file