2026-08-06 18:50:25 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<view class="page-container">
|
|
|
|
|
|
<!-- 顶部安全距离 -->
|
|
|
|
|
|
<TopSafe bgColor="#ffffff"></TopSafe>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 1. 自定义导航栏：左边返回箭头，中间“商品搜索”标题 -->
|
|
|
|
|
|
<view class="custom-navbar">
|
|
|
|
|
|
<view class="nav-back flex-c" @click="onBack">
|
|
|
|
|
|
<u-icon name="arrow-left" size="36rpx" color="#333333"></u-icon>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="nav-title">商品搜索</view>
|
|
|
|
|
|
<view class="nav-right"></view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 2. 搜索框部分：放大镜 + 输入框 + 右侧紫色搜索按钮 -->
|
|
|
|
|
|
<view class="search-bar-box">
|
|
|
|
|
|
<view class="search-inner">
|
|
|
|
|
|
<u-icon name="search" size="36rpx" color="#999999" class="search-icon"></u-icon>
|
2026-08-17 09:27:07 +08:00
|
|
|
|
<input class="search-input" v-model="searchInput" placeholder="请输入商品关键字"
|
|
|
|
|
|
placeholder-style="color: #999999; font-size: 28rpx;" confirm-type="search" @confirm="onSearch" />
|
2026-08-06 18:50:25 +08:00
|
|
|
|
<view class="search-btn flex-c" @click="onSearch">
|
|
|
|
|
|
<text class="search-btn-text">搜索</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 3. 历史搜索部分 -->
|
|
|
|
|
|
<view class="history-container">
|
|
|
|
|
|
<view class="history-header flex-r-lr">
|
|
|
|
|
|
<text class="section-title">历史搜索</text>
|
2026-08-17 09:27:07 +08:00
|
|
|
|
<u-icon name="trash" size="42rpx" color="#999999" @click="toggleDel"></u-icon>
|
2026-08-06 18:50:25 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 历史记录标签列表 -->
|
|
|
|
|
|
<view class="history-tags flex-r" v-if="historyList.length">
|
2026-08-17 09:27:07 +08:00
|
|
|
|
<view class="history-tag-item flex-r" v-for="(item, index) in historyList" :key="index"
|
|
|
|
|
|
@click="onText(item)">
|
2026-08-06 18:50:25 +08:00
|
|
|
|
<text class="tag-text">{{ item }}</text>
|
2026-08-17 09:27:07 +08:00
|
|
|
|
<u-icon name="close-circle-fill" size="28rpx" color="#999999" class="del-icon" v-if="isDel"
|
|
|
|
|
|
@click.stop="onDel(index)"></u-icon>
|
2026-08-06 18:50:25 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 无历史记录时显示 -->
|
|
|
|
|
|
<view class="history-empty" v-else>
|
|
|
|
|
|
<text class="empty-text">暂无搜索内容</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 4. 猜你喜欢部分 -->
|
|
|
|
|
|
<view class="recommend-container">
|
|
|
|
|
|
<view class="recommend-header">
|
|
|
|
|
|
<text class="section-title">猜你喜欢</text>
|
|
|
|
|
|
</view>
|
2026-08-17 09:27:07 +08:00
|
|
|
|
<view class="recommend-content">
|
|
|
|
|
|
<choiceness :isTitle="false" />
|
2026-08-06 18:50:25 +08:00
|
|
|
|
</view>
|
2026-08-17 09:27:07 +08:00
|
|
|
|
<!-- <view class="recommend-list">
|
|
|
|
|
|
<view class="product-grid" v-if="dataList && dataList.length">
|
|
|
|
|
|
<ShopItem :obj="item" class="product-item" @click="onJump(item)" v-for="item in dataList"
|
|
|
|
|
|
:key="item.id"></ShopItem>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view> -->
|
2026-08-06 18:50:25 +08:00
|
|
|
|
</view>
|
2026-08-17 09:27:07 +08:00
|
|
|
|
<!-- 为您精选 -->
|
|
|
|
|
|
|
2026-08-06 18:50:25 +08:00
|
|
|
|
|
|
|
|
|
|
<DownPopup></DownPopup>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import { getUserInfo } from '@/api/auth.js';
|
|
|
|
|
|
import Header from '@/components/common/header.vue';
|
|
|
|
|
|
import TopSafe from '@/components/common/top-safe.nvue';
|
|
|
|
|
|
import DownPopup from '@/components/common/down-popup.vue';
|
|
|
|
|
|
import { searchList } from '@/api/product.js';
|
|
|
|
|
|
import ShopItem from './components/shop-item.vue';
|
2026-08-17 09:27:07 +08:00
|
|
|
|
import choiceness from "@/components/choiceness/choiceness.vue";
|
2026-08-06 18:50:25 +08:00
|
|
|
|
|
|
|
|
|
|
export default {
|
2026-08-17 09:27:07 +08:00
|
|
|
|
components: { Header, TopSafe, DownPopup, ShopItem, choiceness },
|
2026-08-06 18:50:25 +08:00
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
searchInput: '',
|
|
|
|
|
|
historyList: [],
|
|
|
|
|
|
isDel: false,
|
|
|
|
|
|
dataList: [],
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
onShow() {
|
|
|
|
|
|
this.init();
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
init() {
|
|
|
|
|
|
let arr = uni.getStorageSync('history') || '';
|
|
|
|
|
|
if (arr) {
|
|
|
|
|
|
this.historyList = arr.split(',').filter(item => item.trim() !== '');
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.historyList = [];
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
onJump(item) {
|
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
|
url: '/pages/other_package/productInfo/productInfo?id=' + item.id,
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
onBack() {
|
|
|
|
|
|
uni.navigateBack();
|
|
|
|
|
|
},
|
|
|
|
|
|
onSearch() {
|
|
|
|
|
|
if (!this.searchInput || !this.searchInput.trim()) {
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
this.onAdd();
|
2026-08-17 09:27:07 +08:00
|
|
|
|
uni.navigateTo({
|
|
|
|
|
|
url: '/pages/rwa_package/insights/search-result?keyword=' + encodeURIComponent(this.searchInput.trim())
|
2026-08-06 18:50:25 +08:00
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
onDel(index) {
|
|
|
|
|
|
this.historyList.splice(index, 1);
|
|
|
|
|
|
this.onSave();
|
|
|
|
|
|
if (this.historyList.length === 0) {
|
|
|
|
|
|
this.isDel = false;
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
toggleDel() {
|
|
|
|
|
|
if (this.historyList.length > 0) {
|
|
|
|
|
|
this.isDel = !this.isDel;
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
onAdd() {
|
|
|
|
|
|
if (this.searchInput && this.searchInput.trim()) {
|
|
|
|
|
|
let val = this.searchInput.trim();
|
|
|
|
|
|
let index = this.historyList.indexOf(val);
|
|
|
|
|
|
if (index > -1) {
|
|
|
|
|
|
this.historyList.splice(index, 1);
|
|
|
|
|
|
}
|
|
|
|
|
|
this.historyList.unshift(val);
|
|
|
|
|
|
if (this.historyList.length > 15) {
|
|
|
|
|
|
this.historyList.pop();
|
|
|
|
|
|
}
|
|
|
|
|
|
this.onSave();
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
onText(item) {
|
|
|
|
|
|
this.searchInput = item;
|
|
|
|
|
|
this.onSearch();
|
|
|
|
|
|
},
|
|
|
|
|
|
onSave() {
|
|
|
|
|
|
if (this.historyList.length) {
|
|
|
|
|
|
uni.setStorageSync('history', this.historyList.join(','));
|
|
|
|
|
|
} else {
|
|
|
|
|
|
uni.setStorageSync('history', '');
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
/* 避免全局 .content 的 align-items: center 导致元素全挤在中间 */
|
|
|
|
|
|
.page-container {
|
|
|
|
|
|
width: 750rpx;
|
|
|
|
|
|
min-width: 750rpx;
|
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
|
background-color: #ffffff;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: stretch;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 导航栏 */
|
|
|
|
|
|
.custom-navbar {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 88rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
padding: 0 32rpx;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
background-color: #ffffff;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
|
|
.nav-back {
|
|
|
|
|
|
width: 60rpx;
|
|
|
|
|
|
height: 60rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.nav-title {
|
|
|
|
|
|
font-size: 34rpx;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
color: #1a1a1a;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.nav-right {
|
|
|
|
|
|
width: 60rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 搜索框 */
|
|
|
|
|
|
.search-bar-box {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
padding: 16rpx 32rpx;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
|
|
.search-inner {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 80rpx;
|
|
|
|
|
|
background-color: #ffffff;
|
|
|
|
|
|
border-radius: 40rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
padding: 0 8rpx 0 28rpx;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
border: 2rpx solid #efefef;
|
|
|
|
|
|
|
|
|
|
|
|
.search-icon {
|
|
|
|
|
|
margin-right: 12rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.search-input {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
background: transparent;
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.search-btn {
|
|
|
|
|
|
height: 64rpx;
|
|
|
|
|
|
padding: 0 32rpx;
|
|
|
|
|
|
background: linear-gradient(270deg, #b164fb 0%, #7934f6 100%);
|
|
|
|
|
|
border-radius: 32rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
|
|
.search-btn-text {
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 历史搜索 */
|
|
|
|
|
|
.history-container {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
padding: 32rpx 32rpx 16rpx 32rpx;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
|
|
.history-header {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
|
|
|
|
.section-title {
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.history-tags {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
margin-top: 24rpx;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
|
|
|
|
.history-tag-item {
|
2026-08-17 09:27:07 +08:00
|
|
|
|
padding: 6rpx 24rpx;
|
2026-08-06 18:50:25 +08:00
|
|
|
|
background-color: #f5f5f7;
|
2026-08-17 09:27:07 +08:00
|
|
|
|
border-radius: 24rpx;
|
2026-08-06 18:50:25 +08:00
|
|
|
|
margin-right: 20rpx;
|
|
|
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
.tag-text {
|
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
color: #666666;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.del-icon {
|
|
|
|
|
|
margin-left: 10rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.history-empty {
|
|
|
|
|
|
margin-top: 16rpx;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
|
|
|
|
.empty-text {
|
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
color: #999999;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 猜你喜欢 */
|
|
|
|
|
|
.recommend-container {
|
|
|
|
|
|
width: 100%;
|
2026-08-17 09:27:07 +08:00
|
|
|
|
padding: 20rpx 32rpx 0;
|
2026-08-06 18:50:25 +08:00
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
|
|
.recommend-header {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
.section-title {
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-08-17 09:27:07 +08:00
|
|
|
|
.recommend-content {
|
|
|
|
|
|
::v-deep(.choiceness_warp) {
|
|
|
|
|
|
margin-top: 15rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-08-06 18:50:25 +08:00
|
|
|
|
.recommend-list {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
margin-top: 24rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.product-grid {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
