<template>
<zk-theme type="page" :padding="30" showBack navbarTitle="搜索">
<!-- 1. 基础搜索 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础搜索" />
<zk-search v-model="keyword1" placeholder="请输入关键词搜索" />
</zk-theme>
<!-- 2. 圆角搜索框 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="圆角搜索框" />
<view class="round-search">
<zk-search v-model="keyword2" placeholder="搜索商品" :show-action="false" icon-color="#2979ff" />
</view>
</zk-theme>
<!-- 3. 自定义按钮 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义按钮" />
<zk-search v-model="keyword3">
<template #action-text>
<view class="custom-action">
<zk-icon name="search-line" size="28" color="#fff" />
</view>
</template>
</zk-search>
</zk-theme>
<!-- 4. 导航栏搜索 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="导航栏搜索" color="#ffffff" />
<view class="nav-search">
<zk-search v-model="keyword4" placeholder="搜索商品" icon-color="#000" :show-action="false">
<template #search-icon>
<zk-icon name="search-line" size="32" color="#000" />
</template>
</zk-search>
</view>
</zk-theme>
<!-- 5. 带分类的搜索 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="带分类的搜索" />
<view class="category-search">
<view class="category-btn" @tap="showCategory">
<zk-text class="category-text" :text="currentCategory" :size="28" color="#333333"
margin="0 10rpx 0 0" />
<zk-icon name="arrow-down-s-line" size="24" color="#666" />
</view>
<zk-search v-model="keyword5" placeholder="搜索当前分类商品" :show-action="false" />
</view>
</zk-theme>
<!-- 6. 搜索页面示例 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="搜索页面示例" />
<view class="page-search">
<zk-search v-model="keyword6" placeholder="搜索商品/店铺/品牌" search-icon="search-line" :icon-size="36"
icon-color="#2979ff" @search="onSearch" />
<!-- 热门搜索标签 -->
<view class="hot-tags">
<view class="tag-item" v-for="(item, index) in hotTags" :key="index"
@tap="onTagTap(item)">
<zk-tag type="warning" round :text="item"></zk-tag>
</view>
</view>
</view>
</zk-theme>
<!-- 7. 带语音的搜索 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="带语音的搜索" />
<view class="voice-search">
<zk-search v-model="keyword7" placeholder="搜索或按住说话" :show-action="false">
<template #append>
<view class="voice-btn" @longpress="startVoice" @touchend="endVoice">
<zk-icon name="record-circle-line" size="32" color="#2979ff" />
</view>
</template>
</zk-search>
</view>
</zk-theme>
</zk-theme>
</template>
<script>
export default {
data() {
return {
keyword1: '',
keyword2: '',
keyword3: '',
keyword4: '',
keyword5: '',
keyword6: '',
keyword7: '',
currentCategory: '全部分类',
categories: ['全部分类', '手机数码', '服装鞋包', '美妆护肤', '家用电器'],
hotTags: ['iPhone14', '华为Mate60', '小米14', 'OPPO Find X7', 'vivo X100', '三星S24']
}
},
methods: {
onSearch(value) {
uni.showToast({
title: `搜索: ${value}`,
icon: 'none'
})
},
showCategory() {
uni.showActionSheet({
itemList: this.categories,
success: (res) => {
this.currentCategory = this.categories[res.tapIndex]
}
})
},
onTagTap(tag) {
this.keyword6 = tag
console.log("this.keyword6: " + JSON.stringify(this.keyword6));
this.onSearch(tag)
},
startVoice() {
uni.showToast({
title: '开始语音输入',
icon: 'none'
})
},
endVoice() {
uni.showToast({
title: '结束语音输入',
icon: 'none'
})
}
}
}
</script>
<style lang="scss">
/* #ifndef APP-NVUE */
.round-search,
.nav-search,
.voice-search {
padding: 20rpx;
}
.custom-action {
display: flex;
align-items: center;
justify-content: center;
width: 64rpx;
height: 64rpx;
background-color: #2979ff;
border-radius: 32rpx;
}
.category-search {
display: flex;
flex-direction: row;
align-items: center;
padding: 20rpx;
}
.category-btn {
display: flex;
flex-direction: row;
align-items: center;
// padding: 0 20rpx;
// margin-right: 20rpx;
}
.hot-tags {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 20rpx 0;
}
.tag-item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 10rpx 10rpx;
// background-color: #f5f7fa;
border-radius: 30rpx;
margin-bottom: 10rpx;
&.active {
// background-color: #ecf5ff;
}
}
.voice-btn {
display: flex;
align-items: center;
justify-content: center;
width: 64rpx;
height: 64rpx;
}
.round-search :deep(.zk-search__inner) {
border-radius: 35rpx;
background-color: #f5f7fa;
border: 2rpx solid #e4e7ed;
}
.nav-search :deep(.zk-search__inner) {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 35rpx;
}
.nav-search :deep(.zk-search__input) {
color: #ffffff;
}
/* #endif */
/* #ifdef APP-NVUE */
.round-search,
.nav-search,
.voice-search {
padding: 20rpx;
}
.custom-action {
flex-direction: row;
align-items: center;
justify-content: center;
width: 64rpx;
height: 64rpx;
background-color: #2979ff;
border-radius: 32rpx;
}
.category-search {
flex-direction: row;
align-items: center;
padding: 20rpx;
}
.category-btn {
flex-direction: row;
align-items: center;
padding: 0 20rpx;
margin-right: 20rpx;
}
.hot-tags {
flex-direction: row;
flex-wrap: wrap;
padding: 20rpx 0;
}
.tag-item {
flex-direction: row;
align-items: center;
justify-content: center;
padding: 10rpx 30rpx;
background-color: #f5f7fa;
border-radius: 30rpx;
margin-right: 20rpx;
margin-bottom: 20rpx;
}
.active {
background-color: #ecf5ff;
}
.voice-btn {
flex-direction: row;
align-items: center;
justify-content: center;
width: 64rpx;
height: 64rpx;
}
.round-search .zk-search__inner {
border-radius: 35rpx;
background-color: #f5f7fa;
border-width: 2rpx;
border-style: solid;
border-color: #e4e7ed;
}
.nav-search .zk-search__inner {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 35rpx;
}
.nav-search .zk-search__input {
color: #ffffff;
}
/* #endif */
</style>