完善功能

This commit is contained in:
wangxiaowei
2026-04-22 15:18:37 +08:00
parent f30cd438e0
commit 7aee11322a
6 changed files with 97 additions and 18 deletions

View File

@ -11,21 +11,49 @@
<template>
<view class="">
<!-- 领取优惠券 -->
<wd-overlay :show="showCoupon" @click="showCoupon = false">
<wd-overlay :show="showCoupon" @click="Index.handleCloseCoupon('coupon1')">
<view class="flex flex-col justify-center items-center h-100%">
<view class="w-652rpx h-590rpx relative" >
<wd-img :src="`${OSS}images/home/home_image10.png`" width="100%" height="100%"></wd-img>
<view class="absolute top-200rpx left-1/2 transform -translate-x-1/2 flex flex-col items-center">
<view class="mt-220rpx" @click.stop="showCoupon = false">
<view class="mt-220rpx" @click.stop="Index.handleCloseCoupon('coupon1')">
<view class="h-90rpx relative">
<wd-img :src="`${OSS}images/home/home_image9.png`" width="342rpx" height="90rpx"></wd-img>
<view class="absolute top-20rpx left-1/2 transform -translate-x-1/2 flex flex-col items-center" @click.stop="Index.handleToGetCoupon">立即领取</view>
<view class="absolute top-20rpx left-1/2 transform -translate-x-1/2 flex flex-col items-center" @click.stop="Index.handleToGetCoupon('coupon1')">立即领取</view>
</view>
</view>
</view>
</view>
<view class="mt-80rpx" @click.stop="showCoupon = false">
<view class="mt-80rpx" @click.stop="Index.handleCloseCoupon('coupon1')">
<wd-img :src="`${OSS}icon/icon_close2.png`" width="72rpx" height="72rpx"></wd-img>
</view>
</view>
</wd-overlay>
<!-- 领取20张20元优惠券 -->
<wd-overlay :show="showCoupon2" @click="Index.handleCloseCoupon('coupon2')">
<view class="flex flex-col justify-center items-center h-100%">
<view class="w-572rpx h-518rpx relative" >
<wd-img :src="`${OSS}images/home/home_image_20.png`" width="100%" height="100%"></wd-img>
<view class="absolute top-50rpx left-1/2 transform -translate-x-1/2">
<view class="text-[#FF5643] font-bold text-32rpx leading-42rpx text-center">通用优惠券</view>
<view class="text-[#E64545] font-bold flex items-end mt-20rpx">
<view class="text-52rpx mb-20rpx"></view>
<view class="text-102rpx">400</view>
</view>
</view>
<view class="absolute top-200rpx left-1/2 transform -translate-x-1/2 flex flex-col items-center">
<view class="mt-160rpx" @click.stop="Index.handleCloseCoupon('coupon2')">
<view class="h-90rpx relative" @click.stop="Index.handleToGetCoupon('coupon2')">
<wd-img :src="`${OSS}images/home/home_image9.png`" width="342rpx" height="90rpx"></wd-img>
<view class="absolute top-20rpx left-1/2 transform -translate-x-1/2 flex flex-col items-center">立即领取</view>
</view>
</view>
</view>
</view>
<view class="mt-80rpx" @click.stop="Index.handleCloseCoupon('coupon2')">
<wd-img :src="`${OSS}icon/icon_close2.png`" width="72rpx" height="72rpx"></wd-img>
</view>
</view>
@ -218,8 +246,12 @@
// 套餐列表
const teaPackageList = ref<Array<any>>([])
// 优惠券状态
const couponStatus = ref<any>({})
// 显示优惠券弹窗
const showCoupon = ref<boolean>(false)
const showCoupon = ref<boolean>(false)
// 显示第2种优惠券弹窗
const showCoupon2 = ref<boolean>(false)
onShow(async () => {
// if (canLocation) {
@ -251,8 +283,18 @@
if (userId) {
// 获取首页优惠券弹窗
const res = await getHomeCouponPopup()
couponStatus.value = res
if (Number(res.status) === 0) {
showCoupon.value = true
} else {
showCoupon.value = false
}
// 如果第一张优惠券的弹窗没有被触发(可能是因为用户关闭了第一个优惠券的弹窗),但是接口返回还可以领第二张优惠券,就继续显示第二个优惠券的弹窗(如果一下子都弹出来,用户可能会觉得烦,所以分开两个弹窗)
if (Number(res.status) !== 0 && Number(res.general_status) === 0 ) {
showCoupon2.value = true
} else {
showCoupon2.value = false
}
}
})
@ -411,10 +453,16 @@
/**
* 跳转领取优惠券页面
*/
handleToGetCoupon: async () => {
await claimIndexCoupon()
showCoupon.value = false
router.navigateTo('/bundle_b/pages/tea-specialist/list')
handleToGetCoupon: async (type: string) => {
// 1是茶艺师优惠券2是茶馆优惠券
if (type === 'coupon1') {
await claimIndexCoupon(1)
showCoupon.value = false
router.navigateTo('/bundle_b/pages/tea-specialist/list')
} else if (type === 'coupon2') {
await claimIndexCoupon(6)
showCoupon2.value = false
}
},
/**
@ -449,6 +497,10 @@
// const index = e.currentTarget.dataset.index
},
/**
* 排序
* @param type
*/
handleSort(type: 'smart' | 'distance' | 'sales' | 'open' | 'use') {
const userStore = useUserStore()
const userId = userStore.userInfo?.id
@ -477,7 +529,22 @@
*/
handlePreviewImage: (e: {index: number, item: any}) => {
previewImage(swiperList.value[e.index], swiperList.value)
}
},
/**
* 关闭优惠券
*/
handleCloseCoupon: (type: string) => {
if (type === 'coupon1') {
showCoupon.value = false
// 验证下,如果用户关闭了第一个优惠券的弹窗,如果还可以领第二个优惠券,就继续显示第二个优惠券的弹窗(如果一下子都弹出来,用户可能会觉得烦,所以分开两个弹窗)
if (Number(couponStatus.value.general_status) === 0 ) {
showCoupon2.value = true
}
} else if (type === 'coupon2') {
showCoupon2.value = false
}
}
}
</script>

View File

@ -116,7 +116,7 @@
<!-- <view class="mt-50rpx ml-24rpx">
<scroll-view class="w-[100%] whitespace-nowrap" :scroll-x="true" scroll-left="120">
<view class="scroll-item mr-20rpx" v-for="(item, index) in couponList" :key="index">
<view class="font-bold text-22rpx text-[#AF6400] leading-32rpx mt-6rpx">{{ item.type_id == 1 ? '茶艺师券' : '茶室券' }}</view>
<view class="font-bold text-22rpx text-[#AF6400] leading-32rpx mt-6rpx">{{ item.type_id == 0 ? '通用券' : (item.type_id == 1 ? '茶艺师券' : '茶室券') }}</view>
<view class="font-bold text-[#1C1C1D] leading-34rpx mt-8rpx">
<text class="text-24rpx">¥</text>
<text class="text-30rpx">{{ item.coupon_price }}</text>
@ -147,7 +147,7 @@
<view class="bg-white rounded-16rpx mx-30rpx mt-28rpx px-30rpx py-20rpx flex items-center justify-between" v-if="isLogin && couponList.length > 0">
<scroll-view class="w-[100%] whitespace-nowrap" :scroll-x="true" scroll-left="120">
<view class="scroll-item mr-20rpx" v-for="(item, index) in couponList" :key="index">
<view class="font-bold text-22rpx text-[#AF6400] leading-32rpx mt-6rpx">{{ item.type_id == 1 ? '茶艺师券' : '茶室券' }}</view>
<view class="font-bold text-22rpx text-[#AF6400] leading-32rpx mt-6rpx">{{ item.type_id == 0 ? '通用券' : (item.type_id == 1 ? '茶艺师券' : '茶室券') }}</view>
<view class="font-bold text-[#1C1C1D] leading-34rpx mt-8rpx">
<text class="text-24rpx">¥</text>
<text class="text-30rpx">{{ item.coupon_price }}</text>