完善页面

2025-09-18 17:30:41 +08:00
parent e9f804b373
commit 864c40aa3a
26 changed files with 1357 additions and 81 deletions
--- a/src/bundle/coupon/my-coupon.vue
+++ b/src/bundle/coupon/my-coupon.vue
@ -0,0 +1,144 @@
+<route lang="jsonc" type="page">
+{
+    // "needLogin": true,
+    "layout": "default",
+    "style": {
+        "navigationStyle": "custom"
+    }
+}
+</route>
+
+<template>
+    <view class="pb-180rpx">
+        <view>
+			<navbar title="优惠券" custom-class='!bg-[#F6F7F8]'></navbar>
+		</view>
+
+        <view>
+            <view class="coupon-tab">
+                <wd-tabs v-model="tab" swipeable slidable="always" @click="myCoupon.handleChangeTab" :lazy="false"> 
+                    <wd-tab title="茶室优惠券">
+                        <view class="mx-30rpx">
+                            <view class="flex">
+                                <view v-for="(item, index) in tag" :key="index"
+                                    @click="myCoupon.handleChangeTag(item)"
+                                    class="font-400 text-28rpx leading-40rpx w-116rpx h-64rpx flex justify-center items-center border-2rpx border-solid rounded-12rpx mr-20rpx" 
+                                    :class="item === currentTag ? ' border-[#4C9F44] bg-[#F0F6EF] text-[#4C9F44]' : 'border-[#fff] bg-[#fff]'">
+                                        {{ item }}
+                                </view>
+                            </view>
+                
+                            <view class="mt-32rpx">
+                                <coupon
+                                    v-for="(item, index) in couponList"
+                                    :key="item.id"
+                                    :coupon="item"
+                                    canUse
+                                    :showChecked="false"
+                                    :checked="item.id === checkedId"
+                                    :onCheck="myCoupon.handleCouponCheck"
+                                    :class="index !== couponList.length - 1 ? 'mb-20rpx' : ''"
+                                ></coupon>
+                            </view>
+                        </view>
+                    </wd-tab>
+                    <wd-tab title="茶艺师优惠券">
+                        <view class="mx-30rpx">
+                            <view class="flex">
+                                <view v-for="(item, index) in tag" :key="index"
+                                    @click="myCoupon.handleChangeTag(item)"
+                                    class="font-400 text-28rpx leading-40rpx w-116rpx h-64rpx flex justify-center items-center border-2rpx border-solid rounded-12rpx mr-20rpx" 
+                                    :class="item === currentTag ? ' border-[#4C9F44] bg-[#F0F6EF] text-[#4C9F44]' : 'border-[#fff] bg-[#fff]'">
+                                        {{ item }}
+                                </view>
+                            </view>
+
+                            <view class="mt-32rpx">
+                                <coupon
+                                    v-for="(item, index) in couponList"
+                                    :key="item.id"
+                                    :coupon="item"
+                                    canUse
+                                    :showChecked="false"
+                                    :checked="item.id === checkedId"
+                                    :onCheck="myCoupon.handleCouponCheck"
+                                    :class="index !== couponList.length - 1 ? 'mb-20rpx' : ''"
+                                ></coupon>
+                            </view>
+                        </view>
+                    </wd-tab>
+                </wd-tabs>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts" setup>
+    import {ref} from 'vue'
+    import Coupon from '@/components/coupon/Coupon.vue'
+    import GroupCoupon from '@/components/coupon/GroupCoupon.vue'
+
+    // 
+    const tab = ref<number>(0)
+    const tag = ref<Array<string>>(['全部', '快过期', '已使用'])
+    const currentTag = ref<string>('全部')
+
+    const couponType = ref<number>(2) // couponType 1:优惠券 2:团购券
+	const OSS = inject('OSS')
+
+    const couponList = ref([
+        { id: 1, amount: 20, limit: 100, expire: '2024.08.20' },
+        { id: 2, amount: 10, limit: 50, expire: '2024.08.25' }
+    ])
+    const checkedId = ref<number>(0)
+
+    const unCouponList = ref([
+        { id: 1, amount: 20, limit: 100, expire: '2024.08.20' },
+        { id: 2, amount: 10, limit: 50, expire: '2024.08.25' }
+    ])
+
+    onLoad((args) => {
+        if (args.type) {
+            couponType.value = args.type
+        }
+    })
+
+    const myCoupon = {
+        // 切换tab
+        handleChangeTab: (index: number) => {
+            tab.value = index
+            currentTag.value = '全部'
+        },
+
+        // 切换tag
+        handleChangeTag: (item: string) => {
+            currentTag.value = item
+            console.log("🚀 ~ currentTag.value :", currentTag.value )
+        },
+
+        // 选择优惠券-保留这个函数，暂时用不着
+        handleCouponCheck: (id: number) => {
+            checkedId.value = id
+        }
+    }
+</script>
+
+<style lang="scss">
+    page {
+        background-color: $cz-page-background;
+    }
+
+    .coupon-tab {
+        :deep() {
+            .wd-tabs,
+            .wd-tabs__nav,
+            .wd-tabs__line {
+                background-color: transparent;
+            }
+
+            .wd-tabs__nav-item.is-active {
+                font-size: 32rpx !important;
+            }
+        }
+    }
+</style>