sulibao-mini/pages/comm/search2.vue

<template>
	<view style="background-color: #f7f7f7;min-height: 100vh;">
		<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 :style="{fontSize:(wxFontSize)+'px'}">搜索</text>
		  	</view>
		  	 
		  </view>
		</tn-nav-bar>
		
		<view style="width: 100%;"  :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			 
			<uni-search-bar radius="30" :focus="true"  bgColor="#fff" v-model="brand" :fontSize="(wxFontSize-2)" placeholder="请输入您感兴趣的产品品牌(选填)" cancelButton="none">
				<template v-slot:searchIcon>
						 <image src="../../static/tu/search.png" style="width: 26px;height: 26px"></image>
					</template>
			</uni-search-bar>
			<uni-search-bar radius="30" v-model="content" bgColor="#fff" :fontSize="(wxFontSize-2)" placeholder="请输入您感兴趣的服务内容(选填)" cancelButton="none">
				<template v-slot:searchIcon>
						 <image src="../../static/tu/search.png" style="width: 26px;height: 26px"></image>
					</template>
			</uni-search-bar>
			<button type="primary" style="background-color:#005DA6;border-radius: 8px;margin: 16px;" :style="{fontSize:(wxFontSize-2)+'px'}" @click="searchProd">搜索</button>
			<!-- <button type="primary" style="border-radius:30px;background-color: #3a96d7;" radius @click="searchProd">搜索</button> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				brand: '',
				content:'',
				wxFontSize: 17
			}
		},
		onLoad(){
			const appBaseInfo = wx.getAppBaseInfo();
			this.wxFontSize = uni.getStorageSync('fontSize')||appBaseInfo.fontSizeSetting||17;
		},
		methods: {
			goBack(){
				uni.navigateBack();
			},
			searchProd(){
				if(this.brand||this.content){
					uni.setStorageSync('searchProdValue2',this.brand+'/'+this.content)
				}else{
					uni.removeStorageSync('searchProdValue2');
				}
				
				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>