flying-monkey/pagesB/new-product/new-product.vue

<template>
	<view>
		<status-nav navBarTitle="新产品" returnColor="#c2c2c2"></status-nav>
		<container-subgroup>
			<view slot="content" style="margin: 0 -16rpx;" class="fon28">
				<view @tap="goDetail(item.id)" class="bacf radius10 pad-sx20 pad-zy10 disjbac mar-x20 animated fadeIn" style="box-shadow: 0rpx 3rpx 20rpx rgba(0,0,0,.3);" v-for="(item,index) in dataList" :key="index">
					<image :src="item.imgsrc" mode="aspectFill" lazy-load class="flexs" style="width: 240rpx;height: 184rpx;"></image>
					<view style="height: 184rpx;" class="width100 disjb fc pad-zy20 fon24">
						<view class=" clips2">{{item.title}}</view>
						<view class="">
							<view class="fon26 contact-box mar-x20" @tap.stop="contactEv">联系在线客服</view>
							<view class="disjbac">
								<view class="col9">起订量：{{item.num}}起批</view>
								<view style="color: #0ac9ea;">{{item.peopleNum}}想采购</view>
							</view>
						</view>
					</view>
				</view>
				<pitera v-if="total==dataList.length && dataList.length" textStr="暂无更多新产品列表数据"></pitera>
				<nothing-page v-if="!dataList.length && !ifLoading" content="暂无更多新产品列表数据"></nothing-page>
			</view>
		</container-subgroup>
	</view>
</template>

<script>
	import pitera from '@/components/nothing/pitera.vue';
	export default {
		components:{
			pitera
		},
		data() {
			return {
				dataList:[],
				page:1,
				size:10,
				total:0,
				ifLoading:true
			}
		},
		onReachBottom() {
			if(this.total!=this.dataList.length) {
				this.page++;
				// 调用获取新产品列表
				this.getProductEv();
			}
		},
		onLoad() {
			// 调用获取新产品列表
			this.getProductEv();
		},
		methods: {
			// 获取新产品列表
			getProductEv(){
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				this.$requst.get('/universal/api.new_product/new_product_list',{list_rows:this.size,page:this.page}).then(res=>{
					if(res.code) {
						console.log(res,'新产品列表1')
						this.total = res.data.total;
						let list = res.data.data;
						list.forEach(item=>{
							let obj={
								id: item.id, //id
								title: item.title, //标题
								summary: item.summary, //简介
								peopleNum: item.purchase, //采购量
								num: item.moq, //起订量
								imgsrc: item.cover_img //封面
							}
							this.dataList.push(obj);
						})
						console.log(this.dataList,'新产品列表2')
					} else {
						this.$toolAll.tools.showToast(res.msg);
					}
					uni.hideLoading();
					this.ifLoading = false;
				})
			},
			// 去新产品详情
			goDetail(id){
				uni.navigateTo({
					url:`/pagesB/plan-fault-product-detail/detail?index=2&id=${id}`
				})
			},
			// 联系客服
			contactEv(){
				this.$toolAll.tools.countCustomer('15616330510');
			}
		}
	}
</script>

<style>
.contact-box{color: #00a2e9;border: 1rpx solid #00a2e9;border-radius: 6rpx;padding: 2rpx 10rpx;display: inline-flex;justify-content: center;align-items: center;font-size: 26rpx;}
</style>