video_mini/pagesA/integral/integralShop.vue

<template>
	<view class="page">
		<view class="navBack">
			<uni-icons class="backIcon" type="left" size="24" color="#ffffff" @click="navBack"></uni-icons>
			积分商城
		</view>
		<view class="integralbox">
			<view class="integral_top">
				<view class="ftw500" style="font-size: 72rpx;color: #333;">{{score}}</view>
				<view class="ftw500 ft12" style="color: #846666;">当前积分</view>
			</view>

			<view class="integral_bottom">
				<view class="flex wrap">
					<view class="integral_itme flex alcenter plr15" style="flex-direction: column"
						@click="navpointsdetail">
						<image class="barIcon" style="width: 64rpx;height: 64rpx;"
							src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/js.png" mode="scaleToFill">
						</image>
						<view class="">积分明细</view>
					</view>
					<view class="integral_itme flex alcenter plr15" style="flex-direction: column" @click="navOrder">
						<image class="barIcon" style="width: 64rpx;height: 64rpx;"
							src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/jsdd.png" mode="scaleToFill">
						</image>
						<view class="">订单记录</view>
					</view>
				</view>

				<view class="exchange" @click="shopjing">
					<view class="">兑换金豆</view>
				</view>
			</view>
		</view>

		<view class="exclusive mt12 mb16" @click="exclusive">
			<view class="exclusiveitem flex alcenter space">
				<view class="">恒泰业主专享</view>
				<image style="width: 20rpx;height: 20rpx;" src="https://yaohe666.com/static/jf/right_ionc.png" mode=""></image>
			</view>
		</view>

		<view class="articles">
			<integral-articles :Commodity="listData"></integral-articles>
		</view>
		<integralTrade ref="integral" @success="getuser"> </integralTrade>

	</view>
</template>

<script>
	import integralArticles from "@/pagesA/components/integralArticles.vue"
	import integralTrade from "@/pagesA/components/integralTrade.vue"
	export default {
		components: {
			integralArticles,
			integralTrade
		},
		data() {
			return {
				listData: [],
				Commodity: [],
				score:"",
				pages: {
					currentPage: 1,
					pageSize: 10,
					allPage: 1,
				},
			}
		},
		mounted() {
			this.Commodity = this.list
			this.getgoods()
		},
		onShow(){
			this.getuser()
		},
		methods: {
			navBack() {
				uni.navigateBack(1);
			},
			exclusive() {
				uni.navigateTo({ //专享
					url: '/pagesA/integral/Exclusive?name=' + "恒泰业主专享"
				})
			},
			navpointsdetail() { //明细
				uni.navigateTo({
					url: '/pagesA/integral/pointsdetail'
				})
			},
			navOrder() { //订单
				uni.navigateTo({
					url: '/pagesA/integral/Order'
				})
			},
			shopjing() {
				this.$refs.integral.pointsyesshop()
			},
           //获取 用户积分
			getuser() {
				this.$httpRequest({
					url: '/api/user/index',
					methods: "POST",
				}).then(res => {
					console.log(res.data.score);
					this.score = res.data.score
				}).catch(err => {
				})
			},
			//获取 商品
			getgoods(){
			let that = this;
				that.$httpRequest({
					url: '/api/delivery/goods/list',
					methods: "POST",
					data: {
						page: that.pages.currentPage,
						limit: that.pages.pageSize,
					},
				}).then(res => {
					if(res.code == 1){
						if (that.pages.currentPage == 1) {
							that.listData = res.data.list;
							that.pages.allPage = Math.ceil(res.data.total / that.pages.pageSize);
						} else {
							that.listData.push(...res.data.list)
						}
						this.pages.currentPage++;
					}
				}).catch(err => {
				
				})
			}
			




		},
		onReachBottom() {
		if (this.pages.currentPage <= this.pages.allPage) {
			this.getgoods();
		}
		}

	}
</script>

<style scoped>
	.page {
		background-image: url(https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/jf_bg.png);
		background-size: 100% 389rpx;
		height: 389rpx;
		padding-top: 44rpx;
		background-color: #F7F8F9;
	}

	.navBack {
		font-size: 32rpx;
		color: #ffffff;
		font-weight: 600;
		text-align: center;
		height: 128rpx;
		line-height: 128rpx;
		position: relative;
	}

	.backIcon {
		position: absolute;
		left: 16rpx;
		top: 0rpx;
	}

	.integralbox {
		background-image: url(https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/jb_bg1.png);
		background-repeat: no-repeat;
		background-size: 700rpx 392rpx;
		margin: 0 25rpx;
		height: 389rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.integral_top {
		margin-top: 36rpx;
		margin-left: 88rpx;
	}

	.integral_bottom {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		margin-bottom: 32rpx;
	}

	.exchange {
		width: 240rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #FFA100 0%, #FFD11E 100%);
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		margin-right: 34rpx;
	}

	.exclusiveitem {
		margin: 0 25rpx;
		width: 700rpx;
		height: 100rpx;
		padding: 0 24rpx 0 32rpx;
		background: linear-gradient(158deg, #FFF7EA 0%, #FFFFFF 100%);
		border-radius: 24rpx;
	}

	.articles {
		/* margin: 0 25rpx; */
	}
</style>