zm/sociology_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页+我的

Browse Source
This commit is contained in:
始于初见
2024-04-19 10:35:20 +08:00
parent 1bcb13ce7a
commit 8407d51fb6
538 changed files with 934456 additions and 1635 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
uni_modules/z-nav-bar/components/z-nav-bar/z-nav-bar.vue
View File

@@ -1,81 +1,108 @@
<template>
<view>
<view
:class="[navFixed ? 'header_fixed' : '', type == 'transparent' ? 'header_absolute': '', navShadow ? 'header_shadow': '', themeBgColorName]"
:style="[navBgColor ? { backgroundImage: navBgColor } : {}, { paddingTop: statusBarHeight + 'px', color: navFontColor, opacity: transparentValue}]"
>
:class="[navFixed ? 'header_fixed' : '', type == 'transparent' ? 'header_absolute' : '', navShadow ? 'header_shadow' : '', themeBgColorName]"
:style="[navBgColor ? { backgroundImage: navBgColor } : {}, { paddingTop: statusBarHeight + 'px', color: navFontColor, opacity: transparentValue }]">
<view class="header_content">
<view class="header_left_box">
<slot name="left">
<view class="header_left_info" :class="[isTwoBtn ? 'header_btnMongol' : '' , isWhite && isTwoBtn ? 'header_colorWhite_btnMongol' : '']" v-if="back || $slots.left || home">
<view class="header_left_back" :class="[ isTwoBtn ? 'header_btnMongol_left_back' : '' ]" v-if="back && !firstPage" @click="onBackPage">
<image class="header_icon" v-if="isWhite" src="../../static/icon_back_white.png" mode="aspectFit"></image>
<image class="header_icon" v-else src="../../static/icon_back_black.png" mode="aspectFit"></image>
<view class="header_left_info"
:class="[isTwoBtn ? 'header_btnMongol' : '', isWhite && isTwoBtn ? 'header_colorWhite_btnMongol' : '']"
v-if="back || $slots.left || home">
<view class="header_left_back" :class="[isTwoBtn ? 'header_btnMongol_left_back' : '']"
v-if="back && !firstPage" @click="onBackPage">
<image class="header_icon" v-if="isWhite" src="../../static/icon_back_white.png"
mode="aspectFit"></image>
<image class="header_icon" v-else src="../../static/icon_back_black.png"
mode="aspectFit">
</image>
</view>
<text class="header_left_line" :class="[isWhite ? 'header_colorWhite_left_line' : '']" v-if="isTwoBtn"></text>
<view class="header_left_home" :class="[isTwoBtn ? 'header_btnMongol_left_home' : '']" v-if="(firstPage && back) || home" @click="onBackHome">
<image class="header_icon" v-if="isWhite" src="../../static/icon_home_white.png" mode="aspectFit"></image>
<image class="header_icon" v-else src="../../static/icon_home_black.png" mode="aspectFit"></image>
<text class="header_left_line" :class="[isWhite ? 'header_colorWhite_left_line' : '']"
v-if="isTwoBtn"></text>
<view class="header_left_home" :class="[isTwoBtn ? 'header_btnMongol_left_home' : '']"
v-if="(firstPage && back) || home" @click="onBackHome">
<image class="header_icon" v-if="isWhite" src="../../static/icon_home_white.png"
mode="aspectFit"></image>
<image class="header_icon" v-else src="../../static/icon_home_black.png"
mode="aspectFit">
</image>
</view>
</view>
</slot>
<view class="header_title" v-if="!titleCenter && ($slots.default || navTitle)" :style="{ color: navFontColor }">
<view class="header_title" v-if="!titleCenter && ($slots.default || navTitle)"
:style="{ color: navFontColor }">
<slot>
<text :style="{ color: navFontColor }">{{ navTitle }}</text>
</slot>
</view>
</view>
<view class="header_title header_title_center" v-if="titleCenter && ($slots.default || navTitle)" :style="{ color: navFontColor }">
<view class="header_title header_title_center" v-if="titleCenter && ($slots.default || navTitle)"
:style="{ color: navFontColor }">
<slot>
<text :style="{ color: navFontColor }">{{ navTitle }}</text>
</slot>
</view>
<view class="header_right_info"><slot name="right"></slot></view>
<view class="header_right_info">
<slot name="right"></slot>
</view>
</view>
</view>
<view
class="header_transparentFixed header_fixed"
v-if="type == 'transparentFixed'"
:style="{ paddingTop: statusBarHeight + 'px', color: navTransparentFixedFontColor, opacity: 1 - transparentValue, zIndex: transparentValue < 0.3 ? 100 : 90}"
>
<view class="header_transparentFixed header_fixed" v-if="type == 'transparentFixed'"
:style="{ paddingTop: statusBarHeight + 'px', color: navTransparentFixedFontColor, opacity: 1 - transparentValue, zIndex: transparentValue < 0.3 ? 100 : 90 }">
<view class="header_content">
<view class="header_left_box">
<slot name="transparentFixedLeft">
<view
class="header_left_info header_transparentFixed_left_info"
:class="[ isWhite ? 'header_transparentFixed_colorWhite_left_info' : '' ]"
v-if="back || $slots.left || home"
>
<view class="header_left_back" :class="[ isTwoBtn ? 'header_btnMongol_left_back' : '' ]" v-if="back && !firstPage" @click="onBackPage">
<image class="header_icon" v-if="isWhite" src="../../static/icon_back_white.png" mode="aspectFit"></image>
<image class="header_icon" v-else src="../../static/icon_back_black.png" mode="aspectFit"></image>
<view class="header_left_info header_transparentFixed_left_info"
:class="[isWhite ? 'header_transparentFixed_colorWhite_left_info' : '']"
v-if="back || $slots.left || home">
<view class="header_left_back" :class="[isTwoBtn ? 'header_btnMongol_left_back' : '']"
v-if="back && !firstPage" @click="onBackPage">
<image class="header_icon" v-if="isWhite" src="../../static/icon_back_white.png"
mode="aspectFit"></image>
<image class="header_icon" v-else src="../../static/icon_back_black.png"
mode="aspectFit">
</image>
</view>
<text class="header_left_line" v-if="isTwoBtn"></text>
<view class="header_left_home" :class="[isTwoBtn ? 'header_btnMongol_left_home' : '']" v-if="(firstPage && back) || home" @click="onBackHome">
<image class="header_icon" v-if="isWhite" src="../../static/icon_home_white.png" mode="aspectFit"></image>
<image class="header_icon" v-else src="../../static/icon_home_black.png" mode="aspectFit"></image>
<view class="header_left_home" :class="[isTwoBtn ? 'header_btnMongol_left_home' : '']"
v-if="(firstPage && back) || home" @click="onBackHome">
<image class="header_icon" v-if="isWhite" src="../../static/icon_home_white.png"
mode="aspectFit"></image>
<image class="header_icon" v-else src="../../static/icon_home_black.png"
mode="aspectFit">
</image>
</view>
</view>
</slot>
<view class="header_title" v-if="!titleCenter && (navTitle || $slots.transparentFixed)" :style="{ color: navTransparentFixedFontColor }">
<view class="header_title" v-if="!titleCenter && (navTitle || $slots.transparentFixed)"
:style="{ color: navTransparentFixedFontColor }">
<slot name="transparentFixed">
<text :style="{ color: navTransparentFixedFontColor }">{{ navTitle }}</text>
</slot>
</view>
</view>
<view class="header_title header_title_center" v-if="titleCenter && (navTitle || $slots.transparentFixed)" :style="{ color: navTransparentFixedFontColor }">
<view class="header_title header_title_center"
v-if="titleCenter && (navTitle || $slots.transparentFixed)"
:style="{ color: navTransparentFixedFontColor }">
<slot name="transparentFixed">
<text :style="{ color: navTransparentFixedFontColor }">{{ navTitle }}</text>
</slot>
</view>
<view class="header_right_info"><slot name="transparentFixedRight"></slot></view>
<view class="header_right_info">
<slot name="transparentFixedRight"></slot>
</view>
</view>
</view>
<view v-if="type == 'fixed'" :style="{ paddingTop: statusBarHeight + 'px' }"><view class="header_station"></view></view>
<view v-if="type == 'fixed'" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="header_station"></view>
</view>
</view>
</template>
<script>
import componentConfig from "@/config/componentConfig"
import {
mainPagePath,
homePath
} from "@/config/componentConfig"
//白色表达值
const whiteList = ['#FFF', '#fff', '#FFFFFF', '#ffffff', 'white', 'rgb(255,255,255)', 'rgba(255,255,255,1)'];
export default {
@@ -85,53 +112,53 @@ export default {
// 2000 不显示返回按钮
// 3000 自定义返回按钮方法，点击返回箭头后会发送一个backClick事件
backState: {
type: [String, Number],
default: function() {
type: [String, Number],
default: function () {
return 1000;
}
},
//是否显示返回首页按钮
// 1000 显示首页按钮
// 2000 不显示首页按钮
// 3000 自定义首页按钮方法，点击首页箭头后会发送一个homeClick事件
// 1000 显示首页按钮
// 2000 不显示首页按钮
// 3000 自定义首页按钮方法，点击首页箭头后会发送一个homeClick事件
homeState: {
type: [String, Number],
default: function() {
default: function () {
return 2000;
}
},
//导航背景色，支持渐变
bgColor: {
type: [String, Array],
default: function() {
default: function () {
return '#FFFFFF';
}
},
// 导航背景色渐变角度
bgColorAngle: {
type: [String, Number],
default: function() {
default: function () {
return 90;
}
},
//导航字体颜色，字体颜色为白色的时候会把手机状态栏设置为白色，否则为黑色
fontColor: {
type: String,
default: function() {
default: function () {
return '#000000';
}
},
//标题是否居中
titleCenter: {
type: Boolean,
default: function() {
default: function () {
return true;
}
},
//标题
title: {
type: String,
default: function() {
default: function () {
return '';
}
},
@@ -141,28 +168,28 @@ export default {
//transparentFixed 透明固定的
type: {
type: String,
default: function() {
default: function () {
return 'fixed';
}
},
//透明固定的时候字体颜色
transparentFixedFontColor: {
type: String,
default: function() {
default: function () {
return '#000000';
}
},
// 屏幕滑动距离顶部距离(透明固定导航比传)
scrollTop: {
type: Number,
default: function() {
default: function () {
return 0;
}
},
// 是否显示阴影
shadow: {
type: Boolean,
default: function() {
default: function () {
return false;
}
}
@@ -192,7 +219,7 @@ export default {
back() {
return this.backState == 1000 || this.backState == 3000;
},
home() {
home() {
return this.homeState == 1000;
},
//导航固定
@@ -256,7 +283,7 @@ export default {
let currentPages = getCurrentPages();
let pageLen = currentPages.length;
//判断是否是第一个页面，如果是有设置back为true的页面，将不显示返回箭头，而显示返回首页按钮
if (pageLen == 1 && !componentConfig.mainPagePath.includes(currentPages[0].route)) {
if (pageLen == 1 && !mainPagePath.includes(currentPages[0].route)) {
this.firstPage = true;
}
},
@@ -272,13 +299,13 @@ export default {
},
//返回首页
onBackHome() {
if(this.homeState == 3000){
this.$emit('homeClick');
} else {
uni.reLaunch({
url: componentConfig.homePath
});
}
if (this.homeState == 3000) {
this.$emit('homeClick');
} else {
uni.reLaunch({
url: homePath
});
}
},
pageScroll(e) {
if (this.type == 'transparentFixed') {
@@ -300,10 +327,10 @@ export default {
if (this.type == 'transparent') {
this.navBgColor = '';
} else if (/^#|rgb\(|rgba\(/.test(val)) {
this.navBgColor = 'linear-gradient(90deg,' + val + ',' + val + ')';
this.navBgColor = 'linear-gradient(90deg,' + val + ',' + val + ')';
} else {
this.themeBgColorName = val;
this.navBgColor = '';
this.themeBgColorName = val;
this.navBgColor = '';
}
} else if (Array.isArray(val) && val.length >= 2) {
let navBgColor = 'linear-gradient(' + this.bgColorAngle + 'deg';
@@ -440,7 +467,6 @@ export default {
}
.header_title {
width: 80%;
height: 88rpx;
font-size: 32rpx;
padding-left: 30rpx;
@@ -531,4 +557,4 @@ export default {
.header_colorWhite_left_line {
background-color: rgba(255, 255, 255, 0.3);
}
</style>
</style>