2020-10-12

<scroll-view scroll-x="true" class="scroll-tab">
            <div :class="type * 1 == 0 ? 'tab_selete' : 'tab_default'" @click="type = 0">
                <div>未使用</div>
            </div>
            <div :class="type * 1 == 1 ? 'tab_selete' : 'tab_default'" @click="type = 1">
                <div>已使用</div>
            </div>
            <div :class="type * 1 == 2 ? 'tab_selete' : 'tab_default'" @click="type = 2">
                <div>已过期</div>
            </div>
        </scroll-view>

监听type值

watch: {
            'type'(val) {
                this.initializePage(true)   
            }
        },
data(){
      return{
          type: 0, //类型     0： 未使用  1：已使用  2：已过期
        }
  }
methosd:{
    //我的优惠券列表
            apiPortalUserCouponGetListByCon() {
                this.$api.apiPortal_userCoupon_getListByCon({
                    coupon_status: this.type,
                    page: this.page //页数
                }, res => {
                    if (res.ret.data.length == 0 && this.page != 1) {
                        showToast('已展示全部优惠劵');
                    } else {
                        this.user_coupon.push.apply(this.user_coupon, res.ret.data);
                        this.is_show_list = true
                    }

                    console.log("我的优惠券列表", res)
                })
            },  
}

style

    .tab_default {
        width: 35%;
        display: inline-block;
        text-align: center;
        line-height: 120rpx;
        color: #7b7b7b;
        font-size: 30rpx;
    }

    .tab_selete {
        width: 35%;
        display: inline-block;
        text-align: center;
        line-height: 120rpx;
        color: #fabf13;
        font-size: 30rpx;
    }

    .tab_selete div {
        display: inline-block;
        height: 106rpx;
        border-bottom: #fabf13 solid 4rpx;
    }

页面传参转换Boolean
将type=0 传给/shop/coupon/couponTypeList

    goCoupon(){
                this.$router.push({
                    path: '/shop/coupon/couponTypeList',
                    query:{
                        type:0
                    }
                });
            }

/shop/coupon/couponTypeList接收参数

    onLoad(data) {
            this.user_couponAll = data.type == 1 || data.type == '1'
            console.log("user_couponAll传值", data.type)
        },

            <div v-if="user_couponAll">
                <coupon-card :coupon-data="item.coupon" :coupon-status="item.coupon_status" @longtap.prevent="delect_goods(item.id)"></coupon-card>
            </div>
            <div v-else>
                <coupon-card :coupon-data="item.coupon" :coupon-status="item.coupon_status" :show-receive-button="true"
                 :is-user-select="true" @click-receive="clickRecive"></coupon-card>
            </div>

           data() {
            return {        
                user_couponAll: false, //payorder页面接收参数
            };
        },

企业微信截图_16025581334716.png