Skip to content

严立 / mini-shimao

Go to a project
Commit 5a0b4723 by 严立
Options

LL - UI 问题修复

parent 55a22dc5
Expand all
Inline Side-by-side
Showing with 504 additions and 166 deletions
app.js
App({ App({
globalData: { globalData: {
appResourcesBase: 'http://sm-web.meiqicloud.com/userfiles/appResources/', appResourcesBase: 'https://sm-web.meiqicloud.com/userfiles/appResources/',
token: '', token: '',
refreshToken: '', refreshToken: '',
userInfo: null, userInfo: null,
......
component/navigation/navigation.js
// pages/navBar/navBar.js
Component({ Component({
/** /**
* 组件的属性列表 * 组件的属性列表
...@@ -39,7 +38,7 @@ Component({ ...@@ -39,7 +38,7 @@ Component({
iconWidth: { iconWidth: {
type:Number, type:Number,
value: 58 value: 58
} },
}, },
observers: { observers: {
......
miniprogram_npm/lin-ui/icon/index.js
Component({externalClasses:["l-class"],options:{addGlobalClass:!0},properties:{name:String,color:{type:String,value:"#3963bc"},size:{type:String,value:"40"}},ready:function(){this.properties.name||console.error("请传入Icon组件的name属性")},methods:{}}); Component({
\ No newline at end of file externalClasses: ["l-class"],
options: {
addGlobalClass: !0
},
properties: {
name: String,
color: {
type: String,
value: "#3963bc"
},
size: {
type: String,
value: "40"
}
},
ready: function() {
this.properties.name || console.error("请传入Icon组件的name属性")
},
methods: {}
});
\ No newline at end of file
miniprogram_npm/lin-ui/toast/index.js
import computeOffset from"../behaviors/computeOffset";import zIndex from"../behaviors/zIndex";import watchShow from"../behaviors/watchShow";Component({behaviors:[computeOffset,zIndex,watchShow],externalClasses:["l-bg-class","l-icon-class","l-class","l-image-class","l-title-class "],properties:{show:{type:Boolean,value:!1},title:String,icon:String,iconSize:String,iconColor:String,image:String,placement:{type:String,value:"bottom"},duration:{type:Number,value:1500},zIndex:{type:Number,value:777},center:{type:Boolean,value:!0},mask:{type:Boolean,value:!1},openApi:{type:Boolean,value:!0},offsetX:Number,offsetY:Number},data:{status:!1,success:"",fail:"",complete:""},observers:{icon:function(){}},attached(){this.data.openApi&&this.initToast()},pageLifetimes:{show(){this.data.openApi&&this.initToast(),this.offsetMargin()}},methods:{initToast(){wx.lin=wx.lin||{},wx.lin.showToast=(e={})=>{const{title:t="",icon:o="",image:s="",placement:i="bottom",duration:a=1500,center:n=!0,mask:l=!1,success:r=null,complete:c=null,offsetX:h=0,offsetY:f=0,iconSize:m="60",iconColor:p=""}=e;return this.setData({title:t,icon:o,image:s,placement:i,duration:a,center:n,mask:l,success:r,complete:c,offsetY:f,offsetX:h,iconSize:m,iconColor:p}),this.changeStatus(),this},wx.lin.hideToast=()=>{this.setData({status:!1})}},strlen(e){for(var t=0,o=0;o<e.length;o++){var s=e.charCodeAt(o);s>="0x0001"&&s<="0x007e"||"0xff60"<=s&&s<="0xff9f"?t++:t+=2}return t},doNothingMove(){},onMaskTap(){!0!==this.data.locked&&this.setData({fullScreen:"hide",status:"hide"}),this.triggerEvent("lintap",!0,{bubbles:!0,composed:!0})}}}); import computeOffset from "../behaviors/computeOffset";
\ No newline at end of file import zIndex from "../behaviors/zIndex";
import watchShow from "../behaviors/watchShow";
Component({
behaviors: [computeOffset, zIndex, watchShow],
externalClasses: ["l-bg-class", "l-icon-class", "l-class", "l-image-class", "l-title-class "],
properties: {
show: {
type: Boolean,
value: !1
},
title: String,
icon: String,
iconSize: String,
iconColor: String,
image: String,
placement: {
type: String,
value: "bottom"
},
duration: {
type: Number,
value: 1500
},
zIndex: {
type: Number,
value: 777
},
center: {
type: Boolean,
value: !0
},
mask: {
type: Boolean,
value: !1
},
openApi: {
type: Boolean,
value: !0
},
offsetX: Number,
offsetY: Number
},
data: {
status: !1,
success: "",
fail: "",
complete: ""
},
observers: {
icon: function() {}
},
attached() {
this.data.openApi && this.initToast()
},
pageLifetimes: {
show() {
this.data.openApi && this.initToast(), this.offsetMargin()
}
},
methods: {
initToast() {
wx.lin = wx.lin || {}, wx.lin.showToast = (e = {}) => {
const {
title: t = "",
icon: o = "",
image: s = "",
placement: i = "bottom",
duration: a = 1500,
center: n = !0,
mask: l = !1,
success: r = null,
complete: c = null,
offsetX: h = 0,
offsetY: f = 0,
iconSize: m = "60",
iconColor: p = ""
} = e;
console.log(e)
return this.setData({
title: t,
icon: o,
image: s,
placement: i,
duration: a,
center: n,
mask: l,
success: r,
complete: c,
offsetY: f,
offsetX: h,
iconSize: m,
iconColor: p
}), this.changeStatus(), this
}, wx.lin.hideToast = () => {
this.setData({
status: !1
})
}
},
strlen(e) {
for (var t = 0, o = 0; o < e.length; o++) {
var s = e.charCodeAt(o);
s >= "0x0001" && s <= "0x007e" || "0xff60" <= s && s <= "0xff9f" ? t++ : t += 2
}
return t
},
doNothingMove() {},
onMaskTap() {
!0 !== this.data.locked && this.setData({
fullScreen: "hide",
status: "hide"
}), this.triggerEvent("lintap", !0, {
bubbles: !0,
composed: !0
})
}
}
});
\ No newline at end of file
miniprogram_npm/lin-ui/toast/index.wxss
.container{position:fixed}.containerNoMask{left:50%;top:50%;transform:translate(-50%,-50%)}.containerShowMask{height:100%;width:100%;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:999}.container .toast-bg{height:100%;width:100%;background:rgba(255,255,255,.5);position:absolute;top:0;left:0}.container .toast-top{flex-direction:column-reverse}.container .toast-right{flex-direction:row}.container .toast-bottom{flex-direction:column}.container .toast-left{flex-direction:row-reverse}.container .toast{display:flex;align-items:center;justify-content:center;max-width:400rpx;min-width:280rpx;min-height:88rpx;background:rgba(0,0,0,.7);border-radius:12rpx;color:#fff;font-size:28rpx;line-height:40rpx;box-sizing:border-box;padding:30rpx 50rpx;z-index:999}.container .toast .toast-icon{margin-top:20rpx;margin-bottom:20rpx}.container .toast .toast-icon-loading{animation:loading-fadein 1.5s linear 0s infinite}.container .toast .toast-text{display:inline-block;text-align:center}.container .toast .toast-text-right{display:inline-block;text-align:center;margin-left:20rpx}.container .toast .toast-text-left{display:inline-block;text-align:center;margin-right:20rpx}.container .toast .toast-text-top{margin-bottom:10rpx}@keyframes loading-fadein{0%{transform:rotate(0)}100%{transform:rotate(360deg)}} .container {
\ No newline at end of file position: fixed;
}
.containerNoMask {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.containerShowMask {
height: 100%;
width: 100%;
top: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 999;
}
.container .toast-bg {
height: 100%;
width: 100%;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 0;
left: 0;
}
.container .toast-top {
flex-direction: column-reverse;
}
.container .toast-right {
flex-direction: row;
}
.container .toast-bottom {
flex-direction: column;
}
.container .toast-left {
flex-direction: row-reverse;
}
.container .toast {
display: flex;
align-items: center;
justify-content: center;
max-width: 400rpx;
min-width: 280rpx;
min-height: 88rpx;
background: rgba(0, 0, 0, 0.7);
border-radius: 12rpx;
color: #fff;
font-size: 28rpx;
line-height: 40rpx;
box-sizing: border-box;
padding: 30rpx 50rpx;
z-index: 999;
}
.container .toast .toast-icon {
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.container .toast .toast-icon-loading {
animation: loading-fadein 1.5s linear 0s infinite;
}
.container .toast .toast-text {
display: inline-block;
text-align: center;
}
.container .toast .toast-text-right {
display: inline-block;
text-align: center;
margin-left: 20rpx;
}
.container .toast .toast-text-left {
display: inline-block;
text-align: center;
margin-right: 20rpx;
}
.container .toast .toast-text-top {
margin-bottom: 10rpx;
}
@keyframes loading-fadein {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
pages/guide/guide.js
...@@ -14,7 +14,6 @@ Page({ ...@@ -14,7 +14,6 @@ Page({
}, },
onLoad: function (options) { onLoad: function (options) {
console.log('options', options)
logicData.option = options logicData.option = options
this.initGuide() this.initGuide()
this.initSelection() this.initSelection()
...@@ -45,7 +44,6 @@ Page({ ...@@ -45,7 +44,6 @@ Page({
this.setData({ this.setData({
mapCss: JSON.stringify(funcMapCss).replace(/[{",}]/g, ''), mapCss: JSON.stringify(funcMapCss).replace(/[{",}]/g, ''),
}) })
this.setPointCss(funcProportion) this.setPointCss(funcProportion)
}, },
...@@ -107,7 +105,22 @@ Page({ ...@@ -107,7 +105,22 @@ Page({
}, },
initSelection: function () { initSelection: function () {
if (!logicData.option.id) return if (!logicData.option.id) {
const funcQuery = wx.createSelectorQuery()
funcQuery.select('#guide-map').boundingClientRect()
funcQuery.exec((result) => {
console.log(result)
this.setData({
selectionPoint: result[0].width * 0.2
})
})
this.setData({
selectionPoint: 200
})
return
}
let funcIndex = 0 let funcIndex = 0
let funcPointInfo = this.data.pointInfo let funcPointInfo = this.data.pointInfo
...@@ -121,7 +134,6 @@ Page({ ...@@ -121,7 +134,6 @@ Page({
pointInfo: funcPointInfo, pointInfo: funcPointInfo,
pointDetail: funcPointInfo[funcIndex].card, pointDetail: funcPointInfo[funcIndex].card,
winPointDetail: true, winPointDetail: true,
// selectionPoint: funcPointInfo[funcIndex].x - (wx.getSystemInfoSync().windowWidth / 2) +
}) })
this.scrollSelection(funcPointInfo[funcIndex]) this.scrollSelection(funcPointInfo[funcIndex])
...@@ -138,6 +150,9 @@ Page({ ...@@ -138,6 +150,9 @@ Page({
}, },
onPointInfo: function (event) { onPointInfo: function (event) {
// 当从景点详情进入屏蔽该功能
if (logicData.option.id) return
let funcIndex = event.currentTarget.dataset.index let funcIndex = event.currentTarget.dataset.index
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++) {
...@@ -165,7 +180,8 @@ Page({ ...@@ -165,7 +180,8 @@ Page({
}, },
onPointDetail: function () { onPointDetail: function () {
console.log(logicData.option) // 当从景点详情进入屏蔽该功能
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++) {
...@@ -176,4 +192,16 @@ Page({ ...@@ -176,4 +192,16 @@ Page({
} }
} }
}, },
onCancel: function () {
console.log('onCancel')
let funcPointInfo = this.data.pointInfo
for (let i = 0, l = funcPointInfo.length; i < l; i++) {
funcPointInfo[i].isActive = false
}
this.setData({
pointInfo: funcPointInfo,
winPointDetail: false,
})
},
}) })
\ No newline at end of file
pages/guide/guide.wxml
...@@ -2,23 +2,29 @@ ...@@ -2,23 +2,29 @@
<navigation class="navigation" titleText="智慧导览" backIcon="/image/back.png"></navigation> <navigation class="navigation" titleText="智慧导览" backIcon="/image/back.png"></navigation>
<scroll-view class="guide" scroll-x scroll-left="{{selectionPoint}}"> <scroll-view class="guide" scroll-x scroll-left="{{selectionPoint}}">
<image src="http://sm-web.meiqicloud.com/userfiles/appResources/guide/guide.png" style="{{mapCss}}"></image> <image id="guide-map" src="http://sm-web.meiqicloud.com/userfiles/appResources/guide/guide.png" style="{{mapCss}}"></image>
<view class="point-map" style="{{mapCss}}"> <view class="point-map" style="{{mapCss}}" catch:tap="onCancel">
<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 id="{{'selection-' + item.id}}" class="point-info row align-c {{item.isActive ? 'button-active' : 'button-inactive'}}" style="{{item.css}}"> <view
id="{{'selection-' + item.id}}"
class="point-info row align-c {{item.isActive ? 'button-active' : 'button-inactive'}}"
style="{{item.css}}"
data-index="{{index}}"
catch:tap="onPointInfo"
>
<!-- 默认样式 --> <!-- 默认样式 -->
<image class="point-info-arrow" src="./image/icon/point-arrow-inactive.png" hidden="{{item.isActive}}"></image> <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> <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> <button class="button-inactive" hidden="{{item.isActive}}">{{item.name}}</button>
<!-- 选择样式 --> <!-- 选择样式 -->
<image class="point-info-arrow" src="./image/icon/point-arrow-active.png" hidden="{{!item.isActive}}"></image> <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> <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> <button class="button-active" hidden="{{!item.isActive}}">{{item.name}}</button>
</view> </view>
</block> </block>
</view> </view>
</scroll-view> </scroll-view>
<view class="point-detail" hidden="{{!winPointDetail}}" bind:tap="onPointDetail"> <view class="point-detail" hidden="{{!winPointDetail}}" catch:tap="onPointDetail">
<image src="{{pointDetail}}"></image> <image src="{{pointDetail}}"></image>
</view> </view>
\ No newline at end of file
pages/guide/guide.wxss
...@@ -8,9 +8,8 @@ ...@@ -8,9 +8,8 @@
/* 景点地图 */ /* 景点地图 */
.guide { .guide {
position: relative; position: fixed;
height: 100%; height: 100%;
background: #808080;
overflow-x: scroll; overflow-x: scroll;
} }
...@@ -20,6 +19,7 @@ ...@@ -20,6 +19,7 @@
/* 景点按钮 */ /* 景点按钮 */
.point-map { .point-map {
display: block;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
.point-info-arrow { .point-info-arrow {
position: absolute; position: absolute;
left: 10px; left: 10px;
bottom: -6px; bottom: -8px;
width: 10px; width: 10px;
height: 8px; height: 8px;
} }
......
pages/guide/js/point.js
...@@ -115,7 +115,6 @@ let output = [ ...@@ -115,7 +115,6 @@ let output = [
icon: './image/icon/13.png', icon: './image/icon/13.png',
card: './image/card/13.png', card: './image/card/13.png',
detail: '/pages/campsite-mirror/campsite-mirror', detail: '/pages/campsite-mirror/campsite-mirror',
detail: '/pages/shop-point-detail/shop-point-detail?id=105',
isActive: false, isActive: false,
}, { }, {
x: 2112, x: 2112,
......
pages/home/home.js
...@@ -46,6 +46,21 @@ Page({ ...@@ -46,6 +46,21 @@ Page({
// this.queryBanner() // this.queryBanner()
// this.queryStrategy() // this.queryStrategy()
this.setNavigationLogo() this.setNavigationLogo()
// wx.lin.showToast({
// title: '创建成功~',
// icon: 'success',
// image: '/image/more-w.png',
// success: (res) => {
// console.log(res)
// },
// complete: (res) => {
// console.log(res)
// }
// })
}, },
onShow: function() { onShow: function() {
this.setData({ this.setData({
......
pages/home/home.wxml
<!-- <l-toast /> -->
<navigation class="navigation" background="{{'rgba(255, 255, 255, ' + navigationAnimationShow + ')'}}"></navigation> <navigation class="navigation" background="{{'rgba(255, 255, 255, ' + navigationAnimationShow + ')'}}"></navigation>
<view class="container"> <view class="container">
...@@ -5,7 +7,7 @@ ...@@ -5,7 +7,7 @@
<image class="logo" src="/image/logo-b.png" hidden="{{isNavigationLogoWhite}}" style="{{'top: ' + navigationLogoTop + 'px'}}"></image> <image class="logo" src="/image/logo-b.png" hidden="{{isNavigationLogoWhite}}" style="{{'top: ' + navigationLogoTop + 'px'}}"></image>
<view id="banner" class="banner"> <view id="banner" class="banner">
<swiper autoplay circular class="banner-swiper" indicator-dots="{{false}}" interval="2000" duration="500" bindchange="onSwiperChange"> <swiper autoplay circular class="banner-swiper" indicator-dots="{{false}}" interval="4000" duration="500" bindchange="onSwiperChange">
<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" data-item="{{item}}" bindtap="bannerClick"> <swiper-item class="banner-swiper-item" data-item="{{item}}" bindtap="bannerClick">
<image class="banner-swiper-image" src="{{item.img}}"></image> <image class="banner-swiper-image" src="{{item.img}}"></image>
...@@ -22,19 +24,14 @@ ...@@ -22,19 +24,14 @@
</view> </view>
<view class="banner-notice row align-c"> <view class="banner-notice row align-c">
<image src="./image/inform.png"></image> <view class="row align-c">
<text>最新动态</text> <image src="./image/inform.png"></image>
<!-- <text>温泉公寓现已接受预定</text> --> <text>最新动态</text>
<l-notice-bar </view>
show="{{true}}" <view class="row con-b align-c">
type="swip" <l-notice-bar show="{{true}}" type="swip" swip-arr="{{noticeTitles}}" speed="2000" l-class="notice-bar" bind:lintap="noticClick"></l-notice-bar>
swip-arr="{{noticeTitles}}" <image class="banner-image" src="../../image/more-g.png" bindtap="onNotice"></image>
speed="2000" </view>
l-class="notice-bar"
bind:lintap="noticClick">
</l-notice-bar>
<image class="banner-image" src="../../image/more-g.png" bindtap="onNotice"></image>
</view> </view>
</view> </view>
...@@ -71,7 +68,6 @@ ...@@ -71,7 +68,6 @@
<!-- 预约看房 --> <!-- 预约看房 -->
<view class="appointment detail-item"> <view class="appointment detail-item">
<image src="./image/title-appointment.png"></image>
<view class="appointment-content" bindtap="onAppointmentHouse"> <view class="appointment-content" bindtap="onAppointmentHouse">
<image class="background-image" src="./image/appointment.png" mode="aspectFit"></image> <image class="background-image" src="./image/appointment.png" mode="aspectFit"></image>
<view class="row con-b align-c"> <view class="row con-b align-c">
......
pages/home/home.wxss
...@@ -73,10 +73,15 @@ ...@@ -73,10 +73,15 @@
justify-content: space-between; justify-content: space-between;
} }
.banner-notice image:nth-child(1) {
width: 40rpx;
height: 40rpx;
margin-right: 16rpx;
}
.banner-notice text:nth-child(2) { .banner-notice text:nth-child(2) {
width: 120rpx; width: 120rpx;
height: 42rpx; height: 42rpx;
margin-left: 16rpx;
font-size: 30rpx; font-size: 30rpx;
font-weight: bold; font-weight: bold;
color: #15191F; color: #15191F;
...@@ -92,7 +97,7 @@ ...@@ -92,7 +97,7 @@
line-height: 36rpx; line-height: 36rpx;
} }
.banner-notice image { .banner-notice image:nth-child(4) {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
} }
...@@ -253,11 +258,9 @@ ...@@ -253,11 +258,9 @@
} }
.strategy-content .operation { .strategy-content .operation {
/* height: 320rpx; */
margin: 0 40rpx;
/* padding-top: 230rpx; */
position: absolute; position: absolute;
bottom: 10rpx; bottom: 32rpx;
margin: 0 40rpx;
} }
.strategy-content .operation text { .strategy-content .operation text {
...@@ -268,9 +271,10 @@ ...@@ -268,9 +271,10 @@
} }
.notice-bar { .notice-bar {
width: 330rpx !important; width: 366rpx !important;
margin: 0 14rpx 0 4rpx;
line-height: 72rpx; line-height: 72rpx;
padding-left: 14rpx;
font-size: 28rpx; font-size: 28rpx;
color: #333 !important; color: #333 !important;
background-color: #ffffff !important; background-color: #ffffff !important;
...@@ -279,16 +283,11 @@ ...@@ -279,16 +283,11 @@
border-radius: 0 0 0 0 !important; border-radius: 0 0 0 0 !important;
} }
/* .notice-bar .l-noticebar {
} */
.notice-bar swiper-item { .notice-bar swiper-item {
background-color: #ffffff; background-color: #ffffff;
} }
.banner-image { .banner-image {
width: 54rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
} }
\ No newline at end of file
pages/notice-detail/notice-detail.js
...@@ -8,7 +8,6 @@ Page({ ...@@ -8,7 +8,6 @@ Page({
}, },
onLoad: function (options) { onLoad: function (options) {
// this.queryNotice()
console.log(options) console.log(options)
this.setData({ this.setData({
id: options.id id: options.id
...@@ -22,23 +21,6 @@ Page({ ...@@ -22,23 +21,6 @@ Page({
}, },
queryNotice: function () {
let response = {
title: '温泉洋房现已接受预定',
date: '2020-06-15',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/notice/item-0.png',
describe: [
'既能体验海洋公园，又能享受湿地与海景双重景观的49间温泉洋房开放啦！并接受广大游客的预订。',
'房间宽敞明亮，阳光充足。从布局、餐饮、家具设计到色彩环境，都有专业的健康和美学设计，不同主题的房间满足您个性化的需求。包含室外泳池和音乐广场，随心舒适，让您随时随地惬意的自在享受。',
'游客可在首页-预约看房打电话进行温泉洋房预定。预定电话：0431-96518'
]
}
this.setData({
notice: response
})
},
// 最新动态详情 // 最新动态详情
getNoticeDetail() { getNoticeDetail() {
var that = this var that = this
......
pages/notice-detail/notice-detail.wxml
...@@ -13,10 +13,5 @@ ...@@ -13,10 +13,5 @@
</view> </view>
<view class="describe"> <view class="describe">
<parser html="{{notice.describe}}"/> <parser html="{{notice.describe}}"/>
<!-- <block wx:for="{{notice.describe}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view>
<text>{{item}}</text>
</view>
</block> -->
</view> </view>
</view> </view>
\ No newline at end of file
pages/notice-detail/notice-detail.wxss
...@@ -14,15 +14,12 @@ ...@@ -14,15 +14,12 @@
.date { .date {
width: 670rpx; width: 670rpx;
margin-top: 40rpx; margin: 32rpx 0 64rpx 0;
font-size: 32rpx; font-size: 32rpx;
color: #959DA9; color: #959DA9;
} }
.cover {
width: 670rpx;
margin-top: 60rpx;
}
.cover,
.cover image { .cover image {
width: 670rpx; width: 670rpx;
/* height: 288rpx; */ /* height: 288rpx; */
...@@ -31,12 +28,18 @@ ...@@ -31,12 +28,18 @@
.describe { .describe {
width: 670rpx; width: 670rpx;
margin-top: 50rpx;
font-size: 30rpx; font-size: 30rpx;
font-weight: 300; font-weight: 300;
color: #15191F; color: #15191F;
line-height: 52rpx; line-height: 52rpx;
} }
.describe view { rich-text {
margin-top: 50rpx; margin-bottom: 64rpx;
} font-size: 30rpx;
font-family:PingFangSC-Light,PingFang SC;
font-weight: 300;
color: #15191F;
line-height: 52rpx;
}
\ No newline at end of file
pages/notice/notice.js
...@@ -13,7 +13,6 @@ Page({ ...@@ -13,7 +13,6 @@ Page({
}, },
onLoad: function () { onLoad: function () {
// this.queryNotice()
var that = this var that = this
app.login({ app.login({
success: function(token) { success: function(token) {
...@@ -22,32 +21,6 @@ Page({ ...@@ -22,32 +21,6 @@ Page({
}) })
}, },
queryNotice: function () {
let response = [
{
id: '1',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/notice/item-0.png',
title: '温泉洋房现已接受预定',
date: '2020-08-03',
describe: '经过精心筹备，碧海银湖温泉洋房现已对外开放，既能体验海洋温泉，又能享受湿地与海景双重景观',
}, {
id: '2',
cover: '',
title: '新冠疫情期间入住规定与注意事项，请游客周知',
date: '2020-07-24',
describe: '世界卫生组织于2020年3月11日宣布新冠肺炎疫情已构成全球大流行，为了保护游客的健康和安全，景区制定以下细则。',
}
]
for (let i = 0, l = response.length; i < l; i++) {
response[i].date = iMiment(response[i].date).format('MM/DD')
}
this.setData({
notice: response
})
},
onNoticeDetail: function (funcItem) { onNoticeDetail: function (funcItem) {
console.log(funcItem) console.log(funcItem)
wx.navigateTo({ wx.navigateTo({
......
pages/play/play.js
...@@ -59,85 +59,73 @@ Page({ ...@@ -59,85 +59,73 @@ Page({
}) })
this.setNavigationLogo() this.setNavigationLogo()
// this.queryBanner()
this.queryDetail() this.queryDetail()
}, },
onShow: function () { onShow: function () {
this.getActivityList(1) this.getActivityList(1)
}, },
queryBanner: function () {
let response = [
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/banner-0.png',
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/banner-1.png',
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/banner-2.png',
]
this.setData({
banner: response
})
},
queryDetail: function () { queryDetail: function () {
let response = [ let response = [
{ {
describe: [ describe: [
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-1-1.png' app.globalData.appResourcesBase + 'play/detail/detail-1-1.png'
], ],
shop: [{ shop: [{
id: 1, id: 1,
name: '海错图展馆', name: '海错图展馆',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-1-2.png', cover: app.globalData.appResourcesBase + 'play/detail/detail-1-2.png',
x: 108, x: 108,
y: 212, y: 212,
}, { }, {
id: 2, id: 2,
name: '拾光花坊', name: '拾光花坊',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-1-3.png', cover: app.globalData.appResourcesBase + 'play/detail/detail-1-3.png',
x: 108, x: 108,
y: 264, y: 264,
}] }]
}, { }, {
describe: [ describe: [
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-2-1.png' app.globalData.appResourcesBase + 'play/detail/detail-2-1.png'
], ],
shop: [{ shop: [{
id: 3, id: 3,
name: '水元养韵SPA', name: '水元养韵SPA',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-2-2.png', cover: app.globalData.appResourcesBase + 'play/detail/detail-2-2.png',
x: 108, x: 108,
y: 212, y: 212,
}] }]
}, { }, {
describe: [ describe: [
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-3-1.png' app.globalData.appResourcesBase + 'play/detail/detail-3-1.png'
], ],
shop: [{ shop: [{
id: 4, id: 4,
name: '原味舒食', name: '原味舒食',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-3-2.png', cover: app.globalData.appResourcesBase + 'play/detail/detail-3-2.png',
x: 108, x: 108,
y: 212, y: 212,
}, { }, {
id: 5, id: 5,
name: '原野MOJITO', name: '原野MOJITO',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-3-3.png', cover: app.globalData.appResourcesBase + 'play/detail/detail-3-3.png',
x: 108, x: 108,
y: 212, y: 212,
}] }]
}, { }, {
describe: [ describe: [
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-4-1.png' app.globalData.appResourcesBase + 'play/detail/detail-4-1.png'
], ],
shop: [{ shop: [{
id: 6, id: 6,
name: '星空影院', name: '星空影院',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-4-2.png', cover: app.globalData.appResourcesBase + 'play/detail/detail-4-2.png',
x: 108, x: 108,
y: 212, y: 212,
}] }]
}, { }, {
describe: [ describe: [
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/item/detail-5-1.png' app.globalData.appResourcesBase + 'play/detail/detail-5-1.png'
], ],
shop: [] shop: []
}, },
...@@ -188,13 +176,24 @@ Page({ ...@@ -188,13 +176,24 @@ Page({
// if (logicData.pageScrollLock) return // if (logicData.pageScrollLock) return
// logicData.pageScrollLock = true // logicData.pageScrollLock = true
this.setTab(funcEvent)
// 恢复滚动事件
// logicData.pageScrollTimer = setTimeout(function () {
// logicData.pageScrollLock = false
// clearTimeout(logicData.pageScrollTimer)
// }, 20)
},
setTab: function (funcEvent) {
// 判断标签吸顶边距 // 判断标签吸顶边距
if (funcEvent.scrollTop - this.data.navigationFixedBoundary > -20 && !this.data.navigationFixed) { if (funcEvent.scrollTop - this.data.navigationFixedBoundary > -20 && !this.data.navigationFixed) {
this.setData({ this.setData({
navigationFixed: true navigationFixed: true
}) })
} }
if (funcEvent.scrollTop - this.data.navigationFixedBoundary < -20 && this.data.navigationFixed) { if (funcEvent.scrollTop - this.data.navigationFixedBoundary < -20 && this.data.navigationFixed) {
this.setData({ this.setData({
navigationFixed: false navigationFixed: false
...@@ -213,12 +212,6 @@ Page({ ...@@ -213,12 +212,6 @@ Page({
navigationBackground: 'rgba(0, 0, 0, 0)' navigationBackground: 'rgba(0, 0, 0, 0)'
}) })
} }
// 恢复滚动事件
// logicData.pageScrollTimer = setTimeout(function () {
// logicData.pageScrollLock = false
// clearTimeout(logicData.pageScrollTimer)
// }, 20)
}, },
onShopDetail: function (funcItem) { onShopDetail: function (funcItem) {
......
pages/play/play.wxss
page { page {
background: #f5f6f8; background: linear-gradient(182deg,#FFFFFF 0%,#EBEDF7 100%);
} }
.navigation { .navigation {
...@@ -153,9 +153,9 @@ swiper-item { ...@@ -153,9 +153,9 @@ swiper-item {
} }
.detail image { .detail image {
display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
margin-bottom: -10rpx;
} }
/* 商店详情 */ /* 商店详情 */
...@@ -167,8 +167,10 @@ swiper-item { ...@@ -167,8 +167,10 @@ swiper-item {
} }
.shop-item image { .shop-item image {
display: block;
width: 750rpx; width: 750rpx;
height: 1152rpx; height: 1152rpx;
font-size: 0;
} }
.shop-item .button { .shop-item .button {
......
pages/shop-detail/shop-detail.js
let App = getApp() let App = getApp()
let logicData = { let logicData = {
option: {} option: {},
pageScrollLock: false,
pageScrollTimer: 0,
} }
Page({ Page({
...@@ -13,6 +15,9 @@ Page({ ...@@ -13,6 +15,9 @@ Page({
info: {}, info: {},
isBlack: false, isBlack: false,
sideHeight: 550,
winSide: true,
}, },
onLoad: function (options) { onLoad: function (options) {
...@@ -71,7 +76,7 @@ Page({ ...@@ -71,7 +76,7 @@ Page({
App.globalData.appResourcesBase + 'shop/banner/banner-2-1-3.png', App.globalData.appResourcesBase + 'shop/banner/banner-2-1-3.png',
], ],
name: '元养水韵', name: '元养水韵',
title: '元养水韵SPA馆', title: '元养水韵SPA',
date: '周一至周日 10:00 - 22:00', date: '周一至周日 10:00 - 22:00',
describe: [ describe: [
App.globalData.appResourcesBase + 'shop/detail/detail-2-1-1.png', App.globalData.appResourcesBase + 'shop/detail/detail-2-1-1.png',
...@@ -165,6 +170,65 @@ Page({ ...@@ -165,6 +170,65 @@ Page({
}) })
}, },
onPageScroll: function (funcEvent) {
// console.log(funcEvent)
// 优化滚动事件触发频率
// if (logicData.pageScrollLock) return
// logicData.pageScrollLock = true
this.setSideButton(funcEvent)
// 恢复滚动事件
// logicData.pageScrollTimer = setTimeout(function () {
// logicData.pageScrollLock = false
// clearTimeout(logicData.pageScrollTimer)
// }, 20)
},
/**
* 页面滚动事件
* @function
* @param {object} - funcEvent
* @returns
*/
setSideButton: function (funcEvent) {
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
if (funcEvent.scrollTop >= this.data.sideHeight) {
if (this.data.winSide) {
this.setData({
winSide: false
})
}
let funcOpacity = (funcEvent.scrollTop - this.data.sideHeight) / 40
this.setData({
navigationAnimationShow: funcOpacity
})
}
if (funcEvent.scrollTop < this.data.sideHeight && !this.data.winSide) {
this.setData({
winSide: true,
navigationAnimationShow: 0
})
}
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 40)
},
onBackTop: function () {
wx.pageScrollTo({
scrollTop: 0
})
},
/** /**
* banner 切换图片同步自定义标识组件 * banner 切换图片同步自定义标识组件
* @function * @function
......
pages/shop-detail/shop-detail.wxml
...@@ -26,15 +26,15 @@ ...@@ -26,15 +26,15 @@
</view> </view>
<view class="detail-other col"> <view class="detail-other col">
<view class="row align-c"> <view class="row align-c">
<image src="./image/time.png"></image> <image class="detail-other-time" src="./image/time.png"></image>
<text>时间</text> <text>时间</text>
<text>{{info.date}}</text> <text>{{info.date}}</text>
</view> </view>
<view class="row align-c" bind:tap="onLocation"> <view class="row align-c" bind:tap="onLocation">
<image src="./image/location.png"></image> <image class="detail-other-location" src="./image/location.png"></image>
<text>地址</text> <text>地址</text>
<text>点击查看地址</text> <text>点击查看地址</text>
<image src="../../image/more.png"></image> <image class="detail-other-more" src="../../image/more.png"></image>
</view> </view>
</view> </view>
<view class="detail-describe"> <view class="detail-describe">
...@@ -55,15 +55,15 @@ ...@@ -55,15 +55,15 @@
</view> </view>
<view class="detail-other other-black col"> <view class="detail-other other-black col">
<view class="row align-c"> <view class="row align-c">
<image src="./image/time.png"></image> <image class="detail-other-time" src="./image/time.png"></image>
<text>时间</text> <text>时间</text>
<text>{{info.date}}</text> <text>{{info.date}}</text>
</view> </view>
<view class="row align-c" bind:tap="onLocation"> <view class="row align-c" bind:tap="onLocation">
<image src="./image/location.png"></image> <image class="detail-other-location" src="./image/location.png"></image>
<text>地址</text> <text>地址</text>
<text>点击查看地址</text> <text>点击查看地址</text>
<image src="../../image/more-g.png"></image> <image class="detail-other-more" src="../../image/more-g.png"></image>
</view> </view>
</view> </view>
<view class="detail-describe"> <view class="detail-describe">
...@@ -76,4 +76,11 @@ ...@@ -76,4 +76,11 @@
<view wx:if="{{isBlack}}" class="operation operation-black"> <view wx:if="{{isBlack}}" class="operation operation-black">
<button class="button row con-c align-c" bindtap="onContact">电话预约</button> <button class="button row con-c align-c" bindtap="onContact">电话预约</button>
</view> </view>
<!-- 侧边返回顶部 -->
<view class="appointment-side col con-b align-c" hidden="{{winSide}}">
<button class="appointment-side-top" bindtap="onBackTop">
<image src="../../image/top.png"></image>
</button>
</view>
</view> </view>
\ No newline at end of file
pages/shop-detail/shop-detail.wxss
...@@ -87,10 +87,11 @@ ...@@ -87,10 +87,11 @@
margin-top: 24rpx; margin-top: 24rpx;
} }
.detail-other view image:nth-child(1) { .detail-other-time,
width: 40rpx; .detail-other-location {
height: 40rpx; width: 36rpx;
margin-right: 8rpx; height: 36rpx;
margin-right: 12rpx;
} }
.detail-other view text:nth-child(2) { .detail-other view text:nth-child(2) {
...@@ -104,17 +105,16 @@ ...@@ -104,17 +105,16 @@
} }
.detail-other view text:nth-child(3) { .detail-other view text:nth-child(3) {
width: 518rpx;
height: 40rpx; height: 40rpx;
font-size: 30rpx; font-size: 30rpx;
color: #000000; color: #000000;
line-height: 42rpx; line-height: 42rpx;
} }
.detail-other view image:nth-child(4) { .detail-other-more {
flex-grow: 1;
width: 32rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
margin-left: 318rpx;
} }
.other-black { .other-black {
...@@ -168,4 +168,28 @@ ...@@ -168,4 +168,28 @@
font-weight: 500; font-weight: 500;
color: #ffffff; color: #ffffff;
line-height: 42rpx; line-height: 42rpx;
}
/* 侧边返回顶部 */
.appointment-side {
z-index: 1900;
position: fixed;
right: 40rpx;
bottom: 268rpx;
width: 80rpx;
height: 80rpx;
}
.appointment-side-top {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
background: #ffffff;
box-shadow: 0rpx 16rpx 48rpx 0rpx rgba(0, 0, 0, 0.1);
}
.appointment-side-top image {
width: 48rpx;
height: 48rpx;
margin: 16rpx;
} }
\ No newline at end of file
pages/shop-point-detail/shop-point-detail.js
...@@ -38,7 +38,7 @@ Page({ ...@@ -38,7 +38,7 @@ Page({
date: '周一至周日 10:00 - 20:00', date: '周一至周日 10:00 - 20:00',
describe: '星光点点的灯、洁白无瑕的水晶白、汉白玉铺地配以建筑华美端庄的立面，配以200余盏小米灯，整个星光广场熠熠生辉，闪耀着奇幻秘境的精致、优雅与纯洁无瑕。', describe: '星光点点的灯、洁白无瑕的水晶白、汉白玉铺地配以建筑华美端庄的立面，配以200余盏小米灯，整个星光广场熠熠生辉，闪耀着奇幻秘境的精致、优雅与纯洁无瑕。',
contact: '13316748039', contact: '13316748039',
background: 'background: linear-gradient(0, #2959B0, rgba(0, 0, 0, 0));', background: 'background: linear-gradient(0, #2959B0 30%, rgba(0, 0, 0, 0));',
}, { }, {
id: 102, id: 102,
banner: [ banner: [
...@@ -62,7 +62,7 @@ Page({ ...@@ -62,7 +62,7 @@ Page({
name: '湿地公园', name: '湿地公园',
title: '湿地公园', title: '湿地公园',
date: '周一至周日 10:00 - 22:00', date: '周一至周日 10:00 - 22:00',
describe: '碧海银湖具备先天的自然资源优势，面朝黄茅海，坐拥1500亩的红树林湿地公园，底栖动物、擦肩而过的迁徙鸟、充满负氧离子的空气……一年四季，你都可以在这里找到属于它的主色调。与自然生物相邻嬉戏……', describe: '碧海银湖具备先天的自然资源优势，面朝黄茅海，坐拥1500亩的红树林湿地公园，底栖动物、擦肩而过的迁徙鸟、充满负氧离子的空气……一年四季，你都可以在这里找到属于它的主色调。',
contact: '13316748039', contact: '13316748039',
background: 'background: linear-gradient(0, #75AE5C, rgba(0, 0, 0, 0));', background: 'background: linear-gradient(0, #75AE5C, rgba(0, 0, 0, 0));',
}, { }, {
......
pages/shop-point-detail/shop-point-detail.wxml
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<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" style="{{'height: ' + bannerHeight + 'px;'}}" 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" style="{{'height: ' + bannerHeight + 'px;'}}">
<image class="banner-swiper-image" src="{{item}}" style="{{'height: ' + bannerHeight + 'px;'}}"></image> <image class="banner-swiper-image" src="{{item}}" style="{{'height: ' + bannerHeight + 'px;'}}" mode="aspectFill"></image>
</swiper-item> </swiper-item>
</block> </block>
</swiper> </swiper>
......
pages/shop-point-detail/shop-point-detail.wxss
...@@ -41,7 +41,7 @@ page { ...@@ -41,7 +41,7 @@ page {
.banner-swiper-point { .banner-swiper-point {
z-index: 9; z-index: 9;
position: relative; position: relative;
top: 870rpx; top: 66%;
left: 0; left: 0;
} }
...@@ -51,14 +51,14 @@ page { ...@@ -51,14 +51,14 @@ page {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 750rpx; width: 750rpx;
min-height: 308rpx; height: 46%;
background: linear-gradient(0, red, rgba(0, 0, 0, 0)); padding-top: 40%;
} }
.detail-title { .detail-title {
width: 670rpx; width: 670rpx;
min-height: 76rpx; min-height: 76rpx;
margin: 60rpx 40rpx 0 40rpx; margin: 0 40rpx 0 40rpx;
font-size: 54rpx; font-size: 54rpx;
font-weight: bold; font-weight: bold;
color: #FFFFFF; color: #FFFFFF;
......
pages/strategy/strategy.wxss
...@@ -57,6 +57,14 @@ ...@@ -57,6 +57,14 @@
min-width: 100%; min-width: 100%;
} }
rich-text {
margin-bottom: 52rpx;
font-size: 30rpx;
font-weight: 300;
color: #15191F;
line-height: 52rpx;
}
/* 攻略相关 */ /* 攻略相关 */
.relation-title { .relation-title {
margin: 0 40rpx 90rpx 40rpx; margin: 0 40rpx 90rpx 40rpx;
......
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