123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585 |
- <template>
- <div class="maintenance">
- <div class="selectBody">
- <div class="selectRow">
- <span class="rowTitle">项目</span>
- <div class="selectItemBox">
- <span
- class="unSelectItem"
- :class="item.select ? 'selectItem' : ''"
- v-for="item in xiangmu"
- @click="clickGroupItem(item)"
- >
- {{ item.name }}
- </span>
- </div>
- </div>
- <div class="selectRow" v-if="form.groupIds != null">
- <span class="rowTitle">分期</span>
- <div class="selectItemBox fenqiBox">
- <span
- class="unSelectItem"
- v-for="item in fenqi_loacldata"
- :class="item.select ? 'selectItem' : ''"
- @click="clickItem(item)"
- >{{ item.name }}</span
- >
- </div>
- </div>
- <div class="selectRow">
- <span class="rowTitle">购房状态</span>
- <div class="selectItemBox">
- <van-checkbox-group
- :value="saleStatusStr"
- @change="saleStatusStrChange"
- >
- <van-checkbox
- :name="item.value"
- shape="square"
- v-for="item in BUYING_HOUSE_STATUS"
- :key="item.id"
- >{{ item.label }}</van-checkbox
- >
- </van-checkbox-group>
- </div>
- </div>
- <div class="selectRow">
- <span class="rowTitle">姓名</span>
- <div class="selectItemBox">
- <input
- placeholder="请输入房号"
- class="myIpt"
- v-model="form.buyerName"
- />
- </div>
- </div>
- <div class="btnBox">
- <button class="czBtn" @tap="reset">重置</button>
- <button class="ssBtn" @tap="newSearch()">搜索</button>
- </div>
- <!-- <van-icon
- name="arrow-up"
- style="font-size: 40rpx; margin-top: 40rpx; font-weight: 600"
- @tap="closeSelectBody"
- /> -->
- </div>
- <div class="bottomBody">
- <div class="listBody">
- <div class="listItem" v-for="item in roomList">
- <div class="firstRow">
- <span class="itemTitle">
- {{ item.groupDiscName }}
- </span>
- <div class="tag" style="margin-left: auto; margin-right: 20rpx">
- {{ BUYING_HOUSE_STATUS[item.status - 1].label }}
- </div>
- <div class="tag" style="margin-lett: auto">
- {{
- item.intentionalDepositStatus
- ? INTENTIONAL_DEPOSIT_STATUS[
- item.intentionalDepositStatus - 1
- ].label
- : "未交意向金"
- }}
- </div>
- </div>
- <div class="midRow" style="display: block">
- <div>买受人:{{ item.buyerName }}</div>
- <div style="margin-top: 12rpx">
- 选房日期:{{ item.roomSelectionDate }}
- </div>
- </div>
- <div class="midRow">
- <span style="width: 300rpx"
- >选房号:{{ item.roomSelectionNumber }}</span
- >
- <span>批次号:{{ item.batchNumber }}</span>
- </div>
- <div class="midRow" style="justify-content: flex-end">
- <van-button
- type="info"
- size="mini"
- @click="toChoose(item)"
- v-if="item.intentionalDepositStatus != 1"
- >去选房</van-button
- >
- <van-button
- style="margin-left: 20rpx"
- v-if="item.status == 1"
- type="info"
- size="mini"
- @click="toIntentionAdd(item)"
- >意向金登记</van-button
- >
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import {
- findXiangMuList,
- findFenQiList,
- findRoomByCondition,
- getCustomer,
- getByCodes,
- } from "@/js_sdk/http";
- export default {
- name: "maintenance",
- data() {
- return {
- dic_key: ["BUYING_HOUSE_STATUS", "INTENTIONAL_DEPOSIT_STATUS"],
- SOLD_STATUS: [],
- DECORATION_SITUATION: [],
- INTENTIONAL_DEPOSIT_STATUS: [],
- SALE_STATUS: [],
- BUYING_HOUSE_STATUS: [],
- 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: [],
- total: 0,
- roomList: [],
- discIds: [],
- HOUSE_USAGE: [],
- timeout: null,
- };
- },
- onShow() {
- this.findXiangMuList();
- this.getByCodes();
- },
- onReachBottom() {
- this.form.pageNum += 1;
- this.search();
- },
- methods: {
- 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();
- },
- 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 getCustomer(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 getCustomer(this.form);
- this.roomList = data;
- this.form.total = data.length;
- },
- async search() {
- let data = await getCustomer(this.form);
- if (data.total == this.roomList.length) {
- return false;
- } else {
- this.roomList.push(...data.rows);
- }
- },
- 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.BUYING_HOUSE_STATUS = this.dic_SelectList.BUYING_HOUSE_STATUS;
- this.INTENTIONAL_DEPOSIT_STATUS =
- this.dic_SelectList.INTENTIONAL_DEPOSIT_STATUS;
- },
- toIntentionAdd(item) {
- console.log(
- `/pages/subPackages/intention/edit?id=${item.id}&groupDiscName=${item.groupDiscName}&buyerName=${item.buyerName}&roomSelectionDate=${item.roomSelectionDate}&batchNumber=${item.batchNumber}&roomSelectionNumber=${item.roomSelectionNumber}`
- );
- uni.navigateTo({
- url: `/pages/subPackages/intention/add?id=${item.id}&groupDiscName=${item.groupDiscName}&buyerName=${item.buyerName}&roomSelectionDate=${item.roomSelectionDate}&batchNumber=${item.batchNumber}&roomSelectionNumber=${item.roomSelectionNumber}`,
- });
- },
- toChoose(item) {
- uni.navigateTo({
- url: `/pages/subPackages/chooseHouse/selectedHouseList?id=${item.id}&groupDiscName=${item.groupDiscName}&buyerName=${item.buyerName}&roomSelectionDate=${item.roomSelectionDate}&batchNumber=${item.batchNumber}&roomSelectionNumber=${item.roomSelectionNumber}`,
- });
- },
- },
- };
- </script>
- <style lang="scss">
- .maintenance {
- padding-bottom: 150rpx;
- .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>
|