From 5c254cc14b4df7d25dc9437e936bdad9314f6d01 Mon Sep 17 00:00:00 2001 From: 396316021 <396316021@qq.com> Date: Tue, 12 Sep 2023 14:38:42 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=85=A8=E5=B1=80=E5=AF=BC?= =?UTF-8?q?=E8=88=AA=E6=A0=8F=E4=BF=A1=E6=81=AF=E8=8E=B7=E5=8F=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- App.vue | 19 +- components/HeaderNav/components/index.scss | 4 +- components/HeaderNav/index.vue | 30 ++- .../OrderPage/components/index.scss | 179 +++++++++--------- pages/Index/components/OrderPage/index.vue | 75 ++++---- pages/OrderPage/index.vue | 55 +++++- utils/functions.js | 16 ++ 7 files changed, 233 insertions(+), 145 deletions(-) diff --git a/App.vue b/App.vue index a523028..589f927 100644 --- a/App.vue +++ b/App.vue @@ -1,5 +1,7 @@ diff --git a/components/HeaderNav/components/index.scss b/components/HeaderNav/components/index.scss index 6cf1204..419ca78 100644 --- a/components/HeaderNav/components/index.scss +++ b/components/HeaderNav/components/index.scss @@ -21,8 +21,8 @@ display:flex; align-items: center; padding:{ - top:10rpx; - bottom:10rpx; + //top:10rpx; + //bottom:10rpx; } } .header-back-button{ diff --git a/components/HeaderNav/index.vue b/components/HeaderNav/index.vue index 32f958c..f11c99b 100644 --- a/components/HeaderNav/index.vue +++ b/components/HeaderNav/index.vue @@ -5,9 +5,8 @@ @@ -44,7 +43,8 @@ navHeight: 32, navPaddingTop: 47, headerPadding:4, - isTop:true + isTop:true, + menuButtonPadding:0, } }, onShow() { @@ -55,12 +55,10 @@ }, methods: { init() { - this.navPaddingTop = api.navHeight().navPaddingTop, - this.navHeight = api.navHeight().navHeight, - this.headerPadding = api.navHeight().headerPadding - console.log('this.navPaddingTop123',this.navPaddingTop); - console.log('this.navHeight',this.navHeight); - console.log('this.headerPadding',this.headerPadding); + let sysInfo = uni.getStorageSync('sysInfo'); + this.navPaddingTop = sysInfo.sysMenuHeight; + this.navHeight = sysInfo.menuButtonHeight; + this.menuButtonPadding = sysInfo.menuButtonPadding; }, navBack(){ uni.navigateBack({ @@ -70,17 +68,17 @@ }, created() { this.init() - // onPageScroll:function(e){ - // console.log(1); - // } }, updated() {}, mounted() { - var that = this; - uni.$on('isTop', function(data) { + let that = this; + uni.$on('isTop', (data) => { that.isTop = data; }); - } + + + + } } diff --git a/pages/Index/components/OrderPage/components/index.scss b/pages/Index/components/OrderPage/components/index.scss index bb01f7d..cd8b990 100644 --- a/pages/Index/components/OrderPage/components/index.scss +++ b/pages/Index/components/OrderPage/components/index.scss @@ -1,99 +1,106 @@ -.app-wallpaper{ - position: relative; - background:{ - size: 100% 100%; - repeat: no-repeat; - }; - .order-capsule-container{ - position: sticky; - +.order-capsule-container{ + position: sticky; + + box-sizing: border-box; + width:100%; + padding:10rpx; + border:2rpx solid #262626; + border-radius: 45rpx; + box-shadow: 1rpx 4rpx 12rpx 0rpx rgba(90,104,103,0.24); + background-color: #F8FAFA; + .order-capsule{ box-sizing: border-box; - width:100%; - padding:10rpx; - border:2rpx solid #262626; - border-radius: 45rpx; - box-shadow: 1rpx 4rpx 12rpx 0rpx rgba(90,104,103,0.24); - background-color: #F8FAFA; - .order-capsule{ - box-sizing: border-box; - padding:20rpx; - text-align: center; - font: { - size:30rpx; - weight:500; - } - line-height:30rpx; - border:2rpx solid rgba(0,0,0,0); - &.active{ - background:{ - color:#4DC3B8; - } - color:#FFFFFF; - border:2rpx solid #262626; - border-radius:35rpx; + padding:20rpx; + text-align: center; + font: { + size:30rpx; + weight:500; + } + line-height:30rpx; + border:2rpx solid rgba(0,0,0,0); + &.active{ + background:{ + color:#4DC3B8; } + color:#FFFFFF; + border:2rpx solid #262626; + border-radius:35rpx; } } - .order-screen-container{ - .order-screen{ - padding:40rpx 0 20rpx 0; - padding-right: 66rpx; - font-size: 28rpx; - line-height: 53rpx; - color:#646464; - font-weight: 400; - position: relative; - &.active{ - color:#000000; - font-size: 32rpx; - font-weight: 500; - .order-screen-active{ - display:flex; - } - } +} +.order-screen-container{ + .order-screen{ + padding:40rpx 0 20rpx 0; + padding-right: 66rpx; + font-size: 28rpx; + line-height: 53rpx; + color:#646464; + font-weight: 400; + position: relative; + &.active{ + color:#000000; + font-size: 32rpx; + font-weight: 500; .order-screen-active{ - display: none; - align-items: center; - justify-content: center; - position: absolute; - top: 90rpx; - left: 12rpx; - .img{ - width:37rpx; - } + display:flex; } - } - .order-screen-time-container{ - flex:1; - margin-left:auto; - justify-content: flex-end; - .order-screen{ - // padding-right:0; + .order-screen-active{ + display: none; + align-items: center; + justify-content: center; + position: absolute; + top: 90rpx; + left: 12rpx; + .img{ + width:37rpx; } } - .order-screen-time-title{ - color:#B5B5B5; - font-size:26rpx; - font-weight: 400; - line-height:53rpx; - padding-right: 16rpx; - } - .order-screen-time-buttton-container{ - padding-right: 0; - } - .order-screen-time-buttton{ - padding:8rpx 19rpx; - color:#4EC2B7; - font-size: 28rpx; - font-weight: 400; - background-color:#ffffff; - border:1px solid #4EC2B7; - border-radius: 10rpx; - line-height: 28rpx; - box-shadow: 0rpx 4rpx 5rpx 0rpx rgba(82,84,84,0.1), 2rpx -4rpx 0rpx 0rpx rgba(78,194,183,0.2); - } + + } + .order-screen-time-container{ + flex:1; + margin-left:auto; + justify-content: flex-end; + .order-screen{ + // padding-right:0; + } + } + .order-screen-time-title{ + color:#B5B5B5; + font-size:26rpx; + font-weight: 400; + line-height:53rpx; + padding-right: 16rpx; + } + .order-screen-time-buttton-container{ + padding-right: 0; } + .order-screen-time-buttton{ + padding:8rpx 19rpx; + color:#4EC2B7; + font-size: 28rpx; + font-weight: 400; + background-color:#ffffff; + border:1px solid #4EC2B7; + border-radius: 10rpx; + line-height: 28rpx; + box-shadow: 0rpx 4rpx 5rpx 0rpx rgba(82,84,84,0.1), 2rpx -4rpx 0rpx 0rpx rgba(78,194,183,0.2); + } +} +.order-screen-top{ + position: sticky; + left:0; + z-index: 9999; + background-color:#fff; + padding:25rpx; +} +.app-wallpaper{ + position: relative; + background:{ + size: 100% 100%; + repeat: no-repeat; + }; .order-list-container{ width:100%; //max-height: 1000rpx; diff --git a/pages/Index/components/OrderPage/index.vue b/pages/Index/components/OrderPage/index.vue index 3505a11..9557de3 100644 --- a/pages/Index/components/OrderPage/index.vue +++ b/pages/Index/components/OrderPage/index.vue @@ -1,44 +1,45 @@ @@ -286,7 +326,8 @@ pages:{ page:1, limit:10 - } + }, + addServiceChecked:[], } }, onLoad(options) { @@ -297,11 +338,17 @@ this.getDefaultAddress(); }, methods: { + serverBottomLower(){ + console.log(123123) + }, showAddServicePopup(){ this.$refs.addServicePopup.open(); }, selectAddService(item){ - + if(!this.addServiceChecked.indexOf(item.id)){ + this.addServiceChecked.push.apply(item.id); + } + console.log(this.addServiceChecked) }, getStoreServiceList(){ getStoreService({address_id: this.address.id}).then(res => { diff --git a/utils/functions.js b/utils/functions.js index d1fbdac..8065b61 100644 --- a/utils/functions.js +++ b/utils/functions.js @@ -267,5 +267,21 @@ const api = { system:this.system }; }, + uniSysInfo:() => { + return new Promise((resolve,reject)=>{ + let menuButtonInfo = uni.getMenuButtonBoundingClientRect(); + let sysMenuHeight = uni.$u.sys().statusBarHeight; + let menuButtonHeight = menuButtonInfo.height + let menuButtonPadding = menuButtonInfo.top - sysMenuHeight + let data = { + sysMenuHeight:sysMenuHeight, + menuButtonHeight:menuButtonHeight, + menuButtonPadding:menuButtonPadding, + sysAndMenuHeight:(sysMenuHeight+menuButtonHeight+(menuButtonPadding*2)) + } + uni.setStorageSync('sysInfo',data); + resolve(data); + }) + } } export default api;