huayuanxi-c/src/packages/goods/search.vue

<template>
	<view class='content'>
		<Navbar :title='title'></Navbar>
		<!-- 筛选框 -->
		<view class="search-styl">
			<!-- <SearchBox typeFlag="searchPage" :searchTitle="searchContent" @inputSearch="searchGoods"
				@cancelEvent="cancelEvent"></SearchBox> -->
			<view class="search-box">
				<view class="search-left">
					<text class="icon1">&#xe885;</text>
					<input type="text" class="input-styl" placeholder-class="placeholder" confirm-type="search"
						v-model="searchContent" @confirm="searchGoods" @focus="focus = true" placeholder="搜索商品名称" />
					<text class="icon1" v-if="searchContent" @click="deleteContent">&#xe88a;</text>
				</view>
				<!-- <view class="search-btn" @click="clickCancel" v-if="showHistory">取消</view> -->
				<view class="search-btn" @click="clickCancel">取消</view>
				<!-- <view v-else class="search-btn">
					<IconText :code="`\ue870`" v-if="!sortType || sortType === 1" @click.native="changeType(2)">
					</IconText>
					<IconText :code="`\ue874`" v-else @click.native="changeType(1)"></IconText>
				</view> -->
			</view>
		</view>
		<!-- <view class="sort-box" v-if="!showHistory && !focus">
			<view class="sort-item" :class="{active: rank === 0}" @click="changeRank(0)">
				综合
			</view>
			<view class="sort-item" :class="{active: rank === 1}" @click="changeRank(1)">
				销量
			</view>
			<view class="sort-item" :class="{active: rank === 2 || rank === 3}" @click="changeRank('price')">
				价格
				<view class="sj">
					<view class="ssj" :class="{active: rank === 2}"></view>
					<view class="xsj" :class="{active: rank === 3}"></view>
				</view>
			</view>
		</view> -->
		<view class="search-history" v-if="showHistory || focus">
			<view class="search-title">
				搜索历史
				<IconText :code="`\ue88f`" size="12" color="#999" @click.native="emptyHistory"></IconText>
			</view>
			<view class="search-content">
				<view class="search-font" v-for="(item,index) in searchHistory" :key="index"
					@longpress="pressItem(index)" @click="clickItem(item)">
					{{item}}
					<view class="delete" @click.stop="deleteHistory(item)" v-if="deleteIndex === index">
						<IconText :code="`\ue88a`" color="#999"></IconText>
					</view>
				</view>
			</view>
		</view>
		<view class="goods-module" :class="{'goods-module2': sortType === 2}" v-else>
			<!-- <view class="total">搜到个<text>{{total}}</text>商品</view> -->
			<GoodItem v-for="(item, index) in goodsList" :item="item" :sortType="sortType" :key="index"></GoodItem>
			<view class="no-data" v-if="!goodsList.length">
				<NoData :show="!goodsList.length" topNum="10" title="没有搜到商品!" imgUrl="no-data.png"></NoData>
			</view>
		</view>

		<!-- 空数据组件 -->
		<!-- <NoData :show="nodataShow" v-if="!showHistory" imgUrl='search.png'></NoData> -->
		<!-- 规格组件 -->
		<!-- <SpecPopup ref="pescEle" @addCart="addCart" :product="goodsPopup" typeName="goodsDetail"></SpecPopup> -->
	</view>
</template>
<script lang='ts'>
	import {
		Component,
		// Prop,
		Vue
	} from 'vue-property-decorator';
	import {
		namespace
	} from 'vuex-class';
	import {
		types
	} from '@/common/store';
	const baseModule = namespace('base');
	@Component({})

	export default class Name extends Vue {
		@baseModule.Getter('_searchHistory') searchHistory: any;
		@baseModule.Mutation(types.SET_SEARCHHISTORY) setSearchHistory: any;
		@baseModule.Mutation(types.EMPTY_SEARCHHISTORY) emptySearchHistory: any;
		@baseModule.Mutation(types.DELETE_SEARCHHISTORY) deleteSearchHistory: any;
		// @baseModule.Mutation(types.ADD_CARTGOODS) addCartGoods: any;
		// data------------------------
		goodsList: Array < any > = []; //商品列表
		searchContent: string = ''; //搜索内容
		showHistory: boolean = true; //历史搜索数据展示
		nodataShow: boolean = false; //空数据展示
		total: number = 0;
		deleteIndex: any = null;
		title: any = '商品搜索';
		partition: any = '';
		categoryId: any = null;
		finish: boolean = false;
		loading: boolean = false;
		current: number = 1;
		size: number = 20;
		name: any = '';
		iconShow: boolean = false;
		sortType: number = 1;
		rank: any = 0;
		focus: boolean = false;
		goodsPopup = {
			skuList: [],
			spu_info: {},
		} //规格弹窗专用
		onLoad() {
			// this.searchGoods({
			// 	detail: {
			// 		value: ''
			// 	}
			// });
			let query = this.$Route.query;
			if (query.id) {
				this.title = query.name;
				if(query.partition) this.title = query.partition;
				this.categoryId = +query.id;
				this.partition = query.partition;
				this.searchGoods({
					detail: {
						value: ''
					}
				});
			}
		}
		onReachBottom() {
			if (this.finish || this.loading) return;
			this.current++;
			this.getGoodsList('', 'load');
		}
		onPullDownRefresh() {
			console.log('下拉');
			this.finish = false;
			this.getGoodsList('', 'pull').then(() => {
				uni.stopPullDownRefresh();
			}, () => {
				uni.stopPullDownRefresh();
			});
		}
		//methods----------------------
		changeType(type: any) {
			this.sortType = type;
		}
		clickCancel() {
			this.$Router.back(1);
		}
		deleteContent() {
			this.searchContent = '';
			// this.showHistory = true;
			this.goodsList = [];
			this.current = 1;
			this.finish = false;
			this.deleteIndex = null;
			this.getGoodsList('');
		}
		// 加入购物车
		addCart(e: any): void {
			console.log('加入购物车的数据', e);
			let data = {
				spu_id: e.spu_id,
				sku_id: e.sku_id,
				num: e.num,
			}
			this.$http.post({
				url: this.$api.addCarGoods,
				data: data
			}).then((res: any) => {
				uni.showToast({
					title: '加入购物车成功',
					icon: 'none'
				});
				// this.addCartGoods(e);
			}).catch((err: any) => {
				console.log(err);
			})
		}
		//获取商品列表
		getGoodsList(val ? : string, isLoad ? : any) {
			console.log(val);
			this.loading = true;
			if (val) this.name = val;
			if (isLoad === 'load' || isLoad == 'pull') val = this.name || '';
			// return
			let data: object = {
				name: val,
				status: '3',
				secondSortId: this.categoryId || 0,
				page: this.current,
				size: this.size,
				partition: this.partition || '',
				rank: this.rank
			}
			uni.showLoading({
				title: '加载中',
			});
			return this.$http.get({
				url: this.$api.getGoodsList,
				data: data
			}).then((res: any) => {
				if (isLoad === 'pull') {
					this.goodsList = res.list;
				} else {
					this.goodsList = [...this.goodsList, ...res.list];
				}
				this.nodataShow = !this.goodsList.length;
				this.total = res.total;
				if (res.list.length < this.size) this.finish = true;
				this.loading = false;
				this.focus = false;
				uni.hideLoading();
			}).catch((err: any) => {
				console.log(err);
				this.loading = false;
				uni.hideLoading();
			})
		}
		//子->父 点击商品
		clickRecGoods(e: any): void {
			this.$Router.push({
				path: '/pages/front/goods-detail',
				query: {
					id: e.id,
					steady_id: e.steady_id
				}
			});
		}
		//子->父 点击商品推荐+号
		clickAdd(val: any): void {
			this.goodsPopup.skuList = val.skus;
			this.goodsPopup.spu_info = val;
			(this.$refs.pescEle as any).open();
		}
		//搜索商品内容
		searchGoods(e: any) {
			let value = e.detail.value;
			this.goodsList = [];
			this.current = 1;
			this.finish = false;
			this.deleteIndex = null;
			this.setSearchHistory(value);
			this.getGoodsList(value);
			this.showHistory = false;
		}
		emptyHistory() {
			this.deleteIndex = null;
			this.emptySearchHistory();
		}
		//点击搜索历史
		clickItem(item: string) {
			this.searchContent = item;
			this.searchGoods({
				detail: {
					value: this.searchContent
				}
			});
		}
		deleteHistory(item: any) {
			this.deleteIndex = null;
			this.deleteSearchHistory(item);
		}
		pressItem(index: any) {
			if (index === this.deleteIndex) {
				this.deleteIndex = null;
			} else {
				this.deleteIndex = index;
			}
		}
		//子->父 点击取消按钮
		cancelEvent() {
			this.showHistory = true;
		}

		changeRank(rank: any) {
			if (rank === this.rank) return;
			if (rank === 'price') {
				if (this.rank === 2) {
					this.rank = 3;
				} else if (this.rank === 3) {
					this.rank = 2;
				} else {
					this.rank = 2;
				}
			} else {
				this.rank = rank;
			}
			this.goodsList = [];
			this.current = 1;
			this.finish = false;
			this.getGoodsList('', 'load');
		}

	}
</script>

<style lang='scss' scoped>
	.content {
		width: 100%;
		min-height: 100vh;
		@include flex-y();
		background: #F6F6F6;

		.search-styl {
			width: 100%;
			padding-top: vw(6);
			padding-bottom: vw(8);
			background-color: #ffffff;

			.search-box {
				@include flex-x();
				@include wh(348, 32);
				margin: 0 auto;

				.search-left {
					@include flex-x(flex-start);
					@include wh(310, 32);
					border-radius: vw(5);
					background-color: #F6F6F6;

					.icon1 {
						margin: 0 vw(10);
						@include icon(14);
					}

					.input-styl {
						width: vw(315);
						font-size: vw(14);
					}

					.placeholder {
						color: #999;
					}
				}

				.search-btn {
					/* padding-left: vw(12);
					margin-right: vw(13); */
					flex: 1;
					text-align: center;
					color: $btn-color;
					font-size: vw(14);
				}
			}
		}

		.sort-box {
			height: vw(40);
			width: 100%;
			@include flex-x();
			margin-top: vw(1);
			background: #fff;

			.sort-item {
				flex: 1;
				@include flex-x(center);
				background: #fff;
				height: vw(20);
				@include word-vw(14, #999);
				border-right: vw(1) solid #F5F5F5;

				&:nth-last-of-type(1) {
					border-width: 0;
				}

				.sj {
					position: relative;
					@include flex-y(center);
					margin-left: vw(3);
				}

				.ssj {
					border-top: vw(5) solid transparent;
					border-bottom: vw(5) solid #ccc;
					border-left: vw(5) solid transparent;
					border-right: vw(5) solid transparent;

					&.active {
						border-bottom: vw(5) solid $btn-color;
					}
				}

				.xsj {
					border-top: vw(5) solid #ccc;
					border-bottom: vw(5) solid transparent;
					border-left: vw(5) solid transparent;
					border-right: vw(5) solid transparent;
					margin-top: vw(3);

					&.active {
						border-top: vw(5) solid $btn-color;
					}
				}

				&.active {
					color: $btn-color;
				}
			}
		}

		.search-history {
			width: 100%;
			flex: 1;
			box-sizing: border-box;
			padding: vw(12) vw(23) 0 vw(16);
			@include word-vw(12, $gray6);

			.search-title {
				width: 100%;
				@include flex-x();
			}

			.search-content {
				@include flex-x(flex-start);
				flex-flow: row wrap;
				margin-top: vw(18);

				.search-font {
					padding: vw(8) vw(14);
					margin: 0 vw(10) vw(10) 0;
					background-color: #ffffff;
					position: relative;
				}

				.delete {
					position: absolute;
					right: -6px;
					top: -6px;
				}
			}
		}

		.goods-module {
			width: 100%;
			padding: vw(10) vw(10) 0;
			box-sizing: border-box;
			/* flex: 1;
			overflow-y: auto; */
			@include flex-x(space-between, flex-start);
			flex-wrap: wrap;

			&.goods-module2 {
				@include flex-y();
				padding: vw(10) 0 0;
			}

			.no-data {
				width: 100%;
				height: 100%;
				padding-top: 20%;
				@include flex-y();
			}

			.total {
				padding: 0 vw(10);
				margin-top: vw(6);
				@include word-vw(14, #999);
				height: vw(30);
				line-height: vw(30);

				text {
					color: #333;
					padding: 0 vw(3);
				}
			}
		}
	}
</style>