|
|
@@ -1,277 +1,211 @@
|
|
|
<template>
|
|
|
- <view class="s_page">
|
|
|
- <map
|
|
|
- class="myMap"
|
|
|
- :latitude="latitude"
|
|
|
- :longitude="longitude"
|
|
|
- :markers="markers"
|
|
|
- style="width: 750rpx; flex: 1"
|
|
|
- scale="11"
|
|
|
- ></map>
|
|
|
- <!-- 左上角返回按钮 -->
|
|
|
- <image
|
|
|
- @tap.stop="navBack"
|
|
|
- class="map-back"
|
|
|
- src="/static/images/map_back.png"
|
|
|
- mode=""
|
|
|
- :style="{ top: StatusBar + 'px' }"
|
|
|
- ></image>
|
|
|
- <!-- 申请记录按钮 -->
|
|
|
- <view class="record-application" @tap.stop="toNavigate" :style="{ top: StatusBar + 'px' }">
|
|
|
- <text class="record-application-text">申请记录</text>
|
|
|
- </view>
|
|
|
- <!-- 列表 -->
|
|
|
- <view class="bottom-con">
|
|
|
- <zj-page-fill
|
|
|
- @scrolltolower="loadMore"
|
|
|
- :scrollAttribute="{
|
|
|
- 'refresher-enabled': false
|
|
|
- }"
|
|
|
- >
|
|
|
- <view class="list_view_lay">
|
|
|
- <view class="box" v-for="item in websitList" :key="item.websitId">
|
|
|
- <view class="mb20 flex_abs mt20">
|
|
|
- <text class="fw600 f32_302">{{ item.websitName }}</text>
|
|
|
- <text class="f24_999">距离{{ item.distance }}km</text>
|
|
|
- </view>
|
|
|
- <view class="flex_abs">
|
|
|
- <text class="f28_666" style="width: 520rpx">地址：{{ item.address }}</text>
|
|
|
- <tag
|
|
|
- style="
|
|
|
- width: 150rpx;
|
|
|
- height: 50rpx;
|
|
|
- background-image: linear-gradient(to bottom right, #7fdaff, #6da7ff);
|
|
|
- border-radius: 30rpx;
|
|
|
- "
|
|
|
- >
|
|
|
- <text @tap.stop="toApplicationPartsForm(item)" class="f24_FFF">申请</text>
|
|
|
- </tag>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </zj-page-fill>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <div style="width: 100%; height: 100vh">
|
|
|
+ <div class="searchBox">
|
|
|
+ <input type="text" id="search" placeholder="输入关键字选取地点" autocomplete="off" />
|
|
|
+ </div>
|
|
|
+ <div id="container" class="map" tabindex="0"></div>
|
|
|
+ <div id="footer">
|
|
|
+ <div class="addressBox">
|
|
|
+ <span id="address">{{ address }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="btnOk" id="postMessageAdds" @click="getweizhi">确定</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-const sysInfo = uni.getSystemInfoSync()
|
|
|
-import api from '@/common/http/'
|
|
|
-import tag from '@/components/tag.vue'
|
|
|
-import zjPageFill from '@/components/zj-page-container/zj-page-fill.vue'
|
|
|
export default {
|
|
|
- components: {
|
|
|
- tag,
|
|
|
- zjPageFill
|
|
|
- },
|
|
|
+ components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
- StatusBar: sysInfo.statusBarHeight,
|
|
|
- latitude: '',
|
|
|
- longitude: '',
|
|
|
- markers: [
|
|
|
- {
|
|
|
- id: 'm_1',
|
|
|
- latitude: 23.183466,
|
|
|
- longitude: 113.35709,
|
|
|
- iconPath: '/static/images/order_call.png'
|
|
|
- }
|
|
|
- ],
|
|
|
- websitList: [],
|
|
|
- page: 1,
|
|
|
- pageSize: 3,
|
|
|
- websit_number: ''
|
|
|
+ mapInfo: {
|
|
|
+ latitude: 0,
|
|
|
+ longitude: 0,
|
|
|
+ address: ''
|
|
|
+ },
|
|
|
+ address: ''
|
|
|
}
|
|
|
},
|
|
|
- async onLoad() {
|
|
|
- const getWebsit_number = uni.getStorageSync('userInfo')
|
|
|
- this.websit_number = getWebsit_number.websit_number
|
|
|
- await this.getCurrentWebsit()
|
|
|
- await this.getWebsitList()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- navBack() {
|
|
|
- uni.navigateBack({
|
|
|
- delta: 1
|
|
|
+ mounted() {
|
|
|
+ var center = ''
|
|
|
+
|
|
|
+ const map = new AMap.Map('container', {
|
|
|
+ zoom: 17,
|
|
|
+ resizeEnable: true,
|
|
|
+ rotateEnable: true,
|
|
|
+ pitchEnable: true,
|
|
|
+ pitch: 80,
|
|
|
+ rotation: -15,
|
|
|
+ // viewMode: '3D', //开启3D视图,默认为关闭
|
|
|
+ buildingAnimation: true, //楼块出现是否带动画
|
|
|
+ enableHighAccuracy: true, //是否使用高精度定位，默认:true
|
|
|
+ expandZoomRange: true,
|
|
|
+ zooms: [3, 20]
|
|
|
+ })
|
|
|
+
|
|
|
+ //地图开始
|
|
|
+ AMap.plugin('AMap.Geolocation', () => {
|
|
|
+ var geolocation = new AMap.Geolocation({
|
|
|
+ enableHighAccuracy: true, //是否使用高精度定位，默认:true
|
|
|
+ timeout: 10000, //超过10秒后停止定位，默认：无穷大
|
|
|
+ convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
|
|
|
+ showButton: true, //显示定位按钮，默认：true
|
|
|
+ showMarker: false, //定位成功后在定位到的位置显示点标记，默认：true
|
|
|
+ showCircle: false, //定位成功后用圆圈表示定位精度范围，默认：true
|
|
|
+ panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
|
|
|
+ offset: [15, 150], //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
|
|
|
+ position: 'LB' //定位按钮停靠位置，默认：'LB'，左下角
|
|
|
})
|
|
|
- },
|
|
|
- toNavigate() {
|
|
|
- this.$navToPage({
|
|
|
- url: `/packageAttachment/pages/orderOfSales/index`
|
|
|
+ map.addControl(geolocation)
|
|
|
+ geolocation.getCurrentPosition((status, result) => {
|
|
|
+ if (status == 'complete') {
|
|
|
+ this.mapInfo.longitude = result.position.lng
|
|
|
+ this.mapInfo.latitude = result.position.lat
|
|
|
+ this.mapInfo.address = result.formattedAddress
|
|
|
+ if (center != '') {
|
|
|
+ map.setCenter(center)
|
|
|
+ } else {
|
|
|
+ map.setCenter([result.position.lng, result.position.lat])
|
|
|
+ }
|
|
|
+ this.address = result.formattedAddress
|
|
|
+ } else {
|
|
|
+ if (center != '') {
|
|
|
+ map.setCenter(center)
|
|
|
+ }
|
|
|
+ console.log('失败原因排查信息:' + result.message)
|
|
|
+ }
|
|
|
})
|
|
|
- },
|
|
|
- toApplicationPartsForm(item) {
|
|
|
- var { websitId, websitName, partsWebsitId } = item
|
|
|
- this.$navToPage({
|
|
|
- url: `/packageAttachment/pages/applicationParts/applicationPartsForm?websitId=${websitId}&websitName=${websitName}&partsWebsitId=${partsWebsitId}`
|
|
|
+ })
|
|
|
+
|
|
|
+ AMapUI.loadUI(['misc/PositionPicker'], PositionPicker => {
|
|
|
+ var positionPicker = new PositionPicker({
|
|
|
+ mode: 'dragMap', //dragMap：拖拽地图，dragMarker：拖拽点
|
|
|
+ map: map
|
|
|
})
|
|
|
- },
|
|
|
- loadMore() {
|
|
|
- this.page++
|
|
|
- this.getWebsitList()
|
|
|
- },
|
|
|
- getWebsitList() {
|
|
|
- let params = {
|
|
|
- latitude: this.latitude,
|
|
|
- longitude: this.longitude,
|
|
|
- pageNo: this.page,
|
|
|
- pageSize: this.pageSize,
|
|
|
- websitNumber: this.websit_number
|
|
|
- }
|
|
|
- api.post('/app/buy/websit/list', params).then(res => {
|
|
|
- this.websitList = this.websitList.concat(res.data.records).filter(item => item.partsWebsitId)
|
|
|
- if (this.websitList.length != 0) {
|
|
|
- this.markers = this.websitList.map(item => {
|
|
|
- return {
|
|
|
- id: item.websitId,
|
|
|
- latitude: item.latitude,
|
|
|
- longitude: item.longitude,
|
|
|
- width: 28,
|
|
|
- height: 28,
|
|
|
- fontSize: 16,
|
|
|
- iconPath: '',
|
|
|
- callout: {
|
|
|
- content: item.websitName,
|
|
|
- padding: 5,
|
|
|
- display: 'ALWAYS',
|
|
|
- borderRadius: 5,
|
|
|
- color: '#E95505'
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
+ positionPicker.on('success', positionResult => {
|
|
|
+ this.mapInfo = {
|
|
|
+ latitude: positionResult.position.lat,
|
|
|
+ longitude: positionResult.position.lng,
|
|
|
+ address: positionResult.regeocode.formattedAddress
|
|
|
}
|
|
|
+ this.address = positionResult.address
|
|
|
})
|
|
|
- },
|
|
|
- async getCurrentWebsit() {
|
|
|
- const addressInfo = await new Promise((resolve, reject) => {
|
|
|
- uni.getLocation({
|
|
|
- type: 'gcj02',
|
|
|
- geocode: true,
|
|
|
- success: res => {
|
|
|
- resolve({
|
|
|
- lat: res.latitude,
|
|
|
- lng: res.longitude,
|
|
|
- address: res.address
|
|
|
- })
|
|
|
- },
|
|
|
- fail: err => {
|
|
|
- reject(err)
|
|
|
+ positionPicker.on('fail', positionResult => {
|
|
|
+ this.address = ''
|
|
|
+ })
|
|
|
+ positionPicker.start()
|
|
|
+ })
|
|
|
+
|
|
|
+ AMapUI.loadUI(['misc/PoiPicker'], PoiPicker => {
|
|
|
+ const poiPicker = new PoiPicker({
|
|
|
+ input: 'search'
|
|
|
+ })
|
|
|
+ //初始化poiPicker
|
|
|
+ poiPicker.on('poiPicked', poiResult => {
|
|
|
+ const item = poiResult.item
|
|
|
+ this.mapInfo = {
|
|
|
+ latitude: item.location.lat,
|
|
|
+ longitude: item.location.lng,
|
|
|
+ address: item.district + ' ' + item.name + ' ' + item.address
|
|
|
+ }
|
|
|
+ map.setCenter([item.location.lng, item.location.lat])
|
|
|
+ document.getElementById('search').value = ''
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getweizhi() {
|
|
|
+ AMap.plugin(['AMap.Geocoder'], () => {
|
|
|
+ var geocoder = new AMap.Geocoder()
|
|
|
+ geocoder.getAddress([this.mapInfo.longitude, this.mapInfo.latitude], (status, result) => {
|
|
|
+ if (status === 'complete' && result.info === 'OK') {
|
|
|
+ if (result && result.regeocode) {
|
|
|
+ // 具体地址
|
|
|
+ this.mapInfo.address = result.regeocode.formattedAddress
|
|
|
+ // 省
|
|
|
+ this.mapInfo.province = result.regeocode.addressComponent.province
|
|
|
+ // 市
|
|
|
+ this.mapInfo.city = result.regeocode.addressComponent.city
|
|
|
+ if (this.mapInfo.city == '') this.mapInfo.city = this.mapInfo.province
|
|
|
+ // 区
|
|
|
+ this.mapInfo.district = result.regeocode.addressComponent.district
|
|
|
+ console.log(this.mapInfo)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ alert('获取省市区失败，请重新选择地址')
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
- console.log(addressInfo)
|
|
|
- let { lat, lng } = addressInfo
|
|
|
- this.latitude = lat
|
|
|
- this.longitude = lng
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-.confirm-btn {
|
|
|
- background-image: linear-gradient(to bottom right, #7fdaff, #6da7ff);
|
|
|
-}
|
|
|
-
|
|
|
-.map-back {
|
|
|
- position: absolute;
|
|
|
- left: 30rpx;
|
|
|
- width: 60rpx;
|
|
|
- height: 60rpx;
|
|
|
- border-radius: 30rpx;
|
|
|
- overflow: hidden;
|
|
|
+.map {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
}
|
|
|
|
|
|
-.record-application {
|
|
|
- position: absolute;
|
|
|
- right: 30rpx;
|
|
|
- width: auto;
|
|
|
- height: 60rpx;
|
|
|
- border-radius: 30rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 20rpx;
|
|
|
- background: #6da7ff;
|
|
|
-}
|
|
|
-
|
|
|
-.record-application-text {
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 500;
|
|
|
- text-align: center;
|
|
|
- color: #ffffff !important;
|
|
|
- line-height: 60rpx;
|
|
|
+#right {
|
|
|
+ display: none;
|
|
|
}
|
|
|
|
|
|
-.bottom-con {
|
|
|
- width: 750rpx;
|
|
|
- padding-top: 25rpx;
|
|
|
- padding-left: 25rpx;
|
|
|
- padding-bottom: 30rpx;
|
|
|
- padding-right: 25rpx;
|
|
|
- // border-radius: 40rpx;
|
|
|
- border-top-right-radius: 40rpx;
|
|
|
- border-top-left-radius: 40rpx;
|
|
|
- // box-shadow: 0px -10rpx 40rpx 0px rgba(0, 0, 0, 0.05);
|
|
|
+#footer {
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
- background-color: #ffffff;
|
|
|
- z-index: 100;
|
|
|
- // overflow:hidden;
|
|
|
- height: 500rpx;
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+ border-top: 1px solid #cccccc;
|
|
|
+ z-index: 9999;
|
|
|
+ padding: 10px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
-.item {
|
|
|
- background-color: #ffffff;
|
|
|
- overflow: hidden;
|
|
|
- border-bottom: 2rpx solid #f7f7f7;
|
|
|
- padding-bottom: 20rpx;
|
|
|
+.addressBox {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ font-size: 16px;
|
|
|
+ margin: 10px 0 15px;
|
|
|
}
|
|
|
|
|
|
-.flex_abs {
|
|
|
- flex-direction: row;
|
|
|
+.btnOk {
|
|
|
+ line-height: 44px;
|
|
|
+ text-align: center;
|
|
|
+ background: #0091ff;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
}
|
|
|
|
|
|
-.mask {
|
|
|
+.searchBox {
|
|
|
position: fixed;
|
|
|
- left: 0;
|
|
|
top: 0;
|
|
|
- bottom: 0;
|
|
|
- right: 0;
|
|
|
- background-color: rgba(0, 0, 0, 0.3);
|
|
|
- z-index: 1000;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.closes {
|
|
|
- flex-direction: row;
|
|
|
- justify-content: flex-end;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 9999;
|
|
|
+ height: auto;
|
|
|
+ padding: 10px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: rgba(255, 255, 255, 0);
|
|
|
}
|
|
|
|
|
|
-.closes-img {
|
|
|
- height: 40rpx;
|
|
|
- width: 40rpx;
|
|
|
+#search {
|
|
|
+ width: 100%;
|
|
|
+ height: 38px;
|
|
|
+ border-radius: 20px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ outline: none;
|
|
|
+ background: rgba(255, 255, 255, 0.5);
|
|
|
+ padding-left: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
-.phone-con {
|
|
|
- width: 540rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- padding: 10rpx 30rpx 40rpx 30rpx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .confirm-btn {
|
|
|
- font-size: 32rpx;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
-
|
|
|
- .iconfont {
|
|
|
- color: #e5e5e5;
|
|
|
- position: absolute;
|
|
|
- right: 30rpx;
|
|
|
- top: 30rpx;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
+#container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
</style>
|
linwenxin