租房小程序前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

552 lines
19 KiB

6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
  1. <template>
  2. <view class="se-p-40 se-bgc-white">
  3. <uv-form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="60" labelStyle="font-size:26rpx;">
  4. <uv-form-item label="标题" prop="title" >
  5. <uv-input v-model="form.title" type="text" placeholder="请输入标题" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
  6. </uv-form-item>
  7. <uv-form-item label="价格" prop="price">
  8. <uv-input v-model="form.price" type="text" placeholder="请输入价格" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
  9. </uv-form-item>
  10. <uv-form-item label="户型" prop="house">
  11. <uv-input v-model="form.house" type="text" placeholder="请输入户型" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
  12. </uv-form-item>
  13. <uv-form-item label="面积" prop="proportion">
  14. <uv-input v-model="form.proportion" type="text" placeholder="请输入面积" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
  15. </uv-form-item>
  16. <uv-form-item label="所属位置" prop="address" @click="handleAreaChange()">
  17. <uv-input v-model="form.address" @click="handleAreaChange()" disabled disabledColor="#ffffff" placeholder="所属位置" border="none">
  18. </uv-input>
  19. <template v-slot:right>
  20. <uv-icon name="arrow-right"></uv-icon>
  21. </template>
  22. </uv-form-item>
  23. <uv-form-item label="编号" prop="number">
  24. <uv-input v-model="form.number" type="text" placeholder="请输入编号" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
  25. </uv-form-item>
  26. <uv-form-item label="房屋周边" prop="perimeter">
  27. <uv-input v-model="form.perimeter" type="text" placeholder="请输入房屋周边" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
  28. </uv-form-item>
  29. <uv-form-item label="标签" prop="iconTitle">
  30. <uv-input v-model="form.iconTitle" type="text" placeholder="请输入标签用逗号隔开" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
  31. </uv-form-item>
  32. <uv-form-item label="房间数量" prop="housesNumber">
  33. <uv-number-box v-model="form.housesNumber" :min="1" :max="10"></uv-number-box>
  34. </uv-form-item>
  35. <uv-form-item label="房屋主体是否改造" labelWidth="200" prop="revamp">
  36. <uv-radio-group v-model="form.revamp" placement="row">
  37. <uv-radio name="1" label="是"></uv-radio>
  38. <uv-radio name="0" customStyle="margin-left:30rpx;" label="否"></uv-radio>
  39. </uv-radio-group>
  40. </uv-form-item>
  41. <uv-form-item label="是否经过安置" labelWidth="200" prop="resettle">
  42. <uv-radio-group v-model="form.resettle" placement="row">
  43. <uv-radio name="1" label="是"></uv-radio>
  44. <uv-radio name="0" customStyle="margin-left:30rpx;" label="否"></uv-radio>
  45. </uv-radio-group>
  46. </uv-form-item>
  47. <uv-form-item label="院子总面积" labelWidth="100" prop="yardProportion">
  48. <uv-input v-model="form.yardProportion" type="text" placeholder="请输入院子总面积" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
  49. </uv-form-item>
  50. <uv-form-item label="坟包及电塔工厂噪音" labelWidth="150" prop="noise">
  51. <uv-input v-model="form.noise" type="text" placeholder="请输入坟包及电塔工厂噪音" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
  52. </uv-form-item>
  53. <uv-form-item label="水电气网" prop="net">
  54. <uv-input v-model="form.net" type="text" placeholder="请输入水电气网" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
  55. </uv-form-item>
  56. <uv-form-item label="停车" prop="park">
  57. <uv-input v-model="form.park" type="text" placeholder="请输入停车" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
  58. </uv-form-item>
  59. <uv-form-item label="付款方式及押金" labelWidth="120" prop="deposit">
  60. <uv-input v-model="form.deposit" type="text" placeholder="请输入押金" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
  61. </uv-form-item>
  62. <uv-form-item label="天府市民云房屋信息档案查询" labelWidth="100" prop="archival" labelPosition="top">
  63. <uv-input v-model="form.archival" type="text" placeholder="请输入天府市民云房屋信息档案查询" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
  64. </uv-form-item>
  65. <uv-form-item label="租期" prop="tenancy">
  66. <uv-input v-model="form.tenancy" type="text" placeholder="请输入租期" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
  67. </uv-form-item>
  68. <uv-form-item label="邻居对房东的评价" labelWidth="120" prop="evaluate">
  69. <uv-input v-model="form.evaluate" type="text" placeholder="请输入邻居对房东的评价" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
  70. </uv-form-item>
  71. <uv-form-item label="非正常死亡" labelWidth="80" prop="death">
  72. <uv-input v-model="form.death" type="text" placeholder="请输入非正常死亡" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
  73. </uv-form-item>
  74. <uv-form-item label="钥匙" prop="key">
  75. <uv-radio-group v-model="form.key" placement="row">
  76. <uv-radio name="1" label="有"></uv-radio>
  77. <uv-radio name="0" customStyle="margin-left:30rpx;" label="无"></uv-radio>
  78. </uv-radio-group>
  79. <!-- <uv-input v-model="form.key" type="text" placeholder="请输入钥匙" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input> -->
  80. </uv-form-item>
  81. <uv-form-item label="佣金" prop="commission">
  82. <uv-input v-model="form.commission" type="text" placeholder="请输入佣金" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
  83. </uv-form-item>
  84. <uv-form-item label="年限" prop="timeGo">
  85. <uv-input v-model="form.timeGo" type="text" placeholder="请输入年限" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
  86. </uv-form-item>
  87. <uv-form-item label="报建手续" prop="procedures">
  88. <uv-input v-model="form.procedures" type="text" placeholder="请输入报建手续" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
  89. </uv-form-item>
  90. <uv-form-item label="产权证照片" labelWidth="250" prop="isOwnershipList" labelPosition="top">
  91. <uv-upload customStyle="margin-top:20rpx;" :fileList="form.ownershipList" @afterRead="afterOwnershipRead" @delete="deleteOwnershipPic" name="1"
  92. multiple :maxCount="10"></uv-upload>
  93. </uv-form-item>
  94. <uv-form-item label="房屋照片/视频" labelWidth="250" prop="isHouseList" labelPosition="top">
  95. <uv-upload customStyle="margin-top:20rpx;" :fileList="form.houseList" @afterRead="afterHouseRead" @delete="deleteHousePic" name="1"
  96. multiple :maxCount="10"></uv-upload>
  97. </uv-form-item>
  98. <uv-form-item label="视频" labelWidth="250" prop="isMp4List" labelPosition="top">
  99. <uv-upload customStyle="margin-top:20rpx;" :fileList="form.mp4List" @afterRead="aftermp4Read" @delete="deletemp4Pic" name="1"
  100. multiple :maxCount="10"></uv-upload>
  101. </uv-form-item>
  102. <uv-form-item label="备注" prop="remark" labelPosition="top">
  103. <uv-input v-model="form.remark" type="text" placeholder="请输入备注" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
  104. </uv-form-item>
  105. <uv-form-item>
  106. <uv-button type="primary" text="确认发布" customStyle="margin-top: 30px;background-color: #1EC77A;border-radius: 30px;" @click="submit"></uv-button>
  107. </uv-form-item>
  108. </uv-form>
  109. <!-- 地址 -->
  110. <citySelect ref="citySelectRef" :zIndex="0" @city-change="handleCityChange"></citySelect>
  111. </view>
  112. </template>
  113. <script>
  114. import { saveOrUpdateHouse } from "@/common/api.js"
  115. import citySelect from "@/components/cityselect/index.vue"
  116. export default{
  117. components:{
  118. citySelect
  119. },
  120. data(){
  121. return{
  122. id:"",
  123. form:{
  124. // title:"这是标题",//标题
  125. // price:"32.34",//价格
  126. // house:"这是户型",//户型
  127. // proportion:"89",//面积
  128. // address:"湖南长沙岳麓区",//所属位置
  129. // number:"2006",//编号
  130. // perimeter:"商场,地铁",//房屋周边
  131. // iconTitle:"商场,地铁,学校",//标签
  132. // housesNumber:1,//房间数量
  133. // revamp:0,//房屋主体是否改造
  134. // resettle:0,//是否经过安置
  135. // yardProportion:"无",//院子总面积
  136. // noise:"大",//噪音
  137. // net:"有",//水电气网
  138. // park:"有一个停车位",//停车
  139. // deposit:"1200",//押金
  140. // archival:"档案查询",//档案查询
  141. // tenancy:"租期",//租期
  142. // evaluate:"评价",//评价
  143. // death:"非正常死亡",//非正常死亡
  144. // key:"1",//钥匙
  145. // commission:"230",//佣金
  146. // timeGo:"",//年限
  147. // procedures:"20",//手续
  148. // isOwnershipList:"1",
  149. // ownershipList:[
  150. // {
  151. // url:"https://tennis-oss.xzaiyp.top/2024-12-04/61d46ae3-bf72-430f-8046-698b92b18f81.jpg"
  152. // },
  153. // {
  154. // url:"https://tennis-oss.xzaiyp.top/2024-12-04/3987c047-1c50-43e4-940d-9ce96cd06225.jpg"
  155. // }
  156. // ],
  157. // isHouseList:"1",
  158. // houseList:[
  159. // {
  160. // url:"https://tennis-oss.xzaiyp.top/2024-12-04/61d46ae3-bf72-430f-8046-698b92b18f81.jpg"
  161. // },
  162. // {
  163. // url:"https://tennis-oss.xzaiyp.top/2024-12-04/3987c047-1c50-43e4-940d-9ce96cd06225.jpg"
  164. // }
  165. // ],
  166. // isMp4List:"1",
  167. // mp4List:[],
  168. // remark:""
  169. title:"",//标题
  170. price:"",//价格
  171. house:"",//户型
  172. proportion:"",//面积
  173. address:"",//所属位置
  174. number:"",//编号
  175. perimeter:"",//房屋周边
  176. iconTitle:"",//标签
  177. housesNumber:1,//房间数量
  178. revamp:0,//房屋主体是否改造
  179. resettle:0,//是否经过安置
  180. yardProportion:"",//院子总面积
  181. noise:"",//噪音
  182. net:"",//水电气网
  183. park:"",//停车
  184. deposit:"",//押金
  185. archival:"",//档案查询
  186. tenancy:"",//租期
  187. evaluate:"",//评价
  188. death:"",//非正常死亡
  189. key:"1",//钥匙
  190. commission:"",//佣金
  191. timeGo:"",//年限
  192. procedures:"",//手续
  193. isOwnershipList:"",
  194. ownershipList:[],
  195. isHouseList:"",
  196. houseList:[],
  197. isMp4List:"",
  198. mp4List:[],
  199. remark:""
  200. },
  201. rules:{
  202. title:[
  203. {
  204. type: 'string',
  205. required: true,
  206. message: '请输入账号',
  207. trigger: ['blur', 'change']
  208. }
  209. ],
  210. price:[
  211. {
  212. type: 'string',
  213. required: true,
  214. message: '请输入价格',
  215. trigger: ['blur', 'change']
  216. }
  217. ],
  218. house:[
  219. {
  220. type: 'string',
  221. required: true,
  222. message: '请输入户型',
  223. trigger: ['blur', 'change']
  224. }
  225. ],
  226. proportion:[
  227. {
  228. type: 'string',
  229. required: true,
  230. message: '请输入面积',
  231. trigger: ['blur', 'change']
  232. }
  233. ],
  234. number:[
  235. {
  236. type: 'string',
  237. required: true,
  238. message: '请输入编号',
  239. trigger: ['blur', 'change']
  240. }
  241. ],
  242. perimeter:[
  243. {
  244. type: 'string',
  245. required: true,
  246. message: '请输入房屋周边',
  247. trigger: ['blur', 'change']
  248. }
  249. ],
  250. iconTitle:[
  251. {
  252. type: 'string',
  253. required: true,
  254. message: '请输入标签用,隔开',
  255. trigger: ['blur', 'change']
  256. }
  257. ],
  258. yardProportion:[
  259. {
  260. type: 'string',
  261. required: true,
  262. message: '请输入院子总面积',
  263. trigger: ['blur', 'change']
  264. }
  265. ],
  266. noise:[
  267. {
  268. type: 'string',
  269. required: true,
  270. message: '请输入坟包及电塔工厂噪音',
  271. trigger: ['blur', 'change']
  272. }
  273. ],
  274. net:[
  275. {
  276. type: 'string',
  277. required: true,
  278. message: '请输入水电气网',
  279. trigger: ['blur', 'change']
  280. }
  281. ],
  282. park:[
  283. {
  284. type: 'string',
  285. required: true,
  286. message: '请输入停车',
  287. trigger: ['blur', 'change']
  288. }
  289. ],
  290. deposit:[
  291. {
  292. type: 'string',
  293. required: true,
  294. message: '请输入押金',
  295. trigger: ['blur', 'change']
  296. }
  297. ],
  298. archival:[
  299. {
  300. type: 'string',
  301. required: true,
  302. message: '请输入天府市民云房屋信息档案查询',
  303. trigger: ['blur', 'change']
  304. }
  305. ],
  306. tenancy:[
  307. {
  308. type: 'string',
  309. required: true,
  310. message: '请输入租期',
  311. trigger: ['blur', 'change']
  312. }
  313. ],
  314. evaluate:[
  315. {
  316. type: 'string',
  317. required: true,
  318. message: '请输入邻居对房东的评价',
  319. trigger: ['blur', 'change']
  320. }
  321. ],
  322. death:[
  323. {
  324. type: 'string',
  325. required: true,
  326. message: '请输入非正常死亡',
  327. trigger: ['blur', 'change']
  328. }
  329. ],
  330. key:[
  331. {
  332. type: 'string',
  333. required: true,
  334. message: '请输入钥匙',
  335. trigger: ['blur', 'change']
  336. }
  337. ],
  338. commission:[
  339. {
  340. type: 'string',
  341. required: true,
  342. message: '请输入佣金',
  343. trigger: ['blur', 'change']
  344. }
  345. ],
  346. timeGo:[
  347. {
  348. type: 'string',
  349. required: true,
  350. message: '请输入年限',
  351. trigger: ['blur', 'change']
  352. }
  353. ],
  354. procedures:[
  355. {
  356. type: 'string',
  357. required: true,
  358. message: '请输入报建手续',
  359. trigger: ['blur', 'change']
  360. }
  361. ],
  362. }
  363. }
  364. },
  365. watch: {
  366. 'form.ownershipList'(newValue, oldValue) {
  367. if (newValue.length > 0) {
  368. this.form.isOwnershipList = '有'
  369. } else {
  370. this.form.isOwnershipList = ''
  371. }
  372. },
  373. 'form.houseList'(newValue, oldValue) {
  374. if (newValue.length > 0) {
  375. this.form.isHouseList = '有'
  376. } else {
  377. this.form.isHouseList = ''
  378. }
  379. },
  380. 'form.mp4List'(newValue, oldValue) {
  381. if (newValue.length > 0) {
  382. this.form.isMp4List = '有'
  383. } else {
  384. this.form.isMp4List = ''
  385. }
  386. }
  387. },
  388. onReady() {
  389. this.$refs.form.setRules(this.rules)
  390. },
  391. onLoad(options) {
  392. this.id = options.id
  393. },
  394. mounted() {
  395. },
  396. methods:{
  397. deleteHousePic(event) {
  398. this.form.houseList.splice(event.index, 1)
  399. },
  400. async afterHouseRead(e) {
  401. let self = this
  402. e.file.forEach(file => {
  403. self.$Oss.ossUpload(file.url).then(url => {
  404. self.form.houseList.push({
  405. url
  406. })
  407. })
  408. })
  409. },
  410. deleteOwnershipPic(event) {
  411. this.form.ownershipList.splice(event.index, 1)
  412. },
  413. async afterOwnershipRead(e) {
  414. let self = this
  415. e.file.forEach(file => {
  416. self.$Oss.ossUpload(file.url).then(url => {
  417. self.form.ownershipList.push({
  418. url
  419. })
  420. })
  421. })
  422. },
  423. deletemp4Pic(event) {
  424. this.form.mp4List.splice(event.index, 1)
  425. },
  426. async aftermp4Read(e) {
  427. let self = this
  428. e.file.forEach(file => {
  429. self.$Oss.ossUpload(file.url).then(url => {
  430. self.form.mp4List.push({
  431. url
  432. })
  433. })
  434. })
  435. },
  436. handleAreaChange(){
  437. this.$refs.citySelectRef.open()
  438. },
  439. handleCityChange(e) {
  440. this.form.address = e.province.label + '-' + e.city.label + '-' + e.area.label;
  441. },
  442. submit() {
  443. // price:"",//价格
  444. // house:"",//户型
  445. // proportion:"",//面积
  446. // address:"",//所属位置
  447. // number:"",//编号
  448. // perimeter:"",//房屋周边
  449. // housesNumber:1,//房间数量
  450. // revamp:0,//房屋主体是否改造
  451. // resettle:0,//是否经过安置
  452. // yardProportion:"",//院子总面积
  453. // noise:"",//噪音
  454. // net:"",//水电气网
  455. // park:"",//停车
  456. // deposit:"",//押金
  457. // archival:"",//档案查询
  458. // tenancy:"",//租期
  459. // evaluate:"",//评价
  460. // death:"",//非正常死亡
  461. // key:"",//钥匙
  462. // commission:"",//佣金
  463. // procedures:"",//手续
  464. // isOwnershipList:"",
  465. // ownershipList:[],
  466. // isHouseList:"",
  467. // houseList:[],
  468. // remark:""
  469. let that = this
  470. that.$refs.form.validate().then(res => {
  471. let params={
  472. userId:"",
  473. id:"",
  474. classId:"",//分类标识
  475. commonClass:"",//所属分类
  476. address:that.form.address,//地址
  477. homeAge:"",//户主年龄
  478. homeAz:"",//是否经过安置
  479. homeBian:"",//房屋周边
  480. homeBjsx:"",//报建手续
  481. homeCai:"",//菜地
  482. homeCat:that.form.park,//停车
  483. homeGz:that.form.revamp,//房屋主体是否改造
  484. homeHb:"",//房屋朝向及海拔
  485. homeBz:that.form.remark,//备注
  486. homeJg:"",//房屋结构
  487. homeJl:"",//距离场镇距离
  488. homeJt:"",//交通
  489. homeJtzy:"",//户主家庭职业
  490. homeMi:"",//面积
  491. homeMj:that.form.proportion,//房屋面积
  492. homeMoney:that.form.commission,//佣金
  493. homeNo:"",//房屋编号
  494. homeNum:that.form.housesNumber,//房间数量
  495. homePay:that.form.deposit,//付款方式及押金
  496. homePj:that.form.evaluate,//邻居对房东评价
  497. homeSd:that.form.net,//水电气网
  498. homeShjl:"",//距离成都西三环
  499. homeSw:that.form.death,//非正常死亡
  500. homeTf:"",//府市民云房屋信息档案查询
  501. homeTime:that.form.tenancy,//租期
  502. homeType:that.form.house,//户型
  503. homeYs:that.form.key,//钥匙
  504. homeYzmj:that.form.yardProportion,//院子总面积
  505. homeZy:that.form.noise,//坟包及电塔 工厂噪音
  506. iconName:"",//热点名称
  507. iconTitle:that.form.iconTitle,//标签
  508. num:"",//浏览量
  509. price:that.form.price,//价格
  510. timeGo:that.form.timeGo,//年限
  511. title:that.form.title,//标题
  512. unit:"",//单位
  513. image:that.form.ownershipList.map(item => item.url).join(','),//图片
  514. iconImage:"",//左上角图标
  515. homeImage:that.form.houseList.map(item => item.url).join(','),//产权证照片
  516. homeMp4:"",//视频
  517. }
  518. saveOrUpdateHouse(params).then(response=>{
  519. console.info('response',response)
  520. uni.showToast({
  521. title: response.message,
  522. mask: false,
  523. icon: 'none',
  524. duration: 2000
  525. })
  526. setTimeout(()=>{
  527. uni.redirectTo({
  528. url:"/pages_subpack/successful-apply/index"
  529. })
  530. },2000)
  531. }).catch(error=>{
  532. })
  533. }).catch(errors => {
  534. console.info('errors',errors)
  535. })
  536. }
  537. }
  538. }
  539. </script>
  540. <style>
  541. page{
  542. background-color: #f5f5f5;
  543. }
  544. </style>