<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>