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 @@
"pages/notice/notice",
"pages/notice-detail/notice-detail",
"pages/shop-detail/shop-detail",
"pages/shop-point-detail/shop-point-detail",
"pages/strategy/strategy",
"pages/index/index"
......@@ -53,7 +54,7 @@
},
"window": {
"navigationStyle": "custom",
"navigationBarTextStyle": "white",
"navigationBarTextStyle": "black",
"backgroundColor": "#F2F2F2",
"backgroundTextStyle": "dark",
"enablePullDownRefresh": false
......
pages/guide/guide.js
import iPoint from './js/point.js'
let App = getApp()
let logicData = {
option: {}
}
......@@ -11,6 +13,8 @@ Page({
winPointDetail: false,
pointInfo: iPoint,
selectionPoint: 0,
isSave: false,
},
onLoad: function (options) {
......@@ -28,7 +32,7 @@ Page({
// 数值以设计图上的像素为准
let funcMapStyle = {
'width': 3329,
'height': 1218
'height': 1255
}
let funcWindowHeight = wx.getSystemInfoSync().windowHeight
......@@ -194,7 +198,9 @@ Page({
},
onCancel: function () {
console.log('onCancel')
// 当从景点详情进入屏蔽该功能
if (logicData.option.id) return
let funcPointInfo = this.data.pointInfo
for (let i = 0, l = funcPointInfo.length; i < l; i++) {
funcPointInfo[i].isActive = false
......@@ -204,4 +210,46 @@ Page({
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>
......@@ -25,6 +27,11 @@
</block>
</view>
</scroll-view>
<view class="point-detail" hidden="{{!winPointDetail}}" catch:tap="onPointDetail">
<image src="{{pointDetail}}"></image>
</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 @@
/* 景点详情卡片 */
.point-detail {
z-index: 1900;
position: fixed;
bottom: 40rpx;
}
......@@ -79,4 +80,18 @@
.point-detail image {
width: 750rpx;
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 = [
{
x: 174,
y: 220,
x: 160,
y: 228,
id: '',
name: '温泉洋房（建设中）',
icon: './image/icon/01.png',
......@@ -9,7 +9,7 @@ let output = [
detail: '/pages/shop-point-detail/shop-point-detail?id=105',
isActive: false,
}, {
x: 830,
x: 810,
y: 220,
id: '',
name: '海错图2号馆',
......@@ -36,8 +36,8 @@ let output = [
detail: '/pages/shop-detail/shop-detail?id=4',
isActive: false,
}, {
x: 680,
y: 276,
x: 666,
y: 280,
id: 6,
name: '星空影院',
icon: './image/icon/05.png',
......@@ -54,8 +54,8 @@ let output = [
detail: '/pages/shop-detail/shop-detail?id=3',
isActive: false,
}, {
x: 1384,
y: 276,
x: 1370,
y: 284,
id: 5,
name: '原野MOJITO',
icon: './image/icon/07.png',
......@@ -63,8 +63,8 @@ let output = [
detail: '/pages/shop-detail/shop-detail?id=5',
isActive: false,
}, {
x: 1704,
y: 294,
x: 1708,
y: 306,
id: 2,
name: '拾光花坊',
icon: './image/icon/08.png',
......@@ -108,8 +108,8 @@ let output = [
detail: '/pages/shop-point-detail/shop-point-detail?id=104',
isActive: false,
}, {
x: 2836,
y: 592,
x: 2794,
y: 600,
id: '',
name: '儿童营地',
icon: './image/icon/13.png',
......
pages/home/home.js
......@@ -10,6 +10,7 @@ let logicData = {
Page({
data: {
// 导航栏相关属性
navigationScroll: 0,
navigationLogoTop: 0,
navigationAnimationShow: 0,
isNavigationLogoWhite: true,
......@@ -226,6 +227,10 @@ Page({
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
this.setData({
navigationScroll: funcEvent.scrollTop
})
if (funcEvent.scrollTop >= this.data.bannerHeight) {
if (this.data.isNavigationLogoWhite) {
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">
<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 @@
}
.banner-wave image {
display: block;
width: 750rpx;
height: 60rpx;
}
......
pages/shop-point-detail/shop-point-detail.wxml
<!-- 畅玩 - 商店详情 -->
<navigation class="navigation" titleText="{{info.name}}" color="#ffffff" backIcon="/image/back-w.png"></navigation>
<view class="container" style="{{'height: ' + bannerHeight + 'px;'}}">
<view id="banner" class="banner" style="{{'height: ' + bannerHeight + 'px;'}}">
<swiper autoplay circular class="banner-swiper" style="{{'height: ' + bannerHeight + 'px;'}}" indicator-dots="{{false}}" interval="2000" duration="500" bindchange="eventSwiperChange">
<view class="container">
<view id="banner" class="banner">
<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">
<swiper-item class="banner-swiper-item" style="{{'height: ' + bannerHeight + 'px;'}}">
<image class="banner-swiper-image" src="{{item}}" style="{{'height: ' + bannerHeight + 'px;'}}" mode="aspectFill"></image>
<swiper-item class="banner-swiper-item">
<image class="banner-swiper-image" src="{{item}}" mode="aspectFill"></image>
</swiper-item>
</block>
</swiper>
<view class="banner-swiper-point">
<swiper-point bannerStyle="{{0}}" bannerActiveIndex="{{bannerIndex}}"></swiper-point>
<swiper-point bannerStyle="{{1}}" bannerActiveIndex="{{bannerIndex}}"></swiper-point>
</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 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>
\ No newline at end of file
pages/shop-point-detail/shop-point-detail.wxss
......@@ -10,66 +10,67 @@ page {
width: 750rpx;
}
.navigation-bar-image {
z-index: 1100;
position: fixed;
top: 60rpx;
left: 50rpx;
width: 200rpx;
height: 60rpx;
}
.banner {
z-index: 9;
position: relative;
width: 750rpx;
height: 100%;
background: #ffffff;
height: 880rpx;
}
.banner-swiper,
.banner-swiper-item,
.banner-swiper-image {
position: absolute;
top: 0 !important;
left: 0 !important;
width: 750rpx;
height: 100%;
height: 880rpx;
}
.banner-swiper-point {
z-index: 9;
z-index: 1900;
position: relative;
top: 66%;
bottom: 110rpx;
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 {
z-index: 9;
position: fixed;
bottom: 0;
.describe {
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;
min-height: 76rpx;
margin: 0 40rpx 0 40rpx;
font-size: 54rpx;
font-weight: bold;
color: #FFFFFF;
line-height: 76rpx;
height: 90rpx;
margin: 24rpx 0 0 40rpx;
}
.detail-other {
.describe image:nth-child(4) {
width: 670rpx;
min-height: 250rpx;
margin: 30rpx 40rpx;
font-size: 30rpx;
color: #FFFFFF;
line-height: 50rpx;
height: 230rpx;
margin: 56rpx 0 40rpx 40rpx;
}
\ 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