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

优化活动列表组件UI效果：1. 优化酒款海报图片显示（按1080x1527比例）2. 调整文字间距和样式 3. 优化奖励描述显示方式

Browse Source
This commit is contained in:
davy 2025-04-09 12:36:04 +08:00
parent 740eea2683
commit 9671183043
7 changed files with 1458 additions and 864 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
components/ActivityItem.vue
View File

@ -1,11 +1,12 @@
<template>
<view class="activity-item flex" v-if="isActivityVisible" @click="handleClick">
<view class="store-tag" v-if="item.activityType === 1">指定门店</view>
<view class="left">
<image :src="item.brandLogo"></image>
<image :src="item.brandLogo" class="brand-logo"></image>
<view class="status-content">
<text v-if="activityState === 'recruiting' && item.remainingDays > 0">招募剩余天数</text>
<text v-else-if="activityState === 'recruiting' && item.remainingDays <= 0">活动招募已结束</text>
<text v-else-if="activityState === 'inProgress'">距离达成还剩</text>
<text v-if="activityState === 'recruiting' && item.remainingDays > 0" class="status-label">招募剩余天数</text>
<text v-else-if="activityState === 'recruiting' && item.remainingDays <= 0" class="status-label">活动招募已结束</text>
<text v-else-if="activityState === 'inProgress'" class="status-label">距离达成还剩</text>
<view class="status-box">
<template v-if="activityState === 'recruiting' && item.remainingDays > 0">
<view class="days-left">
@ -21,8 +22,8 @@
</template>
<template v-else-if="activityState === 'inProgress'">
<view v-if="item.remainingBeerCount > 0" class="beer-count">
<text>{{item.remainingBeerCount}}</text>
<text>桶</text>
<text class="count-num">{{item.remainingBeerCount}}</text>
<text class="count-unit">桶</text>
</view>
</template>
<template v-else-if="activityState === 'completed'">
@ -35,18 +36,17 @@
</view>
<view class="right">
<view class="title">{{ item.breweryName }}</view>
<view class="sub">时间：首次扫码开始累计 <text style="color:#DE3C4B">{{item.duration}}天内</text></view>
<view class="sub">目标：全系列酒款累积扫码 ≥ {{ item.activityTarget}}桶</view>
<scroll-view v-if="item.beers" scroll-x="true" class="scroll-img">
<view class="sub">时间：首次扫码开始累计 <text class="highlight">{{item.duration}}天内</text></view>
<view class="sub">目标：{{item.beerScope === 0 ? '品牌全系' : '以下'}}酒款累积扫码 ≥ <text class="highlight">{{ item.activityTarget}}桶</text></view>
<scroll-view v-if="item.beers" scroll-x="true" class="scroll-img" enhanced show-scrollbar="false">
<view class="beer-box" v-for="(beer, beerIndex) in item.beers" :key="beerIndex" @click.stop="handleReview(beer)">
<image v-if="beer.cover" :src="beer.cover" class="cover"></image>
<image v-if="beer.cover" :src="beer.cover" class="cover" mode="aspectFit"></image>
</view>
</scroll-view>
<view class="flex align-center">
<view class="reward-info">
<text v-if="item.activityRewardType == 2 || (item.activityRewardType == 1 && item.activityRewardGoods)" class="zeng">赠</text>
<text v-if="item.activityRewardType == 1 && item.activityRewardGoods" style="color: #0B0E26;font-size: 24rpx;">{{item.activityRewardGoods.goodsName}} * {{item.activityRewardCount}}</text>
<text v-if="item.activityRewardType == 2" style="color: #0B0E26;font-size: 24rpx;">啤酒币 * {{item.activityRewardCount}}个</text>
<text v-if="item.barAwardStatus" style="color: #0B0E26;font-size: 24rpx;">（已发放）</text>
<text v-if="item.activityRewardType == 1 && item.activityRewardGoods" class="reward-text">{{item.activityRewardGoods.goodsName}} {{item.activityRewardGoods.specs}} 奖励数量：{{item.activityRewardCount}}份</text>
<text v-if="item.activityRewardType == 2" class="reward-text">品牌啤酒币 奖励数量 {{item.activityRewardCount}}枚</text>
</view>
</view>
</view>
@ -117,34 +117,56 @@ export default {
position: relative;
width: 702rpx;
margin-bottom: 48rpx;
transition: transform 0.2s ease;
// &:last-child {
// margin-bottom: 0;
// }
&:active {
transform: scale(0.98);
}
.store-tag {
position: absolute;
top: 24rpx;
right: 24rpx;
font-size: 20rpx;
color: #FFFFFF;
background-color: #D42E78;
padding: 6rpx 16rpx;
border-radius: 8rpx;
z-index: 2;
box-shadow: 0 2rpx 6rpx rgba(212, 46, 120, 0.3);
}
.right {
width: 702rpx;
min-height: 428rpx;
background: #FFFFFF;
border-radius: 20rpx;
padding: 24rpx 24rpx 24rpx 200rpx;
padding: 32rpx 32rpx 32rpx 200rpx;
box-sizing: border-box;
box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.08);
position: relative;
z-index: 1;
border: 1px solid #EFEDE9;
.title {
font-size: 32rpx;
font-size: 36rpx;
font-weight: bold;
line-height: 48rpx;
color: #0B0E26;
margin-bottom: 16rpx;
margin-bottom: 20rpx;
}
.sub {
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
line-height: 44rpx;
color: #0B0E26;
margin-bottom: 16rpx;
margin-bottom: 20rpx;
.highlight {
color: #D42E78;
font-weight: bold;
}
}
.scroll-img {
@ -152,35 +174,62 @@ export default {
display: flex;
flex-direction: row;
white-space: nowrap;
height: 144rpx;
margin-bottom: 18rpx;
height: 200rpx;
margin-bottom: 24rpx;
overflow-x: auto;
padding: 4rpx 0;
.beer-box {
width: 100rpx;
width: 120rpx;
height: 170rpx;
background: #FFFFFF;
margin-right: 20rpx;
margin-right: 8rpx;
box-sizing: border-box;
display: inline-block;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.2s;
border-radius: 12rpx;
overflow: hidden;
position: relative;
&:active {
transform: scale(0.95);
}
.cover {
width: 100rpx;
height: 144rpx;
border-radius: 10rpx;
width: 100%;
height: 100%;
border-radius: 12rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
object-fit: contain;
}
}
}
.reward-info {
display: flex;
align-items: center;
margin-top: 8rpx;
}
.zeng {
font-size: 20rpx;
font-size: 22rpx;
font-weight: bold;
line-height: normal;
text-align: center;
color: #0B0E26;
padding: 8rpx 12rpx;
padding: 8rpx 16rpx;
border-radius: 10rpx;
background: #FEE034;
margin-right: 20rpx;
box-shadow: 0 2rpx 4rpx rgba(254, 224, 52, 0.3);
}
.reward-text {
color: #0B0E26;
font-size: 26rpx;
line-height: 36rpx;
}
}
@ -195,17 +244,18 @@ export default {
border-radius: 20rpx;
box-sizing: border-box;
border: 1px solid #EFEDE9;
z-index: 1;
z-index: 3;
box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
image {
.brand-logo {
width: 132rpx;
height: 132rpx;
border-radius: 6rpx;
margin-bottom: 40rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
.status-content {
@ -213,7 +263,7 @@ export default {
flex-direction: column;
align-items: center;
text {
.status-label {
color: #606060;
font-size: 24rpx;
font-weight: bold;
@ -244,18 +294,26 @@ export default {
}
.beer-count {
text {
display: flex;
align-items: baseline;
justify-content: center;
.count-num {
font-size: 48rpx;
color: #19367A;
font-weight: bold;
line-height: 1;
}
.count-unit {
font-size: 24rpx;
color: #0B0E26;
&:last-child {
margin-left: 4rpx;
}
color: #606060;
margin-left: 4rpx;
}
}
.status-text {
font-size: 24rpx;
font-size: 28rpx;
color: #19367A;
font-weight: bold;

8
pages.json
View File

@ -198,15 +198,17 @@
"style" :
{
"navigationBarTitleText" : "活动详情",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTextStyle": "black"
"navigationBarBackgroundColor": "#19367A",
"navigationBarTextStyle": "white"
}
},
{
"path" : "myActivityDetail",
"style" :
{
"navigationBarTitleText" : "我的活动"
"navigationBarTitleText" : "我的活动",
"navigationBarBackgroundColor": "#19367A",
"navigationBarTextStyle": "white"
}
},
{

200
pages/index/myJoin.vue
View File

@ -69,67 +69,13 @@
style="padding: 16rpx 28rpx 0;background-color: #F2F2F2;overflow-y: auto;flex:1"
@scrolltolower="changePage">
<!-- 活动列表项 -->
<view class="activity-item flex" v-for="(it, index) in myJoinList" :key="index" @click="toInfo(it)">
<!-- 左侧区域：品牌logo和达成进度 -->
<view class="left flex flex-col justify-between align-center">
<!-- 品牌logo：固定尺寸140x140 -->
<image :src="it.brandLogo" style="width: 140rpx;height: 140rpx;border-radius: 6rpx;">
</image>
<!-- 达成进度提示文字 -->
<view style="color: #606060;font-size: 24rpx;font-weight: bold;white-space: nowrap;">距离达成还剩</view>
<!-- 剩余数量/达标状态：根据不同状态显示不同内容 -->
<view>
<!-- 累计中：remainingBeerCount > 0 -->
<template v-if="it.remainingBeerCount > 0">
<text style="font-family: Roboto;font-size: 24rpx;font-weight: normal;line-height: 16rpx; text-align: center;letter-spacing: normal;color: #0B0E26;">{{ it.remainingBeerCount }}</text>
<text style="font-size: 24rpx;color: #0B0E26;">桶</text>
</template>
<!-- 待兑付：remainingBeerCount <= 0 且未兑付 -->
<template v-else-if="it.remainingBeerCount <= 0 && !it.barAwardStatus">
<text style="font-family: Roboto;font-size: 24rpx; color: #19367A;font-weight: bold;line-height: 130%;text-align: center;letter-spacing: normal;">待兑付</text>
</template>
<!-- 已兑付：厂家已兑付状态 -->
<template v-else-if="it.barAwardStatus">
<text style="font-family: Roboto;font-size: 24rpx; color: #19367A;font-weight: bold;line-height: 130%;text-align: center;letter-spacing: normal;">已兑付</text>
</template>
<!-- 已完成：活动已完成状态 -->
<template v-else-if="it.activityStatus === 'COMPLETED'">
<text style="font-family: Roboto;font-size: 24rpx; color: #19367A;font-weight: bold;line-height: 130%;text-align: center;letter-spacing: normal;">已完成</text>
</template>
</view>
</view>
<!-- 右侧区域：活动详细信息 -->
<view class="right">
<!-- 活动名称 -->
<view class="title">{{ it.activityName }}</view>
<!-- 活动时间：首次扫码开始计算 -->
<view class="sub">时间：首次扫码开始累计 <text style="color:#19367A">{{it.duration}}天内</text></view>
<!-- 活动目标：累积扫码数量 -->
<view class="sub">目标：全系列酒款累积扫码 ≥ {{ it.activityTarget}}桶</view>
<!-- 酒款图片：横向滚动展示 -->
<scroll-view v-if="it.beers" scroll-x="true" class="scroll-img">
<view class="beer-box" v-for="(it, index) in it.beers" :key="index"
@click="toReview(it)">
<image v-if="it.cover" :src="it.cover" class="cover"></image>
</view>
</scroll-view>
<!-- 活动奖励信息：实物或啤酒币 -->
<view class="flex align-center">
<text class="zeng">赠</text>
<!-- 实物奖励：type=1 -->
<text v-if="it.activityRewardType == 1 && it.activityRewardGoods"
style="color: #0B0E26;font-size: 24rpx;">{{it.activityRewardGoods.goodsName}} * {{it.activityRewardCount}}</text>
<!-- 啤酒币奖励：type=2 -->
<text v-if="it.activityRewardType == 2"
style="color: #0B0E26;font-size: 24rpx;">啤酒币 * {{it.activityRewardCount}}个</text>
<!-- 奖励发放状态 -->
<text v-if="it.barAwardStatus"
style="color: #0B0E26;font-size: 24rpx;">（已发放）</text>
</view>
</view>
</view>
<activity-item
v-for="(it, index) in myJoinList"
:key="index"
:item="it"
@click="toInfo(it)"
@review="toReview"
></activity-item>
<!-- 列表加载状态 -->
<view class="cu-load" :class="'over'"></view>
</scroll-view>
@ -172,38 +118,42 @@
<script>
import loginPopup from '@/components/loginPopup.vue';
import ActivityItem from '@/components/ActivityItem.vue'
import { myJoinListApi, getMyExchangeOrder } from "@/api/user.js"
import { getBarInfo } from "@/api/bar.js"
export default {
components: {
loginPopup
loginPopup,
ActivityItem
},
data() {
return {
loading: true,
userInfo: null, // 用户信息
barInfo: null, // 门店信息
isLoggedIn: false, // 登录状态
isVerified: false, // 认证状态
tabCur: 0, // 当前选中的标签页
curTag: 0, // 累积活动当前选中的标签
curCoinTag: 0, // 啤酒币换购当前选中的标签
myJoinList: [], // 我参与的活动列表
userInfo: null,
barInfo: null,
isLoggedIn: false,
isVerified: false,
tabCur: 0,
curTag: 0,
curCoinTag: 0,
myJoinList: [],
queryForm: {
status: 1, // 活动状态
status: 1,
pageNum: 1,
pageSize: 10
},
total: 0, // 活动总数
myExchangeOrder:[], // 兑换订单列表
total: 0,
myExchangeOrder:[],
orderQuery: {
pageNum: 1,
pageSize: 10
},
orderTotal: 0, // 订单总数
isLoading: false, // 是否正在加载数据
isRefreshing: false, // 是否正在刷新
hasNetwork: true, // 网络状态
orderTotal: 0,
isLoading: false,
isRefreshing: false,
hasNetwork: true,
lastRefreshTime: 0,
refreshDebounceTime: 1000,
};
},
computed: {
@ -301,29 +251,6 @@
console.log('【getBarInfoFun】当前userStatus:', this.userStatus)
},
// 初始化数据
async initData() {
try {
this.loading = true
const isLoggedIn = await this.checkLoginStatus()
if (isLoggedIn) {
await this.getMyJoinList()
}
} catch (error) {
console.error('初始化数据失败:', error)
// 只在已认证状态下显示错误提示
if (this.userStatus === 'verified') {
uni.showToast({
title: '加载失败',
icon: 'none'
})
}
} finally {
this.loading = false
}
},
// 检查用户信息变化
async checkUserInfo() {
try {
@ -338,7 +265,10 @@
const isLoggedIn = await this.checkLoginStatus()
if (isLoggedIn) {
await this.getMyJoinList()
// 只在需要时刷新数据
if (this.shouldRefreshData()) {
await this.getMyJoinList()
}
} else {
this.myJoinList = []
this.myExchangeOrder = []
@ -357,22 +287,16 @@
console.log('【loginSuccess】开始处理登录成功')
this.loading = true
// 获取token和openId
const token = uni.getStorageSync('token')
const openId = uni.getStorageSync('openId')
console.log('【loginSuccess】获取到的token:', token)
console.log('【loginSuccess】获取到的openId:', openId)
if (token && openId) {
// 更新登录状态
this.isLoggedIn = true
this.userInfo = {
token,
openId
}
console.log('【loginSuccess】更新登录状态:', this.isLoggedIn)
// 获取门店信息
await this.getBarInfoFun()
// 重置页面状态
@ -381,12 +305,11 @@
this.myJoinList = []
this.myExchangeOrder = []
// 重新加载数据
if (this.userStatus === 'verified') {
// 只在需要时刷新数据
if (this.userStatus === 'verified' && this.shouldRefreshData()) {
await this.getMyJoinList()
}
} else {
console.log('【loginSuccess】token或openId不存在')
this.isLoggedIn = false
this.userInfo = null
this.barInfo = null
@ -394,7 +317,6 @@
}
} catch (error) {
console.error('【loginSuccess】登录成功处理失败:', error)
// 只在已认证状态下显示错误提示
if (this.userStatus === 'verified') {
uni.showToast({
title: '登录失败',
@ -406,6 +328,16 @@
}
},
// 判断是否需要刷新数据
shouldRefreshData() {
const now = Date.now()
if (now - this.lastRefreshTime < this.refreshDebounceTime) {
return false
}
this.lastRefreshTime = now
return true
},
// 获取我的兑换订单
async getMyExchangeOrderFun() {
// 如果用户未认证，直接返回
@ -450,11 +382,17 @@
if (this.tabCur == 0) {
this.myJoinList = []
this.queryForm.pageNum = 1
await this.getMyJoinList()
// 只在需要时刷新数据
if (this.shouldRefreshData()) {
await this.getMyJoinList()
}
} else {
this.myExchangeOrder = []
this.orderQuery.pageNum = 1
await this.getMyExchangeOrderFun()
// 只在需要时刷新数据
if (this.shouldRefreshData()) {
await this.getMyExchangeOrderFun()
}
}
},
@ -555,23 +493,26 @@
// 设置查询状态
switch(key) {
case 0: // 累计中
this.queryForm.status = 1 // 使用整数类型
case 0:
this.queryForm.status = 1
break
case 1: // 待兑付
this.queryForm.status = 2 // 使用整数类型
case 1:
this.queryForm.status = 2
break
case 2: // 已兑付
this.queryForm.status = 3 // 使用整数类型
case 2:
this.queryForm.status = 3
break
case 3: // 已完成
this.queryForm.status = 4 // 使用整数类型
case 3:
this.queryForm.status = 4
break
default:
delete this.queryForm.status
}
await this.getMyJoinList()
// 只在需要时刷新数据
if (this.shouldRefreshData()) {
await this.getMyJoinList()
}
},
// 切换订单状态标签
@ -585,20 +526,23 @@
// 设置查询状态
switch(key) {
case 0:
delete this.orderQuery.status // 全部状态
delete this.orderQuery.status
break
case 1:
this.orderQuery.status = 1 // 待发货
this.orderQuery.status = 1
break
case 2:
this.orderQuery.status = 2 // 已收货
this.orderQuery.status = 2
break
case 3:
this.orderQuery.status = 3 // 已完成
this.orderQuery.status = 3
break
}
await this.getMyExchangeOrderFun()
// 只在需要时刷新数据
if (this.shouldRefreshData()) {
await this.getMyExchangeOrderFun()
}
},
// 加载更多订单
@ -918,4 +862,6 @@
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
}
</style>

52
pages/index/review.vue
View File

@ -200,7 +200,7 @@
</view>
<!-- 组件 -->
<loginPopup ref="loginRef"></loginPopup>
<loginPopup ref="loginRef" @loginSuccess="loginSuccess"></loginPopup>
<createPoster v-if="showShare" ref="createPosterRef" :url="tempUrl" @close="showShare=false"></createPoster>
<canvas type="2d" id="myCanvas" style="width: 360px;height: 570px;position: fixed;left:8888px"></canvas>
</view>
@ -249,7 +249,8 @@
isAnimating: false,
lastRefreshTime: 0,
refreshDebounceTime: 1000,
loading: false
loading: false,
needRefresh: false // 添加标记，用于标识是否需要刷新
};
},
onLoad({beerId}) {
@ -265,23 +266,32 @@
// 检查登录状态
checkLoginStatus() {
const token = uni.getStorageSync('token')
const wasLoggedIn = this.isLoggedIn
this.isLoggedIn = !!token
if (this.isLoggedIn) {
const barInfo = uni.getStorageSync('barInfo')
this.isBarAuthenticated = barInfo && barInfo.authState === 1 // 1表示认证通过
// 如果之前未登录，现在登录了，标记需要刷新
if (!wasLoggedIn) {
this.needRefresh = true
}
} else {
this.isBarAuthenticated = false
}
},
// 初始化页面数据
async initPageData() {
const now = Date.now()
if (now - this.lastRefreshTime < this.refreshDebounceTime) {
if (now - this.lastRefreshTime < this.refreshDebounceTime && !this.needRefresh) {
return
}
this.lastRefreshTime = now
this.loading = true
this.needRefresh = false // 重置刷新标记
try {
// 重置数据
@ -760,6 +770,42 @@
}
this.currentTab = tab;
},
// 登录成功回调
async loginSuccess() {
console.log('登录成功，开始刷新页面数据')
// 重置状态
this.needRefresh = true
this.loading = true
try {
// 检查登录状态
await this.checkLoginStatus()
// 如果已登录，刷新页面数据
if (this.isLoggedIn) {
// 重置数据
this.reviewList = []
this.queryForm.pageNum = 1
// 获取新数据
await this.initPageData()
// 显示成功提示
uni.showToast({
title: '登录成功',
icon: 'success'
})
}
} catch (error) {
console.error('登录后刷新数据失败:', error)
uni.showToast({
title: '刷新数据失败',
icon: 'none'
})
} finally {
this.loading = false
}
}
}
}

936
pagesActivity/activityDetail.vue
View File

File diff suppressed because it is too large Load Diff

981
pagesActivity/myActivityDetail.vue
View File

File diff suppressed because it is too large Load Diff

1
static/heart-remove.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB