Skip to content

严立 / mini-shimao

Go to a project
Commit d3b84334 by 严立
Options

LL - 地图详情畅玩

parent 6ce1a54b
Inline Side-by-side
Showing with 220 additions and 107 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.js
......@@ -4,6 +4,7 @@ Page({
data: {
// banner 列表数据
banner: [],
bannerWave: '',
bannerIndex: 0,
bannerHeight: 0,
......@@ -28,95 +29,123 @@ Page({
let funcDetail = [
{
id: 101,
name: '星光广场',
contact: '13316748039',
banner: [
App.globalData.appResourcesBase + 'guide/banner/banner-1-1.png',
App.globalData.appResourcesBase + 'guide/banner/banner-1-2.png',
App.globalData.appResourcesBase + 'guide/banner/banner-1-3.png',
],
name: '星光广场',
title: '星光广场',
date: '周一至周日 10:00 - 20:00',
describe: '星光点点的灯、洁白无瑕的水晶白、汉白玉铺地配以建筑华美端庄的立面，配以200余盏小米灯，整个星光广场熠熠生辉，闪耀着奇幻秘境的精致、优雅与纯洁无瑕。',
contact: '13316748039',
background: 'background: linear-gradient(0, #2959B0 30%, rgba(0, 0, 0, 0));',
ornament: './image/ornament-1.png',
describe: [
App.globalData.appResourcesBase + 'guide/detail/detail-1-1.png',
App.globalData.appResourcesBase + 'guide/detail/detail-1-2.png',
App.globalData.appResourcesBase + 'guide/detail/detail-1-3.png',
App.globalData.appResourcesBase + 'guide/detail/detail-1-4.png',
],
background: 'background: #314f88;',
}, {
id: 102,
name: '云之亭',
contact: '13316748039',
banner: [
App.globalData.appResourcesBase + 'guide/banner/banner-2-1.png',
App.globalData.appResourcesBase + 'guide/banner/banner-2-2.png',
App.globalData.appResourcesBase + 'guide/banner/banner-2-3.png',
],
name: '云之亭',
title: '云之亭',
date: '周一至周日 10:00 - 20:00',
describe: '云白雕花顶，配白色纱幔，在日光下与湖中倒影相映成趣，于平静的湖面中散发这精灵般的光彩，置身其中偶见白鹭成行，聆听风之呢喃。',
contact: '13316748039',
background: 'background: linear-gradient(0, #9D9EE0, rgba(0, 0, 0, 0));',
ornament: './image/ornament-2.png',
describe: [
App.globalData.appResourcesBase + 'guide/detail/detail-2-1.png',
App.globalData.appResourcesBase + 'guide/detail/detail-2-2.png',
App.globalData.appResourcesBase + 'guide/detail/detail-2-3.png',
App.globalData.appResourcesBase + 'guide/detail/detail-2-4.png',
],
background: 'background: #9d9ee0;',
}, {
id: 103,
name: '湿地公园',
contact: '13316748039',
banner: [
App.globalData.appResourcesBase + 'guide/banner/banner-3-1.png',
App.globalData.appResourcesBase + 'guide/banner/banner-3-2.png',
App.globalData.appResourcesBase + 'guide/banner/banner-3-3.png',
],
name: '湿地公园',
title: '湿地公园',
date: '周一至周日 10:00 - 22:00',
describe: '碧海银湖具备先天的自然资源优势，面朝黄茅海，坐拥1500亩的红树林湿地公园，底栖动物、擦肩而过的迁徙鸟、充满负氧离子的空气……一年四季，你都可以在这里找到属于它的主色调。',
contact: '13316748039',
background: 'background: linear-gradient(0, #75AE5C, rgba(0, 0, 0, 0));',
ornament: './image/ornament-3.png',
describe: [
App.globalData.appResourcesBase + 'guide/detail/detail-3-1.png',
App.globalData.appResourcesBase + 'guide/detail/detail-3-2.png',
App.globalData.appResourcesBase + 'guide/detail/detail-3-3.png',
App.globalData.appResourcesBase + 'guide/detail/detail-3-4.png',
],
background: 'background: #8bac7d;',
}, {
id: 104,
name: '新月码头',
contact: '13316748039',
banner: [
App.globalData.appResourcesBase + 'guide/banner/banner-4-1.png',
App.globalData.appResourcesBase + 'guide/banner/banner-4-2.png',
App.globalData.appResourcesBase + 'guide/banner/banner-4-3.png',
],
name: '新月码头',
title: '新月码头',
date: '周一至周日 10:00 - 21:30',
describe: '采用3D打印的拱门雕塑，以浪花与繁星之点缀，流线活跃、体态优美、纹理精细，雄伟地矗立在新月湖畔，与如黛远山交相辉映，静静地守护着可同时容纳8只小船停靠的新月码头。',
contact: '13316748039',
background: 'background: linear-gradient(0, #2A94B0, rgba(0, 0, 0, 0));',
ornament: './image/ornament-4.png',
describe: [
App.globalData.appResourcesBase + 'guide/detail/detail-4-1.png',
App.globalData.appResourcesBase + 'guide/detail/detail-4-2.png',
App.globalData.appResourcesBase + 'guide/detail/detail-4-3.png',
App.globalData.appResourcesBase + 'guide/detail/detail-4-4.png',
],
background: 'background: #6fc0d0;',
}, {
id: 105,
name: '温泉洋房',
contact: '13316748039',
banner: [
App.globalData.appResourcesBase + 'guide/banner/banner-5-1.png',
App.globalData.appResourcesBase + 'guide/banner/banner-5-2.png',
App.globalData.appResourcesBase + 'guide/banner/banner-5-3.png',
],
name: '温泉洋房',
title: '温泉洋房',
date: '周一至周日 10:00 - 凌晨02:00',
describe: '49间温泉洋房，每一户独立温泉入户、无敌景观大阳台，一览山海湖泉林风光；引入国内最专业的托管服务专家斯维登，打造助理房东一对一贴心服务，解决住宿期间房主及住宿者所有需求。洋房一楼还设有音乐广场、景观泳池。',
contact: '13316748039',
background: 'background: linear-gradient(0, #5CA2E2, rgba(0, 0, 0, 0));',
ornament: './image/ornament-5.png',
describe: [
App.globalData.appResourcesBase + 'guide/detail/detail-5-1.png',
App.globalData.appResourcesBase + 'guide/detail/detail-5-2.png',
App.globalData.appResourcesBase + 'guide/detail/detail-5-3.png',
App.globalData.appResourcesBase + 'guide/detail/detail-5-4.png',
],
background: 'background: #5ca2e2;',
}, {
id: 106,
name: '星耀银湖',
contact: '13316748039',
banner: [
App.globalData.appResourcesBase + 'guide/banner/banner-6-1.png',
App.globalData.appResourcesBase + 'guide/banner/banner-6-2.png',
App.globalData.appResourcesBase + 'guide/banner/banner-6-3.png',
],
name: '星耀银湖',
title: '星耀银湖',
date: '周一至周日 10:00 - 20:30',
describe: '高8米、重4.5吨的鲸鱼胖茂，采用多切面锆石与镜面不锈钢打造，配合10米高水幕背景、裸眼3d效果，环绕立体声场营造，将大鲸鱼、小鱼群都生动地展现在我们眼前，感受星空与大海的交相辉映。',
contact: '13316748039',
background: 'background: linear-gradient(0, #D69E60, rgba(0, 0, 0, 0));',
ornament: './image/ornament-6.png',
describe: '高8米、重4.5吨的鲸鱼胖茂，采用多切面锆石与镜面不锈钢打造，配合10米高水幕背景、裸眼3d效果，环绕立体声场营造，将大鲸鱼、小鱼群都生动地展现在我们眼前，感受星空与大海的交相辉映。', describe: [
App.globalData.appResourcesBase + 'guide/detail/detail-6-1.png',
App.globalData.appResourcesBase + 'guide/detail/detail-6-2.png',
App.globalData.appResourcesBase + 'guide/detail/detail-6-3.png',
App.globalData.appResourcesBase + 'guide/detail/detail-6-4.png',
],
background: 'background: #82524c;',
}, {
id: 107,
name: '奇幻森林',
contact: '13316748039',
banner: [
App.globalData.appResourcesBase + 'guide/banner/banner-7-1.png',
App.globalData.appResourcesBase + 'guide/banner/banner-7-2.png',
App.globalData.appResourcesBase + 'guide/banner/banner-7-3.png',
],
name: '奇幻森林',
title: '奇幻森林',
date: '周一至周日 10:00 - 20:30',
describe: '云朵廊架下，混合花径中藏有上百种奇花异草，炫彩科技的蜻蜓、蝴蝶等发光雕塑与林间小鹿一起，共探奇幻曼妙之森。',
contact: '13316748039',
background: 'background: linear-gradient(0, #458048, rgba(0, 0, 0, 0));',
ornament: './image/ornament-7.png',
describe: [
App.globalData.appResourcesBase + 'guide/detail/detail-7-1.png',
App.globalData.appResourcesBase + 'guide/detail/detail-7-2.png',
App.globalData.appResourcesBase + 'guide/detail/detail-7-3.png',
App.globalData.appResourcesBase + 'guide/detail/detail-7-4.png',
],
background: 'background: #659b82;',
}
]
......@@ -129,6 +158,7 @@ Page({
this.setData({
banner: funcDetail[funcIndex].banner,
bannerWave: funcDetail[funcIndex].ornament,
info: {
id: funcDetail[funcIndex].id,
name: funcDetail[funcIndex].name,
......
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