mianxueyoupin/pages/product/xinpin.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" 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>
		<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('调试模式');
		}
		// 加载位置，后续版本开启加载写入全局
		// uni.getLocation({
		// 	type: 'wgs84',
		// 	geocode: true,
		// 	success: mres=> {
		// 		uni.request({
		// 		    url: 'https://restapi.amap.com/v3/geocode/regeo',
		// 		    data: {
		// 				key: this.$wanlshop.config('amapkey'),
		// 				location: mres.longitude+','+mres.latitude
		// 		    },
		// 			// 1.1.8升级
		// 		    success: res=> {
		// 				if(res.res.infocode == '10000'){
		// 					let address = res.data.regeocode.addressComponent;
		// 					this.drawerData.sameCity.name = address.province;
		// 				}else{
		// 					this.$wanlshop.msg('获取位置失败：错误' + res.res.info);
		// 				}
		// 		    }
		// 		});
		// 	}
		// });
		await uni.request({
			url: '/wanlshop/common/init',
			success: res => {
				this.catagoryData = res.data.modulesData.categoryModules;
				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;
			// let params={
				
			// }
			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; //总页码
				}
			});
		},
		
		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>
	.cu-custom .search-form{
		border: 3rpx solid #fe6600;
		background-color: #fff;
	}
	.cu-tag:not([class*="bg"]):not([class*="line"]){
		background-color: #f7f7f7;
	}
</style>