搜索
This commit is contained in:
parent
992948d1df
commit
4c700534b5
13
components.d.ts
vendored
13
components.d.ts
vendored
|
|
@ -8,7 +8,20 @@ export {}
|
|||
/* prettier-ignore */
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
HomeGoodsItem: typeof import('./components/guyu-home-container/home-goods-item.vue')['default']
|
||||
HomeNotice: typeof import('./components/guyu-home-container/home-notice.vue')['default']
|
||||
HomeRecommend: typeof import('./components/guyu-home-container/home-recommend.vue')['default']
|
||||
HomeSearch: typeof import('./components/guyu-home-container/home-search.vue')['default']
|
||||
HomeSwiper: typeof import('./components/guyu-home-container/home-swiper.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
ZPaging: typeof import('./components/z-paging/z-paging.vue')['default']
|
||||
ZPagingCell: typeof import('./components/z-paging-cell/z-paging-cell.vue')['default']
|
||||
ZPagingEmptyView: typeof import('./components/z-paging-empty-view/z-paging-empty-view.vue')['default']
|
||||
ZPagingLoadMore: typeof import('./components/z-paging/components/z-paging-load-more.vue')['default']
|
||||
ZPagingRefresh: typeof import('./components/z-paging/components/z-paging-refresh.vue')['default']
|
||||
ZPagingSwiper: typeof import('./components/z-paging-swiper/z-paging-swiper.vue')['default']
|
||||
ZPagingSwiperItem: typeof import('./components/z-paging-swiper-item/z-paging-swiper-item.vue')['default']
|
||||
ZTabs: typeof import('./components/z-tabs/z-tabs.vue')['default']
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,52 +1,57 @@
|
|||
<template>
|
||||
<view class="home-search">
|
||||
<view class="search-box">
|
||||
<image src="@@:static/ic_search.png" class="search-icon" mode=""></image>
|
||||
<input type="text" placeholder="" class="search-input" disabled @click="onSearchClick" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="home-search">
|
||||
<view class="search-box">
|
||||
<image src="@@:static/ic_search.png" class="search-icon" mode=""></image>
|
||||
<input type="text" placeholder="" class="search-input" disabled @click="onSearchClick" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/**
|
||||
* 首页搜索组件
|
||||
*/
|
||||
import { defineEmits } from 'vue';
|
||||
/**
|
||||
* 首页搜索组件
|
||||
*/
|
||||
import {
|
||||
defineEmits
|
||||
} from 'vue';
|
||||
|
||||
// 事件
|
||||
const emit = defineEmits(['click']);
|
||||
// 事件
|
||||
const emit = defineEmits(['click']);
|
||||
|
||||
// 点击搜索框
|
||||
const onSearchClick = () => {
|
||||
emit('click');
|
||||
};
|
||||
// 点击搜索框
|
||||
const onSearchClick = () => {
|
||||
emit('click');
|
||||
uni.navigateTo({
|
||||
url: '/pages/home/search-page'
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.home-search {
|
||||
width: 100%;
|
||||
margin-top: 96.53rpx;
|
||||
|
||||
.search-box {
|
||||
width: 450.56rpx;
|
||||
height: 71.53rpx;
|
||||
background-color: #FFFFFF;
|
||||
border: 5rpx solid #F5D677;
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.search-icon {
|
||||
width: 28.47rpx;
|
||||
height: 28.47rpx;
|
||||
margin-left: 25rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.home-search {
|
||||
width: 100%;
|
||||
margin-top: 96.53rpx;
|
||||
|
||||
.search-box {
|
||||
width: 450.56rpx;
|
||||
height: 71.53rpx;
|
||||
background-color: #FFFFFF;
|
||||
border: 5rpx solid #F5D677;
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.search-icon {
|
||||
width: 28.47rpx;
|
||||
height: 28.47rpx;
|
||||
margin-left: 25rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -8,29 +8,111 @@
|
|||
</view>
|
||||
|
||||
<view class="row"
|
||||
style="width: 375.69rpx; height: 71.53rpx; background-color: white; margin-left: 40.97rpx; border: 1rpx solid #F5D677; border-radius: 50rpx; align-items: center;">
|
||||
style="width: 385.69rpx; height: 71.53rpx; background-color: white; margin-left: 40.97rpx; border: 1rpx solid #F5D677; border-radius: 50rpx; align-items: center;">
|
||||
|
||||
<image src="@@:static/ic_search.png" style="width: 28.47rpx; height: 28.47rpx; margin-left: 25rpx;"
|
||||
mode=""></image>
|
||||
|
||||
|
||||
<view class="" style="width: 300rpx; margin-left: 20rpx;">
|
||||
<textarea v-model="phone" auto-height="false"
|
||||
style="height: 71.53rpx; line-height: 71.53rpx; width: 260rpx;" fixed="true" />
|
||||
<view class=""
|
||||
style="width: 240rpx; height: 71.53rpx; margin-left: 20rpx; overflow-y: auto; display: flex; align-items: center;">
|
||||
<textarea v-model="searchContent" auto-height="false" confirm-type="search" @confirm="handleSubmit"
|
||||
style="height: 61.53rpx; line-height: 1; width: 240rpx; font-size: 26.39rpx; padding-top: 8rpx;" />
|
||||
</view>
|
||||
|
||||
<image v-if="searchContent!=''" src="@@:static/ic_clear.png" @click="clearText()"
|
||||
style="width: 29.17rpx; height: 29.17rpx; margin-left: 20.14rpx;" mode=""></image>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<view v-if="!searchResult" class="column" style="width: 100%;">
|
||||
<view class="column" style="width: 100%;">
|
||||
<view v-if="searchHistory.length>1" class="row"
|
||||
style="justify-content: space-between; height: 50rpx; align-items: center; margin-top: 52.78rpx;">
|
||||
<text class="myZt-600w"
|
||||
style="font-size: 29.19rpx; color: #6E5B51; margin-left: 31.94rpx;">历史记录</text>
|
||||
|
||||
<image src="@@:/static/ic_delete.png" @click="deleteHistory()"
|
||||
style="width: 27.78rpx; height: 25rpx; margin-right: 29.86rpx;" mode=""></image>
|
||||
|
||||
</view>
|
||||
|
||||
<view v-if="searchHistory.length>1" class="row"
|
||||
style="flex-wrap: wrap; width: 91%; margin: 26.39rpx auto 0;">
|
||||
<view class="center" v-for="(item,index) in searchHistory" @click="itemSearch(item)"
|
||||
style="background-color: #E7E5DF; margin-right: 20rpx; margin-bottom: 10rpx; height: 59.72rpx; border-radius: 40rpx;">
|
||||
<text style="padding: 0 18.75rpx 0;">{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="row"
|
||||
style="justify-content: space-between; height: 50rpx; align-items: center; margin-top: 52.78rpx;">
|
||||
<text class="myZt-600w"
|
||||
style="font-size: 29.19rpx; color: #6E5B51; margin-left: 31.94rpx;">热门发现</text>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="row" style="flex-wrap: wrap; width: 91%; margin: 26.39rpx auto 0;">
|
||||
<view class="center" v-for="(item,index) in hotFind" @click="itemSearch(item)"
|
||||
style="background-color: #E7E5DF; margin-right: 20rpx; margin-bottom: 10rpx; height: 59.72rpx; border-radius: 40rpx;">
|
||||
<text style="padding: 0 18.75rpx 0;">{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="searchResult" class="column" style="width: 100%;">
|
||||
<text
|
||||
style="font-size: 29.19rpx; color: #6E5B51; margin-left: 31.94rpx; margin-top: 52.78rpx;">共10条搜索结果</text>
|
||||
<!-- 商品列表 -->
|
||||
<view class="grid-container">
|
||||
<home-goods-item v-for="(item, index) in goodsLsit" :key="index" :goods-item="item" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HomeGoodsItem from '@/components/guyu-home-container/home-goods-item.vue';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
searchContent: "",
|
||||
searchResult: true,
|
||||
searchHistory: [
|
||||
"坂本日常", "非人哉", "罗小黑", "凡人", "路飞", "火影忍者", "哆啦A梦"
|
||||
],
|
||||
hotFind: [
|
||||
"坂本日常", "非人哉", "罗小黑", "凡人", "路飞", "火影忍者"
|
||||
],
|
||||
|
||||
goodsLsit: [{
|
||||
id: 1,
|
||||
title: "坂本日常坂本日常坂本日常坂本日常",
|
||||
imgUrl: "",
|
||||
type: "",
|
||||
price: "20"
|
||||
}, {
|
||||
id: 1,
|
||||
title: "坂本日常坂本日常坂本日常坂本日常",
|
||||
imgUrl: "",
|
||||
type: "",
|
||||
price: "20"
|
||||
}, {
|
||||
id: 1,
|
||||
title: "坂本日常坂本日常坂本日常坂本日常",
|
||||
imgUrl: "",
|
||||
type: "",
|
||||
price: "20"
|
||||
}, ]
|
||||
|
||||
}
|
||||
},
|
||||
|
|
@ -38,6 +120,44 @@
|
|||
toBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
|
||||
handleSubmit() {
|
||||
uni.showToast({
|
||||
title: `回车或搜索键被按下`,
|
||||
icon: 'none'
|
||||
});
|
||||
// 处理提交逻辑
|
||||
console.log('回车或搜索键被按下');
|
||||
// 这里可以添加你的提交逻辑
|
||||
},
|
||||
|
||||
deleteHistory() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要删除搜索历史？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.searchHistory = [];
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
itemSearch(text) {
|
||||
this.searchContent = text;
|
||||
},
|
||||
|
||||
clearText() {
|
||||
this.searchContent = "";
|
||||
},
|
||||
|
||||
searchData() {
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -60,4 +180,14 @@
|
|||
height: 27.08rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
/* 3列等宽 */
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
/* 间距 */
|
||||
gap: 34.72rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user