elink-star
/
epmet-apartment-mp
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

生活圈页面迁移

epass
mk 2 months ago
parent
790b5ee1c0
commit
6ef2871073
6 changed files with 548 additions and 72 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      app.json
  2. 13
      custom-tab-bar/index.js
  3. 366
      pages/life/life.js
  4. 9
      pages/life/life.json
  5. 60
      pages/life/life.wxml
  6. 150
      pages/life/life.wxss

6
app.json
View File

@ -98,7 +98,11 @@
"permission": {
"scope.userLocation": {
"desc": "将获取您的位置信息"
}
},
"routePlan": {
"version": "1.0.11",
"provider": "wx50b5593e81dd937a"
}
},
"requiredPrivateInfos": [
"getLocation",

13
custom-tab-bar/index.js
View File

@ -29,13 +29,12 @@ Component({
bulge:true,
text: "服务",
},
// {
// pagePath: "/pages/life/life",
// iconPath: "/images/icon/life.png",
// selectedIconPath: "/images/icon/life-a.png",
// text: "生活圈"
// },
{
pagePath: "/pages/life/life",
iconPath: "/images/icon/life.png",
selectedIconPath: "/images/icon/life-a.png",
text: "生活圈"
},
{
pagePath: "/pages/mine/mine",
iconPath: "/images/icon/mine.png",

366
pages/life/life.js
View File

@ -1,66 +1,328 @@
// pages/life/life.js
/*
* @Author: mk 2403457699@qq.com
* @Date: 2024-08-19 14:08:31
* @LastEditors: mk 2403457699@qq.com
* @LastEditTime: 2024-10-21 11:08:03
* @FilePath: \epmet-voluntary-mp\pages\livingCircle\livingCircle.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
// import {sphereLifeSearchList} from "../../api/livingCircle"
const app = getApp()
Page({
data: {
longitude:'', //经度
latitude: '', //维度
scale: 13, //地图默认缩放等级
markers: [], //点位数据
showModal: true, //弹框显隐
modalData: {}, //详情信息
circles:[{
latitude: '',
longitude: '',
color: "#ef4f52",
fillColor: '#f2d5d466',
radius: 1800,
strokeWidth: 2,
}],
active:0,
pageNo:1,
tabList:[{name:'全部',value:0},{name:'教育培训',value:1},{name:'医疗卫生',value:2},{name:'商业服务',value:3},{name:'文化体育',value:4},{name:'金融电邮',value:5},{name:'其他',value:6},],
list:[],
showModalDetail:false,
detailList:[],
tableList:[],
community:{}
},
/**
* 页面的初始数据
*/
data: {
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
onHide(){
if(wx.getStorageSync('livingCircleType')){
wx.removeStorage({
key: 'livingCircleType',
})
}
},
async onShow() {
this.mapCtx = wx.createMapContext('map');
let than = this;
try {
const location = await new Promise((resolve, reject) => {
wx.getLocation({
type: 'gcj02',
success(res) {
resolve(res);
},
fail(err) {
reject(err);
}
});
});
than.setData({
longitude: location.longitude,
latitude: location.latitude,
'circles[0].longitude': location.longitude,
'circles[0].latitude': location.latitude,
});
// 重置列表
than.restList();
// await than.sphereLifeSearchList();
if( wx.getStorageSync('livingCircleType')){
this.setData({
active: wx.getStorageSync('livingCircleType')
})
}
if(than.data.active == '1'){
this.loadMarkers([{
type: 'community',
longitude: this.data.community.longitude,//'120.372537'
latitude: this.data.community.latitude,//'36.098056'
width: 28,
height: 38,
zindex:10,
}])
}else if(than.data.active != '1'){
this.filterList(than.data.active)
}
} catch (err) {
console.error('获取位置失败', err);
}
},
handelSearch(e){
this.sphereLifeSearchList(e.detail)
if(this.data.active == '3'){
this.filterList('3')
}else if(this.data.active == '2'){
this.filterList('2')
}else if(this.data.active == '0'){
this.filterList('0')
}else if(this.data.active != '1'){
this.filterList(this.data.active)
}
this.loadMarkers(this.data.list)
},
async sphereLifeSearchList(searchKey) {
try {
let parm = {
lon: this.data.longitude,//'120.372537'
lat: this.data.latitude,//'36.098056'
name: searchKey || ''
};
},
const res = await sphereLifeSearchList(parm); // 使用 await 等待异步请求完成
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
if (res.code === 0 && res.data) {
// 处理返回的数据
res.data = res.data.map(item => {
if (item.latitude) {
item.distance = this.getDistance(this.data.latitude, this.data.longitude, item.latitude, item.longitude).toFixed(2);
}
return item; // 返回修改后的 item
});
},
this.setData({
tableList: res.data
});
this.loadMarkers(res.data);
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
} else {
this.restList();
this.loadMarkers([]);
}
} catch (err) {
console.log(err);
this.restList();
this.loadMarkers([]);
}
},
loadMarkers(markers){
let markersData = markers.map((marker,index) => {
console.log(marker.type,);
return {
id:index,
longitude: marker.longitude,
latitude: marker.latitude,
title: marker.name,
iconPath: marker.type === 'user'?'../../images/map/map-poi.png': marker.type === 'relaxation'?'../../images/map/relaxation.png':marker.type === '阵地'?'../../images/map/position.png':marker.type==='志愿组织'?'../../images/map/organization.png': marker.type === 'community'?'../../images/map/community.png':'../../images/map/relaxation.png',
width: 28,
height: 28,
zindex:12,
data:marker
};
});
markersData.push({
type: 'user',
longitude: this.data.longitude,//'120.372537'
latitude: this.data.latitude,//'36.098056'
width: 28,
height: 38,
zindex:10,
});
console.log(markersData,'渲染前点位');
console.log(this.data.active);
this.setData({
markers: markersData,
// showModal:this.data.active !== 1?true:false,//默认打开列表，禅道-1801
});
},
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
onClickTab(e){
this.setData({
markers:[],
active:e.currentTarget.dataset.value
})
this.restList()
if(e.currentTarget.dataset.value == '1'){
this.loadMarkers([{
type: 'community',
longitude: this.data.community.longitude,//'120.372537'
latitude: this.data.community.latitude,//'36.098056'
width: 28,
height: 38,
zindex:10,
}])
}else if(e.currentTarget.dataset.value != '1'){
this.filterList(e.currentTarget.dataset.value)
}
},
},
markertap(e) {
let markerData = this.data.markers.find(marker => marker.id === e.detail.markerId);
if(this.data.active !== 1){
this.setData({
showModalDetail: true,
detailList:[markerData.data]
});
}else{
let key = 'T5YBZ-OHPW4-77SUI-KZVFO-LYQL5-4OBTA';
let referer = '北邻家';
let endPoint = JSON.stringify({ //终点
'name': app.globalData.userInfo.agencyName + '服务点',
'latitude':this.data.community.latitude,
'longitude':this.data.community.longitude
});
wx.navigateTo({
url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
});
}
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
onClikTab(){
this.restList()
if(this.data.active =='3'){
this.filterList('3')
}else if(this.data.active =='2'){
this.filterList('2')
}else if(this.data.active =='0'){
this.filterList('0')
}else if(this.data.active !='1'){
this.filterList(this.data.active)
}
this.setData({
showModal: !this.data.showModal,
});
},
filterList(type){
if(type == '0'){
this.setData({
list:this.data.tableList.filter(item=>item.type !== '场所')
})
}else if (type == '2'){
this.setData({
list:this.data.tableList.filter(item=>item.type === '志愿组织')
})
}else if (type == '3'){
this.setData({
list:this.data.tableList.filter(item=>item.type === '阵地')
})
}else if (type != '1'){
if(type == '4'){
this.setData({
list:this.data.tableList.filter(item=>item.type === '教育培训')
})
}else if(type == '5'){
this.setData({
list:this.data.tableList.filter(item=>item.type === '医疗卫生')
})
}else if(type == '6'){
this.setData({
list:this.data.tableList.filter(item=>item.type === '商业服务')
})
}else if(type == '7'){
this.setData({
list:this.data.tableList.filter(item=>item.type === '文化体育')
})
}else if(type == '8'){
this.setData({
list:this.data.tableList.filter(item=>item.type === '金融电邮')
})
}else if(type == '9'){
this.setData({
list:this.data.tableList.filter(item=>item.type === '其他')
})
}
}
this.loadMarkers(this.data.list)
},
onClose() {
this.setData({
showModal: false,
showModalDetail:false
});
},
restList(){
this.setData({
list:[],
pageNo:1,
markers:[],
})
},
toMyCommunity(){
wx.navigateTo({
url: '/pages/myCommunity/myCommunity',
})
},
routePlanning(e){
let key = 'T5YBZ-OHPW4-77SUI-KZVFO-LYQL5-4OBTA';
let referer = '北邻家';
let endPoint = JSON.stringify({ //终点
'name': e.currentTarget.dataset.item.name,
'latitude': e.currentTarget.dataset.item.latitude,
'longitude': e.currentTarget.dataset.item.longitude
});
wx.navigateTo({
url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
});
},
toDetail(e){
let obj = e.currentTarget.dataset.obj
if(e.currentTarget.dataset.type ==="阵地"){
wx.navigateTo({
url: `/subpages/placeDetails/pages/index/index?id=${e.currentTarget.dataset.id}`,
})
}else if(e.currentTarget.dataset.type ==="志愿组织"){
wx.navigateTo({
url: `/subpages/Myorganization/pages/organizationdetails/organizationdetails?id=${e.currentTarget.dataset.id}&type=map`,
})
}else {
wx.navigateTo({
url: `/subpages/merchantDetails/pages/index/index?obj=${encodeURIComponent(JSON.stringify(obj))}`,
})
}
},
// 根据两个经纬度获取当前距离
getDistance(lat1, lon1, lat2, lon2) {
const R = 6371;
const dLat = (lat2 - lat1) * Math.PI / 180;
const dLon = (lon2 - lon1) * Math.PI / 180;
const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
const distance = R * c; // 距离，单位为千米
return distance;
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})

9
pages/life/life.json
View File

@ -1,3 +1,10 @@
{
"usingComponents": {}
"usingComponents": {
"van-popup": "@vant/weapp/popup/index",
"van-tab": "@vant/weapp/tab/index",
"van-tabs": "@vant/weapp/tabs/index",
"van-search": "@vant/weapp/search/index",
"van-empty": "@vant/weapp/empty/index"
},
"navigationBarTitleText": "生活圈"
}

60
pages/life/life.wxml
View File

@ -1,2 +1,58 @@
<!--pages/life/life.wxml-->
<text>pages/life/life.wxml</text>
<view style="height: 100vh;overflow: hidden;">
<van-search model:value="{{ searckKey }}" bind:search="handelSearch" placeholder="输入关键字" background="rgba(0,0,0,0)" shape="round"/>
<view class="tab flex ">
<view wx:for="{{tabList}}" wx:key="index" class="{{active === index?'active':''}} item" data-value="{{item.value}}" bind:tap="onClickTab">
<text>{{item.name}}</text>
</view>
</view>
<view class="all">
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" markers="{{markers}}" bindmarkertap="markertap" circles="{{circles}}">
</map>
<movable-area class="movable-area">
<movable-view class="movable-view" direction="all" x="280" y="500" bind:tap="onClikTab" wx:if="{{active!==1}}">
<view class="content flex flex-center-i">
<image src="{{!showModal?'../../images/map/list.png':'../../images/map/address.png'}}" class="icon-30" style="margin-right: 10rpx;" mode=""/>
<text style="color: #666666;">{{!showModal?'查看列表':'查看地图'}}</text>
</view>
</movable-view>
<movable-view class="movable-view flex flex-center-i" direction="all" x="280" y="500" wx:if="{{active===1}}">
<image src="../../images/map/toCommunity.png" class="toCommunity" bind:tap="toMyCommunity" mode=""/>
</movable-view>
</movable-area>
</view>
<view>
<van-popup round custom-style="height: 60%;border-radius:0;padding:0 20rpx 20rpx;box-sizing: border-box;background-color: #f3f3f5;" position="bottom" show="{{ showModal }}" bind:close="onClose" overlay="false">
<scroll-view bind:scrolltolower="scrolltolower" scroll-y class="tab_content" wx:if="{{list}}" style="overflow: hidden;">
<view class="map_item flex flex-center-i" bind:tap="toDetail" data-obj="{{item}}" data-type="{{item.type}}" data-id="{{item.id}}" wx:for="{{list}}" wx:key="index">
<image src="{{(item.attrs && item.attrs.length > 0) ? item.attrs[0].url : 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240927/087bb3a330a6494b9b09b5341c309ced.png'}}" mode="" class="left_image" />
<view class="flex flex-1 flex-y flex-sb">
<view class="font-size-30 font-bold ellipsis">{{item.name}}</view>
<view class="{{item.type === 'relaxation'?'tag-g':item.type === '志愿阵地'?'tag-b':item.type === '志愿组织'?'tag-r':'tag-g'}} tag font-size-20 ">{{item.type}}</view>
<view class="font-size-26">距我{{item.distance}}km</view>
</view>
<view class="flex flex-y flex-center-j" bind:tap="routePlanning" data-item="{{item}}">
<image src="../../images/map/navigation.png" mode="" class="navigation"/>
<text class="color-gray font-size-20">导航</text>
</view>
</view>
<view style="height: 120rpx;width: 100%;"></view>
</scroll-view>
<van-empty description="暂无数据" wx:else/>
</van-popup>
<van-popup round custom-style="height: 500rpx;border-radius:0;padding:0 20rpx 20rpx;box-sizing: border-box;background-color: #f3f3f5;" position="bottom" show="{{ showModalDetail }}" bind:close="onClose" overlay="false">
<view class="map_item flex flex-center-i" data-type="{{item.type}}" bind:tap="toDetail" data-id="{{item.id}}" data-obj="{{item}}" wx:for="{{detailList}}" wx:key="index">
<image src="{{(item.attrs&&item.attrs.length()>0)?attrs[0].url:'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240927/087bb3a330a6494b9b09b5341c309ced.png'}}" mode="" class="left_image" />
<view class="flex flex-1 flex-y flex-sb">
<view class="font-size-30 font-bold ellipsis">{{item.name}}</view>
<view class="tag font-size-20 ">{{item.type === "relaxation"?'休闲娱乐':item.type === "position"?'志愿阵地':item.type === "org"?'志愿组织':''}}</view>
<view class="font-size-26">距我{{item.distance}}km</view>
</view>
<view class="flex flex-y flex-center-j" bind:tap="routePlanning" data-item="{{item}}">
<image src="../../images/map/navigation.png" mode="" class="navigation"/>
<text class="color-gray font-size-20">导航</text>
</view>
</view>
<view style="height: 120rpx;width: 100%;"></view>
</van-popup>
</view>
</view>

150
pages/life/life.wxss
View File

@ -1 +1,149 @@
/* pages/life/life.wxss */
/* pages/livingCircle/livingCircle.wxss */
.map-view-container {
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
background: #F8F8F7;
width: 100%;
}
.map-view-content {
width: 100%;
background: #FFF;
padding: 20px 0 20px;
margin-top: 10px;
}
#map {
width: 100%;
height: 100vh;
position: relative;
}
.zoom-in, .zoom-out {
position: absolute;
width: 40px;
height: 40px;
color: #3fc971;
background-color: white;
border: 1px solid #3fc971;
text-align: center;
line-height: 40px;
font-size: 30px;
box-sizing: border-box;
font-weight: bold;
}
.zoom-in {
right: 10px;
bottom: 88px;
}
.zoom-out {
right: 10px;
bottom: 50px;
}
.van-search__content {
border: solid #44c9c7 2rpx;
}
.movable-area {
pointer-events: none;
z-index: 100;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.movable-area .toCommunity {
width: 150rpx;
height: 150rpx;
}
.movable-view {
pointer-events: auto;
height: 60rpx;
width: 180rpx;
font-size: 26rpx;
}
.movable-view .content {
background-color: #FFF;
border-radius: 30rpx 0 0 30rpx;
padding: 16rpx;
box-sizing: border-box;
}
.tab {
background-color: #FFF;
width: 100%;
overflow-x: scroll;
}
.tab .item {
padding: 10rpx 0;
box-sizing: border-box;
color: #666666;
min-width: 150rpx;
text-align: center;
margin-right: 20rpx;
}
.tab .active {
color: #08b3b3;
border-bottom: 6rpx solid #08b3b3;
}
.map_item {
background-color: #ffffff;
border-radius: 10rpx;
padding: 20rpx;
box-sizing: border-box;
margin-top: 20rpx;
}
.map_item .tag {
width: fit-content;
padding: 6rpx 10rpx;
box-sizing: border-box;
border-radius: 15rpx 15rpx 15rpx 0;
margin: 10rpx 0 20rpx 0;
}
.map_item .tag-g {
color: #009e8d;
background-color: #dcf4f0;
}
.map_item .tag-r {
color: #ff6363;
background-color: #ffefef;
}
.map_item .tag-b {
color: #5a77ec;
background-color: #e4e9fc;
}
.map_item .left_image {
width: 140rpx;
height: 140rpx;
margin-right: 24rpx;
border-radius: 10rpx;
}
.map_item .navigation {
width: 46rpx;
height: 46rpx;
}
.ellipsis {
padding: 0;
}
Write Preview
Loading…
Cancel
Save