Skip to content

严立 / mini-shimao

Go to a project
Commit d3b84334 by 严立
Options

LL - 地图详情畅玩

parent 6ce1a54b
Expand all
Inline Side-by-side
Showing with 148 additions and 65 deletions
app.json
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
"pages/notice/notice", "pages/notice/notice",
"pages/notice-detail/notice-detail", "pages/notice-detail/notice-detail",
"pages/shop-detail/shop-detail", "pages/shop-detail/shop-detail",
"pages/shop-point-detail/shop-point-detail",
"pages/strategy/strategy", "pages/strategy/strategy",
"pages/index/index" "pages/index/index"
...@@ -53,7 +54,7 @@ ...@@ -53,7 +54,7 @@
}, },
"window": { "window": {
"navigationStyle": "custom", "navigationStyle": "custom",
"navigationBarTextStyle": "white", "navigationBarTextStyle": "black",
"backgroundColor": "#F2F2F2", "backgroundColor": "#F2F2F2",
"backgroundTextStyle": "dark", "backgroundTextStyle": "dark",
"enablePullDownRefresh": false "enablePullDownRefresh": false
......
pages/guide/guide.js
import iPoint from './js/point.js' import iPoint from './js/point.js'
let App = getApp()
let logicData = { let logicData = {
option: {} option: {}
} }
...@@ -11,6 +13,8 @@ Page({ ...@@ -11,6 +13,8 @@ Page({
winPointDetail: false, winPointDetail: false,
pointInfo: iPoint, pointInfo: iPoint,
selectionPoint: 0, selectionPoint: 0,
isSave: false,
}, },
onLoad: function (options) { onLoad: function (options) {
...@@ -28,7 +32,7 @@ Page({ ...@@ -28,7 +32,7 @@ Page({
// 数值以设计图上的像素为准 // 数值以设计图上的像素为准
let funcMapStyle = { let funcMapStyle = {
'width': 3329, 'width': 3329,
'height': 1218 'height': 1255
} }
let funcWindowHeight = wx.getSystemInfoSync().windowHeight let funcWindowHeight = wx.getSystemInfoSync().windowHeight
...@@ -194,7 +198,9 @@ Page({ ...@@ -194,7 +198,9 @@ Page({
}, },
onCancel: function () { onCancel: function () {
console.log('onCancel') // 当从景点详情进入屏蔽该功能
if (logicData.option.id) return
let funcPointInfo = this.data.pointInfo let funcPointInfo = this.data.pointInfo
for (let i = 0, l = funcPointInfo.length; i < l; i++) { for (let i = 0, l = funcPointInfo.length; i < l; i++) {
funcPointInfo[i].isActive = false funcPointInfo[i].isActive = false
...@@ -204,4 +210,46 @@ Page({ ...@@ -204,4 +210,46 @@ Page({
winPointDetail: false, winPointDetail: false,
}) })
}, },
onSaveMap: function () {
if (this.data.isSave) {
wx.lin.showToast({
icon: 'success',
title: '地图已保存至相册',
show: true,
})
return
}
wx.lin.showToast({
icon: 'loading',
title: '正在下载...',
show: true,
duration: 20000,
})
wx.downloadFile({
url: App.globalData.appResourcesBase + 'guide/save-guide.png',
success: (result) => {
console.log(result)
wx.saveImageToPhotosAlbum({
filePath: result.tempFilePath,
success: (result) => {
wx.lin.hideToast()
this.setData({
isSave: true
})
},
fail: (error) => {
console.log(error)
wx.lin.hideToast()
}
})
},
fail: (error) => {
console.log(error)
wx.lin.hideToast()
}
})
},
}) })
\ No newline at end of file
pages/guide/guide.wxml
<l-toast></l-toast>
<!-- 畅玩 - 活动列表 --> <!-- 畅玩 - 活动列表 -->
<navigation class="navigation" titleText="智慧导览" backIcon="/image/back.png"></navigation> <navigation class="navigation" titleText="智慧导览" backIcon="/image/back.png"></navigation>
...@@ -25,6 +27,11 @@ ...@@ -25,6 +27,11 @@
</block> </block>
</view> </view>
</scroll-view> </scroll-view>
<view class="point-detail" hidden="{{!winPointDetail}}" catch:tap="onPointDetail"> <view class="point-detail" hidden="{{!winPointDetail}}" catch:tap="onPointDetail">
<image src="{{pointDetail}}"></image> <image src="{{pointDetail}}"></image>
</view> </view>
<view class="save-map row con-c align-c" bindtap="onSaveMap">
<text>保存完整地图</text>
</view>
\ No newline at end of file
pages/guide/guide.wxss
...@@ -72,6 +72,7 @@ ...@@ -72,6 +72,7 @@
/* 景点详情卡片 */ /* 景点详情卡片 */
.point-detail { .point-detail {
z-index: 1900;
position: fixed; position: fixed;
bottom: 40rpx; bottom: 40rpx;
} }
...@@ -80,3 +81,17 @@ ...@@ -80,3 +81,17 @@
width: 750rpx; width: 750rpx;
height: 230rpx; height: 230rpx;
} }
/* 保存完整地图 */
.save-map {
position: fixed;
bottom: 90rpx;
left: 214rpx;
width: 324rpx;
height: 96rpx;
background: rgba(0, 0, 0, 0.4);
border-radius: 4rpx;
border:1px solid rgba(21, 25, 31, 1);
color: #FFFFFF;
}
\ No newline at end of file
pages/guide/js/point.js
let output = [ let output = [
{ {
x: 174, x: 160,
y: 220, y: 228,
id: '', id: '',
name: '温泉洋房（建设中）', name: '温泉洋房（建设中）',
icon: './image/icon/01.png', icon: './image/icon/01.png',
...@@ -9,7 +9,7 @@ let output = [ ...@@ -9,7 +9,7 @@ let output = [
detail: '/pages/shop-point-detail/shop-point-detail?id=105', detail: '/pages/shop-point-detail/shop-point-detail?id=105',
isActive: false, isActive: false,
}, { }, {
x: 830, x: 810,
y: 220, y: 220,
id: '', id: '',
name: '海错图2号馆', name: '海错图2号馆',
...@@ -36,8 +36,8 @@ let output = [ ...@@ -36,8 +36,8 @@ let output = [
detail: '/pages/shop-detail/shop-detail?id=4', detail: '/pages/shop-detail/shop-detail?id=4',
isActive: false, isActive: false,
}, { }, {
x: 680, x: 666,
y: 276, y: 280,
id: 6, id: 6,
name: '星空影院', name: '星空影院',
icon: './image/icon/05.png', icon: './image/icon/05.png',
...@@ -54,8 +54,8 @@ let output = [ ...@@ -54,8 +54,8 @@ let output = [
detail: '/pages/shop-detail/shop-detail?id=3', detail: '/pages/shop-detail/shop-detail?id=3',
isActive: false, isActive: false,
}, { }, {
x: 1384, x: 1370,
y: 276, y: 284,
id: 5, id: 5,
name: '原野MOJITO', name: '原野MOJITO',
icon: './image/icon/07.png', icon: './image/icon/07.png',
...@@ -63,8 +63,8 @@ let output = [ ...@@ -63,8 +63,8 @@ let output = [
detail: '/pages/shop-detail/shop-detail?id=5', detail: '/pages/shop-detail/shop-detail?id=5',
isActive: false, isActive: false,
}, { }, {
x: 1704, x: 1708,
y: 294, y: 306,
id: 2, id: 2,
name: '拾光花坊', name: '拾光花坊',
icon: './image/icon/08.png', icon: './image/icon/08.png',
...@@ -108,8 +108,8 @@ let output = [ ...@@ -108,8 +108,8 @@ let output = [
detail: '/pages/shop-point-detail/shop-point-detail?id=104', detail: '/pages/shop-point-detail/shop-point-detail?id=104',
isActive: false, isActive: false,
}, { }, {
x: 2836, x: 2794,
y: 592, y: 600,
id: '', id: '',
name: '儿童营地', name: '儿童营地',
icon: './image/icon/13.png', icon: './image/icon/13.png',
......
pages/home/home.js
...@@ -10,6 +10,7 @@ let logicData = { ...@@ -10,6 +10,7 @@ let logicData = {
Page({ Page({
data: { data: {
// 导航栏相关属性 // 导航栏相关属性
navigationScroll: 0,
navigationLogoTop: 0, navigationLogoTop: 0,
navigationAnimationShow: 0, navigationAnimationShow: 0,
isNavigationLogoWhite: true, isNavigationLogoWhite: true,
...@@ -226,6 +227,10 @@ Page({ ...@@ -226,6 +227,10 @@ Page({
if (logicData.pageScrollLock) return if (logicData.pageScrollLock) return
logicData.pageScrollLock = true logicData.pageScrollLock = true
this.setData({
navigationScroll: funcEvent.scrollTop
})
if (funcEvent.scrollTop >= this.data.bannerHeight) { if (funcEvent.scrollTop >= this.data.bannerHeight) {
if (this.data.isNavigationLogoWhite) { if (this.data.isNavigationLogoWhite) {
this.setData({ this.setData({
......
pages/home/home.wxml
<navigation class="navigation" background="{{'rgba(255, 255, 255, ' + navigationAnimationShow + ')'}}"></navigation> <navigation class="navigation" background="{{'rgba(255, 255, 255, ' + navigationAnimationShow + ')'}}" scrollHeight="{{navigationScroll}}"></navigation>
<view class="container"> <view class="container">
<image class="logo" src="/image/logo-w.png" hidden="{{!isNavigationLogoWhite}}" style="{{'top: ' + navigationLogoTop + 'px'}}"></image> <image class="logo" src="/image/logo-w.png" hidden="{{!isNavigationLogoWhite}}" style="{{'top: ' + navigationLogoTop + 'px'}}"></image>
......
pages/shop-detail/shop-detail.wxss
...@@ -50,6 +50,7 @@ ...@@ -50,6 +50,7 @@
} }
.banner-wave image { .banner-wave image {
display: block;
width: 750rpx; width: 750rpx;
height: 60rpx; height: 60rpx;
} }
......
pages/shop-point-detail/shop-point-detail.wxml
<!-- 畅玩 - 商店详情 --> <!-- 畅玩 - 商店详情 -->
<navigation class="navigation" titleText="{{info.name}}" color="#ffffff" backIcon="/image/back-w.png"></navigation> <navigation class="navigation" titleText="{{info.name}}" color="#ffffff" backIcon="/image/back-w.png"></navigation>
<view class="container" style="{{'height: ' + bannerHeight + 'px;'}}"> <view class="container">
<view id="banner" class="banner" style="{{'height: ' + bannerHeight + 'px;'}}"> <view id="banner" class="banner">
<swiper autoplay circular class="banner-swiper" style="{{'height: ' + bannerHeight + 'px;'}}" indicator-dots="{{false}}" interval="2000" duration="500" bindchange="eventSwiperChange"> <swiper autoplay circular class="banner-swiper" indicator-dots="{{false}}" interval="2000" duration="500" bindchange="eventSwiperChange">
<block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<swiper-item class="banner-swiper-item" style="{{'height: ' + bannerHeight + 'px;'}}"> <swiper-item class="banner-swiper-item">
<image class="banner-swiper-image" src="{{item}}" style="{{'height: ' + bannerHeight + 'px;'}}" mode="aspectFill"></image> <image class="banner-swiper-image" src="{{item}}" mode="aspectFill"></image>
</swiper-item> </swiper-item>
</block> </block>
</swiper> </swiper>
<view class="banner-swiper-point"> <view class="banner-swiper-point">
<swiper-point bannerStyle="{{0}}" bannerActiveIndex="{{bannerIndex}}"></swiper-point> <swiper-point bannerStyle="{{1}}" bannerActiveIndex="{{bannerIndex}}"></swiper-point>
</view> </view>
<view class="banner-wave">
<image src="{{bannerWave}}" mode="widthFix"></image>
</view> </view>
<view class="detail" style="{{info.background}}">
<view class="detail-title">
<text>{{info.title}}</text>
</view>
<view class="detail-other">
<text>{{info.describe}}</text>
</view> </view>
<view class="describe" style="{{info.background}}">
<block wx:for="{{info.describe}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<image src="{{item}}" mode="aspectFit"></image>
</block>
</view> </view>
</view> </view>
\ No newline at end of file
pages/shop-point-detail/shop-point-detail.wxss
...@@ -10,66 +10,67 @@ page { ...@@ -10,66 +10,67 @@ page {
width: 750rpx; width: 750rpx;
} }
.navigation-bar-image {
z-index: 1100;
position: fixed;
top: 60rpx;
left: 50rpx;
width: 200rpx;
height: 60rpx;
}
.banner { .banner {
z-index: 9; z-index: 9;
position: relative; position: relative;
width: 750rpx; width: 750rpx;
height: 100%; height: 880rpx;
background: #ffffff;
} }
.banner-swiper, .banner-swiper,
.banner-swiper-item, .banner-swiper-item,
.banner-swiper-image { .banner-swiper-image {
position: absolute;
top: 0 !important;
left: 0 !important;
width: 750rpx; width: 750rpx;
height: 100%; height: 880rpx;
} }
.banner-swiper-point { .banner-swiper-point {
z-index: 9; z-index: 1900;
position: relative; position: relative;
top: 66%; bottom: 110rpx;
left: 0; left: 0;
} }
.banner-wave {
z-index: 1100;
position: relative;
bottom: 60rpx;
left: 0;
width: 750rpx;
height: 60rpx;
}
.banner-wave image {
display: block;
width: 750rpx;
height: 60rpx;
}
/* 详情样式 */ /* 详情样式 */
.detail { .describe {
z-index: 9;
position: fixed;
bottom: 0;
width: 750rpx; width: 750rpx;
height: 46%;
padding-top: 40%;
} }
.detail-title { .describe image:nth-child(1) {
width: 670rpx;
height: 52rpx;
margin: 50rpx 0 0 40rpx;
}
.describe image:nth-child(2) {
width: 670rpx;
height: 50rpx;
margin: 8rpx 0 0 40rpx;
}
.describe image:nth-child(3) {
width: 670rpx; width: 670rpx;
min-height: 76rpx; height: 90rpx;
margin: 0 40rpx 0 40rpx; margin: 24rpx 0 0 40rpx;
font-size: 54rpx;
font-weight: bold;
color: #FFFFFF;
line-height: 76rpx;
} }
.detail-other { .describe image:nth-child(4) {
width: 670rpx; width: 670rpx;
min-height: 250rpx; height: 230rpx;
margin: 30rpx 40rpx; margin: 56rpx 0 40rpx 40rpx;
font-size: 30rpx;
color: #FFFFFF;
line-height: 50rpx;
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment