dengrui/pagesB/keySearch/keySearch.vue

<template>
	<view>
		<!-- 使用标题栏 -->
		<status-nav @inputConfirm="inputConfirm" :statusBackg="true" :statusInput="true" :whereCome="whereCome*1" :backgroudColor="'#ffffff'" :tabcolor="'#ffffff'"></status-nav>
		<!-- 搜索框 -->
		
		<!-- 列表 -->
		<view class="padding20 bacb searchlist" v-if="productList.length!=0" :style="{marginTop:(statusHNH+10)+'px'}">
			<view @tap="goDetail(item.id)" class="disba padding-x30 padding-s20 borbot" v-for="(item,index) in productList" :key="index">
				<image class="proimg flexs radius10" :src="item.src"></image>
				<view class="padding-sx20 padding-z20 width100">
					<view class="clips2 fon28">{{item.title}}</view>
					<view class="fon24 color9 margin-sx10 clips1">{{item.content}}</view>
					<view class="dis flw">
						<label class="colorf6 fon24 radius16 pro margin-y10" v-for="(itemc,indexc) in item.cate" :key="indexc">{{itemc.name}}</label>
					</view>
					<view class="disba margin-s20">
						<view class="colorf6 fon24 bold">￥<text class="fon28">{{item.price}}</text>.0</view>
						<!-- 加入购物车图片 -->
						<image @tap.stop="addGou(item.id)" class="progc" src="/static/img/public/gouwcar.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view v-if="productList.length==0" class="zanwu">暂无相关产品</view>
        <backTop :showTop="showTop" @backTop="backTop"></backTop>
	</view>
</template>

<script>
    import backTop from '@/components/backTop.vue';
	export default {
        components:{
            backTop
        },
		data() {
			return {
				current:0,
				chooseShai:false,
				isasce:true,
				productList:[],
				zanList:[],//暂存产品列表不显示
                shaiArr:[],
                shaiCurrent:0,
                isShai:false,
                yin:false,
                chuout:'',
				xiao:'',
                showTop:false,
                whereCome:2,
				page:1,
				size:10,
				total:'',
				isZanw:true,
				cid:0,//分类ID
				filed:'',//默认：synthetical 取值view_amount、sale_amount、sort_price
				direction:'down',//取值down/up
				statusHNH:uni.getStorageSync('statusHNH'),
				searchKey:''
			}
		},
        onShow() {
			this.$toolAll.tools.guoq()
            uni.showTabBar()
            uni.getStorageSync('whereCome') !='' ? this.whereCome = uni.getStorageSync('whereCome') : ''
			uni.removeStorageSync('proDetail')
			// console.log('清除产品详情缓存成功',uni.getStorageSync('proDetail'));
			this.filed = 'synthetical'
			this.cid = 0
			this.size = 10
			this.page = 1
        },
		onLoad() {
            this.checkList()
		},
        onPageScroll(e) {
            e.scrollTop > 360 ? this.showTop = true : this.showTop = false
        },
		onReachBottom() {
			if(this.total!=this.productList.length){
				this.page++
				this.keySearch(this.searchKey)//调用自主预约列表事件
			} else {
				if(this.isZanw) this.$toolAll.tools.showToast('暂无更多商品列表','none',1000)
				this.isZanw = false
			}
		},
		methods: {
			inputConfirm(e){
				// console.log(e);
				this.searchKey = e
				this.keySearch(e)
			},
			keySearch(key){
				this.productList = []
				let paramCate ={
					page:this.page,
					size:this.size,
					sort_filed:this.filed,
					sort_direction:this.direction,
					keyword:key
				}
				this.$requst.post('product/spu/list',paramCate).then(res=>{
					// console.log('产品',res);
					if(this.page==1) this.productList = []
					this.total = res.data.total
					if(res.data.list.length!=0){
						this.cid = res.data.list[0].cid//获取分类ID，以便加载更多使用
						this.zanList = res.data.list
						res.data.list.forEach(item=>{
							let cateObj = {
								id:item.id,//商品ID
								src:this.$http + item.main_sku.main_image,//商品图片
								title:item.name,//商品名称
								content:item.sub_title,//商品标题
								cate:item.tag_list,//标签列表
								price:item.main_sku.cur_price/100//商品原价
							}
							this.productList.push(cateObj)
						})
					} else {
						// this.$toolAll.tools.showToast('没找到相关产品o(╥﹏╥)o')
					}
				},error=>{})
			},
			checkList(){
				this.productList = []
				let paramCate ={
					category_id:this.cid,
					page:this.page,
					size:this.size,
					sort_filed:this.filed,
					sort_direction:this.direction
				}
				this.$requst.post('product/spu/list',paramCate).then(res=>{
					// console.log('产品',res);
					if(res.data.list.length!=0){
						this.cid = res.data.list[0].cid//获取分类ID，以便加载更多使用
						this.zanList = res.data.list
						res.data.list.forEach(item=>{
							let cateObj = {
								id:item.id,//商品ID
								src:this.$http + item.main_sku.main_image,//商品图片
								title:item.name,//商品名称
								content:item.sub_title,//商品标题
								cate:item.tag_list,//标签列表
								price:item.main_sku.cur_price/100//商品原价
							}
							this.productList.push(cateObj)
						})
					} else {
						// this.$toolAll.tools.showToast('没找到相关产品o(╥﹏╥)o')
					}
				},error=>{})
			},
            backTop(){//回到顶部事件
                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 300
                });
				this.isShai = false
            },
			addGou(e){//加入购物车
				// console.log('加入购物车'+e);
                // uni.showToast({title:'加入购物车'+e+'成功',icon:'none'})
				this.$requst.post('order/shopping-cart-add',{sku_id:e,num:1}).then(res=>{
					if(res.code==0){
						this.$toolAll.tools.showToast('添加购物车成功(*^▽^*)')
					}
				},error=>{})
			},
			goDetail(id){//查看详情
				// console.log(id);
                uni.navigateTo({
                    url:'/pagesA/productDetail/productDetail?id='+id
                })
			},
		},
	}
</script>

<style>
	page {background-color: #f5f5f5;}
</style>