caimei-applets-caimei/pages/goods/goods-active.vue

<template>
	<view class="container" v-show="isRepuest">
		<view class="container-title">
			<view class="name">【{{promotionsInfo.name}}】{{promotionsInfo.description}}</view>
			<view class="text">
				<text class="span">促销时间:</text>
				<text class="span r">
					<text class="txt" v-if="promotionsInfo.status == 1">不限时</text>
					<text class="txt" v-else>{{ promotionsInfo.beginTime }} ～ {{ promotionsInfo.endTime }}</text>
				</text>
			</view>
			<view class="text">下面为参与本次凑单满赠活动的全部商品</view>
		</view>
		<view class="tui-order-content">
			<view class="hotgoods-swiper">
				<view class="scoll-wrapper clearfix">
					<view class="floor-item" v-for="(item, index) in  productList" :key="index" @click.stop="detail(item.productId)">
						<image class="tui-skeleton-fillet" :src="item.image" mode="aspectFill"></image>
						<view class="floor-item-content">
							<view class="title"><text class="mclap">{{item.name}}</text></view>
							<view class="price">
								<text class="p sm">￥</text>
								<text class="p big">{{item.price | NumFormat}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>	
			<!--加载loadding-->
			<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
			<tui-nomore :visible="!pullUpOn" :backgroundColor="'#ffffff'" :text='nomoreText'></tui-nomore>
			<!--加载loadding-->
		</view>
	</view>
</template>

<script>
	import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
	import tuiNomore from "@/components/tui-components/nomore/nomore"
	import { mapState,mapMutations} from 'vuex';
	
	export default {
		components: {
			tuiLoadmore,
			tuiNomore,
		},
		data() {
			return {
				isRepuest:false,
				userID:0,
				promotionsId:0,
				productList: [],
				pageSize:10,
				pageNum:1,
				loadding: false,
				pullUpOn: true,
				modal:false,
				promotionsInfo:{},
				loadding: false,
				pullUpOn: true,
				hasNextPage: false,
				pullFlag: true,
				nomoreText: '上拉显示更多',
			}
		},
		computed: {
			...mapState(['identity'])
		},
		onLoad(option) {
			this.promotionsId=option.id
			this.$api.getComStorage('userInfo').then((resolve) =>{
				this.userID = resolve.userId ? resolve.userId :0;
				this.initSsoMemberCollectionList()
			}).catch(error =>{
				this.initSsoMemberCollectionList()
			})
		},
		filters: {
			NumFormat:function(text) {//处理金额
				return Number(text).toFixed(2);
			},
		},
		methods: {
			initSsoMemberCollectionList(id){//凑单初始化
				this.ProductService.queryProductPromotionInfo(
					{
						promotionsId:this.promotionsId,
					}
				)
				.then(response =>{
					let data = response.data
					this.promotionsInfo = data
					this.queryProductPromotionList()
				})
				.catch(error =>{
					this.$util.msg(error.message,2000)
				})	
			},
			queryProductPromotionList(id){//查询凑单商品列表
				this.ProductService.queryProductPromotionList(
					{
						identity:this.identity,
						pageNum:this.pageNum,
						pageSize:this.pageSize,
						promotionsId:this.promotionsId,
					}
				)
				.then(response =>{
					let data = response.data
					if(data.list && data.list.length > 0){
						this.hasNextPage = data.hasNextPage;
						this.productList = data.list;
						this.getProductPrice()
						// 防上拉暴滑
						this.pullFlag = false;
						setTimeout(()=>{ this.pullFlag = true; },500)
						// 底部提示文案
						if(this.hasNextPage){
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						}else{
							if(this.productList.length < 2){
								this.pullUpOn = true
							}else{
								this.pullUpOn = false
								this.nomoreText = '已至底部'
							}
						}
					}
				})
				.catch(error =>{
					this.$util.msg(error.message,2000)
				})	
			},
			getOnReachBottomData(){//上滑加载
				this.pageNum+=1
				this.ProductService.queryProductPromotionList(
					{
						pageNum:this.pageNum,
						pageSize:this.pageSize,
						promotionsId:this.promotionsId,
					}
				)
				.then(response =>{
					let data = response.data
					if(data.list&&data.list.length > 0){
						this.hasNextPage = data.hasNextPage;
						this.productList = this.productList.concat(data.list) 
						this.getProductPrice()
						this.pullFlag = false;// 防上拉暴滑
						setTimeout(()=>{this.pullFlag = true;},500)
						if(this.hasNextPage){
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						}else{
							this.pullUpOn = false
							this.loadding = false
							this.nomoreText = '已至底部'
						}
					}
				})
				.catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			getProductPrice(){//获取商品或者活动价格
				let productIdArr = [];
				let productIds ='';
				this.productList.map(item=>{
					productIdArr.push(item.id)
				})
				productIds = productIdArr.join(",");
				this.ProductService.querySearchProductPrice({userId: this.userID,productIds:productIds}).then(response =>{
					this.productList = this.ReturnNewProducts(this.productList,response.data);
					this.isRepuest = true;
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			ReturnNewProducts(Array,list){
				let NewArray = []
				Array.map(item=>{
					for (let i = 0; i < list.length; i++) {
						if( item.id == list[i].productId ){
							NewArray.push(Object.assign(item,list[i])) 
						}
					}
				});
				return NewArray
			},
			detail: function(id) {
				this.$api.navigateTo(`/pages/goods/productDetail?id=${id}`)
			},
		},
		onReachBottom() {
			if(this.hasNextPage){
				this.loadding = true
				this.pullUpOn = true
				this.getOnReachBottomData()
			}	
		},
		onPullDownRefresh() {//下拉刷新
			this.pageNum = 1
			this.queryProductPromotionList()
			uni.stopPullDownRefresh()
		},
		onShow() {
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F7F7F7;
	}
	.container {
		padding-bottom: 0;
	}
	.container-title{
		width: 100%;
		height: 242rpx;
		box-sizing: border-box;
		padding:21rpx 24rpx 23rpx 24rpx;
		background: url(https://admin-b.caimei365.com/userfiles/1/images/photo/2020/09/%E8%83%8C%E6%99%AF%E5%9B%BE.png) no-repeat;
		background-size: cover;
		.name{
			width: 100%;
			box-sizing: border-box;
			height: 96rpx;
			line-height: 36rpx;
			padding: 12rpx 0;
			font-size: $font-size-28;
			color: #FFFFFF;
		}
		.text{
			width: 100%;
			height: 48rpx;
			line-height: 48rpx;
			font-size: $font-size-24;
			color: #FFFFFF;
			.span{
				display: inline-block;
				float: left;
				&.r{
					padding:0 20rpx;
					height: 36rpx;
					line-height: 36rpx;
					border-radius: 6rpx;
					text-align: center;
					color: $color-system;
					font-size: $font-size-26;
					margin-top: 4rpx;
					background-color: #FFFFFF;
					margin-left: 10rpx;
				}
			}
		}
	}
	.hotgoods-swiper{
		width: 100%;
		height: auto;				
		overflow: hidden;
		margin-bottom: 20rpx;
		.scoll-wrapper{
			width: 100%;
			height: auto;
			box-sizing: border-box;
			padding: 24rpx;
			background: #F7F7F7;
			.floor-item{
				width: 340rpx;
				height: auto;
				margin-right: 20rpx;
				font-size: $font-size-24;
				color: $text-color;
				background: #FFFFFF;
				line-height: 36rpx;
				border-radius: 14rpx;
				margin-bottom: 20rpx;
				float: left;
				box-sizing: border-box;
				padding-bottom: 16rpx;
				&:nth-child(2n){
					margin-right: 0;
				}
				image{
					width: 341rpx;
					height: 341rpx;
					border-radius: 20rpx 20rpx 0 0;
					display: block;
					margin-bottom: 20rpx;
				}
				.floor-item-content{
					width: 100%;
					padding: 0 15rpx;
					box-sizing: border-box;
				}
				.title{
					width: 100%;
					height: 72rpx;
					display: flex;
					flex-direction: column;
					padding: 10rpx 0;
					.mclap{
						width: 100%;
						line-height: 36rpx;
						text-overflow:ellipsis;
						display: -webkit-box;
						word-break: break-all;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						font-size: 26rpx;
					}
				}
				.price{
					color: #333333;
					line-height: 44rpx;
					.sm{
						font-size: $font-size-24;
					}
					.big{
						font-size: $font-size-28;
					}
				}
			}
		}
	}
</style>