251 lines
6.3 KiB
Vue
251 lines
6.3 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.value.trim() && Searching"
|
||
>
|
||
<uni-icons type="search" size="34rpx" color="rgba(0,0,0,0.26)"></uni-icons>
|
||
<text>请输入关键字进行搜索</text>
|
||
</view>
|
||
<uni-easyinput
|
||
@blur="handleInput"
|
||
@change="handleSearch"
|
||
:focus="true"
|
||
ref="inputRef"
|
||
v-model="queryParmas.value"
|
||
v-else
|
||
/>
|
||
</view>
|
||
<!-- 已经选择人数 -->
|
||
<view class="checkoutedUser_box">
|
||
<text>已选({{ checkoutUserid ? 1 : 0 }}/1)</text>
|
||
<text class="checkoutUseName" v-if="checkoutInfo">{{ checkoutInfo.name }}</text>
|
||
</view>
|
||
<!-- srcoll -->
|
||
<scroll-view
|
||
scroll-y="true"
|
||
class="flex-1 overflow-auto"
|
||
lower-threshold="60"
|
||
@scrolltolower="scrolltolower"
|
||
>
|
||
<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.id
|
||
}"
|
||
>
|
||
<view class="">
|
||
<view class="info">
|
||
<text>姓名：</text>
|
||
<text>{{ item.name }}</text>
|
||
</view>
|
||
<view class="info">
|
||
<text>角色：</text>
|
||
<text>{{ item.roleName }}</text>
|
||
</view>
|
||
<view class="info">
|
||
<text>手机号码：</text>
|
||
<text>{{ item.phone }}</text>
|
||
</view>
|
||
</view>
|
||
<radio color="#4d5dfa" :value="item.id" />
|
||
</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'
|
||
const Searching = ref(true)
|
||
/** 点击时切换到input,并聚焦 */
|
||
function handleClick() {
|
||
Searching.value = false
|
||
}
|
||
/** 判断 失去焦点时 切换回 view */
|
||
function handleInput() {
|
||
if (queryParmas.value.value.trim()) {
|
||
Searching.value = true
|
||
}
|
||
}
|
||
function handleSearch() {}
|
||
// -----------------------------------------
|
||
/* 选择列表 */
|
||
const searchlist = ref([])
|
||
|
||
const queryParmas = ref({
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
value: ''
|
||
})
|
||
const isLoading = ref(false) // 加载锁
|
||
const hasMore = ref(true) // 是否还有更多数据
|
||
const total = ref(21)
|
||
function scrolltolower() {
|
||
// 必须加这两个判断！
|
||
if (isLoading.value || !hasMore.value) {
|
||
return
|
||
}
|
||
queryParmas.value.pageNum += 1
|
||
getlist()
|
||
}
|
||
function getlist() {
|
||
// 1. 如果正在加载或没有更多数据，直接返回
|
||
if (isLoading.value || !hasMore.value) return
|
||
// 2. 开启锁
|
||
isLoading.value = true
|
||
uni.showLoading({
|
||
title: '加载中',
|
||
mask: true
|
||
})
|
||
const { pageNum, pageSize } = queryParmas.value
|
||
|
||
const startId = (pageNum - 1) * pageSize + 1
|
||
const arr = Array.from({ length: pageSize }).map((_, index) => {
|
||
const realId = startId + index
|
||
const randomStatus = Math.floor(Math.random() * 3)
|
||
return {
|
||
name: '张三' + realId,
|
||
roleName: '维修人员',
|
||
phone: '19578012123',
|
||
id: realId
|
||
}
|
||
})
|
||
// 追加数据（正确方式）
|
||
searchlist.value = [...searchlist.value, ...arr]
|
||
// 判断是否还有更多
|
||
hasMore.value = searchlist.value.length < total.value
|
||
isLoading.value = false
|
||
uni.hideLoading()
|
||
}
|
||
getlist()
|
||
function resetList() {
|
||
reportRecords.value = []
|
||
queryParmas.value.pageNum = 1
|
||
hasMore.value = true
|
||
getlist()
|
||
}
|
||
//searchlist----------------------
|
||
const checkoutUserid = ref(null)
|
||
const checkoutInfo = ref(null)
|
||
function radioChange(val) {
|
||
checkoutUserid.value = Number(val.detail.value)
|
||
const find = searchlist.value.find(item => item.id === Number(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
|
||
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>
|