|
|
@@ -1,554 +1,694 @@
|
|
|
-<template>
|
|
|
- <view class="content">
|
|
|
- <view id="map" class="map">
|
|
|
- <map @updated='mapChange' id="map_1" ref='map_1' style="width:750rpx; height: 600rpx" :latitude="latitude"
|
|
|
- :longitude="longitude" :markers="jhzmarker"></map>
|
|
|
- </view>
|
|
|
- <scroll-view scroll-y="true" class="scroll-wrapper" :style="{'height': height}" @scrolltolower="loadData">
|
|
|
- <espempty v-if="loaded && AEDList.length === 0" :tit="'救护站列表为空'"></espempty>
|
|
|
- <view class="list-tpl flex" @click="openAddress(item)" v-for="(item, index) in AEDList" :key="item.id">
|
|
|
- <template>
|
|
|
- <view class="list-left">
|
|
|
- <view class="info">
|
|
|
- <view class="title">{{ item.name }}</view>
|
|
|
- <view class="addr">地址:{{ item.address }}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="image">
|
|
|
- <image src="../../static/img/img10.png"></image>
|
|
|
- <view class="tip" v-if="item.space > 999">>999m</view>
|
|
|
- <view class="tip" v-else>{{ item.space }}m</view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- <uni-load-more :status="loadtype"></uni-load-more>
|
|
|
- </scroll-view>
|
|
|
- <uni-popup ref="popup" type="bottom" @click="close">
|
|
|
- <view class="popup_row">
|
|
|
- <view class="rows">
|
|
|
- <view class="rows-item" @click="toGaodeMap">高德地图</view>
|
|
|
- <view class="rows-item" @click="tobaiDuMap">百度地图</view>
|
|
|
- <view class="rows-item" @click="totengxunMap">腾讯地图</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </uni-popup>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import {
|
|
|
- mapState,
|
|
|
- mapMutations
|
|
|
- } from 'vuex';
|
|
|
- import espempty from '@/components/espempty';
|
|
|
- import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
|
|
- import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
|
|
|
- import {
|
|
|
- getdis,
|
|
|
- tocall,
|
|
|
- getListMechanism
|
|
|
- } from '@/api/index.js';
|
|
|
- import {
|
|
|
- userinfo
|
|
|
- } from '@/api/user.js';
|
|
|
- import {
|
|
|
- getcomAddress
|
|
|
- } from '@/api/index.js';
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- uniPopup,
|
|
|
- espempty,
|
|
|
- uniLoadMore
|
|
|
- },
|
|
|
- //相关配置参数
|
|
|
- data() {
|
|
|
- return {
|
|
|
- loaded: false,
|
|
|
- jhzmarker: [],
|
|
|
- loadtype: 'more',
|
|
|
- page: 1,
|
|
|
- limit: 10,
|
|
|
- AEDList: [],
|
|
|
- height: '',
|
|
|
- list: [],
|
|
|
- latitude: '',
|
|
|
- longitude: '',
|
|
|
- current: 0,
|
|
|
- name: '',
|
|
|
- uid: '',
|
|
|
- name: '',
|
|
|
- phone: '',
|
|
|
- to_phone: '',
|
|
|
- marker: [],
|
|
|
- specificAdd: '',
|
|
|
- addressData: {
|
|
|
- name: '',
|
|
|
- mobile: '',
|
|
|
- latitude: 0, //纬度
|
|
|
- longitude: 0, //经度
|
|
|
- address: {
|
|
|
- province: '',
|
|
|
- city: '',
|
|
|
- district: '',
|
|
|
- detail: '',
|
|
|
- },
|
|
|
- area: '',
|
|
|
- default: false
|
|
|
- },
|
|
|
- }
|
|
|
- },
|
|
|
- onReady(res) {
|
|
|
- var _this = this;
|
|
|
- uni.getSystemInfo({
|
|
|
- success: resu => {
|
|
|
- const query = uni.createSelectorQuery();
|
|
|
- query.select('.scroll-wrapper').boundingClientRect();
|
|
|
- query.exec(function(res) {
|
|
|
- console.log(res, 'ddddddddddddd');
|
|
|
- _this.height = resu.windowHeight - res[0].top + 'px';
|
|
|
- console.log('打印页面的剩余高度', _this.height);
|
|
|
- });
|
|
|
- },
|
|
|
- fail: res => {}
|
|
|
- });
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
- let obj = this;
|
|
|
- console.log('开始加载事件');
|
|
|
- // obj.loadBaseData();
|
|
|
- // uni.showLoading({
|
|
|
- // title: '加载中',
|
|
|
- // mask: true
|
|
|
- // });
|
|
|
- // obj.loadData();
|
|
|
- try {
|
|
|
- let locationAddress
|
|
|
- // #ifdef H5
|
|
|
- let wxOjb = require('jweixin-module');
|
|
|
- locationAddress = wxOjb.getLocation;
|
|
|
- // #endif
|
|
|
- // #ifdef MP
|
|
|
- locationAddress = uni.getLocation;
|
|
|
- // #endif
|
|
|
- wxOjb.ready(() => {
|
|
|
- console.log('加载完毕注册事件');
|
|
|
- locationAddress({
|
|
|
- type: 'gcj02',
|
|
|
- success: function(res) {
|
|
|
- console.log('获取经纬度', res);
|
|
|
- obj.longitude = res.longitude
|
|
|
- obj.latitude = res.latitude
|
|
|
- obj.marker = [{
|
|
|
- latitude: obj.latitude,
|
|
|
- longitude: obj.longitude,
|
|
|
- iconPath: '/static/img/img19.png',
|
|
|
- width: '45',
|
|
|
- height: '45',
|
|
|
- }, ]
|
|
|
- obj.loadData();
|
|
|
- },
|
|
|
- fail(e) {
|
|
|
- console.log('失败', e);
|
|
|
- window.location.reload();
|
|
|
- }
|
|
|
- });
|
|
|
- })
|
|
|
-
|
|
|
- } catch (e) {
|
|
|
- console.log(e);
|
|
|
- let locationAddress
|
|
|
- // #ifdef H5
|
|
|
- let wxOjb = require('jweixin-module');
|
|
|
- locationAddress = wxOjb.getLocation;
|
|
|
- // #endif
|
|
|
- // #ifdef MP
|
|
|
- locationAddress = uni.getLocation;
|
|
|
- // #endif
|
|
|
- wxOjb.ready(() => {
|
|
|
- console.log('加载完毕注册事件');
|
|
|
-
|
|
|
- locationAddress({
|
|
|
- type: 'gcj02',
|
|
|
- success: function(res) {
|
|
|
- console.log('获取经纬度1', res);
|
|
|
- obj.longitude = res.longitude
|
|
|
- obj.latitude = res.latitude
|
|
|
- obj.loadData();
|
|
|
- },
|
|
|
- fail(e) {
|
|
|
- console.log('失败', e);
|
|
|
- }
|
|
|
- });
|
|
|
- })
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState('user', ['hasLogin', 'userInfo'])
|
|
|
- },
|
|
|
- methods: {
|
|
|
- ...mapMutations('user', ['setUserInfo']),
|
|
|
- // 地图渲染完毕事件
|
|
|
- mapChange(e) {
|
|
|
- console.log(e);
|
|
|
- },
|
|
|
- // 载入数据
|
|
|
- async loadData() {
|
|
|
- let obj = this;
|
|
|
- if(obj.loadtype == 'loading' || obj.loadtype == 'noMore') {
|
|
|
- return
|
|
|
- }
|
|
|
- getListMechanism({
|
|
|
- page: obj.page,
|
|
|
- limit: obj.limit,
|
|
|
- }).then(({data}) => {
|
|
|
- uni.hideLoading();
|
|
|
- console.log(data, 999);
|
|
|
- for (let i = 0; i < data.length; i++) {
|
|
|
- data[i].space = obj.space(obj.latitude, obj.longitude, data[i].latitude, data[i].longitude);
|
|
|
- }
|
|
|
- let arr = data.map(item => ({
|
|
|
- latitude: item.latitude,
|
|
|
- longitude: item.longitude,
|
|
|
- iconPath: '/static/img/img014.png',
|
|
|
- width: '35',
|
|
|
- height: '35',
|
|
|
- id: item.id,
|
|
|
- address: item.address
|
|
|
- }));
|
|
|
- obj.jhzmarker = obj.marker.concat(arr)
|
|
|
- obj.AEDList = obj.AEDList.concat(data);
|
|
|
- console.log(obj.AEDList, 'obj.AEDList+++++++');
|
|
|
- // obj.markerList = data;
|
|
|
- obj.loaded = true
|
|
|
- if (obj.limit == data.length) {
|
|
|
- obj.loadtype = 'more';
|
|
|
- obj.page++;
|
|
|
- } else {
|
|
|
- obj.loadtype = 'noMore';
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- space(lat1, lng1, lat2, lng2) {
|
|
|
- console.log(lat1, lng1, lat2, lng2);
|
|
|
- var radLat1 = (lat1 * Math.PI) / 180.0;
|
|
|
- var radLat2 = (lat2 * Math.PI) / 180.0;
|
|
|
- var a = radLat1 - radLat2;
|
|
|
- var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
|
|
|
- var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
|
|
|
- s = s * 6378.137;
|
|
|
- s = Math.round(s * 10000) / 10000;
|
|
|
- return s * 1000; // 单位米
|
|
|
- },
|
|
|
- openAddress(item) {
|
|
|
- let obj = this;
|
|
|
- obj.latitude2 = item.latitude;
|
|
|
- obj.longitude2 = item.longitude;
|
|
|
- obj.address = item.address;
|
|
|
- this.$refs.popup.open();
|
|
|
- },
|
|
|
- // 调用高德
|
|
|
- toGaodeMap() {
|
|
|
- let latitude = this.latitude2;
|
|
|
- let longitude = this.longitude2;
|
|
|
- let address = this.address;
|
|
|
- console.log('选择高德', latitude, longitude, address);
|
|
|
- window.location.href = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${address}`;
|
|
|
- },
|
|
|
- // 调用腾讯
|
|
|
- totengxunMap() {
|
|
|
- let latitude = this.latitude2;
|
|
|
- let longitude = this.longitude2;
|
|
|
- let address = this.address;
|
|
|
- console.log('选择腾讯', latitude, longitude);
|
|
|
- window.location.href = `http://apis.map.qq.com/uri/v1/marker?marker=coord:${latitude},${longitude};addr:${address}`;
|
|
|
- },
|
|
|
- // 调用百度
|
|
|
- tobaiDuMap() {
|
|
|
- let latitude = this.latitude2;
|
|
|
- let longitude = this.longitude2;
|
|
|
- let latitude6 = this.latitude;
|
|
|
- let longitude6 = this.longitude;
|
|
|
- let address = this.address;
|
|
|
- console.log('选择百度', latitude, longitude);
|
|
|
- console.log('获取当前经纬度', latitude6, longitude6);
|
|
|
- window.location.href = `http://api.map.baidu.com/direction?origin=latlng:${latitude6},${longitude6}|name:我的位置&destination=${latitude},${longitude}&mode=driving®ion=${address}&output=html&src=webapp.baidu.openAPIdemo`;
|
|
|
- //`bdapp://map/navi?location=${longitude},${latitude}&coord_type=gc02&title=${address}&content=${address}&output=html&src=andr.baidu.openAPIdemo `
|
|
|
- },
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
- body,
|
|
|
- page {
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .map {
|
|
|
- width: 100%;
|
|
|
- height: 600rpx;
|
|
|
- }
|
|
|
-
|
|
|
- /* #ifdef H5 */
|
|
|
- .location {
|
|
|
- overflow-y: scroll; //溢出就滑动起来
|
|
|
- // z-index: 990;
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- height: 55%;
|
|
|
- width: 100%;
|
|
|
- background-color: #fff;
|
|
|
- padding: 24rpx;
|
|
|
-
|
|
|
- //搜索框
|
|
|
- .Search-box {
|
|
|
- // z-index: 999;
|
|
|
- height: 80rpx;
|
|
|
- // position: fixed;
|
|
|
- // top: 0;
|
|
|
- // left: 0;
|
|
|
- // width: 100%;
|
|
|
- // background: #FFFFFF;
|
|
|
- // padding-top: 10rpx;
|
|
|
- padding-right: 24rpx;
|
|
|
- padding-left: 24rpx;
|
|
|
-
|
|
|
- .Search-box-sort {
|
|
|
- float: left;
|
|
|
- margin-left: 32rpx;
|
|
|
- margin-right: 19rpx;
|
|
|
-
|
|
|
- .sort-text {
|
|
|
- width: 57rpx;
|
|
|
- height: 29rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- line-height: 58rpx;
|
|
|
- margin-right: 19rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .sort-img {
|
|
|
- width: 21rpx;
|
|
|
- height: 11rpx;
|
|
|
- margin-bottom: 4rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .Search-box-size {
|
|
|
- // width:70%;
|
|
|
- height: 58rpx;
|
|
|
- border-radius: 32rpx;
|
|
|
- background-color: #f1f1f1;
|
|
|
- padding-left: 36rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .box-img {
|
|
|
- height: 32rpx;
|
|
|
- width: 32rpx;
|
|
|
- margin-right: 16rpx;
|
|
|
- }
|
|
|
-
|
|
|
- // .box-right{
|
|
|
- // height: 58rpx;
|
|
|
- // // width: 100%;
|
|
|
- // background-color: pink;
|
|
|
- // }
|
|
|
-
|
|
|
- .box-word {
|
|
|
- width: 100%;
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: rgba(205, 203, 203, 1);
|
|
|
- line-height: 55rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .location-item {
|
|
|
- z-index: 1000;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- border-bottom: 1rpx solid #E7E8EA;
|
|
|
- padding: 15rpx 0;
|
|
|
-
|
|
|
- .box-left {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .img01 {
|
|
|
- width: 8rpx;
|
|
|
- height: 28rpx;
|
|
|
- margin-right: 18rpx;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 8rpx;
|
|
|
- height: 28rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .img02 {
|
|
|
- width: 117rpx;
|
|
|
- height: 117rpx;
|
|
|
- border-radius: 50%;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 117rpx;
|
|
|
- height: 117rpx;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .info {
|
|
|
- margin-left: 16rpx;
|
|
|
-
|
|
|
- .info-header {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .name {
|
|
|
- font-size: 32rpx;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
-
|
|
|
- .distance {
|
|
|
- margin-left: 25rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #303133;
|
|
|
- }
|
|
|
-
|
|
|
- .location-icon {
|
|
|
- margin-left: 10rpx;
|
|
|
- width: 20rpx;
|
|
|
- height: 26rpx;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 20rpx;
|
|
|
- height: 26rpx;
|
|
|
- display: inline;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .address {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #333333;
|
|
|
- margin-top: 33rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .box-right {
|
|
|
- .img {
|
|
|
- height: 107rpx;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 107rpx;
|
|
|
- height: 107rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .called {
|
|
|
- margin-right: 16rpx;
|
|
|
- height: 107rpx;
|
|
|
- line-height: 107rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #CB131C;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* #endif */
|
|
|
-
|
|
|
- .list-tpl {
|
|
|
- background-color: #ffffff;
|
|
|
- margin: 25rpx 0rpx;
|
|
|
- padding: 25rpx 25rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- border-radius: 15rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- border-bottom: 1px solid #f1f1f1;
|
|
|
-
|
|
|
- .list-left {
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .number {
|
|
|
- font-size: 32rpx;
|
|
|
- margin-right: 14rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .info {
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 32rpx;
|
|
|
- color: #222222;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
-
|
|
|
- .addr {
|
|
|
- width: 400rpx;
|
|
|
- margin-top: 20rpx;
|
|
|
- font-size: 20rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .image {
|
|
|
- width: 10%;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 50rpx;
|
|
|
- height: 50rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .tip {
|
|
|
- color: #7f7f7f;
|
|
|
- font-size: 21rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .popup_row {
|
|
|
- width: 100%;
|
|
|
- height: 500rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- border-radius: 20rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .rows {
|
|
|
- width: 100%;
|
|
|
- padding: 0 24rpx;
|
|
|
-
|
|
|
- .rows-item {
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- text-align: center;
|
|
|
- width: 100%;
|
|
|
- font-size: 32rpx;
|
|
|
- color: #303133;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <view id="map" class="map">
|
|
|
+ <map @updated='mapChange' id="map_1" ref='map_1' style="width:750rpx;" :style="{'height': height}"
|
|
|
+ :latitude="latitude" :longitude="longitude" :markers="marker" @markertap="lookmore"></map>
|
|
|
+ </view>
|
|
|
+ <!-- <scroll-view scroll-y="true" class="scroll-wrapper" :style="{'height': height}" @scrolltolower="loadData">
|
|
|
+ <espempty v-if="loaded && AEDList.length === 0" :tit="'智能AED列表为空'"></espempty>
|
|
|
+ <view class="list-tpl flex" @click="openAddress(item)" v-for="(item, index) in AEDList" :key="item.id">
|
|
|
+ <template>
|
|
|
+ <view class="list-left">
|
|
|
+ <view class="info">
|
|
|
+ <view class="title">{{ item.name }}</view>
|
|
|
+ <view class="addr">地址:{{ item.install_address }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="image">
|
|
|
+ <image src="../../static/img/img10.png"></image>
|
|
|
+ <view class="tip">{{item.distance >= 1000 ? item.range + 'km': item.distance + 'm'}}</view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ <uni-load-more :status="loadingType"></uni-load-more>
|
|
|
+ </scroll-view> -->
|
|
|
+ <uni-popup ref="popup" type="bottom" @click="close">
|
|
|
+ <view class="popup_row">
|
|
|
+ <view class="rows">
|
|
|
+ <view class="rows-item" @click="toGaodeMap">高德地图</view>
|
|
|
+ <view class="rows-item" @click="tobaiDuMap">百度地图</view>
|
|
|
+ <view class="rows-item" @click="totengxunMap">腾讯地图</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ <uni-popup ref="aedxq" type="bottom" @click="closeAedXq">
|
|
|
+ <view class="aedxq-wrap">
|
|
|
+ <view class="logo-wrap flex">
|
|
|
+ <image :src="baseURL + showAed.imgs" mode="" class="logo"></image>
|
|
|
+ <view class="aid-name">
|
|
|
+ {{showAed.name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="aed-dis" style="padding-top: 20rpx;">
|
|
|
+ 距离:{{showAed.dis}}
|
|
|
+ </view>
|
|
|
+ <view class="aed-address" style="padding-top: 10rpx;">
|
|
|
+ 地址:{{showAed.address}}
|
|
|
+ </view>
|
|
|
+ <view class="aed-address" style="padding-top: 10rpx;">
|
|
|
+ 联系方式:{{showAed.phone}}
|
|
|
+ </view>
|
|
|
+ <view class="aed-dh" @click="opendh">
|
|
|
+ 导航
|
|
|
+ </view>
|
|
|
+ <view class="aed-phone" @click="makecall(showAed.phone)">
|
|
|
+ 电话
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ <uni-popup ref="lookimg" type="center">
|
|
|
+ <view class="pop-wrap" style="position: relative;">
|
|
|
+ <movable-area class="popup-box">
|
|
|
+ <movable-view class="popup-item" :scale="true" direction="all">
|
|
|
+ <image :src="chooseImg" mode="widthFix"></image>
|
|
|
+ </movable-view>
|
|
|
+ </movable-area>
|
|
|
+ <image src="../../static/icon/close.png" mode="" class="close" style="width: 80rpx;height: 80rpx;"
|
|
|
+ @click="closePup"></image>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ mapState,
|
|
|
+ mapMutations
|
|
|
+ } from 'vuex';
|
|
|
+ import espempty from '@/components/espempty';
|
|
|
+ import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
|
|
+ import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
|
|
|
+ import {
|
|
|
+ getAed,
|
|
|
+ getAidList
|
|
|
+ } from '@/api/category.js'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ uniPopup,
|
|
|
+ espempty,
|
|
|
+ uniLoadMore
|
|
|
+ },
|
|
|
+ //相关配置参数
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ aedmarker: [],
|
|
|
+ loaded: false,
|
|
|
+ loadingType: 'more',
|
|
|
+ page: 1,
|
|
|
+ limit: 100,
|
|
|
+ AEDList: [],
|
|
|
+ height: '',
|
|
|
+ list: [],
|
|
|
+ latitude: '', // 本地坐标
|
|
|
+ longitude: '', // 本地坐标
|
|
|
+ phone: '',
|
|
|
+ marker: [],
|
|
|
+ showAed: {
|
|
|
+ name: '',
|
|
|
+ address: '',
|
|
|
+ addressxq: '',
|
|
|
+ dis: '',
|
|
|
+ lat: '',
|
|
|
+ lon: '',
|
|
|
+ imgs: '',
|
|
|
+ phone: ''
|
|
|
+ },
|
|
|
+ chooseImg: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onReady(res) {
|
|
|
+ var _this = this;
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: resu => {
|
|
|
+ const query = uni.createSelectorQuery();
|
|
|
+ query.select('.map').boundingClientRect();
|
|
|
+ query.exec(function(res) {
|
|
|
+ console.log(res, 'ddddddddddddd');
|
|
|
+ _this.height = resu.windowHeight - res[0].top + 'px';
|
|
|
+ console.log('打印页面的剩余高度', _this.height);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fail: res => {}
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ let obj = this;
|
|
|
+ this.getLocal()
|
|
|
+
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState('user', ['hasLogin', 'userInfo']),
|
|
|
+ ...mapState(['baseURL'])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapMutations('user', ['setUserInfo']),
|
|
|
+ // 导航
|
|
|
+ opendh() {
|
|
|
+ console.log('导航')
|
|
|
+ this.$refs.aedxq.close()
|
|
|
+ this.$refs.popup.open();
|
|
|
+ },
|
|
|
+ // 关闭图片弹窗
|
|
|
+ closePup() {
|
|
|
+ this.$refs.lookimg.close()
|
|
|
+ },
|
|
|
+ // 打开图片弹窗
|
|
|
+ openimg(src) {
|
|
|
+ this.chooseImg = this.baseURL + src
|
|
|
+ this.$refs.lookimg.open()
|
|
|
+ },
|
|
|
+ // 拨打电话
|
|
|
+ makecall(num) {
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber: num + ''
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 关闭aed详情
|
|
|
+ closeAedXq() {
|
|
|
+ this.$refs.aedxq.close()
|
|
|
+ },
|
|
|
+ // 打开aed详情
|
|
|
+ lookmore(e) {
|
|
|
+ console.log(e)
|
|
|
+ let obj = this
|
|
|
+ obj.AEDList.forEach(item => {
|
|
|
+ if (item.id == e.detail.markerId) {
|
|
|
+ obj.showAed = {
|
|
|
+ name: item.name,
|
|
|
+ address: item.address,
|
|
|
+ addressxq: item.install_address,
|
|
|
+ dis: item.range >= 1 ? (item.range + 'km') : (item.distance + 'm'),
|
|
|
+ lat: item.latitude,
|
|
|
+ lon: item.longitude,
|
|
|
+ imgs: item.image,
|
|
|
+ phone: item.phone
|
|
|
+ }
|
|
|
+ // break
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.$refs.aedxq.open()
|
|
|
+ },
|
|
|
+ // 获取本地坐标
|
|
|
+ getLocal() {
|
|
|
+ let obj = this;
|
|
|
+ console.log('ddddddddddddddddddddddddd')
|
|
|
+ let wxOjb = require('jweixin-module');
|
|
|
+ wxOjb.ready(()=> {
|
|
|
+ wxOjb.getLocation({
|
|
|
+ type: 'gcj02',
|
|
|
+ success(e) {
|
|
|
+ console.log(e)
|
|
|
+ obj.latitude = Math.abs(e.latitude)
|
|
|
+ obj.longitude = Math.abs(e.longitude)
|
|
|
+ console.log('本地坐标', obj.latitude, obj.longitude)
|
|
|
+ let item = {
|
|
|
+ id: 0,
|
|
|
+ latitude: obj.latitude,
|
|
|
+ longitude: obj.longitude,
|
|
|
+ iconPath: '/static/img/img19.png',
|
|
|
+ width: '35',
|
|
|
+ height: '35',
|
|
|
+ }
|
|
|
+ obj.marker.push(item)
|
|
|
+ obj.loadData()
|
|
|
+ },
|
|
|
+ fail(err) {
|
|
|
+ obj.getLocal()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 地图渲染完毕事件
|
|
|
+ mapChange(e) {
|
|
|
+ console.log(e);
|
|
|
+ },
|
|
|
+ // 载入数据
|
|
|
+ async loadData() {
|
|
|
+ let obj = this;
|
|
|
+ if (obj.loadingType == 'loading' || obj.loadingType == 'noMore') {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ obj.loadingType = 'loading'
|
|
|
+ getAidList({
|
|
|
+ latitude: obj.latitude,
|
|
|
+ longitude: obj.longitude,
|
|
|
+ page: obj.page,
|
|
|
+ limit: obj.limit,
|
|
|
+ }).then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ console.log(data, 'aed++++++++++++++')
|
|
|
+ obj.AEDList = obj.AEDList.concat(data);
|
|
|
+ let arr = data.map(item => ({
|
|
|
+ latitude: item.latitude,
|
|
|
+ longitude: item.longitude,
|
|
|
+ iconPath: '/static/img/img014.png',
|
|
|
+ width: '35',
|
|
|
+ height: '35',
|
|
|
+ id: item.id,
|
|
|
+ address: item.address
|
|
|
+ }));
|
|
|
+ if (data.length == obj.limit) {
|
|
|
+ obj.loadingType = 'more'
|
|
|
+ } else {
|
|
|
+ obj.loadingType = 'noMore'
|
|
|
+ }
|
|
|
+ obj.marker = obj.marker.concat(arr)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 调用高德
|
|
|
+ toGaodeMap() {
|
|
|
+ let latitude = this.showAed.lat;
|
|
|
+ let longitude = this.showAed.lon;
|
|
|
+ let address = this.showAed.name;
|
|
|
+ console.log(address)
|
|
|
+ console.log('选择高德', latitude, longitude, address);
|
|
|
+ window.location.href = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${address}`;
|
|
|
+ },
|
|
|
+ // 调用腾讯
|
|
|
+ totengxunMap() {
|
|
|
+ let latitude = this.showAed.lat;
|
|
|
+ let longitude = this.showAed.lon;
|
|
|
+ let address = this.showAed.name;
|
|
|
+ console.log('选择腾讯', latitude, longitude);
|
|
|
+ window.location.href =
|
|
|
+ `http://apis.map.qq.com/uri/v1/marker?marker=coord:${latitude},${longitude};addr:${address}`;
|
|
|
+ },
|
|
|
+ // 调用百度
|
|
|
+ tobaiDuMap() {
|
|
|
+ let latlon = this.bd_encrypt(this.showAed.lon, this.showAed.lat)
|
|
|
+ let latlon1 = this.bd_encrypt(this.longitude, this.latitude)
|
|
|
+ let latitude = latlon.bd_lat;
|
|
|
+ let longitude = latlon.bd_lng;
|
|
|
+ let latitude6 = latlon1.bd_lat;
|
|
|
+ let longitude6 = latlon1.bd_lng;
|
|
|
+ let address =this.showAed.name;
|
|
|
+ console.log('选择百度', latitude, longitude);
|
|
|
+ console.log('获取当前经纬度', latitude6, longitude6);
|
|
|
+ window.location.href =
|
|
|
+ `http://api.map.baidu.com/direction?origin=latlng:${latitude6},${longitude6}|name:我的位置&destination=${latitude},${longitude}&mode=driving®ion=${address}&output=html&src=webapp.baidu.openAPIdemo`;
|
|
|
+ },
|
|
|
+ // 高德坐标、腾讯坐标转百度坐标
|
|
|
+ bd_encrypt(gg_lng, gg_lat) {
|
|
|
+ var X_PI = Math.PI * 3000.0 / 180.0;
|
|
|
+ var x = gg_lng,
|
|
|
+ y = gg_lat;
|
|
|
+ var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
|
|
|
+ var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);
|
|
|
+ var bd_lng = z * Math.cos(theta) + 0.0065;
|
|
|
+ var bd_lat = z * Math.sin(theta) + 0.006;
|
|
|
+ return {
|
|
|
+ bd_lat: bd_lat,
|
|
|
+ bd_lng: bd_lng
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ body,
|
|
|
+ page {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .map {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* #ifdef H5 */
|
|
|
+ .location {
|
|
|
+ overflow-y: scroll; //溢出就滑动起来
|
|
|
+ // z-index: 990;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ height: 55%;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 24rpx;
|
|
|
+
|
|
|
+ //搜索框
|
|
|
+ .Search-box {
|
|
|
+ height: 80rpx;
|
|
|
+ padding-right: 24rpx;
|
|
|
+ padding-left: 24rpx;
|
|
|
+
|
|
|
+ .Search-box-sort {
|
|
|
+ float: left;
|
|
|
+ margin-left: 32rpx;
|
|
|
+ margin-right: 19rpx;
|
|
|
+
|
|
|
+ .sort-text {
|
|
|
+ width: 57rpx;
|
|
|
+ height: 29rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ line-height: 58rpx;
|
|
|
+ margin-right: 19rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sort-img {
|
|
|
+ width: 21rpx;
|
|
|
+ height: 11rpx;
|
|
|
+ margin-bottom: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .Search-box-size {
|
|
|
+ // width:70%;
|
|
|
+ height: 58rpx;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ background-color: #f1f1f1;
|
|
|
+ padding-left: 36rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .box-img {
|
|
|
+ height: 32rpx;
|
|
|
+ width: 32rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-word {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: rgba(205, 203, 203, 1);
|
|
|
+ line-height: 55rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .location-item {
|
|
|
+ z-index: 1000;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1rpx solid #E7E8EA;
|
|
|
+ padding: 15rpx 0;
|
|
|
+
|
|
|
+ .box-left {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .img01 {
|
|
|
+ width: 8rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ margin-right: 18rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 8rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .img02 {
|
|
|
+ width: 117rpx;
|
|
|
+ height: 117rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 117rpx;
|
|
|
+ height: 117rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ margin-left: 16rpx;
|
|
|
+
|
|
|
+ .info-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .distance {
|
|
|
+ margin-left: 25rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
+
|
|
|
+ .location-icon {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ width: 20rpx;
|
|
|
+ height: 26rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 20rpx;
|
|
|
+ height: 26rpx;
|
|
|
+ display: inline;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .address {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333333;
|
|
|
+ margin-top: 33rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-right {
|
|
|
+ .img {
|
|
|
+ height: 107rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 107rpx;
|
|
|
+ height: 107rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .called {
|
|
|
+ margin-right: 16rpx;
|
|
|
+ height: 107rpx;
|
|
|
+ line-height: 107rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #CB131C;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* #endif */
|
|
|
+
|
|
|
+ .list-tpl {
|
|
|
+ background-color: #ffffff;
|
|
|
+ margin-bottom: 25rpx;
|
|
|
+ padding: 25rpx 25rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ border-radius: 15rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #f1f1f1;
|
|
|
+
|
|
|
+ .list-left {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .number {
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-right: 14rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #222222;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .addr {
|
|
|
+ width: 400rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 20%;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip {
|
|
|
+ color: #7f7f7f;
|
|
|
+ font-size: 21rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup_row {
|
|
|
+ width: 100%;
|
|
|
+ height: 500rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .rows {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 24rpx;
|
|
|
+
|
|
|
+ .rows-item {
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-wrapper {
|
|
|
+ padding-top: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .aedxq-wrap {
|
|
|
+ margin: auto;
|
|
|
+ width: 710rpx;
|
|
|
+ min-height: 200rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 25rpx 25rpx 25rpx 25rpx;
|
|
|
+ background-color: rgba($color: #000000, $alpha: 0.9);
|
|
|
+ color: #fff;
|
|
|
+ position: relative;
|
|
|
+ .logo-wrap {
|
|
|
+ width: 460rpx;
|
|
|
+ // background-color: red;
|
|
|
+ align-items: center;
|
|
|
+ .logo {
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .aid-name {
|
|
|
+ display: inline-block;
|
|
|
+ width: 340rpx;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ // background-color: #bfa;
|
|
|
+ // text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .xq-top {
|
|
|
+ padding-top: 25rpx;
|
|
|
+ width: 660rpx;
|
|
|
+ height: 297rpx;
|
|
|
+ border-bottom: 1px solid #fff;
|
|
|
+ .aed-name {
|
|
|
+ font-size: 28rpx;
|
|
|
+ width: 479rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .aed-dis {
|
|
|
+ padding-top: 10rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ width: 479rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .xq-img-wrap {
|
|
|
+ height: 165rpx;
|
|
|
+ width: 660rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .aed-img-scroll {
|
|
|
+ height: 107rpx;
|
|
|
+ width: 508rpx;
|
|
|
+ .aed-img {
|
|
|
+ height: 107rpx;
|
|
|
+ margin-right: 15rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .aed-dh {
|
|
|
+ width: 147rpx;
|
|
|
+ height: 82rpx;
|
|
|
+ line-height: 82rpx;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #4d8bd6;
|
|
|
+ border-radius: 15rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 25rpx;
|
|
|
+ top: 25rpx;
|
|
|
+ }
|
|
|
+ .aed-phone {
|
|
|
+ width: 112rpx;
|
|
|
+ height: 52rpx;
|
|
|
+ line-height: 52rpx;
|
|
|
+ text-align: center;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 25rpx;
|
|
|
+ top: 225rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pop-wrap {
|
|
|
+ width: 522rpx;
|
|
|
+ height: 800rpx;
|
|
|
+ // background-color: red;
|
|
|
+ }
|
|
|
+ .popup-box {
|
|
|
+ width: 522rpx;
|
|
|
+ height: 800rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .popup-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .close {
|
|
|
+ display: block;
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ border: 50%;
|
|
|
+ position: absolute;
|
|
|
+ // background-color: red;
|
|
|
+ bottom: -100rpx;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
</style>
|
|
|
-
|