ys-app/src/pages/business/CRM/chooseCus.vue

<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">
        <!-- 搜索框 -->
        <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=''"
          />
        </view>

        <!-- 列表区域 -->
        <view class="scroll-h" :class="{'loading-scroll':cssFlag}">
          <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-name">{{ item.shortName }}</view>
              </view>
            </view>
          </radio-group>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import customHeader from '@/components/customHeader.vue'
import { getYsCustomerList } from '../../../api/crm/api_ys.js'
import { onMounted, reactive, ref, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useMessage } from '../../../utils/message.js'

const message = useMessage();

// 获取导航栏高度用于内容区域padding
const navBarPaddingTop = ref(0);

// 点击查询客户单位
const queryParams = ref({
    cusName: '',
    nickName:'',
    pageNum: 1,
    pageSize: 10
})

onLoad(options => {
    queryParams.value.cusName = options.cusName
})
const dataList = ref([])

// 搜索内容
let searchContent = ref('')

// 选中项的索引号
const selectIndex = ref(null);

let timerId = null;
// 监视查询的内容的变化
let queryCusForm = reactive({})
watch(searchContent, (newValue, oldValue) => {
    if(timerId) clearTimeout(timerId);
    timerId = setTimeout(async ()=>{
        queryCusForm.cusName = newValue;
        const res = await getYsCustomerList(queryCusForm);
        dataList.value = res.rows;
        clearTimeout(timerId);
        timerId = null;
    }, 500);
});

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()//返回上一页
}

onMounted(() => {
    navBarPaddingTop.value = 80; // 简化处理，实际应根据getNavBarPaddingTop()计算
})

</script>
<style lang="scss" scoped>
.con-body {
  background: white;
  height: 100vh;
}

.con-bg {
  background: #f5f5f5;
  height: 100%;
}

.top-height {
  height: 80rpx;
}

.head-right {
  display: flex;
  align-items: center;
  color: #B7D2FF;
  font-size: 14px;
  padding-right: 20rpx;
}

.all-body {
  padding: 0 20rpx;
  box-sizing: border-box;
}

.search {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.custom-search {
  flex: 1;
}

.btn-search {
  border: none;
  background: none;
  line-height: normal;
  color: #fff;
  line-height: 56rpx !important;
  padding: 10rpx 0 0;
  text-align: left;
  cursor: pointer;
}

.scroll-h {
  height: calc(100vh - 250rpx);
  overflow-y: auto;
}

.white-bg {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
}

.radio {
  margin-right: 20rpx;
}

.report-list {
  flex: 1;
}

.title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.r-name {
  font-size: 26rpx;
  color: #666;
}

.checked {
  color: #007AFF;
}

/* 适配不同平台 */
/* #ifdef APP-PLUS */
.all-body {
  top: 150rpx;
  height: calc(100vh - 75px);
}
/* #endif */

/* #ifndef APP-PLUS */
.all-body {
  top: 120rpx;
  height: calc(100vh);
}
/* #endif */
</style>