search.vue 2.5 KB
<template>
	<view class="content">
		<!-- 顶部搜索 -->
		<view class="search_wrap layer_between">
			<view class="search_input">
				<input type="text" @confirm="toSearch()" v-model="keyword" placeholder="请输入名称、型号、品牌、厂家搜索" />
				<image class="search_icon" src="../../static/search.png" mode=""></image>
			</view>
			<view class="search_word" @click="toSearch()">搜索</view>
		</view>
		<!-- 热搜名片 -->
		<view class="hot_search">
			<!-- 名片 -->
			<view class="hot_card_wrap flex_wrap_between">
				<view class="card_single" v-for="(item,index) in cardList" :key="index" @click="toDetail(item)">
					<image :src="item.front_image" mode=""></image>
				</view>
			</view>
			<!-- 分页 -->
			<view class="card_pagation layer_between">
				<view class="prev_page" :class="{next_page:pageNum>1}" @click="prevPage()">上一页</view>
				<view class="layer_between jump_page">
					跳转到
					<input type="text" @confirm="jumpPage()" v-model="pageNum" />

				</view>
				<view class="next_page" :class="{prev:pageNum >= totalPage}" @click="nextPage()">下一页</view>
				<view class="total_page">共{{totalPage/1}}页</view>
			</view>
		</view>
	</view>
</template>

<script>
	import App from "../../App.vue"
export default {
	data() {
		return {
			// 搜索
			keyword:"",
			// 名片列表
			cardList:[],
			// 分页
			pageNum:1,
			// 总页数
			totalPage:"",
		};
	},
	methods: {
		// 获取名片列表
		getCardList(){
			let t = this;
			let url = "/api/goods/goods_list";
			let params = {
				keyword:t.keyword,
				page:t.pageNum
			};
			App.post(url,params)
			.then(res=>{
				t.totalPage = res.page_sum;
				t.cardList = res.list;
			})
		},
		// 名片详情
		toDetail(item){
			uni.navigateTo({
				url:"/pages/index/cardDetail?id="+item.id
			})
		},
		// 搜索
		toSearch(){
			this.getCardList();
		},
		// 上一页
		prevPage(){
			if(this.pageNum <=1 )
				return false;
			this.pageNum --;
			this.getCardList()
		},
		// 下一页
		nextPage(){
			if(this.pageNum == this.totalPage){
				return false
			}
			this.pageNum ++;
			this.getCardList()
		},
		// 跳转到某一页
		jumpPage(){
			if(this.pageNum>this.totalPage)
				this.pageNum = this.totalPage;
			this.getCardList()
		},
	},
	onLoad(option) {
		
		this.keyword = option.keyword;
		this.getCardList();
		
	}
};
</script>

<style>
@import url('../../style/index');
.search_wrap {
	border-bottom: none;
}
.search_word{
	background-color: #0083FB;
	color: #fff;
}
.hot_search {
	border-top:none;
}
</style>