zhibo/pages_user/integralGoodsList.vue

<template>
	<view class="content">
		<view class="cont-box">
			<u-sticky>
				<view class="top-box">
					<view class="my-integral">
						<view class="left">
							<view class="label">我的芳华币</view>
							<view style="margin-top: 30rpx;display: flex;align-items: baseline;">
								<view class="integral">{{integral}}</view>
								<view class="integralbtn" @click="goIntegral">获取芳华币</view>
							</view>
						</view>
						<view class="btn-box">
							<view class="btn" @click="navTo('/pages/user/integral/integralLogsList')">获得记录</view>
							<view class="btn" @click="navTo('/pages/user/integral/integralOrderList')">兑换记录</view>
						</view>
					</view>
					<view class="tabs" v-if="tabs.length>0">
						<u-tabs :current="tabIndex" :scrollable="true" :list="tabs" lineColor="#FF5C03"
							@change="tabChange">
						</u-tabs>
					</view>
				</view>
			</u-sticky>
			<mescroll-body bottom="0" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" :up="upOption">
				<view class="integral-box">
					<view class="item" @click="navTo('/pages/user/integral/integralGoodsDetails?goodsId='+item.goodsId)"
						v-for="(item,index) in dataList">
						<view class="top">
							<image :src="item.imgUrl"></image>
						</view>
						<view class="bottom">
							<view class="title ellipsis2">
								{{item.goodsName}}
							</view>
							<view class="price-box">
								<view class="price">{{item.integral}}芳华币</view>
								<view class="count">价值:{{item.otPrice.toFixed(2)}}元</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>

	</view>
</template>

<script>
	// import {getDictByKey} from '@/api/common.js'
	// import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	// import {getIntegralGoodsList} from '@/api/integral.js'
	// import {getUserInfo} from '@/api/user'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				integral: 0,
				type: "0",
				typeOptions: [],
				tabIndex: 0,
				tabs: [],
				mescroll: null,
				downOption: {
					use: true,
					auto: false,
					textInOffset: '下拉刷新', // 可选：下拉提示文字
					textOutOffset: '释放更新', // 可选：释放提示文字
					textLoading: '加载中...' // 可选：加载中提示文字
				},
				upOption: {
					onScroll: false,
					use: true, // 是否启用上拉加载; 默认true
					page: {
						pae: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					textNoMore: "已经到底了",
					empty: {
						icon: 'https://cos.his.cdwjyyh.com/fs/20240423/cf4a86b913a04341bb44e34bb4d37aa2.png',
						tip: '暂无数据'
					}
				},
				dataList: []
			}
		},
		onLoad() {
			this.getDictByKey("sys_integral_goods_type");
			this.getUserInfo();
		},
		methods: {
			getUserInfo() {
				getUserInfo().then(
					res => {
						if (res.code == 200) {
							if (res.user != null) {
								this.integral = res.user.integral;
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			goIntegral() {
				let pages = getCurrentPages();
				let url = pages[pages.length - 2];
				if (pages.length > 1 && url && url.route == 'pages/user/integral/points') {
					uni.navigateBack()
				} else {
					uni.navigateTo({
						url: '/pages/user/integral/points'
					})
				}
			},
			getDictByKey(key) {
				var data = {
					key: key
				}
				var that = this;
				getDictByKey(data).then(
					res => {
						if (res.code == 200) {
							this.typeOptions = res.data;
							this.typeOptions.forEach(function(item, index) {
								var data = {
									name: item.dictLabel
								};
								that.tabs.push(data);
							})
							if (this.tabs.length > 0) {
								this.tabIndex = 0
							}

						}
					},
					err => {}
				);

			},
			tabChange(item) {
				console.log(item.index)
				this.type = this.typeOptions[item.index].dictValue;
				this.mescroll.resetUpScroll()
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				mescroll.resetUpScroll()
			},
			upCallback(page) {
				//联网加载数据
				var that = this;
				var data = {
					pageNum: page.num,
					pageSize: page.size
				};
				if (this.type != null) {
					data.goodsType = this.type
				}
				getIntegralGoodsList(data).then(res => {
					if (res.code == 200) {
						//设置列表数据
						if (page.num == 1) {
							that.dataList = res.data.list;

						} else {
							that.dataList = that.dataList.concat(res.data.list);

						}
						that.mescroll.endBySize(res.data.list.length, res.data.total);

					} else {
						uni.showToast({
							icon: 'none',
							title: "请求失败",
						});
						that.dataList = null;
						that.mescroll.endErr();
					}
				});
			}

		}
	}
</script>


<style scoped lang="scss">
	page {
		height: 100%;
		background-color: #f5f5f5;
	}

	.content {
		height: 100%;

		.cont-box {
			.top-box {
				padding: 30rpx 30rpx 0 30rpx;
				width: 100%;
				background-color: #f5f5f5;

				.my-integral {
					height: 200rpx;
					box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
					background: linear-gradient(#FF5C03, #E2C99E);
					border-radius: 30rpx;
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					padding: 30rpx;

					.integralbtn {
						font-size: 24rpx;
						font-family: PingFang SC;
						color: #fff;
						margin-left: 16rpx;
						text-decoration: underline;
					}

					.btn {
						margin-bottom: 30rpx;
						background-color: #fff;
						border-radius: 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 10rpx 15rpx;
						font-size: 20upx;
						font-family: PingFang SC;
						color: #FF5C03;
					}

					.left {
						.label {
							font-size: 28upx;
							font-family: PingFang SC;
							color: #fff;
						}

						.integral {
							font-weight: bold;
							font-size: 40upx;
							font-family: PingFang SC;
							color: #fff;
						}
					}

					.btn-box {
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: flex-start;
					}
				}

				.tabs {
					height: 88rpx;
				}
			}

			.integral-box {
				padding: 0 30rpx 30rpx 30rpx;
				display: flex;
				align-items: flex-start;
				justify-content: flex-start;
				flex-wrap: wrap;

				.item {
					box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
					background-color: #fff;
					width: calc(50% - 20rpx);
					border-radius: 15rpx;
					margin: 10rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: flex-start;

					&:last-child {}

					.top {
						width: 100%;
						height: 300rpx;

						image {
							border-radius: 15rpx 15rpx 0rpx 0rpx;
							width: 100%;
							height: 300rpx;
						}

					}

					.bottom {
						width: 100%;
						padding: 15rpx;

						.title {
							font-weight: bold;
							font-size: 28upx;
							font-family: PingFang SC;
							color: #111111;
						}

						.price-box {
							margin-top: 10rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							width: 100%;

							.price {
								padding: 5rpx 10rpx;
								background-color: #FF5C03;
								border-radius: 30rpx;
								font-size: 20upx;
								font-family: PingFang SC;
								color: #ffffff;
							}

							.count {
								font-size: 24upx;
								font-family: PingFang SC;
								color: #333333;
							}

						}
					}
				}
			}
		}
	}
</style>