caimei-applets-mcare/pages/goods/good-floor.vue

<template>
	<view class="container clearfix">
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		></tui-skeleton>
		<view class="cm-member-main " v-else>
			<view class="cm-member-product clearfix">
				<view
					v-for="(pro, index) in productList"
					:key="index"
					:id="pro.productId"
					class="product-list"
					@click="productDetail(pro.productId)"
				>
					<view class="product-image"> <image :src="pro.mainImage" mode=""></image> </view>
					<view class="product-mains">
						<view class="product-name"> {{ pro.name }} </view>
						<view class="product-price" v-if="hasLogin">
							<!-- 价格 -->
							￥{{ pro.price | NumFormat }}
						</view>
						<view v-else class="product-price-none">
							<uni-grader :grade="Number(pro.priceGrade)"></uni-grader>
						</view>
					</view>
				</view>
			</view>
			<!--加载loadding-->
			<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
			<tui-nomore :visible="!pullUpOn" :backgroundColor="'#F7F7F7'" :text="nomoreText"></tui-nomore>
			<!--加载loadding-->
		</view>
		<!-- 透明模态层 -->
		<modal-layer v-if="isModallayer"></modal-layer>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import modalLayer from '@/components/modal-layer'
import uniGrader from '@/components/uni-grade/uni-grade.vue'
import shareMixin from '@/mixins/shareMixin.js'
export default {
	mixins: [ shareMixin ], 
	components: {
		modalLayer,
		uniGrader
	},
	data() {
		return {
			skeletonShow:true,
			isModallayer: false,
			productList: [],
			nomoreText: '上拉显示更多',
			hasNextPage: false,
			loadding: false,
			pullUpOn: true,
			pullFlag: true,
			pathTitle:'',
			pathId:''
		}
	},
	onLoad(option) {
		this.pathId = option.id
		this.pathTitle = option.title
		this.mallOrganizeProducts(option.id)
		uni.setNavigationBarTitle({ title: option.title })
	},
	filters: {
		NumFormat: function(text) {
			//处理金额
			return Number(text).toFixed(2)
		}
	},
	computed: {
		...mapState(['hasLogin'])
	},
	methods: {
		async mallOrganizeProducts(floorId){
			//初始化首页数据
			try{
			    const res = await this.CommonService.mallOrganizeProducts({ floorId: floorId })
			    this.productList = res.data
			    this.skeletonShow = false
			}catch(error){
			    //TODO handle the exception
			    console.log('error',error)
			}
		},
		productDetail(productId) {
			// 跳转商品详情
			this.isModallayer = true
			this.$api.navigateTo(`/pages/goods/product?id=${productId}`)
			this.isModallayer = false
		},
	},
	onPullDownRefresh() {
		setTimeout(() => {
			this.getSvipProductPage()
			uni.stopPullDownRefresh()
		}, 200)
	},
	onReachBottom() {
		if (this.hasNextPage) {
			this.loadding = true
			this.pullUpOn = true
			this.getOnReachBottomData()
		}
	},
	onShow() {}
}
</script>

<style lang="scss">
page {
	background-color: #f7f7f7;
}
.container {
	width: 100%;
	height: auto;
}
.cm-member-main {
	width: 100%;
	box-sizing: border-box;
	padding: 0 24rpx 24rpx 24rpx;
	background-color: #f7f7f7;
	.cm-member-product {
		width: 100%;
		margin-top: 24rpx;
		.product-list {
			width: 339rpx;
			height: 516rpx;
			border-radius: 16rpx;
			float: left;
			margin-right: 24rpx;
			margin-bottom: 24rpx;
			background-color: #ffffff;
			&:nth-child(2n) {
				margin-right: 0;
			}
			.product-image {
				width: 339rpx;
				height: 339rpx;
				image {
					width: 339rpx;
					height: 339rpx;
					display: block;
					border-radius: 16rpx 16rpx 0 0;
				}
			}
			.product-mains {
				width: 100%;
				height: auto;
				box-sizing: border-box;
				padding: 0 24rpx;
				margin-top: 16rpx;
				.product-name {
					height: 80rpx;
					line-height: 40rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					font-size: $font-size-28;
					color: #333333;
					text-align: justify;
				}
				.product-price {
					width: 100%;
					line-height: 40rpx;
					font-size: $font-size-28;
					color: #F85050;
					margin-top: 16rpx;
				}
				.product-price-none {
					color: #f8c499;
					float: left;
					line-height: 54rpx;
					margin-top: 16rpx;
					.p-no {
						float: left;
						font-size: $font-size-24;
						color: $text-color;
					}
				}
			}
		}
	}
}
</style>