<template> <view class="bigBox"> <Tabs :list='list1' @changeTab="changeTab" :newIndex="current" /> <view> <swiper :current="current" class="swiper" @change="swiperChange"> <swiper-item> <view class="list"> <Ticket/> </view> </swiper-item> <swiper-item> <view class="list"> <Ticket v-for="(item,index) in nouserList" :key="index" :info="item" /> </view> </swiper-item> </swiper> </view> </view> </template> <script> import Ticket from '@/components/Ticket/index.vue' import Tabs from '@/components/Tabs/index.vue' export default { components: {Ticket,Tabs}, data() { return { list1: [ { name: "HOOLOO券", }, { name: "已使用/已失效", }, ], nouserList:[], current: 0, actionIndx:0 }; }, mounted(){ for(let i=0;i<2;i++){ this.nouserList.push({ status:2, // 0可使用 1不可使用/已过期/已失效 couponType:0, // 0满减 1折扣 2抵扣 typeDesc:'最大字数最大字', // 左上角文案描述 mjPrice:'30', // 满减金额 zkPrice:'7', // 折扣金额 dkPrice:'免单', // 抵扣金额 priceDesc:'满130可用', // 条件描述 checkStatus:false, // 优惠券选中状态 title:'最大字数最大字数最大', // 优惠券标题 time:['2022.07.24.17:20'], // 过期时间 shopList:['全门店可用'], // 可用门店 goodList:['全品类可用'], // 可用品类 useScence:['小程序下单可用'], // 使用场景 useDesc:['*不可与其他优惠券同时使用','*不可与门店优惠共享','*订单完成后选择退款,只退回实际支付金额,优惠券不予退回'], // 使用说明 zkRule:'整单最高抵扣50元', // 折扣规则 reson:'不可与已勾选券叠加使用' // 不可使用原因 }) } }, methods: { changeTab(current) { this.current = current; }, swiperChange(val){ this.current = val.detail.current; } }, }; </script> <style lang="scss" scoped> .bigBox { .swiper { background: #F8F8F8; height: calc(100vh - 64rpx); .list{ height: 100%; padding: 0rpx 32rpx; overflow-y: scroll; } } } </style>