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

78
src/components/coupon/Coupon.vue Normal file
View File

@ -0,0 +1,78 @@
<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" v-if="showChecked">
<wd-radio :value="coupon.id" shape="dot" :disabled="!canUse"></wd-radio>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup name="Coupon">
/**
* Coupon 优惠券组件
* @description 展示优惠券信息
*/
defineProps<{
coupon: {
id: number
amount: number
limit: number
expire: string
}
canUse: boolean
showChecked: 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>

49
src/components/coupon/GroupCoupon.vue Normal file
View File

@ -0,0 +1,49 @@
<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/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">
/**
* GroupCoupon 团购券组件
* @description 展示团购券信息
*/
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>