XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
A1300399510
2023-07-07 19:38:21 +08:00
parent 93fb0c1c98
commit 444c6bb486
7 changed files with 347 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
src/views/edit.vue
View File

@@ -1,7 +1,7 @@
<template>
<!-- <div id="container"></div> -->
<map-component v-if="mapComponentState" :info="info" @choosingLocation="choosingLocation" />
<choosing-identity v-if="false"></choosing-identity>
<div class="content-box flexflex">
<div class="user-box shadow radius16 flexflex">
<img class="user-img" :src="user.avatar">
@@ -15,13 +15,13 @@
<img v-if="false" class="housing-info-certifying" src="@/assets/img/edit/certifying-agent.png">
<div v-else class="housing-info-identity flexcenter">{{ intermediaryObj[intermediary] }}</div>
</div>
<div class="housing-info-list" v-if="status != 0 && type != 'plus'">
<div class="housing-info-list" v-if="type != 'plus'">
<div class="housing-info-item flexacenter" v-if="id">
<div class="housing-info-head flexcenter">房源ID</div>
<div class="longString"></div>
<div class="housing-info-trail">{{ id }}</div>
</div>
<div class="housing-info-item flexacenter" v-if="status">
<div class="housing-info-item flexacenter">
<div class="housing-info-head flexcenter">状态</div>
<div class="longString"></div>
<div class="housing-info-trail">{{ stateObj[status] }}</div>
@@ -43,7 +43,7 @@
</div>
</div>
<!-- 房源已认证 -->
<div class="listing-verified flexacenter" v-if="false">
<div class="listing-verified flexacenter" v-if="verified == 1">
<img class="listing-verified-tick" src="@/assets/img/edit/tick.svg" />
房源已认证
</div>
@@ -66,12 +66,12 @@
<div class="asterisk" v-if="item.required === 1">*</div>
</div>
<!--
方式一 是 两个选择框的 点击弹出 弹窗
方式二 是 两个选择框 但是第一个是居中 并且没有图标 现在只有 起租日期
方式三 是 三列选择框 多个 本页面操作
方式四 是 一条长长的款 点击弹窗
方式五 是 单行输入框 和 单位
-->
方式一 是 两个选择框的 点击弹出 弹窗
方式二 是 两个选择框 但是第一个是居中 并且没有图标 现在只有 起租日期
方式三 是 三列选择框 多个 本页面操作
方式四 是 一条长长的款 点击弹窗
方式五 是 单行输入框 和 单位
-->
<!-- 出租方式 -->
<div v-if="item.field === 'type'" class="form-option modeOne flexacenter">
<div ref="type" class="modeOne-item flexacenter" :class="{ 'pitch': typeValue == index }"
@@ -167,17 +167,19 @@
<div class="modeSeven-unlimited flexacenter">
<div class="modeSeven-unlimited-item flexacenter"
@click="setValueMultiple('property', [], true)">
<img v-if="info.property.length == 0" class="modeSeven-unlimited-circle-pitch"
<img v-show="info.property.length == 0" class="modeSeven-unlimited-circle-pitch"
src="@/assets/img/edit/circle-pitch.svg" alt="">
<div v-else class="modeSeven-unlimited-circle"></div>
<div v-show="info.property.length != 0" class="modeSeven-unlimited-circle"></div>
不限
</div>
</div>
<div class="modeSeven-option-box flexflex">
<div class="modeSeven-option-item flexacenter" v-for="(item, index) in item.choices"
:key="index" @click="setValueMultiple('property', item.key)">
<img class="modeSeven-option-icon"
:src="info.property.includes(item.key) ? require('@/assets/img/edit/diamond-selected.svg') : require('@/assets/img/edit/diamond-unselected.svg')" />
<img v-show="info.property.includes(item.key)" class="modeSeven-option-icon"
src="@/assets/img/edit/diamond-selected.svg" />
<img v-show="!info.property.includes(item.key)" class="modeSeven-option-icon"
src="@/assets/img/edit/diamond-unselected.svg" />
{{ item.value }}
</div>
</div>
@@ -202,17 +204,19 @@
class="form-option modeSeven flexflex">
<div class="modeSeven-unlimited flexacenter">
<div class="modeSeven-unlimited-item flexacenter" @click="setValueMultiple('floor', [], true)">
<img v-if="info.floor.length == 0" class="modeSeven-unlimited-circle-pitch"
<img v-show="info.floor.length == 0" class="modeSeven-unlimited-circle-pitch"
src="@/assets/img/edit/circle-pitch.svg" alt="">
<div v-else class="modeSeven-unlimited-circle"></div>
<div v-show="info.floor.length != 0" class="modeSeven-unlimited-circle"></div>
不限
</div>
</div>
<div class="modeSeven-option-box flexflex">
<div class="modeSeven-option-item flexacenter" v-for="(item, index) in item.choices"
:key="index" @click="setValueMultiple('floor', item.key)">
<img class="modeSeven-option-icon"
:src="info.floor.includes(item.key) ? require('@/assets/img/edit/diamond-selected.svg') : require('@/assets/img/edit/diamond-unselected.svg')" />
<img v-show="info.floor.includes(item.key)" class="modeSeven-option-icon"
src="@/assets/img/edit/diamond-selected.svg" />
<img v-show="!info.floor.includes(item.key)" class="modeSeven-option-icon"
src="@/assets/img/edit/diamond-unselected.svg" />
{{ item.value }}
</div>
</div>
@@ -237,17 +241,19 @@
<div class="modeSeven-unlimited flexacenter">
<div class="modeSeven-unlimited-item flexacenter"
@click="setValueMultiple('sunshinearea', [], true)">
<img v-if="info.sunshinearea.length == 0" class="modeSeven-unlimited-circle-pitch"
<img v-show="info.sunshinearea.length == 0" class="modeSeven-unlimited-circle-pitch"
src="@/assets/img/edit/circle-pitch.svg" alt="">
<div v-else class="modeSeven-unlimited-circle"></div>
<div v-show="info.sunshinearea.length != 0" class="modeSeven-unlimited-circle"></div>
不限
</div>
</div>
<div class="modeSeven-option-box flexflex">
<div class="modeSeven-option-item flexacenter" v-for="(item, i) in item.choices" :key="i"
@click="setValueMultiple('sunshinearea', item.key)">
<img class="modeSeven-option-icon"
:src="info.sunshinearea.includes(item.key) ? require('@/assets/img/edit/diamond-selected.svg') : require('@/assets/img/edit/diamond-unselected.svg')" />
<img v-show="info.sunshinearea.includes(item.key)" class="modeSeven-option-icon"
src="@/assets/img/edit/diamond-selected.svg" />
<img v-show="!info.sunshinearea.includes(item.key)" class="modeSeven-option-icon"
src="@/assets/img/edit/diamond-unselected.svg" />
{{ item.value }}
</div>
</div>
@@ -318,7 +324,8 @@
</div>
<div class="modeOne-text flexacenter" style="color: #AAAAAA;" v-else>请选择</div>
<img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
<img class="arrows-icon arrows-disabled-icon" src="@/assets/img/edit/disabled-icon.svg" />
<img class="arrows-icon arrows-disabled-icon" style="transform: rotate(0);"
src="@/assets/img/edit/disabled-icon.svg" />
<img class="arrows-icon-pitch" src="@/assets/img/edit/blue-arrow.svg" />
<!-- 弹窗 -->
<div class="pop area-pop-box radius16" style="position: absolute;top: 58px;height: 614px;"
@@ -349,11 +356,17 @@
<!-- 地址 -->
<div class="form-option modeOne flexacenter"
v-if="intermediary != 6 && (item.field == 'address' && info['location'])">
<div class="modeOne-item flexacenter" style="width: 640px;border-color: rgba(170, 170, 170, 1);"
@click="handleLocationData">
<div class="modeOne-text flexacenter" style="color: #AAAAAA;">{{ info['address'] ? info['address'] : "请选择"}}</div>
<img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
<img class="arrows-icon-pitch" src="@/assets/img/edit/blue-arrow.svg" />
<div class="modeOne-item flexacenter"
:class="{ 'pitch': info['address'], 'disabled': verified == 1 && info['address'] }"
style="width: 640px;border-color: rgba(170, 170, 170, 1);"
@click="verified == 1 && info['address'] ? '' : handleLocationData()">
<div class="modeOne-text flexacenter" v-if="info['address']">{{ info['address'] }}</div>
<div class="modeOne-text flexacenter" v-else style="color: #AAAAAA;">请选择</div>
<img class="arrows-icon" src="@/assets/img/edit/arrows.svg" style="transform: rotate(0);" />
<img class="arrows-icon-pitch" src="@/assets/img/edit/blue-arrow.svg"
style="transform: rotate(0);" />
<img class="arrows-icon arrows-disabled-icon" style="transform: rotate(0);"
src="@/assets/img/edit/disabled-icon.svg" />
</div>
</div>
@@ -380,15 +393,14 @@
</div>
<!-- 所属小区 -->
<div class="form-item" v-if="info['address']">
<div class="form-item" v-if="info['address'] && verified == 0">
<div class="form-title flexacenter">所属小区
</div>
<div class="form-option modeOne flexacenter">
<div v-if="info['communityid'] != null" ref="communityname" class="modeOne-item flexacenter"
<div v-if="info['communityid'] !== 0" ref="communityname" class="modeOne-item flexacenter"
:class="{ 'pitch': info['communityname'], 'disabled': verified == 1 }"
style="width: 640px;border-color: rgb(170, 170, 170);" @click="handleResidentialArea()">
<div class="modeOne-text flexacenter" v-if="info['communityname']">
{{ info.communityname }}
<div class="modeOne-text flexacenter" v-if="info['communityname']">{{ info.communityname }}
</div>
<div class="modeOne-text flexacenter" style="color: #AAAAAA;" v-else>请选择</div>
<img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
@@ -404,7 +416,8 @@
<div class="residential-item flexacenter" v-for="item in communityList" :key="item.id"
@click="clickResidentialArea(item.id, item.name)">
<div class="residential-dot"></div>
<div class="residential-text flex1 flexacenter" :class="{ 'pitchpitch': item.id == info['communityid'] }">{{ item.name }}</div>
<div class="residential-text flex1 flexacenter"
:class="{ 'pitchpitch': item.id == info['communityid'] }">{{ item.name }}</div>
</div>
</div>
</div>
@@ -604,7 +617,7 @@
<!-- 如何获取微信二维码 -->
<div class="flexcenter pop-mask" @click="howBoxState = false" v-if="howBoxState">
<div class="pop how-box shadow radius16">
<div class="pop how-box shadow radius16" @click.stop="">
<img class="pop-close" @click.stop="howBoxState = false" src="@/assets/img/edit/close-icon.svg" />
<div class="how-title">如何获取微信二维码？</div>
<img class="how-img" src="@/assets/img/edit/how-img.svg" />
@@ -613,9 +626,9 @@
<!-- 发布成功 -->
<div class="flexcenter pop-mask" @click="succeedPopState = 0" v-if="succeedPopState == 1">
<div class="pop succeed-box shadow radius16 flexflex"
style="background-image: url(@/assets/img/edit/succeed-pop-bj1.svg);">
:style="{ backgroundImage: `url(${require('@/assets/img/edit/succeed-pop-bj2.svg')})` }" @click.stop="">
<img class="pop-close" src="@/assets/img/edit/close-icon.svg" />
<div class="succeed-title flexacenter" style="margin-bottom: 105px;">
<div class="succeed-title flexacenter" style="margin-bottom: 95px;">
<img class="succeed-icon" src="@/assets/img/edit/successfully-ticked.png" />发布成功
</div>
@@ -637,7 +650,7 @@
</div>
</div>
<div class="flexcenter pop-mask" @click="succeedPopState = 0" v-if="succeedPopState == 2">
<div class="pop succeed-box shadow radius16 flexflex" style="padding-bottom: 99px;">
<div class="pop succeed-box shadow radius16 flexflex" style="padding-bottom: 99px;" @click.stop="">
<img class="pop-close" src="@/assets/img/edit/close-icon.svg" />
<div class="succeed-title flexacenter">
<img class="succeed-icon" src="@/assets/img/edit/successfully-ticked.png" />发布成功
@@ -653,8 +666,10 @@
</div>
</div>
<div class="flexcenter pop-mask" @click="succeedPopState = 0" v-if="succeedPopState == 3">
<div class="pop succeed-box shadow radius16 flexflex"
style="padding-bottom: 58px; background-image: url(@/assets/img/edit/succeed-pop-bj1.svg);">
<div class="pop succeed-box shadow radius16 flexflex" style="padding-bottom: 58px;"
:style="{ backgroundImage: `url(${require('@/assets/img/edit/succeed-pop-bj1.svg')})` }" @click.stop="">
<img class="pop-close" src="@/assets/img/edit/close-icon.svg" />
<div class="succeed-title flexacenter">
<img class="succeed-icon" src="@/assets/img/edit/successfully-ticked.png" />发布成功
@@ -671,7 +686,7 @@
<div class="personage-hint-item">一键切换房源上架/下架状态</div>
<div class="personage-hint-item">做房源认证，不占用普通房源发布数</div>
</div>
<a class="succeed-examine" :href="skipUrl">查看刚刚发布的求房源</a>
<a class="succeed-examine" :href="skipUrl">查看刚刚发布的{{ intermediary == 6 ? '求' : '' }}房源</a>
</div>
</div>
@@ -696,10 +711,9 @@
import aboutPop from '@/components/edit/about-pop.vue'
import mapComponent from '@/components/edit/map.vue'
import choosingIdentity from '@/components/edit/choosingIdentity.vue'
export default {
setup() {
},
name: 'ZufangEdit',
data() {
return {
@@ -729,7 +743,7 @@ export default {
uniqid: "",
token: "",
status: 0, // 发布 状态
intermediary: 3,
intermediary: 1,
type: "", // 编辑类型
locationData: [],
locationValue: 1,
@@ -763,7 +777,6 @@ export default {
acreage_min: null,
acreage_max: null,
targetAreaState: false, // 目标区域弹窗的状态
howBoxState: false, // 如何获取微信二维码弹窗状态
@@ -834,12 +847,14 @@ export default {
const urlParams = new URLSearchParams(queryString);
this.uniqid = urlParams.get('uniqid');
this.token = urlParams.get('token');
this.verified = urlParams.get('verified') || 0;
this.init();
},
components: {
aboutPop,
mapComponent
mapComponent,
choosingIdentity,
},
methods: {
@@ -851,6 +866,13 @@ export default {
return require(url)
},
init() {
this.loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
this.$post('/tenement/forum', {
intermediary: this.intermediary,
token: this.token,
@@ -916,6 +938,8 @@ export default {
// communityid: ""
// communityname: ""
if (info['type']) this.typeValue = info['type'] >>> 0
if (!info['leasetime']) info['leasetime'] = null
let intermediary = data.intermediary
@@ -934,7 +958,13 @@ export default {
if (info["rentalduration"]) info['rentalduration'] = Number(info['rentalduration'])
let arr = ["property", "floor", "sunshinearea"]
arr.forEach(element => {
if (info[element] && info[element].length == 1 && info[element][0] == 0) {
info[element] = []
}
if (info[element] && info[element].length != 0) {
info[element].forEach((ele, i) => {
info[element][i] = Number(ele)
@@ -982,13 +1012,14 @@ export default {
this.offshelftime = data.offshelftime
this.updatetime = data.updatetime
}).finally(() => {
this.loading.close()
})
},
// 处理出租方式
handleType(key, value) {
// this.typePopState = !this.typePopState
if (key >>> 0 == key) {
this.typeValue = key
this.info['type'] = null
@@ -1178,7 +1209,17 @@ export default {
// 提交
submit(status = 0) {
// /tenement/forum/submit
let info = { ...this.info }
if (info['images'] && info['images'].length > 1 && !info['aid']) {
this.$message.error("请选择封面");
return
}
if (this.acreage_min) info['acreage'] = [this.acreage_min, this.acreage_max]
if (this.submitState) return
this.submitState = true
@@ -1190,7 +1231,6 @@ export default {
background: 'rgba(0, 0, 0, 0.7)'
});
let info = { ...this.info }
let intermediary = this.intermediary
@@ -1214,7 +1254,7 @@ export default {
status,
}).then(res => {
if (res.code != 200) {
let data = res.data
let data = res.data || []
let rule = data['rule'] || 0
if (rule == 3) {
this.failPopState = true
@@ -1226,35 +1266,36 @@ export default {
let targetElement = this.$refs[data.field]
if (!targetElement) return
console.log("targetElement", this.$refs[data.field]);
if (Array.isArray(targetElement)) {
targetElement.forEach(element => {
console.log("element", element);
element.style.borderColor = "rgba(249, 93, 93, 1)";
})
} else targetElement.style.borderColor = "rgba(249, 93, 93, 1)";
// targetElement.style.borderColor = "rgba(249, 93, 93, 1)";
this.$watch(`info.${data.field}`, (newVal, oldVal) => {
if (newVal != null && newVal != undefined) {
if (Array.isArray(targetElement)) {
targetElement.forEach(element => {
console.log("element", element);
element.style.borderColor = "#aaaaaa";
})
} else targetElement.style.borderColor = "#aaaaaa";
// targetElement.style.borderColor = "#aaaaaa";
}
})
// 设置滚动距离
const top = targetElement.offsetTop - 150 || 300;
if (Array.isArray(targetElement)) targetElement[0].offsetTop - 150 || 300;
else targetElement.offsetTop - 150 || 300;
let top = 0
if (Array.isArray(targetElement)) top = targetElement[0].getBoundingClientRect().top + window.pageYOffset;
else top = targetElement.getBoundingClientRect().top + window.pageYOffsetp;
document.body.scrollTop = document.documentElement.scrollTop = top;
if (top) top -= 150
else top = 300
// document.body.scrollTop = document.documentElement.scrollTop = top;
window.scrollTo({
top,
behavior: "smooth"
})
return
} else {
@@ -1337,12 +1378,6 @@ export default {
// 点击选择地址弹窗 处理经纬度
handleLocationData() {
let info = this.info
console.log(info);
// console.log(info['location'], info['latitude'], info['longitude']);
this.mapComponentState = true
},
@@ -1388,7 +1423,7 @@ export default {
let info = this.info
if (!id) {
info['communityid'] = null
info['communityid'] = 0
info['communityname'] = null
} else {
info['communityid'] = id
@@ -1413,8 +1448,9 @@ export default {
<style lang="less" scoped>
.content-box {
max-width: 1200px;
margin: 0 auto 50px;
margin: -36px auto 50px;
align-items: flex-start;
position: relative;
.user-box {
flex-direction: column;
@@ -1578,9 +1614,10 @@ export default {
color: #000;
font-size: 20px;
font-weight: 650;
padding-top: 36px;
padding-left: 47px;
padding-bottom: 20px;
// padding-top: 36px;
// padding-left: 47px;
// padding-bottom: 25px;
padding: 36px 47px 25px;
border-bottom: 1px solid #ebebeb;
}
@@ -1704,6 +1741,7 @@ export default {
color: #AAAAAA !important;
border-color: rgba(170, 170, 170, 1) !important;
background-color: rgba(246, 246, 246, 1) !important;
cursor: no-drop;
.form-arrows {
display: none;
@@ -1796,6 +1834,7 @@ export default {
}
&.noChoice {
cursor: no-drop;
color: #d7d7d7;
border: 1px solid rgba(235, 235, 235, 1);
}
@@ -2095,7 +2134,7 @@ export default {
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
z-index: 1;
z-index: 101;
padding: 10px 30px;
overflow: auto;
@@ -2464,6 +2503,7 @@ export default {
}
&.how-box {
position: relative;
padding: 40px 45px 40px;
.how-title {
@@ -2500,7 +2540,8 @@ export default {
margin-right: 12px;
}
margin: 0 auto 93px;
// margin: 0 auto 93px;
margin: 0 auto 110px;
color: #333;
font-weight: 650;
font-size: 24px;
@@ -2540,6 +2581,7 @@ export default {
font-size: 14px;
.personage-hint-item {
text-align: center;
&:not(:last-of-type) {
margin-bottom: 11px;
@@ -2687,7 +2729,7 @@ export default {
}
.area-box {
// height: calc(100% - 98px);
height: calc(100% - 98px);
.area-left {
// padding-top: 16px;