123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598 |
- <template>
- <view class="content">
- <view class="search-box">
- <view class="serach">
- <view class="content" :style="{'border-radius':radius+'px'}">
- <!-- HM修改 增加进入输入状态的点击范围 -->
- <view class="content-box" @click="getFocus">
- <text class="icon icon-serach"></text>
- <!-- HM修改 增加placeholder input confirm-type confirm-->
- <input ref='myInput' :placeholder="placeholder" placeholder-style='font-size:28rpx' @input="inputChange"
- confirm-type="search" @confirm="doSearch(inputVal)" class="input" focus v-model="inputVal"
- @blur="blur" />
- <!-- <view v-if="!active && mode === 2" class="input sub" @click="getFocus">请输入搜索内容</view> -->
- <!-- HM修改 @click换成@click.stop阻止冒泡 -->
- <text v-if="isDelShow" class="icon icon-del" @click.stop="clear"></text>
- </view>
- <!-- <view v-show="(active&&show&&button === 'inside')||(isDelShow && button === 'inside')" class="serachBtn"
- @click="search">
- 搜索
- </view> -->
- </view>
- <view v-if="button === 'outside'" class="button" :class="{'active':show||active}" @click="doSearch(inputVal)">
- <view class="button-item">{{!show?searchName:'搜索'}}</view>
- </view>
- </view>
- <view class="cancel" @click="doSearch(keyword)">
- 搜索
- </view>
- <!-- 原样式 如果使用原样式,恢复下方注销代码 -->
- <!--
- <view class="input-box">
- <input type="text" :adjust-position="true" :placeholder="defaultKeyword" @input="inputChange" v-model="keyword" @confirm="doSearch(false)"
- placeholder-class="placeholder-class" confirm-type="search">
- </view>
- <view class="search-btn" @tap="doSearch(false)">搜索</view>
- -->
- <!-- 原样式 end -->
- </view>
- <view class="search-keyword">
- <scroll-view class="keyword-list-box" v-show="isShowKeywordList" scroll-y>
- <block v-for="(row,index) in keywordList" :key="index">
- <view class="keyword-entry" hover-class="keyword-entry-tap">
- <view class="keyword-text" @tap.stop="doSearch(keywordList[index].keyword)">
- <rich-text :nodes="row.htmlStr"></rich-text>
- </view>
- <view class="keyword-img" @tap.stop="setKeyword(keywordList[index].keyword)">
- <image src="/static/back.png"></image>
- </view>
- </view>
- </block>
- </scroll-view>
- <scroll-view class="keyword-box" v-show="!isShowKeywordList" scroll-y>
- <view class="keyword-block" v-if="oldKeywordList.length>0">
- <view class="keyword-list-header">
- <view style="font-size: 32rpx; font-weight: 700;">最近搜索</view>
- <view>
- <image @tap="oldDelete" src="/static/delete.png"></image>
- </view>
- </view>
- <view class="keyword">
- <view v-for="(keyword,index) in oldKeywordList" @tap="doSearch(keyword)" :key="index">
- {{keyword}}
- </view>
- </view>
- </view>
- <view class="keyword-block">
- <view class="keyword-list-header">
- <view style="font-size: 32rpx; font-weight: 700;">推荐搜索</view>
- <view>
- <image @tap="hotToggle" :src="'/static/HM-search/attention'+forbid+'.png'"></image>
- </view>
- </view>
- <view class="keyword" v-if="forbid==''">
- <view v-for="(keyword,index) in hotKeywordList" @tap="doSearch(keyword)" :key="index">
- {{keyword}}
- </view>
- </view>
- <view class="hide-hot-tis" v-else>
- <view>当前搜热门搜索已隐藏</view>
- </view>
- </view>
- </scroll-view>
- </view>
- </view>
- </template>
- <script>
- import mSearch from '@/components/mehaotian-search-revision.vue';
- export default {
-
- data() {
- return {
- defaultKeyword: "请输入作物名称或用户名称",
- keyword: "",
- keyword2: "",
- oldKeywordList: [],
- hotKeywordList: [],
- keywordList: [],
- forbid: '',
- inputVal:'',
- radius:'60',
- isDelShow: false,
- isFocus: false,
- button:"inside",
- placeholder:'请输入作物名称或用户名称',
- isShowKeywordList: false
- };
- },
- components: {
- //引用mSearch组件,如不需要删除即可
- },
- mounted() {
- this.init();
- },
- watch: {
- // searchcontent:{
- // handler(oldValue, newValue) {
- // this.keyword=oldValue
- // // if (val != '') {
- // // this.place = val
- // // }
- // },
- // deep:true,
- // immediate:true,
- // },
- // keyword:{
- // handler(oldValue, newValue) {
- // this.keyword2=oldValue
- // console.log(oldValue, newValue,11111111)
- // // if (val != '') {
- // // this.place = val
- // // }
- // },
- // deep:true,
- // immediate:true,
- // },
- },
- methods: {
- focus() {
- this.active = true;
- //HM修改 增加获取焦点判断
- if (this.inputVal) {
- this.isDelShow = true;
- }
- },
- blur() {
- this.isFocus = false;
- if (!this.inputVal) {
- this.active = false;
- }
- uni.hideKeyboard()
- },
- clear() {
- //HM修改 收起键盘
- uni.hideKeyboard();
- this.isFocus = false;
- this.inputVal = '';
- this.keyword = '';
- this.active = false;
- if (this.inputVal) {
- this.isDelShow = true;
- }else{
- this.isDelShow = false
- }
- //this.$emit('search', '');//HM修改 清空内容时候不进行搜索
-
- },
- getFocus() {
- this.isFocus = true;
- },
- // cancel() {
- // this.inputVal=''
- // this.keyword = ''
- // if (this.inputVal) {
- // this.isDelShow = true;
- // }else{
- // this.isDelShow = false
- // }
- // uni.setStorageSync('jiaoyikeyword', this.keyword)
- // },
- init() {
- this.loadDefaultKeyword();
- this.loadOldKeyword();
- this.loadHotKeyword();
- if(uni.getStorageSync('jiaoyikeyword')){
- this.inputVal=uni.getStorageSync('jiaoyikeyword')
- this.keyword=uni.getStorageSync('jiaoyikeyword')
- if (this.inputVal) {
- this.isDelShow = true;
- }
- }
- // this.$refs.msearch.setFocus()
- },
- //加载默认搜索关键字
- loadDefaultKeyword() {
- //定义默认搜索关键字,可以自己实现ajax请求数据再赋值,用户未输入时,以水印方式显示在输入框,直接不输入内容搜索会搜索默认关键字
- // this.defaultKeyword = "默认关键字";
- },
- //加载历史搜索,自动读取本地Storage
- loadOldKeyword() {
- uni.getStorage({
- key: 'OldKeys',
- success: (res) => {
- var OldKeys = JSON.parse(res.data);
- this.oldKeywordList = OldKeys;
- }
- });
- },
- //加载热门搜索
- loadHotKeyword() {
- //定义热门搜索关键字,可以自己实现ajax请求数据再赋值
- this.hotKeywordList = ['大豆', '玉米', '高粱', '白小麦', '混合麦', '水稻', '玉米淀粉', '豆粕', '大麦', '小麦'];
- },
- //监听输入
- inputChange(event) {
- if (this.inputVal) {
- this.isDelShow = true;
- }
- //兼容引入组件时传入参数情况
- var keyword = event.detail ? event.detail.value : event;
- if (!keyword) {
- this.keywordList = [];
- this.isShowKeywordList = false;
- return;
- }
-
- },
- //高亮关键字
- drawCorrelativeKeyword(keywords, keyword) {
- var len = keywords.length,
- keywordArr = [];
- for (var i = 0; i < len; i++) {
- var row = keywords[i];
- //定义高亮#9f9f9f
- var html = row[0].replace(keyword, "<span style='color: #9f9f9f;'>" + keyword + "</span>");
- html = '<div>' + html + '</div>';
- var tmpObj = {
- keyword: row[0],
- htmlStr: html
- };
- keywordArr.push(tmpObj)
- }
- return keywordArr;
- },
- //顶置关键字
- setKeyword(index) {
- this.keyword = this.keywordList[index].keyword;
- },
- //清除历史搜索
- oldDelete() {
- uni.showModal({
- content: '确定清除历史搜索记录?',
- success: (res) => {
- if (res.confirm) {
- console.log('用户点击确定');
- this.oldKeywordList = [];
- uni.removeStorage({
- key: 'OldKeys'
- });
- } else if (res.cancel) {
- console.log('用户点击取消');
- }
- }
- });
- },
- //热门搜索开关
- hotToggle() {
- this.forbid = this.forbid ? '' : '_forbid';
- },
- //执行搜索
- doSearch(keyword) {
- this.inputVal=keyword
- this.keyword = keyword;
- this.saveKeyword(keyword); //保存为历史
- if (this.inputVal) {
- this.isDelShow = true;
- }
- uni.setStorageSync('jiaoyikeyword', this.keyword)
- uni.switchTab({
- url:'/pages/business/businessNew'
- })
- },
- //保存关键字到历史记录
- saveKeyword(keyword) {
- uni.getStorage({
- key: 'OldKeys',
- success: (res) => {
- var OldKeys = JSON.parse(res.data);
- var findIndex = OldKeys.indexOf(keyword);
- if (findIndex == -1) {
- OldKeys.unshift(keyword);
- } else {
- OldKeys.splice(findIndex, 1);
- OldKeys.unshift(keyword);
- }
- //最多10个纪录
- OldKeys.length > 10 && OldKeys.pop();
- uni.setStorage({
- key: 'OldKeys',
- data: JSON.stringify(OldKeys)
- });
- this.oldKeywordList = OldKeys; //更新历史搜索
- },
- fail: (e) => {
- var OldKeys = [keyword];
- uni.setStorage({
- key: 'OldKeys',
- data: JSON.stringify(OldKeys)
- });
- this.oldKeywordList = OldKeys; //更新历史搜索
- }
- });
- }
- }
- }
- </script>
- <style lang="scss" scoped>
-
- view {
- // display: block;
- }
- .content {
- overflow: hidden;
- background: #fff;
- height:100vh;
- }
- .cancel {
- font-size: 28rpx;
- color: #333333;
- }
- .search-box {
- width: 100%;
- background-color: #fff;
- padding: 15upx 2.5%;
- display: flex;
- justify-content: space-between;
- position: sticky;
- top: 0;
- align-items: center;
- }
- .search-box .mSearch-input-box {
- width: 90%;
- }
- .search-box .input-box {
- width: 85%;
- flex-shrink: 1;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .search-box .search-btn {
- width: 15%;
- margin: 0 0 0 2%;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-shrink: 0;
- font-size: 28upx;
- color: #fff;
- background: linear-gradient(to right, #ff9801, #ff570a);
- border-radius: 60upx;
- }
- .search-box .input-box>input {
- width: 100%;
- height: 60upx;
- font-size: 32upx;
- border: 0;
- border-radius: 60upx;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- padding: 0 3%;
- margin: 0;
- background-color: #ffffff;
- }
- .placeholder-class {
- color: #9e9e9e;
- }
- .search-keyword {
- width: 100%;
- background-color: rgb(242, 242, 242);
- }
- .keyword-list-box {
- height: calc(100vh - 110upx);
- padding-top: 10upx;
- border-radius: 20upx 20upx 0 0;
- background-color: #fff;
- }
- .keyword-entry-tap {
- background-color: #eee;
- }
- .keyword-entry {
- width: 94%;
- height: 80upx;
- margin: 0 3%;
- font-size: 30upx;
- color: #333;
- display: flex;
- justify-content: space-between;
- align-items: center;
- border-bottom: solid 1upx #e7e7e7;
- }
- .keyword-entry image {
- width: 60upx;
- height: 60upx;
- }
- .keyword-entry .keyword-text,
- .keyword-entry .keyword-img {
- height: 80upx;
- display: flex;
- align-items: center;
- }
- .keyword-entry .keyword-text {
- width: 90%;
- }
- .keyword-entry .keyword-img {
- width: 10%;
- justify-content: center;
- }
- .keyword-box {
- height: calc(100vh - 280rpx);
- background-color: #fff;
- }
- .keyword-box .keyword-block {
- padding: 10upx 0;
- }
- .keyword-box .keyword-block .keyword-list-header {
- width: 100%;
- padding: 10upx 3%;
- font-size: 27upx;
- color: #333;
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- .keyword-box .keyword-block .keyword-list-header image {
- width: 32upx;
- height: 32upx;
- }
- .keyword-box .keyword-block .keyword {
- width: 100%;
- padding: 3px 3%;
- display: flex;
- flex-flow: wrap;
- justify-content: flex-start;
- }
- .keyword-box .keyword-block .hide-hot-tis {
- display: flex;
- justify-content: center;
- font-size: 28upx;
- }
- .keyword-box .keyword-block .keyword>view {
- display: flex;
- justify-content: center;
- align-items: center;
- border-radius: 60upx;
- padding: 0 20upx;
- margin: 10upx 20upx 10upx 0;
- height: 56rpx;
- font-size: 24rpx;
- background-color: #F5F6F9;
- color: #333333;
- }
- .serach {
- display: flex;
- width: 91%;
- //border-bottom: 1px #f5f5f5 solid; //HM修改 去掉边框
- box-sizing: border-box;
- font-size: $uni-font-size-base;
-
- .content {
- display: flex;
- align-items: center;
- width: 100%;
- height: 60upx;
- //border: 1px #ccc solid; //HM修改 去掉边框
- background: #fff;
- overflow: hidden;
- transition: all 0.2s linear;
- border-radius: 30px;
-
- .content-box {
- background: #F5F6F9;
- width: 100%;
- display: flex;
- align-items: center;
-
- &.center {
- justify-content: center;
- }
-
- .icon {
- padding: 0 15upx;
-
- &.icon-del {
- font-size: 30upx;
-
- &:before {
- content: "\e644";
- }
- }
-
- &.icon-serach:before {
- content: "\e61c";
- }
- }
-
- .input {
- width: 100%;
- max-width: 100%;
- line-height: 60upx;
- height: 60upx;
- transition: all 0.2s linear;
-
- &.center {
- width: 200upx;
- }
-
- &.sub {
- // position: absolute;
- width: auto;
- color: grey;
- }
- }
- }
-
- .serachBtn {
- height: 100%;
- flex-shrink: 0;
- padding: 0 30upx;
- //HM修改 按钮背景色
- background: linear-gradient(to right, #ff9801, #ff570a);
- //background: $uni-color-success;
- line-height: 60upx;
- color: #fff;
- //border-left: 1px #ccc solid; //HM修改 去掉边框
- transition: all 0.3s;
- }
- }
-
- .button {
- display: flex;
- align-items: center;
- justify-content: center;
- position: relative;
- flex-shrink: 0;
- width: 0;
- transition: all 0.2s linear;
- white-space: nowrap;
- overflow: hidden;
-
- &.active {
- padding-left: 15upx;
- width: 100upx;
- }
- }
- }
-
- //HM修改 把字体改成本地加载
- @font-face {
- font-family: "iconfont";
- src: url('data:application/x-font-woff;charset=utf-8;base64,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');
- }
-
-
- .icon {
- font-family: iconfont;
- font-size: 32upx;
- font-style: normal;
- color: #999;
-
- }
- </style>
|