sulibao-mini/pages/comm/search.vue

<template>
	<view>
		<tn-nav-bar fixed alpha customBack>
		  <view slot="back" class='tn-custom-nav-bar__back'
		    @click="goBack">
		    <text class='icon tn-icon-left'></text>
		  </view>
		  <view slot="default">
		  	<view>
		  		<text>搜索</text>
		  	</view>
		  	 
		  </view>
		</tn-nav-bar>
		
		<view style="width: 100%;padding:16px"  :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<uni-search-bar radius="30" :focus="true" v-model="prodName"  placeholder="请输入您感兴趣的产品名称" cancelButton="none">
				<template v-slot:searchIcon>
						 
					</template>
			</uni-search-bar>
			<uni-search-bar radius="30"  v-model="brand"  placeholder="请输入您感兴趣的产品品牌" cancelButton="none">
				<template v-slot:searchIcon>
						 
					</template>
			</uni-search-bar>
			<uni-search-bar radius="30" v-model="prodSpec" placeholder="请输入您感兴趣的产品型号" cancelButton="none">
				<template v-slot:searchIcon>
						 
					</template>
			</uni-search-bar>
			
			<button type="primary" style="border-radius:30px;background-color: #3a96d7;" radius @click="searchProd">搜索</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				brand: '',
				prodName:'',
				prodSpec: '',	
			}
		},
		methods: {
			goBack(){
				uni.navigateBack();
			},
			searchProd(){
				uni.setStorageSync('searchProdValue',this.prodName+'/'+this.brand+'/'+this.prodSpec)
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
    /* 胶囊*/
    .tn-custom-nav-bar__back {
      width: 60%;
      height: 100%;
      position: relative;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      box-sizing: border-box;
      // background-color: rgba(0, 0, 0, 0.15);
      border-radius: 1000rpx;
      border: 1rpx solid rgba(255, 255, 255, 0.5);
      // color: #333;
      font-size: 18px;
      
      .icon {
        display: block;
        flex: 1;
        margin: auto;
        text-align: center;
      }
      
    }
</style>