addhouse.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491
  1. <template>
  2. <view class="check">
  3. <view class="cbox">
  4. <view class="chtop flexc">
  5. <view class="line"></view>
  6. <view>房屋信息</view>
  7. </view>
  8. <view class="chmain">
  9. <uni-forms ref="form" :model="datainfo" :rules="rules">
  10. <view class="upbox" @click="getaddImage">
  11. <image :src="baseUrl+datainfo.front" class="img" v-if="datainfo.front"></image>
  12. <image :src="cmico" class="addimg"></image>
  13. <view>扫描房产证自动填写</view>
  14. </view>
  15. <uni-forms-item label="房屋坐落" required name="location">
  16. <view class="flexc">
  17. <uni-easyinput :disabled="isdisabled" v-model="datainfo.location" :inputBorder='false' placeholder="自动识别" />
  18. <view class="rimg"></view>
  19. </view>
  20. </uni-forms-item>
  21. <uni-forms-item label="权利人姓名" name="ownerName">
  22. <view class="flexc">
  23. <uni-easyinput :disabled="isdisabled" v-model="datainfo.ownerName" :inputBorder='false' placeholder="自动识别" />
  24. <view class="rimg"></view>
  25. </view>
  26. </uni-forms-item>
  27. <uni-forms-item label="权利类型" name="rightType">
  28. <picker range-key='dictLabel' :disabled="isdisabled" :value="qllxidx" :range="qllxList" @change='bindDateChange'>
  29. <view class="flexc">
  30. <view class="flex1 txr f13 co27" v-if="datainfo.rightType&&!qllx">{{statusFormats(datainfo.rightType,qllxList,'qllx')}}</view>
  31. <view class="flex1 txr f13" v-else :class="qllx?'co27':'coa'">{{qllx||"请选择权利类型"}}</view>
  32. <view class="rimg"><image :src="rimg"></image></view>
  33. </view>
  34. </picker>
  35. </uni-forms-item>
  36. <uni-forms-item label="建筑面积" required name="area">
  37. <view class="flexc">
  38. <uni-easyinput :disabled="isdisabled" v-model="datainfo.area" :inputBorder='false' placeholder="自动识别" />
  39. <view class="tips">m²</view>
  40. <view class="rimg"></view>
  41. </view>
  42. </uni-forms-item>
  43. <uni-forms-item label="不动产单元号" name="propertyUnitNumber">
  44. <view class="flexc">
  45. <uni-easyinput :disabled="isdisabled" v-model="datainfo.propertyUnitNumber" :inputBorder='false' placeholder="请输入不动产单元号" />
  46. <view class="rimg"></view>
  47. </view>
  48. </uni-forms-item>
  49. <uni-forms-item label="相关的字第号" name="documentNumber">
  50. <view class="flexc">
  51. <uni-easyinput :disabled="isdisabled" v-model="datainfo.documentNumber" :inputBorder='false' placeholder="请输入相关的字第号" />
  52. <view class="rimg"></view>
  53. </view>
  54. </uni-forms-item>
  55. <uni-forms-item label="小区名称" name="communityName">
  56. <view class="flexc">
  57. <uni-easyinput :disabled="isdisabled" v-model="datainfo.communityName" :inputBorder='false' placeholder="请输入小区名称" />
  58. <view class="rimg"></view>
  59. </view>
  60. </uni-forms-item>
  61. <uni-forms-item label="门牌号" required name="detailedAddress">
  62. <view class="flexc">
  63. <uni-easyinput :disabled="isdisabled" v-model="datainfo.detailedAddress" :inputBorder='false' placeholder="请输入门牌号" />
  64. <view class="rimg"></view>
  65. </view>
  66. </uni-forms-item>
  67. <uni-forms-item label="使用期限" name="usagePeriod">
  68. <view class="flexc">
  69. <uni-easyinput :disabled="isdisabled" v-model="datainfo.usagePeriod" :inputBorder='false' placeholder="请输入使用期限" />
  70. <view class="rimg"></view>
  71. </view>
  72. </uni-forms-item>
  73. <uni-forms-item label="登记日期" name="registrationDate">
  74. <!-- <picker mode="timed" :disabled="isdisabled" @change='bindDateChangea'>
  75. <view class="flexc">
  76. <view class="flex1 txr f13" :class="datainfo.registrationDate?'co27':'coa'">{{datainfo.registrationDate||"请选择登记日期"}}</view>
  77. <view class="rimg"><image :src="rimg"></image></view>
  78. </view>
  79. </picker> -->
  80. <!-- :hide-second='true' -->
  81. <view class="flexc">
  82. <uni-datetime-picker :disabled="isdisabled" :class="datainfo.registrationDate?'co27':'coa'" type="datetime" placeholder="请选择登记日期" :border="false" v-model="datainfo.registrationDate" @change="changeLog" />
  83. <view class="rimg"><image :src="rimg"></image></view>
  84. </view>
  85. </uni-forms-item>
  86. <uni-forms-item label="共有姓名" name="coOwner">
  87. <view class="flexc">
  88. <uni-easyinput :disabled="isdisabled" v-model="datainfo.coOwner" :inputBorder='false' placeholder="请输入共有姓名" />
  89. <view class="rimg"></view>
  90. </view>
  91. </uni-forms-item>
  92. <uni-forms-item label="共有情况" name="coOwnership">
  93. <view class="flexc">
  94. <uni-easyinput :disabled="isdisabled" v-model="datainfo.coOwnership" :inputBorder='false' placeholder="请输入共有情况" />
  95. <view class="rimg"></view>
  96. </view>
  97. </uni-forms-item>
  98. <uni-forms-item label="房屋状态" name="houseStatus">
  99. <picker range-key='dictLabel' :disabled="isdisabled" :value="fwztidx" :range="fwztList" @change='bindDateChangeb'>
  100. <view class="flexc">
  101. <view class="flex1 txr f13 co27" v-if="datainfo.houseStatus&&!fwzt">{{statusFormats(datainfo.houseStatus,fwztList,'fwzt')}}</view>
  102. <view class="flex1 txr f13" v-else :class="fwzt?'co27':'coa'">{{fwzt||"请选择房屋状态"}}</view>
  103. <view class="rimg"><image :src="rimg"></image></view>
  104. </view>
  105. </picker>
  106. </uni-forms-item>
  107. <uni-forms-item label="房屋用途" name="usageType">
  108. <picker range-key='dictLabel' :disabled="isdisabled" :value="fwytidx" :range="fwytList" @change='bindDateChangec'>
  109. <view class="flexc">
  110. <view class="flex1 txr f13 co27" v-if="datainfo.usageType&&!fwyt">{{statusFormats(datainfo.usageType,fwytList,'fwyt')}}</view>
  111. <view class="flex1 txr f13" v-else :class="fwyt?'co27':'coa'">{{fwyt||"请选择房屋用途"}}</view>
  112. <view class="rimg"><image :src="rimg"></image></view>
  113. </view>
  114. </picker>
  115. </uni-forms-item>
  116. <uni-forms-item label="有无车位" name="hasParkingSpace">
  117. <picker range-key='dictLabel' :disabled="isdisabled" :value="ywcwidx" :range="ywcwList" @change='bindDateChanged'>
  118. <view class="flexc">
  119. <view class="flex1 txr f13 co27" v-if="datainfo.hasParkingSpace&&!ywcw">{{statusFormats(datainfo.hasParkingSpace,ywcwList,'ywcw')}}</view>
  120. <view class="flex1 txr f13" v-else :class="ywcw?'co27':'coa'">{{ywcw||"请选择有/无"}}</view>
  121. <view class="rimg"><image :src="rimg"></image></view>
  122. </view>
  123. </picker>
  124. </uni-forms-item>
  125. <uni-forms-item label="车位号" name="parkingNumber">
  126. <view class="flexc">
  127. <uni-easyinput :disabled="isdisabled" v-model="datainfo.parkingNumber" :inputBorder='false' placeholder="请输入车位号" />
  128. <view class="rimg"></view>
  129. </view>
  130. </uni-forms-item>
  131. <!-- <uni-forms-item label="房型" name="realName">
  132. <view class="flexjd">
  133. <picker range-key='dictLabel' :value="syqxidx" :range="sexs" @change='bindDateChange'>
  134. <view class="flexc ml10">
  135. <view class="flex1 txr f13" :class="datainfo.iszc?'co27':'coa'">{{datainfo.iszc?'是':'请选择'}}</view>
  136. <view class="tips">室</view>
  137. </view>
  138. </picker>
  139. <picker range-key='dictLabel' :value="syqxidx" :range="sexs" @change='bindDateChange'>
  140. <view class="flexc ml10">
  141. <view class="flex1 txr f13" :class="datainfo.iszc?'co27':'coa'">{{datainfo.iszc?'是':'请选择'}}</view>
  142. <view class="tips">厅</view>
  143. </view>
  144. </picker>
  145. <view class="rimg"></view>
  146. </view>
  147. </uni-forms-item> -->
  148. <!-- <uni-forms-item label="住户类型" name="realName">
  149. <picker range-key='dictLabel' :disabled="isdisabled" :value="syqxidx" :range="sexs" @change='bindDateChange'>
  150. <view class="flexc">
  151. <view class="flex1 txr f13" :class="datainfo.iszc?'co27':'coa'">{{datainfo.iszc?'是':'请选择住户类型'}}</view>
  152. <view class="rimg"><image :src="rimg"></image></view>
  153. </view>
  154. </picker>
  155. </uni-forms-item> -->
  156. <!-- <uni-forms-item label="是否户主" name="phonenumber">
  157. <view class="flexc">
  158. <uni-easyinput :disabled="isdisabled" v-model="datainfo.phonenumber" disabled :inputBorder='false' placeholder="自动识别" />
  159. <view class="rimg"></view>
  160. </view>
  161. </uni-forms-item>
  162. <uni-forms-item label="与户主关系" :disabled="isdisabled" name="realName">
  163. <picker range-key='dictLabel' :value="syqxidx" :range="sexs" @change='bindDateChange'>
  164. <view class="flexc">
  165. <view class="flex1 txr f13" :class="datainfo.iszc?'co27':'coa'">{{datainfo.iszc?'是':'请选择与户主关系'}}</view>
  166. <view class="rimg"><image :src="rimg"></image></view>
  167. </view>
  168. </picker>
  169. </uni-forms-item>
  170. <uni-forms-item label="居住人口" name="realName">
  171. <picker range-key='dictLabel' :disabled="isdisabled" :value="syqxidx" :range="sexs" @change='bindDateChange'>
  172. <view class="flexc">
  173. <view class="flex1 txr f13" :class="datainfo.iszc?'co27':'coa'">{{datainfo.iszc?'是':'请选择居住人口'}}</view>
  174. <view class="rimg"><image :src="rimg"></image></view>
  175. </view>
  176. </picker>
  177. </uni-forms-item> -->
  178. </uni-forms>
  179. <view class="rhbtn mt30" @click="getEditFn" v-if="isdisabled">修改</view>
  180. <view class="rhbtn mt30" @click="getSubmit" v-else>确定添加</view>
  181. </view>
  182. </view>
  183. <loading></loading>
  184. </view>
  185. </template>
  186. <script>
  187. import config from '@/config'
  188. import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
  189. import {uploadIdentify,selectValueKey,geocodeAddress} from '@/utils/common.js'
  190. import {getDictionaryFn} from "@/api/system/user.js"
  191. import {houseInfoAdd,houseInfoPut,houseInfoDet} from "@/api/work/work.js"
  192. import {getrealEstateCertificatee} from "@/api/system/card.js"
  193. var key='';
  194. // #ifdef H5
  195. key='8de52b560193f01932ad997dba3e76c0'
  196. // #endif
  197. // #ifdef APP-PLUS
  198. key='ccbe52b1ec5f66295fa4609c90a819b7'
  199. // #endif
  200. // #ifdef MP-WEIXIN
  201. key='ccbe52b1ec5f66295fa4609c90a819b7'
  202. // #endif
  203. export default{
  204. components:{},
  205. data(){
  206. return{
  207. rimg: require('@/people/static/people/rimg.png'),
  208. cmico:require('@/people/static/people/cmico.png'),
  209. baseUrl:config.baseUrl,
  210. datainfo:{
  211. // "houseId":"",//房屋信息主键
  212. "ownerName":"",//权利人姓名
  213. "location":"",//房屋坐落位置
  214. "rightType":"",//权利类型,如所有权、使用权等
  215. "area":"",//房屋面积,单位为平方米
  216. "documentNumber":"",//房屋相关的字第号
  217. "propertyUnitNumber":"",//不动产单元号
  218. "coOwnership":"",//房屋的共有情况,如共有比例等
  219. "usageType":"",//房屋用途,如住宅、商业等
  220. "usagePeriod":"",//房屋使用期限
  221. "registrationDate":"",//房屋登记日期
  222. "coOwner":"",//共有人姓名,多个共有人可以用逗号分隔
  223. "detailedAddress":"",//房屋的详细门牌号
  224. "hasParkingSpace":"",//是否有车位,Y表示有,N表示无
  225. "communityName":"",//房屋所在小区名称
  226. "houseStatus":"",//房屋状态:1-自住,2-出租,3-空闲,4-待售
  227. "parkingNumber":'',//车位号
  228. },
  229. rules: {
  230. location: {rules: [{required: true,errorMessage: '请输入房屋坐落位置' }]},
  231. detailedAddress: {rules: [{required: true,errorMessage: '请输入详细门牌号' }]},
  232. area: {rules: [{required: true,errorMessage: '请输入面积' }]},
  233. },
  234. id:'',
  235. ptype:'add',
  236. fwzt:'',
  237. qllx:'',
  238. fwyt:'',
  239. ywcw:'',
  240. fwztidx:'',
  241. qllxidx:'',
  242. fwytidx:'',
  243. ywcwidx:'',
  244. fwztList:[],
  245. qllxList:[],
  246. fwytList:[],
  247. ywcwList:[{dictLabel:'有',dictValue:'Y'},{dictLabel:'无',dictValue:'N'},],
  248. isdisabled:false,
  249. latitude:'',
  250. longitude:"",
  251. }
  252. },
  253. onLoad: function(e) {
  254. if(e.id){
  255. this.id=e.id;
  256. this.ptype="edit";
  257. this.isdisabled=true;
  258. this.getDetail()
  259. }
  260. this.init()
  261. },
  262. onPageScroll(e) {
  263. var scrollTop = Number(e.scrollTop);
  264. if (scrollTop > 0) {
  265. this.backgroundColor = '#45CB99'
  266. } else {
  267. this.backgroundColor = 'transparent'
  268. }
  269. },
  270. methods:{
  271. checkPermi, checkRole,
  272. getEditFn(){
  273. this.isdisabled=false;
  274. },
  275. statusFormats(data, list,type) {
  276. var aite=selectValueKey(list, data);
  277. if(type=='qllx'){
  278. this.qllxidx=aite.key;
  279. }else if(type=='fwzt'){
  280. this.fwztidx=aite.key;
  281. }else if(type=='fwyt'){
  282. this.fwytidx=aite.key;
  283. }else if(type=='ywcw'){
  284. this.ywcwidx=aite.key;
  285. }
  286. return aite.actions;
  287. },
  288. init(){
  289. // 房屋状态
  290. getDictionaryFn('house_status').then(res=>{
  291. if(res.code==200){
  292. this.fwztList = res.data.map(v => {
  293. return {
  294. dictLabel: v.dictLabel,
  295. dictValue: v.dictValue
  296. }
  297. })
  298. }
  299. })
  300. //权利类型
  301. getDictionaryFn('types_rights').then(res=>{
  302. if(res.code==200){
  303. this.qllxList = res.data.map(v => {
  304. return {
  305. dictLabel: v.dictLabel,
  306. dictValue: v.dictValue
  307. }
  308. })
  309. }
  310. })
  311. //房屋用途
  312. getDictionaryFn('use_remises').then(res=>{
  313. if(res.code==200){
  314. this.fwytList = res.data.map(v => {
  315. return {
  316. dictLabel: v.dictLabel,
  317. dictValue: v.dictValue
  318. }
  319. })
  320. }
  321. })
  322. },
  323. bindDateChange(e){
  324. var val=e.detail.value;
  325. this.datainfo.rightType=this.qllxList[val].dictValue;
  326. this.qllx=this.qllxList[val].dictLabel;
  327. },
  328. bindDateChangea(e){
  329. var val=e.detail.value;
  330. this.datainfo.registrationDate=val;
  331. },
  332. bindDateChangeb(e){
  333. var val=e.detail.value;
  334. this.datainfo.houseStatus=this.fwztList[val].dictValue;
  335. this.fwzt=this.fwztList[val].dictLabel;
  336. },
  337. bindDateChangec(e){
  338. var val=e.detail.value;
  339. this.datainfo.usageType=this.fwytList[val].dictValue;
  340. this.fwyt=this.fwytList[val].dictLabel;
  341. },
  342. bindDateChanged(e){
  343. var val=e.detail.value;
  344. this.datainfo.hasParkingSpace=this.ywcwList[val].dictValue;
  345. this.ywcw=this.ywcwList[val].dictLabel;
  346. },
  347. getDetail(){
  348. houseInfoDet(this.id).then(res=>{
  349. if(res.code==200){
  350. this.datainfo=res.data;
  351. }
  352. })
  353. },
  354. async getLocation(address) {
  355. if (!address) {
  356. uni.showToast({ title: '请输入地址', icon: 'none' });
  357. return;
  358. }
  359. try {
  360. const { latitude, longitude } = await geocodeAddress(address, key);
  361. this.latitude = latitude;
  362. this.longitude = longitude;
  363. } catch (error) {
  364. uni.showToast({ title: '获取经纬度失败', icon: 'none' });
  365. }
  366. },
  367. getSubmit(){
  368. this.$refs.form.validate().then(res => {
  369. var params=JSON.parse(JSON.stringify(this.datainfo))
  370. if(this.ptype=='add'){
  371. houseInfoAdd(params).then(res=>{
  372. if(res.code==200){
  373. this.$toast("新增成功")
  374. setTimeout(function(){
  375. uni.$emit("refHouseList")
  376. uni.navigateBack({
  377. delta:1
  378. })
  379. },1500)
  380. }
  381. })
  382. }else{
  383. houseInfoPut(params).then(res=>{
  384. if(res.code==200){
  385. this.$toast("修改成功")
  386. setTimeout(function(){
  387. uni.$emit("refHouseList")
  388. uni.navigateBack({
  389. delta:1
  390. })
  391. },1500)
  392. }
  393. })
  394. }
  395. })
  396. },
  397. getaddImage(e){
  398. let that = this;
  399. let file =[],count=9
  400. uni.chooseImage({
  401. count: 1,
  402. success:function(res){
  403. let img= res.tempFilePaths;
  404. if(img.length + file.length > count){
  405. uni.showToast({
  406. title: '最多上传'+count+'张图片',
  407. icon: 'none',
  408. duration: 2000
  409. })
  410. }else{
  411. let imglen = res.tempFilePaths.length;
  412. var fuwufile = [];
  413. uploadIdentify('/common/upload',img,0,0,0,imglen,fuwufile,function(rs){
  414. var resurl=rs[0];
  415. if(rs&&rs.length>0){
  416. var obj={
  417. type:e,
  418. url:resurl.urlOnline
  419. }
  420. that.getOcrIdCard(obj)
  421. }
  422. })
  423. }
  424. }
  425. });
  426. },
  427. getOcrIdCard(obj){
  428. var params={
  429. image:obj.url
  430. }
  431. getrealEstateCertificatee(params).then(res=>{
  432. if(res.code==200){
  433. var datainfo=res.data;
  434. this.datainfo.ownerName=datainfo.ownerName;
  435. this.datainfo.location=datainfo.location;
  436. this.datainfo.rightType=datainfo.rightType;
  437. this.datainfo.area=datainfo.area;
  438. this.datainfo.documentNumber=datainfo.documentNumber;
  439. this.datainfo.propertyUnitNumber=datainfo.propertyUnitNumber;
  440. this.datainfo.coOwnership=datainfo.coOwnership;
  441. this.datainfo.usageType=datainfo.usageType;
  442. this.datainfo.usagePeriod=datainfo.usagePeriod;
  443. this.datainfo.registrationDate=datainfo.registrationDate;
  444. this.datainfo.coOwner=datainfo.coOwner;
  445. }
  446. })
  447. },
  448. }
  449. }
  450. </script>
  451. <style>
  452. page{background: #F3F3F0;}
  453. </style>
  454. <style lang="scss" scoped>
  455. .coa /deep/ .uni-date__x-input{text-align: right;color: #AAAAAA;}
  456. .check /deep/ .uni-date-editor--x__disabled{opacity: 1;}
  457. .check /deep/ .uni-forms-item{min-height: 106rpx;box-sizing: border-box;display: flex;align-items: center;margin-bottom: 0;border-bottom: 2rpx solid #E6E6E6;padding:10rpx 0;}
  458. .check /deep/ .uni-forms-item__label{font-weight: bold;font-size: 26rpx;color: #222327;flex: 0 0 auto;width: auto !important;}
  459. .check /deep/ .uni-easyinput{flex: 1;text-align: right;font-size: 26rpx;color: #222327;}
  460. .check /deep/ .uni-easyinput__content-textarea{min-height: 40rpx;font-size: 26rpx;}
  461. .check /deep/ .uni-easyinput__placeholder-class{font-size: 26rpx;color: #AAAAAA;}
  462. .check /deep/ .uni-input-input{font-size: 26rpx;}
  463. .check /deep/ .uni-textarea-textarea{font-size: 26rpx;}
  464. .check /deep/ .uni-forms-item__label text{width: 110rpx;text-align-last: justify;}
  465. .check /deep/ .uni-forms-item__label .is-required{width: auto;}
  466. .check /deep/ .is-disabled{color: #222327;background-color: #ffffff !important;}
  467. .check{min-height: 100vh;padding: 20rpx 18rpx 22rpx;box-sizing: border-box;display: flex;box-sizing: border-box;}
  468. .cbox{background: #FFFFFF;border-radius: 20rpx;flex: 1;padding-bottom: 28rpx;
  469. .chtop{padding-top: 32rpx;margin-bottom: 22rpx;
  470. .line{width: 14rpx;height: 48rpx;background: #0256FD;border-radius:0 12rpx 12rpx 0;margin-right: 18rpx;}
  471. view{font-weight: bold;font-size: 32rpx;color: #272727;}
  472. }
  473. .chmain{
  474. padding: 0 32rpx;
  475. .upbox{height: 224rpx;background: #EFF4FF;border-radius: 20rpx;display: flex;align-items: center;justify-content: center;flex-direction: column;margin-bottom: 8rpx;overflow: auto;
  476. .img{width: 100%;height: 100%;}
  477. .addimg{width: 90rpx;height: 90rpx;margin-bottom: 8rpx;}
  478. view{font-weight: bold;font-size: 26rpx;color: #4C6686;}
  479. }
  480. }
  481. .rimg{width: 16rpx;height: 28rpx;flex: 0 0 auto;margin-left: 20rpx;
  482. image{width: 100%;height: 100%;}
  483. }
  484. }
  485. .tips{font-weight: bold;color: #272727;font-size: 26rpx;margin-left: 8rpx;}
  486. </style>