修改代码
This commit is contained in:
wangxiaowei
@ -10,153 +10,103 @@
|
||||
|
||||
<template>
|
||||
<view class="pb-180rpx">
|
||||
<view>
|
||||
<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.value)"
|
||||
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.value === currentTag ? ' border-[#4C9F44] bg-[#F0F6EF] text-[#4C9F44]' : 'border-[#fff] bg-[#fff]'">
|
||||
{{ item.label }}
|
||||
</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.value)"
|
||||
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.value === currentTag ? ' border-[#4C9F44] bg-[#F0F6EF] text-[#4C9F44]' : 'border-[#fff] bg-[#fff]'">
|
||||
{{ item.label }}
|
||||
</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 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="false"
|
||||
: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>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {ref} from 'vue'
|
||||
import Coupon from '@/components/coupon/Coupon.vue'
|
||||
import GroupCoupon from '@/components/coupon/GroupCoupon.vue'
|
||||
import { getMyCoupons } from '@/api/user'
|
||||
import { getCoupons } from '@/api/user'
|
||||
import type { IUserCouponListResult } from '@/api/types/user'
|
||||
|
||||
//
|
||||
const tab = ref<number>(0)
|
||||
const tag = ref<Array<any>>([
|
||||
{label: '全部', value: 0 },
|
||||
{label: '已使用', value: 1 },
|
||||
{label: '快过期', value: 3 },
|
||||
])
|
||||
const currentTab = ref<number>(0)
|
||||
const currentTag = ref<number>(0)
|
||||
|
||||
const couponType = ref<number>(2) // couponType 1:优惠券 2:团购券
|
||||
const OSS = inject('OSS')
|
||||
|
||||
const couponList = ref<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' }
|
||||
])
|
||||
|
||||
onLoad((args) => {
|
||||
if (args.type) {
|
||||
couponType.value = args.type
|
||||
}
|
||||
|
||||
MyCoupon.handleInit()
|
||||
const couponList = ref<IUserCouponListResult>({
|
||||
no_use: [],
|
||||
use: []
|
||||
})
|
||||
|
||||
const MyCoupon = {
|
||||
// 可用优惠券数量
|
||||
const useCoupon = ref<number>(0)
|
||||
// 不可用优惠券数量
|
||||
const unUseCoupon = ref<number>(0)
|
||||
|
||||
const checkedId = ref<number>(0)
|
||||
|
||||
onLoad(async (args) => {
|
||||
// 获取到包间ID和预定了几个小时
|
||||
await Coupons.handleInitCoupon()
|
||||
})
|
||||
|
||||
const Coupons = {
|
||||
/**
|
||||
* 初始化优惠券列表
|
||||
* @param id 包间ID
|
||||
* @param numbers 预定时长
|
||||
*/
|
||||
handleInit: async () => {
|
||||
const res: any = await getMyCoupons({status: currentTag.value, type_id: currentTab.value == 0 ? 2 : 1})
|
||||
handleInitCoupon: async () => {
|
||||
const res = await getCoupons({type_id: 3, price: 0}) // 1茶艺师 2茶室 3 个人中心
|
||||
// couponList.value = res
|
||||
useCoupon.value = res.count.yes_use
|
||||
unUseCoupon.value = res.count.no_use
|
||||
|
||||
if (Array.isArray(res)) {
|
||||
res.map((res) => {
|
||||
couponList.value.push({
|
||||
id: res.coupon_id,
|
||||
coupon_price: res.userCouponType[0].coupon_price,
|
||||
use_price: res.userCouponType[0].use_price,
|
||||
title: res.userCouponType[0].title,
|
||||
effect_time: res.userCouponType[0].effect_time,
|
||||
user_coupon_id: res.coupon_id,
|
||||
expire: res.expire
|
||||
})
|
||||
})
|
||||
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)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 切换tab
|
||||
* @param item 切换项
|
||||
*/
|
||||
handleChangeTab: (item: {index: number}) => {
|
||||
currentTab.value = item.index
|
||||
currentTag.value = 0
|
||||
couponList.value = []
|
||||
MyCoupon.handleInit()
|
||||
},
|
||||
handleCheck: () => {
|
||||
|
||||
/**
|
||||
* 切换tag
|
||||
* @param item 切换项
|
||||
*/
|
||||
handleChangeTag: (item: number) => {
|
||||
currentTag.value = item
|
||||
couponList.value = []
|
||||
MyCoupon.handleInit()
|
||||
},
|
||||
|
||||
/**
|
||||
* 选择优惠券-保留这个函数，暂时用不着
|
||||
* @param id 切换项
|
||||
*/
|
||||
handleCouponCheck: (id: number) => {
|
||||
checkedId.value = id
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -166,17 +116,11 @@
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
|
||||
.coupon-tab {
|
||||
.radio {
|
||||
:deep() {
|
||||
.wd-tabs,
|
||||
.wd-tabs__nav,
|
||||
.wd-tabs__line {
|
||||
.wd-radio-group {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.wd-tabs__nav-item.is-active {
|
||||
font-size: 32rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user