mnsx/pages/product/exchange.vue

<template>
	<view class="content">
		<!-- <scroll-view scroll-y="true" style="height: 100%;" @click="loadData()"> -->
			<empty v-if="integral.loaded === true && integral.list.length === 0"></empty>
			<view class="exchange-wrapper">
				<!-- <view class="exgood-wrapper" v-for="item in integral.list" :key="item.id" @click="navTo('/pages/product/product?id=' + item.id + '&type=3')" style="height: 500rpx;"> -->
					<view class="exgood-wrapper" v-for="item in integral.list" :key="item.id" @click="navTo('/pages/product/exchangeDetail?id=' + item.id + '&type=3')" style="height: 500rpx;">
					<image src="https://zccy.liuniu946.com/static/img/bg3.png" mode="" class="bg3" style="height: 500rpx;"></image>
					<view class="ex-img-wrapper"><image :src="item.image" mode=""></image></view>
					<view class="exgood-title">{{item.title}}</view>
					<view class="ex-price">
						￥{{item.price*1}}
					</view>
				</view>
			</view>
			<uni-load-more :status="integral.loadingType"></uni-load-more>
		<!-- </scroll-view> -->
	</view>
	
</template>

<script>
import empty from '@/components/empty';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';

import { getCombinationList, getProductslist, getProductHot ,getIntegralList, getProductList ,getExchangeLists} from '@/api/product.js';
import { mapMutations,mapState } from 'vuex';
	export default {
		components: {
			empty,
			uniLoadMore
		},
		data() {
			return {
				integral: {
					page: 1,
					limit: 10,
					list: [],
					loadingType: 'more',
					loaded: ''
				}
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'checkedStore', 'des', 'latlng']),
		},
		onLoad() {
			this.loadData()
		},
		onReachBottom() {
			this.loadData()
			console.log('到底了')
		},
		methods:{
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			loadData() {
				let obj = this
				if (obj.integral.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if (obj.integral.loadingType === 'noMore') {
					//防止重复加载
					return;
				}
				// 修改当前对象状态为加载中
				obj.integral.loadingType = 'loading';
				getExchangeLists({
					page: obj.integral.page,
					limit: obj.integral.limit,
				}).then(({data}) => {
					// console.log(data)
					obj.integral.list = obj.integral.list.concat(data)
					obj.integral.page++
					console.log(obj.integral.list)
					if (obj.integral.limit == data.length) {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						obj.integral.loadingType = 'more';
					} else {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						obj.integral.loadingType = 'noMore';
					}
					uni.hideLoading();
					this.$set(obj.integral, 'loaded', true);
				})
				// getProductList({
				// 	cid: 3,
				// 	page: obj.integral.page,
				// 	limit: obj.integral.limit,
				// }).then( ({data}) => {
				// 	console.log(data)
				// 	obj.integral.list = obj.integral.list.concat(data)
				// 	console.log(obj.integral.list)
				// 	if (obj.integral.limit == data.length) {
				// 		//判断是否还有数据， 有改为 more， 没有改为noMore
				// 		obj.integral.loadingType = 'more';
				// 		return;
				// 	} else {
				// 		//判断是否还有数据， 有改为 more， 没有改为noMore
				// 		obj.integral.loadingType = 'noMore';
				// 	}
				// 	uni.hideLoading();
				// 	this.$set(obj.integral, 'loaded', true);
				// })
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}
	.content {
		height: 100%;
	}
	.exchange-wrapper {
		// background-color: #fff;
		width: 696rpx;
		// height: 100rpx;
		padding-top: 28rpx;
		margin: 0 auto 39rpx;
		// padding: 0 27rpx;
		display: flex;
		justify-content: space-between;
		position: relative;
		flex-wrap: wrap;
		.exgood-wrapper {
			width: 342rpx;
			height: 540rpx;
			box-shadow: 0px 4px 18px 0px rgba(144, 27, 33, 0.13);
			margin-bottom: 20rpx;
			position: relative;
			.ex-img-wrapper {
				width: 342rpx;
				height: 338rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.exgood-title {
				margin-top: 33rpx;
				padding-left: 21rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.ex-addr {
				margin-top: 16rpx;
				padding-left: 22rpx;
				height: 22rpx;
				font-size: 22rpx;
				font-weight: 500;
				color: #dcb876;
				image {
					height: 22rpx;
				}
				.name-img {
					width: 26rpx;
					margin: 0 4rpx -3rpx 0;
				}
				.point-img {
					width: 16rpx;
					margin: 0 4rpx -3rpx 14rpx;
				}
			}
			.ex-price {
				margin-top: 17rpx;
				padding-left: 22rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #901b21;
				vertical-align: bottom;
				.tx1 {
					font-size: 24rpx;
					vertical-align: baseline;
					position: relative;
					top: -2rpx;
				}
				.tx2 {
					margin-left: 9rpx;
					font-size: 26rpx;
					font-weight: 500;
					text-decoration: line-through;
					color: #9d9d9d;
					line-height: 35rpx;
				}
			}
			.bg {
				position: absolute;
				top: 0;
				width: 342rpx;
				height: 540rpx;
				background-size: 100% 100%;
			}
		}
	}
	.bg3 {
		z-index: 3;
		width: 342rpx;
		height: 540rpx;
		position: absolute;
		top: 0;
		left: 0;
	}
	
</style>