mall-applet1/pagesB/search/search.vue

<template>
	<view >
		<status-container titlet="搜索">
			<view slot="content" style="margin: -20rpx 0rpx 0 0rpx;">
				<view class="pad-x30 pad-s20" style="position: sticky;background-color: #f4f4f4;" :style="{top: padt+'px'}">
					<view class=" radius30 pad-zy30 mar-x30 disac" style="background-color: #d8d8d8;">
						<image src="/static/public/icon-searcht.png" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
						<input @confirm="goSearch" @focus="ifResult=false" v-model="keyword" class="width100 fon30 mar-z20" type="text" placeholder="搜索" style="height: 90rpx;color: #8c8c9b;" placeholder-style="color: #8c8c9b">
					</view>
					<view class="fon30 bold" v-if="keyword && ifResult">结果：{{keyword}}<text class="textc">（{{total}}）</text></view>
				</view>
				<view class="disjbac fw">
					<view class="width48_5 fon30 mar-x30" @tap="goDetail(item.id)" v-for="(item,index) in dataList" :key="index">
						<view class="" style="height: 342rpx;">
							<image class="radius30 width100" :src="item.imgsrc" mode="aspectFill" style="height: 342rpx;"></image>
						</view>
						<view class="pad-zy20">
							<view class="line-h50 mar-sx25 clips2" style="height: 90rpx;">{{item.title}}</view>
							<view class="textc disjbac">
								<view class="">￥{{item.price}}</view>
								<i @tap.stop="addCartEv(item.skuId)" class="icon icon-shop-cart" style="font-size: 40rpx;"></i>
							</view>
						</view>
					</view>
				</view>
				<view class="mar-s60" v-if="total==dataList.length">
					<pitera textStr="—— 到底啦 ——"></pitera>
				</view>
				<view class="loading-box mar-s60" v-show="ifLoading">
				    <view class="loader-16"></view>
				</view>
			</view>
		</status-container>
	</view>
</template>

<script>
	import listOne from '@/components/list/list-one';
	import pitera from '@/components/nothing/pitera';
	import {getCartNum} from '@/jsFile/public-api.js';
	export default {
		components:{
			listOne,
			pitera
		},
		data() {
			return {
				padt:uni.getSystemInfoSync().statusBarHeight + 50,
				windowHeigh:uni.getSystemInfoSync().windowHeight,
				keyword:'',
				num:11,
				ifResult:true,
				dataList:[],
				ifLoading:false,
				total:0,
				page:1,
				size:10
			}
		},
		onReachBottom(e) {
			this.$refs.list.moreEv();
		},
		onLoad(op) {
			if(op.keyword) this.keyword = op.keyword;
			this.getList();
		},
		methods: {
			goSearch(){
				this.ifResult = true;
			},
			// 列表查询
			getList(){
				this.ifLoading = true;
				let params = {
					keyword:this.keyword,
					page:this.page,
					size:this.size
				}
				this.$requst.post('/api/spu/home',params).then(res=>{
					if(res.code==0) {
						this.total = res.data.total;
						if(this.page==1) this.dataList = [];
						if(res.data.list.length) {
							res.data.list.forEach(item=>{
								let obj = {
									id:item.id,
									skuId:item.skuId,
									imgsrc:item.cover,
									title:item.name,
									price:this.$toolAll.tools.changeNum(parseInt(item.original_price)+'')
								}
								this.dataList.push(obj);
							})
						}
					}
					this.ifLoading = false;
				})
			},
			// 加入购物车
			addCartEv(id) {
				if(this.$toolAll.tools.judgeAuth()) {
					this.$requst.post('/api/order/shopping-cart-add',{sku_id:id,num:1}).then(res=>{
						if(res.code==0) {
							this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)')
							getCartNum();
						} else {
							this.$toolAll.tools.showToast(res.msg)
						}
					})
				}
			},
			// 去详情
			goDetail(id) {
				uni.navigateTo({
					url:`/pagesB/shop-detail/shop-detail?id=${id}`
				})
			}
		}
	}
</script>

<style>
	
</style>