davy/zdtap-uniapp-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化扫码结果页面：1. 修复领取成功后的显示问题 2. 优化位置错误状态的图标显示 3. 调整领取成功状态下的活动信息显示

Browse Source
This commit is contained in:
davy 2025-04-09 16:49:43 +08:00
parent b0a688df36
commit d0c475f17e
1 changed files with 131 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

169
pagesActivity/scanResult.vue
View File

@ -58,6 +58,17 @@
</view> </view>
<view class="scan-result__content"> <view class="scan-result__content">
<view class="scan-result__section">
<text class="scan-result__section-title">领取信息</text>
<view class="benefit-card">
<view class="benefit-card__title">{{ beer.scanCoinCount }}枚（{{beer.brandName}}）品牌啤酒币已到账</view>
<text class="benefit-card__subtitle">品牌啤酒币可用于兑换好礼</text>
</view>
<view class="activity-info" v-if="selectedActivity">
<text class="activity-info__progress">距离目标达成还剩 {{ selectedActivity.remainingBeerCount }} 桶</text>
</view>
</view>
<view class="scan-result__section"> <view class="scan-result__section">
<text class="scan-result__section-title">商品详细</text> <text class="scan-result__section-title">商品详细</text>
<view class="product-card" v-if="beer"> <view class="product-card" v-if="beer">
@ -85,14 +96,6 @@
</view> </view>
</view> </view>
</view> </view>
<view class="scan-result__section">
<text class="scan-result__section-title">品牌福利</text>
<view class="benefit-card">
<view class="benefit-card__title">{{ beer.scanCoinCount}}枚（{{beer.brandName}}）品牌啤酒币已到账</view>
<text class="benefit-card__subtitle">品牌啤酒币可用于兑换好礼</text>
</view>
</view>
</view> </view>
<view class="scan-result__footer"> <view class="scan-result__footer">
@ -158,6 +161,11 @@
<!-- 待领取状态 --> <!-- 待领取状态 -->
<template v-if="info.qrcode.qrcodeStatus == 0"> <template v-if="info.qrcode.qrcodeStatus == 0">
<view class="scan-result__header scan-result__header--success">
<image src="/static/tick-circle.svg" class="scan-result__icon"></image>
<text class="scan-result__title">扫码成功</text>
</view>
<view class="scan-result__content"> <view class="scan-result__content">
<view class="scan-result__section"> <view class="scan-result__section">
<text class="scan-result__section-title">商品详细</text> <text class="scan-result__section-title">商品详细</text>
@ -196,8 +204,8 @@
</view> </view>
<view class="activity-notice" v-if="activitySum > 1"> <view class="activity-notice" v-if="activitySum > 1">
<image src="/static/warning.svg" mode="aspectFit"></image> <image src="/static/warning-2.png" mode="aspectFit"></image>
<text>该产品有多个进行中活动重叠，请选择要计入的活动</text> <text>该产品有多个进行中活动可选，请选择要计入的活动</text>
</view> </view>
<view class="scan-result__section" v-if="activity && activity.length > 0"> <view class="scan-result__section" v-if="activity && activity.length > 0">
@ -214,8 +222,7 @@
<text class="activity-item__title">{{ item.breweryName }}</text> <text class="activity-item__title">{{ item.breweryName }}</text>
</view> --> </view> -->
<view class="activity-item__tag-container"> <view class="activity-item__tag-container">
<text class="activity-item__tag activity-item__tag--store" v-if="item.activityType === 1">指定门店</text> <text class="activity-item__tag activity-item__tag--time" v-if="item.endDate">剩余{{getRemainingDays(item.endDate)}}天</text>
<text class="activity-item__tag activity-item__tag--new" v-if="item.activityType === 2">招募活动</text>
</view> </view>
<view class="activity-item__content"> <view class="activity-item__content">
<view class="activity-item__progress"> <view class="activity-item__progress">
@ -226,10 +233,6 @@
<text>时间：首次扫码开始累计</text> <text>时间：首次扫码开始累计</text>
<text class="activity-item__duration">{{item.duration}}天内</text> <text class="activity-item__duration">{{item.duration}}天内</text>
</view> </view>
<view class="activity-item__deadline" v-if="item.remainingDays">
<text>活动截止还剩</text>
<text class="activity-item__remaining-days">{{item.remainingDays}}天</text>
</view>
<view class="activity-item__target"> <view class="activity-item__target">
<text>目标：{{item.beerScope === 0 ? '品牌全系' : '以下'}}酒款累积扫码 ≥ </text> <text>目标：{{item.beerScope === 0 ? '品牌全系' : '以下'}}酒款累积扫码 ≥ </text>
<text class="activity-item__count">{{ item.activityTarget}}桶</text> <text class="activity-item__count">{{ item.activityTarget}}桶</text>
@ -294,8 +297,7 @@
<text class="activity-item__title">{{ item.activityName }}</text> <text class="activity-item__title">{{ item.activityName }}</text>
</view> </view>
<view class="activity-item__tag-container"> <view class="activity-item__tag-container">
<text class="activity-item__tag activity-item__tag--store" v-if="item.activityType === 1">指定门店</text> <text class="activity-item__tag activity-item__tag--time" v-if="item.endDate">剩余{{getRemainingDays(item.endDate)}}天</text>
<text class="activity-item__tag activity-item__tag--new" v-if="item.activityType === 2">招募活动</text>
</view> </view>
<view class="activity-item__content"> <view class="activity-item__content">
<view class="activity-item__progress"> <view class="activity-item__progress">
@ -306,10 +308,6 @@
<text>时间：首次扫码开始累计</text> <text>时间：首次扫码开始累计</text>
<text class="activity-item__duration">{{item.duration}}天内</text> <text class="activity-item__duration">{{item.duration}}天内</text>
</view> </view>
<view class="activity-item__deadline" v-if="item.remainingDays">
<text>活动截止还剩</text>
<text class="activity-item__remaining-days">{{item.remainingDays}}天</text>
</view>
<view class="activity-item__target"> <view class="activity-item__target">
<text>目标：{{item.beerScope === 0 ? '品牌全系' : '以下'}}酒款累积扫码 ≥ </text> <text>目标：{{item.beerScope === 0 ? '品牌全系' : '以下'}}酒款累积扫码 ≥ </text>
<text class="activity-item__count">{{ item.activityTarget}}桶</text> <text class="activity-item__count">{{ item.activityTarget}}桶</text>
@ -363,13 +361,63 @@
<uni-popup-dialog <uni-popup-dialog
type="info" type="info"
title="领取确认" title="领取确认"
content="每款酒品仅可领取一次，领取后将获得相应的品牌福利，是否确认领取？" content="每桶产品仅可领取一次，是否确认领取？"
:before-close="true" :before-close="true"
@confirm="confirmReceive" @confirm="confirmReceive"
@close="closePopup" @close="closePopup"
></uni-popup-dialog> ></uni-popup-dialog>
</uni-popup> </uni-popup>
</template> </template>
<!-- 位置错误状态 -->
<template v-if="errorType === 'location'">
<view class="scan-result__header scan-result__header--error">
<image src="/static/information.png" class="scan-result__icon"></image>
<text class="scan-result__title">位置错误</text>
<text class="scan-result__desc">请在酒吧附近100米范围内扫码</text>
</view>
<view class="scan-result__content">
<view class="scan-result__section">
<text class="scan-result__section-title">商品详细</text>
<view class="product-card" v-if="beer">
<view class="product-card__image">
<image :src="beer.cover" mode="aspectFill"></image>
</view>
<view class="product-card__info">
<text class="product-card__name">{{ beer.beerName }}</text>
<text class="product-card__brand">{{ beer.brandName }}</text>
<view class="product-card__detail">
<text class="product-card__label">生产日期：</text>
<text class="product-card__value">{{ beer.launchDate }}</text>
</view>
<view class="product-card__detail">
<text class="product-card__label">净含量：</text>
<text class="product-card__value">{{ beer.netContent }}</text>
</view>
<view class="product-card__rating">
<view class="rating-stars">
<text class="cuIcon-favorfill"></text>
<text class="rating-value">{{ beer.beerOverallRating }}</text>
</view>
<text class="rating-count">{{ beer.beerReviewsCount }} 条评论</text>
</view>
</view>
</view>
</view>
</view>
<view class="scan-result__footer">
<button class="scan-result__btn scan-result__btn--back" @click="back">
<image src="/static/undo.svg"></image>
<text>返回</text>
</button>
<button class="scan-result__btn scan-result__btn--share" @click="share">
<image src="/static/send-2.svg"></image>
<text>分享上新</text>
</button>
</view>
</template>
</view> </view>
</template> </template>
@ -404,6 +452,7 @@
longitude: null, longitude: null,
errorType: null, // 错误类型: location-位置错误, expired-已失效 errorType: null, // 错误类型: location-位置错误, expired-已失效
isJustReceived: false, // 是否刚刚领取成功 isJustReceived: false, // 是否刚刚领取成功
selectedActivity: null, // 选中的活动
}; };
}, },
onLoad({ onLoad({
@ -496,7 +545,7 @@
consumeCode(data).then(res => { consumeCode(data).then(res => {
console.log('领取响应:', res) console.log('领取响应:', res)
// 验证响应数据 // 验证响应数据
if (res.code === 200 && res.data) { if (res.code === 200) {
uni.hideLoading() uni.hideLoading()
uni.showToast({ uni.showToast({
title: '领取成功', title: '领取成功',
@ -509,7 +558,7 @@
this.getQrcodeInfoFun(this.result) this.getQrcodeInfoFun(this.result)
}, 1000) }, 1000)
} else { } else {
throw new Error('领取失败：响应数据异常') throw new Error(res.msg || '领取失败')
} }
}).catch(err => { }).catch(err => {
console.error('领取失败:', err) console.error('领取失败:', err)
@ -553,6 +602,7 @@
// 选择品牌方活动 // 选择品牌方活动
selectPPF(item) { selectPPF(item) {
this.activityId = item.id this.activityId = item.id
this.selectedActivity = item
}, },
// 选择平台活动 // 选择平台活动
selectPlatform(item) { selectPlatform(item) {
@ -588,6 +638,15 @@
formatTime(timestamp) { formatTime(timestamp) {
const date = new Date(timestamp); const date = new Date(timestamp);
return date.toLocaleString(); return date.toLocaleString();
},
// 计算剩余天数
getRemainingDays(endDate) {
if(!endDate) return 0;
const targetDate = new Date(endDate);
const currentDate = new Date();
const timeDiff = targetDate.getTime() - currentDate.getTime();
const remainingDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
return Math.max(remainingDays, 0); // 确保不会显示负数天数
} }
} }
} }
@ -614,6 +673,14 @@
justify-content: center; justify-content: center;
gap: 20rpx; gap: 20rpx;
} }
&--error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16rpx;
}
} }
&__icon { &__icon {
@ -640,6 +707,7 @@
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
padding-bottom: 40rpx;
} }
&__section { &__section {
@ -676,14 +744,14 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 24rpx; gap: 24rpx;
padding: 24rpx 32rpx env(safe-area-inset-bottom); padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
background: #fff; background: #fff;
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1); box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
z-index: 99; z-index: 100;
} }
&__btn { &__btn {
@ -718,6 +786,38 @@
opacity: 0.9; opacity: 0.9;
} }
} }
&__icon-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 16rpx;
}
&__icon {
width: 120rpx;
height: 120rpx;
margin-bottom: 16rpx;
&--info {
width: 80rpx;
height: 80rpx;
margin-bottom: 8rpx;
}
}
.activity-info {
margin-top: 24rpx;
padding: 24rpx;
background: #F7F8FA;
border-radius: 16rpx;
&__progress {
font-size: 28rpx;
color: #19367A;
font-weight: 500;
}
}
} }
.product-card { .product-card {
@ -801,14 +901,15 @@
.benefit-card { .benefit-card {
background: #FFF; background: #FFF;
padding: 24rpx; padding: 0 24rpx;
border-radius: 16rpx; border-radius: 16rpx;
&__title { &__title {
font-size: 32rpx; font-size: 32rpx;
font-weight: 600; font-weight: 600;
color: #3D3D3D; color: #3D3D3D;
margin-bottom: 12rpx; margin-top: 8rpx;
// margin-bottom: 24rpx;
display: block; display: block;
} }
@ -887,17 +988,9 @@
border-radius: 8rpx; border-radius: 8rpx;
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.3); box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.3);
&--store { &--time {
background-color: #D42E78; background-color: #D42E78;
} }
&--new {
background-color: #19367A;
}
&--limited {
background-color: #FF6B35;
}
} }
&__content { &__content {