汇融云链2

2023-02-13 18:43:39 +08:00
parent 76dca84266
commit a29788866e
331 changed files with 95753 additions and 0 deletions
--- a/mallplusui-uniapp-app2/components/zhouWei-navBar/index.vue
+++ b/mallplusui-uniapp-app2/components/zhouWei-navBar/index.vue
@@ -0,0 +1,430 @@
+<template>
+	<view>
+		<view
+			class="header"
+			:class="{ fixed: navFixed, absolute: type == 'transparent', line: navLine, colorWhite: isWhite, themeBgColor: themeBgColor }"
+			:style="{ paddingTop: statusBarHeight + 'px', backgroundImage: navBgColor, color: navFontColor, opacity: transparentValue }"
+		>
+			<view class="left_box">
+				<slot name="left">
+					<view class="left_info" :class="{ btnMongol: isTwoBtn }" v-if="back || $slots.left || home">
+						<view class="back" v-if="back && !firstPage" @click="onBackPage"></view>
+						<text v-if="isTwoBtn"></text>
+						<view class="home" v-if="(firstPage && back) || home" @click="onBackHome"></view>
+					</view>
+				</slot>
+				<view class="title" :class="{ center: titleCenter, color: navFontColor }" v-if="$slots.default || navTitle">
+					<slot>{{ navTitle }}</slot>
+				</view>
+			</view>
+			<view class="right_info"><slot name="right"></slot></view>
+		</view>
+		<view
+			class="header transparentFixed fixed"
+			:class="{ colorWhite: isWhite }"
+			v-if="type == 'transparentFixed'"
+			:style="{ paddingTop: statusBarHeight + 'px', color: navTransparentFixedFontColor, opacity: 1 - transparentValue, zIndex: transparentValue < 0.3 ? 100 : 90 }"
+		>
+			<view class="left_box">
+				<slot name="transparentFixedLeft">
+					<view class="left_info" v-if="back || $slots.left || home">
+						<view class="back" v-if="back && !firstPage" @click="onBackPage"></view>
+						<text v-if="isTwoBtn"></text>
+						<view class="home" v-if="(firstPage && back) || home" @click="onBackHome"></view>
+					</view>
+				</slot>
+				<view class="title" :class="{ center: titleCenter }" v-if="$slots.default || navTitle">
+					<slot name="transparentFixed">{{ navTitle }}</slot>
+				</view>
+			</view>
+			<view class="right_info"><slot name="transparentFixedRight"></slot></view>
+		</view>
+		<view v-if="type == 'fixed'" class="station" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
+	</view>
+</template>
+<script>
+// 主页页面的页面路径
+// 关联功能：打开的页面只有一个的时候右上角自动显示返回首页按钮，下面这个数组是排除显示返回首页的页面。
+// 主页使用场景：小程序分享出去的页面，用户点击开是分享页面，很多情况下是没有返回首页按钮的
+const mainPagePath = ['pages/navList'];
+//返回首页的地址
+const homePath = '/pages/navList';
+//白色表达值
+const whiteList = ['#FFF', '#FFFFFF', 'white', 'rgb(255,255,255)', 'rgba(255,255,255,1)'];
+export default {
+	props: {
+		//是否显示返回按钮
+		// 1000 显示返回按钮
+		// 2000 不显示返回按钮
+		// 3000 自定义返回按钮方法，点击返回箭头后会发送一个backClick事件
+		// 默认不显示返回按钮
+		backState: {
+			default: function() {
+				return 2000;
+			}
+		},
+		//是否显示返回首页按钮
+		home: {
+			type: Boolean,
+			default: function() {
+				return false;
+			}
+		},
+		//导航背景色，支持渐变
+		bgColor: {
+			type: [String, Array],
+			default: function() {
+				return '#FFF';
+			}
+		},
+		// 导航背景色渐变角度
+		bgColorAngle: {
+			type: [String, Number],
+			default: function() {
+				return 90;
+			}
+		},
+		//导航字体颜色，字体颜色为白色的时候会把手机状态栏设置为白色，否则为黑色
+		fontColor: {
+			type: String,
+			default: function() {
+				return '#000';
+			}
+		},
+		//标题是否居中
+		titleCenter: {
+			type: Boolean,
+			default: function() {
+				return true;
+			}
+		},
+		//标题
+		title: {
+			type: String,
+			default: function() {
+				return '';
+			}
+		},
+		//类型 fixed为固定 默认
+		// ordinary 普通的 不固定
+		// transparent 透明不固定的
+		//transparentFixed  透明固定的
+		type: {
+			type: String,
+			default: function() {
+				return 'fixed';
+			}
+		},
+		//透明固定的时候字体颜色
+		transparentFixedFontColor: {
+			type: String,
+			default: function() {
+				return '#000';
+			}
+		}
+		
+	},
+	data() {
+		return {
+			//当前页面是否是第一个页面
+			firstPage: false,
+			//透明度值
+			transparentValue: 1,
+			//标题
+			navTitle: '',
+			//字体色
+			navFontColor: '#000',
+			//背景色
+			navBgColor: 'linear-gradient(90deg, #FFF 0%, #FFF 100%)',
+			//透明底字体色
+			navTransparentFixedFontColor: '#000',
+			// 是否使用
+			themeBgColor: false,
+			// 导航栏高度
+			statusBarHeight: 0
+		};
+	},
+	computed: {
+		back() {
+			return this.backState == 1000 || this.backState == 3000;
+		},
+		//导航固定
+		navFixed() {
+			if (this.type == 'transparentFixed' || this.type == 'fixed') {
+				return true;
+			} else {
+				return false;
+			}
+		},
+		//导航底部线是否显示
+		navLine() {
+			return this.type !== 'transparent' && whiteList.includes(this.navBgColor);
+		},
+		//导航字体是否是白色颜色
+		isWhite() {
+			return whiteList.includes(this.navFontColor);
+		},
+		//右上角是否有两个按钮
+		isTwoBtn() {
+			return (this.backState == 1000 || this.backState == 3000) && this.home && !this.firstPage;
+		}
+	},
+	watch: {
+		title(val) {
+			this.navTitle = val;
+		},
+		fontColor(val) {
+			this.navFontColor = val;
+			this.settingColor();
+		},
+		bgColor(val) {
+			this.getNavBgColor(val);
+		},
+		transparentFixedFontColor(val) {
+			this.navTransparentFixedFontColor = val;
+		}
+	},
+	//第一次加载
+	created() {
+		this.navTitle = this.title;
+		this.navFontColor = this.fontColor;
+		this.getNavBgColor(this.bgColor);
+		this.navTransparentFixedFontColor = this.transparentFixedFontColor;
+		//获取手机状态栏高度
+		this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
+		const _this = this;
+		if (this.type == 'transparentFixed') {
+			this.transparentValue = 0;
+		}
+		this.settingColor();
+		//获取所有页面
+		let currentPages = getCurrentPages();
+		let pageLen = currentPages.length;
+		//判断是否是第一个页面，如果是有设置back为true的页面，将不显示返回箭头，而现实返回首页按钮
+		if (pageLen == 1 && !mainPagePath.includes(currentPages[0].route)) {
+			this.firstPage = true;
+		}
+		//监听页面滚动，type为transparentFixed的时候页面向下滚动的时候导航逐渐变白
+		if (this.type == 'transparentFixed') {
+			// #ifndef H5
+			currentPages[pageLen - 1].onPageScroll = function(e) {
+				_this.$emit('scroll', e);
+				if (e.scrollTop > 180) {
+					_this.transparentValue = 1;
+				} else {
+					_this.transparentValue = e.scrollTop / 180;
+				}
+			};
+			// #endif
+			// #ifdef H5
+			window.onscroll = function(e) {
+				let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+				_this.$emit('scroll', { scrollTop: scrollTop });
+				if (scrollTop > 180) {
+					_this.transparentValue = 1;
+				} else {
+					_this.transparentValue = scrollTop / 180;
+				}
+			};
+			// #endif
+		}
+	},
+	//方法
+	methods: {
+		//返回上一页面
+		onBackPage() {
+			if (this.backState == 3000) {
+				this.$emit('backClick');
+			} else {
+				uni.navigateBack();
+			}
+		},
+		//返回首页
+		onBackHome() {
+			uni.switchTab({
+				url: homePath
+			});
+		},
+		// 获取导航背景颜色
+		getNavBgColor(val) {
+			if (val == 'themeBgColor') {
+				this.themeBgColor = true;
+				this.navBgColor = '';
+			} else {
+				if (typeof val == 'string') {
+					this.navBgColor = 'linear-gradient(90deg, ' + val + ' 0%, ' + val + ' 100%)';
+				} else if (val instanceof Array && val.length >= 2) {
+					let navBgColor = 'linear-gradient(' + this.bgColorAngle + 'deg';
+					val.forEach(item => {
+						if (typeof item == 'string') {
+							navBgColor += ',' + item;
+						} else if (typeof item == 'object') {
+							navBgColor += ',' + item.color + ' ' + item.scale;
+						}
+					});
+					navBgColor += ')';
+					this.navBgColor = navBgColor;
+				}
+			}
+		},
+		//设置手机状态栏颜色
+		settingColor() {
+			//判断导航栏颜色
+			if (whiteList.includes(this.navFontColor)) {
+				// 改变手机状态栏颜色
+				uni.setNavigationBarColor({
+					frontColor: '#ffffff',
+					backgroundColor: this.navBgColor
+				});
+			} else {
+				// 改变手机状态栏颜色
+				uni.setNavigationBarColor({
+					frontColor: '#000000',
+					backgroundColor: this.navBgColor
+				});
+			}
+		}
+	}
+};
+</script>
+<style lang="scss" scoped>
+.station {
+	box-sizing: content-box;
+	height: 88upx;
+}
+.header {
+	display: flex;
+	align-items: flex-end;
+	position: relative;
+	justify-content: space-between;
+	box-sizing: content-box;
+	height: 88upx;
+	/* #ifdef MP */
+	padding-right: 190upx;
+	/* #endif */
+	&.fixed {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 99;
+	}
+	&.absolute {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 99;
+		background-color: transparent !important;
+	}
+	&.line {
+		//需要显示线条的在这打开
+		// border-bottom: 2upx solid #f5f5f5;
+		box-shadow: 0 0 6upx 0 #ddd;
+	}
+	&.transparentFixed {
+		border-bottom: 0;
+		background-color: initial;
+		background-image: initial;
+		.left_info {
+			border: 2upx solid rgba(0, 0, 0, 0.1);
+			background-color: rgba(255, 255, 255, 0.7);
+			border-radius: 33upx;
+			box-sizing: border-box;
+		}
+		&.colorWhite .left_info {
+			border: 2upx solid rgba(255, 255, 255, 0.3);
+			background-color: rgba(0, 0, 0, 0.2);
+		}
+	}
+	//颜色白色
+	&.colorWhite {
+		.left_info {
+			&.btnMongol {
+				border: 2upx solid rgba(255, 255, 255, 0.3);
+				background-color: rgba(0, 0, 0, 0.2);
+			}
+			.back {
+				background-image: url('../../static/zhouWei-navBar/icon_back_white.png');
+			}
+			text {
+				background-color: rgba(255, 255, 255, 0.3);
+			}
+			.home {
+				background-image: url('../../static/zhouWei-navBar/icon_home_white.png');
+			}
+		}
+	}
+	.left_box {
+		display: flex;
+		align-items: center;
+		height: 100%;
+	}
+	$height: 56upx;
+	.left_info {
+		margin-right: 30upx;
+		display: flex;
+		align-items: center;
+		height: $height;
+		transition: all 0.6s;
+		margin-left: 16upx;
+		&.btnMongol {
+			border-radius: 33upx;
+			border: 2upx solid rgba(0, 0, 0, 0.1);
+			background-color: rgba(255, 255, 255, 0.7);
+			box-sizing: border-box;
+			.back,
+			.home {
+				width: 70upx;
+			}
+		}
+		.back {
+			background-image: url('../../static/zhouWei-navBar/icon_back_black.png');
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: auto 55%;
+			width: $height;
+			height: 100%;
+		}
+		text {
+			height: 30upx;
+			width: 2upx;
+			background-color: rgba(255, 255, 255, 0.4);
+		}
+		.home {
+			background-image: url('../../static/zhouWei-navBar/icon_home_black.png');
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: auto 55%;
+			width: $height;
+			height: 100%;
+		}
+	}
+	.title {
+		height: 88upx;
+		font-size: 32upx;
+		padding-left: 30upx;
+		padding-right: 30upx;
+		font-weight: 700;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		display: flex;
+		align-items: center;
+		/* #ifndef APP-PLUS||H5 */
+		max-width: 60vw;
+		/* #endif */
+		&.center {
+			position: absolute;
+			bottom: 0;
+			left: 50%;
+			transform: translateX(-50%);
+		}
+	}
+	.right_info {
+		height: 100%;
+		display: flex;
+		align-items: center;
+	}
+}
+</style>
--- a/mallplusui-uniapp-app2/components/zhouWei-navBar/zhouWei-navBar.md
+++ b/mallplusui-uniapp-app2/components/zhouWei-navBar/zhouWei-navBar.md
@@ -0,0 +1,132 @@
+# zhouWei-navBar 适用于 uni-app 项目的头部导航组件
+
+导航栏组件，主要用于头部导航，组件名：zhouWei-navBar
+
+本组件目前兼容微信小程序、H5、5+APP。其他平台没试过
+
+本组件支持模式：
+1. 普通固定顶部导航  
+2. 透明导航  
+3. 透明固定顶部导航 
+4. 不固定普通导航 
+5. 颜色渐变导航
+
+本组件内置特殊功能：
+1. fontColor字体颜色为白色的时候手机状态栏会自动显示白色，否则显示灰色
+2. 页面为第一个页面时左上角自动显示返回主页的图标(具体看组件：zhouWei-navBar/index.vue =>页面script)
+
+### 本组件全局配置（位置：zhouWei-navBar/index.vue =>页面script）
+1. 主页页面的页面路径
+2. 首页页面路径
+
+```
+// 主页页面的页面路径
+// 关联功能：打开的页面只有一个的时候右上角自动显示返回首页按钮，下面这个数组是排除显示返回首页的页面。
+// 主页使用场景：小程序分享出去的页面，用户点击开是分享页面，很多情况下是没有返回首页按钮的
+const mainPagePath = ["pages/navList"];
+//返回首页的地址
+const homePath = "/pages/navList";
+```
+
+### 在main.js引入组件，并注册全局组件
+```
+import zhouWeiNavBar from "@/components/zhouWei-navBar";
+Vue.component("nav-bar", zhouWeiNavBar);
+```
+
+### 或者在页面script中引入组件，并注册组件
+```
+import navBar from "@/components/zhouWei-navBar";
+export default {
+    components: {navBar}
+}
+```
+
+### 案例一
+默认特性：左上角有返回箭头，nav-bar导航固定在顶部、标题居中
+```
+<nav-bar>我的</nav-bar>
+```
+
+### 案例二
+特性：无返回箭头、字体色为白色、标题左对齐、nav-bar导航透明并不固定在顶部、右边插槽有按钮
+```
+<nav-bar backState="2000" fontColor="#FFF" :titleCenter="false" type="transparent" title="我的">
+	<view class="icon_setUp" slot="right">设置</view>
+</nav-bar>
+```
+
+### 案例三：颜色渐变导航
+特性：颜色渐变导航
+```
+<nav-bar home :bgColor="['#f37402','#0f0']" bgColorAngle="90" fontColor="#FFF" title="颜色渐变导航"></nav-bar>
+```
+
+### 案例四：颜色渐变导航
+特性：颜色渐变导航
+```
+<nav-bar :bgColor="bgColorList" bgColorAngle="45" fontColor="#FFF" title="颜色渐变导航"></nav-bar>
+<!-- bgColor值 -->
+bgColorList:[
+	{color:"#f37402",scale:"0%"},
+	{color:"#0f0",scale:"20%"},
+	{color:"#f00",scale:"80%"},
+	{color:"#00f",scale:"100%"}
+]
+```
+
+### 案例五：滑动透明导航
+特性：有返回箭头、nav-bar导航透明并固定在顶部、透明状态字体为白色、页面想下滑动nav-bar导航条逐渐变白色、右边插槽有按钮
+```
+<nav-bar transparentFixedFontColor="#FFF" type="transparentFixed" title="我的简历">
+	<view class="transparent_fixed_preview" slot="transparentFixedRight" @click="onPreview">预览</view> //透明状态下的按钮
+	<view class="preview" slot="right" @click="onPreview">预览</view> //不状态下的按钮
+</nav-bar>
+```
+
+### 案例六：搜索框|地区选择
+特性：无返回箭头、nav-bar导航固定在顶部、地区选择、搜索框
+```
+<nav-bar backState="2000">
+	<view slot="left" class="address_select">深圳市</view>
+	<view slot="right" class="search_box" @click="onPageJump('/pages/home/search')">
+		<text class="icon_search"></text>
+		<text class="tips">搜索目的地/职位等</text>
+	</view>
+</nav-bar>
+```
+
+### 属性
+| 名称                        | 类型          | 默认值          | 描述                                               |
+| ----------------------------|--------------- | ------------- | ---------------------------------------------------|
+| backState                   | String         | 1000          | 返回上一页面按钮,1000 显示返回按钮,2000 不显示返回按钮,3000自定义返回按钮方法，点击返回箭头后会发送一个backClick事件|
+| home                        | Boolean        | true          | 返回首页按钮（首页地址在源文件里配置）                |
+| bgColor                     | String|Array   | #FFF          | 导航背景颜色，值为数组的时候显示渐变颜色（只支持2个颜色渐变），bgColor="themeBgColor"的时候会调用全局class="themeBgColor"的样式|
+| bgColorAngle                | String|Number  | 90            | 导航背景颜色渐变角度（bgColor为数组生效）              |
+| fontColor                   | String         | #000          | 导航字体颜色，（当颜色为白色的时候导航状态栏和图片为白色的）|
+| titleCenter                 | Boolean        | true          | 标题title居中                                       |
+| title                       | String         | --            | 标题title值                                         |
+| transparentFixedFontColor   | String         | #000          | 导航type类型为transparentFixed时透明状态下的字体颜色  |
+| type                        | String         | fixed         | 导航类型，可选：1.fixed固定导航 2.ordinary不固定导航 3.transparent透明不固定导航 4.transparentFixed透明固定导航|
+
+### bgColor数组值为JSON的参数
+| 名称                        | 类型            | 默认值         | 描述                                               |
+| ----------------------------|--------------- | ------------- | ---------------------------------------------------|
+| color                       | String         | --            | 渐变颜色值                                          |
+| scale                       | String         | --            | 渐变比例（百分比%）                                  |
+
+### 插槽
+| 名称                  | 描述                                                               |
+| ----------------------|-------------------------------------------------------------------|   
+| left                  | 左插槽                                                             |
+| default               | 中间标题插槽（type类型为transparentFixed时插槽只会穿透到实色背景下）   |
+| right                 | 右插槽                                                             |
+| transparentFixed      | 导航type类型为transparentFixed时透明状态下中间插槽                   |
+| transparentFixedRight | 导航type类型为transparentFixed时透明状态下右插槽                     |
+| transparentFixedRight | 导航type类型为transparentFixed时透明状态下右插槽                     |
+
+### 事件（type类型为transparentFixed时可用）
+| 名称             | 参数              | 描述                      |
+| -----------------|------------------| --------------------------|
+| scroll           | 滚动条到顶部距离   | 代替页面的onPageScroll函数 |
+| backClick        | 返回上一页按钮方法 | backState=3000时生效       |