sct/pagesT/pointsMall/index.vue

<template>
	<view class="pointsMall" :class="['qn-page-' + theme]">
		<view class="top-view primary-bg clearfix">
			<view class="float_left user-avatar"><image :src="userInfo.avatar || 'https://onlineimg.qianniao.vip/user-re.png'" mode="aspectFill"></image></view>
			<view class="float_left info-view">
				<view class="points-num">{{ userInfo.integral || 0 }}</view>
				<view class="label">我的股权</view>
			</view>
		</view>
		<view class="btn-view">
			<view class="btn-li" @click="goPage('/pagesT/pointsMall/ExchangeLog')">
				<view class="btn-tit">我的兑换</view>
				<view class="btn-val">立即查看</view>
				<view class="icon-view"><text class="custom-icon custom-icon-jifen"></text></view>
			</view>
			<view class="btn-li" @click="goPage('/pagesT/pointsMall/PointsDetail')">
				<view class="btn-tit">股权收支</view>
				<view class="btn-val">立即查看</view>
				<view class="icon-view"><text class="custom-icon custom-icon-qiandao"></text></view>
			</view>
		</view>
		<view class="wrap">
			<view class="demo-warter" v-for="(item, index) in flowList" :key="index" @click="goPage(`/pagesT/pointsMall/IntegralGoodsDetail?id=${item.id}`)">
				<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
				<image class="goods-img" :src="item.images[0]" mode="aspectFill"></image>
				<view class="demo-title ellipsis">{{ item.name }}</view>
				<view class="demo-price">{{ item.integral }}股权</view>
				<view class="demo-shop">{{ item.changeNum }}件已兑换</view>
				<view class="dh-btn primary-btn" @click.stop="goPage('/pagesT/pointsMall/ExchangeOrder?id=' + item.id)">立即兑换</view>
			</view>
			<!-- 空白页 -->
			<Aempty text="暂无商品" v-if="flowList.length === 0" src="https://onlineimg.qianniao.vip/data.png"></Aempty>
			<u-loadmore v-if="flowList.length" :status="loading_status"></u-loadmore>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading_status: 'nomore',
			flowList: [],
			list: [],
			page: 1,
			pageSize: 10,
			total: 0
		};
	},
	onLoad() {
		// this.addRandomData();
		this.getAllIntegralGoods();
	},
	onReachBottom() {
		if (this.total / this.pageSize > this.page) {
			this.page += 1;
			this.getAllIntegralGoods();
		}
	},
	onPullDownRefresh() {
		this.page = 1;
		this.getAllIntegralGoods();
	},
	computed: {
		userInfo() {
			return this.$store.state.userStatus;
		}
	},
	methods: {
		getAllIntegralGoods() {
			this.loading_status = 'loading';
			this.$u.api
				.getAllIntegralGoods({
					search: '',
					page: this.page,
					pageSize: this.pageSize
				})
				.then(res => {
					uni.stopPullDownRefresh();
					if (this.page === 1) {
						this.flowList = res.data;
					} else {
						this.flowList = this.flowList.concat(res.data);
					}
					this.total = res.pageTotal;
					this.loading_status = this.$_utils.loadStatus(this.page, this.pageSize, this.total);
				})
				.catch(res => {
					this.loading_status = 'nomore';
					uni.stopPullDownRefresh();
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.wrap {
	padding: 0 10rpx;
	transform: translateY(-50rpx);
}
.demo-warter {
	border-radius: 10rpx;
	margin: 20rpx 10rpx;
	background-color: #ffffff;
	padding: 20rpx;
	position: relative;
	width: calc(50% - 20rpx);
	display: inline-block;
	.goods-img {
		width: 100%;
		height: 304rpx;
		border-radius: 10rpx;
	}
	.dh-btn {
		line-height: 50rpx;
		color: #ffffff;
		font-size: 24rpx;
		margin-top: 20rpx;
		text-align: center;
		border-radius: 50rpx;
	}
}
.demo-title {
	font-size: 30rpx;
	height: 72rpx;
	line-height: 36rpx;
	margin-top: 5px;
	color: $u-main-color;
}

.demo-tag {
	display: flex;
	margin-top: 5px;
}

.demo-price {
	font-size: 30rpx;
	color: $u-type-error;
	margin-top: 5px;
	font-family: DIN-Medium;
}

.demo-shop {
	font-size: 20rpx;
	color: $u-tips-color;
	margin-top: 5px;
	font-family: DIN-Medium;
}
.top-view {
	background-color: $uni-color-primary;
	color: #ffffff;
	padding: 30rpx 24rpx 80rpx;
	.user-avatar {
		padding-right: 30rpx;
		image {
			display: block;
			width: 100rpx;
			height: 100rpx;
			border-radius: 100%;
		}
	}
	.info-view {
		.points-num {
			font-size: 36rpx;
			font-weight: 600;
			padding-bottom: 6rpx;
			font-family: DIN-Medium;
		}
		.label {
			font-size: 24rpx;
			opacity: 0.8;
		}
	}
}
.btn-view {
	display: flex;
	width: 700rpx;
	margin: 0 auto;
	border-radius: 12rpx;
	background-color: #ffffff;
	transform: translateY(-50rpx);
	padding: 20rpx 0;
	.btn-li {
		flex: 2;
		position: relative;
		padding: 0 30rpx;
		.btn-val {
			font-size: 24rpx;
			color: #999999;
			padding-top: 6rpx;
		}
		.icon-view {
			color: #ff9900;
			position: absolute;
			right: 30rpx;
			top: 50%;
			transform: translateY(-50%);
			.custom-icon {
				font-size: 48rpx;
			}
		}
		&:first-child {
			border-right: 1px solid #f5f5f5;
		}
	}
}
</style>