gter.net/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
A1300399510 2023-07-06 20:09:13 +08:00
parent 232b7c290c
commit 93fb0c1c98
5 changed files with 321 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/edit/about-pop.vue
View File

@ -38,7 +38,7 @@ export default {
};
const tab = ref("person"); // person intermediary more
computed(() => {
if (props['intermediary'] == 1) tab = "intermediary"
else tab = "person"
@ -152,6 +152,19 @@ export default {
.about-list-item {
padding: 30px 0;
position: relative;
&::after {
content: "";
position: absolute;
top: 40px;
left: -22px;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(80, 227, 194, 1);
}
&:not(:last-of-type) {
border-bottom: 1px dashed #ebebeb;
}

4
src/components/edit/map.vue
View File

@ -47,7 +47,9 @@ export default {
let that = this
let info = this.info
if (!info['latitude']) {
console.log("info['latitude']", info['latitude']);
if (info['latitude']) {
this.latlng = {
longitude: info['longitude'],
latitude: info['latitude'],

6
src/components/public/head.vue
View File

@ -48,6 +48,7 @@ export default {
.container-header-bj {
width: 100vw;
min-width: 1200px;
height: 260px;
background-image: url('@/assets/img/edit/bj-img1920.png');
background-repeat: no-repeat;
@ -62,6 +63,7 @@ export default {
left: 50%;
transform: translateX(-50%);
width: 100vw;
min-width: 1200px;
max-width: 1920px;
height: 100%;
background-color: rgba(0, 0, 0, 0.698039215686274);
@ -70,7 +72,7 @@ export default {
.header-nav {
height: 46px;
max-width: 1200px;
width: 1200px;
justify-content: flex-end;
margin: 0 auto;
position: relative;
@ -112,7 +114,7 @@ export default {
.logo-box {
position: relative;
margin: 21px auto 0;
max-width: 1200px;
width: 1200px;
z-index: 1;
.logo-icon {

7
src/utils/axios.js
View File

@ -6,13 +6,17 @@ import router from '../router/index'
// let host = window.location.host; //主机
// axios.defaults.baseURL = protocol + "//" + host;
axios.defaults.baseURL = 'https://app.gter.net'
// axios.defaults.emulateJSON = true
// axios.defaults.withCredentials = true
axios.interceptors.request.use( //响应拦截
async config => {
// 每次发送请求之前判断vuex中是否存在token
// 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
config.headers.token = sessionStorage.getItem('token')
// config.headers.withCredentials = true
// config.headers['Content-Type'] = 'multipart/form-data'
if (process.env.NODE_ENV == "development") config['headers']['authorization'] = "x2mmnl9grt51bpplj2k6ioiuummzhnw3"
return config;
},
@ -22,6 +26,7 @@ axios.interceptors.request.use( //响应拦截
// 响应拦截器
axios.interceptors.response.use(
response => {
console.log("response", response);
if (response.status === 200) return Promise.resolve(response); //进行中
else return Promise.reject(response); //失败

395
src/views/edit.vue
View File

@ -98,22 +98,27 @@
</div>
<!-- 出租时长 -->
<div v-if="item.field === 'rentalduration'" ref="rentalduration"
class="form-option modeFour flexacenter" :class="{ 'pitch': info.rentalduration }">
<el-select class="modeFour-select flex1 " v-model="info.rentalduration" placeholder="请选择">
<el-option v-for="item in item.choices" :key="item.key" :label="item.value"
:value="item.key"></el-option>
</el-select>
<img class="modeFour-arrows" src="@/assets/img/edit/arrows.svg">
<div v-if="item.field === 'rentalduration'" class="form-option modeTwo flexacenter">
<div class="modeTwo-item flexcenter" :class="{ 'pitch': info['rentalduration'] == 0 }"
ref="rentalduration" @click="setValue('rentalduration', 0)">随时</div>
<div class="modeTwo-item flexacenter" :class="{ 'pitch': info['rentalduration'] }"
ref="rentalduration">
<el-select class="flex1 modeTwo-select" v-model="info.rentalduration" placeholder="请选择">
<el-option :key="0" label="请选择" :value="0" v-show="false"></el-option>
<el-option v-for="item in item.choices" :key="item.key" :label="item.value"
:value="item.key"></el-option>
</el-select>
<img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
<img class="arrows-icon-pitch" src="@/assets/img/edit/blue-arrow.svg" />
</div>
</div>
<!-- 起租日期 -->
<div v-if="item.field === 'leasetime'" class="form-option modeTwo flexacenter">
<div class="modeTwo-item flexcenter" :class="{ 'pitch': info['leasetime'] == 0 }" ref="leasetime"
@click="setValue('leasetime', 0)">随时</div>
<div class="modeTwo-item flexacenter" :class="{ 'pitch': info['leasetime'] }">
<div class="modeTwo-item flexacenter" :class="{ 'pitch': info['leasetime'] }" ref="leasetime">
<el-date-picker v-model="info.leasetime" type="date" placeholder="选择日期"></el-date-picker>
<img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
<img class="arrows-icon-pitch" src="@/assets/img/edit/blue-arrow.svg" />
</div>
@ -293,14 +298,14 @@
</div>
<div class="halving-line"></div>
<div class="form-item" v-for="item in fieldinfoAddress" :key="item.type">
<div class="form-title flexacenter">{{ item.title }}
<div class="form-title flexacenter"
v-if="item.field != 'address' || (item.field == 'address' && info['location'])">{{ item.title }}
<div class="asterisk" v-if="item.required === 1">*</div>
</div>
<div class="form-option modeOne flexacenter" v-if="intermediary != 6">
<!-- 所在区域 -->
<div v-if="item.field == 'location' && intermediary != 6" ref="location"
class="modeOne-item flexacenter"
<!-- 所在区域 -->
<div class="form-option modeOne flexacenter" v-if="intermediary != 6 && item.field == 'location'">
<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">
@ -315,10 +320,9 @@
<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-pitch" src="@/assets/img/edit/blue-arrow.svg" />
<!-- 弹窗 -->
<div class="pop area-pop-box radius16" style="position: absolute;top: 58px;height: 614px;"
v-if="areaPopState">
<!-- <div class="area-pop-header">所在区域</div> -->
<div class="area-box flexflex" style="height: 100%;">
<div class="area-left">
<div class="area-item flexacenter" :class="{ 'pitchpitch': index == locationValue }"
@ -329,7 +333,8 @@
</div>
</div>
<div class="area-right flex1">
<div class="area-item flexacenter" :class="{ 'pitchpitch': info['location'] == index }"
<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>
@ -339,11 +344,14 @@
</div>
</div>
</div>
</div>
<!-- 地址 -->
<div v-if="item.field == 'address' && info['location']" class="modeOne-item flexacenter"
style="width: 640px;border-color: rgba(170, 170, 170, 1);" @click="handleLocationData">
<div class="modeOne-text flexacenter" style="color: #AAAAAA;">请选择</div>
<!-- 地址 -->
<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>
@ -369,8 +377,41 @@
<div class="modification-btn flexcenter" @click="targetAreaState = true">重选</div>
</div>
</div>
<!-- 所属小区 -->
<div class="form-item" v-if="info['address']">
<div class="form-title flexacenter">所属小区
</div>
<div class="form-option modeOne flexacenter">
<div v-if="info['communityid'] != null" 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>
<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-pitch" src="@/assets/img/edit/blue-arrow.svg" />
</div>
<div v-else ref="communityname" class="modeOne-item flexacenter"
:class="{ 'pitch': info['communityname'], 'disabled': verified == 1 }"
style="width: 640px;border-color: rgb(170, 170, 170);">
<input class="communityname-input" v-model="info.communityname" placeholder="请填写" />
</div>
<div class="residential-area" v-if="residentialAreaState">
<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>
</div>
</div>
</div>
<div class="halving-line"></div>
<div class="form-item" v-for="(item, index) in fieldinfoIdentity" :key="index">
<template v-if="item.field != 'intermediary' && judgeGenderCohabitantsShow(item.field)">
@ -401,38 +442,46 @@
<div class="form-item" v-for="(item) in fieldinfoUpload" :key="item.field">
<div class="form-title flexacenter">{{ item.title }} ({{ item.placeholder }})</div>
<!-- 视频 -->
<div class="media-box flexflex" v-if="item.field == 'video'">
<div class="media-item flexcenter" v-for="(item, index) in info.video" :key="index">
<img class="media-cross-icon" @click.stop="deleteMedia('video', index)"
src="@/assets/img/edit/cross-icon.png">
<div class="flexcenter"
style="width: 100px;height: 100px;overflow: hidden;border-radius: 10px;">
<video class="media-img" preload="metadata" :src="item.image" :autoplay="false"></video>
<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> -->
</div>
<img class="media-play-icon" src="@/assets/img/edit/play-icon.svg" />
</div>
<div class="media-item flexcenter" style="position: relative;"
v-if="info.video.length < videoConfig.maxcount">
<img class="media-add-icon" src="@/assets/img/edit/media-add.svg" />
<input class="input-file" type="file" accept="video/*"
@change="validateVideoFileType($event, 'video')" multiple />
<div class="media-item-box flexcenter">
<img class="media-add-icon" src="@/assets/img/edit/media-add.svg" />
<input class="input-file" type="file" accept="video/*"
@change="validateVideoFileType($event, 'video')" multiple />
</div>
</div>
</div>
<!-- 照片 -->
<div class="media-box flexflex" v-if="item.field == 'images'">
<div class="media-item flexcenter" v-for="(item, index) in info.images" :key="index">
<img class="media-cross-icon" @click.stop="deleteMedia('image', index)"
src="@/assets/img/edit/cross-icon.png">
<div class="flexcenter"
style="width: 100px;height: 100px;overflow: hidden;border-radius: 10px;">
<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">
<img class="media-cross-icon" @click.stop="deleteMedia('image', index)"
src="@/assets/img/edit/cross-icon.png">
<img class="media-img" :src="item.image" />
</div>
<div class="media-cover-bnt flexcenter" v-if="info.images.length != 1"
@click="info['aid'] = item['aid']">选为封面</div>
</div>
<div class="media-item flexcenter" style="position: relative;"
v-if="info.images.length < imagesConfig.maxcount">
<img class="media-add-icon" src="@/assets/img/edit/media-add.svg" />
<input class="input-file" type="file" accept="image/*"
@change="validateVideoFileType($event, 'image')" multiple />
<div class="media-item-box flexcenter">
<img class="media-add-icon" src="@/assets/img/edit/media-add.svg" />
<input class="input-file" type="file" accept="image/*"
@change="validateVideoFileType($event, 'image')" multiple />
</div>
</div>
</div>
@ -514,45 +563,6 @@
</div>
</div>
<!-- 弹窗区域 -->
<!-- 类型弹窗 -->
<!-- <div class="flexcenter pop-mask" @click="typePopState = false" v-if="typePopState">
<div class="pop type-pop-box radius16">
<div class="type-pop-title">{{ typeData[typeValue].name }}</div>
<div class="type-pop-list flexflex">
<div class="type-pop-item flexcenter" :class="{ 'pitch': item.key == info.type }"
v-for="(item, index) in typeData[typeValue].data" :key="index"
@click.stop="handleType(item.key, item.value)">{{
item.value }}
</div>
</div>
</div>
</div> -->
<!-- 所在区域 -->
<!-- <div class="flexcenter pop-mask" @click="areaPopState = false" v-if="areaPopState">
<div class="pop area-pop-box radius16">
<div class="area-pop-header">所在区域</div>
<div class="area-box flexflex">
<div class="area-left">
<div class="area-item flexacenter" :class="{ 'pitch': index == locationValue }"
v-for="(item, index) in locationData" :key="index" @click.stop="handleArea(index)">
<div class="dot"></div>
{{ item.name }}
</div>
</div>
<div class="area-right flex1">
<div class="area-item flexacenter" :class="{ 'pitch': 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> -->
<!-- 目标区域 - 弹窗 -->
<div class="flexcenter pop-mask" @click="targetAreaState = false" v-if="targetAreaState">
<div class="pop area-pop-box radius16 target-area">
@ -769,6 +779,9 @@ export default {
offshelftime: "",
offshelftime: "",
updatetime: "",
residentialAreaState: false, // 所属小区的弹窗的状态
isResidentialAreaUpdate: true, // 所属小区的数据是否需要更新
communityList: [], // 所属小区的列表
stateObj: {
1: "已上架",
@ -888,6 +901,9 @@ export default {
let info = data.info
console.log("info", info);
// info['rentalduration'] = 999
// info['type'] = 1.1
// info['leasetime'] = ""
// info['rent'] = 100
@ -897,7 +913,8 @@ export default {
// info['sunshinearea'] = 1
// info['acreage'] = 200
// info.location = "1.5"
// communityid: ""
// communityname: ""
if (!info['leasetime']) info['leasetime'] = null
@ -1077,6 +1094,7 @@ export default {
return
}
let allowedExtensions = ['mp4', 'webm', 'ogg'];
type == 'image' ? allowedExtensions = ['svg', 'jpg', 'jpeg', 'png', 'bmp', 'webp'] : ''
@ -1118,7 +1136,9 @@ export default {
formData.append('name', target.name); // 文件名
formData.append('type', type); // 文件名
this.$post('/tenement/forum/upload', formData).then(res => {
this.$axios.post('/tenement/forum/upload', formData).then(res => {
res = res['data']
if (res.code != 200) {
this.$message.error(res.message);
this.mediaUploadIndex += 1
@ -1203,16 +1223,37 @@ export default {
this.$message.error(res.message);
// 获取 myRef 元素的位置信息
let targetElement = this.$refs[data.field][0]
let targetElement = this.$refs[data.field]
if (!targetElement) return
targetElement.style.borderColor = "rgba(249, 93, 93, 1)";
const top = targetElement.offsetTop - 150 || 300;
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) targetElement.style.borderColor = "#aaaaaa";
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;
document.body.scrollTop = document.documentElement.scrollTop = top;
return
@ -1307,8 +1348,56 @@ export default {
// 选择地点后
choosingLocation(value) {
console.log(value);
// this.mapComponentState = false
let info = this.info
info['address'] = value['poiname']
info['latitude'] = value['latlng']['lat']
info['longitude'] = value['latlng']['lng']
this.mapComponentState = false
this.isResidentialAreaUpdate = true
},
// 处理所属小区判断，并获取数据
handleResidentialArea() {
// communityList
if (this.isResidentialAreaUpdate) {
let info = this.info
let location = `${info['longitude'] || 114.160151},${info['latitu1de'] || 22.247117}`
this.$post("/tenement/forum/placeAround", {
location
}).then(res => {
if (res.code != 200) return
console.log(res, "res");
let data = res.data
data.push({
name: "以上都不是"
})
this.communityList = data
this.residentialAreaState = true
this.isResidentialAreaUpdate = false
})
} else this.residentialAreaState = true
},
// 点击所属小区选项
clickResidentialArea(id, name) {
let info = this.info
if (!id) {
info['communityid'] = null
info['communityname'] = null
} else {
info['communityid'] = id
info['communityname'] = name
}
this.info = info
this.residentialAreaState = false
},
@ -1650,11 +1739,16 @@ export default {
content: "";
}
.modeTwo-select {
height: 100%;
}
/deep/ .el-input {
flex: 1;
width: 100%;
height: 100%;
.el-input__wrapper,
.el-input__inner {
height: 100%;
border: none;
@ -1662,13 +1756,9 @@ export default {
color: #555;
padding-left: 0;
/* 修改 Webkit 内核浏览器的输入框提示文本样式 */
&::-webkit-input-placeholder {
color: #555;
}
/* 修改 FireFox 内核浏览器的输入框提示文本样式 */
&:-moz-placeholder {
&:-moz-placeholder,
&::-webkit-input-placeholder {
color: #555;
}
@ -1793,14 +1883,12 @@ export default {
}
&.modeSix {
.modeSix-select {
border: 1px solid rgba(170, 170, 170, 1);
border-radius: 10px;
overflow: hidden;
width: 269px;
height: 50px;
position: relative;
.el-select {
@ -1968,8 +2056,6 @@ export default {
margin-left: 20px;
cursor: pointer;
}
}
}
@ -1988,6 +2074,79 @@ export default {
}
}
.communityname-input {
width: 100%;
height: 100%;
color: #62B1FF;
border: none;
outline: none;
font-size: 16px;
}
.residential-area {
position: absolute;
top: 58px;
width: 640px;
height: 500px;
background-color: rgba(255, 255, 255, 1);
box-sizing: border-box;
border: 1px solid rgba(235, 235, 235, 1);
border-radius: 16px;
-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;
padding: 10px 30px;
overflow: auto;
/*滚动条样式*/
&::-webkit-scrollbar {
width: 8px;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
background: rgba(242, 242, 242, 1);
}
&::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
border-radius: 0;
background: transparent;
}
.residential-item {
height: 60px;
cursor: pointer;
.residential-dot {
width: 6px;
height: 6px;
background: #62b1ff;
border-radius: 50%;
margin-right: 47px;
}
.residential-text {
height: 100%;
color: #555;
font-size: 16px;
&.pitchpitch {
color: #62b1ff;
}
}
&:not(:last-of-type) {
border-bottom: 1px solid rgba(242, 242, 242, 1);
}
}
}
}
.form-arrows {
@ -2003,21 +2162,47 @@ export default {
.media-box {
flex-wrap: wrap;
width: 640px;
align-items: flex-start;
.media-item {
width: 100px;
height: 100px;
border-radius: 10px;
background-color: rgba(246, 246, 246, 1);
border: 1px solid rgba(235, 235, 235, 1);
position: relative;
cursor: pointer;
flex-direction: column;
&:not(:nth-last-child(-n+5)) {
margin-bottom: 30px;
}
&.pitch {
.media-cover-bnt {
background: rgba(80, 227, 194, 1);
border: none;
color: #fff;
}
.media-item-box {
border: 1px solid rgba(80, 227, 194, 1);
}
}
.media-item-box {
width: 100px;
height: 100px;
overflow: hidden;
border-radius: 10px;
margin-bottom: 10px;
height: 100px;
border-radius: 10px;
background-color: rgba(246, 246, 246, 1);
border: 1px solid rgba(235, 235, 235, 1);
}
&:not(:nth-of-type(5n)) {
margin-right: 35px;
}
margin-bottom: 30px;
// margin-bottom: 20px;
.input-file {
position: absolute;
@ -2045,18 +2230,26 @@ export default {
.media-img {
width: 100px;
// max-width: 100px;
// max-height: 100px;
position: relative;
filter: brightness(0.5);
}
.media-cover-bnt {
width: 100px;
height: 30px;
border-radius: 8px;
font-size: 14px;
border: 1px solid rgba(215, 215, 215, 1);
color: #aaa;
font-weight: 400;
}
.media-play-icon {
width: 20px;
height: 20px;
position: absolute;
top: 50%;
// top: 50%;
top: calc(50% - 5px);
left: 50%;
transform: translate(-50%, -50%);
}
@ -2128,7 +2321,6 @@ export default {
margin-left: 48px;
margin-bottom: 60px;
.hint-icon {
width: 20px;
height: 20px;
@ -2482,6 +2674,7 @@ export default {
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
overflow: hidden;
z-index: 101;
.area-pop-header {
font-weight: 650;