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.productId)
			})
			productIds = productIdArr.join(',')
			this.ProductService.querySearchProductPrice({
				userId: this.userID,
				productIds: productIds,
				source: 2
			})
				.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.productId == 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://static.caimei365.com/app/img/bg/icon-activity-bg@2x.png);
	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: #ff2a2a;
				line-height: 44rpx;
				.sm {
					font-size: $font-size-24;
				}
				.big {
					font-size: $font-size-28;
				}
			}
		}
	}
}
</style>