237 lines
5.1 KiB
Vue
237 lines
5.1 KiB
Vue
<!-- 搜索 -->
|
|
<template>
|
|
<view class="search-page" :style="{'paddingTop':statusBarHeight}">
|
|
<view class="header">
|
|
<image src="@/static/mine/fh.png" mode="" class="go-back" @click="goBack"></image>
|
|
<view class="header-input">
|
|
<input type="text" v-model="productName" class="input">
|
|
<view @click="search" class="btn">搜索</view>
|
|
</view>
|
|
</view>
|
|
<view class="history" v-if="historyList.length > 0">
|
|
<view class="history-title">
|
|
历史搜索
|
|
</view>
|
|
<image src="https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/search/del.png" class="search-del" mode="" @click="del"></image>
|
|
</view>
|
|
<view class="history-list">
|
|
<view v-for="(item,index) in historyList" :key="index" class="history-list-item" @click="historySearch(item)">{{item}}</view>
|
|
</view>
|
|
<!-- 所有页面的弹框 -->
|
|
<page-popup page="/pages/search/index"></page-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { myMixins } from "@/mixins/mixins.js";
|
|
import {searchHistoryRecommend,searchHistoryPersonal,delSearchHistoryPersonal} from '@/API/shop.js'
|
|
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ? `${uni.getSystemInfoSync().statusBarHeight}px` : '20px'
|
|
export default {
|
|
mixins: [myMixins],
|
|
data() {
|
|
return {
|
|
statusBarHeight,
|
|
historyList:[],//搜索历史
|
|
likeList:[{},{},{}],//猜你喜欢
|
|
productName:""
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
onShow() {
|
|
this.getHistory()
|
|
},
|
|
methods: {
|
|
goBack(){
|
|
uni.switchTab({
|
|
url:'/pages/product/product'
|
|
})
|
|
},
|
|
// 搜索
|
|
search(){
|
|
uni.navigateTo({
|
|
url:`/pages/search/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">
|
|
page {
|
|
background-image: url('@/static/index/bg.png');
|
|
background-size: 100%;
|
|
}
|
|
.search-page{
|
|
// height: 100vh;
|
|
// background-color: #F0F1F5;
|
|
.header{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 22rpx;
|
|
.go-back{
|
|
width: 19rpx;
|
|
height: 22rpx;
|
|
}
|
|
.header-input{
|
|
width: 631rpx;
|
|
height: 69rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 35rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 6rpx 10rpx 6rpx 20rpx;
|
|
.input{
|
|
width: 480rpx;
|
|
font-size: 24rpx;
|
|
color: #000000;
|
|
}
|
|
.btn{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 104rpx;
|
|
height: 57rpx;
|
|
background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
|
|
border-radius: 28px;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
.search-header{
|
|
background-color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 32rpx 20rpx 32rpx;
|
|
padding-top: 40rpx;
|
|
.search-main{
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
.search-img{
|
|
position: absolute;
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
top: 14rpx;
|
|
left: 74rpx;
|
|
}
|
|
.search-arrows{
|
|
width: 16rpx;
|
|
height: 28rpx;
|
|
z-index: 9999;
|
|
}
|
|
.search-input{
|
|
width: 534rpx;
|
|
height: 64rpx;
|
|
border: 2rpx solid #85DBD2;
|
|
border-radius: 32rpx;
|
|
margin-left: 36rpx;
|
|
padding-left: 74rpx;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
.search-txt{
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.history{
|
|
padding: 31rpx 43rpx 42rpx 23rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.history-title{
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
.search-del{
|
|
width: 32rpx;
|
|
height: 35rpx;
|
|
}
|
|
}
|
|
.history-list{
|
|
// background-color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
padding: 0 32rpx;
|
|
.history-list-item{
|
|
min-width: 100rpx;
|
|
display: inline-block;
|
|
text-align: center;
|
|
margin-right: 9rpx;
|
|
background-color: #F0F1F5;
|
|
padding: 15rpx 27rpx;
|
|
background: #EBEBEB;
|
|
border-radius: 28rpx;
|
|
font-size: 24rpx;
|
|
color: #B5B5B5;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
}
|
|
.like{
|
|
background-color: #fff;
|
|
padding: 30rpx 32rpx 0 32rpx;
|
|
.like-title{
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
font-size: 800;
|
|
}
|
|
.like-list{
|
|
margin-top: 50rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
.like-list-item{
|
|
display: inline-block;
|
|
margin-right: 36rpx;
|
|
background-color: #F0F1F5;
|
|
padding: 8rpx 22rpx;
|
|
font-weight: 400;
|
|
color: #000000;
|
|
font-size: 28rpx;
|
|
border-radius: 28rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|