ysdH5/pages/giftPack/list.vue

<template>
    <view class="content">
		<!-- 卡片轮播 -->
		<view class="indexBanner">
		    <view class="banner">
		        <swiper class="banner-swiper" interval="5000" autoplay indicator-dots>
		            <swiper-item v-for="(item, idx) in adverts" :key="item.cover">
		                <image class="banner-img" :src="item.cover"></image>
		            </swiper-item>
		        </swiper>
		    </view>
		</view>
		
        <view class="special-list" v-if="giftPackArr.length > 0">
        	<navigator hover-class="none" :url="'buy?id=' + item.activity_month_id" class="special-label" v-for="(item, index) in giftPackArr" :key="index">
				<view class="special-rebate" v-if="item.label != null">{{item.label}}</view>
				<view class="welfareCont-top" >
					<view class="welfareCont-list-img" >
						<image :src="item.cover" mode="aspectFill"></image>
					</view>
				</view>
				<view class="special-text">
					<view class="nowrap special-name">{{item.title}}</view>
					<view class="special-tips">{{item.two_title}}</view>
				</view>
        	</navigator>
        </view>
        <!-- 列表为空 -->
        <view class="campusTips" v-else>
            <view class="campusTips-cont">
            	<image src="/static/img/giftPack-null.png" mode="aspectFill"></image>
            	<view>抱歉，暂无可购买权益</view>
            </view>
        </view>
    </view>
</template>

<script>
    import { index, monthsList } from '@/apis/interfaces/giftPack'
    export default {
        data() {
            return {
				adverts     : [],
				giftPackArr : []
            }
        },
        
        // 生命周期函数--监听页面加载
        onLoad(options) {
			// 获取列表数据
			this.monthsInfo(options.id);
		},
    
        // 生命周期函数--监听页面显示
        onShow() {
            // 存储环境-月兑活动
            getApp().globalData.envType = 'giftPEnv'
            
            // 获取分类数据
            this.indexInfo();
        },
        methods: {
			// 分类数据
			indexInfo() {
				index().then(res=>{
					this.adverts     = res.adverts
				}).catch(err=>{})
			},
			
            // 列表数据
            monthsInfo(id) {
				monthsList(id).then(res=>{
					this.giftPackArr = res
				}).catch(err=>{})
            },
			
			// 可兑换信息展开
			moreClick(index) {
				this.giftPackArr[index].schemesShow = !this.giftPackArr[index].schemesShow
			},
			
			// 已兑换细信息展开
			moreCoupon(index) {
				this.couponArr[index].couponShow = !this.couponArr[index].couponShow
			},
        }
    }
</script>

<style lang="scss" scoped>
	.indexBanner {
		padding: 30rpx;
		box-sizing: border-box;
	}
	
	.banner {
	    position: relative;
	    padding-top: 48%;
	    width: 100%;
	    background: white;
	    overflow: hidden;
	    z-index: 99;
		border-radius: 10rpx;
	    .banner-swiper {
	        position: absolute;
	        top: 0;
	        left: 0;
	        width: 100%;
	        height: 100%;
	        .banner-img {
	            width: 100%;
	            height: 100%;
	            vertical-align: top;
	        }
	    }
	}
	
    .content {
        background: #fff;
        padding-bottom: 40rpx;
    	height: 100vh;
    	overflow-y: scroll;
    	box-sizing:  border-box
    }
	
	// banner
	.campusBanner {
	    width: 100%;
	}
	
	// 推荐
	.recommend {
	    overflow: hidden;
	    margin-top: -70rpx;
	    padding: 0 30rpx;
	    box-sizing: border-box;
	}
	
    // 列表
    .film {
        width: 100%;
        padding: 30rpx;
        box-sizing: border-box;
    }
	.special-list {
	    flex-wrap: wrap;
	    display: flex;
		padding: 0 30rpx 30rpx;
		box-sizing: border-box;
	}

	.special-label {
	    margin: 10rpx;
	    width: calc(50% - 20rpx);
	    height: 330rpx;
	    flex: 0 0 calc(50% - 20rpx);
	    border: 4rpx solid #fb9b00;
		background-color: #ffe0b8;
	    border-radius: 10rpx;
	    text-align: center;
	    padding: 20rpx 0;
	    box-sizing: border-box;
	    position: relative;
	}
	
	.special-label:last-child {
	    margin-bottom: 0;
	}
	
	.special-rebate {
	    position: absolute;
	    top: -30rpx;
	    right: 10rpx;
	    background: #fe0002;
	    color: #fff;
	    border-radius: 30rpx;
	    line-height: 52rpx;
	    height: 52rpx;
	    font-size: 26rpx;
	    padding: 0 20rpx;
	    font-weight: 600;
	}
	
	.welfareCont-top{
	    white-space: nowrap;
	    flex-direction: row;
	    align-items: center;
	    justify-content: space-around;
	    width: 100%;
	    padding: 0 10rpx;
	    box-sizing: border-box;
	    margin: 10rpx 0;
	}
	
	.welfareCont-list-img {
	    border: 2rpx solid #eccc69;
	    border-radius: 50%;
	    width: 100rpx;
	    height: 100rpx;
	    display: inline-block;
	    margin: 0 10rpx;
	    overflow: hidden;
	}
	
	.welfareCont-list-img image {
	    width: 100%;
	    height: 100%;
	}
	
	.campusTips {
		padding: 30rpx;
		box-sizing: border-box;
		.campusTips-cont {
			background-color: #fff;
			border-radius: 20rpx;
			text-align: center;
			padding: 80rpx;
			box-sizing: border-box;
			color: #9c7557;
			image {
				width: 340rpx;
				height: 280rpx;
				margin-bottom: 30rpx;
			}
			.campusTips-cont-go {
				display: inline-block;
				border: #9c7557 2rpx solid;
				line-height: 66rpx;
				padding: 0 40rpx;
				margin-top: 30rpx;
				font-size: 28rpx;
				border-radius: 90rpx;
			}
		}
	}
	
	.special-text {
	    padding: 0 15rpx;
	    box-sizing: border-box;
	    position: relative;
	    font-size: 26rpx;
	    border-top: 4rpx dashed #fb9b00;
	    margin-top: 20rpx;
	    padding-top: 20rpx;
	}
	
	.special-name {
	    color: #6f4a2d;
	    font-weight: 600;
	    font-size: 28rpx;
	}
	
	.special-tips {
	    background-color: #242424;
	    color: #fff;
	    border-radius: 10rpx;
	    padding: 4rpx 20rpx;
	    line-height: 46rpx;
	    height: 46rpx;
	    margin-top: 20rpx;
	    font-size: 24rpx;
	    display: inline-block;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}

</style>