196 lines
4.5 KiB
Vue
196 lines
4.5 KiB
Vue
<template>
|
||
<view class="page_container checkouthouse_box flex flex-col">
|
||
<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="search_list flex-1 flex">
|
||
<scroll-view lower-threshold="160" scroll-y="true" @scrolltolower="scrolltolower">
|
||
<radio-group @change="radioChange">
|
||
<label v-for="(item, index) in searchlist" :key="index">
|
||
<view
|
||
class="search_item flex flex-between"
|
||
:class="{
|
||
active: checkoutHouseid === item.id
|
||
}"
|
||
>
|
||
<view class="flex items-center flex-1">
|
||
<!-- checkout -->
|
||
<radio color="#4d5dfa" :value="item.id" />
|
||
<!-- housename -->
|
||
<text class="address">{{ item.address }}</text>
|
||
</view>
|
||
<!-- username -->
|
||
<view class="username">{{ item.username }}</view>
|
||
</view>
|
||
</label>
|
||
</radio-group>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<view class="action_btn" @tap="handleSelecthouse">
|
||
<text>确 认</text>
|
||
</view>
|
||
</view>
|
||
<!-- 滚动 高度如何计算？ -->
|
||
</template>
|
||
<script setup>
|
||
import { ref, getCurrentInstance, onMounted } from 'vue'
|
||
const Searching = ref(true)
|
||
const queryParmas = ref({
|
||
value: '',
|
||
|
||
pageNum: 1,
|
||
pageSize: 12
|
||
})
|
||
/** 点击时切换到input,并聚焦 */
|
||
function handleClick() {
|
||
Searching.value = false
|
||
}
|
||
/** 判断 失去焦点时 切换回 view */
|
||
function handleInput() {
|
||
if (queryParmas.value.value.trim()) {
|
||
Searching.value = true
|
||
}
|
||
}
|
||
function handleSearch() {
|
||
console.log('search')
|
||
}
|
||
|
||
const checkoutHouseid = ref(null)
|
||
/** 选择房屋,返回id*/
|
||
function radioChange(res) {
|
||
checkoutHouseid.value = Number(res.detail.value)
|
||
}
|
||
//
|
||
const searchlist = ref()
|
||
|
||
function getlist() {
|
||
const allnum = queryParmas.value.pageNum * queryParmas.value.pageSize
|
||
|
||
if (allnum < 50) {
|
||
searchlist.value = Array.from({ length: allnum }).map((_, index) => {
|
||
return {
|
||
address: 'A栋3单元301',
|
||
username: '里番',
|
||
id: index + 1
|
||
}
|
||
})
|
||
}
|
||
}
|
||
getlist()
|
||
|
||
function scrolltolower() {
|
||
queryParmas.value.pageNum += 1
|
||
getlist()
|
||
}
|
||
|
||
let eventChannel = null
|
||
// 必须在 onMounted 里获取
|
||
onMounted(() => {
|
||
const instance = getCurrentInstance().proxy
|
||
if (instance && instance.getOpenerEventChannel) {
|
||
eventChannel = instance.getOpenerEventChannel()
|
||
}
|
||
})
|
||
|
||
function handleSelecthouse() {
|
||
// 2. 发送数据 (触发 A 页面定义的 'backData' 事件)
|
||
console.log(eventChannel)
|
||
eventChannel.emit('backData', {
|
||
Houseid: checkoutHouseid.value,
|
||
HouseName: 'A栋3单元301'
|
||
})
|
||
// 3. 返回上一页
|
||
uni.navigateBack()
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.checkouthouse_box {
|
||
background: #f9f9f9;
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.search_list {
|
||
height: 100%;
|
||
margin-top: 20rpx;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
.search_item {
|
||
height: 116rpx;
|
||
margin-bottom: 20rpx;
|
||
background-color: #ffffff;
|
||
box-sizing: border-box;
|
||
padding: 40rpx;
|
||
padding-right: 0;
|
||
|
||
&:deep(radio) {
|
||
transform: scale(0.68);
|
||
}
|
||
.address {
|
||
margin-left: 20rpx;
|
||
font-weight: 550;
|
||
font-size: 32rpx;
|
||
color: #222222;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
.username {
|
||
font-weight: 550;
|
||
font-size: 32rpx;
|
||
color: #222222;
|
||
line-height: 40rpx;
|
||
width: 180rpx;
|
||
text-align: left;
|
||
}
|
||
&.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>
|