czg_team/cashier_wx
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页

Browse Source
This commit is contained in:
wwz
2025-02-10 11:25:48 +08:00
parent 5add1f1282
commit ede860cec3
24 changed files with 2536 additions and 17657 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
components/CustomNavbars.vue
View File

@@ -1,99 +1,156 @@
<template>
<view>
<!-- 占位高度 -->
<view v-if="hasPlaceholder" :style="{ height: `${height}px` }"></view>
<view class="navbar" :style="{ height: `${height}px`, backgroundColor: isTransparent ? 'transparent' : '#fff' }">
<!-- 左边返回键 -->
<view v-if="showBack" @click="goBack" class="back-icon">
<uni-icons type="left" size="24"></uni-icons>
</view>
<!-- 中间内容 -->
<view class="center-content" :style="centerContentStyle">
<view v-if="showSearch">
<uni-search-bar placeholder="搜索"></uni-search-bar>
</view>
<view v-else>{{ title }}</view>
</view>
<!-- 右边文字 -->
<view v-if="rightText" class="right-text" @click="onRightTextClick">{{ rightText }}</view>
</view>
</view>
<view>
<!-- 占位高度 -->
<view v-if="hasPlaceholder" :style="{ height: `${height}px` }"></view>
<view class="navbar" :style="[centerContentStyle,navbarStyle]">
<!-- 左边返回键 -->
<view v-if="showBack" @click="goBack" class="back-icon">
<up-icon name="arrow-left" color="#606266" size="24"></up-icon>
</view>
<!-- 中间内容 -->
<view class="center-content" >
<view v-if="showSearch">
<view class="navbar_tow_tow flex-start">
<input type="text" class="navbar_tow_towinput" v-model="keyword" placeholder="请输入关键字" />
<view class="navbar_tow_towview">搜索</view>
</view>
</view>
<view v-else>{{ title }}</view>
</view>
<!-- 右边文字 -->
<view v-if="rightText" class="right-text" @click="onRightTextClick">{{ rightText }}</view>
<view v-else></view>
</view>
</view>
</template>
<script setup>
import { useNavbarStore } from '@/store/navbarStore';
import { ref, onMounted } from 'vue';
import {
useNavbarStore
} from '@/stores/navbarStore';
import {
ref,
watch,
onMounted,
computed
} from 'vue';
const store = useNavbarStore();
const { showBack, rightText, showSearch, title, isTransparent, height, hasPlaceholder } = store;
const goBack = () => {
uni.navigateBack({
delta: 1
});
};
const onRightTextClick = () => {
console.log('右边文字被点击');
};
const centerContentStyle = ref({});
onMounted(() => {
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
const systemInfo = uni.getSystemInfoSync();
const statusBarHeight = systemInfo.statusBarHeight;
// 计算标题的垂直偏移量
const verticalOffset = menuButtonInfo.top - statusBarHeight;
const titleHeight = menuButtonInfo.height;
centerContentStyle.value = {
paddingTop: `${20}px`,
height: `${titleHeight}px`,
lineHeight: `${titleHeight}px`,
boxSizing: 'border-box',
const store = useNavbarStore();
const {
showBack,
rightText,
showSearch,
title,
isTransparent,
height,
hasPlaceholder
} = store;
};
console.log(centerContentStyle)
});
const keyword = ref()
const goBack = () => {
uni.navigateBack({
delta: 1
});
};
const onRightTextClick = () => {
console.log('右边文字被点击');
};
const navbarStyle = computed(() => {
return {
height: `${height}px`,
backgroundColor: store.scrollTop >= 44 ? '#fff' : 'transparent'
};
});
// 小程序单独胶囊的样式
const centerContentStyle = ref({});
onMounted(() => {
// #ifdef MP-WEIXIN
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
const systemInfo = uni.getSystemInfoSync();
const statusBarHeight = systemInfo.statusBarHeight;
// 计算标题的垂直偏移量
// const verticalOffset = menuButtonInfo.top - statusBarHeight;
const verticalOffset = menuButtonInfo.top > menuButtonInfo.height ? menuButtonInfo.height : Math.abs(menuButtonInfo.top - menuButtonInfo.height)
const titleHeight = menuButtonInfo.height;
centerContentStyle.value = {
paddingTop: `${verticalOffset}px`,
paddingRight:`${menuButtonInfo.width +20}px`,
height: `${height}px`,
lineHeight: `${height}px`,
boxSizing: 'border-box',
};
// #endif
});
</script>
<style scoped>
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
z-index: 999;
box-sizing: border-box;
}
<style lang="scss" scoped>
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 6px;
z-index: 999;
.back-icon {
cursor: pointer;
display: flex;
align-items: center;
margin-right: 10px;
}
.back-icon {
cursor: pointer;
}
.center-content {
flex: 1;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.center-content {
flex: 1;
text-align: center;
.right-text {
cursor: pointer;
display: flex;
align-items: center;
margin-left: 10px;
font-size: 16px;
line-height: 1;
}
.navbar_tow_tow {
position: relative;
height: 100%;
line-height: 100%;
flex: 1;
margin-left: 10rpx;
.navbar_tow_towview {
position: absolute;
right: 4rpx;
top: 50%;
transform: translate(0, -50%);
text-align: center;
background: #FEE06A;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 28rpx;
color: #333333;
width: 116rpx;
height: 56rpx;
line-height: 56rpx;
border-radius: 34rpx 34rpx 34rpx 34rpx;
}
.navbar_tow_towinput {
padding-left: 32rpx;
padding: 12rpx 120rpx 12rpx 32rpx;
height: 100%;
flex: auto;
background: #FFFFFF;
border-radius: 34rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 28rpx;
color: #999999;
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
white-space: nowrap; //溢出不换行
}
}
}
.right-text {
cursor: pointer;
}
}
</style>

73
components/indexnav.vue
View File

@@ -2,14 +2,17 @@
<view>
<!-- 占位高度 -->
<view v-if="hasPlaceholder" :style="{ height: `${height}px` }"></view>
<view class="navbar"
:style="{ height: `${height}px`, backgroundColor: isTransparent ? 'transparent' : '#fff' }">
<!-- 左边返回键 -->
<view class="navbar" :style="[centerContentStyle,navbarStyle]">
<!-- 左边返回键 ,-->
<view v-if="showBack" @click="goBack" class="back-icon">
<up-icon name="arrow-left" color="#606266" size="24"></up-icon>
<view class="navbar_tow_one flex-start">
<text class="textnth-childone">零点八零</text>
<text class="textnth-childtow">西安市</text>
<up-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333" size="16"></up-icon>
</view>
</view>
<!-- 中间内容 -->
<view class="center-content" :style="centerContentStyle">
<view class="center-content">
<view v-if="showSearch">
<view class="navbar_tow_tow flex-start">
<input type="text" class="navbar_tow_towinput" v-model="keyword" placeholder="请输入关键字" />
@@ -20,6 +23,7 @@
</view>
<!-- 右边文字 -->
<view v-if="rightText" class="right-text" @click="onRightTextClick">{{ rightText }}</view>
<view v-else></view>
</view>
</view>
</template>
@@ -31,7 +35,8 @@
import {
ref,
watch,
onMounted
onMounted,
computed
} from 'vue';
const store = useNavbarStore();
@@ -42,9 +47,12 @@
title,
isTransparent,
height,
hasPlaceholder
hasPlaceholder,
scrollTop
} = store;
const keyword = ref()
const goBack = () => {
uni.navigateBack({
delta: 1
@@ -52,29 +60,36 @@
};
const onRightTextClick = () => {
// 这里可以添加右边文字点击的处理逻辑
console.log('右边文字被点击');
};
const navbarStyle = computed(() => {
return {
height: `${height}px`,
backgroundColor: store.scrollTop >= 44 ? '#F9F9F9' : 'transparent'
};
});
// 小程序单独胶囊的样式
const centerContentStyle = ref({});
onMounted(() => {
// #ifdef MP-WEIXIN
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
const systemInfo = uni.getSystemInfoSync();
const statusBarHeight = systemInfo.statusBarHeight;
// 计算标题的垂直偏移量
const verticalOffset = menuButtonInfo.top - statusBarHeight;
// const verticalOffset = menuButtonInfo.top - statusBarHeight;
const verticalOffset = menuButtonInfo.top > menuButtonInfo.height ? menuButtonInfo.height : Math.abs(
menuButtonInfo.top - menuButtonInfo.height)
const titleHeight = menuButtonInfo.height;
centerContentStyle.value = {
marginTop: `${titleHeight}px`,
height: `${titleHeight}px`,
lineHeight: `${titleHeight}px`,
paddingTop: `${verticalOffset}px`,
paddingRight: `${menuButtonInfo.width +20}px`,
height: `${height}px`,
lineHeight: `${height}px`,
boxSizing: 'border-box',
};
console.log(centerContentStyle)
// #endif
});
</script>
@@ -92,6 +107,26 @@
.back-icon {
cursor: pointer;
.navbar_tow_one {
height: 100%;
line-height: 100%;
.textnth-childone {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
font-size: 28rpx;
color: #333333;
}
.textnth-childtow {
margin-left: 16rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 28rpx;
color: #333333;
}
}
}
.center-content {
@@ -124,7 +159,7 @@
.navbar_tow_towinput {
padding-left: 32rpx;
padding: 12rpx 120rpx 12rpx 32rpx;
padding: 12rpx 120rpx 12rpx 8rpx;
height: 100%;
flex: auto;
background: #FFFFFF;