You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
176 lines
4.5 KiB
176 lines
4.5 KiB
<template> |
|
<view> |
|
<view class="searchGood"> |
|
<cu-custom :isBack="true"> |
|
<block slot="backText"> |
|
<image class="backImg" src="../../../static/images/back-btn.png" mode=""></image> |
|
</block> |
|
<block slot="content"> |
|
<view class="search acea-row row-between-wrapper" :style="'width:calc('+CustomBarLeft+'px - 57px);'"> |
|
<input type="text" placeholder="眼贴" placeholder-style="color: #999999;" v-model="search" confirm-type="搜索" @confirm="submit"> |
|
<!-- <image src="../../../static/images/scan.png" /> --> |
|
<view class="btn" @click="submit">搜索</view> |
|
</view> |
|
</block> |
|
</cu-custom> |
|
<!-- <view class="search acea-row row-between-wrapper"> |
|
<view class="input acea-row row-between-wrapper"> |
|
<text class="iconfont icon-sousuo2"></text> |
|
<form @submit.prevent="submit"></form>？？ |
|
<input type="text" placeholder="点击搜索商品" v-model="search" /> |
|
</view> |
|
<view class="bnt" @click="submit">搜索</view> |
|
</view> --> |
|
<!-- <view v-if="keywords.length"> |
|
<view class="title">热门搜索</view> |
|
<view class="list acea-row"> |
|
<view |
|
class="item" |
|
v-for="keywordsKey of keywords" |
|
:key="keywordsKey" |
|
@click="toSearch(keywordsKey)" |
|
>{{ keywordsKey }}</view> |
|
</view> |
|
</view> --> |
|
<!-- <view class="line"></view> --> |
|
<!-- <GoodList></GoodList>--> |
|
</view> |
|
<view class="searchGood-content" :style="'height:calc(100vh - '+CustomBar+'px);'"> |
|
<view class="searchGood-keywords"> |
|
<view class="title">热门搜索</view> |
|
<view class="list acea-row"> |
|
<view |
|
class="item" |
|
v-for="keywordsKey of keywords" |
|
:key="keywordsKey" |
|
@click="toSearch(keywordsKey)" |
|
>{{ keywordsKey }}</view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<!--<view class="noCommodity">--> |
|
<!--<view class="noPictrue">--> |
|
<!--<image :src="`${$VUE_APP_RESOURCES_URL}/images/noSearch.png`" class="image" />--> |
|
<!--</view>--> |
|
<!--<recommend></recommend>--> |
|
<!--</view>--> |
|
</view> |
|
</template> |
|
<script> |
|
// import GoodList from "@/components/GoodList"; |
|
import { getSearchKeyword } from "@/api/store"; |
|
import { trim } from "@/utils"; |
|
// import Recommend from "@/components/Recommend"; |
|
export default { |
|
name: "GoodSearch", |
|
components: { |
|
// Recommend, |
|
// GoodList |
|
}, |
|
props: {}, |
|
data: function() { |
|
return { |
|
StatusBar: this.StatusBar, |
|
CustomBar: this.CustomBar, |
|
CustomBarLeft: this.CustomBarLeft, |
|
keywords: [], |
|
search: "" |
|
}; |
|
}, |
|
mounted: function() { |
|
this.getData(); |
|
}, |
|
methods: { |
|
submit() { |
|
let search = trim(this.search) || ""; |
|
if (!search) return; |
|
// if (!search) { |
|
// search = '肌'; |
|
// }; |
|
this.toSearch(search); |
|
}, |
|
toSearch(s) { |
|
this.$yrouter.push({ path: "/pages/shop/GoodsList/index", query: { s } }); |
|
}, |
|
getData() { |
|
getSearchKeyword().then(res => { |
|
this.keywords = res.data; |
|
}); |
|
} |
|
} |
|
}; |
|
</script> |
|
<style lang="less" scoped> |
|
// .noCommodity { |
|
// border-top: 0.05*100rpx solid #f5f5f5; |
|
// } |
|
|
|
.searchGood { |
|
.backImg { |
|
height: 62rpx; |
|
width: 62rpx; |
|
margin-left: 26rpx; |
|
} |
|
.search { |
|
input { |
|
width: 280rpx; |
|
font-size: 26rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #999999; |
|
// line-height: 38rpx; |
|
} |
|
image { |
|
width: 48rpx; |
|
height: 48rpx; |
|
} |
|
.btn { |
|
width: 96rpx; |
|
height: 50rpx; |
|
background: linear-gradient(135deg, #39D396 0%, #1B8DCC 100%); |
|
border-radius: 10rpx; |
|
font-size: 26rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #FFFFFF; |
|
line-height: 50rpx; |
|
text-align: center; |
|
} |
|
} |
|
} |
|
|
|
.searchGood-content { |
|
width: 100vw; |
|
padding-top: 4rpx; |
|
.searchGood-keywords { |
|
width: 100%; |
|
height: 100%; |
|
background: #FFFFFF; |
|
border-radius: 28rpx 28rpx 0rpx 0rpx; |
|
padding: 20rpx 32rpx; |
|
.title { |
|
font-size: 30rpx; |
|
font-family: PingFang SC; |
|
font-weight: 600; |
|
color: #3A3A3C; |
|
line-height: 42rpx; |
|
padding: 16rpx 0rpx; |
|
} |
|
.item { |
|
padding: 0rpx 16rpx; |
|
height: 56rpx; |
|
background: #F1F1F1; |
|
border-radius: 16rpx; |
|
margin-right: 20rpx; |
|
margin-bottom: 16rpx; |
|
font-size: 24rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #999999; |
|
line-height: 56rpx; |
|
} |
|
} |
|
} |
|
|
|
</style>
|
|
|