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-09-24 12:52:45 +08:00
commit e9519b32db
277 changed files with 47487 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
src/bundle/coupon/coupon.vue Normal file
View File

@ -0,0 +1,160 @@
<route lang="jsonc" type="page">
{
"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">2张</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"
:key="item.id"
:coupon="item"
canUse
showChecked
:checked="item.id === checkedId"
:onCheck="coupons.handleCheck"
:class="index !== couponList.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">2张</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"
:key="item.id"
:coupon="item"
:canUse="false"
showChecked
:checked="item.id === checkedId"
:onCheck="coupons.handleCheck"
:class="index !== couponList.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="mr-30rpx">
<wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx'>确定</wd-button>
</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'
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 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
}
})
const coupons = {
handleCheck: (id: number) => {
checkedId.value = id
console.log("🚀 ~ checkedId.value :", checkedId.value )
}
}
</script>
<style lang="scss">
page {
background-color: $cz-page-background;
}
.radio {
:deep() {
.wd-radio-group {
background-color: transparent !important;
}
}
}
</style>