<template>
<view class="content">
<view class=""
style="padding: 10px 15px 10px 15px;display: flex; align-items: center; line-height: 2; background: #fff;">
<view class=""
style="flex: 5;padding: 0 10px; border-radius: 1rem;display: flex; align-items: center; justify-content: space-around;background: #f5f5f5; margin-right: 10px;">
<view class="" style="font-size: 15px;" @tap="change_scope">{{selected_text}}</view>
<view class="" style="width: 70%;"> <input class="" style="font-size: 15px;" :focus="focus"
@input="onKeyInput" type="text" value="" v-model="search_content" placeholder="搜索商铺、商品、菜名" />
</view>
<view class="" style="padding-top: 6px;">
<image style="width: 18px;height: 18px;" @tap="search_content==''?Back():clean()"
src="/static/takeaway/search/clean.png" mode=""></image>
</view>
</view>
<view class="" style="flex: 1; text-align: center;color: #fe8828;" @tap="search(search_content)">
搜索
</view>
</view>
<view class="" style="background: #fff;" :hidden='search_hidden_show' v-if="history.length!=0">
<view class=""
style="padding: 0 15px; display: flex;justify-content: space-between; border-bottom: 1px solid #eee;">
<view class="" style="font-size: 14px;">历史搜索:</view>
<view class="" style="font-size: 14px;" @tap="empty">清空</view>
</view>
<view class="" style="padding: 15px;">
<text class=""
style="display: inline-block;font-size: 12px;background: #f6f6f6;padding: 6px;color: #666;margin: 0 10px 10px 0;"
v-for="(item, index) in history" :key="index" @tap="history_select(item,index)">{{item}}</text>
</view>
</view>
<view class="" style="background: #fff;" :hidden='search_hidden'>
<view class="p-15 fsize-14" style="padding: 15px; font-size: 14px; border-bottom: 1px solid #eee;">
热门搜索:
</view>
<view class="" style="padding: 15px;">
<text class=""
style="display: inline-block;font-size: 12px;background: #f6f6f6;padding: 6px;color: #666;margin: 0 10px 10px 0;"
v-for="(item, index) in hot" :key="index" @tap="hot_select(item)">{{item.value}}</text>
</view>
</view>
<view>
<view class="mask" style="position: fixed; width: 100%;height: 100%;" :hidden="selected"
@tap="change_scope_close"></view>
<radio-group class="radio_group" style="background: #fff;position: fixed;width: 90%;border-radius: .5rem"
:hidden="selected" @change="radioChange">
<label class="" style="padding: 14px;display: flex;justify-content: space-between;align-items: center;"
v-for="(item, index) in search_scope" :key="index">
<view class="" style="display: flex; align-items: center;">
<image style="width: 20px; height: 20px; margin-right: 6px;" class=""
src="../../static/logo.png" mode="">
</image>
<text class="" style="font-size: 14px;">{{item.title}}</text>
</view>
<view>
<radio :value="item.value" :checked="index === current" />
</view>
</label>
</radio-group>
</view>
</view>
</template>
<script>
export default {
data() {
return {
search_scope: [{
title: '搜索商品',
value: 'commodity',
url: '',
checked: 'true'
}, {
title: '搜索店铺',
value: 'shop',
url: ''
}],
current: 0,
selected_text: '商品',
selected: true,
focus: true,
hot: [{
value: '蜜雪冰城蜜雪冰城',
id: 0
}, {
value: '蜜雪冰城',
id: 1
}],
search_content: '',
history: [],
search_hidden: false,
search_hidden_show: false
}
},
onLoad() {
let that = this
},
onReady() {
let that = this
let list = uni.getStorageSync('history')
if (list) {
that.history = list.slice(0, 3);
}
},
methods: {
radioChange(e) {
let that = this
if (e.target.value == 'commodity') {
that.selected = true
that.selected_text = '商品'
} else {
that.selected = true
that.selected_text = '店铺'
}
},
change_scope() {
let that = this
that.selected = false
},
change_scope_close() {
let that = this
that.selected = true
},
Back() {
uni.navigateBack()
},
clean() {
let that = this
that.search_content = ''
that.search_hidden = false
that.search_hidden_show = false
if (that.history) {
that.history = that.history.slice(0, 3);
}
},
onKeyInput() {
let that = this
if (that.search_content == '') {
that.search_hidden = false
} else {
that.search_hidden = true
}
},
hot_select(item) {
let that = this
that.search_content = item.value
that.search_hidden = true
that.search(item.value)
},
history_select(item, index) {
let that = this
that.search_content = item
that.search_hidden = true
that.search(item)
},
search(search_content) {
let that = this
if (search_content == '') {
uni.showToast({
title: '搜索内容不能为空',
icon: 'none'
})
return false
} else {
if (!that.history.includes(search_content)) {
that.history.unshift(search_content);
} else {
let i = that.history.indexOf(search_content)
that.history.splice(i, 1);
that.history.unshift(search_content);
}
uni.setStorageSync('history', that.history)
}
that.search_hidden_show = true
},
empty() {
let that = this
uni.showModal({
title: '提示',
content: '是否清理全部搜索历史?该操作不可逆。',
success: res => {
if (res.confirm) {
that.history = [];
uni.clearStorageSync('history')
if (that.history.length > 0) {
that.isHistory = true
} else {
that.isHistory = false
}
}
}
})
}
}
}
</script>
<style>
.mask {
background: #00000080;
z-index: 1001;
top: 0;
}
.radio_group {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1002;
}
</style>
uniapp搜索(历史搜索、热门搜索)
最新推荐文章于 2024-07-17 18:17:15 发布