overseas/pages/columnGoods/goods_search/index.vue

509 lines
14 KiB
Vue

<template>
<view>
<view class='searchGood'>
<view class='search acea-row row-between-wrapper'>
<view class='input acea-row row-between-wrapper'>
<text class='iconfont icon-sousuo2'></text>
<input type='text' :value='searchValue' :focus="focus" placeholder='点击搜索商品、店铺名称' placeholder-class='placeholder'
@input="setValue"></input>
</view>
<view class='bnt' @tap='searchBut'>搜索</view>
</view>
<view class='title'>历史记录 <text class="iconfont icon-shanchu" @click="remove"></text></view>
<view class='list acea-row' :style="{'height':historyBox?'auto':'150rpx'}" v-if="historyList.length > 0">
<block v-for="(item,index) in historyList" :key="index">
<view class='item line1' @tap='setHotSearchValue(item,0)'>{{item}}</view>
</block>
</view>
<view>
<view class="more-btn" v-if="historyList.length>9 && !historyBox" @click="historyBox = true">
展开全部<text class="iconfont icon-xiangxia"></text>
</view>
<view class="more-btn" v-if="historyList.length>9 && historyBox" @click="historyBox = false">
收起<text class="iconfont icon-xiangshang"></text>
</view>
</view>
<view v-if="historyList.length == 0" style="text-align: center; color: #999;">暂无搜索历史~</view>
<view class='title'>热门搜索</view>
<view class='list acea-row' :style="{'height': hotSearchBox?'auto':'150rpx'}">
<block v-for="(item,index) in hotSearchList" :key="index">
<view class='item line1' @tap='setHotSearchValue(item,1)'>{{item.keyword}}</view>
</block>
</view>
<view>
<view class="more-btn" v-if="hotSearchList.length>8 && !hotSearchBox" @click="hotSearchBox = true">
展开全部<text class="iconfont icon-xiangxia"></text>
</view>
<view class="more-btn" v-if="hotSearchList.length>8 && hotSearchBox" @click="hotSearchBox = false">
收起<text class="iconfont icon-xiangshang"></text>
</view>
</view>
<!--今日热搜模块-->
<view class="search-hot">
<scroll-view v-if="isShow" scroll-x="true" style="white-space: nowrap; display: flex;" scroll-with-animation show-scrollbar="true">
<view v-if="daySearchList.length>0" class="scroll-count">
<view class="scroll-item" :style="{'background-image':`url(${domain}/static/images/search-title-bg.png)`}">
<view class="search-title">
<image :src="`${domain}/static/images/search-title-icon.png`" class="title-icon"></image>
<text>今日热搜</text>
</view>
<view class="search-list">
<navigator v-for="(item,index) in daySearchList" :url="`/pages/goods_details/index?id=${item.product_id}`" hover-class="none" class="search-item">
<block v-if="index<3">
<view class="picture">
<image :src="item.image" class="image"></image>
<text class="list-num num-pic" :style="{'background-image':`url(${domain}/static/images/search-list${index+1}.png)`}">{{index+1}}</text>
</view>
<view class="list-info">
<view class="title line1">{{item.store_name}}</view>
<view class="info line1">{{item.store_info}}</view>
</view>
</block>
<block v-else>
<view class="list-more">
<view class="list-num" :style="{'background-image':`url(${domain}/static/images/search-list.png)`}">{{index+1}}</view>
<view class="title line1 titleml">{{item.store_name}}</view>
</view>
</block>
</navigator>
</view>
</view>
</view>
<!--热销排行-->
<view v-for="(item,index) in hotRankList" class="scroll-count">
<view class="scroll-item" :style="{'background-image':`url(${domain}/static/images/search-title-bg.png)`}">
<view class="search-title">
<image :src="`${domain}/static/images/search-title-icon.png`" class="title-icon"></image>
<text>{{item.cate_name}}</text>
</view>
<view class="search-list">
<navigator v-for="(itm,idx) in item.list" :url="`/pages/goods_details/index?id=${itm.product_id}`" hover-class="none" class="search-item">
<block v-if="idx<3">
<view class="picture">
<image :src="itm.image" class="image"></image>
<text class="list-num num-pic" :style="{'background-image':`url(${domain}/static/images/search-list${idx+1}.png)`}">{{idx+1}}</text>
</view>
<view class="list-info">
<view class="title line1">{{itm.store_name}}</view>
<view class="info line1">{{itm.store_info}}</view>
</view>
</block>
<block v-else>
<view class="list-more">
<view class="list-num" :style="{'background-image':`url(${domain}/static/images/search-list.png)`}">{{idx+1}}</view>
<view class="title line1 titleml">{{itm.store_name}}</view>
</view>
</block>
</navigator>
</view>
</view>
</view>
</scroll-view>
<view class="search-hot-switch">
<view v-if="isShow" class="switch" @click="isShow=!isShow">
<text class="iconfont icon-xianshizhuangtai"></text>
<text>隐藏热搜榜</text>
</view>
<view v-else class="switch" @click="isShow=!isShow">
<text class="iconfont icon-yincangzhuangtai"></text>
<text>开启热搜榜</text>
</view>
</view>
</view>
</view>
<!-- #ifndef H5 -->
<passwordPopup></passwordPopup>
<!-- #endif -->
</view>
</template>
<script>
import { getSearchKeyword,copyPasswordSearch,getTodayHotSearch,getHotRanking } from '@/api/store.js';
import shareScence from '@/libs/spread';
import { silenceBindingSpread } from '@/utils';
import { goShopDetail } from '@/libs/order.js';
import { initiateAssistApi } from '@/api/activity.js';
import { mapGetters } from 'vuex';
import { HTTP_REQUEST_URL } from '@/config/app';
// #ifndef H5
import passwordPopup from '@/components/passwordPopup';
// #endif
import { toLogin } from '@/libs/login.js';
export default {
computed: mapGetters(['isLogin', 'uid']),
components: {
// #ifndef H5
passwordPopup,
// #endif
},
data() {
return {
domain: HTTP_REQUEST_URL,
hostProduct: [],
searchValue: '',
focus: true,
bastList: [],
hotSearchList: [],
daySearchList: [],
hotRankList: [],
first: 0,
limit: 8,
page: 1,
loading: false,
loadend: false,
loadTitle: '加载更多',
hotPage: 1,
isScroll: true,
// 搜索历史
historyList: [],
// 临时搜索列表
tempStorage: [],
historyBox: false,
hotSearchBox: false,
mainWidth: 960,
isShow: true,
};
},
onLoad(options) {
this.searchValue = options.searchVal || ''
},
onShow: function() {
try {
this.historyList = []
this.tempStorage = []
let arr = uni.getStorageSync('historyList')
if (arr.length > 0) {
this.historyList = arr
} else {
this.historyList = []
}
this.tempStorage = this.historyList
} catch (e) {}
this.getRoutineHotSearch();
this.getHotSearchList();
this.getHotRankingList();
},
methods: {
// 清空历史记录
remove() {
let self = this
uni.showModal({
title: '提示',
content: '确认删除全部历史搜索记录?',
success: function(res) {
if (res.confirm) {
self.tempStorage = []
try {
uni.setStorageSync('historyList', self.tempStorage)
self.historyList = []
} catch (e) {}
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
getRoutineHotSearch: function() {
let that = this;
getSearchKeyword().then(res => {
that.$set(that, 'hotSearchList', res.data);
});
},
/*今日热搜*/
getHotSearchList(){
getTodayHotSearch().then(res => {
this.$set(this, 'daySearchList', res.data);
});
},
/*热销排行*/
getHotRankingList(){
getHotRanking().then(res => {
this.$set(this, 'hotRankList', res.data);
});
},
setHotSearchValue: function(event, key) {
this.focus = false
if (key) {
this.$set(this, 'searchValue', event.keyword);
} else {
this.$set(this, 'searchValue', event);
}
this.$nextTick(() => {
this.focus = true
})
this.searchBut()
},
setValue: function(event) {
this.$set(this, 'searchValue', event.detail.value);
},
searchBut: function() {
if(/^(\/@[1-9]{1}).*\*\//.test(this.searchValue)){
uni.showLoading({
title: '加载中',
mask: true
});
copyPasswordSearch({key: this.searchValue}).then(res => {
uni.hideLoading();
let item = res.data
shareScence(res.data.user.uid, this.isLogin);
//#ifdef H5
this.isLogin && silenceBindingSpread();
//#endif
goShopDetail(item, this.uid).then(res => {
if (this.isLogin) {
initiateAssistApi(item.activity_id)
.then(res => {
let id = res.data.product_assist_set_id;
uni.hideLoading();
uni.navigateTo({
url: '/pages/activity/assist_detail/index?id=' + id
});
})
.catch(err => {
uni.showToast({
title: err,
icon: 'none'
});
});
} else {
toLogin()
}
})
}).catch(err => {
uni.showToast({
title: err,
icon: 'none'
});
this.searchValue = ""
});
}else{
let status = false
this.tempStorage.forEach((el, index) => {
if (el == this.searchValue) {
status = true
}
})
if (!status && this.searchValue) {
this.tempStorage.unshift(this.searchValue)
}
try {
uni.setStorageSync('historyList', this.tempStorage);
} catch (e) {}
uni.navigateTo({
url: '/pages/columnGoods/goods_search_con/index?searchValue=' + this.searchValue
})
}
}
}
}
</script>
<style>
page {
background-color: #fff;
}
</style>
<style lang="scss">
.searchGood .search {
padding-left: 30rpx;
}
.searchGood .search {
margin-top: 20rpx;
}
.searchGood .search .input {
width: 598rpx;
background-color: #f7f7f7;
border-radius: 33rpx;
padding: 0 35rpx;
box-sizing: border-box;
height: 66rpx;
}
.searchGood .search .input input {
width: 472rpx;
font-size: 28rpx;
}
.searchGood .search .input .placeholder {
color: #bbb;
}
.searchGood .search .input .iconfont {
color: #000;
font-size: 35rpx;
}
.searchGood .search .bnt {
width: 120rpx;
text-align: center;
height: 66rpx;
line-height: 66rpx;
font-size: 30rpx;
color: #282828;
}
.searchGood .title {
position: relative;
font-size: 28rpx;
color: #282828;
margin: 50rpx 30rpx 25rpx 30rpx;
.icon-shanchu {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
color: #999;
}
}
.searchGood .list {
padding: 0 10rpx;
overflow: hidden;
}
.searchGood .list .item {
font-size: 26rpx;
color: #666;
padding: 0 21rpx;
height: 60rpx;
background: rgba(242, 242, 242, 1);
border-radius: 22rpx;
line-height: 60rpx;
margin: 0 0 20rpx 20rpx;
max-width: 150rpx;
}
.searchGood .line {
border-bottom: 1rpx solid #eee;
margin: 20rpx 30rpx 0 30rpx;
}
.more-btn {
display: flex;
align-items: center;
justify-content: center;
margin: 0 0 20rpx 20rpx;
height: 60rpx;
font-size: 24rpx;
color: #999;
.iconfont {
font-size: 22rpx;
margin-left: 10rpx;
}
}
.search-hot{
padding: 0 30rpx 30rpx;
padding-bottom: calc(30rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
padding-bottom: calc(30rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
scroll-view{
width:100%;
}
/deep/.uni-scroll-view-content{
display: flex;
}
}
.scroll-item{
border: 1px solid #FFECEC;
border-radius: 16rpx;
background-repeat: no-repeat;
background-size: 100% auto;
height: 980rpx;
}
.scroll-count{
display: inline-block;
width: 450rpx;
margin-right: 30rpx;
vertical-align:top;
&:last-child{
margin-right: 0;
}
.search-title{
padding: 20rpx 20rpx 32rpx;
color: #E93323;
font-size: 28rpx;
font-weight: bold;
display: flex;
align-items: center;
.title-icon{
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
}
}
.search-list{
padding: 0 20rpx 40rpx;
position: relative;
top: -15rpx;
}
.search-item{
display: flex;
align-items: center;
margin-bottom: 20rpx;
&:nth-child(n+3){
margin-bottom: 0;
}
.list-more{
display: flex;
align-items: center;
margin-top: 40rpx;
}
.picture{
width: 106rpx;
height: 106rpx;
border-radius: 10rpx;
position: relative;
.image{
width: 100%;
height: 100%;
border-radius: 10rpx;
}
}
.list-info{
max-width: 260rpx;
margin-left: 20rpx;
}
.title{
margin: 0;
color: #282828;
font-size: 26rpx;
&.titleml{
margin-left: 15rpx;
max-width: 360rpx;
}
}
.info{
font-size: 22rpx;
color: #999999;
}
}
.list-num{
width: 28rpx;
height: 31rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 20rpx;
color: #ffffff;
background-size: 100% 100%;
&.num-pic{
position: absolute;
top: 0;
left: 0;
}
}
}
.search-hot-switch{
margin-top: 20rpx;
.switch{
border: 1px solid #CCCCCC;
border-radius: 22rpx;
display: flex;
align-items: center;
justify-content: center;
width: 174rpx;
height: 43rpx;
color: #666666;
font-size: 20rpx;
.iconfont{
font-size: 24rpx;
margin-right: 10rpx;
position: relative;
// top: 1rpx;
}
}
}
</style>