selectedHouseList.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611
  1. <template>
  2. <div class="selectedHouseList">
  3. <div class="form">
  4. <div class="form-row">
  5. <div class="form-label">项目-分期:</div>
  6. <div class="form-value">{{ option.groupDiscName }}</div>
  7. </div>
  8. <div class="form-row">
  9. <div class="form-label">批次号-选房号:</div>
  10. <div class="form-value">
  11. {{ option.batchNumber + "-" + option.roomSelectionNumber }}
  12. </div>
  13. </div>
  14. <div class="form-row">
  15. <div class="form-label">买受人:</div>
  16. <div class="form-value">{{ option.buyerName }}</div>
  17. </div>
  18. <div class="form-row">
  19. <div class="form-label">选房日期:</div>
  20. <div class="form-value">{{ option.roomSelectionDate }}</div>
  21. </div>
  22. <div class="midRow" style="display: flex; justify-content: flex-end">
  23. <van-button type="info" size="mini" @click="toChoose(item)"
  24. >去选房</van-button
  25. >
  26. </div>
  27. </div>
  28. <div class="bottomBody">
  29. <div class="listBody">
  30. <div class="listItem" v-for="(item, index) in roomList">
  31. <div class="firstRow">
  32. <span class="itemTitle">
  33. {{ item.buildName }}
  34. </span>
  35. <span
  36. class="tag"
  37. v-if="DECORATION_SITUATION[item.status - 1].label"
  38. >
  39. {{ DECORATION_SITUATION[item.status - 1].label }}
  40. </span>
  41. </div>
  42. <div
  43. style="
  44. display: flex;
  45. align-items: center;
  46. justify-content: space-around;
  47. "
  48. >
  49. <div style="width: 90%">
  50. <div class="midRow">
  51. <span style="width: 300rpx"
  52. >建筑面积:{{ item.actualBuildArea }}㎡</span
  53. >
  54. <span>套内面积:{{ item.actualInternalArea }}㎡</span>
  55. </div>
  56. <div class="midRow">
  57. <span style="width: 300rpx"
  58. >经办人:{{ item.createdName }}</span
  59. >
  60. <span>经办日期:{{ item.createdAt }}</span>
  61. </div>
  62. <div class="midRow">
  63. <span>户室号:{{ item.roomNo }}</span>
  64. </div>
  65. </div>
  66. <div>
  67. <van-icon
  68. name="cross"
  69. size="48rpx"
  70. color="#1989fa"
  71. @click="deleteRow(index)"
  72. />
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. <div class="bottom-tools">
  79. <van-button type="default" size="normal" @click="cancel">取消</van-button>
  80. <van-button type="info" size="normal" @click="submitHouse()"
  81. >提交选房</van-button
  82. >
  83. </div>
  84. </div>
  85. </template>
  86. <script>
  87. import {
  88. findXiangMuList,
  89. findFenQiList,
  90. findRoomByCondition,
  91. getSelectedList,
  92. getByCodes,
  93. getUserLocalStorageInfo,
  94. submitHouse,
  95. } from "@/js_sdk/http";
  96. export default {
  97. name: "selectedHouseList",
  98. data() {
  99. return {
  100. dic_key: ["DECORATION_SITUATION"],
  101. SOLD_STATUS: [],
  102. DECORATION_SITUATION: [],
  103. SALE_STATUS: [],
  104. DECORATION_SITUATION: [],
  105. BIZ_OA: [],
  106. mnpList: [],
  107. usageList: [],
  108. natureList: [],
  109. value1: "",
  110. parkSelect: true,
  111. properties: [
  112. // {name:'一期', select:true},
  113. // {name:'二期', select:false},
  114. // {name:'三期', select:false},
  115. // {name:'四期', select:false},
  116. ],
  117. saleStatusStr: [],
  118. toward: [],
  119. avaStatus: [],
  120. soldStatusStr: [],
  121. decorationSituation: [],
  122. roomUseStr: [],
  123. propertyNature: [],
  124. height: 1036,
  125. active: 0,
  126. groupIds: [],
  127. xiangmu: [],
  128. fenqi_loacldata: [],
  129. loudongList: [],
  130. form: {
  131. pageNum: 1,
  132. pageSize: 10,
  133. roomUseStr: "",
  134. },
  135. decorationSituationStr: [],
  136. option: {},
  137. total: 0,
  138. roomList: [],
  139. discIds: [],
  140. HOUSE_USAGE: [],
  141. timeout: null,
  142. };
  143. },
  144. onLoad(option) {
  145. this.option = option;
  146. this.findXiangMuList();
  147. this.getByCodes();
  148. },
  149. onShow() {
  150. uni.$on("getSelectedList", (data) => {
  151. let copyData = JSON.parse(JSON.stringify(data));
  152. const now = new Date();
  153. const year = now.getFullYear();
  154. const month = now.getMonth() + 1; // 月份从 0 开始,因此需要加 1
  155. const day = now.getDate();
  156. for (let i = 0; i < copyData.length; i++) {
  157. copyData[i].createdAt = `${year}-${month}-${day}`;
  158. copyData[i].createdName = getUserLocalStorageInfo().truename;
  159. copyData[i].houseId = copyData[i].id;
  160. console.log("copyData[i].createdAt", copyData[i].createdAt);
  161. }
  162. this.roomList = [...copyData];
  163. });
  164. },
  165. // onReachBottom() {
  166. // this.form.pageNum += 1;
  167. // this.search();
  168. // },
  169. methods: {
  170. cancel() {
  171. uni.navigateBack();
  172. },
  173. async submitHouse() {
  174. console.log(this.roomList);
  175. let idArray = this.roomList.map((e) => e.houseId);
  176. console.log(idArray);
  177. if (idArray.length == 0) {
  178. this.$showToast("请选房");
  179. return;
  180. }
  181. let form = {
  182. customerManagementId: this.option.id,
  183. houseIds: idArray.join(),
  184. userId: getUserLocalStorageInfo().id,
  185. };
  186. console.log(form);
  187. let data = await submitHouse(form);
  188. console.log(data);
  189. if (data.code == 200) {
  190. this.$showToast("已提交选房");
  191. uni.navigateBack();
  192. }
  193. },
  194. reset() {
  195. this.roomUseStr = [];
  196. this.discIds = [];
  197. this.toward = [];
  198. this.avaStatus = [];
  199. this.rentalStatus = [];
  200. this.roomUseStr = [];
  201. this.loudongList = [];
  202. this.roomList = [];
  203. this.form = {
  204. pageNum: 1,
  205. pageSize: 10,
  206. };
  207. this.findXiangMuList();
  208. this.getByCodes();
  209. },
  210. deleteRow(index) {
  211. this.roomList.splice(index, 1);
  212. },
  213. newSearch() {
  214. this.roomList = [];
  215. this.search.pageNum = 1;
  216. this.search();
  217. },
  218. clickGroupItem(item) {
  219. item.select = !item.select;
  220. if (this.groupIds.includes(item.value)) {
  221. this.groupIds = this.groupIds.filter(function (ele) {
  222. return ele !== item.value;
  223. });
  224. } else {
  225. this.groupIds.push(item.value);
  226. }
  227. this.form.groupIds = this.groupIds.join(",");
  228. if (this.form.groupIds) {
  229. this.yuanQuChange();
  230. this.roomList = [];
  231. this.search.pageNum = 1;
  232. this.search();
  233. }
  234. },
  235. async yuanQuChange() {
  236. let data = await findFenQiList(this.form.groupIds);
  237. this.roomList = [];
  238. this.loudongList = [];
  239. if (data.length > 0) {
  240. this.fenqi_loacldata = data.map((e) => {
  241. return {
  242. value: e.id,
  243. name: e.name,
  244. select: false,
  245. };
  246. });
  247. } else {
  248. this.fenqi_loacldata = [{ value: null, name: "暂无", select: false }];
  249. }
  250. },
  251. findXiangMuList() {
  252. findXiangMuList().then((data) => {
  253. let yuanqu_list = [...data];
  254. let xiangmu = yuanqu_list.map((e) => {
  255. return {
  256. value: e.groupId,
  257. name: e.name,
  258. select: false,
  259. };
  260. });
  261. this.xiangmu = [{ value: "", name: "全部", select: true }, ...xiangmu];
  262. this.form.pageNum = 1;
  263. this.discIds = [];
  264. this.roomList = [];
  265. this.search();
  266. });
  267. },
  268. clickItem(item) {
  269. item.select = !item.select;
  270. if (this.discIds.includes(item.value)) {
  271. // includes()方法判断是否包含某一元素,返回true或false表示是否包含元素,对NaN一样有效
  272. // filter()方法用于把Array的某些元素过滤掉,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素:生成新的数组
  273. this.discIds = this.discIds.filter(function (ele) {
  274. return ele !== item.value;
  275. });
  276. } else {
  277. this.discIds.push(item.value);
  278. }
  279. this.form.discIds = this.discIds.join(",");
  280. this.form.pageNum = 1;
  281. this.roomList = [];
  282. this.search();
  283. },
  284. async fenQiChange() {
  285. try {
  286. let data = await findFenQiList(this.form.discIds);
  287. if (data.length == 0) {
  288. this.loudongList = [];
  289. this.roomList = [];
  290. return;
  291. } else {
  292. this.loudongList = [...data];
  293. this.form.mnpBuildingIds = data[0].id;
  294. this.roomList = [];
  295. }
  296. let row = await getSelectedList(this.form);
  297. this.roomList = row;
  298. this.form.total = row.length;
  299. this.vamTabStatus = true;
  300. } catch (e) {}
  301. },
  302. async buildChange(e) {
  303. this.form.mnpBuildingIds = e.detail.name;
  304. let data = await getSelectedList(this.form);
  305. this.roomList = data;
  306. this.form.total = data.length;
  307. },
  308. async search() {
  309. let data = await getSelectedList({
  310. customerManagementId: this.option.id,
  311. });
  312. if (data.total == this.roomList.length) {
  313. return false;
  314. } else {
  315. this.roomList.push(...data);
  316. }
  317. },
  318. getDicType(type, value) {
  319. if (!value) return;
  320. if (type == "zaiti") {
  321. let PROPERTY_NATURE = this.dic_SelectList.PROPERTY_NATURE;
  322. let index = PROPERTY_NATURE.findIndex((e) => e.value == value);
  323. return PROPERTY_NATURE[index].label;
  324. }
  325. },
  326. onChange(e) {
  327. // console.log(e)
  328. this.toward = e.detail;
  329. this.form.roomDirection = this.toward.join(",");
  330. },
  331. saleStatusStrChange(e) {
  332. this.saleStatusStr = e.detail;
  333. this.form.saleStatusStr = this.saleStatusStr.join(",");
  334. },
  335. soldStatusStrChange(e) {
  336. this.soldStatusStr = e.detail;
  337. this.form.soldStatusStr = this.soldStatusStr.join(",");
  338. },
  339. decorationSituationStrChange(e) {
  340. this.decorationSituationStr = e.detail;
  341. this.form.decorationSituationStr = this.decorationSituationStr.join(",");
  342. },
  343. roomUseStrChange(e) {
  344. console.log(e.detail);
  345. this.roomUseStr = e.detail;
  346. this.form.roomUseStr = this.roomUseStr.join(",");
  347. },
  348. natureChange(e) {
  349. this.propertyNature = e.detail;
  350. this.form.propertyNature = this.propertyNature.join(",");
  351. },
  352. closeSelectBody() {
  353. if (this.height > 1000) {
  354. this.height = 130;
  355. } else {
  356. this.height = 1036;
  357. }
  358. },
  359. async getByCodes() {
  360. let data = await getByCodes(JSON.stringify(this.dic_key));
  361. this.dic_SelectList = this.$common.handleDicList(data);
  362. this.DECORATION_SITUATION = this.dic_SelectList.DECORATION_SITUATION;
  363. },
  364. toChoose(item) {
  365. uni.navigateTo({
  366. url: "/pages/subPackages/chooseHouse/selectHouseList",
  367. });
  368. },
  369. },
  370. };
  371. </script>
  372. <style lang="scss">
  373. .selectedHouseList {
  374. padding-bottom: 150rpx;
  375. .bottom-tools {
  376. display: flex;
  377. width: 100%;
  378. padding: 15rpx;
  379. box-sizing: border-box;
  380. position: fixed;
  381. justify-content: space-around;
  382. bottom: 35rpx;
  383. button {
  384. width: 240rpx;
  385. }
  386. padding: 15rpx;
  387. }
  388. .form {
  389. margin-bottom: 12rpx;
  390. background: white;
  391. padding: 12rpx 32rpx;
  392. .form-row {
  393. display: flex;
  394. padding: 6rpx 0rpx;
  395. background: white;
  396. }
  397. .form-label {
  398. }
  399. }
  400. .topSearchBox {
  401. background: white;
  402. padding: 16rpx 32rpx;
  403. .van-cell {
  404. background: rgba(245, 247, 250, 1);
  405. width: 686rpx;
  406. border: 1px solid rgba(234, 237, 242, 1);
  407. border-radius: 8rpx;
  408. box-sizing: border-box;
  409. padding: 12rpx 32rpx;
  410. }
  411. .van-icon {
  412. color: rgba(3, 101, 249, 1);
  413. font-size: 40rpx;
  414. }
  415. }
  416. .selectBody {
  417. background: white;
  418. display: flex;
  419. flex-direction: column;
  420. margin: 24rpx 0;
  421. padding: 12rpx 32rpx 36rpx 32rpx;
  422. box-sizing: border-box;
  423. overflow: hidden;
  424. position: relative;
  425. .selectRow {
  426. display: flex;
  427. align-items: center;
  428. margin-top: 18rpx;
  429. .rowTitle {
  430. min-width: 120rpx;
  431. color: rgba(51, 51, 51, 1);
  432. font-size: 30rpx;
  433. text-align: right;
  434. }
  435. .selectItemBox {
  436. display: flex;
  437. align-items: center;
  438. margin-left: 24rpx;
  439. white-space: nowrap;
  440. flex-wrap: wrap;
  441. .unSelectItem {
  442. display: flex;
  443. align-items: center;
  444. justify-content: center;
  445. font-size: 28rpx;
  446. color: rgba(102, 102, 102, 1);
  447. padding: 8rpx 18rpx;
  448. background: rgba(245, 247, 250, 1);
  449. border-radius: 8rpx;
  450. margin-right: 24rpx;
  451. margin-top: 5rpx;
  452. }
  453. .selectItem {
  454. display: flex;
  455. align-items: center;
  456. justify-content: center;
  457. font-size: 28rpx;
  458. color: rgba(3, 101, 249, 1);
  459. padding: 8rpx 18rpx;
  460. background: rgba(3, 101, 249, 0.1);
  461. border-radius: 8rpx;
  462. margin-right: 24rpx;
  463. }
  464. .van-checkbox-group {
  465. display: flex;
  466. flex-wrap: wrap;
  467. .van-checkbox {
  468. margin-right: 24rpx;
  469. }
  470. .van-checkbox__label {
  471. padding-left: 6rpx;
  472. font-size: 28rpx;
  473. color: rgba(102, 102, 102, 1);
  474. }
  475. .van-checkbox__icon {
  476. width: 30rpx;
  477. height: 30rpx;
  478. }
  479. .van-icon,
  480. .van-icon:before {
  481. font-size: 24rpx;
  482. }
  483. .van-checkbox__icon--checked {
  484. background: rgba(3, 101, 249, 1);
  485. }
  486. }
  487. .myIpt {
  488. width: 540rpx;
  489. height: 64rpx;
  490. text-align: center;
  491. background: rgba(245, 247, 250, 1);
  492. box-sizing: border-box;
  493. font-size: 26rpx;
  494. }
  495. }
  496. .fenqiBox {
  497. overflow-x: scroll;
  498. }
  499. .selectItemBoxMoreItem {
  500. .van-checkbox {
  501. margin: 0 24rpx 24rpx 0;
  502. }
  503. }
  504. }
  505. .btnBox {
  506. display: flex;
  507. align-items: center;
  508. justify-content: center;
  509. margin-top: 48rpx;
  510. .czBtn {
  511. background: rgba(3, 101, 249, 0.1);
  512. border-radius: 8rpx;
  513. width: 240rpx;
  514. height: 80rpx;
  515. display: flex;
  516. align-items: center;
  517. justify-content: center;
  518. color: rgba(3, 101, 249, 1);
  519. font-size: 34rpx;
  520. letter-spacing: 2rpx;
  521. }
  522. .ssBtn {
  523. background: rgba(3, 101, 249, 1);
  524. border-radius: 8rpx;
  525. width: 300rpx;
  526. height: 80rpx;
  527. display: flex;
  528. align-items: center;
  529. justify-content: center;
  530. color: white;
  531. font-size: 34rpx;
  532. letter-spacing: 2rpx;
  533. margin-left: 32rpx;
  534. }
  535. }
  536. .arrowDown {
  537. position: absolute;
  538. left: 50%;
  539. margin-left: -20rpx;
  540. top: 50rpx;
  541. }
  542. }
  543. .bottomBody {
  544. padding: 32rpx;
  545. background: white;
  546. width: 100%;
  547. box-sizing: border-box;
  548. .sumBox {
  549. color: rgba(51, 51, 51, 1);
  550. font-size: 28rpx;
  551. margin: 24rpx 0;
  552. }
  553. .listBody {
  554. display: flex;
  555. flex-direction: column;
  556. :last-child {
  557. border-bottom: none !important;
  558. }
  559. .listItem {
  560. padding: 24rpx 0;
  561. border-bottom: 1px solid rgba(230, 230, 230, 1);
  562. .firstRow {
  563. display: flex;
  564. align-items: center;
  565. justify-content: space-between;
  566. .itemTitle {
  567. font-size: 32rpx;
  568. color: rgba(51, 51, 51, 1);
  569. font-weight: 600;
  570. }
  571. .tag {
  572. padding: 12rpx 24rpx;
  573. display: flex;
  574. align-items: center;
  575. justify-content: center;
  576. font-size: 26rpx;
  577. color: rgba(3, 101, 249, 1);
  578. background: linear-gradient(316deg, #d1e4ff 0%, #adceff 100%);
  579. border-radius: 8rpx;
  580. }
  581. }
  582. .midRow {
  583. display: flex;
  584. align-items: center;
  585. color: rgba(136, 136, 136, 1);
  586. font-size: 28rpx;
  587. margin: 12rpx 0;
  588. }
  589. .bottomRow {
  590. display: flex;
  591. align-items: center;
  592. color: rgba(51, 51, 51, 1);
  593. font-size: 28rpx;
  594. margin-top: 8rpx;
  595. .money {
  596. color: rgba(226, 81, 0, 1);
  597. font-size: 40rpx;
  598. }
  599. }
  600. }
  601. }
  602. }
  603. }
  604. </style>