371 lines
10 KiB
Vue
371 lines
10 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="index-image" style="position: absolute; top: -30px; right: 30rpx;z-index: 999;">
|
||
<img src="/static/images/history.png" mode="aspectFill" width="100%" height="100%" @click="toHistory"/>
|
||
</view>
|
||
<uni-card>
|
||
<view class="uni-list-cell">
|
||
<view class="uni-list-cell-left">
|
||
物业名称<text class="require">*</text>
|
||
</view>
|
||
<view class="uni-list-cell-db">
|
||
<input
|
||
class="uni-input"
|
||
v-model="addForm.building_name"
|
||
maxlength="50"
|
||
placeholder="请输入，最多50字"
|
||
@input="handleBuildingNameInput"
|
||
/>
|
||
<div
|
||
v-show="estateOptions.length > 0"
|
||
class="property-dropdown border-1px"
|
||
>
|
||
<div v-if="estateLoading" class="loading-indicator">
|
||
<i class="el-icon-loading"></i> 加载中...
|
||
</div>
|
||
<ul v-else>
|
||
<li
|
||
v-for="estate in estateOptions"
|
||
:key="estate.lp_id"
|
||
@click="selectEstate(estate, index)"
|
||
class="property-option"
|
||
>
|
||
<div
|
||
:content="estate.loupan_name"
|
||
placement="top"
|
||
:open-delay="0"
|
||
>
|
||
<span>{{ estate.loupan_name }}</span>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</view>
|
||
</view>
|
||
<view class="uni-list-cell">
|
||
<view class="uni-list-cell-left">
|
||
栋号<text class="require">*</text>
|
||
</view>
|
||
<view class="uni-list-cell-db">
|
||
<input
|
||
class="uni-input"
|
||
v-model="addForm.building_no"
|
||
maxlength="15"
|
||
placeholder="请输入"
|
||
@input="handleBuildingInput(index)"
|
||
/>
|
||
<div
|
||
v-show="buildingOptions.length > 0"
|
||
class="property-dropdown"
|
||
>
|
||
<div v-if="buildingLoading" class="loading-indicator">
|
||
<i class="el-icon-loading"></i> 加载中...
|
||
</div>
|
||
<ul v-else>
|
||
<li
|
||
v-for="building in buildingOptions"
|
||
:key="building.b_id"
|
||
@click="selectBuilding(building, index)"
|
||
class="property-option"
|
||
>
|
||
<div
|
||
:content="building.building_name"
|
||
placement="top"
|
||
:open-delay="0"
|
||
>
|
||
<span>{{ building.building_name }}</span>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</view>
|
||
</view>
|
||
<view class="uni-list-cell">
|
||
<view class="uni-list-cell-left">
|
||
房号<text class="require">*</text>
|
||
</view>
|
||
<view class="uni-list-cell-db">
|
||
<input
|
||
class="uni-input"
|
||
v-model="addForm.unit_no"
|
||
maxlength="15"
|
||
placeholder="请输入"
|
||
@input="handleUnitNoInput($event, index)"
|
||
/>
|
||
<div
|
||
v-show="unitOptions.length > 0"
|
||
class="property-dropdown"
|
||
>
|
||
<div v-if="unitLoading" class="loading-indicator">
|
||
<i class="el-icon-loading"></i> 加载中...
|
||
</div>
|
||
<ul v-else>
|
||
<li
|
||
v-for="unit in unitOptions"
|
||
:key="unit.h_id"
|
||
@click="selectUnit(unit, index)"
|
||
class="property-option"
|
||
>
|
||
<div
|
||
:content="unit.house_number"
|
||
placement="top"
|
||
:open-delay="0"
|
||
>
|
||
<span>{{ unit.house_number }}</span>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</view>
|
||
</view>
|
||
<view class="uni-list-cell">
|
||
<view class="uni-list-cell-left">
|
||
建筑面积（m²）<text class="require">*</text>
|
||
</view>
|
||
<view class="uni-list-cell-db">
|
||
<input
|
||
class="uni-input"
|
||
style="box-sizing: border-box; height: 100%"
|
||
v-model="addForm.size"
|
||
placeholder="请输入"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view class="uni-list-button">
|
||
<button
|
||
:loading="loading"
|
||
open-type=""
|
||
hover-class="button-hover"
|
||
style="color:#00CC66; background-color: #fff; border: 1px solid #00CC66"
|
||
@click="submitForm"
|
||
>
|
||
提交
|
||
</button>
|
||
</view>
|
||
<view class="uni-list-mobile" @click="toMobile">
|
||
试试人工评房
|
||
</view>
|
||
</uni-card>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getEstateListByName,
|
||
getBuildingListByBName,
|
||
getPropertyListByBid,
|
||
autoInquiry
|
||
} from "api/inquiry/inquiry";
|
||
|
||
export default {
|
||
name: "Index",
|
||
components: {
|
||
},
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
estateOptions: [],
|
||
estateLoading: false,
|
||
buildingOptions: [],
|
||
buildingLoading: false,
|
||
unitOptions: [],
|
||
unitLoading: false,
|
||
addForm: {
|
||
building_name: "",
|
||
building_no: "",
|
||
unit_no: "",
|
||
size: "",
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
handleBuildingNameInput(item) {
|
||
this.estateOptions = [];
|
||
this.buildingOptions = [];
|
||
const value = item.detail.value;
|
||
if (!value) {
|
||
this.estateOptions = [];
|
||
return;
|
||
}
|
||
|
||
this.estateLoading = true;
|
||
// 使用正确的API获取物业数据
|
||
getEstateListByName({ name: value })
|
||
.then((res) => {
|
||
this.estateLoading = false;
|
||
if (res.code === 1 && res.data && res.data.length > 0) {
|
||
this.estateOptions = res.data;
|
||
} else {
|
||
this.estateOptions = [];
|
||
}
|
||
})
|
||
.catch(() => {
|
||
this.estateLoading = false;
|
||
this.estateOptions = [];
|
||
});
|
||
},
|
||
selectEstate(estate, index) {
|
||
this.addForm.building_name = estate.loupan_name;
|
||
this.addForm.lp_id = estate.lp_id;
|
||
|
||
// 清空其他字段
|
||
this.addForm.building_no = "";
|
||
this.addForm.unit_no = "";
|
||
// 获取栋号列表
|
||
this.estateOptions = [];
|
||
//获取栋号列表
|
||
this.handleBuildingInput(index);
|
||
},
|
||
handleBuildingInput(index) {
|
||
const estate = this.addForm;
|
||
if (estate && estate.building_name) {
|
||
this.buildingLoading = true;
|
||
getBuildingListByBName({
|
||
bname: estate.building_no,
|
||
lpid: estate.lp_id,
|
||
})
|
||
.then((res) => {
|
||
// 添加 500ms 延迟
|
||
setTimeout(() => {
|
||
this.buildingLoading = false;
|
||
if (res.code === 1 && res.data && res.data.length > 0) {
|
||
this.buildingOptions = res.data;
|
||
} else {
|
||
this.buildingOptions = [];
|
||
}
|
||
}, 500); // 延迟 500 毫秒
|
||
})
|
||
.catch(() => {
|
||
this.buildingLoading = false;
|
||
this.buildingOptions = [];
|
||
});
|
||
}
|
||
},
|
||
selectBuilding(building, index) {
|
||
this.addForm.building_no = building.building_name;
|
||
this.addForm.b_id = building.b_id;
|
||
|
||
this.buildingOptions = [];
|
||
},
|
||
handleUnitNoInput(value, index) {
|
||
console.log("value", value);
|
||
if (!value.detail.value) {
|
||
this.unitOptions = [];
|
||
return;
|
||
}
|
||
this.unitLoading = true;
|
||
let item = this.addForm;
|
||
// 添加 500ms 延迟
|
||
getPropertyListByBid({ bid: item.b_id, hno: item.unit_no })
|
||
.then((res) => {
|
||
setTimeout(() => {
|
||
this.unitLoading = false;
|
||
if (res.code === 1 && res.data && res.data.length > 0) {
|
||
this.unitOptions = res.data;
|
||
} else {
|
||
this.unitOptions = [];
|
||
}
|
||
}, 500); // 延迟 500 毫秒
|
||
})
|
||
.catch(() => {
|
||
this.unitLoading = false;
|
||
this.unitOptions = [];
|
||
});
|
||
},
|
||
selectUnit(unit, index) {
|
||
this.addForm.unit_no = unit.house_number;
|
||
this.unitOptions = [];
|
||
},
|
||
submitForm() {
|
||
this.loading = true;
|
||
autoInquiry(this.addForm)
|
||
.then((res) => {
|
||
this.loading = false;
|
||
if (res.code === 1) {
|
||
this.$tab.navigateTo("/pages/automatic/detail?info=" + encodeURIComponent(JSON.stringify(res.data)));
|
||
console.log("res",res.data);
|
||
}
|
||
})
|
||
.catch(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
toMobile() {
|
||
uni.makePhoneCall({
|
||
phoneNumber: '075583279666', //仅为示例
|
||
success: function () {
|
||
console.log('拨打电话成功');
|
||
},
|
||
fail: function () {
|
||
console.log('拨打电话失败');
|
||
}
|
||
});
|
||
},
|
||
toHistory() {
|
||
this.$tab.navigateTo("/pages/automatic/list");
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 93vh;
|
||
background-color: #fff;
|
||
}
|
||
|
||
/* 将 mask 缩小到一行 */
|
||
.uni-popup-mask {
|
||
height: 1px;
|
||
}
|
||
/* 将 mask 演示为浅蓝色 */
|
||
.uni-popup-mask::before {
|
||
background-color: #e6f1ff;
|
||
}
|
||
.uni-list-cell {
|
||
line-height: 90rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.uni-input {
|
||
height: 50rpx;
|
||
padding: 0rpx 25rpx;
|
||
line-height: 30rpx;
|
||
font-size: 28rpx;
|
||
text-align: right;
|
||
}
|
||
.property-dropdown {
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
width: 100%;
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
background-color: #fff;
|
||
border: 1px solid #dcdfe6;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||
z-index: 2000;
|
||
margin-top: 5px;
|
||
}
|
||
.uni-file-picker{
|
||
margin-top: 40rpx;
|
||
}
|
||
.require {
|
||
color: RED;
|
||
}
|
||
.uni-list-button{
|
||
margin-top: 40rpx;
|
||
}
|
||
.uni-list-mobile{
|
||
margin-top: 40rpx;
|
||
text-align: center;
|
||
}
|
||
.index-image{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
</style> |