254 lines
6.2 KiB
Vue
254 lines
6.2 KiB
Vue
<template>
|
||
<view class="page_padding shareUser">
|
||
<view class="shareBody flex flex-col flex-1 overflow-hidden">
|
||
<!-- 搜索 -->
|
||
<view class="search_box">
|
||
<view
|
||
@click="handleClick"
|
||
class="search_view flex-center"
|
||
v-if="!queryParmas.keyword.trim() && Searching"
|
||
>
|
||
<uni-icons type="search" size="34rpx" color="rgba(0,0,0,0.26)"></uni-icons>
|
||
<text>请输入关键字进行搜索</text>
|
||
</view>
|
||
<uni-easyinput
|
||
@blur="handleInput"
|
||
@confirm="handleSearch"
|
||
@clear="handleClear"
|
||
@input="handleClear"
|
||
:focus="true"
|
||
ref="inputRef"
|
||
v-model="queryParmas.keyword"
|
||
v-else
|
||
/>
|
||
</view>
|
||
<!-- 已经选择人数 -->
|
||
<view class="checkoutedUser_box">
|
||
<text>已选({{ checkoutUserid ? 1 : 0 }}/1)</text>
|
||
<text class="checkoutUseName" v-if="checkoutInfo">{{ checkoutInfo.nickName }}</text>
|
||
</view>
|
||
<!-- srcoll -->
|
||
<scroll-view scroll-y="true" class="flex-1 overflow-auto">
|
||
<radio-group @change="radioChange">
|
||
<label v-for="(item, index) in searchlist" :key="index">
|
||
<view
|
||
class="item flex items-center justify-between"
|
||
:class="{
|
||
active: checkoutUserid === item.userId
|
||
}"
|
||
>
|
||
<view class="">
|
||
<view class="info">
|
||
<text>姓名：</text>
|
||
<text>{{ item.nickName }}</text>
|
||
</view>
|
||
<view class="info">
|
||
<text>角色：</text>
|
||
<text>{{ item.roleName }}</text>
|
||
</view>
|
||
<view class="info">
|
||
<text>手机号码：</text>
|
||
<text>{{ item.phonenumber }}</text>
|
||
</view>
|
||
</view>
|
||
<radio color="#4d5dfa" :value="item.userId" />
|
||
</view>
|
||
</label>
|
||
</radio-group>
|
||
</scroll-view>
|
||
|
||
<!-- submit -->
|
||
<view class="action_btn" @tap="handleSelecthouse">
|
||
<text>确定派单</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, getCurrentInstance } from 'vue'
|
||
import navBar from '@/components/navbar/navbar.vue'
|
||
import { getSystemUsers_employee } from '@/api/common.js'
|
||
import { onShow } from '@dcloudio/uni-app'
|
||
|
||
const Searching = ref(true)
|
||
/** 点击时切换到input,并聚焦 */
|
||
function handleClick() {
|
||
Searching.value = false
|
||
}
|
||
/** 判断 失去焦点时 切换回 view */
|
||
function handleInput() {
|
||
if (queryParmas.value.keyword.trim()) {
|
||
Searching.value = true
|
||
resetList()
|
||
} else {
|
||
queryParmas.value.keyword = ''
|
||
Searching.value = false
|
||
resetList()
|
||
}
|
||
}
|
||
function handleSearch() {
|
||
if (queryParmas.value.keyword.trim()) {
|
||
resetList()
|
||
}
|
||
}
|
||
function handleClear() {
|
||
if (queryParmas.value.keyword.trim() === '') {
|
||
queryParmas.value.keyword = ''
|
||
Searching.value = true
|
||
resetList()
|
||
}
|
||
}
|
||
// -----------------------------------------
|
||
/* 选择列表 */
|
||
const searchlist = ref([])
|
||
|
||
const queryParmas = ref({
|
||
keyword: '',
|
||
roleKey: 'repair'
|
||
})
|
||
const isLoading = ref(false) // 加载锁
|
||
const hasMore = ref(true) // 是否还有更多数据
|
||
|
||
function getlist() {
|
||
// 1. 如果正在加载或没有更多数据，直接返回
|
||
if (isLoading.value) return
|
||
// 2. 开启锁
|
||
isLoading.value = true
|
||
const { keyword, roleKey } = queryParmas.value
|
||
getSystemUsers_employee(roleKey, keyword)
|
||
.then(res => {
|
||
searchlist.value = res.data
|
||
})
|
||
.catch(() => {
|
||
uni.showToast({
|
||
icon: 'error',
|
||
title: '网络异常'
|
||
})
|
||
})
|
||
.finally(() => {
|
||
isLoading.value = false
|
||
})
|
||
}
|
||
|
||
onShow(() => {
|
||
resetList()
|
||
})
|
||
|
||
function resetList() {
|
||
searchlist.value = []
|
||
queryParmas.value.pageNum = 1
|
||
getlist()
|
||
}
|
||
//searchlist----------------------
|
||
const checkoutUserid = ref(null)
|
||
const checkoutInfo = ref(null)
|
||
function radioChange(val) {
|
||
checkoutUserid.value = val.detail.value
|
||
const find = searchlist.value.find(item => item.userId === val.detail.value)
|
||
if (find) {
|
||
checkoutInfo.value = find
|
||
}
|
||
}
|
||
// ===========================================
|
||
let eventChannel = null
|
||
// 必须在 onMounted 里获取
|
||
onMounted(() => {
|
||
const instance = getCurrentInstance().proxy
|
||
if (instance && instance.getOpenerEventChannel) {
|
||
eventChannel = instance.getOpenerEventChannel()
|
||
}
|
||
})
|
||
/* 确定派单 */
|
||
function handleSelecthouse() {
|
||
// api
|
||
if (eventChannel) {
|
||
eventChannel.emit('backData', {
|
||
checkoutUserid: checkoutUserid.value
|
||
})
|
||
// 3. 返回上一页
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
// ===========================================
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.shareUser {
|
||
background-color: #f9f9f9;
|
||
height: 100vh;
|
||
|
||
.shareBody {
|
||
padding: 0 40rpx;
|
||
|
||
.search_box {
|
||
height: 80rpx;
|
||
.search_view {
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
background: #f3f3f3;
|
||
border-radius: 8rpx;
|
||
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: rgba(0, 0, 0, 0.26);
|
||
line-height: 48rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
// 选择人数
|
||
.checkoutedUser_box {
|
||
margin-top: 20rpx;
|
||
margin-bottom: 40rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 36rpx;
|
||
height: 36rpx;
|
||
.checkoutUseName {
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
// 角色列表
|
||
.item {
|
||
height: 170rpx;
|
||
background: #ffffff;
|
||
border: 1rpx solid transparent;
|
||
margin-bottom: 20rpx;
|
||
padding-left: 26rpx;
|
||
padding-right: 32rpx;
|
||
.info {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 36rpx;
|
||
height: 36rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
&:deep(radio) {
|
||
transform: scale(0.68);
|
||
}
|
||
&.active {
|
||
background: #f5faff;
|
||
border: 1rpx solid #4d5dfa;
|
||
}
|
||
}
|
||
|
||
// 确定派单
|
||
.action_btn {
|
||
width: 670rpx;
|
||
height: 80rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #ffffff;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
margin-top: 20rpx;
|
||
background: #4d5dfa;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|