Skip to content

严立 / mini-shimao

Go to a project
Commit 1f1dc1ea by 严立
Options

LL - 组件更新

parent 0fe839b2
Inline Side-by-side
Showing with 298 additions and 680 deletions
component/m-nav/m-nav.js
import iOption from './option.js'
Component({ Component({
options: { options: {
styleIsolation: 'apply-shared' styleIsolation: 'apply-shared'
...@@ -22,85 +24,6 @@ Component({ ...@@ -22,85 +24,6 @@ Component({
value: '' value: ''
}, },
// 常规样式。
// 如果需要配置新标题样式，请在数组后面追加，避免影响其他页面。
normalStyle: {
type: Array,
value: [{
// 黑字 - 透明背景 转换 黑字 - 白色背景
titleColor: '#000000;',
bgColor: 'rgba(0, 0, 0, 0);',
logo: '',
logoSize: { width: '', height: '' },
}, {
// 黑字 - 白色背景 固定
titleColor: '#000000;',
bgColor: '#FFFFFF;',
logo: '',
logoSize: { width: '', height: '' },
}, {
// 白字 - 透明背景 转换 黑字 - 白色背景
titleColor: '#FFFFFF;',
bgColor: 'rgba(0, 0, 0, 0);',
logo: '',
logoSize: { width: '', height: '' },
}, {
// 白字 - 透明背景 固定
titleColor: '#FFFFFF;',
bgColor: 'rgba(0, 0, 0, 0);',
logo: '',
logoSize: { width: '', height: '' },
}, {
// pages/home/home/home
titleColor: '#000000;',
bgColor: 'rgba(0, 0, 0, 0);',
logo: './image/1-1.png',
logoSize: { width: '200rpx', height: '60rpx' },
}, {
// pages/play/home/home
titleColor: '#000000;',
bgColor: '#FFFFFF;',
logo: './image/2-1.png',
logoSize: { width: '130rpx', height: '126rpx' },
}]
},
// 滚动样式
scrollStyle: {
type: Array,
value: [{
titleColor: '#000000;',
bgColor: '#FFFFFF;',
logo: '',
logoSize: { width: '', height: '' },
}, {
titleColor: '#000000;',
bgColor: '#FFFFFF;',
logo: '',
logoSize: { width: '', height: '' },
}, {
titleColor: '#000000;',
bgColor: '#FFFFFF;',
logo: '',
logoSize: { width: '', height: '' },
}, {
titleColor: '#FFFFFF;',
bgColor: 'rgba(0, 0, 0, 0);',
logo: '',
logoSize: { width: '', height: '' },
}, {
titleColor: 'blue;',
bgColor: '#FFFFFF;',
logo: './image/1-2.png',
logoSize: { width: '200rpx', height: '60rpx' },
}, {
titleColor: '#000000;',
bgColor: '#FFFFFF;',
logo: './image/2-1.png',
logoSize: { width: '130rpx', height: '126rpx' },
}]
},
// 样式索引，如果不想使用变换效果，传值 -1 即可。 // 样式索引，如果不想使用变换效果，传值 -1 即可。
styleIndex: { styleIndex: {
type: Number, type: Number,
...@@ -117,29 +40,36 @@ Component({ ...@@ -117,29 +40,36 @@ Component({
// 滚动达到多少时进行样式替换。 // 滚动达到多少时进行样式替换。
changeHeight: { changeHeight: {
type: String, type: String,
value: '20rpx' value: '50rpx'
}, },
iconBack: { iconBack: {
type: String, type: String,
value: './image/back.png' value: 'null'
}, },
iconHome: { iconHome: {
type: String, type: String,
value: '' value: 'null'
// value: './image/home.png'
}, },
}, },
// 组件内部属性 // 组件内部属性
data: { data: {
// 常规样式。
// 如果需要配置新标题样式，请在数组后面追加，避免影响其他页面。
normal: iOption().normal,
// 滚动样式
scroll: iOption().scroll,
// 当前样式 // 当前样式
currentStyle: { currentStyle: {
statusHeight: 0, statusHeight: 0,
titleHeight: 0, titleHeight: 0,
titleColor: '', titleColor: '',
bgColor: '', bgColor: '',
iconBack: '',
iconHome: '',
logo: '', logo: '',
logoSize: { width: '0px', height: '0px' }, logoSize: { width: '0px', height: '0px' },
}, },
...@@ -220,20 +150,28 @@ Component({ ...@@ -220,20 +150,28 @@ Component({
let funcNavOccupyCss = '' let funcNavOccupyCss = ''
if (!this.data.isScrollChange) { if (!this.data.isScrollChange) {
Object.assign(funcCurrentStyle, { Object.assign(funcCurrentStyle, {
'titleColor': this.data.normalStyle[this.data.styleIndex].titleColor, 'titleColor': this.data.normal[this.data.styleIndex].titleColor,
'bgColor': this.data.normalStyle[this.data.styleIndex].bgColor, 'bgColor': this.data.normal[this.data.styleIndex].bgColor,
'logo': this.data.normalStyle[this.data.styleIndex].logo, 'iconBack': this.data.normal[this.data.styleIndex].iconBack,
'logoSize': this.data.normalStyle[this.data.styleIndex].logoSize 'iconHome': this.data.normal[this.data.styleIndex].iconHome,
'logo': this.data.normal[this.data.styleIndex].logo,
'logoSize': this.data.normal[this.data.styleIndex].logoSize
}) })
} else { } else {
Object.assign(funcCurrentStyle, { Object.assign(funcCurrentStyle, {
'titleColor': this.data.scrollStyle[this.data.styleIndex].titleColor, 'titleColor': this.data.scroll[this.data.styleIndex].titleColor,
'bgColor': this.data.scrollStyle[this.data.styleIndex].bgColor, 'bgColor': this.data.scroll[this.data.styleIndex].bgColor,
'logo': this.data.scrollStyle[this.data.styleIndex].logo, 'iconBack': this.data.scroll[this.data.styleIndex].iconBack,
'logoSize': this.data.scrollStyle[this.data.styleIndex].logoSize 'iconHome': this.data.scroll[this.data.styleIndex].iconHome,
'logo': this.data.scroll[this.data.styleIndex].logo,
'logoSize': this.data.scroll[this.data.styleIndex].logoSize
}) })
} }
// 如果传参有图标则使用传参图标
if (this.data.iconBack !== 'null') funcCurrentStyle.iconBack = this.data.iconBack
if (this.data.iconHome !== 'null') funcCurrentStyle.iconBack = this.data.iconHome
// 设置占用元素高度。 // 设置占用元素高度。
if (this.data.isOccupy) { if (this.data.isOccupy) {
funcNavOccupyCss = { funcNavOccupyCss = {
......
component/m-nav/m-nav.wxml
...@@ -10,8 +10,8 @@ ...@@ -10,8 +10,8 @@
<!-- 返回，主页按钮 --> <!-- 返回，主页按钮 -->
<view class="m-title-operation row ac" style="{{titleCss}}" wx:if="{{!winLogo}}"> <view class="m-title-operation row ac" style="{{titleCss}}" wx:if="{{!winLogo}}">
<image class="m-title-operation-back" wx:if="{{iconBack}}" src="{{iconBack}}" bindtap='onBack'></image> <image class="m-title-operation-back" wx:if="{{currentStyle.iconBack}}" src="{{currentStyle.iconBack}}" bindtap='onBack'></image>
<image class="m-title-operation-home" wx:if="{{iconHome}}" src="{{iconHome}}" bindtap='onHome'></image> <image class="m-title-operation-home" wx:if="{{currentStyle.iconHome}}" src="{{currentStyle.iconHome}}" bindtap='onHome'></image>
</view> </view>
<view class="row cc ac" wx:if="{{titleText && !titleImg}}"> <view class="row cc ac" wx:if="{{titleText && !titleImg}}">
<text class="m-title-text">{{titleText}}</text> <text class="m-title-text">{{titleText}}</text>
......
component/m-nav/option.js 0 → 100644
// 增加新的标题样式请在数组末尾添加，避免影响其他页面显示。
let styleOption = [
{
// 黑字 - 透明背景 转换 黑字 - 白色背景
'normal': { titleColor: '#000000;', bgColor: 'rgba(255, 255, 255, 0);', iconBack: './image/back-1.png', iconHome: '', logo: '', logoSize: { width: '', height: '' } },
'scroll': { titleColor: '#000000;', bgColor: 'rgba(255, 255, 255, 1);', iconBack: './image/back-1.png', iconHome: '', logo: '', logoSize: { width: '', height: '' } }
}, {
// 黑字 - 白色背景 固定
'normal': { titleColor: '#000000;', bgColor: 'rgba(255, 255, 255, 1);', iconBack: './image/back-1.png', iconHome: '', logo: '', logoSize: { width: '', height: '' } },
'scroll': { titleColor: '#000000;', bgColor: 'rgba(255, 255, 255, 1);', iconBack: './image/back-1.png', iconHome: '', logo: '', logoSize: { width: '', height: '' } }
}, {
// 白字 - 透明背景 转换 黑字 - 白色背景
'normal': { titleColor: '#FFFFFF;', bgColor: 'rgba(255, 255, 255, 0);', iconBack: './image/back-3.png', iconHome: '', logo: '', logoSize: { width: '', height: '' } },
'scroll': { titleColor: '#000000;', bgColor: 'rgba(255, 255, 255, 1);', iconBack: './image/back-1.png', iconHome: '', logo: '', logoSize: { width: '', height: '' } }
}, {
// 白字 - 透明背景 固定
'normal': { titleColor: '#FFFFFF;', bgColor: 'rgba(255, 255, 255, 0);', iconBack: './image/back-3.png', iconHome: '', logo: '', logoSize: { width: '', height: '' } },
'scroll': { titleColor: '#000000;', bgColor: 'rgba(255, 255, 255, 0);', iconBack: './image/back-3.png', iconHome: '', logo: '', logoSize: { width: '', height: '' } }
}, {
// pages/home/home/home
'normal': { titleColor: '#000000;', bgColor: 'rgba(255, 255, 255, 0);', iconBack: '', iconHome: '', logo: './image/1-1.png', logoSize: { width: '200rpx', height: '60rpx' } },
'scroll': { titleColor: '#000000;', bgColor: 'rgba(255, 255, 255, 1);', iconBack: '', iconHome: '', logo: './image/1-2.png', logoSize: { width: '200rpx', height: '60rpx' } },
}, {
// pages/play/home/home
'normal': { titleColor: '#000000;', bgColor: 'rgba(255, 255, 255, 1);', iconBack: '', iconHome: '', logo: './image/2-1.png', logoSize: { width: '130rpx', height: '126rpx' } },
'scroll': { titleColor: '#000000;', bgColor: 'rgba(255, 255, 255, 1);', iconBack: '', iconHome: '', logo: './image/2-1.png', logoSize: { width: '130rpx', height: '126rpx' } },
}, {
// 白字 - 透明背景 转换 白字 - 藏青背景 - 1
'normal': { titleColor: '#FFFFFF;', bgColor: 'rgba(39, 39, 52, 0);', iconBack: './image/back-3.png', iconHome: '', logo: '', logo: '', logoSize: { width: '', height: '' } },
'scroll': { titleColor: '#FFFFFF;', bgColor: 'rgba(39, 39, 52, 1);', iconBack: './image/back-3.png', iconHome: '', logo: '', logo: '', logoSize: { width: '', height: '' } },
}, {
// 白字 - 藏青背景 固定
'normal': { titleColor: '#FFFFFF;', bgColor: 'rgba(28, 28, 37, 1);', iconBack: './image/back-3.png', iconHome: '', logo: '', logo: '', logoSize: { width: '', height: '' } },
'scroll': { titleColor: '#FFFFFF;', bgColor: 'rgba(28, 28, 37, 1);', iconBack: './image/back-3.png', iconHome: '', logo: '', logo: '', logoSize: { width: '', height: '' } },
}, {
// 白字 - 透明背景 转换 白字 - 藏青背景 - 2
'normal': { titleColor: '#FFFFFF;', bgColor: 'rgba(28, 28, 37, 0);', iconBack: './image/back-3.png', iconHome: '', logo: '', logo: '', logoSize: { width: '', height: '' } },
'scroll': { titleColor: '#FFFFFF;', bgColor: 'rgba(28, 28, 37, 1);', iconBack: './image/back-3.png', iconHome: '', logo: '', logo: '', logoSize: { width: '', height: '' } },
},
]
let output = function () {
let funcNormal = []
let fcunScroll = []
for (let i = 0, l = styleOption.length; i < l; i++) {
funcNormal.push(styleOption[i].normal)
fcunScroll.push(styleOption[i].scroll)
}
return { 'normal': funcNormal, 'scroll': fcunScroll }
}
export default output
\ No newline at end of file
pages/campsite/home-mirror/home-mirror.js
...@@ -104,7 +104,6 @@ Page({ ...@@ -104,7 +104,6 @@ Page({
}, },
success: function(res) { success: function(res) {
let funcData = res.data.list let funcData = res.data.list
console.log(funcData)
that.setData({ that.setData({
childActivity: funcData childActivity: funcData
}) })
......
pages/commodity/home/home.js
const App = getApp() let App = getApp()
let logicData = {
pageScrollLock: false,
pageScrollTimer: 0,
}
Page({ Page({
data: { data: {
...@@ -27,22 +22,6 @@ Page({ ...@@ -27,22 +22,6 @@ Page({
shopRecommendD: [], // 底部第二商店推荐 shopRecommendD: [], // 底部第二商店推荐
banner: [], banner: [],
// 导航栏相关属性
navigationStyle: {
normal: {
backIcon: '',
color: 'rgba(255, 255, 255, 0)',
background: 'rgba(255, 255, 255, 0)'
},
change: {
backIcon: '',
color: '#000000',
background: 'rgba(255, 255, 255, 1)'
},
scroll: '200rpx',
},
navigationScroll: 0,
}, },
onLoad: function (option) { onLoad: function (option) {
...@@ -508,20 +487,14 @@ Page({ ...@@ -508,20 +487,14 @@ Page({
hotline: false, hotline: false,
}) })
}, },
onPageScroll: function(funcEvent) {
// console.log(funcEvent)
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
this.setData({ /**
navigationScroll: funcEvent.scrollTop * 页面滚动事件
}) * @function
* @param {object} - funcEvent
// 恢复滚动事件 * @returns
logicData.pageScrollTimer = setTimeout(function() { */
logicData.pageScrollLock = false onPageScroll: function (funcEvent) {
clearTimeout(logicData.pageScrollTimer) App.pageScroll(funcEvent, this)
}, 10)
}, },
}) })
\ No newline at end of file
pages/commodity/home/home.wxml
<navigation class="navigation" titleText="服务" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation> <m-nav titleText="服务" scrollHeight="{{navScroll}}" styleIndex="{{2}}" isOccupy="{{false}}" iconBack=""></m-nav>
<view class="container"> <view class="container">
<block wx:if="{{!appStatus}}"> <block wx:if="{{!appStatus}}">
......
pages/commodity/menu-food/menu-food.js
...@@ -21,7 +21,6 @@ Page({ ...@@ -21,7 +21,6 @@ Page({
sideBar: [], // 侧边菜单 sideBar: [], // 侧边菜单
sideBarHeight: [], // 分类商品起始高度 sideBarHeight: [], // 分类商品起始高度
sideBarTopPadding: 0,
sideBarIndex: 0, sideBarIndex: 0,
commoditScroll: 0, commoditScroll: 0,
...@@ -30,8 +29,6 @@ Page({ ...@@ -30,8 +29,6 @@ Page({
shoppingCart: [], // 购物车列表 shoppingCart: [], // 购物车列表
shoppingCartTotal: 0, // 购物车总数 shoppingCartTotal: 0, // 购物车总数
winToast: false,
winLoading: false,
winCommodityDetail: false, winCommodityDetail: false,
}, },
...@@ -40,7 +37,6 @@ Page({ ...@@ -40,7 +37,6 @@ Page({
option: option option: option
}) })
this.setSideBarStyle()
this.resetShoppingCart() this.resetShoppingCart()
}, },
...@@ -60,12 +56,6 @@ Page({ ...@@ -60,12 +56,6 @@ Page({
} }
}, },
setSideBarStyle: function () {
this.setData({
sideBarTopPadding: wx.getStorageSync('navigationStatusHeight') + wx.getStorageSync('navigationCapsuleHeight')
})
},
/** /**
* 添加动画初始 * 添加动画初始
* @function * @function
...@@ -202,9 +192,12 @@ Page({ ...@@ -202,9 +192,12 @@ Page({
* @returns * @returns
*/ */
queryCommodity: function () { queryCommodity: function () {
this.setData({ App.ui.showToast({
winLoading: true iconType: 'loading',
title: '加载中...',
duration: 30000
}) })
App.wxRequest({ App.wxRequest({
url: '/api/v1/commodity/getCommoditys', url: '/api/v1/commodity/getCommoditys',
data: { data: {
...@@ -307,11 +300,12 @@ Page({ ...@@ -307,11 +300,12 @@ Page({
} }
this.setData({ this.setData({
winLoading: false,
sideBar: funcSideBarId, sideBar: funcSideBarId,
commodityList: funcList, commodityList: funcList,
}) })
App.ui.hideToast()
// 获取商品分类高度，用于判断滚动位置自动选择标签 // 获取商品分类高度，用于判断滚动位置自动选择标签
const funcQuery = wx.createSelectorQuery() const funcQuery = wx.createSelectorQuery()
funcQuery.selectAll('.menu-list-title').boundingClientRect() funcQuery.selectAll('.menu-list-title').boundingClientRect()
...@@ -471,7 +465,6 @@ Page({ ...@@ -471,7 +465,6 @@ Page({
let funcShoppingCart = this.data.shoppingCart let funcShoppingCart = this.data.shoppingCart
let funcWinToastNothing = false
// 详情加入购物车按钮商品数据不会存在于 event 对象中，所以要区分 // 详情加入购物车按钮商品数据不会存在于 event 对象中，所以要区分
let funcWinToast = true let funcWinToast = true
let funcItem = event.currentTarget.dataset.item let funcItem = event.currentTarget.dataset.item
...@@ -488,7 +481,11 @@ Page({ ...@@ -488,7 +481,11 @@ Page({
if (funcShoppingCart[i].quantity < funcShoppingCart[i].quantityMax) { if (funcShoppingCart[i].quantity < funcShoppingCart[i].quantityMax) {
funcShoppingCart[i].quantity = funcShoppingCart[i].quantity + 1 funcShoppingCart[i].quantity = funcShoppingCart[i].quantity + 1
} else { } else {
funcWinToastNothing = true App.ui.showToast({
iconType: 'error',
title: '没有更多商品了',
duration: 500
})
funcWinToast = false funcWinToast = false
} }
break break
...@@ -512,11 +509,17 @@ Page({ ...@@ -512,11 +509,17 @@ Page({
this.setData({ this.setData({
shoppingCart: funcShoppingCart, shoppingCart: funcShoppingCart,
winToast: funcWinToast,
winToastNothing: funcWinToastNothing,
winCommodityDetail: false, winCommodityDetail: false,
}) })
if (funcWinToast) {
App.ui.showToast({
iconType: 'success',
title: '添加购物车成功',
duration: 500
})
}
// 重新计算购物车数量 // 重新计算购物车数量
this.selectionTotal() this.selectionTotal()
}, },
......
pages/commodity/menu-food/menu-food.wxml
<l-toast <m-toast></m-toast>
l-image-class="toast-image" <m-nav titleText="{{shopInfo.name}}"></m-nav>
l-class="toast-bg"
show="{{winToast}}"
image="/image/success.png"
title="添加购物车成功"
duration="400"
></l-toast>
<l-toast show="{{winToastNothing}}" icon="error" title="没有更多商品了" duration="400"></l-toast>
<l-toast
show="{{winLoading}}"
icon="loading"
title="加载中"
duration="20000"
mask="{{true}}"
></l-toast>
<navigation class="navigation" titleText="{{shopInfo.name}}" background="#FFFFFF;" backIcon="/image/back.png"></navigation>
<view class="row"> <view class="row">
<!-- 侧边菜单 --> <!-- 侧边菜单 -->
<scroll-view class="side-bar" scroll-y style="{{'padding-top: ' + sideBarTopPadding + 'px;'}}"> <scroll-view class="side-bar" scroll-y>
<block wx:for="{{sideBar}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <block wx:for="{{sideBar}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="menu-item {{sideBarIndex === index ? 'active' : ''}}" data-index="{{index}}" bindtap="onSelectionSideBar"> <view class="menu-item {{sideBarIndex === index ? 'active' : ''}}" data-index="{{index}}" bindtap="onSelectionSideBar">
<text>{{item.tab}}</text> <text>{{item.tab}}</text>
...@@ -30,7 +12,7 @@ ...@@ -30,7 +12,7 @@
</scroll-view> </scroll-view>
<!-- 商品列表 --> <!-- 商品列表 -->
<scroll-view class="menu-list" scroll-y style="{{'padding-top: ' + sideBarTopPadding + 'px;'}}" scroll-top="{{commoditScroll}}" bindscroll="onCommoditScroll"> <scroll-view class="menu-list" scroll-y scroll-top="{{commoditScroll}}" bindscroll="onCommoditScroll">
<block wx:for="{{commodityList}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <block wx:for="{{commodityList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<!-- 此处类名关联 js 逻辑标签高度判定，需要统一修改 --> <!-- 此处类名关联 js 逻辑标签高度判定，需要统一修改 -->
<view class="menu-list-title">{{item.tab}}</view> <view class="menu-list-title">{{item.tab}}</view>
...@@ -40,8 +22,8 @@ ...@@ -40,8 +22,8 @@
<view class="commodity-item row" data-item="{{itemCommodity}}" bind:tap="onCommodityDetail"> <view class="commodity-item row" data-item="{{itemCommodity}}" bind:tap="onCommodityDetail">
<view class="item-img"> <view class="item-img">
<!-- 暂时屏蔽图片下载 --> <!-- 暂时屏蔽图片下载 -->
<image src="{{itemCommodity.cover}}" mode="aspectFill"></image> <!-- <image src="{{itemCommodity.cover}}" mode="aspectFill"></image> -->
<!-- <image src="" mode="aspectFill"></image> --> <image src="" mode="aspectFill"></image>
</view> </view>
<view class="item-info"> <view class="item-info">
<view class="item-info-title">{{itemCommodity.name}}</view> <view class="item-info-title">{{itemCommodity.name}}</view>
......
pages/commodity/menu-food/menu-food.wxss
...@@ -2,14 +2,6 @@ page { ...@@ -2,14 +2,6 @@ page {
overflow: hidden; overflow: hidden;
} }
.navigation {
z-index: 1100;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
.side-bar { .side-bar {
width: 160rpx; width: 160rpx;
height: 100vh; height: 100vh;
...@@ -80,7 +72,8 @@ page { ...@@ -80,7 +72,8 @@ page {
background-color: #fff; background-color: #fff;
} }
.cart-img-wrap { .cart-img-wrap,
.cart-img-wrap > image {
width: 48rpx; width: 48rpx;
height: 48rpx; height: 48rpx;
} }
...@@ -341,29 +334,12 @@ page { ...@@ -341,29 +334,12 @@ page {
border-radius: 50%; border-radius: 50%;
} }
.popup-close { .popup-close,
.popup-close > image {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
} }
.toast-bg {
min-width: 262rpx !important;
min-height: 262prx !important;
}
.toast-image {
z-index: 1900;
}
image {
width: 100%;
height: 100%;
}
/* 商品详情样式 */ /* 商品详情样式 */
.banner { .banner {
position: relative; position: relative;
......
pages/commodity/project-detail/project-detail.js
...@@ -60,7 +60,7 @@ Page({ ...@@ -60,7 +60,7 @@ Page({
navbarTitle: '儿童营地入园购票', navbarTitle: '儿童营地入园购票',
banner: 'service/detail-banner-3.png', banner: 'service/detail-banner-3.png',
bgColor: '#F6DADA', bgColor: '#F6DADA',
buyText: '暂未开售', buyText: '购买门票',
unitText: '/人', unitText: '/人',
commodityList: [] commodityList: []
}) })
...@@ -334,7 +334,7 @@ Page({ ...@@ -334,7 +334,7 @@ Page({
* @returns * @returns
*/ */
onBuy: function (event) { onBuy: function (event) {
if (this.data.shopInfo.appId === 3) return // if (this.data.shopInfo.appId === 3) return
if (this.data.shopInfo.appId === 7) { if (this.data.shopInfo.appId === 7) {
this.onCommodityDetail(event) this.onCommodityDetail(event)
......
pages/commodity/shopping-cart/shopping-cart.js
...@@ -16,7 +16,6 @@ Page({ ...@@ -16,7 +16,6 @@ Page({
amountPay: 0, // 支付金额 amountPay: 0, // 支付金额
amountDiscount: 0, // 优惠金额 amountDiscount: 0, // 优惠金额
winToast: false,
isIphoneX: '', //判断是否为iphonex isIphoneX: '', //判断是否为iphonex
sideBarTopPadding: 0, sideBarTopPadding: 0,
...@@ -300,8 +299,10 @@ Page({ ...@@ -300,8 +299,10 @@ Page({
// 检查购物车是否拥有商品 // 检查购物车是否拥有商品
let funcShoppingCart = this.data.shoppingCart let funcShoppingCart = this.data.shoppingCart
if (funcShoppingCart.length === 0) { if (funcShoppingCart.length === 0) {
this.setData({ App.ui.showToast({
winToast: true iconType: 'error',
title: '请选购商品后结算',
duration: 30000
}) })
return return
} }
...@@ -314,8 +315,10 @@ Page({ ...@@ -314,8 +315,10 @@ Page({
} }
} }
if (!funcIsSelection) { if (!funcIsSelection) {
this.setData({ App.ui.showToast({
winToast: true iconType: 'error',
title: '请选购商品后结算',
duration: 30000
}) })
return return
} }
......
pages/commodity/shopping-cart/shopping-cart.wxml
<navigation class="navigation" titleText="购物车" background="#FFFFFF;" backIcon="/image/back.png"></navigation> <m-toast></m-toast>
<m-nav titleText="购物车"></m-nav>
<l-toast show="{{winToast}}" icon="error" title="请选购商品后结算"></l-toast>
<view class="container" wx:if="{{shoppingCart.length > 0}}" style="{{'margin-top: ' + sideBarTopPadding + 'px;'}}"> <view class="container" wx:if="{{shoppingCart.length > 0}}" style="{{'margin-top: ' + sideBarTopPadding + 'px;'}}">
<view class="shop-info row con-b align-c"> <view class="shop-info row con-b align-c">
......
pages/home/dynamic-detail/dynamic-detail.js
const app = getApp() const App = getApp()
Page({ Page({
data: { data: {
navScroll: 0,
notice: {}, notice: {},
// 接口参数 // 接口参数
id: '', id: '',
...@@ -17,7 +18,7 @@ Page({ ...@@ -17,7 +18,7 @@ Page({
// 最新动态详情 // 最新动态详情
getNoticeDetail() { getNoticeDetail() {
var that = this var that = this
app.wxRequest({ App.wxRequest({
url: '/api/v1/dynamic/getDetail', url: '/api/v1/dynamic/getDetail',
data: { id: that.data.id }, data: { id: that.data.id },
success: function (res) { success: function (res) {
...@@ -36,5 +37,16 @@ Page({ ...@@ -36,5 +37,16 @@ Page({
}) })
} }
}) })
} },
/**
* 页面滚动事件
* @function
* @param {object} - funcEvent
* @returns
*/
onPageScroll: function (funcEvent) {
App.pageScroll(funcEvent, this)
},
}) })
\ No newline at end of file
pages/home/dynamic-detail/dynamic-detail.wxml
<m-nav titleText="动态详情"></m-nav> <m-nav titleText="动态详情" scrollHeight="{{navScroll}}" changeHeight="10rpx"></m-nav>
<view class="container"> <view class="container">
<view class="title row con-s"> <view class="title row con-s">
......
pages/home/night-appointment/night-appointment.js
...@@ -10,6 +10,8 @@ Page({ ...@@ -10,6 +10,8 @@ Page({
imageBase: App.globalData.appImageBase, imageBase: App.globalData.appImageBase,
resourcesBase: App.globalData.appResourcesBase, resourcesBase: App.globalData.appResourcesBase,
navScroll: 0,
appointmentDate: '', appointmentDate: '',
appointmentEndDate: '', appointmentEndDate: '',
appointmentComplete: false, appointmentComplete: false,
...@@ -34,18 +36,17 @@ Page({ ...@@ -34,18 +36,17 @@ Page({
// 导航栏相关属性 // 导航栏相关属性
navigationStyle: { navigationStyle: {
normal: { normal: {
backIcon: '/image/icon/arrow-l-2.png', backiconType: '/image/icon/arrow-l-2.png',
color: '#FFFFFF', color: '#FFFFFF',
background: 'rgba(255, 255, 255, 0)' background: 'rgba(255, 255, 255, 0)'
}, },
change: { change: {
backIcon: '/image/icon/arrow-l-1.png', backiconType: '/image/icon/arrow-l-1.png',
color: '#000000', color: '#000000',
background: 'rgba(255, 255, 255, 1)' background: 'rgba(255, 255, 255, 1)'
}, },
scroll: '200rpx', scroll: '200rpx',
}, },
navigationScroll: 0,
}, },
onLoad: function (options) { onLoad: function (options) {
...@@ -240,13 +241,10 @@ Page({ ...@@ -240,13 +241,10 @@ Page({
if (!this.inspectForm()) { if (!this.inspectForm()) {
return return
} }
App.ui.showToast({
wx.lin.showToast({ iconType: 'loading',
icon: 'loading',
title: '提交中', title: '提交中',
show: true, duration: 60000,
mask: true,
duration: 1000 * 60,
}) })
App.wxRequest({ App.wxRequest({
url: '/api/v1/subscribe/doSubscribe', url: '/api/v1/subscribe/doSubscribe',
...@@ -258,10 +256,9 @@ Page({ ...@@ -258,10 +256,9 @@ Page({
type: 0, type: 0,
}, },
success: (res) => { success: (res) => {
if (res.data && res.data.code == 500) { if (res.data && res.data.code == 500) {
wx.lin.showToast({ App.ui.showToast({
image: '/image/error.png', iconType: 'error',
title: res.data.msg, title: res.data.msg,
}) })
...@@ -269,13 +266,12 @@ Page({ ...@@ -269,13 +266,12 @@ Page({
this.setData({ this.setData({
appointmentComplete: true, appointmentComplete: true,
}) })
wx.lin.hideToast() App.ui.hideToast()
} }
}, },
fail: (err) => { fail: (err) => {
wx.lin.showToast({ App.ui.showToast({
image: '/image/error.png', iconType: 'error',
title: err.msg, title: err.msg,
}) })
} }
...@@ -320,20 +316,14 @@ Page({ ...@@ -320,20 +316,14 @@ Page({
console.log(d) //格式为---Sat Feb 16 2019 08:00:00 GMT+0800 (中国标准时间) console.log(d) //格式为---Sat Feb 16 2019 08:00:00 GMT+0800 (中国标准时间)
return App.modular.miment(new Date(d)).format("YYYY-MM-DD") //格式为"2019-02-16 00:00:00" return App.modular.miment(new Date(d)).format("YYYY-MM-DD") //格式为"2019-02-16 00:00:00"
}, },
onPageScroll: function(funcEvent) {
// console.log(funcEvent)
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
this.setData({
navigationScroll: funcEvent.scrollTop
})
// 恢复滚动事件 /**
logicData.pageScrollTimer = setTimeout(function() { * 页面滚动事件
logicData.pageScrollLock = false * @function
clearTimeout(logicData.pageScrollTimer) * @param {object} - funcEvent
}, 10) * @returns
*/
onPageScroll: function (funcEvent) {
App.pageScroll(funcEvent, this)
}, },
}) })
\ No newline at end of file
pages/home/night-appointment/night-appointment.wxml
<l-toast l-image-class="toast-image"></l-toast> <m-toast></m-toast>
<!-- 首页 - 入园预约 / 房屋预约 --> <m-nav titleText="夜间入园预约" scrollHeight="{{navScroll}}" changeHeight="10rpx" styleIndex="{{2}}" isOccupy="{{false}}"></m-nav>
<navigation class="navigation" titleText="夜间入园预约" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation>
<view class="appointment-complete row con-c align-c" wx:if="{{appointmentComplete}}"> <view class="appointment-complete row con-c align-c" wx:if="{{appointmentComplete}}">
<view class="appointment-complete-tip"> <view class="appointment-complete-tip">
......
pages/home/night-appointment/night-appointment.wxss
.navigation {
z-index: 1900;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
/* 预约完成 */ /* 预约完成 */
.appointment-complete { .appointment-complete {
z-index: 1900; z-index: 1900;
......
pages/play/activity-detail/activity-detail.js
const App = getApp() let App = getApp()
let logicData = {
pageScrollLock: false,
pageScrollTimer: 0,
}
Page({ Page({
data: { data: {
// 导航栏相关属性
navigationStyle: {
normal: {
backIcon: '/image/back-w.png',
color: '#FFFFFF',
background: 'rgba(255, 255, 255, 0)'
},
change: {
backIcon: '/image/back.png',
color: '#000000',
background: 'rgba(255, 255, 255, 1)'
},
scroll: '600rpx',
},
navigationScroll: 0,
// banner 列表数据 // banner 列表数据
banner: [], banner: [],
bannerIndex: 0, bannerIndex: 0,
...@@ -156,20 +135,13 @@ Page({ ...@@ -156,20 +135,13 @@ Page({
}) })
}, },
/**
* 页面滚动事件
* @function
* @param {object} - funcEvent
* @returns
*/
onPageScroll: function (funcEvent) { onPageScroll: function (funcEvent) {
// console.log(funcEvent) App.pageScroll(funcEvent, this)
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
this.setData({
navigationScroll: funcEvent.scrollTop
})
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 10)
}, },
}) })
\ No newline at end of file
pages/play/activity-detail/activity-detail.wxml
<navigation class="navigation" titleText="主题活动" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation> <m-nav titleText="主题活动" scrollHeight="{{navScroll}}" changeHeight="50rpx" styleIndex="{{2}}" isOccupy="{{false}}"></m-nav>
<view class="container"> <view class="container">
<view id="banner" class="banner"> <view id="banner" class="banner">
......
pages/play/activity-detail/activity-detail.wxss
.navigation {
z-index: 1900;
position: fixed;
top: 0;
left: 0;
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: 1;
position: relative; position: relative;
width: 750rpx; width: 750rpx;
height: 800rpx; height: 800rpx;
...@@ -40,7 +23,7 @@ ...@@ -40,7 +23,7 @@
} }
.banner-wave { .banner-wave {
z-index: 1100; z-index: 2;
position: relative; position: relative;
top: 740rpx; top: 740rpx;
left: 0; left: 0;
......
pages/play/activity/activity.js
...@@ -8,9 +8,11 @@ let logicData = { ...@@ -8,9 +8,11 @@ let logicData = {
Page({ Page({
data: { data: {
imageBase: App.globalData.appImageBase, imageBase: App.globalData.appImageBase,
navScroll: 0,
navHeight: 0,
classHeight: 0,
statusTop: '',
statusFixed: false,
statusActive: 0, statusActive: 0,
statusList: [ statusList: [
{ {
...@@ -18,19 +20,17 @@ Page({ ...@@ -18,19 +20,17 @@ Page({
name: '全部' name: '全部'
} }
], ],
navigationTitle: '主题活动',
activity: [], activity: [],
selectedActivity: [], selectedActivity: [],
other: [], other: [],
selectedOther: [], selectedOther: [],
shopInfo: {}, shopInfo: {},
options: {} options: {},
}, },
onLoad: function (options) { onLoad: function (options) {
if (options.fromPage === 'serviceDetail') { if (options.fromPage === 'serviceDetail') {
let shopInfo = wx.getStorageSync('shopInfoBuffer') let shopInfo = wx.getStorageSync('shopInfoBuffer')
console.log(shopInfo)
this.setData({ this.setData({
options: options, options: options,
shopInfo: shopInfo shopInfo: shopInfo
...@@ -39,31 +39,19 @@ Page({ ...@@ -39,31 +39,19 @@ Page({
this.getActivityList(1) this.getActivityList(1)
this.getActivityList(0) this.getActivityList(0)
this.setData({ this.setData({
statusTop: wx.getStorageSync('navigationStatusHeight') + wx.getStorageSync('navigationCapsuleHeight') - 40 + 'rpx' navHeight: wx.getStorageSync('navStatusHeight') + wx.getStorageSync('navTitleHeight'),
classHeight: 94 * wx.getStorageSync('unitProportion')
}) })
}, },
onPageScroll: function (funcEvent) {
// console.log(funcEvent)
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
if (funcEvent.scrollTop > 10) { /**
this.setData({ * 页面滚动事件
statusFixed: true, * @function
statusTop: wx.getStorageSync('navigationStatusHeight') + wx.getStorageSync('navigationCapsuleHeight') + 'px' * @param {object} - funcEvent
}) * @returns
} else { */
this.setData({ onPageScroll: function (funcEvent) {
statusFixed: false, App.pageScroll(funcEvent, this)
statusTop: wx.getStorageSync('navigationStatusHeight') + wx.getStorageSync('navigationCapsuleHeight') - 40 + 'rpx'
})
}
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 10)
}, },
//主题活动列表 type 1 近期 0 往期 //主题活动列表 type 1 近期 0 往期
...@@ -84,7 +72,6 @@ Page({ ...@@ -84,7 +72,6 @@ Page({
success: function (res) { success: function (res) {
let tmpArr = []; let tmpArr = [];
let funcData = res.data.list let funcData = res.data.list
console.log(funcData)
funcData.forEach(item => { funcData.forEach(item => {
let tmpItem = { let tmpItem = {
id: item.id, id: item.id,
......
pages/play/activity/activity.wxml
<!-- 畅玩 - 活动列表 --> <m-nav titleText="主题活动" scrollHeight="{{navScroll}}" styleIndex="{{1}}"></m-nav>
<navigation class="navigation" titleText="{{navigationTitle}}" background="#ffffff" backIcon="/image/back.png"></navigation>
<view class="container con-s"> <view class="status row align-c" style="{{'top: ' + navHeight + 'px'}}" wx:if="{{!options.fromPage}}">
<!-- 活动类别 -->
<view class="status row align-c {{statusFixed ? 'status-fixed' : ''}}" style="{{statusFixed ? 'top: ' + (statusTop) : 'margin-top: ' + (statusTop)}}" wx:if="{{!options.fromPage}}">
<block wx:for="{{statusList}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <block wx:for="{{statusList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="status-item row con-c align-c" data-index="{{index}}" bindtap="onSelectionStatus"> <view class="status-item row con-c align-c" data-index="{{index}}" bindtap="onSelectionStatus">
<view class="row con-c align-c {{index === statusActive ? 'status-item-active' : ''}}"> <view class="row con-c align-c {{index === statusActive ? 'status-item-active' : ''}}">
...@@ -11,7 +8,9 @@ ...@@ -11,7 +8,9 @@
</view> </view>
</view> </view>
</block> </block>
</view> </view>
<view class="container con-s" style="{{'margin-top: ' + classHeight + 'px;'}}">
<block wx:if="{{activity.length > 0}}"> <block wx:if="{{activity.length > 0}}">
<view class="list"> <view class="list">
<block wx:for="{{selectedActivity}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <block wx:for="{{selectedActivity}}" wx:for-index="index" wx:for-item="item" wx:key="index">
......
pages/play/activity/activity.wxss
.navigation {
position: fixed;
top: 0;
left: 0;
}
.container { .container {
min-height: 100vh; min-height: 100vh;
margin-top: 120rpx;
padding-bottom: 100rpx; padding-bottom: 100rpx;
background: linear-gradient(180deg, #FFFFFF 0%, #F3F4F6 6%, #F3F4F6 100%); background: linear-gradient(180deg, #FFFFFF 0%, #F3F4F6 6%, #F3F4F6 100%);
} }
/* 状态筛选菜单 */ /* 状态筛选菜单 */
.status { .status {
z-index: 2;
position: fixed;
left: 0;
width: 750rpx; width: 750rpx;
padding: 0 40rpx; padding: 0 40rpx;
border-bottom: 0.5px #e2e7ef solid; border-bottom: 0.5px #e2e7ef solid;
...@@ -22,12 +17,6 @@ ...@@ -22,12 +17,6 @@
background-color: #fff; background-color: #fff;
} }
.status-fixed {
z-index: 999;
position: fixed;
left: 0;
}
.status-item { .status-item {
height: 94rpx; height: 94rpx;
margin-right: 80rpx; margin-right: 80rpx;
......
pages/play/home/home.js
...@@ -280,8 +280,6 @@ Page({ ...@@ -280,8 +280,6 @@ Page({
this.setData({ this.setData({
touristRouteList: funcTouristRouteList touristRouteList: funcTouristRouteList
}) })
console.log(this.data.touristRouteList)
}, },
fail: (err) => { fail: (err) => {
......
pages/play/movie-detail/movie-detail.js
let App = getApp() let App = getApp()
let logicData = {
pageScrollLock: false,
pageScrollTimer: 0,
}
Page({ Page({
data: { data: {
bannerIndex: 0, bannerIndex: 0,
...@@ -14,43 +9,22 @@ Page({ ...@@ -14,43 +9,22 @@ Page({
statusList: [], statusList: [],
movieInfo: {}, movieInfo: {},
showList: {}, showList: {},
// 导航栏相关属性
navigationStyle: {
normal: {
backIcon: '/image/back-w.png',
color: '#FFFFFF',
background: 'rgba(255, 255, 255, 0)'
},
change: {
backIcon: '/image/back-w.png',
color: '#ffffff',
background: 'rgba(28, 28, 37, 1)'
},
scroll: '200rpx',
},
navigationScroll: 0,
}, },
onLoad: function (options) { onLoad: function (options) {
let activityId = options.id let activityId = options.id
this.queryDetail(activityId) this.queryDetail(activityId)
}, },
onPageScroll: function (funcEvent) {
// console.log(funcEvent)
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
this.setData({
navigationScroll: funcEvent.scrollTop
})
// 恢复滚动事件 /**
logicData.pageScrollTimer = setTimeout(function () { * 页面滚动事件
logicData.pageScrollLock = false * @function
clearTimeout(logicData.pageScrollTimer) * @param {object} - funcEvent
}, 10) * @returns
*/
onPageScroll: function (funcEvent) {
App.pageScroll(funcEvent, this)
}, },
// 选择标签页日期 // 选择标签页日期
onSelectionStatus: function (event) { onSelectionStatus: function (event) {
console.log(event.currentTarget.dataset.type) console.log(event.currentTarget.dataset.type)
......
pages/play/movie-detail/movie-detail.wxml
<navigation class="navigation" titleText="{{movieInfo.filmName}}" color="#ffffff" backIcon="/image/back-w.png" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation> <m-nav titleText="{{movieInfo.filmName}}" scrollHeight="{{navScroll}}" changeHeight="50rpx" styleIndex="{{8}}" isOccupy="{{false}}"></m-nav>
<view class="container"> <view class="container">
<!-- 顶部轮播图 --> <!-- 顶部轮播图 -->
......
pages/play/movie-detail/movie-detail.wxss
page { page {
background: #1C1C25; background: #1C1C25;
} }
.navigation {
z-index: 2000;
}
.banner { .banner {
z-index: 9; z-index: 1;
position: relative; position: relative;
width: 750rpx; width: 750rpx;
height: 814rpx; height: 814rpx;
......
pages/play/movie/movie.js
let App = getApp() let App = getApp()
let logicData = {
pageScrollLock: false,
pageScrollTimer: 0,
}
Page({ Page({
data: { data: {
resourcesBase: App.globalData.appResourcesBase, resourcesBase: App.globalData.appResourcesBase,
navHeight: 0,
classHeight: 0,
// 请求参数 // 请求参数
queryParams: { queryParams: {
pageNo: '1', pageNo: '1',
...@@ -21,21 +21,6 @@ Page({ ...@@ -21,21 +21,6 @@ Page({
windowHeight: 0, windowHeight: 0,
// 底部图片是否固定 // 底部图片是否固定
footerFixed: true, footerFixed: true,
// 导航栏相关属性
navigationStyle: {
normal: {
backIcon: '/image/back-w.png',
color: '#FFFFFF',
background: 'rgba(255, 255, 255, 0)'
},
change: {
backIcon: '/image/back-w.png',
color: '#ffffff',
background: 'rgba(28, 28, 37, 1)'
},
scroll: '20rpx',
},
navigationScroll: 0,
statusActive: 0, statusActive: 0,
statusList: [{ statusList: [{
...@@ -63,42 +48,26 @@ Page({ ...@@ -63,42 +48,26 @@ Page({
} }
}, },
onLoad: function() { onLoad: function() {
let marginTop = wx.getStorageSync('navigationStatusHeight') + wx.getStorageSync('navigationCapsuleHeight') + 20
this.setData({ this.setData({
marginTop navHeight: wx.getStorageSync('navStatusHeight') + wx.getStorageSync('navTitleHeight'),
classHeight: 60 * wx.getStorageSync('unitProportion')
}) })
this.setShowHeight() this.setShowHeight()
this.setFooterLocation() this.setFooterLocation()
this.getTodayFilm() this.getTodayFilm()
// this.getAllFilm()
}, },
onPageScroll: function(funcEvent) {
// console.log(funcEvent)
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
if (funcEvent.scrollTop > 20) {
this.setData({
statusFixed: true,
statusTop: wx.getStorageSync('navigationStatusHeight') + wx.getStorageSync('navigationCapsuleHeight') + 'px'
})
} else {
this.setData({
statusFixed: false,
})
}
this.setData({
navigationScroll: funcEvent.scrollTop
})
// 恢复滚动事件 /**
logicData.pageScrollTimer = setTimeout(function() { * 页面滚动事件
logicData.pageScrollLock = false * @function
clearTimeout(logicData.pageScrollTimer) * @param {object} - funcEvent
}, 10) * @returns
*/
onPageScroll: function (funcEvent) {
App.pageScroll(funcEvent, this)
}, },
setShowHeight: function() { setShowHeight: function() {
wx.getSystemInfo({ wx.getSystemInfo({
success: (result) => { success: (result) => {
......
pages/play/movie/movie.wxml
<navigation class="navigation" titleText="所有影片" color="#ffffff" backIcon="/image/back-w.png" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation> <m-nav titleText="所有影片" scrollHeight="{{navScroll}}" changeHeight="50rpx" styleIndex="{{7}}"></m-nav>
<view id="page" class="contaniner con-s" style="margin-top: {{marginTop + 'px'}}"> <view class="status row align-c" style="{{'top: ' + navHeight + 'px'}}">
<view class="status row align-c {{statusFixed ? 'status-fixed' : ''}}" style="{{statusFixed ? 'top: ' + (statusTop) : ''}}">
<block wx:for="{{statusList}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <block wx:for="{{statusList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="status-item row con-c align-c" data-type="{{index}}" bindtap="onSelectionStatus"> <view class="status-item row con-c align-c" data-type="{{index}}" bindtap="onSelectionStatus">
<view class="row con-c align-c {{index === statusActive ? 'status-item-active' : ''}}"> <view class="row con-c align-c {{index === statusActive ? 'status-item-active' : ''}}">
...@@ -9,8 +8,9 @@ ...@@ -9,8 +8,9 @@
</view> </view>
</view> </view>
</block> </block>
</view> </view>
<view id="page" class="contaniner con-s" style="{{'margin-top: ' + (navHeight + classHeight) + 'px;'}}">
<view wx:if="{{statusActive === 0}}"> <view wx:if="{{statusActive === 0}}">
<block wx:for="{{movieToday}}" wx:key="index" wx:if="{{movieToday.length !== 0}}"> <block wx:for="{{movieToday}}" wx:key="index" wx:if="{{movieToday.length !== 0}}">
<view class="movie-wrapper row" bindtap="onToMovieDetail" data-movieId="{{item.activityId}}"> <view class="movie-wrapper row" bindtap="onToMovieDetail" data-movieId="{{item.activityId}}">
......
pages/play/movie/movie.wxss
page { page {
background-color: #1C1C25; background-color: #1C1C25;
} }
.navigation {
z-index: 1900;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
.navigation-bar-image {
z-index: 1100;
position: fixed;
top: 60rpx;
left: 50rpx;
width: 200rpx;
height: 60rpx;
}
/* .contaniner {
margin-top: 200rpx;
} */
/* 状态筛选菜单 */ /* 状态筛选菜单 */
.status-fixed { .status {
z-index: 999; z-index: 2;
position: fixed; position: fixed;
left: 0; left: 0;
}
.status {
width: 750rpx; width: 750rpx;
height: 72rpx; height: 120rpx;
background-color: #1C1C25; background-color: #1C1C25;
border-bottom: 1rpx #3A3A40 solid; border-bottom: 1rpx #3A3A40 solid;
} }
.status-item { .status-item {
flex: 1; flex: 1;
height: 72rpx; height: 120rpx;
font-size: 26rpx; font-size: 26rpx;
font-weight: 400; font-weight: 400;
line-height: 36rpx; line-height: 36rpx;
color: #959DA9; color: #959DA9;
} }
.status-item-active { .status-item-active {
height: 72rpx; height: 120rpx;
color: #fff; color: #fff;
font-weight: 600; font-weight: 600;
border-bottom: 4rpx #fff solid; border-bottom: 4rpx #fff solid;
...@@ -169,7 +150,6 @@ page { ...@@ -169,7 +150,6 @@ page {
.movie-week { .movie-week {
width: 100%; width: 100%;
height: 44rpx; height: 44rpx;
margin-top: 54rpx;
color: #C2C7CF; color: #C2C7CF;
font-size: 22rpx; font-size: 22rpx;
text-align: center; text-align: center;
......
pages/play/point-detail/point-detail.js
...@@ -230,19 +230,25 @@ Page({ ...@@ -230,19 +230,25 @@ Page({
success: (result) => { success: (result) => {
this.setData({ this.setData({
showPopup: false, showPopup: false,
winToastSuccess: true })
App.ui.showToast({
'title': '图片已保存',
'iconType': 'success',
}) })
}, },
fail: (error) => { fail: (error) => {
this.setData({ App.ui.showToast({
winToastFail: true 'title': '图片保存失败',
'iconType': 'error',
}) })
} }
}) })
}, },
fail: (error) => { fail: (error) => {
this.setData({ App.ui.showToast({
winToastFail: true 'title': '图片保存失败',
'iconType': 'error',
}) })
} }
}) })
......
pages/play/point-detail/point-detail.wxml
<l-toast <m-toast></m-toast>
l-class="toast" <m-nav titleText="{{info.title}}" scrollHeight="{{navScroll}}" changeHeight="50rpx" styleIndex="{{2}}" isOccupy="{{false}}"></m-nav>
l-image-class="toast-icon"
show="{{winToastSuccess}}"
image="../../../image/icon/success-3.png"
title="图片已保存"
duration="3000"
></l-toast>
<l-toast
l-class="toast"
l-image-class="toast-icon"
show="{{winToastFail}}"
image="../../../image/icon/war-3.png"
title="图片保存失败"
duration="3000"
></l-toast>
<navigation class="navigation" titleText="{{info.title}}" color="#ffffff" backIcon="/image/back-w.png"></navigation>
<view class="container"> <view class="container">
<view id="banner" class="banner"> <view id="banner" class="banner">
......
pages/play/point-detail/point-detail.wxss
...@@ -19,16 +19,8 @@ page { ...@@ -19,16 +19,8 @@ page {
height: 88rpx !important; height: 88rpx !important;
} }
.navigation {
z-index: 1900;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
.banner { .banner {
z-index: 9; z-index: 1;
position: relative; position: relative;
width: 750rpx; width: 750rpx;
height: 880rpx; height: 880rpx;
...@@ -42,14 +34,14 @@ page { ...@@ -42,14 +34,14 @@ page {
} }
.banner-swiper-point { .banner-swiper-point {
z-index: 1900; z-index: 2;
position: relative; position: relative;
bottom: 110rpx; bottom: 110rpx;
left: 0; left: 0;
} }
.banner-wave { .banner-wave {
z-index: 1100; z-index: 2;
position: relative; position: relative;
bottom: 60rpx; bottom: 60rpx;
left: 0; left: 0;
...@@ -125,7 +117,7 @@ page { ...@@ -125,7 +117,7 @@ page {
/* 分享弹窗 */ /* 分享弹窗 */
.container-share { .container-share {
z-index: 1700; z-index: 7;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
......
pages/play/service-detail/service-detail.js
let App = getApp() let App = getApp()
let logicData = {
option: {},
pageScrollLock: false,
pageScrollTimer: 0,
}
Page({ Page({
data: { data: {
appStatus: App.globalData.appStatus, appStatus: App.globalData.appStatus,
imageBase: App.globalData.appImageBase, imageBase: App.globalData.appImageBase,
resourcesBase: App.globalData.appResourcesBase, resourcesBase: App.globalData.appResourcesBase,
navScroll: 0,
option: {}, option: {},
// 弹出控制 // 弹出控制
showPopup: false, showPopup: false,
// 导航栏相关属性
navigationStyle: {
normal: {
backIcon: '/image/back-w.png',
color: '#FFFFFF',
background: 'rgba(255, 255, 255, 0)'
},
change: {
backIcon: '/image/back.png',
color: '#000000',
background: 'rgba(255, 255, 255, 1)'
},
scroll: '200rpx',
},
navigationStyleBlack: {
normal: {
backIcon: '/image/back-w.png',
color: '#FFFFFF',
background: 'rgba(255, 255, 255, 0)'
},
change: {
backIcon: '/image/back-w.png',
color: '#FFFFFF',
background: '#272734'
},
scroll: '600rpx',
},
navigationScroll: 0,
// 内容类型 // 内容类型
contentType: 'detail', contentType: 'detail',
...@@ -738,21 +702,15 @@ Page({ ...@@ -738,21 +702,15 @@ Page({
url: '/pages/commodity/menu-food/menu-food' url: '/pages/commodity/menu-food/menu-food'
}) })
}, },
onPageScroll: function(funcEvent) {
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
this.setData({
navigationScroll: funcEvent.scrollTop
})
this.setSideButton(funcEvent)
// 恢复滚动事件 /**
logicData.pageScrollTimer = setTimeout(function() { * 页面滚动事件
logicData.pageScrollLock = false * @function
clearTimeout(logicData.pageScrollTimer) * @param {object} - funcEvent
}, 10) * @returns
*/
onPageScroll: function (funcEvent) {
App.pageScroll(funcEvent, this)
}, },
/** /**
......
pages/play/service-detail/service-detail.wxml
<navigation class="navigation" titleText="{{info.title}}" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation> <m-nav titleText="{{info.title}}" scrollHeight="{{navScroll}}" changeHeight="50rpx" styleIndex="{{option.id !== '2' ? 2 : 6}}" isOccupy="{{false}}"></m-nav>
<view class="container" wx:if="{{option.id !== '2'}}"> <view class="container" wx:if="{{option.id !== '2'}}">
<view id="banner" class="banner"> <view id="banner" class="banner">
......
pages/play/service-detail/service-detail.wxss
.navigation {
z-index: 1900;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
.navigation-bar-image {
z-index: 1100;
position: fixed;
top: 60rpx;
left: 50rpx;
width: 200rpx;
height: 60rpx;
}
.movie { .movie {
color: #fff; color: #fff;
background-color: #1c1c25; background-color: #1c1c25;
} }
.banner { .banner {
z-index: 9; z-index: 1;
position: relative; position: relative;
width: 750rpx; width: 750rpx;
height: 800rpx; height: 800rpx;
...@@ -43,7 +26,7 @@ ...@@ -43,7 +26,7 @@
} }
.banner-wave { .banner-wave {
z-index: 1100; z-index: 2;
position: relative; position: relative;
top: 740rpx; top: 740rpx;
left: 0; left: 0;
...@@ -115,9 +98,8 @@ ...@@ -115,9 +98,8 @@
} }
/* 侧边返回顶部 */ /* 侧边返回顶部 */
.appointment-side { .appointment-side {
z-index: 1900; z-index: 4;
position: fixed; position: fixed;
right: 40rpx; right: 40rpx;
bottom: 268rpx; bottom: 268rpx;
...@@ -542,9 +524,8 @@ ...@@ -542,9 +524,8 @@
} }
/* 分享弹窗 */ /* 分享弹窗 */
.container-share { .container-share {
z-index: 1700; z-index: 1;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
...@@ -871,9 +852,8 @@ ...@@ -871,9 +852,8 @@
} }
/* 评论相册样式 */ /* 评论相册样式 */
.full-screen-album { .full-screen-album {
z-index: 2000; z-index: 9;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
......
pages/play/service/service.wxml
<navigation class="navigation" titleText="{{navTitle}}" background="#FFFFFF" backIcon="/image/icon/arrow-l-1.png"></navigation> <m-nav titleText="{{navTitle}}" scrollHeight="{{navScroll}}" changeHeight="10rpx" styleIndex="{{1}}"></m-nav>
<view class="container"> <view class="container">
<view class="detail"> <view class="detail">
......
pages/play/service/service.wxss
.navigation {
z-index: 1900;
}
.container { .container {
margin-top: 120rpx;
padding-bottom: 20rpx; padding-bottom: 20rpx;
background: linear-gradient(182deg, #fff 0%, #ebeff7 100%); background: linear-gradient(182deg, #fff 0%, #ebeff7 100%);
} }
/* 详情 */ /* 详情 */
.detail { .detail {
width: 750rpx; width: 750rpx;
min-height: 500rpx; min-height: 500rpx;
...@@ -23,7 +17,6 @@ ...@@ -23,7 +17,6 @@
} }
/* 商店详情 */ /* 商店详情 */
.shop-item { .shop-item {
position: relative; position: relative;
width: 750rpx; width: 750rpx;
......
pages/play/strategy-detail/strategy-detail.js
const App = getApp() const App = getApp()
let logicData = {
pageScrollLock: false,
pageScrollTimer: 0,
}
Page({ Page({
data: { data: {
// 导航栏相关属性
navigationStyle: {
normal: {
backIcon: '/image/back-w.png',
color: '#FFFFFF',
background: 'rgba(255, 255, 255, 0)'
},
change: {
backIcon: '/image/back.png',
color: '#000000',
background: 'rgba(255, 255, 255, 1)'
},
scroll: '750rpx',
},
navigationScroll: 0,
isNavigationWhite: false,
appStatus: App.globalData.appStatus, appStatus: App.globalData.appStatus,
...@@ -156,70 +134,25 @@ Page({ ...@@ -156,70 +134,25 @@ Page({
} }
}, },
onPageScroll: function (funcEvent) {
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
this.setData({
navigationScroll: funcEvent.scrollTop
})
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 10)
},
/** /**
* banner 变换事件 * 页面滚动事件
* @function * @function
* @param * @param {object} - funcEvent
* @returns * @returns
*/ */
eventSwiperChange: function (event) { onPageScroll: function (funcEvent) {
this.setData({ App.pageScroll(funcEvent, this)
bannerIndex: event.detail.current
})
}, },
/** /**
* 页面滚动事件 * banner 变换事件
* @function * @function
* @param * @param
* @returns * @returns
*/ */
eventPageScroll: function (event) { eventSwiperChange: function (event) {
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
if (event.scrollTop > 40 && !this.data.isNavigationWhite) {
this.setData({
isNavigationWhite: true
})
wx.setNavigationBarColor({
frontColor: '#000000',
backgroundColor: '#000000',
})
}
if (event.scrollTop <= 40) {
this.setData({ this.setData({
isNavigationWhite: false bannerIndex: event.detail.current
})
wx.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#ffffff',
}) })
}
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 40)
}, },
}) })
\ No newline at end of file
pages/play/strategy-detail/strategy-detail.wxml
<navigation class="navigation" titleText="攻略详情" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation> <m-nav titleText="攻略详情" scrollHeight="{{navScroll}}" changeHeight="50rpx" styleIndex="{{2}}" isOccupy="{{false}}"></m-nav>
<view class="container"> <view class="container">
<view id="banner" class="banner"> <view id="banner" class="banner">
<swiper class="banner-swiper" autoplay circular interval="2000" duration="500" indicator-color="rgba(0, 0, 0, 0)" indicator-active-color="rgba(0, 0, 0, 0)" bindchange="eventPageScroll"> <swiper class="banner-swiper" autoplay circular interval="2000" duration="500" indicator-color="rgba(0, 0, 0, 0)" indicator-active-color="rgba(0, 0, 0, 0)" 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"> <swiper-item class="banner-swiper-item">
<image class="banner-swiper-image" src="{{item}}"></image> <image class="banner-swiper-image" src="{{item}}"></image>
......
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