deming/pageB/search/out.vue

<template>
	<view class="classify-goods">
		<view class="tab-container">
			<view class="salenum" :class="{ 'current' : current == 0 }" @click="switchCurrent(0)">店铺</view>
			<view class="price" :class="{ 'current' : current == 1 }" @click="switchCurrent(1)">
				达人
			</view>
			<view class="evaluation" :class="{ 'current' : current == 2 }" @click="switchCurrent(2)">社区</view>
		</view>
		<scroll-view scroll-y class="goods-container" :style="{ height: scrollHeight }" @scrolltolower="loadMore" v-show="current == 0"  :scroll-top="scrollTop" @scroll="scroll">
			<view v-for="goods in goodsList" :key="goods.store_id" class="goods-item" @click="toDetailsPage(goods.store_id)">
				<image :src="goods.store_avatar"></image>
				<view class="right">
					<view class="name u-line-1">{{ goods.store_name }}</view>
					<view class="briefing u-line-2">{{ goods.store_description }}</view>
				</view>
			</view>
			<u-loadmore :status="loadStatus" bgColor="#FFFFFF" margin-top="20" margin-bottom="20" v-if="goodsList.length >= pageSize"></u-loadmore>
			<u-empty mode="list" v-if="!goodsList.length"></u-empty>
		</scroll-view>
		<scroll-view style="width:100%;" :style="{ height: scrollHeight }" scroll-y="true" @scrolltolower="loadMore" v-if=" current == 2 "  :scroll-top="scrollTop" @scroll="scroll">
			<view class="box" style="padding: 0 30rpx;">
				<view style="display:flex">
					<view>
						<videoItem v-for="(item,id) in goodsList.filter((_, index) => !(index&1))" :key="id" :item="item"
							@getArticlelist="getArticlelist"></videoItem>
					</view>
					<view style="margin-left:20rpx">
						<videoItem v-for="(item,id) in goodsList.filter((_, index) => index&1)" :key="id" :item="item"
							@getArticlelist="getArticlelist"></videoItem>
					</view>
				</view>
			</view>
			<u-loadmore :status="loadStatus" bgColor="#FFFFFF" margin-top="20" margin-bottom="20" v-if="goodsList.length >= pageSize"></u-loadmore>
			<u-empty mode="list" v-if="!goodsList.length"></u-empty>
		</scroll-view>
		<scroll-view style="width:100%;padding: 0rpx 30rpx;margin-right:23rpx;" :style="{ height: scrollHeight }" scroll-y="true" @scrolltolower="loadMore" v-if=" current == 1 "  :scroll-top="scrollTop" @scroll="scroll">
			<view class="list" >
				<darenItem style="margin-top:20rpx;margin-right:23rpx;box-shadow:0px 3rpx 7rpx 0px rgba(153, 153, 153, 0.35);" v-for="item in goodsList" :key="item.id" :info="item"  v-on:pChangeType="changeType"></darenItem>
			</view>
			<u-loadmore :status="loadStatus" bgColor="#FFFFFF" margin-top="20" margin-bottom="20" v-if="goodsList.length >= pageSize"></u-loadmore>
			<u-empty mode="list" v-if="!goodsList.length"></u-empty>
		</scroll-view>
		
	</view>
</template>
<script>
	import videoItem from "@/components/index/video-item/index"
	import darenItem from "@/components/index/daren-item/index" 
export default {
	data() {
		return {
			pageSize: 12,
			cid: '',
			page: 1,
			current: 0,
			priceOrderAsc: true,　// 是否升序
			goodsList: [],
			scrollHeight: '',
			loadStatus: 'loadmore',
			timer: true, // 防止上拉加载短时间内多次调用,
			value:"",
			scrollTop: 0,
            old: {
                scrollTop: 0
            }
		}
	},
	components:{
		videoItem,
		darenItem
	},
	watch: {
		current(value) {
			this.page = 1;
			this.ShopSearch({ laod: 'reload' });
		},
		priceOrderAsc(value) {
			this.page = 1;
			this.ShopSearch({ laod: 'reload' });
		}
	},
	onLoad(option) {
		this.value = option.value;
		this.current = option.curent
		this.setViewHeight();
		this.ShopSearch()
		this.setNavSearchInput(this.value);

	},
	onNavigationBarSearchInputConfirmed(value) {
		this.value = value.text
		this.page = 1
		// console.log(this.value)
		this.ShopSearch()
	},
	methods: {
		scroll: function(e) {
            this.old.scrollTop = e.detail.scrollTop; // 必要
        },
		// 动态设置导航栏搜索框内容
		setNavSearchInput(keyword) {
			// #ifdef APP-PLUS
			let webView = this.$mp.page.$getAppWebview();
			webView.setTitleNViewSearchInputText(keyword);
			// #endif
			// #ifdef H5
			let inputSearch=document.querySelector('.uni-input-input[type=search]');
			var evt = new InputEvent('input', {
				inputType: 'insertText',
				data: keyword,
				dataTransfer: null,
				isComposing: false
			});
			if(inputSearch){
				inputSearch.value = keyword;
				inputSearch.dispatchEvent(evt);
			}
			// #endif
		},
		changeType(member_id){
			console.log(member_id);
			this.$emit("pChangeType")
			this.$u.api.attentionMember({
				member_id: member_id
			}).then((res)=>{
				console.log(res)
				for(let i in this.goodsList){
				
					if(this.goodsList[i].member_id == member_id){
						this.goodsList[i].is_attention = res.message == "已取消关注！" ? 0 : 1
					}
				}
			})
		},
		setOrderSort() {
			let sort = '';
			if(this.current == 0) {
				sort = 'goods_salenum';
			} else if (this.current == 1) {
				if(this.priceOrderAsc) sort = 'goods_price_asc';
				else sort = 'goods_price_desc';
			} else if (this.current == 2) {
				sort = 'evaluation_count';
			}
			return sort;
		},
		// 排序方式 goods_salenum：销量　evaluation_count：评价　goods_price_asc：价格从低到高　goods_price_desc：价格从高到低
		async ShopSearch({ load = 'reload' } = {}) {
			// const res = await this.$u.api.ShopSearch({ 
			// 	keyword: this.value, 
			// 	page: this.page,
			// 	order: sort,
			// })
			console.log(this.value)
			let res = {}
			if(this.current == 0) {
				res = await this.$u.api.storeList({ 
					name_search: this.value, 
					page: this.page
				})
				this.timer = true;
				if(res.errCode == 0) {
					if(load == 'reload') this.goodsList = res.data.list.data;
					else if(load == 'loadmore') this.goodsList.push(...res.data.list.data);
				}
				console.log(this.goodsList)
				return res.data.list.data.length;
			} else if (this.current == 1) {
				
				res = await this.$u.api.getExpertList({ 
					like_nickname: this.value, 
					page: this.page
				})
				this.timer = true;
				if(res.errCode == 0) {
					if(load == 'reload') this.goodsList = res.data.list;
					else if(load == 'loadmore') this.goodsList.push(...res.data.list);
				}
				console.log(this.goodsList)
				return res.data.list.length;
			} else if (this.current == 2) {
				res = await this.$u.api.getArticlelist({ 
					value: this.value, 
					page: this.page
				})
				this.timer = true;
				if(res.errCode == 0) {
					if(load == 'reload') this.goodsList = res.data.list;
					else if(load == 'loadmore') this.goodsList.push(...res.data.list);
				}
				console.log(this.goodsList)
				return res.data.list.length;
			}
			
		},
		loadMore() {
			if(this.goodsList.length < this.pageSize) return false;
			if(!this.timer) return false;
			this.loadStatus = "loading";
			this.page++;
			this.ShopSearch({  load: 'loadmore' }).then(length => {
				if(length == 0) {
					this.page--;
					this.loadStatus = 'nomore';
				} else {
					this.loadStatus = 'loading';
				}
			}).catch(() => {
				this.loadStatus = "nomore";
				this.page--;
			})
		},
		switchCurrent(current) {
			// if(current == 1 && this.current == 1) this.priceOrderAsc = !this.priceOrderAsc;
			this.page = 1;
			this.current = current;
			this.goodsList = []
			this.ShopSearch()
		},
		setViewHeight() {
			const res = uni.getSystemInfoSync();
			this.scrollHeight = res.windowHeight - res.windowWidth / 750 * 92  + 'px';
		},
		toDetailsPage(id) {
			this.$u.route('/pageC/merchant/index', {
				id: id
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.list{
        display: flex;
        flex-wrap: wrap;
        width: calc(100% + 23rpx);
        margin-right: -23rpx;
    }
.classify-goods {
	.tab-container {
		box-sizing: border-box;
		padding: 30rpx 40rpx;
		display: flex;
		// margin-bottom: 30rpx;
		height: 92rpx;
		> view {
			height: 30rpx;
			line-height: 1;
			flex: 1;
			font-size: 32rpx;
			color: rgba(51,51,51,1);
		}
		.salenum {
			text-align: left;
		}
		.price {
			display: flex;
			align-items: center;
			justify-content: center;
			.text {
				margin-right: 5rpx;
			}
			.icon {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
		}
		.evaluation {
			text-align: right;
		}
		.current {
			color: rgba(255,120,15,1);
		}
	}
	.goods-container {
		.goods-item {
			margin: 0 auto;
			width: 690rpx;
			display: flex;
			background-color: #F5F5F5;
			margin-bottom: 30rpx;
			align-items: center;
			> image {
				width: 220rpx;
				height: 200rpx;
				flex-shrink: 0;
				margin-right: 30rpx;
			}
			.right {
				width: 418rpx;
				.name {
					font-size: 30rpx;
					color: rgba(51,51,51,1);
					margin-bottom: 20rpx;
				}
				.briefing {
					font-size: 28rpx;
					color: rgba(102,102,102,1);
					line-height: 42rpx;
				}
			}
		}
	}
}
</style>