444 lines
12 KiB
Vue
444 lines
12 KiB
Vue
<template>
|
||
<view>
|
||
<view v-if="showHeader" class="header" :style="{ position: headerPosition,top:headerTop,opacity: afterHeaderOpacity }">
|
||
<view class="input-box">
|
||
<input
|
||
placeholder="关键字"
|
||
placeholder-style="color:#c0c0c0;"
|
||
v-model="keyword"
|
||
:focus="true"
|
||
confirm-type="search"
|
||
@confirm="reload"
|
||
/>
|
||
<view class="icon search" @tap="reload()"></view>
|
||
</view>
|
||
</view>
|
||
<view class="wordstop" v-if="showWords">
|
||
<text style="color:gray;font-size: 20;">历史检索</text>
|
||
|
||
</view>
|
||
<view v-if="goodsList.length==0 && !showWords" style="text-align: center;margin-top: 150upx;">
|
||
暂无相关商品
|
||
</view>
|
||
<view v-if="showWords" class="words">
|
||
<view class="tag-view" v-if="keywords.length>1">
|
||
<uni-tag text="删除" type="error" @click="deletewords()" :inverted="true"/>
|
||
</view>
|
||
<view class="tag-view" @click="search(item)" v-for="item in keywords" :key="item">
|
||
<uni-tag :text="item" :inverted="true" type="royal" />
|
||
</view>
|
||
</view>
|
||
<view class="place"></view>
|
||
<view class="goods-list" v-if="!showWords">
|
||
<view class="product-list">
|
||
<view class="product" v-for="(goods) in goodsList" :key="goods.id" @tap="toGoods(goods)">
|
||
<image mode="aspectFill" :src="goods.picurl"></image>
|
||
<view v-html="brightenKeyword(goods.title,keyword)" class="name"></view>
|
||
<view class="info">
|
||
<view class="price">{{goods.price}}</view>
|
||
<!-- <view class="slogan">{{ goods.pay_num }}人已付款</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="loading-text">{{loadingText}}</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
showHeader:true,
|
||
afterHeaderOpacity: 1,//不透明度
|
||
headerPosition: 'fixed',
|
||
headerTop:null,
|
||
statusTop:null,
|
||
nVueTitle:null,
|
||
keyword:null,
|
||
keywords:[],
|
||
cid:null,
|
||
showReload:false,
|
||
showWords: true,
|
||
page:1,
|
||
// goodsList:[
|
||
// { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
|
||
// { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
|
||
// { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
|
||
// { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
|
||
// { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
|
||
// { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
|
||
// { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
|
||
// { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
|
||
// { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
|
||
// { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' }
|
||
// ],
|
||
goodsList: [],
|
||
loadingText:"",
|
||
headerTop:"0px",
|
||
headerPosition:"fixed",
|
||
orderbyList:[
|
||
{text:"销量",selected:true,orderbyicon:false,orderby:0},
|
||
{text:"价格",selected:false,orderbyicon:['sheng','jiang'],orderby:0},
|
||
{text:"好评",selected:false,orderbyicon:false,orderby:0}
|
||
],
|
||
orderby:"sheng"
|
||
};
|
||
},
|
||
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
|
||
//console.log(option); //打印出上个页面传递的参数。
|
||
uni.setNavigationBarTitle({
|
||
title: option.name
|
||
});
|
||
if(option.id){
|
||
this.cid = option.cid
|
||
this.getGoods()
|
||
}
|
||
//兼容H5下排序栏位置
|
||
// #ifdef H5
|
||
//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
|
||
let Timer = setInterval(()=>{
|
||
let uniHead = document.getElementsByTagName('uni-page-head');
|
||
if(uniHead.length>0){
|
||
this.headerTop = uniHead[0].offsetHeight+'px';
|
||
clearInterval(Timer);//清除定时器
|
||
}
|
||
},1);
|
||
// #endif
|
||
var that = this
|
||
uni.getStorage({
|
||
key:'keywords',
|
||
success(res) {
|
||
that.keywords = res.data
|
||
},
|
||
fail() {
|
||
uni.setStorageSync('keywords',[])
|
||
}
|
||
})
|
||
},
|
||
onPageScroll(e){
|
||
//兼容iOS端下拉时顶部漂移
|
||
if(e.scrollTop>=0){
|
||
this.headerPosition = "fixed";
|
||
}else{
|
||
this.headerPosition = "absolute";
|
||
}
|
||
},
|
||
//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
|
||
onPullDownRefresh() {
|
||
this.reload()
|
||
uni.stopPullDownRefresh();
|
||
// setTimeout(()=>{
|
||
// this.reload();
|
||
|
||
// }, 1000);
|
||
},
|
||
//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
|
||
onReachBottom(){
|
||
this.loadingText ='正在加载'
|
||
this.page = this.page + 1
|
||
this.getGoods()
|
||
// uni.showToast({title: '触发上拉加载'});
|
||
// let len = this.goodsList.length;
|
||
// if(len>=40){
|
||
// this.loadingText="到底了";
|
||
// return false;
|
||
// }else{
|
||
// this.loadingText="正在加载...";
|
||
// }
|
||
// let end_goods_id = this.goodsList[len-1].goods_id;
|
||
// for(let i=1;i<=10;i++){
|
||
// let goods_id = end_goods_id+i;
|
||
// let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' };
|
||
// this.goodsList.push(p);
|
||
// }
|
||
},
|
||
methods:{
|
||
getGoods(){
|
||
this.loadingText='正在加载中'
|
||
this.$u.api.searchGood(this.keyword, this.page).then(res=>{
|
||
var goodsList = []
|
||
this.loadingText=''
|
||
if(res.data==null){
|
||
this.loadingText="到底了"
|
||
}else{
|
||
for(var i=0;i<res.data.length;i++){
|
||
goodsList.push({
|
||
id:res.data[i].aid,
|
||
title:res.data[i].title,
|
||
picurl:this.vuex_host+ '/public/' + res.data[i].picurl.split(',')[0] ,
|
||
price:res.data[i].price,
|
||
// pay_num:res.data[i].pay_num
|
||
})
|
||
}
|
||
if(this.page==1){
|
||
this.goodsList = goodsList
|
||
}else{
|
||
this.goodsList = this.goodsList.concat(goodsList)
|
||
}
|
||
}
|
||
|
||
})
|
||
},
|
||
reload(){
|
||
// let tmpArr = []
|
||
this.showWords = false;
|
||
this.goodsList = [];
|
||
this.page=1
|
||
this.getGoods()
|
||
// let end_goods_id = 0;
|
||
// for(let i=1;i<=10;i++){
|
||
// let goods_id = end_goods_id+i;
|
||
// let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' };
|
||
// this.goodsList.push(p);
|
||
// }
|
||
var that = this
|
||
if(that.keywords.indexOf(that.keyword) ==-1){
|
||
that.keywords.unshift(that.keyword)
|
||
}
|
||
that.keywords=that.keywords.splice(0,5)
|
||
console.log(that.keywords)
|
||
uni.setStorageSync('keywords',that.keywords)
|
||
},
|
||
search(item){
|
||
var that = this
|
||
that.keyword = item
|
||
if(that.keyword !=''){
|
||
that.reload()
|
||
}else{
|
||
uni.showToast({
|
||
title:'请输入关键词',
|
||
icon:'none'
|
||
})
|
||
}
|
||
|
||
|
||
},
|
||
deletewords(){
|
||
var that = this
|
||
that.keywords = []
|
||
uni.setStorageSync('keywords',[])
|
||
},
|
||
brightenKeyword(val, keyword) {
|
||
const Reg = new RegExp(keyword, 'i');
|
||
let res = '';
|
||
if (val) {
|
||
res = val.replace(Reg, `<span style="color: red;font-style:normal">${keyword}</span>`);
|
||
return res;
|
||
}
|
||
},
|
||
|
||
//商品跳转
|
||
toGoods(e){
|
||
uni.showToast({title: '商品'+e.goods_id,icon:"none"});
|
||
uni.navigateTo({
|
||
url: '../goods?id='+e.id
|
||
});
|
||
},
|
||
//排序类型
|
||
select(index){
|
||
let tmpTis = this.orderbyList[index].text+"排序 "
|
||
if(this.orderbyList[index].orderbyicon){
|
||
let type = this.orderbyList[index].orderby==0?'升序':'降序';
|
||
if(this.orderbyList[index].selected){
|
||
type = this.orderbyList[index].orderby==0?'降序':'升序';
|
||
this.orderbyList[index].orderby = this.orderbyList[index].orderby==0?1:0;
|
||
}
|
||
tmpTis+=type
|
||
}
|
||
this.orderbyList[index].selected = true;
|
||
let len = this.orderbyList.length;
|
||
for(let i=0;i<len;i++){
|
||
if(i!=index){
|
||
this.orderbyList[i].selected = false;
|
||
}
|
||
}
|
||
uni.showToast({title:tmpTis,icon:"none"});
|
||
}
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.icon {
|
||
font-size:26upx;
|
||
}
|
||
.wordstop{
|
||
position: fixed;
|
||
top: 80upx;
|
||
margin-left: 20upx;
|
||
margin-top: 10upx;
|
||
margin-right: 20upx;
|
||
}
|
||
.words {
|
||
position: fixed;
|
||
top: 120upx;
|
||
/* #ifndef APP-PLUS-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
flex-wrap: wrap;
|
||
padding: 20rpx;
|
||
}
|
||
.tag-view {
|
||
/* #ifndef APP-PLUS-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: column;
|
||
margin: 10rpx 15rpx;
|
||
justify-content: center;
|
||
}
|
||
.header{
|
||
width: 92%;
|
||
padding: 0 4%;
|
||
height: 79upx;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: flex-end;
|
||
position: fixed;
|
||
top: 0;
|
||
z-index: 10;
|
||
background-color: #fff;
|
||
border-bottom: solid 1upx #eee;
|
||
.target{
|
||
width: 20%;
|
||
height: 60upx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 28upx;
|
||
margin-bottom: -2upx;
|
||
color: #aaa;
|
||
&.on{
|
||
color: #555;
|
||
border-bottom: 4upx solid #f06c7a;
|
||
font-weight: 600;
|
||
font-size: 30upx;
|
||
}
|
||
|
||
|
||
}
|
||
.addr {
|
||
width: 120upx;
|
||
height: 60upx;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28upx;
|
||
.icon {
|
||
height: 60upx;
|
||
margin-right: 5upx;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 42upx;
|
||
color: #ffc50a;
|
||
}
|
||
}
|
||
.input-box {
|
||
width: 100%;
|
||
height: 60upx;
|
||
background-color: #f5f5f5;
|
||
border-radius: 30upx;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
.icon {
|
||
display: flex;
|
||
align-items: center;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
width: 60upx;
|
||
height: 60upx;
|
||
font-size: 34upx;
|
||
color: #c0c0c0;
|
||
}
|
||
input {
|
||
padding-left: 28upx;
|
||
height: 28upx;
|
||
font-size: 28upx;
|
||
}
|
||
}
|
||
.icon-btn {
|
||
width: 120upx;
|
||
height: 60upx;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
.icon {
|
||
width: 60upx;
|
||
height: 60upx;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
font-size: 42upx;
|
||
}
|
||
}
|
||
}
|
||
.place{
|
||
|
||
background-color: #ffffff;
|
||
height: 100upx;
|
||
|
||
}
|
||
.goods-list{
|
||
.loading-text{
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 60upx;
|
||
color: #979797;
|
||
font-size: 24upx;
|
||
}
|
||
.product-list{
|
||
width: 92%;
|
||
padding: 0 4% 3vw 4%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
.product{
|
||
width: 48%;
|
||
border-radius: 20upx;
|
||
background-color: #fff;
|
||
margin: 0 0 15upx 0;
|
||
box-shadow: 0upx 5upx 25upx rgba(0,0,0,0.1);
|
||
image{
|
||
width: 100%;
|
||
height: 48vw;
|
||
border-radius: 20upx 20upx 0 0;
|
||
}
|
||
.name{
|
||
width: 92%;
|
||
padding: 10upx 4%;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
text-align: justify;
|
||
overflow: hidden;
|
||
font-size: 30upx;
|
||
}
|
||
.info{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
width: 92%;
|
||
padding: 10upx 4% 10upx 4%;
|
||
|
||
.price{
|
||
color: #e65339;
|
||
font-size: 30upx;
|
||
font-weight: 600;
|
||
}
|
||
.slogan{
|
||
color: #807c87;
|
||
font-size: 24upx;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</style>
|