128 lines
3.9 KiB
Vue
128 lines
3.9 KiB
Vue
|
<template>
|
||
|
|
<view class="pad-x20">
|
||
|
|
<!-- 状态栏 -->
|
||
|
|
<status-nav :navBarTitle="'搜索'"></status-nav>
|
||
|
|
<!-- 输入框 -->
|
||
|
|
<view class="search-input-box bacf" :style="{paddingTop: statusBarHeight+'px'}">
|
||
|
|
<view class="disac pad-zy30 mar-s20 pad-x20">
|
||
|
|
<!-- 输入框 -->
|
||
|
|
<input @confirm="searchEv" v-model="searchStr" placeholder="请输入关键词" class="width100 fon34 radius10" type="text"/>
|
||
|
|
<!-- 搜索 -->
|
||
|
|
<view @tap="searchEv" class="search-btn" :style="{background:publicColor}">搜索</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 列表 -->
|
||
|
|
<view class="disjbac fw pad-zy30">
|
||
|
|
<view @tap="goDetail(item.id)" class="width47 mar-s50 posir" v-for="(item,index) in dataList" :key="index">
|
||
|
|
<image :src="item.imgSrc" mode="aspectFill" style="width: 100%;height: 312rpx;border-radius: 30rpx;"></image>
|
||
|
|
<view class="clips2 fon30 col0 linh50" style="height: 100rpx;">{{item.title}}</view>
|
||
|
|
<view class="fon30 colpeili">￥{{item.price}}</view>
|
||
|
|
<view v-if="item.isActivity" class="posia fon24 colf pad-zy10 pad-s10 pad-x20 activity-img">限时优惠</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 无更多 -->
|
||
|
|
<pitera v-if="total==dataList.length"></pitera>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import pitera from '@/components/nothing/pitera.vue';
|
||
|
|
export default {
|
||
|
|
components:{
|
||
|
|
pitera
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
statusBarHeight:uni.getSystemInfoSync().statusBarHeight + 50,
|
||
|
|
searchStr:'',//输入框的值
|
||
|
|
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
||
|
|
dataList:[],
|
||
|
|
showTop:false,//是否显示返回顶部
|
||
|
|
page:1, // 第几页
|
||
|
|
size:10, // 数量
|
||
|
|
total:0, // 总数
|
||
|
|
pitera:false, // 是否显示暂无数据
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onPageScroll(e) {
|
||
|
|
e.scrollTop > 360 ? this.showTop = true : this.showTop = false
|
||
|
|
},
|
||
|
|
onReachBottom() {//触底事件
|
||
|
|
if(this.total!=this.dataList.length){
|
||
|
|
this.page++
|
||
|
|
this.implementEv()//调用自主预约列表事件
|
||
|
|
} else {
|
||
|
|
if(this.isZanw) this.$toolAll.tools.showToast('暂无更多列表','none',1000)
|
||
|
|
this.isZanw = false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
|
||
|
|
},
|
||
|
|
onLoad(options) {
|
||
|
|
this.searchStr = options.keyWorld;
|
||
|
|
if(uni.getStorageSync('phone_active')){
|
||
|
|
this.$toolAll.tools.clearShare();
|
||
|
|
this.searchEv();
|
||
|
|
} else {
|
||
|
|
uni.setStorageSync('existCode',options.invite_code);
|
||
|
|
uni.setStorageSync('outside',2);
|
||
|
|
uni.setStorageSync('transientUrl',`/pagesB/searchPage/searchPage?keyWorld=${this.searchStr}`);
|
||
|
|
uni.navigateTo({
|
||
|
|
url:'/pages/login/login'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
searchEv(){//搜索事件
|
||
|
|
this.page = 1;
|
||
|
|
// 调用搜索执行事件
|
||
|
|
this.implementEv();
|
||
|
|
},
|
||
|
|
// 搜索执行事件
|
||
|
|
implementEv(){
|
||
|
|
this.$toolAll.tools.showToast('搜索中...')
|
||
|
|
let params = {
|
||
|
|
keyword:this.searchStr, //商品关键字 支持模糊搜索
|
||
|
|
page:this.page, // 页数
|
||
|
|
size: this.size, // 每页数量
|
||
|
|
}
|
||
|
|
this.$requst.post('/api/spu/list',params).then(res=>{
|
||
|
|
if(res.code==0){
|
||
|
|
if(this.page==1) this.dataList = [];
|
||
|
|
// 设置商品总数
|
||
|
|
this.total = res.data.total;
|
||
|
|
if(res.data.list.length){
|
||
|
|
res.data.list.forEach(item=>{
|
||
|
|
let obj = {
|
||
|
|
id:item.id,
|
||
|
|
imgSrc:item.cover,
|
||
|
|
title:item.name,
|
||
|
|
// price:this.$toolAll.tools.changeNum(item.price*1),
|
||
|
|
price:item.price,
|
||
|
|
isActivity:item.tag == '' ? false : true,
|
||
|
|
}
|
||
|
|
this.dataList.push(obj);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
this.$toolAll.tools.showToast(res.msg);
|
||
|
|
}
|
||
|
|
}).catch(err=>{
|
||
|
|
this.$toolAll.tools.showToast(err.msg);
|
||
|
|
})
|
||
|
|
},
|
||
|
|
goDetail(id){//前往详情页
|
||
|
|
uni.navigateTo({
|
||
|
|
url:`/pagesB/shopDetail/shopDetail?id=${id}`
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.search-input-box input{border: 2rpx solid #E0E0E0;padding: 0rpx 20rpx;height: 80rpx;line-height: 80rpx;}
|
||
|
|
.search-input-box .search-btn {height: 80rpx;line-height: 80rpx;margin-left: 30rpx;border-radius: 10rpx;padding: 0 40rpx;font-size: 34rpx;color: #FFFFFF;flex-shrink: 0;}
|
||
|
|
</style>
|