main
parent
11bd78ae32
commit
cf2e0c2c5f
@ -1,695 +0,0 @@
|
||||
<template>
|
||||
<view class="cotainer">
|
||||
<view class="navBarBox">
|
||||
<image class="navBarBox-top" :src="require('@/static/home-top.png')" mode=""></image>
|
||||
<!-- 状态栏占位 -->
|
||||
<view class="statusBar" :style="{paddingTop: navBarTop+'px'}"></view>
|
||||
<image class="navBarBox-title" :style="{marginTop: navBarTop+'rpx'}"
|
||||
:src="require('@/static/index-title.png')" mode=""></image>
|
||||
<!-- 真正的导航栏内容 -->
|
||||
<view class="navBar">
|
||||
<view @click="showTips = true">
|
||||
<image class="navBar-left" :src="require('@/static/index-icon.png')" mode=""></image>
|
||||
</view>
|
||||
<view class="navBar-center" @click="openPicker">
|
||||
<view class="">
|
||||
<image :src="require('@/static/home-area.png')" mode=""></image>
|
||||
{{area}}
|
||||
</view>
|
||||
|
||||
<u-icon name="arrow-down-fill"></u-icon>
|
||||
</view>
|
||||
<view class="" @click="goSearch">
|
||||
<image class="navBar-right" :src="require('@/static/home-search.png')" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="maps">
|
||||
<map id="myMap" :longitude="lng" @regionchange="pushMarkers" show-location :scale="scale" :latitude="lat" :markers="markers"
|
||||
@callouttap="showDetail">
|
||||
|
||||
<cover-view slot="callout" class="maps-covers">
|
||||
<block v-for="(item,index) in markers">
|
||||
<cover-view :marker-id="item.id" :key='index'>
|
||||
<cover-view class="maps-cover">
|
||||
<cover-view class="maps-cover-wrap">
|
||||
<cover-image class="maps-cover-img" :src='item.truePath'></cover-image>
|
||||
<block v-if="item.has_answer===0">
|
||||
<cover-view class="maps-cover-lock">
|
||||
<cover-image class="maps-cover-lockimg" :src="'/static/home-lock.png'"></cover-image>
|
||||
<cover-view></cover-view>
|
||||
</cover-view>
|
||||
</block>
|
||||
</cover-view>
|
||||
<cover-view class="maps-cover-label">
|
||||
<cover-image class="maps-labelbg" :src="'/static/home-cur.png'"></cover-image>
|
||||
<cover-view>{{item.title}}</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</block>
|
||||
</cover-view>
|
||||
<cover-view class="maps-info">
|
||||
<cover-view class="maps-info-near" @click="getNears">
|
||||
<cover-image src="../../static/home-near.png" mode=""></cover-image>
|
||||
</cover-view>
|
||||
<cover-view class="maps-info-pointer" v-if="showPointer && pointer">
|
||||
<cover-view class="maps-info-pointer-title">
|
||||
<cover-view style="width:100%">
|
||||
<cover-view>{{pointer.name}}</cover-view>
|
||||
<cover-image @click="closeDetail" style="width:40rpx;height:39rpx;"
|
||||
src="/static/home-close.png" mode=""></cover-image>
|
||||
</cover-view>
|
||||
<cover-view>距你{{pointer.distance?pointer.distance:'-'}}</cover-view>
|
||||
<cover-view v-if="pointer.config.length>0">
|
||||
<block v-for="con in pointer.config">
|
||||
<block v-if="con.key==='address'">
|
||||
{{con.value}}
|
||||
</block>
|
||||
</block>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
<cover-view style="width:100%;height:1px;background:#e9e9e9"></cover-view>
|
||||
<cover-view class="maps-info-pointer-btn">
|
||||
<cover-view @click="toMap">
|
||||
<cover-image style="width:29rpx;height:30rpx;" src="/static/home-go.png" mode=""></cover-image>
|
||||
<cover-view style="display:inline-block;vertical-align: middle;">开始前往</cover-view>
|
||||
</cover-view>
|
||||
<cover-image @click="toDetail" style="width:201rpx;height:55rpx;" src="/static/home-btn.png"
|
||||
mode=""></cover-image>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
|
||||
</map>
|
||||
</view>
|
||||
|
||||
<u-picker v-model="showArea" @confirm="confirmArea" :range="listArea" range-key="value" confirm-color="#e50015"
|
||||
mode="selector"></u-picker>
|
||||
<!-- 锦囊 -->
|
||||
<view class="tips" v-if="showTips" :class="showTips?'fade-in':'fade-out'">
|
||||
<view class="tips-wrap">
|
||||
<view class="tips-wrap-close" @click="showTips=false">
|
||||
x
|
||||
</view>
|
||||
<view class="tips-wrap-img">
|
||||
<u-image :show-loading="false" :fade="false" mode="widthFix" :width="711"
|
||||
:src="require('../../static/toast.png')"></u-image>
|
||||
<view class="tips-wrap-tip">
|
||||
|
||||
<view class="">
|
||||
<rich-text v-if='showTips' :nodes="tips?tips:' '"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<tabbar :currentPage="0"></tabbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tabbar from '@/components/tabbar/tabbar.vue'
|
||||
import {
|
||||
isNull,
|
||||
shareInfo,
|
||||
toast,
|
||||
getDistance,
|
||||
toMapAPP
|
||||
} from '@/common/util.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tabbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
navBarTop: 0,
|
||||
showTips: false,
|
||||
tips: '',
|
||||
theme_id: '',
|
||||
area: '区域',
|
||||
scale: 11,
|
||||
lat: null,
|
||||
lng: null,
|
||||
markers: [],
|
||||
pointers: [],
|
||||
done: 0,
|
||||
showPointer: false,
|
||||
pointer: null,
|
||||
listArea: [{
|
||||
id: '',
|
||||
value: '全部'
|
||||
}],
|
||||
showArea: false,
|
||||
tips: ''
|
||||
|
||||
}
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return shareInfo
|
||||
},
|
||||
onShareTimeline(){
|
||||
return shareInfo
|
||||
},
|
||||
onReady() {
|
||||
uni.authorize({
|
||||
scope: 'scope.userLocation',
|
||||
success: (res) => {
|
||||
this.getUserLocation()
|
||||
}
|
||||
})
|
||||
},
|
||||
onLoad(option) {
|
||||
const MenuButton = uni.getMenuButtonBoundingClientRect()
|
||||
this.navBarTop = MenuButton.top //左侧文字与右侧胶囊对齐
|
||||
// this.getUserLocation()
|
||||
if (isNull(this.vuex_token)) {
|
||||
this.getToken()
|
||||
} else {
|
||||
this.getPointers()
|
||||
}
|
||||
this.getArea()
|
||||
this.getConfig()
|
||||
|
||||
},
|
||||
onShow(){
|
||||
let vuex_pointer = uni.getStorageSync('vuex_pointer')?uni.getStorageSync('vuex_pointer'):null
|
||||
let vuex_latlng = uni.getStorageSync('vuex_latlng')?uni.getStorageSync('vuex_latlng'):''
|
||||
if(vuex_pointer){
|
||||
this.pointer = vuex_pointer
|
||||
this.pointer.distance = getDistance(vuex_latlng.lat, vuex_latlng.lng, this.pointer.lat, this.pointer.lng)
|
||||
this.showPointer = true
|
||||
uni.removeStorageSync('vuex_pointer')
|
||||
|
||||
}
|
||||
},
|
||||
onHide() {
|
||||
console.log("this.showTips",this.showTips)
|
||||
this.showTips = false
|
||||
this.showPointer = false
|
||||
this.pointer = null
|
||||
},
|
||||
methods: {
|
||||
// 我的位置
|
||||
getUserLocation() {
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
success: (res) => {
|
||||
console.log("res", res)
|
||||
uni.removeStorageSync('vuex_latlng')
|
||||
this.lng = res.longitude
|
||||
this.lat = res.latitude
|
||||
uni.setStorageSync('vuex_latlng',{lng:this.lng,lat:this.lat})
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log("err", err)
|
||||
}
|
||||
})
|
||||
},
|
||||
async getToken() {
|
||||
await uni.login({
|
||||
provider: 'weixin',
|
||||
success: (res) => {
|
||||
console.log("rescode", res.code)
|
||||
this.$u.api.login({
|
||||
code: res.code
|
||||
}).then(res => {
|
||||
this.$u.vuex('vuex_token', res.token)
|
||||
this.$u.api.user().then(res => {
|
||||
this.$u.vuex('vuex_user', res)
|
||||
})
|
||||
this.getPointers()
|
||||
}).catch(err => {
|
||||
console.log('login-error:', JSON.stringify(err))
|
||||
})
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log("errtoken", JSON.stringify(res))
|
||||
}
|
||||
});
|
||||
},
|
||||
async getArea() {
|
||||
let that = this
|
||||
let url = 'https://vr.langye.net/api/mobile/base-form/show'
|
||||
url = url + '?filter[0][key]=number&filter[0][op]=eq&filter[0][value]=theme&with_relations[0]=detail'
|
||||
await uni.request({
|
||||
url: url,
|
||||
method: "GET",
|
||||
data: {
|
||||
table_name: "parameters",
|
||||
id: 1,
|
||||
token: this.vuex_token,
|
||||
activity_list_id: 13,
|
||||
activity_tag: "walksz",
|
||||
},
|
||||
success(res) {
|
||||
that.listArea.push(...res.data.detail)
|
||||
},
|
||||
fail(err) {
|
||||
console.log(err)
|
||||
}
|
||||
})
|
||||
},
|
||||
confirmArea(e) {
|
||||
if (e) {
|
||||
this.area = this.listArea[e].value
|
||||
this.theme_id = this.listArea[e].id
|
||||
this.getPointers()
|
||||
}
|
||||
},
|
||||
openPicker() {
|
||||
uni.hideKeyboard()
|
||||
this.showArea = true
|
||||
|
||||
|
||||
},
|
||||
goSearch() {
|
||||
uni.navigateTo({
|
||||
url: '/packages/search/search'
|
||||
})
|
||||
},
|
||||
getConfig() {
|
||||
this.$u.api.getAppId().then((res) => {
|
||||
res.config.map(item => {
|
||||
if (item.key === 'tips') {
|
||||
this.tips = item.value
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
async getPointers() {
|
||||
this.pointers = []
|
||||
this.markers = []
|
||||
const res = await this.$u.api.getPoints({
|
||||
theme_id: this.theme_id,
|
||||
})
|
||||
this.pointers = res.points
|
||||
res.points.map((item,index) => {
|
||||
if(index<15){
|
||||
this.markers.push({
|
||||
id: item.id,
|
||||
latitude: parseFloat(item.lat),
|
||||
longitude: parseFloat(item.lng),
|
||||
iconPath: '/static/home-marker.png',
|
||||
truePath: item.image.url,
|
||||
width: 0,
|
||||
height: 0,
|
||||
title: item.name,
|
||||
has_answer: item.has_answer,
|
||||
item: item,
|
||||
customCallout: {
|
||||
display: 'ALWAYS'
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
pushMarkers(e){
|
||||
console.log("e",e)
|
||||
if(e && this.markers.length<this.pointers.length){
|
||||
this.pointers.map((item,index)=>{
|
||||
if(index>this.markers.length-1){
|
||||
this.markers.push({
|
||||
id: item.id,
|
||||
latitude: parseFloat(item.lat),
|
||||
longitude: parseFloat(item.lng),
|
||||
iconPath: '/static/home-marker.png',
|
||||
truePath: item.image.url,
|
||||
width: 0,
|
||||
height: 0,
|
||||
title: item.name,
|
||||
has_answer: item.has_answer,
|
||||
item: item,
|
||||
customCallout: {
|
||||
display: 'ALWAYS'
|
||||
},
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
async getNears() {
|
||||
|
||||
const res = await this.$u.api.getNear({
|
||||
lat: this.lat,
|
||||
lng: this.lng,
|
||||
})
|
||||
if (res.list && res.list.length > 0) {
|
||||
this.pointers = []
|
||||
this.markers = []
|
||||
this.showPointer = false
|
||||
} else {
|
||||
toast('附近暂无红色站点')
|
||||
return
|
||||
}
|
||||
this.pointers = res.list
|
||||
res.list.map(item => {
|
||||
this.markers.push({
|
||||
id: item.id,
|
||||
latitude: parseFloat(item.lat),
|
||||
longitude: parseFloat(item.lng),
|
||||
iconPath: '/static/home-marker.png',
|
||||
truePath: item.image.url,
|
||||
width: 0,
|
||||
height: 0,
|
||||
title: item.name,
|
||||
has_answer: item.has_answer,
|
||||
item: item,
|
||||
customCallout: {
|
||||
display: 'ALWAYS'
|
||||
},
|
||||
})
|
||||
})
|
||||
},
|
||||
toDetail() {
|
||||
uni.navigateTo({
|
||||
url: '/packages/detail/detail?id=' + this.pointer.id,
|
||||
});
|
||||
},
|
||||
closeDetail() {
|
||||
this.showPointer = false
|
||||
setTimeout(function() {
|
||||
this.pointer = null
|
||||
}, 100);
|
||||
|
||||
},
|
||||
showDetail(e) {
|
||||
const arr = this.pointers.filter(item => item.id === e.markerId)
|
||||
if (arr.length > 0) {
|
||||
this.pointer = arr[0]
|
||||
this.pointer.distance = getDistance(this.lat, this.lng, this.pointer.lat, this.pointer.lng)
|
||||
console.log(this.pointer.distance)
|
||||
}
|
||||
|
||||
this.showPointer = true
|
||||
|
||||
},
|
||||
toMap(e) {
|
||||
toMapAPP(this.pointer.lat, this.pointer.lng, this.pointer.name)
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.cotainer {
|
||||
.navBarBox {
|
||||
// height: 299rpx;
|
||||
position: fixed;
|
||||
padding-bottom: 30rpx;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
border-bottom: 10rpx solid #dbd0ba;
|
||||
|
||||
&-top {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0
|
||||
}
|
||||
|
||||
&-title {
|
||||
width: 399rpx;
|
||||
height: 102rpx;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navBar {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 30rpx;
|
||||
|
||||
&-left {
|
||||
width: 58rpx;
|
||||
height: 86rpx;
|
||||
}
|
||||
|
||||
&-center {
|
||||
background: rgba(219, 208, 186, .4);
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 50rpx;
|
||||
width: 55%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #73685c;
|
||||
|
||||
>view {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 31rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
width: 58rpx;
|
||||
height: 86rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.maps {
|
||||
|
||||
#myMap {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
&-info {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 160rpx;
|
||||
width: 100%;
|
||||
z-index:99;
|
||||
&-pointer {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
width: 85%;
|
||||
margin: 0 auto;
|
||||
padding: 30rpx;
|
||||
font-size: 28rpx;
|
||||
box-shadow: -2px -3rpx 12px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&-title {
|
||||
color: #919191;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
cover-view {
|
||||
margin-bottom: 10rpx;
|
||||
white-space: normal;
|
||||
|
||||
&:first-child {
|
||||
font-size: 36rpx;
|
||||
color: #000;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-items: normal;
|
||||
white-space: normal;
|
||||
width: 97%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
&-btn {
|
||||
display: flex;
|
||||
font-size: 28rpx;
|
||||
color: #c89a73;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 20rpx;
|
||||
// border-top: 1px solid #e9e9e9;
|
||||
|
||||
cover-view {
|
||||
cover-image {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-near {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
text-align: right;
|
||||
|
||||
cover-image {
|
||||
width: 243rpx;
|
||||
height: 142rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&-cover {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
|
||||
&-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-img {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 70rpx;
|
||||
border: 2px solid #dbd0ba;
|
||||
}
|
||||
|
||||
&-lock {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
position: absolute;
|
||||
top: 4rpx;
|
||||
left: 4rpx;
|
||||
text-align: center;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 70rpx;
|
||||
line-height: 70rpx;
|
||||
|
||||
}
|
||||
|
||||
&-lockimg {
|
||||
width: 26rpx;
|
||||
height: 34rpx;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
&-label {
|
||||
cover-image {
|
||||
width: 270rpx;
|
||||
height: 65rpx;
|
||||
|
||||
}
|
||||
|
||||
font-size: 20rpx;
|
||||
color: #dbd0ba;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
cover-view {
|
||||
padding: 10rpx 40rpx;
|
||||
width: 200rpx;
|
||||
white-space: normal;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
|
||||
&-wrap {
|
||||
&-close {
|
||||
color: #fff;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 80rpx;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
border: 1px solid #fff;
|
||||
position: absolute;
|
||||
top: 135rpx;
|
||||
left: 20rpx;
|
||||
font-size: 50rpx;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
&-img {
|
||||
position: relative;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
|
||||
u-image {
|
||||
&>view {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-tip {
|
||||
color: #333;
|
||||
font-size: 33rpx;
|
||||
margin: 0 auto;
|
||||
line-height: 2;
|
||||
height: 800rpx;
|
||||
overflow: scroll;
|
||||
position: absolute;
|
||||
top: 220rpx;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0%);
|
||||
width: 80%;
|
||||
|
||||
view {
|
||||
p {
|
||||
text-indent: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fade-in .5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-out {
|
||||
animation: fade-out .4s ease-out both;
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue