pcwl_yancheng/cheflinkuser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改样式

Browse Source
This commit is contained in:
ISFP_T
2026-04-11 11:55:03 +08:00
parent ef9210a567
commit ec9282a64f
59 changed files with 8708 additions and 2558 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages-store/pages/store/components/coupon-popup.vue
+138 -40
View File
@@ -57,17 +57,16 @@ function formatMoney(value: unknown) {
return n.toFixed(2)
}
function couponTitleText(item: any) {
function couponAmountText(item: any) {
const type = Number(item?.couponType)
const discountValue = Number(item?.discountValue)
// 标题保持原样：折扣券显示百分比，满减券只显示减免金额（不展示门槛）
if (type === 1) {
const pct = Number.isFinite(discountValue) ? Number(discountValue * 100).toFixed(0) : '0'
return `${pct}% ${t('pages-store.store.couponOff')}`
return `${pct}%`
}
return `$${formatMoney(discountValue)} ${t('pages-store.store.couponOff')}`
return `$${formatMoney(discountValue)}`
}
function couponBenefitText(item: any) {
@@ -91,44 +90,54 @@ function couponBenefitText(item: any) {
</script>
<template>
<wd-popup v-model="show" custom-style="border-radius:0;" position="bottom" @close="handleClose">
<view class="bg-#F5F5F5 px-32rpx pt-30rpx">
<view class="text-40rpx lh-40rpx text-#333 font-bold text-center mb-60rpx">{{ t('pages-store.store.claimCoupon') }}</view>
<scroll-view scroll-y class="h-1000rpx">
<template v-for="item in couponList" :key="item.id">
<view class="coupon-item h-328rpx flex flex-col mb-30rpx last:mb-0">
<view class="flex-1 pt-40rpx px-58rpx">
<view class="line-clamp-1 text-34rpx lh-34rpx text-#333 font-bold">
<!-- couponType 1-折扣券, 2-满减券-->
{{ couponTitleText(item) }}
<wd-popup v-model="show" custom-style="border-radius: 24rpx 24rpx 0 0;" position="bottom" @close="handleClose">
<view class="coupon-popup-wrap">
<view class="text-36rpx lh-36rpx text-#333 font-bold text-center pt-40rpx pb-36rpx">
{{ t('pages-store.store.claimCoupon') }}
</view>
<scroll-view scroll-y class="coupon-popup-list">
<view
v-for="item in couponList"
:key="item.id"
class="coupon-card"
>
<view class="coupon-card-body">
<!-- 左侧信息 -->
<view class="coupon-card-info">
<view class="coupon-card-amount">
<text class="coupon-amount-value">{{ couponAmountText(item) }}</text>
<text class="coupon-amount-label">{{ t('pages-store.store.couponOff') }}</text>
</view>
<view class="text-24rpx lh-32rpx text-#999 my-18rpx">
{{ t('pages-store.store.validDays') }}: {{ item.validDays }}{{ daySuffix(item.validDays) }}
</view>
<view class="text-24rpx lh-32rpx text-#999 my-18rpx">
<view class="coupon-card-desc">
{{ item.nameZh }}
<text class="ml-16rpx">{{ t('pages-store.store.validDays') }}:{{ item.validDays }}{{ daySuffix(item.validDays) }}</text>
</view>
<view class="text-28rpx lh-28rpx text-#333 flex items-center">
<view class="coupon-card-benefit">
<image
class="w-36rpx h-36rpx shrink-0 mr-10rpx"
src="@img/chef/106.png"
class="coupon-benefit-icon"
src="@img/chef/106.png"
></image>
{{ t('pages-store.store.get') }} {{ couponBenefitText(item) }}
<template v-if="Number(item?.couponType) === 1"> {{ t('pages-store.store.couponOff') }}</template>
<text>{{ t('pages-store.store.get') }} {{ couponBenefitText(item) }}</text>
</view>
</view>
<template v-if="item.userCouponVo">
<view class="h-86rpx bg-#e6e6e6 lh-84rpx text-center text-28rpx text-#fff rounded-br-18rpx rounded-bl-18rpx">
{{ t('pages-store.store.claimed') }}
</view>
</template>
<template v-else>
<view @click="confirmCoupon(item)" class="h-84rpx lh-84rpx text-center text-28rpx text-#fff">
{{ t('pages-store.store.claimNow') }}
</view>
</template>
<!-- 右侧按钮 -->
<view
v-if="item.userCouponVo"
class="coupon-claim-btn coupon-claim-btn--disabled"
>
{{ t('pages-store.store.claimed') }}
</view>
<view
v-else
class="coupon-claim-btn"
@click="confirmCoupon(item)"
>
{{ t('pages-store.store.claimNow') }}
</view>
</view>
</template>
</view>
</scroll-view>
<view :style="[configStore.iosSafeBottomPlaceholder]" />
@@ -137,10 +146,99 @@ function couponBenefitText(item: any) {
</template>
<style scoped lang="scss">
.coupon-item {
background-image: url('@img/chef/103.png');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
.coupon-popup-wrap {
background: #F5F5F5;
padding: 0 32rpx;
}
</style>
.coupon-popup-list {
max-height: 860rpx;
padding-bottom: 30rpx;
}
.coupon-card {
background: #fff;
border-radius: 16rpx;
border: 2rpx solid #F5D0B8;
margin-bottom: 24rpx;
overflow: hidden;
&:last-child {
margin-bottom: 0;
}
}
.coupon-card-body {
display: flex;
align-items: center;
padding: 32rpx;
}
.coupon-card-info {
flex: 1;
min-width: 0;
padding-right: 24rpx;
}
.coupon-card-amount {
display: flex;
align-items: baseline;
margin-bottom: 16rpx;
}
.coupon-amount-value {
font-size: 48rpx;
line-height: 56rpx;
font-weight: bold;
color: #CE7138;
}
.coupon-amount-label {
font-size: 26rpx;
line-height: 26rpx;
color: #CE7138;
font-weight: 500;
margin-left: 10rpx;
}
.coupon-card-desc {
font-size: 24rpx;
line-height: 32rpx;
color: #999;
margin-bottom: 14rpx;
}
.coupon-card-benefit {
font-size: 24rpx;
line-height: 32rpx;
color: #333;
display: flex;
align-items: center;
}
.coupon-benefit-icon {
width: 32rpx;
height: 32rpx;
flex-shrink: 0;
margin-right: 8rpx;
}
.coupon-claim-btn {
flex-shrink: 0;
min-width: 140rpx;
height: 68rpx;
line-height: 68rpx;
text-align: center;
background: #CE7138;
color: #fff;
font-size: 26rpx;
font-weight: 500;
border-radius: 12rpx;
padding: 0 24rpx;
&--disabled {
background: #E6E6E6;
color: #999;
}
}
</style>