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 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">
<text class="scan-result__section-title">商品详细</text>
<view class="product-card" v-if="beer">
@ -85,14 +96,6 @@
</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 class="scan-result__footer">
@ -158,6 +161,11 @@
<!-- 待领取状态 -->
<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__section">
<text class="scan-result__section-title">商品详细</text>
@ -196,8 +204,8 @@
</view>
<view class="activity-notice" v-if="activitySum > 1">
<image src="/static/warning.svg" mode="aspectFit"></image>
<text>该产品有多个进行中活动重叠，请选择要计入的活动</text>
<image src="/static/warning-2.png" mode="aspectFit"></image>
<text>该产品有多个进行中活动可选，请选择要计入的活动</text>
</view>
<view class="scan-result__section" v-if="activity && activity.length > 0">
@ -214,8 +222,7 @@
<text class="activity-item__title">{{ item.breweryName }}</text>
</view> -->
<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--new" v-if="item.activityType === 2">招募活动</text>
<text class="activity-item__tag activity-item__tag--time" v-if="item.endDate">剩余{{getRemainingDays(item.endDate)}}天</text>
</view>
<view class="activity-item__content">
<view class="activity-item__progress">
@ -226,10 +233,6 @@
<text>时间：首次扫码开始累计</text>
<text class="activity-item__duration">{{item.duration}}天内</text>
</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">
<text>目标：{{item.beerScope === 0 ? '品牌全系' : '以下'}}酒款累积扫码 ≥ </text>
<text class="activity-item__count">{{ item.activityTarget}}桶</text>
@ -294,8 +297,7 @@
<text class="activity-item__title">{{ item.activityName }}</text>
</view>
<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--new" v-if="item.activityType === 2">招募活动</text>
<text class="activity-item__tag activity-item__tag--time" v-if="item.endDate">剩余{{getRemainingDays(item.endDate)}}天</text>
</view>
<view class="activity-item__content">
<view class="activity-item__progress">
@ -306,10 +308,6 @@
<text>时间：首次扫码开始累计</text>
<text class="activity-item__duration">{{item.duration}}天内</text>
</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">
<text>目标：{{item.beerScope === 0 ? '品牌全系' : '以下'}}酒款累积扫码 ≥ </text>
<text class="activity-item__count">{{ item.activityTarget}}桶</text>
@ -363,13 +361,63 @@
<uni-popup-dialog
type="info"
title="领取确认"
content="每款酒品仅可领取一次，领取后将获得相应的品牌福利，是否确认领取？"
content="每桶产品仅可领取一次，是否确认领取？"
:before-close="true"
@confirm="confirmReceive"
@close="closePopup"
></uni-popup-dialog>
</uni-popup>
</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>
</template>
@ -404,6 +452,7 @@
longitude: null,
errorType: null, // 错误类型: location-位置错误, expired-已失效
isJustReceived: false, // 是否刚刚领取成功
selectedActivity: null, // 选中的活动
};
},
onLoad({
@ -496,7 +545,7 @@
consumeCode(data).then(res => {
console.log('领取响应:', res)
// 验证响应数据
if (res.code === 200 && res.data) {
if (res.code === 200) {
uni.hideLoading()
uni.showToast({
title: '领取成功',
@ -509,7 +558,7 @@
this.getQrcodeInfoFun(this.result)
}, 1000)
} else {
throw new Error('领取失败：响应数据异常')
throw new Error(res.msg || '领取失败')
}
}).catch(err => {
console.error('领取失败:', err)
@ -553,6 +602,7 @@
// 选择品牌方活动
selectPPF(item) {
this.activityId = item.id
this.selectedActivity = item
},
// 选择平台活动
selectPlatform(item) {
@ -588,6 +638,15 @@
formatTime(timestamp) {
const date = new Date(timestamp);
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;
gap: 20rpx;
}
&--error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16rpx;
}
}
&__icon {
@ -640,6 +707,7 @@
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 40rpx;
}
&__section {
@ -676,14 +744,14 @@
display: flex;
justify-content: space-between;
gap: 24rpx;
padding: 24rpx 32rpx env(safe-area-inset-bottom);
padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
background: #fff;
position: fixed;
left: 0;
right: 0;
bottom: 0;
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
z-index: 99;
z-index: 100;
}
&__btn {
@ -718,6 +786,38 @@
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 {
@ -801,14 +901,15 @@
.benefit-card {
background: #FFF;
padding: 24rpx;
padding: 0 24rpx;
border-radius: 16rpx;
&__title {
font-size: 32rpx;
font-weight: 600;
color: #3D3D3D;
margin-bottom: 12rpx;
margin-top: 8rpx;
// margin-bottom: 24rpx;
display: block;
}
@ -887,17 +988,9 @@
border-radius: 8rpx;
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.3);
&--store {
&--time {
background-color: #D42E78;
}
&--new {
background-color: #19367A;
}
&--limited {
background-color: #FF6B35;
}
}
&__content {