hwnc/components/ui-component/U_navbar/m/index.vue

<template :class="[AppTheme]">
	<u-navbar :titleStyle="{color:'#ffffff'}" :bgColor="datas.bg_color" :autoBack="false" :fixed="true"
		:placeholder="true" :height="45">
		<view class="u-nav-slot" slot="left" @click="scancode">
			<u-icon name="scan" color="#ffffff" size="24"></u-icon>
		</view>
		<!-- #ifdef APP-PLUS || H5 -->
		<view class="u-nav-slot" slot="center" style="width: 580rpx;">
			<u-search actionText="" :showAction="false" placeholder="输入商品名称" bg-color="#fff" @search="doSearch"
				v-model="search"></u-search>
			</u-icon>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="u-nav-slot" slot="center" style="width: 580rpx;">
			<view class="u-nav-slot" slot="center" style="width: 460rpx;">
				<u-search actionText="" :showAction="false" placeholder="输入商品名称" bg-color="#fff" @search="doSearch"
					v-model="search"></u-search>
				</u-icon>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS || H5 -->
		<view class="u-nav-slot" slot="right" @click="tocar">
			<u-icon name="shopping-cart" color="#ffffff" size="24"></u-icon>
		</view>
		<!-- #endif -->
	</u-navbar>
</template>
<script>
	export default {
		props: ['styles', 'datas'],
		data() {
			return {
				search: '',
			};
		},
		methods: {
			//打开扫一扫
			scancode() {
				uni.scanCode({
					scanType: ['qrCode'],
					success: function(res) {
						uni.navigateTo({
							url: '/pagesB/pages/activorderdails/writeoffdetails/writeoffdetails?code=' +
								res.result
						})
					}
				})
			},
			//打开购物车
			tocar() {
				uni.navigateTo({
					url: '/pagesE/pages/cart/cart'
				})
			},
			doSearch() {
				uni.navigateTo({
					url: `/pagesA/pages/search/search?value=${this.search}`
				})
			},
		},
	};
</script>
<style lang="less" scoped>
	.component-wrapper {
		display: block;
		max-width: 100%;
		// text-align: center;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
		text-decoration: none;
		display: flex;
		align-items: center;
	}

	.search-input {
		width: 100%;
		height: 35px;
		display: flex;
		justify-items: center;
		border-radius: 50px;
		background-color: white;
	}

	.img {
		width: 25px;
		height: 25px;
		margin: 10px;
	}

	.title {
		width: 315px;
	}
</style>