|
@@ -0,0 +1,118 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view style="background-color: #E75F37;padding: 20rpx;">
|
|
|
+ <u-search placeholder="请输入商品名称" bgColor="#fff" searchIconColor='#E75F37' :actionStyle="{color:'#FFF'}"
|
|
|
+ :searchIconSize='24' v-model="keyword" @search="goBack()" @custom="goBack()" focus></u-search>
|
|
|
+ </view>
|
|
|
+ <view class="recentSearches" v-if="recentSearches.length != 0">
|
|
|
+ <view class="recentSearches-head">
|
|
|
+ <view class="recentSearches-headLeft">
|
|
|
+ <u-icon name="clock" color="#C4C4C4"></u-icon>
|
|
|
+ <view style="font-size: 26rpx;margin-left: 6rpx;">最近搜索</view>
|
|
|
+ </view>
|
|
|
+ <view class="recentSearches-headRight">
|
|
|
+ <u-icon name="trash" size="20px" @click="searchDeleteShow = true" color="#C4C4C4"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="recentSearches-text">
|
|
|
+ <u-tag v-for="(item,index) in recentSearches" :key="index" :text="item" bgColor="#EFEFEF"
|
|
|
+ color="#414141" borderColor="#EFEFEF" size="medium" closable :show="item" @close="tagClose(index)"
|
|
|
+ shape="circle" @click.stop="tagSearches(item)"></u-tag>
|
|
|
+ </view>
|
|
|
+ <u-modal :show="searchDeleteShow" content="确认删除搜索记录吗?" showCancelButton @confirm="searchDeletefun"
|
|
|
+ @cancel="searchDeleteShow = false" ref="uModal" :asyncClose="true">
|
|
|
+ </u-modal>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ keyword: '',
|
|
|
+ recentSearches: [], // 搜索数据
|
|
|
+ searchDeleteShow: false, // 搜索全部删除弹窗
|
|
|
+ homePage: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(data) {
|
|
|
+ if (uni.getStorageSync('recentSearches')) {
|
|
|
+ this.recentSearches = uni.getStorageSync('recentSearches').slice(0, 10);
|
|
|
+ }
|
|
|
+ this.keyword = data.searchData
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goBack() {
|
|
|
+ uni.$emit('searchData', this.keyword)
|
|
|
+ uni.setStorageSync('homeSearch', this.keyword);
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/tabBar/classification'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 搜索全部删除
|
|
|
+ searchDeletefun() {
|
|
|
+ this.recentSearches = []
|
|
|
+ uni.setStorageSync('recentSearches', this.recentSearches);
|
|
|
+ this.searchDeleteShow = false
|
|
|
+ },
|
|
|
+ // 点击搜索
|
|
|
+ tagSearches(name) {
|
|
|
+ this.keyword = name;
|
|
|
+ uni.$emit('searchData', name)
|
|
|
+ uni.setStorageSync('homeSearch', name);
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/tabBar/classification'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 最近搜索点击关闭按钮
|
|
|
+ tagClose(index) {
|
|
|
+ this.recentSearches.splice(index, 1)
|
|
|
+ uni.setStorageSync('recentSearches', this.recentSearches);
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .tagClass {
|
|
|
+ display: flex;
|
|
|
+ padding: 41rpx 63rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ ::v-deep .u-tag--mini {
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 22px;
|
|
|
+ padding: 0rpx 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .recentSearches {
|
|
|
+ padding: 38rpx 32rpx;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .recentSearches-head {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #C4C4C4;
|
|
|
+
|
|
|
+ .recentSearches-headLeft {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .recentSearches-headRight {}
|
|
|
+ }
|
|
|
+
|
|
|
+ .recentSearches-text {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: baseline;
|
|
|
+
|
|
|
+ .recentSearches-textWidth {
|
|
|
+ // width: 140rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|