客户选择样式问题提交

src/pages/business/CRM/chooseCus.vue

@@ -16,20 +16,16 @@
 
       <!-- 正文内容 -->
       <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"
+        <view class="scroll-h" :class="{'loading-scroll':cssFlag}">
-                      :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'
@@ -40,171 +36,115 @@
 
               <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 MescrollUni from 'mescroll-uni/mescroll-uni.vue';
+import { getYsCustomerList } from '../../../api/crm/api_ys.js'
-import {getNavBarPaddingTop} from '@/utils/system.js'
+import { onMounted, reactive, ref, watch } from 'vue'
-import {onLoad} from "@dcloudio/uni-app";
+import { onLoad } from '@dcloudio/uni-app'
-import {getCustomerList} from "@/api/crm/customer/getCustomer";
+import { useMessage } from '../../../utils/message.js'
+
+const message = useMessage();
 
-let instance = null;
 // 获取导航栏高度用于内容区域padding
 const navBarPaddingTop = ref(0);
-// 查询列表
-let list = ref([]);
-const mescrollRef = ref(null);
-let searchValue = ref('')
 
-let cssFlag=ref(false);//控制样式
+// 点击查询客户单位
-
+const queryParams = ref({
-const upOption = ref({
+    cusName: '',
-  page: { num: 0, size: 10 },
+    nickName:'',
-  noMoreSize: 5,
+    pageNum: 1,
-  empty: { 
+    pageSize: 10
-      tip: '~ 空空如也 ~',
-      icon: "../../static/images/mescroll-empty.png"
-  },
-  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 => {
+    queryParams.value.cusName = options.cusName
+})
+const dataList = ref([])
 
-onLoad((options)=>{
+// 搜索内容
-  instance = getCurrentInstance().proxy;
+let searchContent = ref('')
-  const eventChannel = instance.getOpenerEventChannel();
+
-  eventChannel.on('requestCusList', async (res) => {
+// 选中项的索引号
-      let {cusName} = res.data;
+const selectIndex = ref(null);
-      // console.log(cusName, "客户选择页读取到参数");
-      searchValue.value = cusName;
-  })
-})
 
 let timerId = null;
-// 搜索
+// 监视查询的内容的变化
-watch(searchValue, (newValue, oldValue) => {
+let queryCusForm = reactive({})
-  // console.log(`新值: ${newValue}, 旧值: ${oldValue}`);
+watch(searchContent, (newValue, oldValue) => {
     if(timerId) clearTimeout(timerId);
     timerId = setTimeout(async ()=>{
-     handleSearch();
+        queryCusForm.cusName = newValue;
+        const res = await getYsCustomerList(queryCusForm);
+        dataList.value = res.rows;
         clearTimeout(timerId);
         timerId = null;
     }, 500);
 });
 
-// 下拉刷新
+function radioChange(event) {
-const downCallback = async (mescroll) => {
+     const selectedIndex = event.detail.value
-  try {
+    let test = dataList.value[selectedIndex]
-    const res = await getList(1, upOption.value.page.size);
+    // 发送全局事件
-    list.value = res.list;
+    uni.$emit('onCustomerSelected', test)
-    // 正确结束下拉刷新状态
+    let cusName = test.cusName;//客户名称
-    mescroll.endSuccess(res.list.length, res.total >= upOption.value.page.size);
+    let cusId = test.cusId;//客户ID
-  } catch (error) {
+    uni.navigateBack()//返回上一页
-    console.log(error)
-    // 发生错误时结束下拉刷新
-    mescroll.endErr();
-  }
 }
 
-// 上拉加载更多
+onMounted(() => {
-const upCallback = async (mescroll) => {
+    navBarPaddingTop.value = 80; // 简化处理，实际应根据getNavBarPaddingTop()计算
-  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) => {
-  let {value} = e.detail; // index
-  // console.log(value);
-  const eventChannel = instance.getOpenerEventChannel();
-  eventChannel.emit('onCustomerSelected', list.value[value]);
-  uni.navigateBack()
-}
 
 </script>
-
 <style lang="scss" scoped>
-.all-body {
+.con-body {
-  /* #ifdef APP-PLUS */
+  background: white;
-  top: 150rpx;
+  height: 100vh;
-  height: calc(100vh - 75px);
-  /* #endif */
-  /* #ifndef APP-PLUS */
-  top: 120rpx;
-  height: calc(100vh);
-  /* #endif */
 }
 
-.search .btn-search {
+.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;
@@ -215,42 +155,57 @@ const radioChange = (e) => {
   cursor: pointer;
 }
 
-.search .btn-search::after {
-  display: none;
-}
-
 .scroll-h {
-  /* #ifdef APP-PLUS */
+  height: calc(100vh - 250rpx);
-  height: calc(100vh - 120px);
+  overflow-y: auto;
-  /* #endif */
-  /* #ifndef APP-PLUS */
-  height: calc(100vh - 110px);
-  /* #endif */
 }
 
 .white-bg {
-  //padding-bottom:10rpx;
+  background-color: #fff;
-  margin-bottom: 0;
+  border-radius: 12rpx;
-  overflow: hidden;
+  padding: 24rpx;
+  margin-bottom: 20rpx;
   display: flex;
   align-items: center;
+  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
 }
 
 .radio {
-  padding-right: 20rpx;
+  margin-right: 20rpx;
+}
+
+.report-list {
+  flex: 1;
 }
 
 .title {
   font-size: 32rpx;
-  line-height: 48rpx;
+  color: #333;
+  font-weight: bold;
+  margin-bottom: 8rpx;
 }
 
-.report-list {
+.r-name {
-  width: calc(100% - 70rpx);
+  font-size: 26rpx;
-  //background-color: pink;
+  color: #666;
 }
 
-.border-bottom {
+.checked {
-  margin-top: 6rpx;
+  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>