H5_QiCaiYao/components/diy-components/diy-search.vue

<template>
	<div class="navbar" :style="{ backgroundColor: navbarBgColor }">
		<!-- <u-navbar title=" " :autoBack="false" leftIconSize="0" :bgColor="navbarBgColor" > -->

		<!-- <view class="search-box" :style="searchWrapCss" slot="left" style="width: calc(100% );">
				<view class="img" v-if="value.searchStyle == 2 && value.iconType == 'img'">
					<image :src="$util.img(value.imageUrl)" mode="aspectFill"></image>
				</view>
				<diy-icon class="icon" v-if="value.searchStyle == 2 && value.iconType == 'icon'" :icon="value.icon"
					:value="value.style ? value.style : 'null'"
					:style="{ maxWidth: 30 * 2 + 'rpx', maxHeight: 30 * 2 + 'rpx' }"></diy-icon>
				<view class="search-content" :style="inputStyle" style="border: 1px var(--base-color) solid;"
					@click="search()">
					<input type="text" class="uni-input ns-font-size-base" maxlength="50" :placeholder="value.title"
						v-model="searchText" @confirm="search()" :placeholderStyle="placeholderStyle" />
					<text class="iconfont icon-sousuo3" @click="search()"
						:style="{ color: value.textColor ? value.textColor : 'rgba(0,0,0,0)' }"></text>
					<div class="text">
						<div class="line"></div>
						<div>搜索</div>
					</div>
				</view>

				<image :src="$util.img('/upload/weapp/user/ld.png')" @click="toNews" class="news"></image>
			</view> -->

		<view class="search-box" :style="searchWrapCss" slot="center" style="width:calc(100%-56rpx);">
			<view class="img" v-if="value.searchStyle == 2 && value.iconType == 'img'">
				<image :src="$util.img(value.imageUrl)" mode="aspectFill"></image>
			</view>
			<diy-icon class="icon" v-if="value.searchStyle == 2 && value.iconType == 'icon'" :icon="value.icon"
				:value="value.style ? value.style : 'null'"
				:style="{ maxWidth: 30 * 2 + 'rpx', maxHeight: 30 * 2 + 'rpx' }"></diy-icon>

			<view class="search-content" :style="inputStyle" style="border: 1px var(--base-color) solid;" @click="search()">
				<input type="text" class="uni-input ns-font-size-base" maxlength="50" :placeholder="value.title"
					v-model="searchText" @confirm="search()" :placeholderStyle="placeholderStyle" />
				<text class="iconfont icon-sousuo3"
					:style="{ color: value.textColor ? value.textColor : 'rgba(0,0,0,0)' }"></text>
				<div class="text">
					<div class="line"></div>
					<div>搜索</div>
				</div>
			</view>
			<view class="">
				<image :src="$util.img('/upload/weapp/user/ld.png')" @click="toNews" class="news"></image>
				<u-badge type="error" max="99" :value="read_no_num" :absolute="true" :offset="[0, 0]"> </u-badge>
			</view>



		</view>
	</div>
	<!-- #ifndef H5 -->
	<!-- <div style="height: 80rpx;"></div> -->
	<!-- #endif -->
	<!-- #ifdef H5 -->
	<!-- <div style="height: 60rpx;"></div> -->
	<!-- #endif -->
</template>

<script>
// 搜索
export default {
	name: 'diy-search',
	props: {
		value: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	watch: {
		'$store.state.navbarBgColor': {
			handler: function (newVal, oldVal) {
				// this.navbarBgColor = newVal;
			}
		}
	},
	data() {
		return {
			searchText: '',
			navbarBgColor: 'transparent',
			read_no_num: "",
		};
	},

	computed: {
		searchWrapCss() {
			var obj = '';
			obj += 'background-color:' + this.value.componentBgColor + ';';
			if (this.value.borderType == 2) {
				obj += 'border-radius:' + '100rpx;';
			}
			obj += 'text-align:' + this.value.textAlign + ';';
			return obj;
		},
		inputStyle() {
			var obj = '';
			obj += 'background-color:' + this.value.elementBgColor + ';';
			if (this.value.borderType == 2) {
				obj += 'border-radius:' + '40rpx;';
			} else {
				obj += 'border-radius:' + '16rpx;';
			}
			return obj;
		},
		placeholderStyle() {
			var obj = '';
			if (this.value.textColor) {
				obj += 'color:' + this.value.textColor;
			} else {
				obj += 'color: rgba(0,0,0,0)';
			}
			return obj;
		}
	},

	created() {
		if (uni.getStorageSync('token')) {
			this.getMessageNum()
		}

	},
	methods: {
		search() {
			this.$util.redirectTo('/pages_tool/goods/search');
		},
		toNews() {
			uni.navigateTo({
				url: '/pages_tool/news/news'
			});
		},
		getMessageNum() {
			this.$api.sendRequest({
				url: '/api/notice/messageNum',
				success: res => {
					this.read_no_num = res.data.read_no_num;
				}
			})

		}

	}
};
</script>

<style lang="scss">
.navbar {
	// position: fixed;
	// z-index: 9999;
	width: 100%;
	height: 90rpx;
	// position: sticky;
	// top: 0;
	// padding: 32rpx 0rpx 0rpx 32rpx;
	// padding-top: calc(var(--status-bar-height) + 40rpx);
	// top:0;
	// left: 0;
	background: transparent;

	// position: sticky;top: 0; background: #f7f7f7;
}

.news {
	width: 48rpx;
	height: 48rpx;
	margin: 16rpx;
}

/deep/ .uni-input-placeholder {
	overflow: initial;
}

.search-box {
	position: relative;
	display: flex;
	align-items: center;
	background: transparent;
	/* #ifndef H5 */
	// padding-top: 50rpx;
	/* #endif */

	.img {
		width: 170rpx;
		height: 60rpx;
		margin-right: 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.icon {
		width: 170rpx;
		height: 60rpx;
		margin-right: 20rpx;
	}
}

.search-content {
	flex: 1;
	position: relative;

	.text {
		position: absolute;
		top: 50%;
		right: 30rpx;
		display: flex;
		align-items: center;
		transform: translateY(-50%);
		font-size: 28rpx;
		z-index: 10;
		color: $base-color;

		.line {
			width: 1px;
			height: 36rpx;
			background: linear-gradient(180deg,
					rgba(33, 187, 243, 0) 0%,
					$base-color 50%,
					rgba(33, 187, 243, 0) 100%);
			margin-right: 20rpx;
		}
	}
}

.search-content input {
	box-sizing: border-box;
	display: block;
	height: 68rpx;
	width: 100%;
	padding: 0 20rpx 0 64rpx;
	color: #333333;
}

.search-content .iconfont {
	position: absolute;
	top: 50%;
	left: -5rpx;
	transform: translateY(-50%);
	font-size: 36rpx;
	z-index: 10;
	width: 80rpx;
	font-weight: bold;
	text-align: center;
}
</style>