mianxueyoupin/pages/product/tejia.vue

<template>
	<view class="wanl-list" style="background-color: #F2F3F4;min-height: calc(100vh);">
		<!-- 导航条 -->
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar bg-bgcolor fixed" :style="{ height: $wanlshop.wanlsys().height + 'px', paddingTop: $wanlshop.wanlsys().top + 'px'}">
				<!-- 1.1.9 升级 其他页面进入 -->
				<view v-if="pagesNum > 1" class="action" @tap="$wanlshop.back(1)"><text class="wlIcon-fanhui1"></text></view>
				<!-- 直接进入 -->
				<view v-else class="action" @tap="$wanlshop.on('/pages/index')"><text class="wlIcon-zhuye"></text></view>
				
				<view style="margin:0 24rpx;width: 100%;">
					<u-search placeholder="搜索商品" bgColor="#F2F3F4" v-model="keyword" 
					@search="searchHandle"
					height="60rpx" :showAction="false"></u-search>
				</view>
				<!-- <view class="action" @tap="editListstyle()">
					<text class="wlIcon-listing-jf" v-if="liststyle == 'col-2-20'"></text>
					<text class="wlIcon-liebiao" v-else></text>
				</view> -->
			</view>
		</view>
		<view class="imgContent">
			<image src="../../static/images/img/bg2.png" mode="aspectFill"></image>
		</view>
		<u-tabs :list="catagoryData" keyName="name" lineColor="#EB6100"
		 :activeStyle="{'font-weight': 'bold','font-size': '36rpx','color': '#222222'}"
		 @click="clickHandle"></u-tabs>
		<!-- 主体 -->
		<block v-if="goodsData.length > 0">
			<wanl-product :dataList="goodsData" :dataStyle="liststyle" :dataType="goodsType"/>
		</block>
		
		<uni-load-more :status="status" :content-text="contentText" />
		
		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			keyword:'',
			catagoryData:[],
			// WanlScroll: 0, //记录页面滚动
			// scrollStype: false, //滚动状态
			liststyle: 'col-2-20', //列表样式
			goodsData: [], //商品列表数据
			category: '',
			goodsType: 'goods',
			empty: '没有找到任何宝贝',
			// params: {
			// 	search: '',
			// 	sort: 'weigh',
			// 	order: 'asc',
			// 	page: 1,
			// 	filter: {},
			// 	op: {}
			// },
			
			// drawerParams: {},
			reload: false, //判断是否上拉
			// last_page: 0,
			status: 'loading',
			contentText: {
				contentdown: '',
				contentrefresh: '正在加载..',
				contentnomore: '没有更多数据了'
			},
			pagesNum: 0
		};
	},
	async onLoad(option) {
		this.pagesNum = getCurrentPages().length; // 1.1.9 升级
		// if (option.type) {
		// 	this.goodsType = option.type;
		// }
		// if (option.search) {
		// 	//如果搜索存在
		// 	this.params.search = option.search;
		// 	this.drawerParams.search = option.search;
		// } else if (option.data) {
		// 	var data = JSON.parse(option.data);
		// 	this.drawerParams.category_id = data.category_id;
		// 	this.category = data.category_name;
		// 	this.params.filter.category_id = data.category_id;
		// 	this.params.op.category_id = 'in';
		// } else {
		// 	console.log('调试模式');
		// }
		
		await uni.request({
			url: '/wanlshop/common/init',
			success: res => {
				this.catagoryData = res.data.modulesData.categoryModules;
				if(this.catagoryData.length>0){
					this.category = this.catagoryData[0].id
				}
				this.loadData();
			}
		});
		
		
	},
	// 监听上拉
	onPullDownRefresh() {
		this.params.page  = 1;
		this.reload = true;
		this.loadData();
	},
	// 下拉刷新
	onReachBottom() {
		if (this.params.page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.contentText.contentdown = '上拉显示更多';
			this.params.page = this.params.page + 1; //页码+1
			this.status = 'loading';
			this.loadData();
		}
	},
	// 监听滚动
	// onPageScroll(object) {
	// 	if (object.scrollTop > this.WanlScroll) {
	// 		this.scrollStype = false;
	// 	} else {
	// 		this.scrollStype = true;
	// 	}
	// 	if (object.scrollTop < 0) {
	// 		this.scrollStype = false;
	// 	}
	// 	this.WanlScroll = object.scrollTop;
	// },
	// 监听返回
	onUnload() {
		
	},
	methods: {
		clickHandle(val){
			console.log(val)
		},
		//异步加载商品列表
		async loadData() {
			this.params.type = this.goodsType;
			await uni.request({
				url: '/wanlshop/product/lists',
				data: this.params,
				success: res => {
					uni.stopPullDownRefresh();
					this.status = 'more';
					this.goodsData = this.reload ? res.data.data : this.goodsData.concat(res.data.data); //数据 追加
					if(res.data.data.length == 0){
						this.empty = `没找到与“${this.category}${this.params.search}"相关的宝贝`;
					}
					this.params.page = res.data.current_page; //当前页码
					this.last_page = res.data.last_page; //总页码
				}
			});
			
			
			console.log(this.category,"liudan")
			uni.request({
				url: '/wanlshop/product/activelists',
				method: 'GET',
				data: {
					type:3, //今日特价
					filter:{
						category_id:this.category,
						
					}
				},
				success: res => {
					console.log(res,"新手福利");
					if(res.data.length>2){
						this.newList = res.data.slice(0,2)
					}else{
						this.newList = res.data;
					}
					
				}
			})
		},
		
		search() {
			this.$wanlshop.to(`/pages/page/search?type=${this.goodsType}`,'fade-in',100);
		},
		editListstyle() {
			this.liststyle = this.liststyle == 'col-1-10'?'col-2-20':'col-1-10';
		}
	}
};
</script>

<style scoped lang="scss">
	.cu-custom .search-form{
		border: 3rpx solid #fe6600;
		background-color: #fff;
	}
	.cu-tag:not([class*="bg"]):not([class*="line"]){
		background-color: #f7f7f7;
	}
	.imgContent{
		image{
			height: 360rpx;
			width: 100%;
		}
	}
</style>