新增茶艺师专用的优惠券

src/bundle_b/pages/tea-specialist/coupon.vue

@@ -0,0 +1,159 @@
+<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="mt-30rpx">
+                <!-- 优惠券 -->
+                <view class="mx-30rpx">
+                    <view class="mx30rpx">
+                        <text class="text-[#303133] font-bold text-30rpx leading-42rpx">可用优惠券</text>
+                        <text class="text-[#606266] font-400 text-28rpx leading-40rpx ml-24rpx">{{ couponList.use.length }}张</text>
+                    </view>
+                    <view class="mt-28rpx radio">
+                        <wd-radio-group v-model="checkedId" size="large" checked-color="#4C9F44">
+                            <coupon
+                                v-for="(item, index) in couponList.use"
+                                :key="item.id"
+                                :coupon="item"
+                                canUse
+                                showChecked
+                                :checked="item.id === checkedId"
+                                :onCheck="Coupons.handleCheck"
+                                couponType="coupon"
+                                :class="index !== couponList.use.length - 1 ? 'mb-20rpx' : ''"
+                            ></coupon>
+                        </wd-radio-group>
+                    </view>
+                </view>
+                <!-- <view class="mx-30rpx">
+                    <view class="mx30rpx">
+                        <text class="text-[#303133] font-bold text-30rpx leading-42rpx">不可用优惠券</text>
+                        <text class="text-[#606266] font-400 text-28rpx leading-40rpx ml-24rpx">{{ couponList.no_use.length }}张</text>
+                    </view>
+                    <view class="mt-28rpx radio">
+                        <wd-radio-group v-model="checkedId" size="large" checked-color="#4C9F44">
+                            <coupon
+                                v-for="(item, index) in couponList.no_use"
+                                :key="item.id"
+                                :coupon="item"
+                                :canUse="false"
+                                showChecked
+                                couponType="coupon"
+                                :checked="item.id === checkedId"
+                                :onCheck="Coupons.handleCheck"
+                                :class="index !== couponList.no_use.length - 1 ? 'mb-20rpx' : ''"
+                            ></coupon>
+                        </wd-radio-group>
+                    </view>
+                </view> -->
+            </view>
+        </view>
+
+        <view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff] flex justify-between items-center" :style="{ height: '140rpx'}">
+            <view class="ml-60rpx text-[#121212] text-24rpx leading-34rpx">已选择{{ checkedId ? 1 : 0 }}张</view>
+            <view class="mr-30rpx">
+                <wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx' @click="Coupons.handleConfirmCoupon">确定</wd-button>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts" setup>
+    import Coupon from '@/components/coupon/Coupon.vue'
+    import { getTeaSpecialistCoupons } from '@/api/tea-specialist'
+    import { getTeaRoomGroupCouponList } from '@/api/tea-room'
+    import type { IUserCouponListResult } from '@/api/types/user'
+    import { router } from '@/utils/tools'
+    import { CouponType } from '@/utils/coupon'
+
+    const couponType = ref<number>(2) // couponType 1:优惠券 2:团购券
+
+    const couponList = ref<IUserCouponListResult>({
+        no_use: [],
+        use: []
+    })
+    const groupCouponList = ref<Array<any>>([])
+    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' }
+    ])
+
+    const storeId = ref<number>(0) // 门店ID
+    const teaRoomId = ref<number>(0) // 包间ID
+    const couponId = ref<number>(0) // 选中的优惠券ID
+    
+    onLoad(async (args) => {
+        teaRoomId.value = args.id
+        storeId.value = args.storeId || 0
+        checkedId.value = args.couponId || 0
+
+        await Coupons.handleInitCoupon()
+        checkedId.value = Number(args.couponId) || 0
+    })
+
+    const Coupons = {
+        /**
+         * 初始化优惠券列表
+         */
+        handleInitCoupon: async () => {
+            const res = await getTeaSpecialistCoupons()
+            const coupon = res.map( item => {
+                return {
+                    ...item,
+                    user_coupon_id: item.id,
+                }
+            })
+            couponList.value.use = coupon
+            console.log("🚀 ~ couponList.value.use:", couponList.value.use)
+        },
+
+        /**
+         * 选择优惠券
+         * @param id 优惠券ID
+         */
+        handleCheck: (id: number) => {
+            checkedId.value = id
+        },
+
+        /**
+         * 确认选择优惠券
+         */
+        handleConfirmCoupon: () => {
+            let coupon = null
+            coupon = couponList.value.use.find(item => {
+                return item.user_coupon_id === checkedId.value
+            })
+            uni.$emit('chooseCoupon', { coupon })
+            router.navigateBack()
+        }
+    }
+</script>
+
+<style lang="scss">
+    page {
+        background-color: $cz-page-background;
+    }
+
+    .radio {
+        :deep() {
+            .wd-radio-group {
+                background-color: transparent !important;
+            }
+        }
+    }
+</style>