396316021
/
pet_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

更新全局导航栏信息获取

master
396316021 1 year ago
parent
29526d3934
commit
5c254cc14b
7 changed files with 233 additions and 145 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 19
      App.vue
  2. 4
      components/HeaderNav/components/index.scss
  3. 30
      components/HeaderNav/index.vue
  4. 179
      pages/Index/components/OrderPage/components/index.scss
  5. 75
      pages/Index/components/OrderPage/index.vue
  6. 55
      pages/OrderPage/index.vue
  7. 16
      utils/functions.js

19
App.vue
Unescape View File

@ -1,5 +1,7 @@
<script> <script>
export default { import api from "@/utils/functions";
export default {
onLaunch: function() { onLaunch: function() {
console.log('App Launch') console.log('App Launch')
}, },
@ -10,8 +12,19 @@
console.log('App Hide') console.log('App Hide')
}, },
mounted() { mounted() {
} },
created() {
if(!uni.getStorageSync('sysInfo')){
uni.showLoading({title:'加载中'});
api.uniSysInfo().then(data => {
uni.hideLoading();
}).catch(err => {
uni.hideLoading();
uni.$u.toast(err);
});
}
},
} }
</script> </script>

4
components/HeaderNav/components/index.scss
Unescape View File

@ -21,8 +21,8 @@
display:flex; display:flex;
align-items: center; align-items: center;
padding:{ padding:{
top:10rpx; //top:10rpx;
bottom:10rpx; //bottom:10rpx;
} }
} }
.header-back-button{ .header-back-button{

30
components/HeaderNav/index.vue
Unescape View File

@ -5,9 +5,8 @@
<view class="header-container" :style="{ <view class="header-container" :style="{
height:navHeight+'px', height:navHeight+'px',
paddingTop:headerPadding+'px', justifyContent: (isBack?'space-between':'center'),
paddingBottom:headerPadding+'px', padding:menuButtonPadding+'px 0'
justifyContent: (isBack?'space-between':'center')
}"> }">
<view v-show="isBack" class="header-back-button" @click="navBack()"> <view v-show="isBack" class="header-back-button" @click="navBack()">
<u-icon name="arrow-leftward"></u-icon> <u-icon name="arrow-leftward"></u-icon>
@ -44,7 +43,8 @@
navHeight: 32, navHeight: 32,
navPaddingTop: 47, navPaddingTop: 47,
headerPadding:4, headerPadding:4,
isTop:true isTop:true,
menuButtonPadding:0,
} }
}, },
onShow() { onShow() {
@ -55,12 +55,10 @@
}, },
methods: { methods: {
init() { init() {
this.navPaddingTop = api.navHeight().navPaddingTop, let sysInfo = uni.getStorageSync('sysInfo');
this.navHeight = api.navHeight().navHeight, this.navPaddingTop = sysInfo.sysMenuHeight;
this.headerPadding = api.navHeight().headerPadding this.navHeight = sysInfo.menuButtonHeight;
console.log('this.navPaddingTop123',this.navPaddingTop); this.menuButtonPadding = sysInfo.menuButtonPadding;
console.log('this.navHeight',this.navHeight);
console.log('this.headerPadding',this.headerPadding);
}, },
navBack(){ navBack(){
uni.navigateBack({ uni.navigateBack({
@ -70,17 +68,17 @@
}, },
created() { created() {
this.init() this.init()
// onPageScroll:function(e){
// console.log(1);
// }
}, },
updated() {}, updated() {},
mounted() { mounted() {
var that = this; let that = this;
uni.$on('isTop', function(data) { uni.$on('isTop', (data) => {
that.isTop = data; that.isTop = data;
}); });
}
}
} }
</script> </script>

179
pages/Index/components/OrderPage/components/index.scss
Unescape View File

@ -1,99 +1,106 @@
.app-wallpaper{ .order-capsule-container{
position: relative; position: sticky;
background:{
size: 100% 100%; box-sizing: border-box;
repeat: no-repeat; width:100%;
}; padding:10rpx;
.order-capsule-container{ border:2rpx solid #262626;
position: sticky; border-radius: 45rpx;
box-shadow: 1rpx 4rpx 12rpx 0rpx rgba(90,104,103,0.24);
background-color: #F8FAFA;
.order-capsule{
box-sizing: border-box; box-sizing: border-box;
width:100%; padding:20rpx;
padding:10rpx; text-align: center;
border:2rpx solid #262626; font: {
border-radius: 45rpx; size:30rpx;
box-shadow: 1rpx 4rpx 12rpx 0rpx rgba(90,104,103,0.24); weight:500;
background-color: #F8FAFA; }
.order-capsule{ line-height:30rpx;
box-sizing: border-box; border:2rpx solid rgba(0,0,0,0);
padding:20rpx; &.active{
text-align: center; background:{
font: { color:#4DC3B8;
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;
} }
color:#FFFFFF;
border:2rpx solid #262626;
border-radius:35rpx;
} }
} }
.order-screen-container{ }
.order-screen{ .order-screen-container{
padding:40rpx 0 20rpx 0; .order-screen{
padding-right: 66rpx; padding:40rpx 0 20rpx 0;
font-size: 28rpx; padding-right: 66rpx;
line-height: 53rpx; font-size: 28rpx;
color:#646464; line-height: 53rpx;
font-weight: 400; color:#646464;
position: relative; font-weight: 400;
&.active{ position: relative;
color:#000000; &.active{
font-size: 32rpx; color:#000000;
font-weight: 500; font-size: 32rpx;
.order-screen-active{ font-weight: 500;
display:flex;
}
}
.order-screen-active{ .order-screen-active{
display: none; display:flex;
align-items: center;
justify-content: center;
position: absolute;
top: 90rpx;
left: 12rpx;
.img{
width:37rpx;
}
} }
} }
.order-screen-time-container{ .order-screen-active{
flex:1; display: none;
margin-left:auto; align-items: center;
justify-content: flex-end; justify-content: center;
.order-screen{ position: absolute;
// padding-right:0; top: 90rpx;
left: 12rpx;
.img{
width:37rpx;
} }
} }
.order-screen-time-title{
color:#B5B5B5; }
font-size:26rpx; .order-screen-time-container{
font-weight: 400; flex:1;
line-height:53rpx; margin-left:auto;
padding-right: 16rpx; justify-content: flex-end;
} .order-screen{
.order-screen-time-buttton-container{ // padding-right:0;
padding-right: 0; }
} }
.order-screen-time-buttton{ .order-screen-time-title{
padding:8rpx 19rpx; color:#B5B5B5;
color:#4EC2B7; font-size:26rpx;
font-size: 28rpx; font-weight: 400;
font-weight: 400; line-height:53rpx;
background-color:#ffffff; padding-right: 16rpx;
border:1px solid #4EC2B7; }
border-radius: 10rpx; .order-screen-time-buttton-container{
line-height: 28rpx; padding-right: 0;
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-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{ .order-list-container{
width:100%; width:100%;
//max-height: 1000rpx; //max-height: 1000rpx;

75
pages/Index/components/OrderPage/index.vue
Unescape View File

@ -1,44 +1,45 @@
<template> <template>
<view class="app-wallpaper" :style="{ <view class="order-screen-top" :style="{
backgroundImage:'url('+staticImage.wallpaperBgImage+')' top:topStyle
}"> }">
<view class="order-capsule-container row">
<view class="order-capsule col-4"
v-for="(item,index) in screenMenu"
:class="{active:(item.value === screenCheck)}"
@click="selectScreen(item)"
>
{{ item.name }}
</view>
<view class="order-screen-top" :style="{ </view>
// top:(uni.$u.) <view class="order-screen-container row">
}"> <view class="order-screen" v-for="(date, index) in dateSelectData" @click="dayActiveToggle(date)" :class="{active:dayActive === date.value}">
<view class="order-capsule-container row"> {{ date.title }}
<view class="order-capsule col-4" <view class="order-screen-active">
v-for="(item,index) in screenMenu" <image mode="widthFix" class="img" :src="staticImage.screenActiveImg" />
:class="{active:(item.value === screenCheck)}" </view>
@click="selectScreen(item)" </view>
>
{{ item.name }}
</view>
</view> <view class="order-screen-time-container row">
<view class="order-screen-container row"> <view class="order-screen order-screen-time-title">
<view class="order-screen" v-for="(date, index) in dateSelectData" @click="dayActiveToggle(date)" :class="{active:dayActive === date.value}"> 05/06-08-03
{{ date.title }} </view>
<view class="order-screen-active"> <view class="order-screen order-screen-time-buttton-container">
<image mode="widthFix" class="img" :src="staticImage.screenActiveImg" /> <view class="order-screen-time-buttton">
</view> 时间
</view> </view>
</view>
</view>
</view>
</view>
<view class="app-wallpaper" :style="{
backgroundImage:'url('+staticImage.wallpaperBgImage+')'
}">
<view class="order-screen-time-container row">
<view class="order-screen order-screen-time-title">
05/06-08-03
</view>
<view class="order-screen order-screen-time-buttton-container">
<view class="order-screen-time-buttton">
时间
</view>
</view>
</view>
</view>
</view>
<view class="order-list-container"> <view class="order-list-container">
<view class="order-list-item" v-for="(item,index) in orderList"> <view class="order-list-item" v-for="(item,index) of 10">
<view class="order-card-container row"> <view class="order-card-container row">
<view class="order-card-container-background col-12"></view> <view class="order-card-container-background col-12"></view>
<view class="order-card-container-background-main row"> <view class="order-card-container-background-main row">
@ -105,6 +106,11 @@
RightNav, RightNav,
MzButton MzButton
}, },
computed:{
topStyle(){
return (uni.getStorageSync('sysInfo').sysAndMenuHeight)+'px'
},
},
data() { data() {
return { return {
title: 'Hello', title: 'Hello',
@ -156,6 +162,7 @@
}, },
methods: { methods: {
selectScreen(item){ selectScreen(item){
this.screenCheck = item.value; this.screenCheck = item.value;
this.page = 1; this.page = 1;

55
pages/OrderPage/index.vue
Unescape View File

@ -218,8 +218,48 @@
1、文字占位文字占位文字占位文字占位文字占位文字占位文字占位 2、文字占位文字占位文字占位文字占位文字占位文字占位文 1、文字占位文字占位文字占位文字占位文字占位文字占位文字占位 2、文字占位文字占位文字占位文字占位文字占位文字占位文
</view> </view>
</uv-popup> </uv-popup>
<uv-popup ref="addServicePopup" mode="bottom" closeable safeAreaInsetTop safeAreaInsetBottom> <uv-popup ref="addServicePopup" mode="bottom" round="20" closeable safeAreaInsetTop safeAreaInsetBottom>
<view class="pop-service-container">
<u-cell-group custom-style="max-height:700rpx;overflow:auto;">
<u-cell
size="large"
:title="item.name"
isLink
right-icon=""
v-for="(item,index) in addServiceList"
@click="selectAddService(item,index)"
>
<template #value>
<view class="">
<view class="" style="display:flex;align-items: center">
<view class="">
<u-text :text="parseFloat(item.price)+'元'" size="32" style="white-space: nowrap;" line-height="32"></u-text>
</view>
<view class="">
<u-radio-group>
<u-radio
:customStyle="{marginBottom: '0',marginTop: '0',marginLeft:'15rpx'}"
size="32"
:checked="(addServiceChecked.indexOf(item.id))"
@click="selectAddService(item)"
>
</u-radio>
</u-radio-group>
</view>
</view>
</view>
</template>
</u-cell>
</u-cell-group>
<view class="row">
<view class="col-6" style="padding:0 30rpx;">
<MzButton title="取消"></MzButton>
</view>
<view class="col-6" style="padding:0 30rpx;">
<MzButton title="确认" button-color="#4DC3B8" font-color="#fff"></MzButton>
</view>
</view>
</view>
</uv-popup> </uv-popup>
<!-- <RightNav></RightNav> --> <!-- <RightNav></RightNav> -->
</template> </template>
@ -286,7 +326,8 @@
pages:{ pages:{
page:1, page:1,
limit:10 limit:10
} },
addServiceChecked:[],
} }
}, },
onLoad(options) { onLoad(options) {
@ -297,11 +338,17 @@
this.getDefaultAddress(); this.getDefaultAddress();
}, },
methods: { methods: {
serverBottomLower(){
console.log(123123)
},
showAddServicePopup(){ showAddServicePopup(){
this.$refs.addServicePopup.open(); this.$refs.addServicePopup.open();
}, },
selectAddService(item){ selectAddService(item){
if(!this.addServiceChecked.indexOf(item.id)){
this.addServiceChecked.push.apply(item.id);
}
console.log(this.addServiceChecked)
}, },
getStoreServiceList(){ getStoreServiceList(){
getStoreService({address_id: this.address.id}).then(res => { getStoreService({address_id: this.address.id}).then(res => {

16
utils/functions.js
Unescape View File

@ -267,5 +267,21 @@ const api = {
system:this.system 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; export default api;

Write Preview
Loading…
Cancel
Save