BlockChainH5/pages/user/couponsList.vue

<template>
    <view>
        <view class="couponsMargin" v-if="coupons.length > 0">
            <view class="coupons" v-for="(item, index) in coupons" :key="index" @click="$Router.push({name: 'myCouponsDte', params: {couponId: item.coupon_grant_id}})">
                <view class="coupons-flex">
                    <view class="item cover" v-if="item.type.value == 2">
                        <view class="cover-price" :class="{active : item.type.value == 2}">
                            {{ item.price }}
                        </view>
                        <view class="cover-text">
                            {{ item.type.text }}
                        </view>
                    </view>
                    <view class="item cover" v-else-if="item.type.value == 1">
                        <image class="cover-tips" src="/static/imgs/coupon-fu.png" mode=""></image>
                    </view>
                    <view class="item cover" v-else>
                        <image class="cover-tips" src="/static/imgs/coupon-ti.png" mode=""></image>
                    </view>
                    <view class="item mian">
                        <view class="title nowrap">{{ item.title }}</view>
                        <view class="time nowrap" v-if="item.type.value == 2">
                            {{ item.price_text }}
                        </view>
                        <view class="time nowrap">
                            {{ item.time.interval }}
                        </view>
                    </view>
                    <image v-if="item.status.status == 2" class="coupons-tips" src="/static/imgs/coupon_tips_00.png" mode="aspectFill"></image>
                    <image v-else-if="item.status.status == 3" class="coupons-tips" src="/static/imgs/coupon_tips_01.png" mode="aspectFill"></image>
                </view>
            </view>
        </view>
        
        <block v-else>
        	<view class="list-null">
        		<no-list name='no-counpon' txt="没有任何相关优惠券~" />
        	</view>
        </block>
    </view>
</template>

<script>
    import { userCouponList } from '@/apis/interfaces/user'
	export default {
		data() {
            return {
                coupons     : [] ,// 列表
                
                // 分页
                pages    : {}
            }
        },
        onShow() {
        	this.getCoupons()
        },
        methods:{
            // 数据列表
            getCoupons(){
            	userCouponList(this.$Route.query.couponId, {
            		status	: this.$Route.query.status
            	}).then(res => {
                    console.log(res)
            		this.coupons = res.data
            		this.pages   = res.page
            	}).catch(err => {
            		uni.showToast({
            			title: err.message,
            			icon : 'none'
            		})
            	})
            },
            
            // 选择类型
            onTabs(value){
            	if(value == this.tabsType) return
            	this.tabsType = value
            	this.getCoupons()
            },
            // 状态筛选
            onTabsType(val){
            	if(this.tabsStatus === val) return
            	this.tabsStatus = val
                this.tabsTime = '-'
            	this.getCoupons()
            },
            // 新状态筛选
            onTabsTime(val) {
                if(this.tabsTime === val) return
                this.tabsTime = val
                this.tabsStatus = '-'
                this.getCoupons()
            }
        }
    }
</script>

<style lang="scss" scoped>
    // 列表
    .couponsMargin {
        padding: 20rpx 0;
    }
    .coupons {
        padding: 0 $padding;
        box-sizing: border-box;
        margin-bottom: 30rpx;
        @extend .ios-bottom;
        .coupons-flex{
        	position: relative;
            background: white;
            box-shadow: 0 0 20rpx rgba(0, 0,0, .1);
            border-radius: $radius;
        	display: flex;
        	justify-content: space-between;
        	flex-wrap: wrap;
            padding: $padding 40rpx $padding 0;
            &.active {
                border-radius: $radius $radius 0 0;
            }
            .cover{
            	position: relative;
            	border-right: dashed 3rpx $border-color;
            	width: 160rpx;
            	text-align: center;
                .cover-price {
                    font-size: 38rpx;
                    font-weight: 600;
                    color: #ee4c47;
                    &.active {
                        margin-top: 20rpx;
                    }
                }
                .cover-text {
                    font-size: 24rpx;
                }
                .cover-tips {
                    width: 60rpx;
                    height: 60rpx;
                    margin-top: 15rpx;
                }
            }
            .mian{
            	justify-content: center;
            	width: calc(100% - 190rpx);
            	box-sizing: border-box;
            	@extend .vertical;
            	.title{
            		font-size: $title-size-lg;
            		line-height: 50rpx;
            		font-weight: bold;
            	}
            	.time, .tags{
            		color: $text-gray-m;
            		font-size: $title-size-m - 4;
            		line-height: 40rpx;
            	}
            	.tags{
            		margin-top: 10rpx;
            		text{
            			background: $border-color-lg;
            			color: $text-gray;
            			padding: 0 ($padding/2);
            			margin-right: ($margin/2);
            			&:last-child{
            				margin-right: 0;
            			}
            		}
            	}
            }
            
            .coupons-tips {
                position: absolute;
                top: 20rpx;
                right: 20rpx;
                width: 94rpx;
                height: 94rpx;
                z-index: 9;
            }
        }
        
        .couponMore {
            font-size: 28rpx;
            color: #686868;
            position: relative;
            height: 120rpx;
            &::after,
            &::before {
                position: absolute;
                content: '';
                height: 20rpx;
                border-radius: 10rpx;
                background: #fff;
                box-shadow: 0 0 20rpx rgba(0, 0,0, .1);
                z-index: 1;
                height: 30rpx;
            }
            &::after {
                width: calc(100% - 40rpx); 
                top: 70rpx;
                left: 20rpx;
            }
            
            &::before {
                width: calc(100% - 80rpx); 
                top: 90rpx;
                left: 40rpx;
            }
            .couponMore-text {
                display: flex;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                z-index: 1;
                height: 80rpx;
                border-radius: 0 0 10rpx 10rpx;
                line-height: 80rpx;
                padding: 0 30rpx;
                box-sizing: border-box;
                background: #fff;
                box-shadow: 0 0 10rpx rgba(0, 0,0, .1);
            }
            
            .couponMore-title {
                flex: 1;
            }
            
            .couponMore-arrow {
               position: absolute;
               right: $margin;
               top: 0;
               bottom: 0;
               @extend .vertical
            }
        }
    }
</style>