wangxiaowei/chazhi_h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善功能

Browse Source
This commit is contained in:
wangxiaowei
2025-10-25 17:33:08 +08:00
parent 87664ad114
commit 0abb527276
11 changed files with 354 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/bundle/coupon/coupon.vue
View File

@ -10,7 +10,7 @@
<template>
<view class="pb-180rpx">
<view>
<navbar :title="couponType == 1 ? '优惠券' : '团购券'" custom-class='!bg-[#F6F7F8]'></navbar>
<navbar :title="couponType == 1 ? '优惠券' : '团购券'" custom-class='!bg-[#F6F7F8]' :left-arrow="false"></navbar>
</view>
<view>
@ -20,19 +20,19 @@
<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>
<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"
v-for="(item, index) in couponList.use"
:key="item.id"
:coupon="item"
canUse
showChecked
:checked="item.id === checkedId"
:onCheck="coupons.handleCheck"
:class="index !== couponList.length - 1 ? 'mb-20rpx' : ''"
:onCheck="Coupons.handleCheck"
:class="index !== couponList.use.length - 1 ? 'mb-20rpx' : ''"
></coupon>
</wd-radio-group>
</view>
@ -40,73 +40,31 @@
<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>
<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 unCouponList"
v-for="(item, index) in couponList.no_use"
:key="item.id"
:coupon="item"
:canUse="false"
showChecked
:checked="item.id === checkedId"
:onCheck="coupons.handleCheck"
:class="index !== couponList.length - 1 ? 'mb-20rpx' : ''"
: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">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 couponList"
:key="item.id"
:coupon="item"
canUse
:checked="item.id === checkedId"
:onCheck="coupons.handleCheck"
:class="index !== couponList.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">已选择1张</view>
<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'>确定</wd-button>
<wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx' @click="Coupons.handleConfirmCoupon">确定</wd-button>
</view>
</view>
</view>
@ -116,31 +74,47 @@
import {ref} from 'vue'
import Coupon from '@/components/coupon/Coupon.vue'
import GroupCoupon from '@/components/coupon/GroupCoupon.vue'
import { getCoupons } from '@/api/user'
import type { IUserCouponListResult } from '@/api/types/user'
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 couponList = ref<IUserCouponListResult>({
no_use: [],
use: []
})
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
}
if (args.id && args.time) {
// 获取到茶艺师ID和预定了几个小时
Coupons.handleInit(args.id, args.time)
}
})
const coupons = {
handleCheck: (id: number) => {
const Coupons = {
// 初始化优惠券列表
handleInit: async (id: number, numbers: number) => {
const res = await getCoupons({id, numbers})
couponList.value = res
},
// 选择优惠券
handleCheck: (id: any) => {
checkedId.value = id
console.log("🚀 ~ checkedId.value :", checkedId.value )
},
// 确认选择优惠券
handleConfirmCoupon: () => {
const coupon = couponList.value.use.find(item => item.user_coupon_id === checkedId.value)
uni.$emit('chooseCoupon', { coupon })
uni.navigateBack()
}
}
</script>