hezhiying/pages/qianggou/productList.vue

<template>
	<view class="page">
		<navbar :title="'抢购列表'" :isCenter="true" :back="true" @onBack="backHandle"></navbar>
		<u-sticky bgColor="#fff">
		    <u-tabs 
			@click="getPage"
			:activeStyle="{
				color: '#9F751F',
				fontWeight: 'bold',
				background:'#eaeaea',
				transform: 'scale(1.05)'
			}"
			:inactiveStyle="{
				color: '#9F751F',
				transform: 'scale(1)'
			}"
			:list="pagesList"></u-tabs>
			
		</u-sticky>
		<view class="refresh" @click="refrenshHandle">
			刷新
		</view>
		<view class="recommend-info">
			
			<view class="goods-list">
				<view class="list" v-for="(item,index) in goodsList"  :key="index">
					<view class="" @click="onSkip(item)">
						<view class="pictrue">
							<image :src="item.image" mode="heightFix"></image>
						</view>
						<view class="title-tag">
							{{item.name}}
						</view>
						<view class="price-info">
							<view class="user-price">
								<text class="min">￥</text>
								<text class="max">{{item.price}}</text>
							</view>
							
						</view>
					</view>
					<view class="shouqing" v-if="item.status=='hidden'">
						<image src="../../static/image/shouqin.png" mode="widthFix"></image>
						<text>已售罄</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import navbar from '@/components/navbar.vue'
import {getGoodsList} from '@/common/api.js'
export default {
	data(){
		return{
			goodsList:[],
			total:0,
			pagesList: [],
			page:1,
			limit:10,
			warehouse_id:null,
		}
	},
	components:{navbar},
	
	methods:{
		refrenshHandle(){
			uni.redirectTo({
			    url: '/pages/qianggou/productList?page='+this.page //写你的路径
			});
		},
		backHandle(){
			uni.switchTab({
				url:"/pages/qianggou/qianggou"
			})
		},
		getGoodsList(){
			this.pagesList=[]
			getGoodsList({page:this.page,limit:10,warehouse_id:this.warehouse_id}).then(res=>{
				this.goodsList = res.data.data;
				this.total = res.data.total;
				
				for(let i=0;i<Math.ceil(this.total/10);i++){
					this.pagesList.push({
						name:`第${i+1}页`
					})
				}
			})
		},
		getPage(val){
			this.page=val.index+1;
			this.getGoodsList()
			
		},
		onSkip(item){
			uni.navigateTo({
				url:'/pages/qianggou/productDetails?id='+item.id
			})
		}
	},
	onReady() {
		
	},
	onLoad(option) {
		this.warehouse_id = option.id
		this.getGoodsList()
		
	},
	onShow() {
		// this.getGoodsList()
	},
	onPageScroll(e){
		
	},
	onReachBottom(){
		console.log(12333);
	},
};
</script>

<style scoped lang="scss">
.page{
	padding-bottom: 100rpx;
	position: relative;
}
// 9F751F
.refresh{
	color:rgb(77, 154, 94);
	padding:20rpx;
	text-align: right;
	position: fixed;
	top:90rpx;
	right:0;
	z-index:9999;
}
::v-deep .u-tabs{
	margin-right:100rpx;
}
::v-deep .u-tabs__wrapper__nav__line{
	display: none;
}
::v-deep .u-tabs__wrapper__nav__item__text{
	font-size: 15px;
	height: 100%;
	color: #606266;
	display: flex;
	align-items: center;
	padding: 0 10px;
}

.recommend-info{
	width: 100%;
	background-color: #f2f2f2;
	margin-top:110rpx;
	.goods-list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 30rpx;
		
		.list{
			width: 49%;
			height: 480rpx;
			margin-bottom: 20rpx;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			overflow: hidden;
			position: relative;
			.shouqing{
				height:100%;
				width:100%;
				background-color: rgba(0,0,0,0.7);
				position: absolute;
				top:0;
				left:0;
				z-index:9;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				image{
					width:45%;
					height:auto;
				}
				text{
					color:#ffffff;
					font-size:25rpx;
				}
			}
			.pictrue{
				display: flex;
				justify-content: center;
				width: 100%;
				image{
					height: 350rpx;
				}
			}
			.title-tag{
				padding: 20rpx;
				
			}
			.price-info{
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;
				.user-price{
					display: flex;
					align-items: center;
					text{
						color: $price-clor;
					}
					.min{
						font-size: 24rpx;
					}
					.max{
						font-size: 32rpx;
					}
				}
				
			}
		}
	}
}
</style>