|
|
@@ -0,0 +1,1003 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <!-- 轮播 -->
|
|
|
+ <view class="carousel-section">
|
|
|
+ <swiper class="carousel" :autoplay="true" :interval="3000" :duration="1000" @change="swiperChange">
|
|
|
+ <swiper-item v-for="(item, index) in carouselList" :key="item.id"><image :src="item.pic"></image></swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+ <view class="swiper-dot">
|
|
|
+ <template v-for="item in swiperLength">
|
|
|
+ <view class="swiper-dots-item" :key="item" :class="{ action: swiperCurrent + 1 === item }"></view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ <!-- 分类 -->
|
|
|
+ <view class="cate-section flex">
|
|
|
+ <view class="cate-left" @click="navto('/pages/form/applicationForm')"><image src="../../static/img/love.png"></image></view>
|
|
|
+ <view class="cate-right">
|
|
|
+ <view class="rightBox flex" @click="navto('/pages/form/tovolApplyDemo')">
|
|
|
+ <image src="../../static/img/right-top.png"></image>
|
|
|
+ </view>
|
|
|
+ <view class="rightBox flex" @click="navto('/pages/applic/Love')">
|
|
|
+ <image src="../../static/img/right-bottom.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 红会科普 -->
|
|
|
+ <view class="science-section">
|
|
|
+ <view class="science-title flex">
|
|
|
+ <view class="titleBox">
|
|
|
+ <view class="title">红会科普</view>
|
|
|
+ <image class="img" src="../../static/img/underTitle.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <navigator class="science-more" url="/pages/applic/science">
|
|
|
+ 更多
|
|
|
+ <image src="../../static/icon/moreRight.png" mode=""></image>
|
|
|
+ </navigator>
|
|
|
+ </view>
|
|
|
+ <scroll-view class="science-box" scroll-x>
|
|
|
+ <view class="science-content">
|
|
|
+ <view class="science-item" v-for="(item, index) in science" :key="index" @click="Jump(item)">
|
|
|
+ <image :src="item.image_input[0]" mode=""></image>
|
|
|
+ <view class="article-title word1_ellipsis">
|
|
|
+ <text class="word1_ellipsis">{{ item.title }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- sos急救系统 -->
|
|
|
+ <view class="system">
|
|
|
+ <view class="system-title">
|
|
|
+ <view class="title" @click="tolocation">救在身边</view>
|
|
|
+ <image class="img" src="../../static/img/underTitle.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="system-map" @click="tolocation">
|
|
|
+ <!-- <view class="map-box" @click="tolocation"><image src="../../static/img/map.jpg" mode=""></image></view> -->
|
|
|
+ <map class="map-box" @updated='mapChange' id="map_1" ref='map_1' :latitude="latitude4"
|
|
|
+ :longitude="longitude4" :markers="marker"></map>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- AED导航 -->
|
|
|
+ <!-- <view class="list-box">
|
|
|
+ <view class="system-title">
|
|
|
+ <view class="title" @click="tolocation">AED导航</view>
|
|
|
+ <image class="img" src="../../static/img/underTitle.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view id="container" style="margin-top: 22rpx;">
|
|
|
+ <map
|
|
|
+ class="map-box"
|
|
|
+ id="map"
|
|
|
+ show-location
|
|
|
+ :markers="marker"
|
|
|
+ :scale="scale"
|
|
|
+ :latitude="latitude4"
|
|
|
+ :longitude="longitude4"
|
|
|
+ ref="map"
|
|
|
+ style="height: 450rpx"
|
|
|
+ @markertap="markertap"
|
|
|
+ ></map>
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ <view class="list-tpl flex" @click="openAddress(item)" v-for="(item, index) in AEDList" :key="item.id">
|
|
|
+ <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>
|
|
|
+ </view>
|
|
|
+ <uni-load-more :status="loadingType"></uni-load-more>
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ <view class="pad">
|
|
|
+ <view class="love-box">
|
|
|
+ <view class="love-title">
|
|
|
+ 博爱罗田
|
|
|
+ </view>
|
|
|
+ <view class="main flex">
|
|
|
+ <view class="erweima-box">
|
|
|
+ <view class="erweima">
|
|
|
+ <image src="../../static/img/gongzhonghao.jpg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="font">红会公众号</view>
|
|
|
+ </view>
|
|
|
+ <image class="main-image" src="../../static/img/index-love.png" mode=""></image>
|
|
|
+ <view class="erweima-box">
|
|
|
+ <view class="erweima">
|
|
|
+ <image src="../../static/img/lovetongdao.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="font">爱心通道</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </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 { loadIndexs, bannerlist, getListAED, getDistance } from '@/api/index.js';
|
|
|
+import { saveUrl, interceptor } from '@/utils/loginUtils.js';
|
|
|
+import { mapState, mapMutations } from 'vuex';
|
|
|
+import { userinfo } from '@/api/user.js';
|
|
|
+import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
|
|
+import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
|
|
|
+import { getLoca } from '@/utils/wxAuthorized.js';
|
|
|
+import { getcomAddress } from '@/api/index.js';
|
|
|
+// #ifdef H5
|
|
|
+ import {
|
|
|
+ weixindata,
|
|
|
+ weixinlocation
|
|
|
+ } from '@/utils/wxAuthorized';
|
|
|
+ // #endif
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ uniPopup,
|
|
|
+ uniLoadMore
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ swiperCurrent: 0,
|
|
|
+ titleNViewBackground: '',
|
|
|
+ carouselList: [], //轮播
|
|
|
+ science: [], //文章列表
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ AEDList: [],
|
|
|
+ latitude2: '',
|
|
|
+ longitude2: '',
|
|
|
+ latitude4: '',
|
|
|
+ longitude4: '',
|
|
|
+ address: '',
|
|
|
+ loadingType: 'more',
|
|
|
+ markerList: [],
|
|
|
+ marker: [],
|
|
|
+ longitude: '121.15829821166992',
|
|
|
+ latitude: '30.044394499237708',
|
|
|
+ longitude1: '120.553638',
|
|
|
+ latitude1: '30.547011',
|
|
|
+ scale: '12', //地图缩放程度
|
|
|
+ scale1: '15',
|
|
|
+ showbox: false,
|
|
|
+ showTEXT: false,
|
|
|
+ addressData: {
|
|
|
+ name: '',
|
|
|
+ mobile: '',
|
|
|
+ latitude: 0, //纬度
|
|
|
+ longitude: 0, //经度
|
|
|
+ address: {
|
|
|
+ province: '',
|
|
|
+ city: '',
|
|
|
+ district: '',
|
|
|
+ detail: ''
|
|
|
+ },
|
|
|
+ area: '',
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ baseLongitude: 114.316738,
|
|
|
+ baseLatitude: 30.353495,
|
|
|
+ baseMarker: [{ id: 'baseAddr', latitude: 30.353495, longitude: 114.316738, iconPath: '../../static/img/location-icon.png' }],
|
|
|
+ swiperLength: 0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.IndexShare();
|
|
|
+ saveUrl();
|
|
|
+ console.log(11, this);
|
|
|
+ if (!this.hasLogin) {
|
|
|
+ // 登录拦截
|
|
|
+ // interceptor();
|
|
|
+ uni.showModal({
|
|
|
+ title: '登录',
|
|
|
+ content: '您未登录，是否马上登陆?',
|
|
|
+ success: e => {
|
|
|
+ if (e.confirm) {
|
|
|
+ interceptor();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: e => {
|
|
|
+ console.log(e);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.loadData();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.IndexShare();
|
|
|
+ saveUrl();
|
|
|
+ let obj = this;
|
|
|
+ try {
|
|
|
+ let locationAddress;
|
|
|
+ // #ifdef H5
|
|
|
+ let wxOjb = require('jweixin-module');
|
|
|
+ locationAddress = wxOjb.getLocation;
|
|
|
+ // #endif
|
|
|
+ // #ifdef MP
|
|
|
+ locationAddress = uni.getLocation;
|
|
|
+ // #endif
|
|
|
+ // #ifdef H5
|
|
|
+ wxOjb.ready(() => {
|
|
|
+ console.log('加载完毕注册事件');
|
|
|
+ locationAddress({
|
|
|
+ type: 'wgs84',
|
|
|
+ success: function(res) {
|
|
|
+ console.log('获取经纬度', res);
|
|
|
+ obj.longitude4 = res.longitude;
|
|
|
+ obj.latitude4 = res.latitude;
|
|
|
+ obj.marker = [
|
|
|
+ {
|
|
|
+ longitude: res.longitude,
|
|
|
+ latitude: res.latitude,
|
|
|
+ iconPath: '/static/img/img19.png',
|
|
|
+ width: '45',
|
|
|
+ height: '45'
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ obj.loadData();
|
|
|
+ },
|
|
|
+ fail(e) {
|
|
|
+ console.log('失败', e);
|
|
|
+ this.tishi();
|
|
|
+ // window.location.reload();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ // #ifdef MP
|
|
|
+ locationAddress({
|
|
|
+ type: 'wgs84',
|
|
|
+ success: function(res) {
|
|
|
+ console.log('获取经纬度', res);
|
|
|
+ obj.longitude4 = res.longitude;
|
|
|
+ obj.latitude4 = res.latitude;
|
|
|
+ obj.marker = [
|
|
|
+ {
|
|
|
+ longitude: res.longitude,
|
|
|
+ latitude: res.latitude,
|
|
|
+ iconPath: '/static/img/img19.png',
|
|
|
+ width: '45',
|
|
|
+ height: '45'
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ obj.loadData();
|
|
|
+ },
|
|
|
+ fail(e) {
|
|
|
+ console.log('失败', e);
|
|
|
+ this.tishi();
|
|
|
+ // window.location.reload();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
+ } catch (e) {
|
|
|
+ let locationAddress;
|
|
|
+ // #ifdef H5
|
|
|
+ let wxOjb = require('jweixin-module');
|
|
|
+ locationAddress = wxOjb.getLocation;
|
|
|
+ // #endif
|
|
|
+ // #ifdef MP
|
|
|
+ locationAddress = uni.getLocation;
|
|
|
+ // #endif
|
|
|
+ // #ifdef H5
|
|
|
+ wxOjb.ready(() => {
|
|
|
+ console.log('加载完毕注册事件');
|
|
|
+ locationAddress({
|
|
|
+ type: 'wgs84',
|
|
|
+ success: function(res) {
|
|
|
+ console.log('获取经纬度', res);
|
|
|
+ obj.longitude4 = res.longitude;
|
|
|
+ obj.latitude4 = res.latitude;
|
|
|
+ obj.loadData();
|
|
|
+ },
|
|
|
+ fail(e) {
|
|
|
+ console.log('失败', e);
|
|
|
+ this.tishi();
|
|
|
+ // window.location.reload();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
+ // #ifdef MP
|
|
|
+ locationAddress({
|
|
|
+ type: 'wgs84',
|
|
|
+ success: function(res) {
|
|
|
+ console.log('获取经纬度', res);
|
|
|
+ obj.longitude4 = res.longitude;
|
|
|
+ obj.latitude4 = res.latitude;
|
|
|
+ obj.loadData();
|
|
|
+ },
|
|
|
+ fail(e) {
|
|
|
+ console.log('失败', e);
|
|
|
+ // window.location.reload();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState('user', ['userInfo', 'baseURL', 'hasLogin'])
|
|
|
+ },
|
|
|
+ // 下拉加载
|
|
|
+ onReachBottom() {
|
|
|
+ this.loadData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapMutations('user', ['setUserInfo']),
|
|
|
+ tocontribution() {
|
|
|
+ uni.navigateTo({
|
|
|
+ // url: "/pages/applic/contribution"
|
|
|
+ url: '/pages/form/applicationForm'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ IndexShare() {
|
|
|
+ let obj = this;
|
|
|
+ // let money = obj.money;
|
|
|
+ let item = {
|
|
|
+ link: 'http://lt.igxys.com/index/#/',// 分享链接
|
|
|
+ imgUrl: 'http://lt.igxys.com/index/static/img/002.png',
|
|
|
+ desc: '弘扬红十字精神，传播红十字观念，宣传红十字工作，这是一个汇聚爱心、救助之家力量的平台',
|
|
|
+ title: '罗田县红十字会',
|
|
|
+ success: console.log('分享加载成功')
|
|
|
+ };
|
|
|
+ console.log('分享加',item)
|
|
|
+ weixindata(item);
|
|
|
+ },
|
|
|
+ //提示
|
|
|
+ tishi(){
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content:'获取当前位置信息失败,是否刷新页面。',
|
|
|
+ success: function(res){
|
|
|
+ if (res.confirm) {
|
|
|
+ window.location.reload();
|
|
|
+ console.log('用户点击确定');
|
|
|
+ } else if (res.cancel) {
|
|
|
+ console.log('用户点击取消');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ swiperChange(e) {
|
|
|
+ const index = e.detail.current;
|
|
|
+ this.swiperCurrent = index;
|
|
|
+ this.titleNViewBackground = this.carouselList[index].background;
|
|
|
+ },
|
|
|
+ // 调用高德
|
|
|
+ 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=30.537043,120.567191&name=浙江省嘉兴市桐乡市高桥镇高桥大道51号'
|
|
|
+ window.location.href = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${address}`;
|
|
|
+
|
|
|
+ // window.location.href = `http://uri.amap.com/navigation?from=114.02597366,22.54605355&to=114.029243,22.609562&mode=car&src=nyx_super`
|
|
|
+ // http://uri.amap.com/navigation?from=" + fromLongitude + "," + fromLatitude + "&to="+ longitude + "," + latitude + "&mode=car&src=nyx_super
|
|
|
+ },
|
|
|
+ // 调用腾讯
|
|
|
+ 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.latitude4;
|
|
|
+ let longitude6 = this.longitude4;
|
|
|
+ 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`;
|
|
|
+ },
|
|
|
+ // 调用谷歌
|
|
|
+ toGoogleMap() {
|
|
|
+ let latitude = this.latitude2;
|
|
|
+ let longitude = this.longitude2;
|
|
|
+ console.log('选择谷歌', latitude, longitude);
|
|
|
+ },
|
|
|
+ navto(url) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: url
|
|
|
+ });
|
|
|
+ },
|
|
|
+ tolocation() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/applic/location'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ toapplic() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/applic/appliSystem'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ tohelpActi() {
|
|
|
+ uni.navigateTo({
|
|
|
+ // url: "/pages/applic/tohelpActi"
|
|
|
+ url: '/pages/form/tovolApply'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ toOrgan() {
|
|
|
+ console.log('kepuxingbaoming');
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/train/index'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 点击图标
|
|
|
+ markertap(e) {
|
|
|
+ console.log(e.target.markerId);
|
|
|
+ this.$refs.popup.open();
|
|
|
+ let obj = this;
|
|
|
+ for (let i = 0; i < obj.marker.length; i++) {
|
|
|
+ if (e.target.markerId == obj.marker[i].id) {
|
|
|
+ obj.latitude2 = obj.marker[i].latitude;
|
|
|
+ obj.longitude2 = obj.marker[i].longitude;
|
|
|
+ obj.address = obj.marker[i].address;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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 // 单位米
|
|
|
+ },
|
|
|
+ loadData() {
|
|
|
+ let obj = this;
|
|
|
+ console.log('打印当前经纬度', obj.longitude4, obj.latitude4);
|
|
|
+ userinfo({}).then(({ data }) => {
|
|
|
+ obj.setUserInfo(data);
|
|
|
+ loadIndexs({}).then(({ data }) => {
|
|
|
+ obj.carouselList = data.banner; //轮播图
|
|
|
+ obj.swiperLength = data.banner.length;
|
|
|
+ bannerlist().then(({ data }) => {
|
|
|
+ console.log(data);
|
|
|
+ obj.science = data;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ if (obj.loadingType === 'noMore') {
|
|
|
+ //防止重复加载
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 修改当前对象状态为加载中
|
|
|
+ obj.loadingType = 'loading';
|
|
|
+ getListAED({
|
|
|
+ page: obj.page,
|
|
|
+ limit: obj.limit
|
|
|
+ }).then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ console.log(obj.latitude4, 999);
|
|
|
+ console.log(obj.longitude4, 999);
|
|
|
+ // obj.AEDList = data
|
|
|
+ for(let i = 0; i<data.length; i++){
|
|
|
+ data[i].space = obj.space(obj.latitude4,obj.longitude4,data[i].latitude,data[i].longitude);
|
|
|
+ }
|
|
|
+ obj.AEDList = obj.AEDList.concat(data);
|
|
|
+ obj.markerList = data
|
|
|
+ obj.page++;
|
|
|
+ if (obj.limit == data.length) {
|
|
|
+ obj.loadingType = 'more';
|
|
|
+ } else {
|
|
|
+ obj.loadingType = 'noMore';
|
|
|
+ }
|
|
|
+ })
|
|
|
+ getDistance({
|
|
|
+ lng1: obj.longitude4,
|
|
|
+ lat1: obj.latitude4
|
|
|
+ }).then(({ data }) => {
|
|
|
+ console.log(data, 980);
|
|
|
+ obj.AEDList = data;
|
|
|
+ obj.AEDList = data.slice(0, 5);
|
|
|
+ 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.marker = obj.marker.concat(arr);
|
|
|
+ obj.marker = obj.marker.slice(0, 6);
|
|
|
+ // uni.showModal({
|
|
|
+ // title: '提示',
|
|
|
+ // content: JSON.stringify(obj.marker)
|
|
|
+ // })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 选择当前位置
|
|
|
+ // chooseAddress() {
|
|
|
+ // console.log('233')
|
|
|
+ // let obj = this;
|
|
|
+ // uni.chooseLocation({
|
|
|
+ // success: function(res) {
|
|
|
+ // console.log(res)
|
|
|
+ // obj.addressData.area = res.name;
|
|
|
+ // console.log('位置名称：' + res.name);
|
|
|
+ // console.log('详细地址：' + res.address);
|
|
|
+ // console.log('经度：' + res.longitude);
|
|
|
+ // console.log('纬度：' + res.latitude);
|
|
|
+ // obj.addressData.latitude = res.latitude;
|
|
|
+ // obj.addressData.longitude = res.longitude;
|
|
|
+ // obj.addressDetail = res.address;
|
|
|
+ // console.log('common_address123',obj.addressDetail )
|
|
|
+ // console.log('latitude123',obj.addressData.latitude )
|
|
|
+ // console.log('longitude123',obj.addressData.longitude )
|
|
|
+ // getcomAddress({
|
|
|
+ // common_address: obj.addressDetail,
|
|
|
+ // longitude: obj.addressData.longitude,
|
|
|
+ // latitude: obj.addressData.latitude
|
|
|
+ // }).then(data => {
|
|
|
+ // console.log(333)
|
|
|
+ // console.log(data);
|
|
|
+ // if (data.status == 200) {
|
|
|
+ // obj.$api.msg('保存成功')
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ // 导航
|
|
|
+ openAddress(item) {
|
|
|
+ let obj = this;
|
|
|
+ obj.latitude2 = item.latitude;
|
|
|
+ obj.longitude2 = item.longitude;
|
|
|
+ obj.address = item.address;
|
|
|
+ this.$refs.popup.open();
|
|
|
+ },
|
|
|
+ Jump(item) {
|
|
|
+ // console.log(item);
|
|
|
+ if (item.url != '') {
|
|
|
+ window.open(item.url);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/applic/info?id=' + item.id
|
|
|
+ });
|
|
|
+ },
|
|
|
+ open() {
|
|
|
+ this.$refs.popup.open();
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.$refs.popup.close();
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+page,.content {
|
|
|
+ background: #FFFFFF !important;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+a {
|
|
|
+ text-decoration: none;
|
|
|
+ color: #5f5f5f;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.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;
|
|
|
+ // border-bottom: 1rpx solid #f0f0f0;
|
|
|
+ }
|
|
|
+
|
|
|
+ // .row-1 {
|
|
|
+ // margin: auto;
|
|
|
+ // .first_aid {
|
|
|
+ // width: 300rpx;
|
|
|
+ // height: 300rpx;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // .row-2 {
|
|
|
+ // font-size: 38rpx;
|
|
|
+ // margin-top: 20rpx;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ background-color: #f8f8f8;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ /* 头部 轮播图 */
|
|
|
+ .carousel-section {
|
|
|
+ padding-top: 34rpx;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .carousel {
|
|
|
+ width: 700rpx;
|
|
|
+ height: 370rpx;
|
|
|
+ border-radius: 15rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 370rpx;
|
|
|
+ border-radius: 15rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .swiper-dot {
|
|
|
+ padding-top: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .swiper-dots-item {
|
|
|
+ width: 25rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ border-radius: 4rpx 4rpx;
|
|
|
+ background-color: #fbb8b3;
|
|
|
+ margin: 0 16rpx;
|
|
|
+ // z-index: 999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .action {
|
|
|
+ background-color: #f3392c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 分类
|
|
|
+ .cate-section {
|
|
|
+ padding: 20rpx 24rpx 0 4rpx;
|
|
|
+ width: 100%;
|
|
|
+ .cate-left {
|
|
|
+ width: 50%;
|
|
|
+ height: 404rpx;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cate-right {
|
|
|
+ width: 50%;
|
|
|
+ height: 404rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ .rightBox {
|
|
|
+ height: 212rpx;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: -20rpx;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 红会科普
|
|
|
+ .science-section {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #ffffff;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ padding-right: 25rpx;
|
|
|
+ .science-title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .science-more {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #f3392c;
|
|
|
+ image {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ width: 14rpx;
|
|
|
+ height: 25rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .titleBox {
|
|
|
+ position: relative;
|
|
|
+ .title {
|
|
|
+ position: relative;
|
|
|
+ z-index: 3;
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #f3392c;
|
|
|
+ }
|
|
|
+ .img {
|
|
|
+ width: 70rpx;
|
|
|
+ height: 10rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .science-box {
|
|
|
+ margin-top: 18rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ border-bottom: 1rpx solid #f0f0f0;
|
|
|
+ white-space: nowrap;
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ // .uni-scroll-view-content{
|
|
|
+ // display: flex;
|
|
|
+ // }
|
|
|
+ .science-content {
|
|
|
+ // width: 100%;
|
|
|
+
|
|
|
+ // display: flex;
|
|
|
+ display: -webkit-box;
|
|
|
+
|
|
|
+ .science-item {
|
|
|
+ margin-right: 24rpx;
|
|
|
+ width: 286rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ background: #f5f5f5;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ image {
|
|
|
+ border-radius: 15rpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 200rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .article-title {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 3;
|
|
|
+ left: 20rpx;
|
|
|
+ bottom: 12rpx;
|
|
|
+ width: 246rpx;
|
|
|
+ height: 33rpx;
|
|
|
+ background: #f3392c;
|
|
|
+ opacity: 0.37;
|
|
|
+ border-radius: 17rpx;
|
|
|
+ line-height: 1;
|
|
|
+ padding: 0 22rpx;
|
|
|
+ color: #fefefe;
|
|
|
+ text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // sos急救中心
|
|
|
+ .system {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ margin-top: 18rpx;
|
|
|
+ padding-top: 40rpx;
|
|
|
+ // padding-bottom: 45rpx;
|
|
|
+ // margin-bottom: 43rpx;
|
|
|
+
|
|
|
+ .system-title {
|
|
|
+ position: relative;
|
|
|
+ .title {
|
|
|
+ position: relative;
|
|
|
+ z-index: 3;
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #f3392c;
|
|
|
+ }
|
|
|
+ .img {
|
|
|
+ width: 70rpx;
|
|
|
+ height: 10rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .system-map {
|
|
|
+ width: 100%;
|
|
|
+ height: 500rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+
|
|
|
+ padding-bottom: 45rpx;
|
|
|
+
|
|
|
+ .map-box {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 500rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 500rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //AED
|
|
|
+ .list-box {
|
|
|
+ margin-top: 44rpx;
|
|
|
+ padding: 0rpx 30rpx 24rpx;
|
|
|
+ // margin-bottom: 84rpx;
|
|
|
+
|
|
|
+ .system-title {
|
|
|
+ position: relative;
|
|
|
+ .title {
|
|
|
+ position: relative;
|
|
|
+ z-index: 3;
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #f3392c;
|
|
|
+ }
|
|
|
+ .img {
|
|
|
+ width: 70rpx;
|
|
|
+ height: 10rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .map-box {
|
|
|
+ // background-color: #FFFFFF;
|
|
|
+ width: 100%;
|
|
|
+ height: 366rpx;
|
|
|
+ // border: 2rpx solid #F2F2F2;
|
|
|
+ // box-shadow: 5px 15px 15px 5px #f2f2f2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-tpl {
|
|
|
+ background-color: #ffffff;
|
|
|
+ margin: 22rpx 0rpx;
|
|
|
+ padding: 25rpx 0rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 2rpx #F1F1F1 solid;
|
|
|
+
|
|
|
+ .list-left {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .info {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .addr {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ width: 90%;
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 10%;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip {
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.pad {
|
|
|
+ padding-bottom: 170rpx;
|
|
|
+}
|
|
|
+.love-box {
|
|
|
+ margin: 60rpx auto 0;
|
|
|
+ width: 689rpx;
|
|
|
+ height: 400rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 2px solid #F3392C;
|
|
|
+ padding: 40rpx 44rpx;
|
|
|
+ .love-title{
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 42rpx;
|
|
|
+ font-family: Swei Marker Leg CJK SC;
|
|
|
+ font-weight: 900;
|
|
|
+ color: #F2473B;
|
|
|
+ }
|
|
|
+ .main{
|
|
|
+ padding-top: 50rpx;
|
|
|
+ position: relative;
|
|
|
+ justify-content: space-between;
|
|
|
+ .main-image {
|
|
|
+ position: absolute;
|
|
|
+ top: 62rpx;
|
|
|
+ left: 118rpx;
|
|
|
+ width: 382rpx;
|
|
|
+ height: 202rpx;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ .erweima-box {
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ .erweima {
|
|
|
+ width: 179rpx;
|
|
|
+ height: 179rpx;
|
|
|
+ background: #000000;
|
|
|
+ image{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .font {
|
|
|
+ margin-top: 14rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
