Skip to content

严立 / mini-shimao

Go to a project
Commit ef3bc1f1 by 严立
Options

LL - 导航地图

parent b17c5786
Inline Side-by-side
Showing with 627 additions and 221 deletions
app.js
App({ App({
globalData: { globalData: {
appResourcesBase: 'http://sm-web.meiqicloud.com/userfiles/appResources/',
token: '', token: '',
refreshToken: '', refreshToken: '',
userInfo: null, userInfo: null,
...@@ -11,17 +12,17 @@ App({ ...@@ -11,17 +12,17 @@ App({
onLaunch: function () { onLaunch: function () {
this.setUnitProportion() this.setUnitProportion()
}, },
onShow: function (options) { onShow: function (options) {
}, },
onHide: function () { onHide: function () {
}, },
onError: function (msg) { onError: function (msg) {
}, },
setUnitProportion: function () { setUnitProportion: function () {
...@@ -34,140 +35,138 @@ App({ ...@@ -34,140 +35,138 @@ App({
var token = that.globalData.token var token = that.globalData.token
var param = obj.data ? JSON.stringify(obj.data) : "" var param = obj.data ? JSON.stringify(obj.data) : ""
var header = obj.header ? obj.header : { 'token': token || '', } var header = obj.header ? obj.header : { 'token': token || '', }
wx.request({ wx.request({
url: that.globalData.baseUrl + obj.url, url: that.globalData.baseUrl + obj.url,
data: param, data: param,
method: obj.method || "POST", method: obj.method || "POST",
header: header, header: header,
success: function (res) { success: function (res) {
console.log("接口:", that.globalData.baseUrl + obj.url); console.log("接口:", that.globalData.baseUrl + obj.url);
console.log("参数:", JSON.stringify(obj.data)); console.log("参数:", JSON.stringify(obj.data));
console.log("返回:", res); console.log("返回:", res);
let code = res.data.code * 1; let code = res.data.code * 1;
if (200 == code && true == res.data.success) { if (200 == code && true == res.data.success) {
if (obj.success) { if (obj.success) {
obj.success(res.data) obj.success(res.data)
} }
} else if (402 == code) { // token失效 } else if (402 == code) { // token失效
that.refreshToken({ that.refreshToken({
success: function() { success: function () {
that.wxRequest(obj) that.wxRequest(obj)
}
})
} else {
if (obj.fail) {
let err = {
statusCode: code,
msg: res.data.msg || '网络异常'
};
obj.fail(err)
}
} }
}) },
} else { fail: function (err) {
if (obj.fail) { console.log("接口:", that.globalData.baseUrl + obj.url);
let err = { console.log("参数:", obj.data);
statusCode: code, console.log("返回:", err);
msg: res.data.msg || '网络异常' if (obj.fail) {
}; let err = {
obj.fail(err) statusCode: 9999,
} msg: '网络异常'
} };
}, obj.fail(err)
fail: function (err) { } else {
console.log("接口:", that.globalData.baseUrl + obj.url); wx.showToast({
console.log("参数:", obj.data); title: '网络异常',
console.log("返回:", err); icon: 'none',
if (obj.fail) { duration: 2000
let err = { })
statusCode: 9999, }
msg: '网络异常'
};
obj.fail(err)
} else {
wx.showToast({
title: '网络异常',
icon: 'none',
duration: 2000
})
} }
}
}); });
}, },
login(obj) { login(obj) {
let token = this.globalData.token let token = this.globalData.token
let that = this let that = this
if (token) { if (token) {
if (obj.success) { if (obj.success) {
obj.success(token) obj.success(token)
} }
} else { } else {
wx.login({ wx.login({
success: res => { success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId // 发送 res.code 到后台换取 openId, sessionKey, unionId
console.log('wx.login:', res); console.log('wx.login:', res);
this.wxRequest({ this.wxRequest({
url: '/api/v1/login/getSmallSession?code='+res.code, url: '/api/v1/login/getSmallSession?code=' + res.code,
method: 'GET', method: 'GET',
success: function (res) { success: function (res) {
that.globalData.token = res.data.token that.globalData.token = res.data.token
that.globalData.refreshToken = res.data.refreshToken that.globalData.refreshToken = res.data.refreshToken
wx.setStorageSync('expires_in', res.data.expires_in) wx.setStorageSync('expires_in', res.data.expires_in)
wx.setStorageSync('openid', res.data.openid) wx.setStorageSync('openid', res.data.openid)
wx.setStorageSync('session_key', res.data.session_key) wx.setStorageSync('session_key', res.data.session_key)
wx.setStorageSync('mobile', res.data.mobile) wx.setStorageSync('mobile', res.data.mobile)
wx.setStorageSync('nickName', res.data.nickName) wx.setStorageSync('nickName', res.data.nickName)
wx.setStorageSync('avatarUrl', res.data.avatarUrl) wx.setStorageSync('avatarUrl', res.data.avatarUrl)
wx.setStorageSync('userType', res.data.userType) // 0 游客 1 业主 wx.setStorageSync('userType', res.data.userType) // 0 游客 1 业主
wx.setStorageSync('sex', res.data.sex) wx.setStorageSync('sex', res.data.sex)
wx.setStorageSync('birthday', res.data.birthday) wx.setStorageSync('birthday', res.data.birthday)
wx.setStorageSync('address', res.data.address) wx.setStorageSync('address', res.data.address)
if (obj.success) { if (obj.success) {
obj.success(res.data.token) obj.success(res.data.token)
}
},
})
} }
},
}) })
}
})
} }
}, },
registUserInfo(obj) { registUserInfo(obj) {
this.wxRequest({ this.wxRequest({
url: '/api/v1/login/getDecryptData', url: '/api/v1/login/getDecryptData',
data: obj.param, data: obj.param,
success: function(res) { success: function (res) {
if (obj.success) { if (obj.success) {
obj.success(res) obj.success(res)
} }
}, },
fail: function (err) { fail: function (err) {
if (obj.fail) { if (obj.fail) {
obj.fail(err) obj.fail(err)
} }
} }
}) })
}, },
refreshToken(obj) { refreshToken(obj) {
let that = this let that = this
this.wxRequest({ this.wxRequest({
url: '/api/v1/login/refreshToken', url: '/api/v1/login/refreshToken',
header: { header: {
token: this.globalData.token, token: this.globalData.token,
refreshToken: this.globalData.refreshToken refreshToken: this.globalData.refreshToken
}, },
success: function(res) { success: function (res) {
let token = res.data.token let token = res.data.token
let refreshToken = res.data.refreshToken let refreshToken = res.data.refreshToken
that.globalData.token = token
that.globalData.refreshToken = refreshToken
if (obj.success) {
obj.success()
}
} that.globalData.token = token
}) that.globalData.refreshToken = refreshToken
}
if (obj.success) {
obj.success()
}
}) }
})
}
})
\ No newline at end of file
app.json
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
"pages/ownerCertification/ownerCertification", "pages/ownerCertification/ownerCertification",
"pages/hotelAccommodation/hotelAccommodation", "pages/hotelAccommodation/hotelAccommodation",
"pages/login/login", "pages/login/login",
"pages/guide/guide",
"pages/campsite/campsite", "pages/campsite/campsite",
"pages/myInfo/myInfo", "pages/myInfo/myInfo",
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
"pages/notice-detail/notice-detail", "pages/notice-detail/notice-detail",
"pages/shop-detail/shop-detail", "pages/shop-detail/shop-detail",
"pages/strategy/strategy", "pages/strategy/strategy",
"pages/guide/guide",
"pages/index/index" "pages/index/index"
], ],
"usingComponents": { "usingComponents": {
......
pages/campsite/campsite.js
let App = getApp()
let logicData = { let logicData = {
pageScrollLock: false, pageScrollLock: false,
pageScrollTimer: 0, pageScrollTimer: 0,
...@@ -10,11 +12,12 @@ Page({ ...@@ -10,11 +12,12 @@ Page({
detailImage: [], detailImage: [],
detailImageUrl: [ detailImageUrl: [
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/home/campsite0.png', App.globalData.appResourcesBase + 'campsite/campsite-1.png',
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/home/campsite1.png', App.globalData.appResourcesBase + 'campsite/campsite-2.png',
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/home/campsite2.png', App.globalData.appResourcesBase + 'campsite/campsite-3.png',
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/home/campsite3.png', App.globalData.appResourcesBase + 'campsite/campsite-4.png',
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/home/campsite4.png', App.globalData.appResourcesBase + 'campsite/campsite-5.png',
App.globalData.appResourcesBase + 'campsite/campsite-6.png',
], ],
detailIndex: 0, detailIndex: 0,
}, },
......
pages/guide/guide.js
import iPoint from './js/point.js'
Page({ Page({
data: { data: {
mapWidth: 500, mapCss: '',
mapHeight: 338, pointDetail: './image/card/01.png',
mapStyleWidth: 0, winPointDetail: false,
mapStyleHeight: 0, pointInfo: iPoint
pointInfo: [
{
x: 50,
y: 50,
name: '景点11',
},
{
x: 140,
y: 110,
name: '景点22',
},
{
x: 230,
y: 200,
name: '景点33',
}
]
}, },
onLoad: function (options) { onLoad: function (options) {
this.setMapStyle() this.initGuide()
},
initGuide: function () {
this.setMapCss()
}, },
setMapStyle: function () { setMapCss: function () {
// 设置地图样式
// 数值以设计图上的像素为准
let funcMapStyle = {
'width': 3329,
'height': 1218
}
let funcWindowHeight = wx.getSystemInfoSync().windowHeight let funcWindowHeight = wx.getSystemInfoSync().windowHeight
let funcProportion = funcWindowHeight / this.data.mapHeight let funcProportion = funcWindowHeight / funcMapStyle['height']
// let funcUnitProportion = wx.getStorageSync('unitProportion') funcMapStyle['width'] = Math.floor(funcMapStyle['width'] * funcProportion)
funcMapStyle['height'] = funcWindowHeight
let funcMapCss = {
'width': funcMapStyle['width'] + 'px;',
'height': funcMapStyle['height'] + 'px;',
}
this.setData({
mapCss: JSON.stringify(funcMapCss).replace(/[{",}]/g, ''),
})
this.setPointCss(funcProportion)
},
setPointCss: function (funcProportion) {
// 设置景点按钮样式
// 数值以设计图上的像素为准
let funcPointStyle = {
'width': 140,
'height': 52,
'padding-right': 22,
'borderRadius': 26,
'font-size': 20,
}
funcPointStyle['width'] = Math.floor(funcPointStyle['width'] * funcProportion)
funcPointStyle['height'] = Math.floor(funcPointStyle['height'] * funcProportion)
funcPointStyle['padding-right'] = Math.floor(funcPointStyle['padding-right'] * funcProportion)
funcPointStyle['borderRadius'] = funcPointStyle['height'] / 2
funcPointStyle['font-size'] = Math.floor(funcPointStyle['font-size'] * funcProportion)
let funcPointCss = {
'min-width': funcPointStyle['width'] + 'px;',
'height': funcPointStyle['height'] + 'px;',
'padding-right': funcPointStyle['padding-right'] + 'px;',
'border-radius': funcPointStyle['borderRadius'] + 'px;',
'font-size': funcPointStyle['font-size'] + 'px;',
}
// 设置景点按钮图标样式
// 数值以设计图上的像素为准
let funcIconStyle = {
'width': 52,
'height': 52,
'margin-right': 12
}
funcIconStyle['width'] = Math.floor(funcIconStyle['width'] * funcProportion)
funcIconStyle['height'] = Math.floor(funcIconStyle['height'] * funcProportion)
funcIconStyle['margin-right'] = Math.floor(funcIconStyle['margin-right'] * funcProportion)
let funcIconCss = {
'width': funcIconStyle['width'] + 'px;',
'height': funcIconStyle['height'] + 'px;',
'margin-right': funcIconStyle['margin-right'] + 'px;',
'border-radius': '50%',
}
// 景点按钮位置
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].x = funcPointInfo[i].x * funcProportion funcPointInfo[i].x = Math.floor(funcPointInfo[i].x * funcProportion)
funcPointInfo[i].y = funcPointInfo[i].y * funcProportion funcPointInfo[i].y = Math.floor(funcPointInfo[i].y * funcProportion)
funcPointInfo[i].css = 'top:' + funcPointInfo[i].y + 'px;left:' + funcPointInfo[i].x + 'px;' + JSON.stringify(funcPointCss).replace(/[{",}]/g, '')
} }
this.setData({ this.setData({
mapStyleWidth: this.data.mapWidth * funcProportion, pointInfo: funcPointInfo,
mapStyleHeight: funcWindowHeight, pointIconCss: JSON.stringify(funcIconCss).replace(/[{",}]/g, '')
pointInfo: funcPointInfo
}) })
console.log(funcPointInfo)
}, },
onPointInfo: function (event) { onPointInfo: function (event) {
console.log(event) let funcIndex = event.currentTarget.dataset.index
let funcPointInfo = this.data.pointInfo
for (let i = 0, l = funcPointInfo.length; i < l; i++) {
if (i !== funcIndex) {
funcPointInfo[i].isActive = false
} else {
funcPointInfo[i].isActive = !funcPointInfo[i].isActive
}
}
if (funcPointInfo[funcIndex].isActive) {
this.setData({
pointInfo: funcPointInfo,
pointDetail: funcPointInfo[funcIndex].card,
winPointDetail: true
})
} else {
this.setData({
pointInfo: funcPointInfo,
pointDetail: funcPointInfo[funcIndex].card,
winPointDetail: false
})
}
} }
}) })
\ No newline at end of file
pages/guide/guide.wxml
<view class="guide"> <view class="guide">
<image src="./image/guide.jpg" style="{{'width: ' + mapStyleWidth + 'px;height: ' + mapStyleHeight + 'px;'}}"></image> <image src="http://sm-web.meiqicloud.com/userfiles/appResources/guide/guide.png" style="{{mapCss}}"></image>
<view> <view class="point-map" style="{{mapCss}}">
<block wx:for="{{pointInfo}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <block wx:for="{{pointInfo}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="point-info" style="{{'top: ' + item.y + 'px;left: ' + item.x + 'px;'}}"> <view class="point-info row align-c {{item.isActive ? 'button-active' : 'button-inactive'}}" style="{{item.css}}">
<button bind:tap="onPointInfo" data-item="{{item}}">{{item.name}}</button> <!-- 默认样式 -->
<image class="point-info-arrow" src="./image/icon/point-arrow-inactive.png" hidden="{{item.isActive}}"></image>
<image class="icon-inactive" src="{{item.icon}}" style="{{pointIconCss}}" hidden="{{item.isActive}}"></image>
<button class="button-inactive" bind:tap="onPointInfo" data-index="{{index}}" hidden="{{item.isActive}}">{{item.name}}</button>
<!-- 选择样式 -->
<image class="point-info-arrow" src="./image/icon/point-arrow-active.png" hidden="{{!item.isActive}}"></image>
<image class="icon-active" src="{{item.icon}}" style="{{pointIconCss}}" hidden="{{!item.isActive}}"></image>
<button class="button-active" bind:tap="onPointInfo" data-index="{{index}}" hidden="{{!item.isActive}}">{{item.name}}</button>
</view> </view>
</block> </block>
</view> </view>
</view> </view>
<view class="point-detail"> <view class="point-detail" hidden="{{!winPointDetail}}">
<image src="{{pointDetail}}"></image>
</view> </view>
\ No newline at end of file
pages/guide/guide.wxss
/* 景点地图 */
.guide { .guide {
position: relative; position: relative;
height: 100%; height: 100%;
...@@ -5,16 +6,69 @@ ...@@ -5,16 +6,69 @@
overflow-x: scroll; overflow-x: scroll;
} }
/* .point { .guide > image {
position: fixed; display: block;
bottom: 0; }
width: 750rpx;
height: 200rpx; /* 景点按钮 */
background: #ffffff; .point-map {
} */ position: absolute;
top: 0;
left: 0;
}
.point-info { .point-info {
position: absolute; position: absolute;
width: 100rpx; }
height: 40rpx;
.point-info-arrow {
position: absolute;
left: 10px;
bottom: -6px;
width: 10px;
height: 8px;
}
.icon-active {
border: 2px #133f54 solid;
border-radius: 50%;
box-shadow: 0px 1px 2px 0px rgba(17,62,86,0.24);
}
.button-active {
background: #2a6381;
color: #FFFFFF;
}
.icon-inactive {
border: 2px #FFFFFF solid;
border-radius: 50%;
box-shadow: 0px 1px 2px 0px rgba(50,128,182,0.24);
}
.button-inactive {
background: #FFFFFF;
color: #000000;
}
.point-info button {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 10px;
}
/* 景点详情卡片 */
.point-detail {
position: fixed;
bottom: 40rpx;
}
.point-detail image {
width: 750rpx;
height: 230rpx;
} }
\ No newline at end of file
pages/guide/js/point.js 0 → 100644
let output = [
{
x: 174,
y: 220,
name: '温泉洋房子（建设中）',
icon: './image/icon/01.png',
card: './image/card/01.png',
isActive: false,
}, {
x: 830,
y: 220,
name: '海错图2号馆',
icon: './image/icon/02.png',
card: './image/card/02.png',
isActive: false,
}, {
x: 1060,
y: 220,
name: '海错图1号馆',
icon: './image/icon/03.png',
card: './image/card/03.png',
isActive: false,
}, {
x: 1300,
y: 220,
name: '原味舒食',
icon: './image/icon/04.png',
card: './image/card/04.png',
isActive: false,
}, {
x: 680,
y: 276,
name: '星空影院',
icon: './image/icon/05.png',
card: './image/card/05.png',
isActive: false,
}, {
x: 1120,
y: 276,
name: '元养水韵SPA',
icon: './image/icon/06.png',
card: './image/card/06.png',
isActive: false,
}, {
x: 1384,
y: 276,
name: '原野MOJITO',
icon: './image/icon/07.png',
card: './image/card/07.png',
isActive: false,
}, {
x: 1704,
y: 294,
name: '拾光花坊',
icon: './image/icon/08.png',
card: './image/card/08.png',
isActive: false,
}, {
x: 1016,
y: 386,
name: '星光广场',
icon: './image/icon/09.png',
card: './image/card/09.png',
isActive: false,
}, {
x: 1002,
y: 454,
name: '云之亭',
icon: './image/icon/10.png',
card: './image/card/10.png',
isActive: false,
}, {
x: 1390,
y: 520,
name: '湿地公园',
icon: './image/icon/11.png',
card: './image/card/11.png',
isActive: false,
}, {
x: 1782,
y: 540,
name: '新月码头',
icon: './image/icon/12.png',
card: './image/card/12.png',
isActive: false,
}, {
x: 2836,
y: 592,
name: '儿童营地',
icon: './image/icon/13.png',
card: './image/card/13.png',
isActive: false,
}, {
x: 2112,
y: 680,
name: '星耀银湖',
icon: './image/icon/14.png',
card: './image/card/14.png',
isActive: false,
}, {
x: 1610,
y: 724,
name: '奇幻森林',
icon: './image/icon/15.png',
card: './image/card/15.png',
isActive: false,
},
]
export default output
\ No newline at end of file
pages/home/home.js
...@@ -146,6 +146,13 @@ Page({ ...@@ -146,6 +146,13 @@ Page({
}) })
}, },
onGuide: function () {
console.log('onGuide')
wx.navigateTo({
url: '/pages/guide/guide'
})
},
onNotice: function (event) { onNotice: function (event) {
wx.navigateTo({ wx.navigateTo({
url: '/pages/notice/notice' url: '/pages/notice/notice'
......
pages/home/home.wxml
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
<image class="background-image" src="./image/guide.png" mode="aspectFit"></image> <image class="background-image" src="./image/guide.png" mode="aspectFit"></image>
<view class="operation col"> <view class="operation col">
<text>探索精彩去处</text> <text>探索精彩去处</text>
<button class="row con-c align-c">进入电子地图</button> <button class="row con-c align-c" bind:tap="onGuide">进入电子地图</button>
</view> </view>
</view> </view>
</view> </view>
......
pages/home/home.wxss
...@@ -191,7 +191,6 @@ ...@@ -191,7 +191,6 @@
} }
.guide-content .operation button { .guide-content .operation button {
z-index: -1;
width: 220rpx; width: 220rpx;
height: 68rpx; height: 68rpx;
margin-top: 36rpx; margin-top: 36rpx;
......
pages/play/play.js
...@@ -84,12 +84,14 @@ Page({ ...@@ -84,12 +84,14 @@ Page({
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-1-1.png' 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-1-1.png'
], ],
shop: [{ shop: [{
id: '1', id: 1,
name: '海错图展馆',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-1-2.png', cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-1-2.png',
x: 108, x: 108,
y: 212, y: 212,
}, { }, {
id: '1', id: 2,
name: '拾光花坊',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-1-3.png', cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-1-3.png',
x: 108, x: 108,
y: 264, y: 264,
...@@ -99,7 +101,8 @@ Page({ ...@@ -99,7 +101,8 @@ Page({
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-2-1.png' 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-2-1.png'
], ],
shop: [{ shop: [{
id: '1', id: 3,
name: '水元养韵SPA',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-2-2.png', cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-2-2.png',
x: 108, x: 108,
y: 212, y: 212,
...@@ -109,12 +112,14 @@ Page({ ...@@ -109,12 +112,14 @@ Page({
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-3-1.png' 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-3-1.png'
], ],
shop: [{ shop: [{
id: '1', id: 4,
name: '原味舒食',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-3-2.png', cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-3-2.png',
x: 108, x: 108,
y: 212, y: 212,
}, { }, {
id: '1', id: 5,
name: '原野MOJITO',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-3-3.png', cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-3-3.png',
x: 108, x: 108,
y: 212, y: 212,
...@@ -124,7 +129,8 @@ Page({ ...@@ -124,7 +129,8 @@ Page({
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-4-1.png' 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-4-1.png'
], ],
shop: [{ shop: [{
id: '1', id: 6,
name: '星空影院',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-4-2.png', cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-4-2.png',
x: 108, x: 108,
y: 212, y: 212,
...@@ -216,9 +222,8 @@ Page({ ...@@ -216,9 +222,8 @@ Page({
}, },
onShopDetail: function (funcItem) { onShopDetail: function (funcItem) {
console.log(funcItem)
wx.navigateTo({ wx.navigateTo({
url: '/pages/shop-detail/shop-detail' url: '/pages/shop-detail/shop-detail?id=' + funcItem.currentTarget.dataset.id
}) })
}, },
......
pages/shop-detail/shop-detail.js
let App = getApp()
Page({ Page({
data: { data: {
// banner 列表数据 // banner 列表数据
...@@ -6,10 +8,12 @@ Page({ ...@@ -6,10 +8,12 @@ Page({
bannerHeight: 300, bannerHeight: 300,
info: {}, info: {},
isBlack: false,
}, },
onLoad: function (options) { onLoad: function (options) {
this.queryDetail() console.log(options)
this.queryDetail(Number(options.id))
}, },
/** /**
...@@ -18,29 +22,131 @@ Page({ ...@@ -18,29 +22,131 @@ Page({
* @param {string} - funcToken * @param {string} - funcToken
* @returns * @returns
*/ */
queryDetail: function () { queryDetail: function (funcIndex) {
let response = { funcIndex = funcIndex - 1
banner: [ console.log('queryDetail' + funcIndex)
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/shop/banner-1.png', // 预设数据
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/shop/banner-2.png', let funcDetail = [
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/shop/banner-3.png', {
], id: 1,
name: '元养水韵', banner: [
title: '元养水韵SPA馆', App.globalData.appResourcesBase + 'shop/banner/banner-1-1-1.png',
date: '周一至周日 10:00 - 22:00', App.globalData.appResourcesBase + 'shop/banner/banner-1-1-2.png',
describe: '元养水韵SPA馆，是个女性私享的空间。遵循定制化服务理念，每一位芳疗师会根据你的需要针对性地提供面部、头部、身体的SPA服务，柔软中带有力度能最大化地释放你的疲惫。其中，以泰国皇室经典SPA、面部养颜护理摩纳哥-蒙特卡洛足浴、能量中泰式理疗SPA等服务最为出色。每一位芳疗师都采用最正宗的泰国王室御用手法，足不出国就能体现最正宗的SPA体验。', App.globalData.appResourcesBase + 'shop/banner/banner-1-1-3.png',
contact: '13316748039' ],
} name: '海错图展馆',
title: '海错图',
date: '周一至周日 10:00 - 20:00',
describe: [
App.globalData.appResourcesBase + 'shop/detail/detail-1-1-1.png',
App.globalData.appResourcesBase + 'shop/detail/detail-1-1-2.png',
App.globalData.appResourcesBase + 'shop/detail/detail-1-1-3.png',
App.globalData.appResourcesBase + 'shop/detail/detail-1-1-4.png',
App.globalData.appResourcesBase + 'shop/detail/detail-1-1-5.png',
],
contact: '13316748039'
}, {
id: 2,
banner: [
App.globalData.appResourcesBase + 'shop/banner/banner-1-2-1.png',
App.globalData.appResourcesBase + 'shop/banner/banner-1-2-2.png',
App.globalData.appResourcesBase + 'shop/banner/banner-1-2-3.png',
],
name: '拾光花坊',
title: '拾光花坊',
date: '周一至周日 10:00 - 20:00',
describe: [
App.globalData.appResourcesBase + 'shop/detail/detail-1-2-1.png',
],
contact: '13316748039'
}, {
id: 3,
banner: [
App.globalData.appResourcesBase + 'shop/banner/banner-2-1-1.png',
App.globalData.appResourcesBase + 'shop/banner/banner-2-1-2.png',
App.globalData.appResourcesBase + 'shop/banner/banner-2-1-3.png',
],
name: '元养水韵',
title: '元养水韵SPA馆',
date: '周一至周日 10:00 - 22:00',
describe: [
App.globalData.appResourcesBase + 'shop/detail/detail-2-1-1.png',
App.globalData.appResourcesBase + 'shop/detail/detail-2-1-2.png',
App.globalData.appResourcesBase + 'shop/detail/detail-2-1-3.png',
App.globalData.appResourcesBase + 'shop/detail/detail-2-1-4.png',
],
contact: '13316748039'
}, {
id: 4,
banner: [
App.globalData.appResourcesBase + 'shop/banner/banner-3-1-1.png',
App.globalData.appResourcesBase + 'shop/banner/banner-3-1-2.png',
App.globalData.appResourcesBase + 'shop/banner/banner-3-1-3.png',
],
name: '原味舒食',
title: '原味舒食',
date: '周一至周日 10:00 - 21:30',
describe: [
App.globalData.appResourcesBase + 'shop/detail/detail-3-1-1.png',
App.globalData.appResourcesBase + 'shop/detail/detail-3-1-2.png',
App.globalData.appResourcesBase + 'shop/detail/detail-3-1-3.png',
App.globalData.appResourcesBase + 'shop/detail/detail-3-1-4.png',
App.globalData.appResourcesBase + 'shop/detail/detail-3-1-5.png',
App.globalData.appResourcesBase + 'shop/detail/detail-3-1-6.png',
App.globalData.appResourcesBase + 'shop/detail/detail-3-1-7.png',
],
contact: '13316748039'
}, {
id: 5,
banner: [
App.globalData.appResourcesBase + 'shop/banner/banner-3-2-1.png',
App.globalData.appResourcesBase + 'shop/banner/banner-3-2-2.png',
App.globalData.appResourcesBase + 'shop/banner/banner-3-2-3.png',
],
name: '原野MOJITO',
title: '原味舒食',
date: '周一至周日 10:00 - 凌晨02:00',
describe: [
App.globalData.appResourcesBase + 'shop/detail/detail-3-2-1.png',
],
contact: '13316748039'
}, {
id: 6,
banner: [
App.globalData.appResourcesBase + 'shop/banner/banner-4-1-1.png',
App.globalData.appResourcesBase + 'shop/banner/banner-4-1-2.png',
App.globalData.appResourcesBase + 'shop/banner/banner-4-1-3.png',
],
name: '星空影院',
title: '星空影院',
date: '周一至周日 10:00 - 20:30',
describe: [
App.globalData.appResourcesBase + 'shop/detail/detail-4-1-1.png',
App.globalData.appResourcesBase + 'shop/detail/detail-4-1-2.png',
App.globalData.appResourcesBase + 'shop/detail/detail-4-1-3.png',
App.globalData.appResourcesBase + 'shop/detail/detail-4-1-4.png',
],
contact: '13316748039'
}
]
this.setData({ this.setData({
banner: response.banner, banner: funcDetail[funcIndex].banner,
info: { info: {
name: response.name, id: funcDetail[funcIndex].id,
title: response.title, name: funcDetail[funcIndex].name,
date: response.date, title: funcDetail[funcIndex].title,
describe: response.describe, date: funcDetail[funcIndex].date,
contact: response.contact, describe: funcDetail[funcIndex].describe,
contact: funcDetail[funcIndex].contact,
} }
}) })
if (this.data.info.id === 6) {
this.setData({
isBlack: true
})
}
}, },
onContact: function () { onContact: function () {
......
pages/shop-detail/shop-detail.wxml
...@@ -14,11 +14,13 @@ ...@@ -14,11 +14,13 @@
<swiper-point bannerStyle="{{1}}" bannerActiveIndex="{{bannerIndex}}"></swiper-point> <swiper-point bannerStyle="{{1}}" bannerActiveIndex="{{bannerIndex}}"></swiper-point>
</view> </view>
<view class="banner-wave"> <view class="banner-wave">
<image src="/image/ornament-2.png" mode="widthFix"></image> <image wx:if="{{!isBlack}}" src="/image/ornament-2.png" mode="widthFix"></image>
<image wx:if="{{isBlack}}" src="/image/ornament-2-black.png" mode="widthFix"></image>
</view> </view>
</view> </view>
<view class="detail"> <!-- 明亮样式 -->
<view wx:if="{{!isBlack}}" class="detail">
<view class="detail-title row"> <view class="detail-title row">
<text>{{info.title}}</text> <text>{{info.title}}</text>
</view> </view>
...@@ -29,7 +31,27 @@ ...@@ -29,7 +31,27 @@
</view> </view>
</view> </view>
<view class="detail-describe"> <view class="detail-describe">
<text>{{info.describe}}</text> <block wx:for="{{info.describe}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<image src="{{item}}" mode="widthFix"></image>
</block>
</view>
</view>
<!-- 黑暗样式 -->
<view wx:if="{{isBlack}}" class="detail detail-black">
<view class="detail-title title-black row">
<text>{{info.title}}</text>
</view>
<view class="detail-other other-black col">
<view class="row align-c">
<text>开放时间</text>
<text>{{info.date}}</text>
</view>
</view>
<view class="detail-describe">
<block wx:for="{{info.describe}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<image src="{{item}}" mode="widthFix"></image>
</block>
</view> </view>
</view> </view>
......
pages/shop-detail/shop-detail.wxss
...@@ -59,6 +59,10 @@ ...@@ -59,6 +59,10 @@
padding-bottom: 200rpx; padding-bottom: 200rpx;
} }
.detail-black {
background: #1C1C25;
}
.detail-title { .detail-title {
width: 670rpx; width: 670rpx;
min-height: 76rpx; min-height: 76rpx;
...@@ -69,6 +73,10 @@ ...@@ -69,6 +73,10 @@
line-height: 76rpx; line-height: 76rpx;
} }
.title-black {
color: #FFFFFF;
}
.detail-other { .detail-other {
margin-top: 32rpx; margin-top: 32rpx;
padding: 0 40rpx 48rpx 40rpx; padding: 0 40rpx 48rpx 40rpx;
...@@ -96,15 +104,23 @@ ...@@ -96,15 +104,23 @@
line-height: 42rpx; line-height: 42rpx;
} }
.other-black view text:nth-child(2) {
color: #FFFFFF;
}
.detail-describe { .detail-describe {
width: 670rpx; position: relative;
min-height: 200rpx; width: 750rpx;
margin: 0 auto; }
padding-top: 48rpx;
border-top: 1rpx #E2E7EF solid; .detail-describe image {
font-size: 30rpx; display: block;
color: #15191F; width: 750rpx;
line-height: 50rpx; }
.black {
color: #FFFFFF !important;
background: #1C1C25;
} }
/* 立即报名 */ /* 立即报名 */
......
pages/strategy/strategy.wxml
...@@ -24,9 +24,6 @@ ...@@ -24,9 +24,6 @@
</view> </view>
<view class="detail"> <view class="detail">
<!-- <block wx:for="{{detailImageUrl}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<image mode="widthFix" src="{{item}}"></image>
</block> -->
<parser html="{{content}}"/> <parser html="{{content}}"/>
<view class="relation" wx:if="{{relation.length>0}}"> <view class="relation" wx:if="{{relation.length>0}}">
...@@ -45,7 +42,6 @@ ...@@ -45,7 +42,6 @@
<image src="/image/more.png"></image> <image src="/image/more.png"></image>
</view> </view>
</view> </view>
</block> </block>
</view> </view>
</view> </view>
......
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