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-10 11:48:52 +08:00
parent 444c6bb486
commit 17c1e6b796
5 changed files with 643 additions and 939 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
src/views/edit.vue
View File

@@ -58,7 +58,7 @@
</div>
<div class="form-box shadow radius16 flex1">
<div class="form-header">发布出租房源</div>
<div class="form-header">发布{{ intermediary == 6 ? '求' : '出租' }}房源</div>
<div class="form-boxes">
<div class="form-item" v-for="(item) in fieldinfoBasic" :key="item.field">
@@ -311,7 +311,7 @@
<!-- 所在区域 -->
<div class="form-option modeOne flexacenter" v-if="intermediary != 6 && item.field == 'location'">
<div ref="location" class="modeOne-item flexacenter"
<!-- <div ref="location" class="modeOne-item flexacenter"
:class="{ 'pitch': info['location'], 'disabled': verified == 1 }"
style="width: 640px;border-color: rgba(170, 170, 170, 1);"
@click="verified == 1 ? '' : areaPopState = true">
@@ -326,9 +326,9 @@
<img class="arrows-icon" src="@/assets/img/edit/arrows.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" />
<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;"
<!-- <div class="pop area-pop-box radius16" style="position: absolute;top: 58px;height: 614px;"
v-if="areaPopState">
<div class="area-box flexflex" style="height: 100%;">
<div class="area-left">
@@ -337,6 +337,54 @@
@click.stop="handleArea(index)">
<div class="dot"></div>
{{ item.name }}
<div class="semicircle-outside"></div>
</div>
</div>
<div class="area-right flex1">
<div class="area-item flexacenter"
:class="{ 'pitchpitch': info['location'] == index }"
v-for="(item, index) in locationData[locationValue].data" :key="index"
@click.stop="handleArea(index, item)">
<div class="area-item-name">{{ item }}</div>
<img class="area-item-pitch" src="@/assets/img/edit/blue-tick.svg" />
</div>
</div>
</div>
</div> -->
<!-- </div> -->
<el-popover placement="bottom" :width="640" :show-arrow="false" trigger="click" popper-style="padding: 0;border-radius:16px;">
<template #reference>
<div ref="location" class="modeOne-item flexacenter"
:class="{ 'pitch': info['location'], 'disabled': verified == 1 }"
style="width: 640px;border-color: rgba(170, 170, 170, 1);"
@click="verified == 1 ? '' : areaPopState = true">
<div class="modeOne-text flexacenter" v-if="info['location']">
{{ locationData[Math.floor(info.location)].name }}
<img class="form-arrows" src="@/assets/img/edit/thin-arrow.svg" />
<img class="form-arrows form-arrows-disabled"
src="@/assets/img/edit/thin-arrow-disabled.svg" />
{{ locationData[Math.floor(info.location)].data[info.location] }}
</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" style="transform: rotate(0);"
src="@/assets/img/edit/disabled-icon.svg" />
<img class="arrows-icon-pitch" src="@/assets/img/edit/blue-arrow.svg" />
</div>
</template>
<!-- <div class="pop area-pop-box radius16" style="position: absolute;top: 58px;height: 614px;" -->
<!-- <div class="pop area-pop-box radius16" style="" v-if="areaPopState"> -->
<div class="pop area-pop-box radius16" style="">
<div class="area-box flexflex" style="height: 100%;">
<div class="area-left">
<div class="area-item flexacenter" :class="{ 'pitchpitch': index == locationValue }"
v-for="(item, index) in locationData" :key="index"
@click.stop="handleArea(index)">
<div class="dot"></div>
{{ item.name }}
<div class="semicircle-outside"></div>
</div>
</div>
<div class="area-right flex1">
@@ -350,7 +398,8 @@
</div>
</div>
</div>
</div>
</el-popover>
</div>
<!-- 地址 -->
@@ -461,8 +510,7 @@
<img class="media-cross-icon" @click.stop="deleteMedia('video', index)"
src="@/assets/img/edit/cross-icon.png">
<div class="media-item-box flexcenter">
<video class="media-img" :src="item.image" :autoplay="false"></video>
<!-- <video class="media-img" preload="metadata" :src="item.image" :autoplay="false"></video> -->
<video class="media-img" preload="metadata" :src="item.image" :autoplay="false"></video>
</div>
<img class="media-play-icon" src="@/assets/img/edit/play-icon.svg" />
</div>
@@ -477,7 +525,7 @@
</div>
<!-- 照片 -->
<div class="media-box flexflex" v-if="item.field == 'images'">
<div class="media-box flexflex" v-if="item.field == 'images'" ref="images">
<div class="media-item flexcenter" :class="{ 'pitch': item['aid'] == info['aid'] }"
v-for="(item, index) in info.images" :key="index">
<div class="media-item-box flexcenter">
@@ -526,7 +574,7 @@
<div class="asterisk" v-if="item.required == 1">*</div>
<div class="how" v-if="item.field == 'wechat'" @click="howBoxState = true">如何获取二维码？</div>
</div>
<div v-if="item.field == 'wechat'" class="">
<div v-if="item.field == 'wechat'" class="" ref="wechat">
<div class="contact-QRcode-box flexcenter" v-if="info.wechatdata['image']">
<img class="contact-QRcode-img" :src="info.wechatdata['image']" />
</div>
@@ -743,7 +791,7 @@ export default {
uniqid: "",
token: "",
status: 0, // 发布 状态
intermediary: 1,
intermediary: 3,
type: "", // 编辑类型
locationData: [],
locationValue: 1,
@@ -847,6 +895,7 @@ export default {
const urlParams = new URLSearchParams(queryString);
this.uniqid = urlParams.get('uniqid');
this.token = urlParams.get('token');
this.intermediary = urlParams.get('intermediary') || 3; // 默认写房东吧
this.verified = urlParams.get('verified') || 0;
this.init();
@@ -1022,8 +1071,10 @@ export default {
handleType(key, value) {
if (key >>> 0 == key) {
this.typeValue = key
this.info['type'] = null
// this.info['type'] = null
this.typePopState = true
if (this.info['type'] >>> 0 != key) this.info['type'] = null
} else {
this.info['type'] = key
this.typeValueUltimately = value
@@ -1049,7 +1100,6 @@ export default {
handleArea(key, value) {
if (key >>> 0 == key) {
this.locationValue = key
this.info['location'] = null
} else {
this.info['location'] = key
this.areaPopState = false
@@ -1213,6 +1263,11 @@ export default {
if (info['images'] && info['images'].length > 1 && !info['aid']) {
this.$message.error("请选择封面");
// data.field
let data = {
field: "images"
}
this.handleSubmitFailure(data)
return
}
@@ -1262,40 +1317,7 @@ export default {
}
this.$message.error(res.message);
// 获取 myRef 元素的位置信息
let targetElement = this.$refs[data.field]
if (!targetElement) return
if (Array.isArray(targetElement)) {
targetElement.forEach(element => {
element.style.borderColor = "rgba(249, 93, 93, 1)";
})
} else 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 => {
element.style.borderColor = "#aaaaaa";
})
} else targetElement.style.borderColor = "#aaaaaa";
}
})
// 设置滚动距离
let top = 0
if (Array.isArray(targetElement)) top = targetElement[0].getBoundingClientRect().top + window.pageYOffset;
else top = targetElement.getBoundingClientRect().top + window.pageYOffsetp;
if (top) top -= 150
else top = 300
// document.body.scrollTop = document.documentElement.scrollTop = top;
window.scrollTo({
top,
behavior: "smooth"
})
this.handleSubmitFailure(data)
return
} else {
@@ -1323,6 +1345,42 @@ export default {
},
// 处理提交失败后的滚动和监听数据
handleSubmitFailure(data) {
// 获取 myRef 元素的位置信息
let targetElement = this.$refs[data.field]
if (!targetElement) return
if (Array.isArray(targetElement)) {
targetElement.forEach(element => {
element.style.borderColor = "rgba(249, 93, 93, 1)";
})
} else 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 => {
element.style.borderColor = "#aaaaaa";
})
} else targetElement.style.borderColor = "#aaaaaa";
}
})
// 设置滚动距离
let top = 0
if (Array.isArray(targetElement)) top = targetElement[0].getBoundingClientRect().top + window.pageYOffset;
else top = targetElement.getBoundingClientRect().top + window.pageYOffsetp;
if (top) top -= 150
else top = 300
window.scrollTo({
top,
behavior: "smooth"
})
},
// 租金预算的 下拉框 展开隐藏事件
rentDropDown(callback) {
if (!callback || this.rent_min) return
@@ -2708,13 +2766,13 @@ export default {
}
&.area-pop-box {
width: 640px;
// width: 640px;
height: 695px;
left: 0;
background-color: rgba(255, 255, 255, 1);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
// -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);
overflow: hidden;
z-index: 101;
@@ -2732,7 +2790,6 @@ export default {
height: calc(100% - 98px);
.area-left {
// padding-top: 16px;
background-color: rgba(246, 246, 246, 1);
.area-item {
@@ -2747,8 +2804,6 @@ export default {
padding-left: 48px;
cursor: pointer;
// border-bottom: 1px solid rgba(242, 242, 242, 1);
&:first-of-type {
padding-top: 16px;
height: 86px;
@@ -2765,6 +2820,48 @@ export default {
font-weight: 650 !important;
border: none !important;
.semicircle-outside {
position: absolute;
right: 0;
top: -20px;
width: 20px;
height: 20px;
background: #fff;
&::after {
content: "";
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 20px;
border-radius: 0 0 100% 0;
background: #f6f6f6;
}
}
&::after {
content: "";
position: absolute;
right: 0;
bottom: -20px;
width: 20px;
height: 20px;
border-radius: 0 100% 0 0;
background: #f6f6f6;
}
&::before {
content: "";
position: absolute;
right: 0;
bottom: -20px;
width: 20px;
height: 20px;
background: #fff;
}
.dot {
display: block;
}