123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611 |
- <template>
- <div class="selectedHouseList">
- <div class="form">
- <div class="form-row">
- <div class="form-label">项目-分期:</div>
- <div class="form-value">{{ option.groupDiscName }}</div>
- </div>
- <div class="form-row">
- <div class="form-label">批次号-选房号:</div>
- <div class="form-value">
- {{ option.batchNumber + "-" + option.roomSelectionNumber }}
- </div>
- </div>
- <div class="form-row">
- <div class="form-label">买受人:</div>
- <div class="form-value">{{ option.buyerName }}</div>
- </div>
- <div class="form-row">
- <div class="form-label">选房日期:</div>
- <div class="form-value">{{ option.roomSelectionDate }}</div>
- </div>
- <div class="midRow" style="display: flex; justify-content: flex-end">
- <van-button type="info" size="mini" @click="toChoose(item)"
- >去选房</van-button
- >
- </div>
- </div>
- <div class="bottomBody">
- <div class="listBody">
- <div class="listItem" v-for="(item, index) in roomList">
- <div class="firstRow">
- <span class="itemTitle">
- {{ item.buildName }}
- </span>
- <span
- class="tag"
- v-if="DECORATION_SITUATION[item.status - 1].label"
- >
- {{ DECORATION_SITUATION[item.status - 1].label }}
- </span>
- </div>
- <div
- style="
- display: flex;
- align-items: center;
- justify-content: space-around;
- "
- >
- <div style="width: 90%">
- <div class="midRow">
- <span style="width: 300rpx"
- >建筑面积:{{ item.actualBuildArea }}㎡</span
- >
- <span>套内面积:{{ item.actualInternalArea }}㎡</span>
- </div>
- <div class="midRow">
- <span style="width: 300rpx"
- >经办人:{{ item.createdName }}</span
- >
- <span>经办日期:{{ item.createdAt }}</span>
- </div>
- <div class="midRow">
- <span>户室号:{{ item.roomNo }}</span>
- </div>
- </div>
- <div>
- <van-icon
- name="cross"
- size="48rpx"
- color="#1989fa"
- @click="deleteRow(index)"
- />
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="bottom-tools">
- <van-button type="default" size="normal" @click="cancel">取消</van-button>
- <van-button type="info" size="normal" @click="submitHouse()"
- >提交选房</van-button
- >
- </div>
- </div>
- </template>
- <script>
- import {
- findXiangMuList,
- findFenQiList,
- findRoomByCondition,
- getSelectedList,
- getByCodes,
- getUserLocalStorageInfo,
- submitHouse,
- } from "@/js_sdk/http";
- export default {
- name: "selectedHouseList",
- data() {
- return {
- dic_key: ["DECORATION_SITUATION"],
- SOLD_STATUS: [],
- DECORATION_SITUATION: [],
- SALE_STATUS: [],
- DECORATION_SITUATION: [],
- BIZ_OA: [],
- mnpList: [],
- usageList: [],
- natureList: [],
- value1: "",
- parkSelect: true,
- properties: [
- // {name:'一期', select:true},
- // {name:'二期', select:false},
- // {name:'三期', select:false},
- // {name:'四期', select:false},
- ],
- saleStatusStr: [],
- toward: [],
- avaStatus: [],
- soldStatusStr: [],
- decorationSituation: [],
- roomUseStr: [],
- propertyNature: [],
- height: 1036,
- active: 0,
- groupIds: [],
- xiangmu: [],
- fenqi_loacldata: [],
- loudongList: [],
- form: {
- pageNum: 1,
- pageSize: 10,
- roomUseStr: "",
- },
- decorationSituationStr: [],
- option: {},
- total: 0,
- roomList: [],
- discIds: [],
- HOUSE_USAGE: [],
- timeout: null,
- };
- },
- onLoad(option) {
- this.option = option;
- this.findXiangMuList();
- this.getByCodes();
- },
- onShow() {
- uni.$on("getSelectedList", (data) => {
- let copyData = JSON.parse(JSON.stringify(data));
- const now = new Date();
- const year = now.getFullYear();
- const month = now.getMonth() + 1; // 月份从 0 开始,因此需要加 1
- const day = now.getDate();
- for (let i = 0; i < copyData.length; i++) {
- copyData[i].createdAt = `${year}-${month}-${day}`;
- copyData[i].createdName = getUserLocalStorageInfo().truename;
- copyData[i].houseId = copyData[i].id;
- console.log("copyData[i].createdAt", copyData[i].createdAt);
- }
- this.roomList = [...copyData];
- });
- },
- // onReachBottom() {
- // this.form.pageNum += 1;
- // this.search();
- // },
- methods: {
- cancel() {
- uni.navigateBack();
- },
- async submitHouse() {
- console.log(this.roomList);
- let idArray = this.roomList.map((e) => e.houseId);
- console.log(idArray);
- if (idArray.length == 0) {
- this.$showToast("请选房");
- return;
- }
- let form = {
- customerManagementId: this.option.id,
- houseIds: idArray.join(),
- userId: getUserLocalStorageInfo().id,
- };
- console.log(form);
- let data = await submitHouse(form);
- console.log(data);
- if (data.code == 200) {
- this.$showToast("已提交选房");
- uni.navigateBack();
- }
- },
- reset() {
- this.roomUseStr = [];
- this.discIds = [];
- this.toward = [];
- this.avaStatus = [];
- this.rentalStatus = [];
- this.roomUseStr = [];
- this.loudongList = [];
- this.roomList = [];
- this.form = {
- pageNum: 1,
- pageSize: 10,
- };
- this.findXiangMuList();
- this.getByCodes();
- },
- deleteRow(index) {
- this.roomList.splice(index, 1);
- },
- newSearch() {
- this.roomList = [];
- this.search.pageNum = 1;
- this.search();
- },
- clickGroupItem(item) {
- item.select = !item.select;
- if (this.groupIds.includes(item.value)) {
- this.groupIds = this.groupIds.filter(function (ele) {
- return ele !== item.value;
- });
- } else {
- this.groupIds.push(item.value);
- }
- this.form.groupIds = this.groupIds.join(",");
- if (this.form.groupIds) {
- this.yuanQuChange();
- this.roomList = [];
- this.search.pageNum = 1;
- this.search();
- }
- },
- async yuanQuChange() {
- let data = await findFenQiList(this.form.groupIds);
- this.roomList = [];
- this.loudongList = [];
- if (data.length > 0) {
- this.fenqi_loacldata = data.map((e) => {
- return {
- value: e.id,
- name: e.name,
- select: false,
- };
- });
- } else {
- this.fenqi_loacldata = [{ value: null, name: "暂无", select: false }];
- }
- },
- findXiangMuList() {
- findXiangMuList().then((data) => {
- let yuanqu_list = [...data];
- let xiangmu = yuanqu_list.map((e) => {
- return {
- value: e.groupId,
- name: e.name,
- select: false,
- };
- });
- this.xiangmu = [{ value: "", name: "全部", select: true }, ...xiangmu];
- this.form.pageNum = 1;
- this.discIds = [];
- this.roomList = [];
- this.search();
- });
- },
- clickItem(item) {
- item.select = !item.select;
- if (this.discIds.includes(item.value)) {
- // includes()方法判断是否包含某一元素,返回true或false表示是否包含元素,对NaN一样有效
- // filter()方法用于把Array的某些元素过滤掉,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素:生成新的数组
- this.discIds = this.discIds.filter(function (ele) {
- return ele !== item.value;
- });
- } else {
- this.discIds.push(item.value);
- }
- this.form.discIds = this.discIds.join(",");
- this.form.pageNum = 1;
- this.roomList = [];
- this.search();
- },
- async fenQiChange() {
- try {
- let data = await findFenQiList(this.form.discIds);
- if (data.length == 0) {
- this.loudongList = [];
- this.roomList = [];
- return;
- } else {
- this.loudongList = [...data];
- this.form.mnpBuildingIds = data[0].id;
- this.roomList = [];
- }
- let row = await getSelectedList(this.form);
- this.roomList = row;
- this.form.total = row.length;
- this.vamTabStatus = true;
- } catch (e) {}
- },
- async buildChange(e) {
- this.form.mnpBuildingIds = e.detail.name;
- let data = await getSelectedList(this.form);
- this.roomList = data;
- this.form.total = data.length;
- },
- async search() {
- let data = await getSelectedList({
- customerManagementId: this.option.id,
- });
- if (data.total == this.roomList.length) {
- return false;
- } else {
- this.roomList.push(...data);
- }
- },
- getDicType(type, value) {
- if (!value) return;
- if (type == "zaiti") {
- let PROPERTY_NATURE = this.dic_SelectList.PROPERTY_NATURE;
- let index = PROPERTY_NATURE.findIndex((e) => e.value == value);
- return PROPERTY_NATURE[index].label;
- }
- },
- onChange(e) {
- // console.log(e)
- this.toward = e.detail;
- this.form.roomDirection = this.toward.join(",");
- },
- saleStatusStrChange(e) {
- this.saleStatusStr = e.detail;
- this.form.saleStatusStr = this.saleStatusStr.join(",");
- },
- soldStatusStrChange(e) {
- this.soldStatusStr = e.detail;
- this.form.soldStatusStr = this.soldStatusStr.join(",");
- },
- decorationSituationStrChange(e) {
- this.decorationSituationStr = e.detail;
- this.form.decorationSituationStr = this.decorationSituationStr.join(",");
- },
- roomUseStrChange(e) {
- console.log(e.detail);
- this.roomUseStr = e.detail;
- this.form.roomUseStr = this.roomUseStr.join(",");
- },
- natureChange(e) {
- this.propertyNature = e.detail;
- this.form.propertyNature = this.propertyNature.join(",");
- },
- closeSelectBody() {
- if (this.height > 1000) {
- this.height = 130;
- } else {
- this.height = 1036;
- }
- },
- async getByCodes() {
- let data = await getByCodes(JSON.stringify(this.dic_key));
- this.dic_SelectList = this.$common.handleDicList(data);
- this.DECORATION_SITUATION = this.dic_SelectList.DECORATION_SITUATION;
- },
- toChoose(item) {
- uni.navigateTo({
- url: "/pages/subPackages/chooseHouse/selectHouseList",
- });
- },
- },
- };
- </script>
- <style lang="scss">
- .selectedHouseList {
- padding-bottom: 150rpx;
- .bottom-tools {
- display: flex;
- width: 100%;
- padding: 15rpx;
- box-sizing: border-box;
- position: fixed;
- justify-content: space-around;
- bottom: 35rpx;
- button {
- width: 240rpx;
- }
- padding: 15rpx;
- }
- .form {
- margin-bottom: 12rpx;
- background: white;
- padding: 12rpx 32rpx;
- .form-row {
- display: flex;
- padding: 6rpx 0rpx;
- background: white;
- }
- .form-label {
- }
- }
- .topSearchBox {
- background: white;
- padding: 16rpx 32rpx;
- .van-cell {
- background: rgba(245, 247, 250, 1);
- width: 686rpx;
- border: 1px solid rgba(234, 237, 242, 1);
- border-radius: 8rpx;
- box-sizing: border-box;
- padding: 12rpx 32rpx;
- }
- .van-icon {
- color: rgba(3, 101, 249, 1);
- font-size: 40rpx;
- }
- }
- .selectBody {
- background: white;
- display: flex;
- flex-direction: column;
- margin: 24rpx 0;
- padding: 12rpx 32rpx 36rpx 32rpx;
- box-sizing: border-box;
- overflow: hidden;
- position: relative;
- .selectRow {
- display: flex;
- align-items: center;
- margin-top: 18rpx;
- .rowTitle {
- min-width: 120rpx;
- color: rgba(51, 51, 51, 1);
- font-size: 30rpx;
- text-align: right;
- }
- .selectItemBox {
- display: flex;
- align-items: center;
- margin-left: 24rpx;
- white-space: nowrap;
- flex-wrap: wrap;
- .unSelectItem {
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 28rpx;
- color: rgba(102, 102, 102, 1);
- padding: 8rpx 18rpx;
- background: rgba(245, 247, 250, 1);
- border-radius: 8rpx;
- margin-right: 24rpx;
- margin-top: 5rpx;
- }
- .selectItem {
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 28rpx;
- color: rgba(3, 101, 249, 1);
- padding: 8rpx 18rpx;
- background: rgba(3, 101, 249, 0.1);
- border-radius: 8rpx;
- margin-right: 24rpx;
- }
- .van-checkbox-group {
- display: flex;
- flex-wrap: wrap;
- .van-checkbox {
- margin-right: 24rpx;
- }
- .van-checkbox__label {
- padding-left: 6rpx;
- font-size: 28rpx;
- color: rgba(102, 102, 102, 1);
- }
- .van-checkbox__icon {
- width: 30rpx;
- height: 30rpx;
- }
- .van-icon,
- .van-icon:before {
- font-size: 24rpx;
- }
- .van-checkbox__icon--checked {
- background: rgba(3, 101, 249, 1);
- }
- }
- .myIpt {
- width: 540rpx;
- height: 64rpx;
- text-align: center;
- background: rgba(245, 247, 250, 1);
- box-sizing: border-box;
- font-size: 26rpx;
- }
- }
- .fenqiBox {
- overflow-x: scroll;
- }
- .selectItemBoxMoreItem {
- .van-checkbox {
- margin: 0 24rpx 24rpx 0;
- }
- }
- }
- .btnBox {
- display: flex;
- align-items: center;
- justify-content: center;
- margin-top: 48rpx;
- .czBtn {
- background: rgba(3, 101, 249, 0.1);
- border-radius: 8rpx;
- width: 240rpx;
- height: 80rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- color: rgba(3, 101, 249, 1);
- font-size: 34rpx;
- letter-spacing: 2rpx;
- }
- .ssBtn {
- background: rgba(3, 101, 249, 1);
- border-radius: 8rpx;
- width: 300rpx;
- height: 80rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- color: white;
- font-size: 34rpx;
- letter-spacing: 2rpx;
- margin-left: 32rpx;
- }
- }
- .arrowDown {
- position: absolute;
- left: 50%;
- margin-left: -20rpx;
- top: 50rpx;
- }
- }
- .bottomBody {
- padding: 32rpx;
- background: white;
- width: 100%;
- box-sizing: border-box;
- .sumBox {
- color: rgba(51, 51, 51, 1);
- font-size: 28rpx;
- margin: 24rpx 0;
- }
- .listBody {
- display: flex;
- flex-direction: column;
- :last-child {
- border-bottom: none !important;
- }
- .listItem {
- padding: 24rpx 0;
- border-bottom: 1px solid rgba(230, 230, 230, 1);
- .firstRow {
- display: flex;
- align-items: center;
- justify-content: space-between;
- .itemTitle {
- font-size: 32rpx;
- color: rgba(51, 51, 51, 1);
- font-weight: 600;
- }
- .tag {
- padding: 12rpx 24rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 26rpx;
- color: rgba(3, 101, 249, 1);
- background: linear-gradient(316deg, #d1e4ff 0%, #adceff 100%);
- border-radius: 8rpx;
- }
- }
- .midRow {
- display: flex;
- align-items: center;
- color: rgba(136, 136, 136, 1);
- font-size: 28rpx;
- margin: 12rpx 0;
- }
- .bottomRow {
- display: flex;
- align-items: center;
- color: rgba(51, 51, 51, 1);
- font-size: 28rpx;
- margin-top: 8rpx;
- .money {
- color: rgba(226, 81, 0, 1);
- font-size: 40rpx;
- }
- }
- }
- }
- }
- }
- </style>
|