venue/venue_wx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init project

Browse Source
This commit is contained in:
limqhz
2020-06-21 16:27:58 +08:00
commit e8fe10b5fb
178 changed files with 9964 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

502
pages/home/index.js Normal file
View File

@@ -0,0 +1,502 @@
// pages/home/index.js
const app = getApp();
let s = '';
let m = 0;
let endM = 0;
let address = [];
let zoom = 6;
let mapCtx;
Page({
/**
* 页面的初始数据
*/
data: {
state: 2,
top: -200,
noticeList: [],
latitude: 0,
longitude: 0,
markers: [],
isShowAuth: false,
animationData: {},
includePoints: [],
unClickDetail: false,
unClickBtn: false,
isShowMap: false,
gohome: true,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.setData({
isShowMap: true
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
this.getLocation();
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
// this.setData({
// isShowAuth: false
// })
this.data.unClickDetail = false
this.data.unClickBtn = false
clearTimeout(s);
m = endM;
this.getAnnouncementsList();
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
endM = m;
clearTimeout(s);
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
return {
title: '智慧云馆'
}
},
// 公告滚动
lun() {
// m -= 10 / (wx.getSystemInfoSync().screenWidth / 750);
let that = this;
// that.setData({
// top: m
// })
// this.animation = animation;
let subHeight = 200 * (wx.getSystemInfoSync().screenWidth / 750);
let max = (that.data.noticeList.length - 1) * subHeight;
if (s) clearTimeout(s);
s = setTimeout(function() {
if (m * subHeight == max) {
m = 0;
let animation1 = wx.createAnimation({
delay: 0
})
this.animation1 = animation1;
this.animation1.translateY(-subHeight * m - (2 * (wx.getSystemInfoSync().screenWidth / 750))).step({
duration: 0,
timingFunction: 'step-start'
});
that.setData({
animationData: animation1.export()
})
that.lun()
} else {
m++;
let animation2 = wx.createAnimation({
delay: 0
})
this.animation2 = animation2;
this.animation2.translateY(-subHeight * m).step({
duration: 1000,
timingFunction: "linear",
});
that.setData({
animationData: animation2.export()
})
that.lun()
}
}, 2000);
},
// 切换列表
changeTip(e) {
let state = e.currentTarget.dataset.state;
this.setData({
state: state
})
if (state == 3) {
wx.showToast({
title: '暂未开放，敬请期待',
icon: 'none',
duration: 2000
})
let list = [{
longitude: this.data.longitude,
latitude: this.data.latitude
}];
this.setData({
includePoints: list
})
return;
}
// this.getLngLat();
this.getLocation();
},
// 点击地图标记点气泡
clickCalloutTap(e) {
if (this.data.unClickDetail) {
return;
}
this.data.unClickDetail = true;
if (this.data.state == 1) {
wx.navigateTo({
url: `/pages/basketballGym/index?id=${e.markerId}`,
})
}
if (this.data.state == 2) {
wx.navigateTo({
url: `/pages/gymnasium/index?id=${e.markerId}`,
})
}
},
// 跳转详情列表
pushList() {
if (this.data.unClickBtn) {
return;
}
this.data.unClickBtn = false;
wx.navigateTo({
url: '/pages/sportsGroundList/index?state=' + this.data.state,
})
},
// 打电话
callPhoen() {
this.data.unClickBtn = false;
wx.makePhoneCall({
phoneNumber: '13636573054',
})
},
// 跳转个人中心
pushMine() {
if (this.data.unClickBtn) {
return;
}
this.data.unClickBtn = false;
if (!wx.getStorageSync("accessToken")) {
wx.removeStorageSync('history');
wx.navigateTo({
url: '/pages/login/index',
})
return
}
wx.navigateTo({
url: '/pages/mine/index',
})
},
// 获取公告列表
getAnnouncementsList() {
let that = this;
app.$api.announcements({}).then(res => {
this.setData({
noticeList: res.announcements
})
// 公告列表添加前后
// let len = this.data.noticeList.length
// if (len == 1 || len == 0) {
// return;
// }
// let list = [];
// for (let i = 0; i < len; i++) {
// list.push(this.data.noticeList[i]);
// }
// list.push(this.data.noticeList[0]);
// this.setData({
// noticeList: list
// })
// that.lun()
}, err => {
});
},
// 跳转公告详情
pusnNotice(e) {
let id = e.currentTarget.dataset.id;
wx.navigateTo({
url: `/pages/notice/index?id=${id}`,
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})
},
// 获取授权
setAuthSuccess(e) {
if (e.detail.authSetting['scope.userLocation']) {
this.getLocation();
this.setData({
isShowAuth: false
})
}
},
// 获取定位
getLocation() {
let list = [
// {
// // 中心
// longitude: 121.4715700000,
// latitude: 31.2336800000
// },
{
// 北
longitude: 121.3542938232,
latitude: 31.4409663733
},
{
// 东
longitude: 121.7051696777,
latitude: 31.2750297303
},
{
// 南
longitude: 121.4167785645,
latitude: 31.0317548780
},
{
// 西
longitude: 121.2135314941,
latitude: 31.2433336586
}
];
this.setData({
includePoints: list,
})
let that = this;
wx.getLocation({
type: 'gcj02',
success: function(res) {
that.setData({
latitude: res.latitude,
longitude: res.longitude,
})
that.getData({
latitude: res.latitude,
longitude: res.longitude,
zoom: 1
});
},
fail: function(res) {
console.log(res);
if (res.errMsg == 'getLocation:fail auth deny' || res.errMsg == 'getLocation:fail:auth denied') {
that.setData({
isShowAuth: true
})
}
},
})
},
// 获取数据
getData(e) {
wx.showLoading({
title: '加载中...',
mask: true,
})
app.$api.venuesMap({
latitude: e.latitude,
longitude: e.longitude,
type: this.data.state,
zoom: e.zoom
}).then(res => {
address = [];
let list = [
// {
// // 中心
// longitude: 121.4715700000,
// latitude: 31.2336800000
// },
{
// 北
longitude: 121.3542938232,
latitude: 31.4409663733
},
{
// 东
longitude: 121.7051696777,
latitude: 31.2750297303
},
{
// 南
longitude: 121.4167785645,
latitude: 31.0317548780
},
{
// 西
longitude: 121.2135314941,
latitude: 31.2433336586
}
];
for (let i = 0; i < res.venues.length; i++) {
let obj = {};
obj.id = res.venues[i].id;
obj.latitude = res.venues[i].latitude
obj.longitude = res.venues[i].longitude
if (this.data.state == 1) {
obj.iconPath = '../../images/14@3x.png'
}
if (this.data.state == 2) {
obj.iconPath = '../../images/13@3x.png'
}
if (this.data.state == 3) {
obj.iconPath = '../../images/12@3x.png'
}
list.push({
longitude: res.venues[i].longitude,
latitude: res.venues[i].latitude
})
obj.title = res.venues[i].name
obj.width = 40;
obj.height = 40
obj.callout = {
content: res.venues[i].name + '(点此进入)',
// color: '#fff',
// bgColor: '#000',
borderRadius: 15,
padding: 10,
display: 'BYCLICK'
};
address.push(obj);
}
this.setData({
includePoints: list,
markers: [{
id: 0,
latitude: this.data.latitude,
longitude: this.data.longitude,
iconPath: '../../images/11@3x.png',
width: 20,
height: 33
}, ...address]
})
}, err => {});
},
// 地图视野发生变化时触发
regionchange(e) {
return;
console.log(e);
if (e.type == 'end') {
this.getLngLat()
}
},
getLngLat: function() {
var that = this;
let centerLatitude = 0;
let centerLongitude = 0;
let zoom = 7;
mapCtx = wx.createMapContext("map4select");
mapCtx.getCenterLocation({
success: function(res) {
centerLatitude = res.latitude;
centerLongitude = res.longitude;
// 获取视野范围
that.getRegion(centerLatitude, centerLongitude)
}
})
mapCtx.getScale({
success: function(res) {
console.log("缩放级别", res);
}
})
},
// 获取视野范围
getRegion(centerLatitude, centerLongitude) {
let that = this;
mapCtx.getRegion({
success: function(res) {
let m = GetDistance(res.northeast.latitude, res.northeast.longitude, res.northeast.latitude, res.southwest.longitude);
if (m <= 152.9) {
zoom = 7;
} else if (m <= 1200) {
zoom = 6;
} else if (m <= 4900) {
zoom = 5;
} else if (m <= 39100) {
zoom = 4;
} else {
zoom = 3;
};
// that.getData({
// latitude: centerLatitude,
// longitude: centerLongitude,
// zoom: zoom
// });
}
})
},
// 回到开始
goFrist() {
let list = [{
longitude: this.data.longitude,
latitude: this.data.latitude
}];
// this.data.includePoints
this.setData({
includePoints: list
})
}
})
function Rad(d) {
return d * Math.PI / 180.0; //经纬度转换成三角函数中度分表形式。
}
//计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
function GetDistance(lat1, lng1, lat2, lng2) {
var radLat1 = Rad(lat1);
var radLat2 = Rad(lat2);
var a = radLat1 - radLat2;
var b = Rad(lng1) - Rad(lng2);
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; //输出为公里
s = Math.round(s * 1000) / 1; //单位修改为米,取整
//s=s.toFixed(4);
return s;
}

6
pages/home/index.json Normal file
View File

@@ -0,0 +1,6 @@
{
"usingComponents": {
"confirm-dialog": "/component/confirmDialog/confirmDialog",
"header": "/component/header/header"
}
}

111
pages/home/index.wxml Normal file
View File

@@ -0,0 +1,111 @@
<!--pages/home/index.wxml-->
<header></header>
<view class='container'>
<view class='header'>
<view class='item-box {{state == 1 ? "isActive" : ""}}' bindtap='changeTip' data-state='1'>
<image src='../../images/31@3x.png' mode='aspectFit' wx:if="{{state == 1}}"></image>
<image src='../../images/30@3x.png' mode='aspectFit' wx:else></image>
<text>篮球场</text>
<!-- {{noticeList.length}} -->
</view>
<view class='item-box {{state == 2 ? "isActive" : ""}}' bindtap='changeTip' data-state='2'>
<image src='../../images/27@3x.png' mode='aspectFit' wx:if="{{state == 2}}"></image>
<image src='../../images/29@3x.png' mode='aspectFit' wx:else></image>
<text>健身</text>
</view>
<view class='item-box {{state == 3 ? "isActive" : ""}}' bindtap='changeTip' data-state='3'>
<image src='../../images/26@3x.png' mode='aspectFit' wx:if="{{state == 3}}"></image>
<image src='../../images/28@3x.png' mode='aspectFit' wx:else></image>
<text>足球场</text>
</view>
</view>
<swiper style='height: 180rpx; background: #fff;' autoplay="{{true}}" interval="5000" duration="1500" circular="{{true}}" vertical="{{true}}">
<block wx:for="{{noticeList}}" wx:key="{{index}}">
<swiper-item data-id='{{item.id}}' bindtap='pusnNotice'>
<view class='notice-item-box'>
<view class='text-box'>
<view class='tip'>{{item.tag}}</view>
<view class='message'>{{item.content}}</view>
</view>
<view class='image-box'>
<image class='shadow-image' src='https://yingdd.oss-cn-hangzhou.aliyuncs.com/f22e3c39e76db12d26bf7a086a2bf5e9.png'></image>
<image class='show-image' src='{{item.image}}' mode='aspectFit'></image>
</view>
</view>
</swiper-item>
</block>
</swiper>
<view class='body'>
<!-- 5 1000 2-->
<!-- 6 500 -->
<!-- 7 300 -->
<!-- 8 150 3-->
<!-- 9 75 -->
<!-- 10 25 4-->
<!-- 11 10 4-->
<!-- 12 5 5-->
<!-- 13 2500m -->
<!-- 14 2000m -->
<!-- 15 1000m 6-->
<!-- 16 500m 6-->
<!-- 17 300m -->
<!-- 18 150m 7-->
<!-- longitude="{{longitude}}" latitude="{{latitude}}" -->
<map id="map4select" class='map-box' include-points="{{includePoints}}" markers="{{markers}}" bindcallouttap="clickCalloutTap" bindregionchange="regionchange" scale='13'>
</map>
<!-- <cover-view class='swiper-box'>
<cover-view class='notice-box' animation="{{animationData}}">
<cover-view style='width:100%; height:200rpx;' wx:for="{{noticeList}}" wx:key="{{index}}" data-id='{{item.id}}' bindtap='pusnNotice'>
<cover-view class='notice'>
<cover-view class='text-box'>
<cover-view class='tip'>
<cover-view style='margin: 2rpx 12rpx;'>{{item.tag}}</cover-view>
</cover-view>
<cover-view class='message'>{{item.content}}</cover-view>
</cover-view>
<cover-view class='image-box'>
<cover-image class='shadow-image' src='https://yingdd.oss-cn-hangzhou.aliyuncs.com/f22e3c39e76db12d26bf7a086a2bf5e9.png'></cover-image>
<cover-image class='show-image' src='{{item.image}}' mode='aspectFit'></cover-image>
</cover-view>
</cover-view>
</cover-view>
</cover-view>
</cover-view> -->
<!-- 分享 -->
<cover-view class='share-box' style=' left: 30rpx;'>
<cover-image class='img' src='https://yingdd.oss-cn-hangzhou.aliyuncs.com/9bc27242fd0c9f9f08d867dc027cc82b.png'></cover-image>
<cover-view class='title'>分享</cover-view>
<button class='hide-btn' open-type='share'></button>
</cover-view>
<!-- 详情列表 -->
<cover-view class='share-box' style=' right: 30rpx;' bindtap='pushList'>
<cover-image class='img' src='https://yingdd.oss-cn-hangzhou.aliyuncs.com/09cb141f016f2167f4ed21a6fc6d80d6.png'></cover-image>
<cover-view class='title'>详情列表</cover-view>
<button class='hide-btn'></button>
</cover-view>
<!-- 电话 -->
<cover-view class='phone-box' style='bottom: 170rpx' bindtap='callPhoen'>
<cover-image class='img' src='https://yingdd.oss-cn-hangzhou.aliyuncs.com/27a9f473cfa3dd7f4ba1f1aceac60f94.png'></cover-image>
<button class='hide-btn'></button>
</cover-view>
<!-- 活动当前 -->
<cover-view class='phone-box' bindtap='goFrist'>
<cover-image class='img' src='https://yingdd.oss-cn-hangzhou.aliyuncs.com/c685ad2b119dbd985f55ee752d3559aa.png'></cover-image>
<button class='hide-btn'></button>
</cover-view>
<!-- 个人中心 -->
<cover-view class='mine-box' bindtap='pushMine'>
<cover-image class='img' src='https://yingdd.oss-cn-hangzhou.aliyuncs.com/74399db5cf4497532a253cb2542c1cf0.png'></cover-image>
<button class='hide-btn'></button>
</cover-view>
</view>
</view>
<confirm-dialog title="{{'提示'}}" message="{{'需要获取使用地理位置权限'}}" bindopensetting="setAuthSuccess" wx:if="{{isShowAuth}}" isAuth="{{true}}" show-cancel="{{false}}"></confirm-dialog>

244
pages/home/index.wxss Normal file
View File

@@ -0,0 +1,244 @@
/* pages/home/index.wxss */
.container {
display: flex;
flex-direction: column;
}
.header {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
min-height: 160rpx;
background: #fff;
border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
}
.header .item-box {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #747377;
font-size: 24rpx;
line-height: 24rpx;
}
.header .item-box.isActive {
color: #ffca00;
}
.header .item-box>image {
width: 66rpx;
height: 58rpx;
margin-bottom: 16rpx;
}
.body {
flex: 1;
position: relative;
}
/* .body .swiper-box {
position: absolute;
top: 4rpx;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
width: 700rpx;
height: 200rpx;
background: #fff;
z-index: 10001;
border-radius: 10rpx;
box-shadow: 0px 2rpx 8rpx rgba(136, 136, 136, 0.6);
} */
.body .map-box {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.notice-item-box {
position: relative;
display: flex;
justify-content: space-between;
align-content: center;
height: 160rpx;
padding: 10rpx 30rpx;
background: #fff;
}
.notice-item-box .image-box {
position: relative;
width: 220rpx;
height: 100%;
}
.notice-item-box .image-box .shadow-image {
position: absolute;
top: 0;
left: 0;
width: 50rpx;
height: 100%;
}
.notice-item-box .image-box .show-image {
width: 100%;
height: 100%;
}
.notice-item-box .text-box {
position: relative;
flex: 1;
}
.notice-item-box .text-box .tip {
position: absolute;
top: 0;
left: 0;
height: 36rpx;
padding: 4rpx 12rpx;
line-height: 36rpx;
font-size: 24rpx;
background: #424242;
color: #fff;
}
.notice-item-box .text-box .message {
margin-top: 56rpx;
margin-right: 20rpx;
height: 90rpx;
font-size: 22rpx;
line-height: 30rpx;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
color: #8f8f8f;
}
/* .notice-box {
position: absolute;
left: 0;
width: 100%;
}
.notice-box .notice {
position: relative;
padding: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
height: calc(100% - 40rpx);
}
.notice-box .notice .text-box {
position: relative;
flex: 1;
}
.notice-box .notice .text-box .tip {
position: absolute;
top: 0;
left: 0;
height: 36rpx;
line-height: 36rpx;
font-size: 24rpx;
background: #424242;
color: #fff;
}
.notice-box .notice .text-box .message {
margin-top: 56rpx;
margin-right: 20rpx;
height: 90rpx;
font-size: 22rpx;
line-height: 30rpx;
white-space: normal;
color: #8f8f8f;
}
.notice-box .notice .image-box {
position: relative;
width: 220rpx;
height: 100%;
}
.notice-box .notice .image-box .shadow-image {
position: absolute;
top: 0;
left: 0;
width: 50rpx;
height: 100%;
}
.notice-box .notice .image-box .show-image {
width: 100%;
height: 100%;
} */
.share-box {
position: absolute;
top: 30rpx;
/* left: 30rpx; */
width: 130rpx;
height: 190rpx;
}
.share-box .title {
font-size: 22rpx;
line-height: 30rpx;
text-align: center;
}
.phone-box {
position: absolute;
bottom: 30rpx;
left: 30rpx;
width: 130rpx;
height: 130rpx;
}
.mine-box {
position: absolute;
bottom: 30rpx;
right: 30rpx;
width: 130rpx;
height: 130rpx;
}
.hide-btn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: none;
z-index: 10001;
}
.hide-btn::after {
border: none;
}
.wx-button-cover-view-wrapper {
height: 100%;
}
.wx-button-cover-view-inner {
height: 100%;
}
.img {
width: 130rpx;
height: 130rpx;
}