Skip to content

严立 / mini-shimao

Go to a project
Commit 9ae9ed54 by 严立
Options

LL - 我的导航栏问题

parent 99fd9b2d
Inline Side-by-side
Showing with 93 additions and 92 deletions
app.js
......@@ -35,14 +35,13 @@ App({
onLaunch: function () {
this.setUnitProportion()
this.login()
if (this.globalData.token === '') return
this.queryUserStatus()
},
onShow: function () {
console.log('onShow')
this.setAppStatus()
if (this.globalData.token === '') return
this.queryUserStatus()
},
setAppStatus: function () {
......@@ -55,6 +54,8 @@ App({
success: (response) => {
let funcResponse = response.data
this.globalData.appStatus = Boolean(Number(funcResponse[0].value))
// 测试数据
this.globalData.appStatus = true
console.log(this.globalData.appStatus)
}
})
......
component/navigation/navigation.js
......@@ -77,6 +77,11 @@ Component({
// 属性监听
observers: {
'scrollStyle': function (funcValue) {
console.log(this.data.scrollStyle)
if (JSON.stringify(this.data.scrollStyle) === '{}') return
this.setNavigationStyle()
},
'background': function () {
this.setNavigationStyle()
},
......@@ -138,6 +143,7 @@ Component({
funcTitleStyle['background'] = this.data.isScrollChange ? this.data.scrollStyle.change.background : this.data.scrollStyle.normal.background
this.setData({
color: this.data.isScrollChange ? this.data.scrollStyle.change.color : this.data.scrollStyle.normal.color,
backIcon: this.data.isScrollChange ? this.data.scrollStyle.change.backIcon : this.data.scrollStyle.normal.backIcon
})
}
......
pages/mine/home/home.js
......@@ -6,19 +6,7 @@ Page({
data: {
// 导航栏相关属性
navigationStyle: {
normal: {
backIcon: '',
color: '#FFFFFF',
background: 'rgba(255, 255, 255, 0)'
},
change: {
backIcon: '',
color: '#000000',
background: 'rgba(255, 255, 255, 1)'
},
scroll: '400rpx',
},
navigationStyle: {},
navigationScroll: 0,
......@@ -91,6 +79,7 @@ Page({
onShow: function () {
this.setData({ appStatus: App.globalData.appStatus })
this.setUserInfo()
this.setNavigation()
},
// 去活动预约列表
......@@ -357,6 +346,26 @@ Page({
}
},
setNavigation: function () {
let funcUserInfo = wx.getStorageSync('userInfo')
let funcNavigation = {
normal: {
backIcon: '',
color: funcUserInfo.userType === 0 ? '#000000' : '#FFFFFF',
background: 'rgba(255, 255, 255, 0)'
},
change: {
backIcon: '',
color: '#000000',
background: 'rgba(255, 255, 255, 1)'
},
scroll: '300rpx',
}
this.setData({
navigationStyle: funcNavigation
})
},
// 登录注册页
checkRegister() {
if (this.data.isRegister) {
......@@ -591,8 +600,6 @@ Page({
},
onPageScroll: function (event) {
console.log(this.scrollLock)
// 优化滚动事件触发频率
if (this.scrollLock) return
this.scrollLock = true
......@@ -601,8 +608,6 @@ Page({
navigationScroll: event.scrollTop
})
console.log(this.data.navigationScroll)
// 恢复滚动事件
this.scrollTimer = setTimeout(() => {
this.scrollLock = false
......
pages/mine/home/home.wxml
......@@ -2,7 +2,7 @@
<view class="container">
<view class="mine" wx:if="{{type !== 1}}">
<image class="background-image" src="./image/mine.png"></image>
<image class="mine-bgi" src="./image/mine.png"></image>
<view class="row align-c">
<view class="mine-avatar" bindtap="checkRegister">
<image src="{{userInfo.avatar ? userInfo.avatar : './image/avatar.png'}}"></image>
......@@ -23,19 +23,17 @@
<text style="color:#333333;font-weight:500;">登录/注册</text>
</view>
</view>
<view bindtap="goIntegralDetail" data-integral="{{integral}}" class="integral "
style="position:relative;z-index:2; flex:1">
<view bindtap="goIntegralDetail" data-integral="{{integral}}" class="integral " style="position:relative;z-index:2; flex:1">
<view class="integral-num">{{integral}}</view>
<view class="integral-title">我的积分 <image class="arrow-r"
src="{{imageResourcesBase+'mine/home/huise_arrow_right.png'}}"></image>
<view class="integral-title">我的积分
<image class="arrow-r" src="{{imageResourcesBase+'mine/home/huise_arrow_right.png'}}"></image>
</view>
</view>
</view>
</view>
<view class="mine" style="height:512rpx" wx:if="{{type == 1}}">
<image class="background-image" style="height:512rpx;"
src="http://upload.miaomiao-bao.com/8f046202008201043321555.jpg"></image>
<image class="background-image" style="height:512rpx;" src="http://upload.miaomiao-bao.com/8f046202008201043321555.jpg"></image>
<view class="row align-c approve">
<view class="mine-avatar mine-avatar-special">
<image src="{{userInfo.avatar}}"></image>
......@@ -50,11 +48,10 @@
<image mode="aspectFill" src="{{imageResourcesBase+'mine/home/ownerTag.png'}}"></image>
</view>
</view>
<view bindtap="goIntegralDetail" data-integral="{{integral}}" class=" integral glod"
style="position:relative;z-index:2; flex:1">
<view bindtap="goIntegralDetail" data-integral="{{integral}}" class=" integral glod" style="position:relative;z-index:2; flex:1">
<view class="integral-num">{{integral}}</view>
<view class="integral-title">我的积分 <image class="arrow-r"
src="{{imageResourcesBase+'mine/home/glod_arrow_right.png'}}"></image>
<view class="integral-title">我的积分
<image class="arrow-r" src="{{imageResourcesBase+'mine/home/glod_arrow_right.png'}}"></image>
</view>
</view>
</view>
......@@ -101,8 +98,7 @@
<view class="order-activity-icon-wrapper col align-c" data-type="3" bindtap="goOrderByclass">
<view class="order-activity-icon row con-c align-c">
<image src="{{imageResourcesBase+'mine/home/or_ticket.png'}}"></image>
<view class="order-activity-badge {{ goodTypeCountData['3'] > 9 ? 'badge-widen' : ''}}"
wx:if="{{goodTypeCountData['3'] > 0}}">
<view class="order-activity-badge {{ goodTypeCountData['3'] > 9 ? 'badge-widen' : ''}}" wx:if="{{goodTypeCountData['3'] > 0}}">
{{goodTypeCountData['3'] > 99 ? '···' : goodTypeCountData['3']}}</view>
</view>
<text>门票</text>
......@@ -110,8 +106,7 @@
<view class="order-activity-icon-wrapper col align-c" data-type="5" bindtap="goOrderByclass">
<view class="order-activity-icon row con-c align-c">
<image src="{{imageResourcesBase+'mine/home/or_food.png'}}"></image>
<view class="order-activity-badge {{ goodTypeCountData['5'] > 9 ? 'badge-widen' : ''}}"
wx:if="{{goodTypeCountData['5'] > 0}}">
<view class="order-activity-badge {{ goodTypeCountData['5'] > 9 ? 'badge-widen' : ''}}" wx:if="{{goodTypeCountData['5'] > 0}}">
{{goodTypeCountData['5'] > 99 ? '···' : goodTypeCountData['5']}}</view>
</view>
<text>餐饮</text>
......@@ -119,8 +114,7 @@
<view class="order-activity-icon-wrapper col align-c" data-type="-2" bindtap="goOrderByclass">
<view class="order-activity-icon row con-c align-c">
<image src="{{imageResourcesBase+'mine/home/or_movice.png'}}"></image>
<view class="order-activity-badge {{ goodTypeCountData['-2'] > 9 ? 'badge-widen' : ''}}"
wx:if="{{goodTypeCountData['-2'] > 0}}">
<view class="order-activity-badge {{ goodTypeCountData['-2'] > 9 ? 'badge-widen' : ''}}" wx:if="{{goodTypeCountData['-2'] > 0}}">
{{goodTypeCountData['-2'] > 99 ? '···' : goodTypeCountData['-2']}}</view>
</view>
<text>影票</text>
......@@ -128,8 +122,7 @@
<view class="order-activity-icon-wrapper col align-c" data-type="2" bindtap="goOrderByclass">
<view class="order-activity-icon row con-c align-c">
<image src="{{imageResourcesBase+'mine/home/or_spa.png'}}"></image>
<view class="order-activity-badge {{ goodTypeCountData['2'] > 9 ? 'badge-widen' : ''}}"
wx:if="{{goodTypeCountData['2'] > 0}}">
<view class="order-activity-badge {{ goodTypeCountData['2'] > 9 ? 'badge-widen' : ''}}" wx:if="{{goodTypeCountData['2'] > 0}}">
{{goodTypeCountData['2'] > 99 ? '···' : goodTypeCountData['2']}}</view>
</view>
<text>SPA</text>
......@@ -137,8 +130,7 @@
<view class="order-activity-icon-wrapper col align-c" data-type="4" bindtap="goOrderByclass">
<view class="order-activity-icon row con-c align-c">
<image src="{{imageResourcesBase+'mine/home/or_art.png'}}"></image>
<view class="order-activity-badge {{ goodTypeCountData['4'] > 9 ? 'badge-widen' : ''}}"
wx:if="{{goodTypeCountData['4'] > 0}}">
<view class="order-activity-badge {{ goodTypeCountData['4'] > 9 ? 'badge-widen' : ''}}" wx:if="{{goodTypeCountData['4'] > 0}}">
{{goodTypeCountData['4'] > 99 ? '···' : goodTypeCountData['4']}}</view>
</view>
<text>文创</text>
......@@ -147,12 +139,9 @@
<view class="more-wrapper" wx:if="{{myOrder}}}">
<!-- 订单卡片 -->
<!-- 年卡 -->
<view class="pass-wrapper" wx:if="{{myOrder.passOrder&&myOrder.passOrder.length>0}}"
bindtap="handleToCard">
<image wx:if="{{ myOrder.passOrder[0].cardType==1}}" class="card-bg year-bg"
src="{{imageResourcesBase +'pay/order-input/card-1.png'}}"></image>
<image wx:elif="{{myOrder.passOrder[0].cardType==2}}" class="card-bg month-bg"
src="{{imageResourcesBase +'pay/order-input/card-2.png'}}"></image>
<view class="pass-wrapper" wx:if="{{myOrder.passOrder&&myOrder.passOrder.length>0}}" bindtap="handleToCard">
<image wx:if="{{ myOrder.passOrder[0].cardType==1}}" class="card-bg year-bg" src="{{imageResourcesBase +'pay/order-input/card-1.png'}}"></image>
<image wx:elif="{{myOrder.passOrder[0].cardType==2}}" class="card-bg month-bg" src="{{imageResourcesBase +'pay/order-input/card-2.png'}}"></image>
<image wx:else class="card-bg month-bg" src="{{imageResourcesBase +'pay/order-input/card-3.png'}}">
</image>
<view class="pass-bg-one" wx:if="{{myOrder.passOrder.length > 1}}"></view>
......@@ -180,8 +169,7 @@
<!-- 商品 -->
<block wx:if="myOrder.artOrder.orderList.length>0">
<view class="goods-wrapper" wx:for="{{myOrder.artOrder.orderList}}" wx:key="*this"
data-item="{{item}}" bindtap="onOrderDetail">
<view class="goods-wrapper" wx:for="{{myOrder.artOrder.orderList}}" wx:key="*this" data-item="{{item}}" bindtap="onOrderDetail">
<view class="goods-logo-wrapper row align-c">
<view class="logo-box">
<image mode="aspectFit" src="{{imageResourcesBase+ item.logo}}"></image>
......@@ -190,13 +178,11 @@
</view>
<view class="goods-content row align-c">
<block wx:if="{{item.smOrderDetails.length>3}}">
<image src="{{k.imgUrl}}" wx:for="{{item.smOrderDetailsSlice3}}" wx:for-item="k"
wx:key="*this">
<image src="{{k.imgUrl}}" wx:for="{{item.smOrderDetailsSlice3}}" wx:for-item="k" wx:key="*this">
</image>
</block>
<block wx:else>
<image src="{{k.imgUrl}}" wx:for="{{item.smOrderDetails}}" wx:for-item="k"
wx:key="*this">
<image src="{{k.imgUrl}}" wx:for="{{item.smOrderDetails}}" wx:for-item="k" wx:key="*this">
</image>
</block>
......@@ -235,8 +221,7 @@
<view class="order-activity-icon-wrapper col align-c" data-type='0' bindtap="goAppointment">
<view class="order-activity-icon row con-c align-c">
<image src="{{imageResourcesBase+'mine/home/yy_theme.png'}}"></image>
<view class="order-activity-badge {{ enrollSubscribeData.active > 9 ? 'badge-widen' : ''}}"
wx:if="{{enrollSubscribeData.active}}">
<view class="order-activity-badge {{ enrollSubscribeData.active > 9 ? 'badge-widen' : ''}}" wx:if="{{enrollSubscribeData.active}}">
{{enrollSubscribeData.active}}</view>
</view>
<text>主题活动</text>
......@@ -244,8 +229,7 @@
<view class="order-activity-icon-wrapper col align-c" data-type='1' bindtap="goAppointment">
<view class="order-activity-icon row con-c align-c">
<image src="{{imageResourcesBase+'mine/home/yy_night.png'}}"></image>
<view class="order-activity-badge {{ enrollSubscribeData.garden > 9 ? 'badge-widen' : ''}}"
wx:if="{{enrollSubscribeData.garden}}">
<view class="order-activity-badge {{ enrollSubscribeData.garden > 9 ? 'badge-widen' : ''}}" wx:if="{{enrollSubscribeData.garden}}">
{{enrollSubscribeData.garden}}</view>
</view>
<text>夜间入园预约</text>
......@@ -253,8 +237,7 @@
<view class="order-activity-icon-wrapper col align-c" data-type='2' bindtap="goAppointment">
<view class="order-activity-icon row con-c align-c">
<image src="{{imageResourcesBase+'mine/home/yy_house.png'}}"></image>
<view class="order-activity-badge {{ enrollSubscribeData.scanHouse > 9 ? 'badge-widen' : ''}}"
wx:if="{{enrollSubscribeData.scanHouse}}">
<view class="order-activity-badge {{ enrollSubscribeData.scanHouse > 9 ? 'badge-widen' : ''}}" wx:if="{{enrollSubscribeData.scanHouse}}">
{{enrollSubscribeData.scanHouse}}</view>
</view>
<text>看房预约</text>
......@@ -263,8 +246,7 @@
<!-- 预约卡片 -->
<view class="appointment">
<!-- 主题活动 -->
<view class="appointment-wrapper" wx:for="{{activityList}}" wx:key="*this" data-item="{{item}}"
bindtap="onOrderDetail">
<view class="appointment-wrapper" wx:for="{{activityList}}" wx:key="*this" data-item="{{item}}" bindtap="onOrderDetail">
<view class="appointment-time">{{item.activeTime}}</view>
<view class="appointment-activity-content row">
<view class="appointment-activity-img">
......@@ -342,8 +324,7 @@
<view class="row con-c">
<image src="http://upload.miaomiao-bao.com/ea238202008201146199955.png" class="mask-img"></image>
</view>
<image src="http://upload.miaomiao-bao.com/62e04202008201417045326.png"
style="width:750rpx;height:458rpx;margin-left:-73.5rpx;"></image>
<image src="http://upload.miaomiao-bao.com/62e04202008201417045326.png" style="width:750rpx;height:458rpx;margin-left:-73.5rpx;"></image>
<view class="row align-c con-c" style="margin-top:20rpx;">
<image src="/image/xingxing.png" class="mask-icon"></image>
<text class="mask-font">业主特权</text>
......
pages/mine/home/home.wxss
.container {
min-height: 100vh;
background: #F3F4F6
background: #f3f4f6;
}
.navigation {
......@@ -17,19 +17,26 @@
}
.mine {
position: relative;
width: 750rpx;
height: 380rpx;
padding: 220rpx 0 0 48rpx;
}
.mine-bgi {
position: absolute;
top: 0;
left: 0;
width: 750rpx;
height: 500rpx;
}
.user-type {
width: 126rpx;
height: 40rpx;
font-weight: 500;
font-size: 22rpx;
color: #fff;
background-color: #6783AE;
background-color: #6783ae;
text-align: center;
line-height: 40rpx;
border-radius: 4rpx;
......@@ -55,14 +62,15 @@
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: #F0DABB;
background-color: #f0dabb;
}
.mine-avatar>image {
.mine-avatar > image {
width: 128rpx;
height: 128rpx;
border-radius: 50%;
}
.mine-info {
padding-top: 12rpx;
}
......@@ -79,14 +87,14 @@
}
/* 积分 */
.integral {
color: #0D0D0E;
color: #0d0d0e;
text-align: right;
}
.glod {
color: #F0DABB;
color: #f0dabb;
}
.integral-num {
......@@ -131,6 +139,7 @@
}
.coupon {
z-index: 9;
width: 670rpx;
height: 176rpx;
padding: 41rpx 32rpx;
......@@ -146,13 +155,13 @@
.cpopon-info text:nth-child(1) {
font-size: 34rpx;
font-weight: 600;
color: #15191F;
color: #15191f;
}
.cpopon-info text:nth-child(2) {
margin-top: 12rpx;
font-size: 26rpx;
color: #161A1F;
color: #161a1f;
}
.coupon image {
......@@ -161,6 +170,7 @@
}
.status {
z-index: 9;
width: 670rpx;
height: 130rpx;
margin-top: 48rpx;
......@@ -415,13 +425,13 @@
.order-activity-title {
font-size: 34rpx;
color: #15191F;
color: #15191f;
font-weight: 600;
}
.order-activity-all text {
font-size: 26rpx;
color: #15191F;
color: #15191f;
}
.order-activity-icon-list {
......@@ -437,7 +447,7 @@
position: relative;
width: 80rpx;
height: 80rpx;
background-color: #F5F6F8;
background-color: #f5f6f8;
border-radius: 50%;
}
......@@ -456,7 +466,7 @@
color: #fff;
text-align: center;
line-height: 32rpx;
background-color: #E66060;
background-color: #e66060;
border-radius: 16rpx;
}
......@@ -467,7 +477,7 @@
.order-activity-icon-wrapper text {
margin-top: 16rpx;
font-size: 22rpx;
color: #15191F;
color: #15191f;
}
.more-wrapper {
......@@ -481,7 +491,7 @@
margin-top: 41rpx;
padding: 26rpx 32rpx;
color: #fff;
background: linear-gradient(141deg, #F4D5C1 0%, #FA99CE 100%);
background: linear-gradient(141deg, #f4d5c1 0%, #fa99ce 100%);
border-radius: 4rpx;
opacity: 0.81;
}
......@@ -522,8 +532,6 @@
height: 50rpx;
}
.pass-logo-wrapper text {
height: 50rpx;
margin-left: 20rpx;
......@@ -556,7 +564,7 @@
width: 606rpx;
height: 328rpx;
padding: 0 32rpx 8rpx;
background-color: #F5F6F8;
background-color: #f5f6f8;
border-radius: 4rpx;
}
......@@ -570,7 +578,7 @@
height: 100rpx;
margin-left: 20rpx;
font-size: 26rpx;
color: #15191F;
color: #15191f;
line-height: 100rpx;
}
......@@ -588,7 +596,7 @@
.goods-content text {
font-size: 30rpx;
color: #15191F;
color: #15191f;
font-weight: 600;
line-height: 42rpx;
}
......@@ -599,7 +607,7 @@
.goods-footer text {
font-size: 26rpx;
color: #959DA9;
color: #959da9;
}
.art-logo {
......@@ -614,7 +622,7 @@
height: 248rpx;
margin-top: 68rpx;
padding: 72rpx 32rpx 0;
background-color: #F5F6F8;
background-color: #f5f6f8;
border-radius: 4rpx;
}
......@@ -645,7 +653,7 @@
}
.appointment-activity-title {
color: #15191F;
color: #15191f;
font-size: 30rpx;
font-weight: 600;
line-height: 42rpx;
......@@ -653,7 +661,7 @@
.appointment-activity-num {
margin-top: 16rpx;
color: #959DA9;
color: #959da9;
font-size: 26rpx;
}
......@@ -665,7 +673,7 @@
.border-right {
width: 1rpx;
height: 75rpx;
background-color: #E2E7EF;
background-color: #e2e7ef;
}
.appointment-subscribe {
......@@ -686,7 +694,7 @@
.more text {
font-size: 26rpx;
color: #15191F;
color: #15191f;
}
.more image {
......@@ -706,7 +714,7 @@
.service text {
font-size: 34rpx;
color: #15191F;
color: #15191f;
font-weight: 600;
}
......
pages/mine/home/image/mine.png
pages/mine/home/image/mine.png

17.4 KB | W: | H:

pages/mine/home/image/mine.png

37.6 KB | W: | H:

pages/mine/home/image/mine.png
pages/mine/home/image/mine.png
pages/mine/home/image/mine.png
pages/mine/home/image/mine.png
  • 2-up
  • Swipe
  • Onion skin
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