Files

92 lines
2.0 KiB
Vue
Raw Normal View History

2023-11-14 17:21:03 +08:00
<!--
@name: index
@author: kahu4
@date: 2023-10-31 11:05
@descriptionindex
@update: 2023-10-31 11:05
-->
<script setup>
import { useRouter } from "@/hooks/useRouter";
import { useDiscountCoupon } from "@/pages/discountCoupon/index.utils";
import CouponItem from "@/pages/discountCoupon/components/CouponItem.vue";
import Empty from "@/components/Empty/index.vue"
2023-11-17 20:55:32 +08:00
import { emptyCouponIcon } from "@/utils/images";
import ReturnTop from "@/components/ReturnTop/index.vue";
import { useScroll } from "@/hooks/useScroll";
2023-11-14 17:21:03 +08:00
const {goBack} = useRouter();
const {scrollTop} = useScroll()
2023-11-14 17:21:03 +08:00
const {
tabList,
tabCurrent,
handleTabsChange,
couponList,
showEmpty,
} = useDiscountCoupon()
</script>
<template>
<view class="discount-coupon">
<!-- tab -->
<view class="tabs-row">
<uv-tabs
:current="tabCurrent"
:list="tabList"
lineColor="#ee6d46"
:activeStyle="{color:'#ee6d46'}"
:itemStyle="{width:`calc( 100% / ${tabList.length} )`,'box-sizing':'border-box','height':'80rpx'}"
keyName="label"
@change="handleTabsChange"
/>
</view>
<!-- coupon list -->
<view class="coupon-box">
<template v-if="!showEmpty">
<view
class="coupon-list"
v-for="item in couponList">
2023-11-14 17:21:03 +08:00
<CouponItem
:coupons="item"
:tabType="tabCurrent"
/>
2023-11-17 20:55:32 +08:00
</view>
2023-11-14 17:21:03 +08:00
</template>
<Empty
2023-11-17 20:55:32 +08:00
:iconSrc="emptyCouponIcon"
2023-11-14 17:21:03 +08:00
v-else
>
您暂时没有可使用的优惠券~
</Empty>
</view>
2023-11-17 20:55:32 +08:00
<ReturnTop :scroll-top="scrollTop" />
2023-11-14 17:21:03 +08:00
</view>
</template>
<style
scoped
lang="scss"
>
.discount-coupon {
.tabs-row {
width: 100%;
box-sizing: border-box;
background: #fff;
position: sticky;
top: 0;
}
.coupon-box {
padding: 35rpx;
box-sizing: border-box;
width: 100%;
2023-11-17 20:55:32 +08:00
.coupon-list {
margin-bottom: 24rpx;
}
2023-11-14 17:21:03 +08:00
}
}
</style>