java-mall-app/activity/giftbag/list.vue

<template>
	<view class="page">
		<view class="m-coupon-list">
			<block v-if="(giftbagList.length>0)">
				<navigator :url="'/activity/giftbag/detail?aid=' + item.activity_id " class="m-coupon-item" v-for="(item, index) in giftbagList" :key="index">
					<view class="m-activity-image">
						<image :src='(item.activity_rule.giftbag_image)' style="width: 100%;height: 100%;"></image>
					</view>
					<view class="m-activity-info">
						<view class="m-activity-title">
							<label>{{(item.activity_rule.activity_bag_category)}}</label>
						</view>
						<view class="m-activity-tips">
							<label>{{(item.activity_name)}}</label>

							<label class="gift-rule" style="float: right">
								{{ __(' 套餐价 ') }}<span class="ap">{{ __('￥') }}{{ item.activity_rule.giftbag_amount }}</span>
							</label>
						</view>
					</view>

				</navigator>
				<view class="m-loading-box">
					<block v-if="(ispage1)">
						<view class="u-loadmore">
							<label class="u-loading"></label>
							<text class="u-loadmore-tips">{{__('正在加载')}}</text>
						</view>
					</block>
					<block v-else>
						<view class="u-loadmore u-loadmore-line">
							<text class="u-loadmore-tips">{{__('没有更多数据啦！')}}</text>
						</view>
					</block>
				</view>
			</block>
			<view class="m-nullcontent" v-else>
				<view class="m-nullpage-middle">
					<label class="iconfont icon-meiyougengduo"></label>
					<view class="m-null-tip">
						<text>{{__('亲~什么都没有')}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $ from "../../helpers/util";
	import {
		mapState,
		mapMutations
	} from 'vuex'


	export default {
		data() {
			return {
				options: {},
				ispage: false,
				giftbagList: [],
				Coupons: [],
				flag: true,
				Id: 0,
				Code: "",
				index: 0,
				needed_point: 0,
				store_id: 0,
				activity_state: 1,
				page: 1,

				isdata: false,
			};
		},

		computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
		onLoad: function(options) {
			uni.setNavigationBarTitle({
				title: this.__('礼包专区')
			});

			this.setData({
				options: options,
			})
			var that = this;
			this.getGiftbaglist()
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			this.scrollbottom();
		},
		methods: {
			...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),



			getGiftbaglist: function() {

				var params = {

					activity_type_id: this.StateCode.ACTIVITY_TYPE_GIFTBAG,
					activity_state: this.activity_state,
					page: this.page
				};

				var that = this;
				that.$.request({
					url: this.Config.URL.store.activity,
					data: params,
					// ajaxCache: {
					// 	timeout: this.Config.CACHE_EXPIRE
					// },
					success: function(data, status, msg, code) {

						if (200 == status && data.items.length > 0) {
							if (data.page >= data.total) {
								that.setData({
									flag: false,
									ispage: false,
									giftbagList: that.giftbagList.concat(data.items),
								})
							} else {
								that.setData({
									flag: true,
									ispage: true,
									giftbagList: that.giftbagList.concat(data.items),
								})
							}

							that.setData({
								isdata: true
							})

						} else {
							that.setData({
								flag: false,
								ispage: false,
								isdata: false
							})
						}
					},
					fail: function(data) {
						that.setData({
							flag: false,
							ispage: false
						})
					}
				});
			},

			scrollbottom: function(e) {
				if (this.flag) {
					var that = this;
					that.setData({
						flag: false
					}), clearTimeout(n);

					var post = this.post;
					/*
			        post.sidx = 'product_unit_price';
			        post.sord = this.sort == 1 ? 'DESC' : 'ASC';
					*/
					post.curpage = parseInt(that.post.curpage) + 1;

					var n = setTimeout(function() {
						that.setData({
								post: post
							}),
							that.GetPlist();
					}, 500);
				}
			},





		}
	}
</script>



<style lang="scss">
	@import "../../styles/_variables";

	.m-coupon-list {
		// margin-top: 36rpx
	}

	.m-coupon-item {
		width: 710rpx;
		height: 448rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 4rpx rgba(0, 0, 0, 0.16);
		opacity: 1;
		border-radius: 16rpx;
		margin: 24rpx 20rpx;
		overflow: hidden;
	}

	.m-activity-image {
		width: 100%;
		height: 328rpx;
		background: rgba(0, 0, 0, 0);
		opacity: 1;
		border-radius: 16px 16rpx 0px 0px;

	}

	.m-activity-info {
		padding: 16rpx 20rpx;
	}

	.m-activity-title {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 42rpx;
		color: #002951;
		opacity: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

	}

	.m-activity-tips {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #002951;
		opacity: 1;
		//margin-top: 8rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding: 10px;
	}

	.price-content-box {
		position: absolute;
		left: -35rpx;
		text-align: center;
		width: 220rpx;
	}

	.price-content-box label {
		font-size: 32rpx;
	}

	.closeRPK {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		left: 50%;
		margin-left: -30rpx;
		bottom: -80rpx;
	}

	.ap {
		color: red;
		font-size: 16px;
		font-weight: bold;
	}
</style>