代码提交

pages/discountCoupon/index.vue

@@ -0,0 +1,83 @@
+<!--
+    @name: index
+    @author: kahu4
+    @date: 2023-10-31 11:05
+    @description：index
+    @update: 2023-10-31 11:05
+-->
+<script setup>
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useRouter } from "@/hooks/useRouter";
+
+const {goBack} = useRouter();
+import { useDiscountCoupon } from "@/pages/discountCoupon/index.utils";
+import CouponItem from "@/pages/discountCoupon/components/CouponItem.vue";
+import Empty from "@/components/Empty/index.vue"
+import emptyIcon from '@/static/icon/empty/优惠券.png'
+
+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">
+        <template v-for="item in couponList">
+          <CouponItem
+              :coupons="item"
+              :tabType="tabCurrent"
+          />
+        </template>
+      </template>
+      <Empty
+          :iconSrc="emptyIcon"
+          v-else
+      >
+        您暂时没有可使用的优惠券~
+      </Empty>
+    </view>
+  </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%;
+  }
+}
+
+
+</style>