170 lines
3.3 KiB
Vue
170 lines
3.3 KiB
Vue
<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="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>
|
||
</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();
|
||
|
||
//点击查询客户人员
|
||
const queryParams = ref({
|
||
cusName: '',
|
||
nickName:'',
|
||
pageNum: 1,
|
||
pageSize: 10
|
||
})
|
||
|
||
|
||
onMounted(() => {
|
||
|
||
})
|
||
|
||
onLoad(options => {
|
||
queryParams.value.cusName = options.cusName
|
||
})
|
||
const dataList = ref([])
|
||
|
||
|
||
|
||
|
||
//查询某一客户人员
|
||
let searchContent = ref('')
|
||
|
||
function iconClick() {
|
||
message.toast('点击了查询，当前内容：' + searchContent.value)
|
||
}
|
||
|
||
//监视查询的内容的变化
|
||
let queryCusForm = reactive({})
|
||
watch(searchContent,(newValue,oldValue)=>{
|
||
console.log("输入内容：",searchContent.value)
|
||
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()//返回上一页
|
||
}
|
||
|
||
|
||
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
|
||
.con-body{
|
||
background: white;
|
||
}
|
||
|
||
|
||
/* Container for the checkbox group */
|
||
.checkbox-group.block {
|
||
width: 100%;
|
||
}
|
||
|
||
/* Each item row */
|
||
.itemClass {
|
||
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;
|
||
transform: scale(0.9);
|
||
}
|
||
|
||
.name {
|
||
flex: 1;
|
||
font-size: 16px;
|
||
color: #333;
|
||
}
|
||
|
||
.checked {
|
||
color: #007AFF; /* 选中状态的颜色 */
|
||
}
|
||
</style> |