<template>
<view
:style="colorStyle">
<view class="h-120
flex-between-center px-20">
<view class="h-72 bg--w111-f5f5f5 rd-36rpx px-32
flex-1
flex-y-center relative">
<text class="iconfont icon-ic_search text--w111-999"></text>
<input type="text" confirm-type="search" placeholder="请输入要查询的内容" @confirm="inputConfirm" @input="setValue"
class="fs-28 w-438 text--w111-333 pl-18 line1" v-model="searchValue" />
<text class="iconfont icon-ic_close1 fs-28 text--w111-999 z-10" v-show="searchValue"
@tap="clearSearchVal"></text>
</view>
<view class="fs-28 text--w111-333 ml-32" @tap='searchBut'>搜索</view>
</view>
<view class="px-20" v-if="history
.length">
<view class="
flex-between-center mt-16 mb-24">
<view class="fs-28 lh-40rpx fw-500 text--w111-333">历史搜索</view>
<text class="iconfont icon-ic_delete fs-28 text--w111-999" @tap="clear"></text>
</view>
<view class="
flex flex-wrap">
<text class="
flex-center h-56 line1 rd-28rpx bg--w111-f5f5f5 px-24 fs-24 text--w111-666 mr-24 mb-16"
v-for="(item,index) in isShowMore ? history
: history
.slice(0,7)"
:key="index"
@tap='setHotSearchValue(item
.keyword)' v-if="item
.keyword">{{item
.keyword}}</text>
<view class="w-56 h-56 rd-28rpx bg--w111-f5f5f5
flex-center text--w111-666"
v-if="history
.length > 7" @tap="isShowMore = !isShowMore">
<text class="iconfont fs-24"
:class="isShowMore ? 'icon-ic_uparrow'
: 'icon-ic_downarrow'"></text>
</view>
</view>
</view>
<view class="px-20">
<view class="
flex-between-center mt-40 mb-24">
<view class="fs-28 lh-40rpx fw-500 text--w111-333">热门搜索</view>
<text class="iconfont icon-ic_Refresh fs-28 text--w111-999"
:class="isSpin ? 'spin'
: ''" @tap="refresh"></text>
</view>
<view class="
flex flex-wrap">
<view class="
flex-center search_item h-56 rd-28rpx px-24 fs-24 mr-24 mb-16"
v-for="(item,index) in hotSearchList"
:key="index"
:style="{'color'
:item
.color,'background-color'
:item
.bg_color,border
: item
.border_color ? '1px solid ' + item
.border_color
: 'none'}"
@tap='setHotSearchValue(item
.name)'>
<view class="
flex-y-center">
<image v-if="item
.icon"
:src="item
.icon" class="w-24 h-24 rd-4rpx mr-8"></image>
<text>{{item
.name}}</text>
</view>
</view>
</view>
</view>
<view>
<scroll-view scroll-x="true" class="white-nowrap vertical-middle w-730 mt-32 pl-20" show-scrollbar="false">
<view class="inline-block mr-20" v-if="salesRecommendList
.length">
<view class="w-454 rd-24rpx gradient_bg pt-22 pb-8">
<view class="fs-28 font-red lh-40rpx fw-600 pl-24 mb-18
flex-y-center"
@tap="goRank(1)">
<image src="@/static/img/sales_icon
.png" class="w-40 h-40"></image>
<text class="pl-8">销量</text>
</view>
<view class="mx-8 rd-24rpx bg--w111-fff h-748 p-20">
<view class="
flex-y-center" v-if="salesRecommendList[0]" @tap="goDetail(salesRecommendList[0])">
<view class="relative w-108 h-108">
<image
:src="salesRecommendList[0]
.image" class="w-108 h-108 rd-16rpx"></image>
<view class="rank-count rank-count1 fs-24 text--w111-fff
flex-center">1</view>
</view>
<view class="
flex-1 h-108
flex-col
flex-x-center ml-16">
<view class="w-260 fs-26 text--w111-333 lh-40rpx line1">{{salesRecommendList[0]
.store_name}}</view>
<view class="w-260 fs-22 text--w111-999 lh-30rpx mt-8 line1">{{salesRecommendList[0]
.store_info}}</view>
</view>
</view>
<view class="
flex-y-center mt-16" v-if="salesRecommendList[1]" @tap="goDetail(salesRecommendList[1])">
<view class="relative w-108 h-108">
<image
:src="salesRecommendList[1]
.image" class="w-108 h-108 rd-16rpx"></image>
<view class="rank-count rank-count2 fs-24 text--w111-fff
flex-center">2</view>
</view>
<view class="
flex-1 h-108
flex-col
flex-x-center ml-16">
<view class="
flex-between-center">
<view class="w-260 fs-26 text--w111-333 lh-40rpx line1">{{salesRecommendList[1]
.store_name}}</view>
</view>
<view class="w-260 fs-22 text--w111-999 lh-30rpx mt-8 line1">{{salesRecommendList[1]
.store_info}}</view>
</view>
</view>
<view class="
flex-y-center mt-16 mb-34" v-if="salesRecommendList[2]" @tap="goDetail(salesRecommendList[2])">
<view class="relative w-108 h-108">
<image
:src="salesRecommendList[2]
.image" class="w-108 h-108 rd-16rpx"></image>
<view class="rank-count rank-count3 fs-24 text--w111-fff
flex-center">3</view>
</view>
<view class="
flex-1 h-108
flex-col
flex-x-center ml-16">
<view class="
flex-between-center">
<view class="w-260 fs-26 text--w111-333 lh-40rpx line1">{{salesRecommendList[2]
.store_name}}</view>
</view>
<view class="w-260 fs-22 text--w111-999 lh-30rpx mt-8 line1">{{salesRecommendList[2]
.store_info}}</view>
</view>
</view>
<view class="
flex-between-center scroll_cell" v-for="(item,index) in salesRecommendList
.slice(3)"
:key="index" @tap="goDetail(item)">
<view class="
flex-y-center">
<text class="inline-block w-30 h-32 lh-32rpx text--w111-fff text-center fs-24 rank_4">{{index + 4}}</text>
<text class="fs-26 text--w111-333 ml-20 w-360 line1">
<image v-if="item
.delivery_type
.indexOf('2') > -1"
style="height
:32
.6rpx;width
:116
.08rpx;margin-right
:10rpx;vertical-align
:middle;"
src="https
://www
.ytzhan
.com/uploads/uniapp/2-glodzt
.png"></image>
<image v-if="item
.delivery_type
.indexOf('1') > -1"
style="height
:32
.6rpx;width
:116
.08rpx;margin-right
: 10rpx;vertical-align
:middle;"
src="https
://www
.ytzhan
.com/uploads/uniapp/2-glodkd
.png"></image><text style="vertical-align
:middle;">{{item
.store_name}}</text></text>
</view>
</view>
</view>
</view>
</view>
<view class="inline-block mr-20" v-if="scoreRecommendList
.length">
<view class="w-454 rd-24rpx gradient_bg pt-22 pb-8">
<view class="fs-28 font-red lh-40rpx fw-600 pl-24 mb-18
flex-y-center"
@tap="goRank(2)">
<image src="@/static/img/sales_icon
.png" class="w-40 h-40"></image>
<text class="pl-8">评分</text>
</view>
<view class="mx-8 rd-24rpx bg--w111-fff h-748 p-20">
<view class="
flex-y-center" v-if="scoreRecommendList[0]" @tap="goDetail(scoreRecommendList[0])">
<view class="relative w-108 h-108">
<image
:src="scoreRecommendList[0]
.image" class="w-108 h-108 rd-16rpx"></image>
<view class="rank-count rank-count1 fs-24 text--w111-fff
flex-center">1</view>
</view>
<view class="
flex-1 h-108
flex-col
flex-x-center ml-16">
<view class="
flex-between-center">
<view class="w-260 fs-26 text--w111-333 lh-40rpx line1">{{scoreRecommendList[0]
.store_name}}</view>
</view>
<view class="w-260 fs-22 text--w111-999 lh-30rpx mt-8 line1">{{scoreRecommendList[0]
.store_info}}</view>
</view>
</view>
<view class="
flex-y-center mt-16" v-if="scoreRecommendList[1]" @tap="goDetail(scoreRecommendList[1])">
<view class="relative w-108 h-108">
<image
:src="scoreRecommendList[1]
.image" class="w-108 h-108 rd-16rpx"></image>
<view class="rank-count rank-count2 fs-24 text--w111-fff
flex-center">2</view>
</view>
<view class="
flex-1 h-108
flex-col
flex-x-center ml-16">
<view class="
flex-between-center">
<view class="w-260 fs-26 text--w111-333 lh-40rpx line1">{{scoreRecommendList[1]
.store_name}}</view>
</view>
<view class="w-260 fs-22 text--w111-999 lh-30rpx mt-8 line1">{{scoreRecommendList[1]
.store_info}}</view>
</view>
</view>
<view class="
flex-y-center mt-16 mb-34" v-if="scoreRecommendList[2]" @tap="goDetail(scoreRecommendList[2])">
<view class="relative w-108 h-108">
<image
:src="scoreRecommendList[2]
.image" class="w-108 h-108 rd-16rpx"></image>
<view class="rank-count rank-count3 fs-24 text--w111-fff
flex-center">3</view>
</view>
<view class="
flex-1 h-108
flex-col
flex-x-center ml-16">
<view class="
flex-between-center">
<view class="w-260 fs-26 text--w111-333 lh-40rpx line1">{{scoreRecommendList[2]
.store_name}}</view>
</view>
<view class="w-260 fs-22 text--w111-999 lh-30rpx mt-8 line1">{{scoreRecommendList[2]
.store_info}}</view>
</view>
</view>
<view class="
flex-between-center scroll_cell" v-for="(item,index) in scoreRecommendList
.slice(3)"
:key="index" @tap="goDetail(item)">
<view class="
flex-y-center">
<text class="inline-block w-30 h-32 lh-32rpx text--w111-fff text-center fs-24 rank_4">{{index + 4}}</text>
<text class="fs-26 text--w111-333 ml-20 w-360 line1">
<image v-if="item
.delivery_type
.indexOf('2') > -1"
style="height
:32
.6rpx;width
:116
.08rpx;margin-right
:10rpx;vertical-align
:middle;"
src="https
://www
.ytzhan
.com/uploads/uniapp/2-glodzt
.pngwww
.ytzhan
.com/uploads/uniapp/2-glodzt
.png"></image>
<image v-if="item
.delivery_type
.indexOf('1') > -1"
style="height
:32
.6rpx;width
:116
.08rpx;margin-right
: 10rpx;vertical-align
:middle;"
src="https
://www
.ytzhan
.com/uploads/uniapp/2-glodzt
.pngwww
.ytzhan
.com/uploads/uniapp/2-glodkd
.png"></image>{{item
.store_name}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="inline-block mr-20" v-if="collectRecommendList
.length">
<view class="w-454 rd-24rpx gradient_bg pt-22 pb-8">
<view class="fs-28 font-red lh-40rpx fw-600 pl-24 mb-18
flex-y-center"
@tap="goRank(3)">
<image src="@/static/img/sales_icon
.png" class="w-40 h-40"></image>
<text class="pl-8">收藏</text>
</view>
<view class="mx-8 rd-24rpx bg--w111-fff h-748 p-20">
<view class="
flex-y-center" v-if="collectRecommendList[0]" @tap="goDetail(collectRecommendList[0])">
<view class="relative w-108 h-108">
<image
:src="collectRecommendList[0]
.image" class="w-108 h-108 rd-16rpx"></image>
<view class="rank-count rank-count1 fs-24 text--w111-fff
flex-center">1</view>
</view>
<view class="
flex-1 h-108
flex-col
flex-x-center ml-16">
<view class="
flex-between-center">
<view class="w-260 fs-26 text--w111-333 lh-40rpx line1">{{collectRecommendList[0]
.store_name}}</view>
</view>
<view class="w-260 fs-22 text--w111-999 lh-30rpx mt-8 line1">{{collectRecommendList[0]
.store_info}}</view>
</view>
</view>
<view class="
flex-y-center mt-16" v-if="collectRecommendList[1]" @tap="goDetail(collectRecommendList[1])">
<view class="relative w-108 h-108">
<image
:src="collectRecommendList[1]
.image" class="w-108 h-108 rd-16rpx"></image>
<view class="rank-count rank-count2 fs-24 text--w111-fff
flex-center">2</view>
</view>
<view class="
flex-1 h-108
flex-col
flex-x-center ml-16">
<view class="
flex-between-center">
<view class="w-260 fs-26 text--w111-333 lh-40rpx line1">{{collectRecommendList[1]
.store_name}}</view>
</view>
<view class="w-260 fs-22 text--w111-999 lh-30rpx mt-8 line1">{{collectRecommendList[1]
.store_info}}</view>
</view>
</view>
<view class="
flex-y-center mt-16 mb-34" v-if="collectRecommendList[2]" @tap="goDetail(collectRecommendList[2])">
<view class="relative w-108 h-108">
<image
:src="collectRecommendList[2]
.image" class="w-108 h-108 rd-16rpx"></image>
<view class="rank-count rank-count3 fs-24 text--w111-fff
flex-center">3</view>
</view>
<view class="
flex-1 h-108
flex-col
flex-x-center ml-16">
<view class="
flex-between-center">
<view class="w-260 fs-26 text--w111-333 lh-40rpx line1">{{collectRecommendList[2]
.store_name}}</view>
</view>
<view class="w-260 fs-22 text--w111-999 lh-30rpx mt-8 line1">{{collectRecommendList[2]
.store_info}}</view>
</view>
</view>
<view class="
flex-between-center scroll_cell" v-for="(item,index) in collectRecommendList
.slice(3)"
:key="index" @tap="goDetail(item)">
<view class="
flex-y-center">
<text class="inline-block w-30 h-32 lh-32rpx text--w111-fff text-center fs-24 rank_4">{{index + 4}}</text>
<text class="fs-26 text--w111-333 ml-20 w-360 line1">
<image v-if="item
.delivery_type
.indexOf('2') > -1"
style="height
:32
.6rpx;width
:116
.08rpx;margin-right
:10rpx;vertical-align
:middle;"
src="https
://www
.ytzhan
.com/uploads/uniapp/2-glodzt
.pngwww
.ytzhan
.com/uploads/uniapp/2-glodzt
.png"></image>
<image v-if="item
.delivery_type
.indexOf('1') > -1"
style="height
:32
.6rpx;width
:116
.08rpx;margin-right
: 10rpx;vertical-align
:middle;"
src="https
://www
.ytzhan
.com/uploads/uniapp/2-glodzt
.pngwww
.ytzhan
.com/uploads/uniapp/2-glodkd
.png"></image><text style="vertical-align
:middle;">{{item
.store_name}}</text></text>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
<scroll-view scroll-y="true" class="fuzzy_modal"
:style="{height
:fuzzyHeight + 'px',top
: 60 + 'px'}"
v-if="newPartyList
.length" @touchmove
.stop
.prevent="moveStop">
<view class="cell" v-for="(item,index) in newPartyList"
:key="index"
@tap="setCommentSearch(item
.id)">
<view class="keyword line1" v-html="item
.keyword"></view>
</view>
</scroll-view>
</view>
</template>
<script>
let sysHeight = uni
.getSystemInfoSync()
.statusBarHeight;
import home from '@/components/home/index
.vue'
import {
getSearchKeyword,
getSearchRecommendApi,
getHotWordApi
} from '@/api/store
.js';
import { searchList, clearSearch } from '@/api/api
.js';
import recommend from '@/components/recommend';
import colors from "@/mixins/color";
import { goShopDetail } from '@/libs/order
.js';
import { HTTP_REQUEST_URL } from '@/config/app
.js';
import { Debounce } from '@/utils/validate
.js'
export default {
components
: {
recommend,
home
},
mixins
: [colors],
data() {
return {
hostProduct
: [],
searchValue
: '',
focus
: true,
bastList
: [],
hotSearchList
: [],
isSpin
:false,
first
: 0,
limit
: 8,
page
: 1,
loading
: false,
loadend
: false,
loadTitle
: '加载更多',
hotPage
: 1,
isScroll
: true,
history
: [],
imgHost
: HTTP_REQUEST_URL,
salesRecommendList
:[],
scoreRecommendList
:[],
collectRecommendList
:[],
sysHeight
:sysHeight,
newPartyList
: [], //模糊搜索关键词列表
isShowMore
: false
};
},
computed
: {
fuzzyHeight() {
let screenHeight = uni
.getSystemInfoSync()
.screenHeight;
return screenHeight - this
.sysHeight - 56;
}
},
onLoad(e) {
this
.searchValue = e
.searchVal || '';
this
.getSearchHotKeywords();
this
.getSearchRecommend();
setTimeout(()=>{
this
.newPartySearch();
},1000)
},
onShow
: function(e) {
uni
.removeStorageSync('form_type_cart');
this
.searchList();
},
methods
: {
refresh(){
this
.isSpin = true;
this
.getSearchHotKeywords();
},
// 获取搜索热词
getSearchHotKeywords(){
getHotWordApi()
.then(res=>{
this
.hotSearchList = res
.data;
setTimeout(_=>{
this
.isSpin = false;
},1000)
})
},
searchList() {
searchList({
page
: 1,
limit
: 10
})
.then(res => {
this
.history = res
.data;
});
},
clear() {
let that = this;
clearSearch()
.then(res => {
uni
.showToast({
title
: res
.msg,
success() {
that
.history = [];
}
});
});
},
inputConfirm
: function(event) {
if (event
.detail
.value) {
uni
.hideKeyboard();
this
.setHotSearchValue(event
.detail
.value);
}
},
setValue
: Debounce(function(e){
this
.newPartySearch();
}),
newPartySearch
: function() {
getSearchKeyword({keyword
:this
.searchValue})
.then(res => {
this
.newPartyList = res
.data
.list;
this
.newPartyList
.map((item) => {
this
.$set(item,'keyword',this
.brightKeyword(item
.store_name,res
.data
.keyword));
});
});
},
brightKeyword(val,keyword) {
if (val
.indexOf(keyword) > -1) {
val = `<p class="line1">${val}</p>`
return val
.replace(keyword, `<span style="color
: #C9771E;">${keyword}</span>`);
} else {
return val;
}
},
setCommentSearch(id) {
uni
.navigateTo({
url
:'/pages/goods/goods_list/index?productId=' + id
})
},
setHotSearchValue
: function(event) {
this
.$set(this, 'searchValue', event);
this
.focus = false;
this
.searchBut();
},
searchBut
: function() {
let that = this;
that
.focus = false;
if (that
.searchValue
.length > 0) {
this
.newPartyList = [];
uni
.navigateTo({
url
:'/pages/goods/goods_list/index?searchValue=' + that
.searchValue
})
} else {
return this
.$util
.Tips({
title
: '请输入要搜索的商品',
icon
: 'none',
duration
: 1000,
mask
: true,
});
}
},
getSearchRecommend(){
getSearchRecommendApi(1)
.then(res=>{
this
.salesRecommendList = res
.data;
})
getSearchRecommendApi(2)
.then(res=>{
this
.scoreRecommendList= res
.data;
})
getSearchRecommendApi(3)
.then(res=>{
this
.collectRecommendList= res
.data;
})
},
// 去详情页
goDetail(item) {
goShopDetail(item, this
.uid)
.catch(res => {
uni
.navigateTo({
url
: `/pages/goods_details/index?id=${item
.id}`
});
});
},
goRank(type){
uni
.navigateTo({
url
:`/pages/columnGoods/rank/index?type=${type}`
})
},
clearSearchVal(){
this
.searchValue = '';
this
.newPartyList = [];
}
}
}
</script>排行榜有数据但是salesRecommendList、scoreRecommendList、collectRecommendList
.length都为0且 即便res
.data里有数据 打印出的length仍旧为0
本文解决Flex项目导入早期版本时无法解析组件执行的问题。通过导入命名空间及改头部导入，确保正确调用F3组件。关键步骤包括使用mx1前缀替换原始前缀，并调整默认导入的命名空间。
扫一扫
212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
