59 lines
1.9 KiB
Vue
59 lines
1.9 KiB
Vue
<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="coupon.tea_store_group.img"></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">{{ coupon.tea_store_group.title }}</view>
|
||
<view class="text-26rpx text-[#6A6363] leading-36rpx mt-30rpx flex">
|
||
<view class="line-1">{{ coupon.store_msg.name }}</view>
|
||
<view class="mx-14rpx">|</view>
|
||
<view>{{ coupon.tea_store_group.hour }}小时</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">
|
||
/**
|
||
* GroupCoupon 团购券组件
|
||
* @description 展示团购券信息
|
||
*/
|
||
|
||
const OSS = inject('OSS')
|
||
defineProps<{
|
||
coupon: {
|
||
id: number
|
||
amount: number
|
||
limit: number
|
||
expire: string
|
||
group_id: number
|
||
tea_store_group: {
|
||
img: string
|
||
title: string
|
||
hour: string
|
||
}
|
||
store_msg: {
|
||
name: string
|
||
}
|
||
}
|
||
canUse: boolean
|
||
checked: boolean
|
||
onCheck: (id: number) => void
|
||
}>()
|
||
</script>
|
||
|
||
|
||
<script lang="ts">
|
||
export default {}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
</style>
|