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-05 19:16:32 +08:00
parent 732184b18e
commit 232b7c290c
3 changed files with 209 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -69,10 +69,6 @@ export default {
tab.value = tabvalue;
};
console.log("cutTabArray", cutTabArray);
return {
tabList,
tab,

92
src/components/edit/map.vue Normal file
View File

@ -0,0 +1,92 @@
<template>
<div class="flexcenter pop-mask">
<div class="pop">
<div id="map"></div>
<iframe id="mapPage" width="100%" height="100%" frameborder=0
:src="`https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=${key}&referer=myapp&coord=${latlng.longitude},${latlng.latitude}`">
</iframe>
</div>
</div>
</template>
<script>
export default {
name: 'GterFangMap',
props: ["info"],
data() {
return {
longitudeLatitude: { // 默认 地图 经纬度 longitude and latitude
0: {
longitude: 22.2795,
latitude: 114.1692
},
1: {
longitude: 22.2795,
latitude: 114.1692
},
2: {
longitude: 22.3171,
latitude: 114.1794
},
3: {
longitude: 22.3926,
latitude: 114.1332
}
},
key: "MVNBZ-PEFWI-O4OGT-5ADVJ-7QAYJ-NBFY4",
latlng: {
longitude: 22.2795,
latitude: 114.1692,
},
};
},
mounted() {
let that = this
let info = this.info
if (!info['latitude']) {
this.latlng = {
longitude: info['longitude'],
latitude: info['latitude'],
}
} else if (info['location']) {
let longitudeLatitude = this.longitudeLatitude
this.latlng = longitudeLatitude[info['location'] >>> 0]
}
window.addEventListener('message', function (event) {
// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
var loc = event.data;
if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
console.log('location', loc);
let { latlng, poiname } = loc
that.$emit('choosingLocation', {
poiname,
latlng,
});
}
}, false);
},
methods: {
},
};
</script>
<style lang="less" scoped>
.pop {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 800px;
background: #fff;
border-radius: 20px;
padding: 20px;
}
</style>

158
src/views/edit.vue
View File

@ -1,4 +1,7 @@
<template>
<!-- <div id="container"></div> -->
<map-component v-if="mapComponentState" :info="info" @choosingLocation="choosingLocation" />
<div class="content-box flexflex">
<div class="user-box shadow radius16 flexflex">
<img class="user-img" :src="user.avatar">
@ -71,9 +74,8 @@
-->
<!-- 出租方式 -->
<div v-if="item.field === 'type'" class="form-option modeOne flexacenter">
<div ref="type" class="modeOne-item flexacenter"
:class="{ 'pitch': Math.floor(info.type) == index }" v-for="(item, index) in typeData"
@click="handleType(index)" :key="index">
<div ref="type" class="modeOne-item flexacenter" :class="{ 'pitch': typeValue == index }"
v-for="(item, index) in typeData" @click="handleType(index)" :key="index">
<div class="modeOne-text flexacenter">{{ item.name }}
<template v-if="typeValueUltimately && Math.floor(info.type) == index">
<img class="form-arrows" src="@/assets/img/edit/thin-arrow.svg" />
@ -83,6 +85,16 @@
<img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
<img class="arrows-icon-pitch" src="@/assets/img/edit/blue-arrow.svg" />
</div>
<div class="pop type-pop-box radius16" v-if="typePopState">
<div class="type-pop-list flexflex">
<div v-for="(item, index) in typeData[typeValue].data" class="type-pop-item flexcenter"
:class="{ 'pitch': item.key == info.type }" :key="index"
@click.stop="handleType(item.key, item.value)">{{
item.value }}
</div>
</div>
</div>
</div>
<!-- 出租时长 -->
@ -303,11 +315,34 @@
<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 }"
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="{ '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>
<!-- 地址 -->
<div v-if="item.field == 'address'" class="modeOne-item flexacenter"
style="width: 640px;border-color: rgba(170, 170, 170, 1);">
<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>
<img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
<img class="arrows-icon-pitch" src="@/assets/img/edit/blue-arrow.svg" />
@ -481,7 +516,7 @@
<!-- 弹窗区域 -->
<!-- 类型弹窗 -->
<div class="flexcenter pop-mask" @click="typePopState = false" v-if="typePopState">
<!-- <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">
@ -492,10 +527,10 @@
</div>
</div>
</div>
</div>
</div> -->
<!-- 所在区域 -->
<div class="flexcenter pop-mask" @click="areaPopState = false" v-if="areaPopState">
<!-- <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">
@ -516,7 +551,7 @@
</div>
</div>
</div>
</div>
</div> -->
<!-- 目标区域 - 弹窗 -->
<div class="flexcenter pop-mask" @click="targetAreaState = false" v-if="targetAreaState">
@ -646,11 +681,11 @@
</div>
<about-pop :popState="aboutPopState" :intermediary="intermediary" @close="handleAboutPopState"></about-pop>
</template>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY"></script>
<!-- <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY"></script> -->
<script>
import { onMounted, watch, ref, } from 'vue';
import aboutPop from '@/components/edit/about-pop.vue'
import mapComponent from '@/components/edit/map.vue'
export default {
setup() {
@ -726,8 +761,10 @@ export default {
failPopState: false, // 失败弹窗
aboutPopState: false, // 关于弹窗的展开状态
submitState: false, // 发布提交接口请求状态
isbindweixin: 0, // 是否绑定微信
mapComponentState: false, // 选择地址 的地图 弹窗状态
id: 0,
offshelftime: "",
offshelftime: "",
@ -788,9 +825,15 @@ export default {
this.init();
},
components: {
aboutPop
aboutPop,
mapComponent
},
methods: {
updateMap(evtModel) {
console.log("evtModel", evtModel);
},
require(url) {
return require(url)
},
@ -928,11 +971,15 @@ export default {
// 处理出租方式
handleType(key, value) {
this.typePopState = !this.typePopState
if (key >>> 0 == key) this.typeValue = key
else {
// this.typePopState = !this.typePopState
if (key >>> 0 == key) {
this.typeValue = key
this.info['type'] = null
this.typePopState = true
} else {
this.info['type'] = key
this.typeValueUltimately = value
this.typePopState = false
}
},
@ -1247,6 +1294,23 @@ export default {
this.aboutPopState = !this.aboutPopState
},
// 点击选择地址弹窗 处理经纬度
handleLocationData() {
let info = this.info
console.log(info);
// console.log(info['location'], info['latitude'], info['longitude']);
this.mapComponentState = true
},
// 选择地点后
choosingLocation(value) {
console.log(value);
// this.mapComponentState = false
},
@ -1484,6 +1548,7 @@ export default {
.form-option {
width: 100%;
height: 50px;
position: relative;
.pitch {
color: #62B1FF !important;
@ -1541,6 +1606,11 @@ export default {
margin-right: 0;
}
.arrows-icon,
.arrows-icon-pitch {
transform: rotate(90deg);
}
&.disabled {
color: #AAAAAA !important;
border-color: rgba(170, 170, 170, 1) !important;
@ -1639,7 +1709,6 @@ export default {
color: #d7d7d7;
border: 1px solid rgba(235, 235, 235, 1);
}
}
}
@ -2364,31 +2433,24 @@ export default {
}
&.type-pop-box {
width: 700px;
height: 272px;
width: 640px;
height: 181px;
background: inherit;
background-color: rgba(255, 255, 255, 1);
border: none;
border-radius: 20px;
-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);
padding: 40px 30px;
border: 1px solid rgba(235, 235, 235, 1);
-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);
padding: 30px;
.type-pop-title {
font-weight: 650;
font-style: normal;
font-size: 20px;
color: #000000;
margin-bottom: 30px;
}
position: absolute;
top: 58px;
.type-pop-list {
flex-wrap: wrap;
.type-pop-item {
width: 200px;
width: 179px;
height: 50px;
background-color: rgba(246, 246, 246, 1);
border-radius: 10px;
@ -2412,10 +2474,10 @@ export default {
}
&.area-pop-box {
width: 700px;
width: 640px;
height: 695px;
left: 0;
background-color: rgba(255, 255, 255, 1);
border-radius: 20px;
-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);
@ -2432,9 +2494,10 @@ export default {
}
.area-box {
height: calc(100% - 98px);
// height: calc(100% - 98px);
.area-left {
// padding-top: 16px;
background-color: rgba(246, 246, 246, 1);
.area-item {
@ -2449,11 +2512,23 @@ export default {
padding-left: 48px;
cursor: pointer;
&.pitch {
// border-bottom: 1px solid rgba(242, 242, 242, 1);
&:first-of-type {
padding-top: 16px;
height: 86px;
.dot {
top: calc(50% + 8px);
}
}
&.pitchpitch {
position: relative;
background-color: #fff;
color: #000;
font-weight: 650;
color: #000 !important;
font-weight: 650 !important;
border: none !important;
.dot {
display: block;
@ -2480,6 +2555,7 @@ export default {
margin-left: 40px;
margin-right: 6px;
overflow: auto;
padding-top: 16px;
/*滚动条样式*/
&::-webkit-scrollbar {
@ -2512,7 +2588,7 @@ export default {
font-size: 16px;
justify-content: space-between;
&.pitch {
&.pitchpitch {
color: #62B1FF;
.area-item-pitch {