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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      App.vue
  2. 4
      components/HeaderNav/components/index.scss
  3. 30
      components/HeaderNav/index.vue
  4. 177
      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

17
App.vue
Unescape View File

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

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

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

30
components/HeaderNav/index.vue
Unescape View File

@ -5,9 +5,8 @@
<view class="header-container" :style="{
height:navHeight+'px',
paddingTop:headerPadding+'px',
paddingBottom:headerPadding+'px',
justifyContent: (isBack?'space-between':'center')
justifyContent: (isBack?'space-between':'center'),
padding:menuButtonPadding+'px 0'
}">
<view v-show="isBack" class="header-back-button" @click="navBack()">
<u-icon name="arrow-leftward"></u-icon>
@ -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;
});
}
}
}
</script>

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

@ -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;

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

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

55
pages/OrderPage/index.vue
Unescape View File

@ -218,8 +218,48 @@
1、文字占位文字占位文字占位文字占位文字占位文字占位文字占位 2、文字占位文字占位文字占位文字占位文字占位文字占位文
</view>
</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>
<!-- <RightNav></RightNav> -->
</template>
@ -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 => {

16
utils/functions.js
Unescape View File

@ -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;

Write Preview
Loading…
Cancel
Save