237 lines
9.8 KiB
Vue
237 lines
9.8 KiB
Vue
<route lang="jsonc" type="page">
|
|
{
|
|
"needLogin": true,
|
|
"layout": "default",
|
|
"style": {
|
|
"navigationStyle": "custom"
|
|
}
|
|
}
|
|
</route>
|
|
|
|
<template>
|
|
<view class="pb-180rpx">
|
|
<view>
|
|
<navbar :title="couponType == 1 ? '优惠券' : '团购券'" custom-class='!bg-[#F6F7F8]'></navbar>
|
|
</view>
|
|
|
|
<view>
|
|
<view class="mt-30rpx">
|
|
<view v-if="couponType == 1">
|
|
<!-- 优惠券 -->
|
|
<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="false"
|
|
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 v-if="couponType == 2">
|
|
<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">{{ groupCouponList.length }}张</text>
|
|
</view>
|
|
<view class="mt-28rpx radio">
|
|
<wd-radio-group v-model="checkedId" size="large" checked-color="#4C9F44">
|
|
<group-coupon
|
|
v-for="(item, index) in groupCouponList"
|
|
:key="item.id"
|
|
:coupon="item"
|
|
canUse
|
|
couponType="groupCoupon"
|
|
:checked="item.id === checkedId"
|
|
:onCheck="Coupons.handleCheck"
|
|
:class="index !== groupCouponList.length - 1 ? 'mb-20rpx' : ''"
|
|
></group-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">2张</text>
|
|
</view>
|
|
<view class="mt-28rpx radio">
|
|
<wd-radio-group v-model="checkedId" size="large" checked-color="#4C9F44">
|
|
<group-coupon
|
|
v-for="(item, index) in unCouponList"
|
|
:key="item.id"
|
|
:coupon="item"
|
|
:canUse="false"
|
|
:checked="item.id === checkedId"
|
|
:onCheck="Coupons.handleCheck"
|
|
:class="index !== couponList.length - 1 ? 'mb-20rpx' : ''"
|
|
></group-coupon>
|
|
</wd-radio-group>
|
|
</view>
|
|
</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 GroupCoupon from '@/components/coupon/GroupCoupon.vue'
|
|
import { getCoupons } from '@/api/user'
|
|
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 useCoupon = ref<number>(0)
|
|
// 不可用优惠券数量
|
|
const unUseCoupon = ref<number>(0)
|
|
|
|
const groupCouponList = ref<Array<any>>([])
|
|
const checkedId = ref<number>(0)
|
|
|
|
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
|
|
couponType.value = args.type // 1:优惠券 2:团购券
|
|
|
|
// 初始化优惠券数据
|
|
if (args.id && args.numbers && args.type == 1) {
|
|
// 获取到包间ID和预定了几个小时
|
|
await Coupons.handleInitCoupon(args.price)
|
|
checkedId.value = Number(args.couponId) || 0
|
|
|
|
} else if (args.id && args.type == 2) {
|
|
await Coupons.handleInitGroupCoupon(args.id, args.numbers)
|
|
checkedId.value = Number(args.groupCouponId) || 0
|
|
console.log("🚀 ~ checkedId.value :", checkedId.value )
|
|
}
|
|
})
|
|
|
|
const Coupons = {
|
|
/**
|
|
* 初始化优惠券列表
|
|
* @param id 包间ID
|
|
* @param numbers 预定时长
|
|
*/
|
|
handleInitCoupon: async (price: number) => {
|
|
const res = await getCoupons({type_id: 2, price}) // 1茶艺师 2茶室 3 个人中心 4 茶艺师套餐
|
|
// couponList.value = res
|
|
useCoupon.value = res.count.yes_use
|
|
unUseCoupon.value = res.count.no_use
|
|
|
|
if (res.result.length > 0) {
|
|
couponList.value.use = res.result.filter(item => item.is_use == 0)
|
|
couponList.value.no_use = res.result.filter(item => item.is_use == 1)
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 初始化团购券列表
|
|
*/
|
|
handleInitGroupCoupon: async (id: number, numbers: number) => {
|
|
const res = await getTeaRoomGroupCouponList({store_id: storeId.value, room_id: teaRoomId.value})
|
|
groupCouponList.value = res.list
|
|
},
|
|
|
|
/**
|
|
* 选择/取消选择优惠券
|
|
* @param id 优惠券ID
|
|
*/
|
|
handleCheck: (id: number) => {
|
|
// 如果是优惠券的话则是可以取消选择
|
|
if (couponType.value == 1 && checkedId.value === id) {
|
|
checkedId.value = 0 // 再次点击已选中时取消选择
|
|
} else {
|
|
checkedId.value = id
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 确认选择优惠券
|
|
*/
|
|
handleConfirmCoupon: () => {
|
|
let coupon = null
|
|
|
|
if (checkedId.value > 0) {
|
|
if (couponType.value == CouponType.Discount) {
|
|
coupon = couponList.value.use.find(item => item.id === checkedId.value)
|
|
} else {
|
|
coupon = groupCouponList.value.find(item => item.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>
|