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

修改分包页面

Browse Source
This commit is contained in:
wangxiaowei
2025-08-27 16:32:11 +08:00
parent c963ad1ca2
commit 03745bb676
17 changed files with 442 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/coupon/coupon.vue
View File

@ -0,0 +1,72 @@
<template>
<view class="mb-20rpx" @click="onCheck(coupon.id)">
<view class="coupon h-210rpx flex items-center">
<view class="w-260rpx h-[100%] rounded-l-16rpx rounded-tr-0 rounded-br-0 flex flex-col items-center justify-center" :class="canUse ? 'bg-[#4C9F44]' : 'bg-[#F2F2F2]'">
<view class="flex" :class="canUse ? 'text-[#fff]' : 'text-[#BFC2CC]'">
<view class="text-72rpx leading-100rpx">{{ coupon.amount }}</view>
<view class="text-32rpx leading-44rpx mt-40rpx ml-10rpx">元</view>
</view>
<view class="text-26rpx font-400 leading-36rpx text-center" :class="canUse ? 'text-[#fff]' : 'text-[#BFC2CC]'">满120元可用</view>
</view>
<view class="bg-[#fff] w-490rpx h-[100%] rounded-r-16rpx rounded-tl-0 rounded-bl-0 flex justify-between items-center">
<view class="ml-30rpx line-1">
<view class="text-34rpx leading-48rpx line-1" :class="canUse ? 'text-[#303133]' : 'text-[#909399]'">茶室优惠</view>
<view class="mt-40rpx text-[#909399] text-24rpx leading-34rpx" :class="canUse ? 'text-[#909399]' : 'text-[#BFC2CC]'">有效期至 2022-08-12</view>
</view>
<view class="h-100% mr-70rpx mt-58rpx">
<wd-radio :value="coupon.id" shape="dot" :disabled="!canUse"></wd-radio>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup name="groupCoupon">
defineProps<{
coupon: {
id: number
amount: number
limit: number
expire: string
}
canUse: boolean
checked: boolean
onCheck: (id: number) => void
}>()
</script>
<script lang="ts">
export default {}
</script>
<style lang="scss" scoped>
.coupon {
position: relative;
border-radius: 8px;
margin-right: 22rpx;
height: 100px;
}
.coupon::before,
.coupon::after {
content: "";
position: absolute;
top: 50%;
width: 32rpx;
/* 控制凹口大小 */
height: 32rpx;
background: #F6F7F9;
/* 与页面背景色一致 */
border-radius: 50%;
transform: translateY(-50%);
z-index: 2;
}
.coupon::before {
left: -16rpx;
}
.coupon::after {
right: -16rpx;
}
</style>

44
src/components/coupon/group-coupon.vue
View File

@ -0,0 +1,44 @@
<template>
<view class="p-30rpx rounded-16rpx mb-20rpx bg-white" @click="onCheck(coupon.id)">
<view class="flex justify-between items-start relative ">
<view class="w-180rpx h-180rpx">
<wd-img width="100%" height="100%" :src="`${OSS}images/home_image5.png`"></wd-img>
</view>
<view class="flex-1 ml-32rpx line-1" :class="canUse ? '' : 'opacity-40'">
<view class="text-32rpx text-[#303133] leading-44rpx line-1 w-350rpx">这是团购券套餐名称这是团购券套餐名称</view>
<view class="text-26rpx text-[#6A6363] leading-36rpx mt-30rpx flex">
<view class="line-1">这是商家名称这是商家名称这是商家名称这是商家名称这是商家名称</view>
<view class="mx-14rpx">|</view>
<view>{{ coupon.limit }}小时</view>
</view>
<view class="text-24rpx leading-34rpx text-[#909399] mt-16rpx">有效期：2025-01-01至2025-05-05</view>
</view>
<view>
<wd-radio :value="coupon.id" shape="dot" :disabled="!canUse"></wd-radio>
</view>
</view>
</view>
</template>
<script lang="ts" setup name="groupCoupon">
const OSS = inject('OSS')
defineProps<{
coupon: {
id: number
amount: number
limit: number
expire: string
}
canUse: boolean
checked: boolean
onCheck: (id: number) => void
}>()
</script>
<script lang="ts">
export default {}
</script>
<style lang="scss" scoped>
</style>