171 lines
3.6 KiB
Vue
171 lines
3.6 KiB
Vue
<template>
|
|
<view class="shop-search-page">
|
|
<HeaderCom></HeaderCom>
|
|
<view class="search">
|
|
<image class="search-icon" src="@/static/new/search.png" mode="aspectFit" @click="search"></image>
|
|
<input type="text" placeholder="请输入内容" v-model="productName" class="input" placeholder-class="place-class">
|
|
<view @click="search" class="cancel">搜索</view>
|
|
</view>
|
|
<view class="headerline">
|
|
<view class="label">最近搜索</view>
|
|
<image src="@/static/new/del.png" class="del-icon" mode="aspectFit" @click="del"></image>
|
|
</view>
|
|
<view class="main">
|
|
<view class="item">
|
|
<view v-for="(item,index) in historyList" :key="index" class="txt" @click="historySearch(item)">{{item}}</view>
|
|
<!-- <image src="" class="del" mode=""></image> -->
|
|
</view>
|
|
</view>
|
|
<!-- 所有页面的弹框 -->
|
|
<page-popup page="/pages/shop/search"></page-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { myMixins } from "@/mixins/mixins.js";
|
|
import {searchHistoryRecommend,searchHistoryPersonal,delSearchHistoryPersonal} from '@/API/shop.js'
|
|
import HeaderCom from '@/pages/components/header.vue'
|
|
export default {
|
|
mixins: [myMixins],
|
|
data() {
|
|
return {
|
|
historyList:[],//搜索历史
|
|
productName:""
|
|
}
|
|
},
|
|
components:{HeaderCom},
|
|
mounted() {
|
|
|
|
},
|
|
onShow() {
|
|
this.getHistory()
|
|
},
|
|
methods: {
|
|
// goBack(){
|
|
// uni.switchTab({
|
|
// url:'/pages/shop/index'
|
|
// })
|
|
// },
|
|
// 搜索
|
|
search(){
|
|
uni.navigateTo({
|
|
url:`/pages/shop/search-list?productName=${this.productName}`
|
|
})
|
|
},
|
|
historySearch(item){
|
|
this.productName = item
|
|
this.search()
|
|
},
|
|
// 获取搜索历史
|
|
getHistory(){
|
|
searchHistoryPersonal().then(res => {
|
|
if(res.code === 200){
|
|
this.historyList = res.data
|
|
}else{
|
|
this.$api.msg(res.message)
|
|
}
|
|
}).catch(err => {
|
|
uni.hideLoading()
|
|
this.$api.msg(err)
|
|
})
|
|
},
|
|
del(){
|
|
delSearchHistoryPersonal().then(res=> {
|
|
if(res.code === 200){
|
|
this.historyList = []
|
|
}else{
|
|
this.$api.msg(res.message)
|
|
}
|
|
}).catch(err => {
|
|
this.$api.msg(err)
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page{
|
|
background-color: #fff;
|
|
}
|
|
.shop-search-page{
|
|
padding-top: 112rpx;
|
|
.search{
|
|
width: 100%;
|
|
height: 88rpx;
|
|
padding: 0 32rpx;
|
|
background-color: #fff;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.search-icon{
|
|
position: absolute;
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
top: 22rpx;
|
|
left: 48rpx;
|
|
}
|
|
.input{
|
|
width: 598rpx;
|
|
height: 64rpx;
|
|
background: rgba(0,0,0,0.04);
|
|
border-radius: 16rpx;
|
|
padding-left: 72rpx;
|
|
color: #000;
|
|
font-size: 32rpx;
|
|
}
|
|
.place-class{
|
|
font-size: 32rpx;
|
|
color: rgba(0,0,0,0.45);
|
|
}
|
|
.cancel{
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
.headerline{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 24rpx;
|
|
padding: 0 32rpx;
|
|
.label{
|
|
font-weight: 800;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
}
|
|
.del-icon{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
.main{
|
|
margin-top: 24rpx;
|
|
padding: 0 32rpx;
|
|
.item{
|
|
max-width: 686rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
.txt{
|
|
background: #F5F5F5;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 8rpx;
|
|
margin-bottom: 16rpx;
|
|
margin-right: 16rpx;
|
|
max-width: 686rpx;
|
|
height: 56rpx;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |