yshop-pro-uniapp/pages/discountCoupon/index.vue

<!--
    @name: index
    @author: kahu4
    @date: 2023-10-31 11:05
    @description：index
    @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"
import { emptyCouponIcon } from "@/utils/images";
import ReturnTop from "@/components/ReturnTop/index.vue";
import { useScroll } from "@/hooks/useScroll";

const {goBack} = useRouter();
const {scrollTop} = useScroll()

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">
          <CouponItem
              :coupons="item"
              :tabType="tabCurrent"
          />
        </view>
      </template>
      <Empty
          :iconSrc="emptyCouponIcon"
          v-else
      >
        您暂时没有可使用的优惠券~
      </Empty>
    </view>
    <ReturnTop :scroll-top="scrollTop" />
  </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%;

    .coupon-list {
      margin-bottom: 24rpx;
    }
  }
}


</style>