Files
pgserver3.0/pgapp/pages/survey/houseDetail.vue
annnj-company 130c1026c4 first commit
2026-04-17 18:29:53 +08:00

1519 lines
49 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view class="survey-detail-container">
<uni-popup ref="popup" type="top" v-show="showPopMenu"><button @click="submitSurvey">提交</button><button>退回</button></uni-popup>
<view class="uni-padding-wrap uni-common-mt">
<uni-segmented-control :current="current" :values="items" :style-type="styleType"
:active-color="activeColor" @clickItem="onClickItem" />
</view>
<view class="content" style="height: 80vh; overflow: auto;">
<uni-card>
<view v-show="current === 2">
<uni-section title="业务信息" type="line">
<uni-list>
<uni-list-item title="物业名称" :rightText="basicInfo.property_full_name" />
<uni-list-item title="所在城市" :rightText="basicInfo.city" />
<uni-list-item title="业务员" :rightText="basicInfo.username" />
<uni-list-item title="联系人" :rightText="basicInfo.survey_contacts" />
<uni-list-item title="备注">
<template v-slot:footer>
<view class="desc"><text>{{basicInfo.remark}}</text></view>
</template>
</uni-list-item>
</uni-list>
</uni-section>
<uni-section title="周边设施信息" type="line">
<uni-list>
<uni-list-item >
<template v-slot:header>
<view class='eva-label'>毗邻物业</view>
</template>
<template v-slot:body>
<input class="uni-input" v-model="formItem.adjacent_property" maxlength="50"
placeholder="文字(最多50字)" />
</template>
</uni-list-item>
<uni-list-item >
<template v-slot:header>
<view class='eva-label'>公交线路</view>
</template>
<template v-slot:body>
<input class="uni-input" v-model="formItem.bus_lines" maxlength="50"
placeholder="文字(最多50字)" />
</template>
</uni-list-item>
<uni-list-item title="四至" />
<uni-list-item >
<template v-slot:header>
<view class='eva-label'>东至</view>
</template>
<template v-slot:body>
<input class="uni-input" v-model="formItem.boundaries.east" maxlength="50"
placeholder="文字(最多50字)" />
</template>
</uni-list-item>
<uni-list-item >
<template v-slot:header>
<view class='eva-label'>南至</view>
</template>
<template v-slot:body>
<input class="uni-input" v-model="formItem.boundaries.south" maxlength="50"
placeholder="文字(最多50字)" />
</template>
</uni-list-item>
<uni-list-item >
<template v-slot:header>
<view class='eva-label'>西至</view>
</template>
<template v-slot:body>
<input class="uni-input" v-model="formItem.boundaries.west" maxlength="50"
placeholder="文字(最多50字)" />
</template>
</uni-list-item>
<uni-list-item >
<template v-slot:header>
<view class='eva-label'>北至</view>
</template>
<template v-slot:body>
<input class="uni-input" v-model="formItem.boundaries.north" maxlength="50"
placeholder="文字(最多50字)" />
</template>
</uni-list-item>
</uni-list>
</uni-section>
<uni-section title="公共服务设施" type="line">
<uni-list>
<uni-list-item >
<template v-slot:header>
<view class='eva-label'>银行</view>
</template>
<template v-slot:body>
<input class="uni-input" v-model="formItem.pub_serv.bank" maxlength="50"
placeholder="文字(最多50字)" />
</template>
</uni-list-item>
<uni-list-item >
<template v-slot:header>
<view class='eva-label'>学校</view>
</template>
<template v-slot:body>
<input class="uni-input" v-model="formItem.pub_serv.school" maxlength="50"
placeholder="文字(最多50字)" />
</template>
</uni-list-item>
<uni-list-item >
<template v-slot:header>
<view class='eva-label'>超市</view>
</template>
<template v-slot:body>
<input class="uni-input" v-model="formItem.pub_serv.supermarket" maxlength="50"
placeholder="文字(最多50字)" />
</template>
</uni-list-item>
<uni-list-item >
<template v-slot:header>
<view class='eva-label'>酒店</view>
</template>
<template v-slot:body>
<input class="uni-input" v-model="formItem.pub_serv.hotel" maxlength="50"
placeholder="文字(最多50字)" />
</template>
</uni-list-item>
<uni-list-item >
<template v-slot:header>
<view class='eva-label'>菜市场</view>
</template>
<template v-slot:body>
<input class="uni-input" v-model="formItem.pub_serv.food_market" maxlength="50"
placeholder="文字(最多50字)" />
</template>
</uni-list-item>
<uni-list-item >
<template v-slot:header>
<view class='eva-label'>邮局</view>
</template>
<template v-slot:body>
<input class="uni-input" v-model="formItem.pub_serv.post_office" maxlength="50"
placeholder="文字(最多50字)" />
</template>
</uni-list-item>
<uni-list-item >
<template v-slot:header>
<view class='eva-label'>医院</view>
</template>
<template v-slot:body>
<input class="uni-input" v-model="formItem.pub_serv.hospital" maxlength="50"
placeholder="文字(最多50字)" />
</template>
</uni-list-item>
<uni-list-item >
<template v-slot:header>
<view class='eva-label'>公园</view>
</template>
<template v-slot:body>
<input class="uni-input" v-model="formItem.pub_serv.park" maxlength="50"
placeholder="文字(最多50字)" />
</template>
</uni-list-item>
<uni-list-item >
<template v-slot:header>
<view class='eva-label'>会所</view>
</template>
<template v-slot:body>
<input class="uni-input" v-model="formItem.pub_serv.club" maxlength="50"
placeholder="文字(最多50字)" />
</template>
</uni-list-item>
</uni-list>
</uni-section>
<uni-section title="环境与景观" type="line">
<uni-list>
<uni-list-item>
<template v-slot:footer>
<text class="require">*</text>
<view class="uni-textarea">
<textarea v-model="formItem.scenery" maxlength="50"
placeholder="文字(最多50字)" />
</view>
</template>
</uni-list-item>
</uni-list>
</uni-section>
<uni-section title="楼盘介绍" type="line">
<uni-list>
<uni-list-item>
<template v-slot:footer>
<view class="uni-textarea">
<textarea v-model="formItem.property_intro" maxlength="200"
placeholder="请输入最多200字" />
</view>
</template>
</uni-list-item>
</uni-list>
</uni-section>
</view>
<view v-show="current === 0">
<uni-section title="楼栋物业信息" type="line">
<uni-list>
<uni-list-item >
<template v-slot:header>
<view class='eva-label'>物业地址</view>
</template>
<template v-slot:body>
<view class="slot-box">
<input class="uni-input" v-model="formItem.address" maxlength="50"
placeholder="文字(最多50字)" />
</view>
</template>
</uni-list-item>
<uni-list-item direction="column">
<template v-slot:header>
<view> <text class="require">*</text> 户型</view>
</template>
<template v-slot:body>
<view class='slot-box'>
<view class="eva-label" ></view>
<input class="uni-input" type="digit" v-model="typeObj.house" maxlength="5"
placeholder="数字" />
<!--<uni-data-checkbox mode="tag" v-model="typeObj.house"
:localdata="house_type_range">
</uni-data-checkbox>-->
</view>
<view class='slot-box'>
<view class="eva-label"></view>
<input class="uni-input" type="digit" v-model="typeObj.hall" maxlength="5"
placeholder="数字" />
<!-- <uni-data-checkbox mode="tag" v-model="typeObj.hall"
:localdata="house_type_range">
</uni-data-checkbox>>-->
</view>
<view class='slot-box'>
<view class="eva-label"></view>
<input type="digit" class="uni-input" v-model="typeObj.toilet" maxlength="5"
placeholder="数字" />
<!--<uni-data-checkbox mode="tag" v-model="typeObj.toilet"
:localdata="house_type_range">
</uni-data-checkbox>-->
</view>
<view class='slot-box'>
<view class="eva-label"></view>
<input class="uni-input" type="digit" v-model="typeObj.balcony" maxlength="5"
placeholder="数字" />
<!-- <uni-data-checkbox mode="tag" v-model="typeObj.balcony"
:localdata="house_type_range">
</uni-data-checkbox>-->
</view>
</template>
</uni-list-item>
<uni-list-item direction="column" >
<template v-slot:header>
<view class="slot-box">
<view class="eva-label" ><text class="require"> * </text> 朝向 </view>
</view>
</template>
<template v-slot:footer>
<view class="slot-box">
<uni-data-checkbox mode="tag" v-model="formItem.towards"
:localdata="residence_towards">
</uni-data-checkbox>
</view>
</template>
</uni-list-item>
<uni-list-item >
<template v-slot:header>
<view class='eva-label'>层高</view>
</template>
<template v-slot:body>
<view class="slot-box">
<input class="uni-input" v-model="formItem.floor_height" type="digit"
placeholder="数字" />
</view>
</template>
</uni-list-item>
<uni-list-item >
<template v-slot:header>
<view class='eva-label'><text class="require">*</text>评估楼层()</view>
</template>
<template v-slot:body>
<view class="slot-box">
<input class="uni-input" v-model="formItem.floor_no" type="digit"
placeholder="数字" />
</view>
</template>
</uni-list-item>
<uni-list-item >
<template v-slot:header>
<view class='eva-label'><text class="require">*</text> 总楼层()</view>
</template>
<template v-slot:body>
<view class="slot-box">
<input class="uni-input" v-model="formItem.floor_total" type="digit"
placeholder="数字" />
</view>
</template>
</uni-list-item>
<uni-list-item >
<template v-slot:header>
<view class='eva-label'><text class="require">*</text> 梯户</view>
</template>
<template v-slot:body>
<view class="slot-box">
<input class="uni-input" v-model="formItem.elevator_apartment_count" maxlength="50"
placeholder="文字(最多50字)" />
</view>
</template>
</uni-list-item>
<uni-list-item >
<template v-slot:header>
<view class='eva-label'><text class="require">*</text> 电梯()</view>
</template>
<template v-slot:body>
<view class="slot-box">
<input class="uni-input" v-model="formItem.elevator" type="digit"
placeholder="数字" />
</view>
</template>
</uni-list-item>
<uni-list-item title="停车场库">
<template v-slot:footer>
<view class="slot-box">
<uni-data-checkbox mode="tag" multiple v-model="formItem.parking_lot"
:localdata="residence_parking_garage">
</uni-data-checkbox>
</view>
</template>
</uni-list-item>
<uni-list-item direction="column">
<template v-slot:header>
<view class="slot-box">
<view class="eva-label" ><text class="require"> * </text> 使用现状 </view>
</view>
</template>
<template v-slot:footer>
<view class="slot-box">
<uni-data-checkbox mode="tag" multiple v-model="formItem.parking_lot_usage"
:localdata="residence_parking_garage_status">
</uni-data-checkbox>
</view>
</template>
</uni-list-item>
<uni-list-item direction="column">
<template v-slot:header>
<view class="slot-box">
<view class="eva-label" ><text class="require"> * </text> 装修档次 </view>
</view>
</template>
<template v-slot:footer>
<view class="slot-box">
<uni-data-checkbox mode="tag" v-model="formItem.decoration"
:localdata="residence_decoration_grade">
</uni-data-checkbox>
</view>
</template>
</uni-list-item>
<uni-list-item direction="column">
<template v-slot:header>
<view class="slot-box">
<view class="eva-label" ><text class="require"> * </text> 实际用途 </view>
</view>
</template>
<template v-slot:footer>
<view class="slot-box">
<uni-data-checkbox mode="tag" v-model="formItem.usage"
:localdata="residence_practical_application">
</uni-data-checkbox>
</view>
</template>
</uni-list-item>
<uni-list-item >
<template v-slot:header>
<view class='eva-label'><text class="require">*</text> 物业管理</view>
</template>
<template v-slot:body>
<view class="slot-box">
<input class="uni-input" v-model="formItem.property_mgm" maxlength="50"
placeholder="文字(最多50字)" />
</view>
</template>
</uni-list-item>
<uni-list-item direction="column">
<template v-slot:header>
<view class="slot-box">
<view class="eva-label" ><text class="require"> * </text> 成新率 </view>
</view>
</template>
<template v-slot:footer>
<view class="slot-box">
<uni-data-checkbox mode="tag" v-model="formItem.newness_rate"
:localdata="residence_new_rate">
</uni-data-checkbox>
</view>
</template>
</uni-list-item>
<uni-list-item >
<template v-slot:header>
<view class='eva-label'>建筑结构</view>
</template>
<template v-slot:body>
<view class="slot-box">
<input class="uni-input" v-model="formItem.structure" maxlength="50"
placeholder="文字(最多50字)" />
</view>
</template>
</uni-list-item>
<uni-list-item direction="column">
<template v-slot:header>
<view class="slot-box">
<view class="eva-label" ><text class="require"> * </text> 小片区 </view>
</view>
</template>
<template v-slot:body>
<view class="slot-box">
<uni-data-checkbox mode="tag" v-model="formItem.area_id" :localdata="areaArray">
</uni-data-checkbox>
</view>
</template>
</uni-list-item>
</uni-list>
</uni-section>
</view>
<view v-show="current === 1">
<uni-section title="装修标准信息" type="line">
<uni-list>
<uni-list-item direction="column">
<template v-slot:header>
<view class="slot-box">
<view>外景</view>
</view>
</template>
<template v-slot:body>
<view class="slot-box">
<uni-data-checkbox mode="tag" multiple v-model="formItem.exterior_view"
:localdata="residence_outdoor_scene">
</uni-data-checkbox>
</view>
</template>
<template v-slot:footer>
<view><text class="require">*</text>上传图片</view>
<uni-file-picker :auto-upload="false" v-model="formItem.outdoor_scene_imgs_arr" file-mediatype="image"
mode="grid" file-extname="png,jpg,jpeg" @progress="progress($event)"
@success="success" @fail="fail" @select="selectImg($event,'exterior_view_img_ids')" @delete="handleDelete"/>
</template>
</uni-list-item>
<uni-list-item direction="column">
<template v-slot:header>
<view>门窗</view>
</template>
<template v-slot:body>
<view class="slot-box">
<uni-data-checkbox mode="tag" multiple v-model="formItem.doorplate"
:localdata="residence_doorplate">
</uni-data-checkbox>
</view>
</template>
<template v-slot:footer>
<view><text class="require">*</text>上传图片</view>
<uni-file-picker :auto-upload="false" v-model="formItem.doorplate_imgs_arr" file-mediatype="image"
mode="grid" file-extname="png,jpg,jpeg" @progress="progress($event)"
@success="success" @fail="fail" @select="selectImg($event,'doorplate_img_ids')" @delete="handleDelete"/>
</template>
</uni-list-item>
</uni-list>
</uni-section>
<uni-section title="客厅/餐厅" type="line">
<uni-list>
<uni-list-item direction="column">
<template v-slot:header>
<view>内景</view>
</template>
<template v-slot:body>
<view class="slot-box">
<uni-data-checkbox mode="tag" multiple
v-model="formItem.living_room.residence_living_room_inside_wall"
:localdata="residence_living_room_inside_wall">
</uni-data-checkbox>
</view>
</template>
</uni-list-item>
<uni-list-item direction="column">
<template v-slot:header>
<view>天花板</view>
</template>
<template v-slot:body>
<view class="slot-box">
<uni-data-checkbox mode="tag" multiple
v-model="formItem.living_room.residence_living_room_ceiling"
:localdata="residence_living_room_ceiling">
</uni-data-checkbox>
</view>
</template>
</uni-list-item>
<uni-list-item direction="column">
<template v-slot:header>
<view>地面</view>
</template>
<template v-slot:body>
<view class="slot-box">
<uni-data-checkbox mode="tag" multiple
v-model="formItem.living_room.residence_living_room_ground"
:localdata="residence_living_room_ground">
</uni-data-checkbox>
</view>
</template>
<template v-slot:footer>
<view><text class="require">*</text>上传图片</view>
<uni-file-picker :auto-upload="false" v-model="formItem.living_room_imgs_arr" file-mediatype="image"
mode="grid" file-extname="png,jpg,jpeg" @progress="progress($event)"
@success="success" @fail="fail" @select="selectImg($event,'living_room_img_ids')" @delete="handleDelete"/>
</template>
</uni-list-item>
</uni-list>
</uni-section>
<uni-section title="卧室" type="line">
<uni-list>
<uni-list-item direction="column">
<template v-slot:header>
<view>内景</view>
</template>
<template v-slot:body>
<view class="slot-box">
<uni-data-checkbox mode="tag" multiple
v-model="formItem.bedroom.residence_bedroom_inside_wall"
:localdata="residence_bedroom_inside_wall">
</uni-data-checkbox>
</view>
</template>
</uni-list-item>
<uni-list-item direction="column">
<template v-slot:header>
<view>天花板</view>
</template>
<template v-slot:body>
<view class="slot-box">
<uni-data-checkbox mode="tag" multiple
v-model="formItem.bedroom.residence_bedroom_ceiling"
:localdata="residence_bedroom_ceiling">
</uni-data-checkbox>
</view>
</template>
</uni-list-item>
<uni-list-item direction="column">
<template v-slot:header>
<view>地面</view>
</template>
<template v-slot:body>
<view class="slot-box">
<uni-data-checkbox mode="tag" multiple
v-model="formItem.bedroom.residence_bedroom_ground"
:localdata="residence_bedroom_ground">
</uni-data-checkbox>
</view>
</template>
<template v-slot:footer>
<view><text class="require">*</text>上传图片</view>
<uni-file-picker :auto-upload="false" v-model="formItem.bedroom_imgs_arr" file-mediatype="image"
mode="grid" file-extname="png,jpg,jpeg" @progress="progress($event)"
@success="success" @fail="fail" @select="selectImg($event,'bedroom_img_ids')" @delete="handleDelete"/>
</template>
</uni-list-item>
</uni-list>
</uni-section>
<uni-section title="厨房" type="line">
<uni-list>
<uni-list-item direction="column">
<template v-slot:header>
<view>天花
</view>
</template>
<template v-slot:body>
<view class="slot-box">
<uni-data-checkbox mode="tag" multiple
v-model="formItem.kitchen.residence_kitchen_ceiling"
:localdata="residence_kitchen_ceiling">
</uni-data-checkbox>
</view>
</template>
</uni-list-item>
<uni-list-item direction="column">
<template v-slot:header>
<view>墙面
</view>
</template>
<template v-slot:body>
<view class="slot-box">
<uni-data-checkbox mode="tag" multiple
v-model="formItem.kitchen.residence_kitchen_wall"
:localdata="residence_kitchen_wall">
</uni-data-checkbox>
</view>
</template>
</uni-list-item>
<uni-list-item direction="column">
<template v-slot:header>
<view>地面
</view>
</template>
<template v-slot:body>
<view class="slot-box">
<uni-data-checkbox mode="tag" multiple
v-model="formItem.kitchen.residence_kitchen_ground"
:localdata="residence_kitchen_ground">
</uni-data-checkbox>
</view>
</template>
</uni-list-item>
<uni-list-item direction="column">
<template v-slot:header>
<view>设备
</view>
</template>
<template v-slot:body>
<view class="slot-box">
<uni-data-checkbox mode="tag" multiple
v-model="formItem.kitchen.residence_kitchen_equipment"
:localdata="residence_kitchen_equipment">
</uni-data-checkbox>
</view>
</template>
<template v-slot:footer>
<view><text class="require">*</text>上传图片</view>
<uni-file-picker :auto-upload="false" v-model="formItem.kitchen_imgs_arr" file-mediatype="image"
mode="grid" file-extname="png,jpg,jpeg" @progress="progress($event)"
@success="success" @fail="fail" @select="selectImg($event,'kitchen_img_ids')" @delete="handleDelete"/>
</template>
</uni-list-item>
</uni-list>
</uni-section>
<uni-section title="卫生间" type="line">
<uni-list>
<uni-list-item direction="column">
<template v-slot:header>
<view>天花
</view>
</template>
<template v-slot:body>
<view class="slot-box">
<uni-data-checkbox mode="tag" multiple
v-model="formItem.bathroom.residence_bathroom_ceiling"
:localdata="residence_bathroom_ceiling">
</uni-data-checkbox>
</view>
</template>
</uni-list-item>
<uni-list-item direction="column">
<template v-slot:header>
<view>墙面</view>
</template>
<template v-slot:body>
<view class="slot-box">
<uni-data-checkbox mode="tag" multiple
v-model="formItem.bathroom.residence_bathroom_wall"
:localdata="residence_bathroom_wall">
</uni-data-checkbox>
</view>
</template>
</uni-list-item>
<uni-list-item direction="column">
<template v-slot:header>
<view>地面</view>
</template>
<template v-slot:body>
<view class="slot-box">
<uni-data-checkbox mode="tag" multiple
v-model="formItem.bathroom.residence_bathroom_ground"
:localdata="residence_bathroom_ground">
</uni-data-checkbox>
</view>
</template>
</uni-list-item>
<uni-list-item direction="column">
<template v-slot:header>
<view>洁具</view>
</template>
<template v-slot:body>
<view class="slot-box">
<uni-data-checkbox mode="tag" multiple
v-model="formItem.bathroom.residence_bathroom_sanitary"
:localdata="residence_bathroom_sanitary">
</uni-data-checkbox>
</view>
</template>
<template v-slot:footer>
<view><text class="require">*</text>上传图片</view>
<uni-file-picker :auto-upload="false" v-model="formItem.bathroom_imgs_arr" file-mediatype="image"
mode="grid" file-extname="png,jpg,jpeg" @progress="progress($event)"
@success="success" @fail="fail" @select="selectImg($event,'bathroom_img_ids')" @delete="handleDelete"/>
</template>
</uni-list-item>
</uni-list>
</uni-section>
<uni-section title="设施" type="line">
<uni-list>
<uni-list-item direction="column">
<template v-slot:header>
<view>水电
</view>
</template>
<template v-slot:body>
<view class="slot-box">
<uni-data-checkbox mode="tag" multiple
v-model="formItem.facility.residence_facility_hydropower"
:localdata="residence_facility_hydropower">
</uni-data-checkbox>
</view>
</template>
</uni-list-item>
<uni-list-item direction="column">
<template v-slot:header>
<view>通信
</view>
</template>
<template v-slot:body>
<view class="slot-box">
<uni-data-checkbox mode="tag" multiple
v-model="formItem.facility.residence_facility_communication"
:localdata="residence_facility_communication">
</uni-data-checkbox>
</view>
</template>
</uni-list-item>
</uni-list>
</uni-section>
<uni-section title="其他" type="line">
<uni-list>
<uni-list-item>
<template v-slot:footer>
<view class="slot-box">
<uni-data-checkbox mode="tag" multiple v-model="formItem.other.residence_other"
:localdata="residence_other">
</uni-data-checkbox>
</view>
</template>
</uni-list-item>
</uni-list>
</uni-section>
<uni-section title="特殊户型备注" type="line">
<uni-list>
<uni-list-item>
<template v-slot:footer>
<view class="slot-box">
<uni-data-checkbox mode="tag" multiple v-model="formItem.special_remarks"
:localdata="residence_special_remarks">
</uni-data-checkbox>
</view>
</template>
</uni-list-item>
</uni-list>
</uni-section>
<uni-section title="备注" type="line">
<uni-list>
<uni-list-item>
<template v-slot:footer>
<view class="uni-textarea">
<textarea v-model="formItem.remarks" maxlength="200"
placeholder="请输入最多200字" />
</view>
</template>
</uni-list-item>
</uni-list>
</uni-section>
<uni-section title="图片" type="line">
<uni-list>
<uni-list-item direction="column">
<template v-slot:header>
<view>入户花园</view>
</template>
<template v-slot:body>
<uni-file-picker :auto-upload="false" v-model="formItem.apartment_layout_imgs_arr" file-mediatype="image"
mode="grid" file-extname="png,jpg,jpeg" @progress="progress($event)"
@success="success" @fail="fail" @select="selectImg($event,'house_type_img_ids')" @delete="handleDelete"/>
</template>
</uni-list-item>
<uni-list-item direction="column">
<template v-slot:header>
<view>景观(楼梯)</view>
</template>
<template v-slot:body>
<uni-file-picker :auto-upload="false" v-model="formItem.oriented_imgs_arr" file-mediatype="image"
mode="grid" file-extname="png,jpg,jpeg" @progress="progress($event)"
@success="success" @fail="fail" @select="selectImg($event,'orientation_img_ids')" @delete="handleDelete"/>
</template>
</uni-list-item>
<uni-list-item direction="column">
<template v-slot:header>
<view><text class="require">*</text>物业位置图</view>
</template>
<template v-slot:body>
<uni-file-picker :auto-upload="false" v-model="formItem.location_imgs_arr" file-mediatype="image"
mode="grid" file-extname="png,jpg,jpeg" @progress="progress($event)"
@success="success" @fail="fail" @select="selectImg($event,'supplement_img_ids')" @delete="handleDelete"/>
</template>
</uni-list-item>
<uni-list-item direction="column">
<template v-slot:header>
<view>补充图片</view>
</template>
<template v-slot:body>
<uni-file-picker :auto-upload="false" v-model="formItem.supplement_imgs_arr" file-mediatype="image"
mode="grid" file-extname="png,jpg,jpeg" @progress="progress($event)"
@success="success" @fail="fail" @select="selectImg($event,'supplement_imgs')" @delete="handleDelete"/>
</template>
</uni-list-item>
<uni-list-item direction="column">
<template v-slot:header>
<view>查勘图库</view>
</template>
<template v-slot:body>
<uni-file-picker :auto-upload="false" v-model="img_details.survey_gallery_imgs_details" file-mediatype="image"
mode="grid" file-extname="png,jpg,jpeg" :readonly="true"/>
</template>
</uni-list-item>
</uni-list>
</uni-section>
</view>
</uni-card>
</view>
</view>
</template>
<script>
import config from '@/config'
import { toast } from '@/utils/common'
import { uploadImg } from "@/api/common"
import {
surveyDetail,
surveyOptions,
surveySubmit
} from '../../api/survey/survey'
export default {
components: {},
data() {
return {
uploadImgTotal:0, // 共要上传图片数量
uploadImgOKQueue:[], // 上传队列
showPopMenu:false,
items: ['楼栋物业', '装修标准','周边设施'],
styles: [{
value: 'button',
text: '按钮',
checked: true
},
{
value: 'text',
text: '文字'
}
],
colors: ['#007aff', '#4cd964', '#dd524d'],
current: 0,
colorIndex: 0,
activeColor: '#007aff',
styleType: 'button',
imagevalues:[],
filePathsList:[],
typeObj: {
house: "",
hall: "",
toilet: "",
balcony: ""
},
typeList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
house_type_range: [{"value": 0,"text": "0" },{"value": 1,"text": "1"},{"value": 2,"text": "2"},{"value": 3,"text": "3"},
{"value": 4,"text": "4" },{"value": 5,"text": "5"},{"value": 6,"text": "6"},{"value": 7,"text": "7"}],
list: [1, 2, 3, 4],
codeList: [],
residence_towards: [], // 朝向
residence_parking_garage: [], // 停车场库
residence_parking_garage_status: [], // 停车场库使用现状
residence_practical_application: [], // 实际用途
residence_decoration_grade: [], // 装修档次
residence_new_rate: [], // 成新率
residence_outdoor_scene: [], // 外景
residence_doorplate: [], // 门窗
residence_living_room_inside_wall: [], // 客厅-内景
residence_living_room_ceiling: [], // 客厅-天花板
residence_living_room_ground: [], // 客厅-地面
residence_balcony: [], // 阳台
residence_bedroom_inside_wall: [], // 卧室-天花
residence_bedroom_ceiling: [], // 卧室-天花
residence_bedroom_ground: [], // 卧室-天花
residence_kitchen_ceiling: [], // 厨房-天花
residence_kitchen_wall: [], // 厨房-墙面
residence_kitchen_ground: [], // 厨房-地面
residence_kitchen_equipment: [], // 厨房-设备
residence_bathroom_ceiling: [], // 卫生间-天花
residence_bathroom_wall: [], // 卫生间-墙面
residence_bathroom_ground: [], // 卫生间-地面
residence_bathroom_sanitary: [], // 卫生间-洁具
residence_facility_hydropower: [], // 设施-水电
residence_facility_communication: [], // 卫生间-通讯
residence_other: [], // 其他
residence_special_remarks: [], // 特殊户型备注
data: {
basicData: {
bank_name: '',
bank_customer_mgr_name: '',
evaluate_purposes: ''
}
},
basicInfo: {},
areaArray: [],
formItem: {
survey_type: this.$route.query.survey_type, // 1.住宅 2.商业
survey_id: this.$route.query.survey_id,
adjacent_property: '', // 毗邻物业
bus_lines: '', // 公交线路
boundaries: { // 四至
east: '', // 东
south: '', // 南
west: '', // 西
north: '' // 北
},
pub_serv: { // 公共服务设施
bank: '', // 银行
school: '', // 学校
supermarket: '', // 超市
hotel: '', // 酒店
food_market: '', // 菜市场
post_office: '', // 邮局
hospital: '', // 医院
park: '', // 公园
club: '' // 会所
},
special_remarks:"",//
remarks: '', // 备注
scenery: '', // 环境和景观
property_intro: '', // 楼盘介绍
address: '', // 物业地址
unit_type: '', // 户型
towards: '', // 朝向
elevator_apartment_count: '', // 梯户
floor_height: '', // 层高
floor_no: '', // 评估楼层
floor_total: '', // 总楼层
elevator: '', // 电梯
parking_lot: [], // 停车场库
parking_lot_usage: '', // 停车场库使用现状
decoration: '', // 装修档次
usage: '', // 实际用途
property_mgm: '', // 物业管理
newness_rate: '', // 成新率
area_id: '', // 小片区
area: '', // 小片区
structure: '', // 建筑结构
floor_plan: '', // 平面布局
greening: '', // 绿化环境
exterior_view: [], // 外景
exterior_view_img_ids: [], // 外景图片
doorplate: [], // 门窗
doorplate_img_ids: [], // 门窗图片
living_room: {
residence_living_room_inside_wall: [], // 客厅(卧室)-内景
residence_living_room_ceiling: [], // 客厅(卧室)-天花板
residence_living_room_ground: [] // 客厅(卧室)-地面
},
living_room_img_ids: [], // 客厅图片
balcony: [], // 阳台
balcony_img_ids: [], // 阳台图片
bedroom: {
residence_bedroom_inside_wall: [], // 卧室-内景
residence_bedroom_ceiling: [], // 卧室-天花板
residence_bedroom_ground: [] // 卧室-地面
},
bedroom_img_ids: [],
kitchen: {
residence_kitchen_ceiling: [], // 厨房-天花
residence_kitchen_wall: [], // 厨房-墙面
residence_kitchen_ground: [], // 厨房-地面
residence_kitchen_equipment: [] // 厨房-设备
},
kitchen_img_ids: [], // 厨房图片
bathroom: {
residence_bathroom_ceiling: [], // 卫生间-天花
residence_bathroom_wall: [], // 卫生间-墙面
residence_bathroom_ground: [], // 卫生间-地面
residence_bathroom_sanitary: [] // 卫生间-洁具
},
bathroom_img_ids: [], // 卫生间图片
facility: {
residence_facility_hydropower: [], // 设施-水电
residence_facility_communication: [] // 设施-通讯
},
facility_img_ids: [], // 设施图片
other: {
residence_other: [] // 其他-其他
},
special_remarks: [], // 特殊户型备注
others_img_ids: [], // 其他图片
supplement_img_ids: [], // 物业位置图
supplement_imgs: [], // 补充图片
survey_loc_img_ids: [], // 定位图
house_type_img_ids: [], // 入户花园
orientation_img_ids: [], // 景观(楼梯)
auto_loc_img_ids: [], //自动定位图
appraisal_img_ids: [] // 查勘图库
},
img_details: {
survey_gallery_imgs_details: [] // 查勘图库
}
}
},
created() {
this.route = this.$route.query
this.surveyDetail()
this.surveyOptions()
this.initial_uploadMgr()
},
methods: {
checkRule () {
if (this.typeObj.house === '' ||
this.typeObj.hall === '' ||
this.typeObj.toilet === '' ||
this.typeObj.balcony === ''
) {
toast('户型未填写完整,无法提交')
return false
}
if (this.formItem.towards === '') {
toast('朝向未填写,无法提交')
return false
}
if (this.formItem.elevator_apartment_count === '') {
toast('梯户未填写,无法提交')
return false
}
if (this.formItem.floor_no === '') {
toast('评估楼层(层)未填写,无法提交')
return false
}
if (this.formItem.floor_total === '') {
toast('总楼层(层)未填写,无法提交')
return false
}
if (this.formItem.elevator === '') {
toast('电梯(部)未填写,无法提交')
return false
}
if (this.formItem.parking_lot_usage === '') {
toast('使用现状未填写,无法提交')
return false
}
if (this.formItem.decoration === '') {
toast('装修档次未填写,无法提交')
return false
}
if (this.formItem.usage === '') {
toast('实际用途未填写,无法提交')
return false
}
if (this.formItem.area_id === '') {
toast('小片区未填写,无法提交')
return false
}
if (this.formItem.exterior_view_img_ids.length === 0) {
toast('外景图片未填写,无法提交')
return false
}
if (this.formItem.doorplate_img_ids.length === 0) {
toast('门窗图片未填写,无法提交')
return false
}
if (this.formItem.living_room_img_ids.length === 0) {
toast('客厅/餐厅图片未填写,无法提交')
return false
}
if (this.formItem.bedroom_img_ids.length === 0) {
toast('卧室图片未填写,无法提交')
return false
}
if (this.formItem.kitchen_img_ids.length === 0) {
toast('厨房图片未填写,无法提交')
return false
}
if (this.formItem.bathroom_img_ids.length === 0) {
toast('卫生间图片未填写,无法提交')
return false
}
// if (this.formItem.house_type_img_ids.length === 0) {
// toast('入户花园未填写,无法提交')
// return false
// }
// if (this.formItem.orientation_img_ids.length === 0) {
// toast('景观(楼梯)未填写,无法提交')
// return false
// }
if (this.formItem.supplement_img_ids.length === 0) {
toast('物业位置图片未填写,无法提交')
return false
}
if (this.formItem.scenery === '') {
toast('环境与景观未填写,无法提交')
return false
}
return true
},
onClickItem(e) {
if (this.current !== e.currentIndex) {
this.current = e.currentIndex
}
},
styleChange(e) {
if (this.styleType !== e.detail.value) {
this.styleType = e.detail.value
}
},
colorChange(e) {
if (this.styleType !== e.detail.value) {
this.activeColor = e.detail.value
}
},
initial_uploadMgr()
{
this.uploadImgDelQueue = [];
this.uploadImgDelQueue = [];
this.uploadImgTotal = 0;
},
// 选择文件,获取上传状态
selectImg(e,name){
let tempFilePaths = e.tempFilePaths
if (!tempFilePaths.length)
return
// 加入上传队列
for( let i=0; i<tempFilePaths.length; ++i )
{
const path = tempFilePaths[i]
this.uploadImgOKQueue.push( {path:path, name:name, e:e } );
this.uploadImgTotal++;
this.filePathsList.push({url:path,name:""})
}
console.log('select img',this.uploadImgOKQueue,this.uploadImgTotal)
// 开始loading界面
uni.showLoading({
title:'正在上传图片 '+ (this.uploadImgTotal-this.uploadImgOKQueue.length)+'/'+this.uploadImgTotal
})
// 开始逐个图上传
let next = this.uploadImgOKQueue.pop();
this.UploadImageNext( next.path , next.name ,this.onUploadOKCallBack, this.onUploadFaildCallback )
},
// 通过path 从Queue里删除一个队列节点
// return Bool
deletUploaFileFromQueue( path )
{
for( let i=0 ; i < this.uploadImgOKQueue; ++i )
{
let node = this.uploadImgOKQueue[i];
if( node.path == path )
{
this.uploadImgOKQueue.splice( i,1 )
this.uploadImgTotal-- ; // 总数减一
return true;
}
}
return false;
},
// 上传图片成功回调
onUploadOKCallBack( response ,name )
{
const data = response.data
const id = data.id
this.formItem[name].push(id)
if (name != 'supplement_imgs' && name != 'supplement_img_ids' && name !='auto_loc_img_ids') {
this.formItem.appraisal_img_ids.push(id)
data['extname'] = data['ext']
data['url'] = data['url'].replaceAll("\\","/")
this.img_details.survey_gallery_imgs_details.push(data)
}
// 每成功加载上传成功加1
title:'正在上传图片 '+ (this.uploadImgTotal-this.uploadImgOKQueue.length)+'/'+this.uploadImgTotal
if( this.uploadImgOKQueue.length <= 0 )
{
this.uploadImgTotal = 0;
uni.hideLoading();
toast("图片全部上传完毕")
}else{
console.log( 'on load no complitete',this.uploadImgOKQueue,this.uploadImgTotal)
uni.showLoading({
title:'正在上传图片 '+ (this.uploadImgTotal-this.uploadImgOKQueue.length)+'/'+this.uploadImgTotal
})
}
// 进行下一幅图的上传(因为多图上传会产生 timeout )
if( 0 < this.uploadImgOKQueue.length )
{
let next = this.uploadImgOKQueue.pop();
this.UploadImageNext( next.path , next.name ,this.onUploadOKCallBack, this.onUploadFaildCallback )
}
},
// 当上传图片错误的回调
onUploadFaildCallback( err )
{
uni.hideLoading();
uni.showToast({ title: err, icon: 'error' })
window.console.log(err)
},
// 上传图片下一张
UploadImageNext( path , name , callback , faildCallback )
{
uploadImg({filePath: path}).then(response => {
callback( response , name )
}).catch((err) => {
faildCallback(err)
});
},
// 删除图片
handleDelete(e) {
this.uploadImgDelQueue.push({name:e.tempFile.name})
const num = this.filePathsList.findIndex(v => v.url === e.tempFilePath);
this.filePathsList.splice(num, 1);
this.deletUploaFileFromQueue( e.tempFilePath );
if( this.uploadImgOKQueue.length > 0)
{
uni.showLoading({
title:'正在上传图片 '+ (this.uploadImgTotal-this.uploadImgOKQueue.length)+'/'+this.uploadImgTotal
})
}
else{
uni.hideLoading();
}
},
// 获取上传进度
progress(e){
console.log('上传进度:',e)
},
// 上传成功
success(e){
console.log('上传成功')
},
// 上传失败
fail(e){
console.log('上传失败:',e)
},
onNavigationBarButtonTap(e) {
var index = e.index;
this.showPopMenu = !this.showPopMenu
this.$refs.popup.open('top')
},
submitSurvey() {
console.log( "submitSurvey", this.formItem )
uni.hideLoading();
if (!this.checkRule()) {
return
}
let vm = this;
this.formItem.unit_type = `${this.typeObj.house}-${this.typeObj.hall}-${this.typeObj.toilet}-${this.typeObj.balcony}`
this.areaArray.forEach((item)=>{
if(item.value == vm.formItem.area_id) {
vm.formItem.area = item.text
}
})
if( this.uploadImgOKQueue.length > 0)
{
toast("已提交,但图片未上传完整!!!")
}
surveySubmit(this.formItem).then(res=>{
if (res.code === 1) {
this.$tab.navigateTo('/pages/survey/index')
}else if (res.code === -1) {
this.$modal.msgError(res.msg)
}
})
},
surveyOptions() {
surveyOptions().then(res => {
if (res.code === 1) {
let data = res.data.residence
this.residence_towards = this.adapter(data.residence_towards._child)
this.residence_parking_garage = this.adapter(data.residence_parking_garage._child)
this.residence_parking_garage_status = this.adapter(data.residence_parking_garage_status
._child)
this.residence_practical_application = this.adapter(data.residence_practical_application
._child)
this.residence_decoration_grade = this.adapter(data.residence_decoration_grade._child)
this.residence_new_rate = this.adapter(data.residence_new_rate._child)
this.residence_outdoor_scene = this.adapter(data.residence_outdoor_scene._child)
this.residence_doorplate = this.adapter(data.residence_doorplate._child)
this.residence_living_room_inside_wall = this.adapter(data
.residence_living_room_inside_wall._child)
this.residence_living_room_ceiling = this.adapter(data.residence_living_room_ceiling
._child)
this.residence_living_room_ground = this.adapter(data.residence_living_room_ground._child)
this.residence_balcony = this.adapter(data.residence_balcony._child)
this.residence_bedroom_inside_wall = this.adapter(data.residence_bedroom_inside_wall
._child)
this.residence_kitchen_ceiling = this.adapter(data.residence_kitchen_ceiling._child)
this.residence_bedroom_ceiling = this.adapter(data.residence_bedroom_ceiling._child)
this.residence_bedroom_ground = this.adapter(data.residence_bedroom_ground._child)
this.residence_special_remarks = this.adapter(data.residence_special_remarks._child)
this.residence_kitchen_wall = this.adapter(data.residence_kitchen_wall._child)
this.residence_kitchen_ground = this.adapter(data.residence_kitchen_ground._child)
this.residence_kitchen_equipment = this.adapter(data.residence_kitchen_equipment._child)
this.residence_bathroom_ceiling = this.adapter(data.residence_bathroom_ceiling._child)
this.residence_bathroom_wall = this.adapter(data.residence_bathroom_wall._child)
this.residence_bathroom_ground = this.adapter(data.residence_bathroom_ground._child)
this.residence_bathroom_sanitary = this.adapter(data.residence_bathroom_sanitary._child)
this.residence_facility_hydropower = this.adapter(data.residence_facility_hydropower
._child)
this.residence_facility_communication = this.adapter(data.residence_facility_communication
._child)
this.residence_other = this.adapter(data.residence_other._child)
}
})
},
adapter(data) {
if (Array.isArray(data) && data.length !== 0) {
data.forEach((item) => {
item.value = item.code
item.text = item.name
})
}
return data
},
transArea(areaObj) {
let areaArray = []
for (let key in areaObj) {
areaArray.push({
"value": key,
"text": areaObj[key]
})
}
return areaArray
},
surveyDetail() {
let data = {
order_no: this.route.order_no,
id: this.route.id
}
surveyDetail(data).then(res => {
if (res.code === 1) {
const data = res.data
this.basicInfo = data.inquiry
this.areaArray = this.transArea(data.area)
} else if (res.code == -1) {
this.$modal.msgError(res.msg)
}
})
}
}
}
</script>
<style lang="scss" scoped>
page {
background-color: #f8f8f8;
}
.eva-label {
margin-right: 20px;
width: 170rpx;
}
.uni-common-mt {
margin-top: 30px;
}
.uni-padding-wrap {
// width: 750rpx;
padding: 0px 30px;
}
.survey-detail-container {
margin-bottom: 100rpx;
padding: 20rpx;
}
.btnSurvey {
color: #ff6a00;
}
.line {
width: 100%;
height: 5rpx;
background-color: #E6E6E6;
}
.line2 {
width: 100%;
height: 20rpx;
background-color: #F5F5F5;
}
.desc {
width: 70%;
//background-color: #bb11ff;
}
.slot-box-col {
display: flex;
flex-direction: column;
}
.slot-box {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items:center;
flex-wrap: wrap;
//width: 80%;
}
.tag-view {
margin-right: 10px;
margin-bottom: 10px;
}
.uni-list {
flex: 1;
}
.uni-list-item {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
background-color: #FFFFFF;
}
.uni-list-item__container {
padding: 12px 15px;
width: 100%;
flex: 1;
position: relative;
/* #ifndef APP-NVUE */
display: flex;
box-sizing: border-box;
/* #endif */
flex-direction: row;
justify-content: space-between;
align-items: center;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #eee;
}
.uni-list-item__content-title {
font-size: 14px;
}
.uni-input {
height: 28px;
line-height: 28px;
font-size: 15px;
padding: 0px;
flex: 1;
width: 280rpx;
background-color: #FFFFFF;
text-align: center;
}
.require {
color: RED;
}
// .flex-item {
// width: 33.3%;
// height: 30rpx;
// text-align: center;
// line-height: 200rpx;
// }
</style>