Compare commits
3 Commits
740eea2683
...
b0a688df36
| Author | SHA1 | Date | |
|---|---|---|---|
|
b0a688df36 | ||
|
|
912ec5f693 | ||
|
|
9671183043 |
@ -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 {
|
||||
font-size: 24rpx;
|
||||
color: #0B0E26;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
|
||||
&:last-child {
|
||||
margin-left: 4rpx;
|
||||
.count-num {
|
||||
font-size: 48rpx;
|
||||
color: #19367A;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.count-unit {
|
||||
font-size: 24rpx;
|
||||
color: #606060;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 24rpx;
|
||||
font-size: 28rpx;
|
||||
color: #19367A;
|
||||
font-weight: bold;
|
||||
|
||||
|
||||
@ -198,15 +198,17 @@
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "活动详情",
|
||||
"navigationBarBackgroundColor": "#FFFFFF",
|
||||
"navigationBarTextStyle": "black"
|
||||
"navigationBarBackgroundColor": "#19367A",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "myActivityDetail",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "我的活动"
|
||||
"navigationBarTitleText" : "我的活动",
|
||||
"navigationBarBackgroundColor": "#19367A",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@ -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) {
|
||||
// 只在需要时刷新数据
|
||||
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,12 +382,18 @@
|
||||
if (this.tabCur == 0) {
|
||||
this.myJoinList = []
|
||||
this.queryForm.pageNum = 1
|
||||
// 只在需要时刷新数据
|
||||
if (this.shouldRefreshData()) {
|
||||
await this.getMyJoinList()
|
||||
}
|
||||
} else {
|
||||
this.myExchangeOrder = []
|
||||
this.orderQuery.pageNum = 1
|
||||
// 只在需要时刷新数据
|
||||
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
|
||||
}
|
||||
|
||||
// 只在需要时刷新数据
|
||||
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
|
||||
}
|
||||
|
||||
// 只在需要时刷新数据
|
||||
if (this.shouldRefreshData()) {
|
||||
await this.getMyExchangeOrderFun()
|
||||
}
|
||||
},
|
||||
|
||||
// 加载更多订单
|
||||
@ -919,3 +863,5 @@
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容 -->
|
||||
<view class="page-content">
|
||||
<!-- 登录组件 -->
|
||||
<login-popup ref="loginPopup" @success="onLoginSuccess"></login-popup>
|
||||
<!-- 2. 进度展示区域 -->
|
||||
<view class="bg-white progress-box" style="border-radius: 0 0 12rpx 12rpx;">
|
||||
<!-- 标题文字 -->
|
||||
<view class="title-text section-title">
|
||||
|
||||
<!-- 进度展示区域 -->
|
||||
<view class="section">
|
||||
<view class="section-title">
|
||||
<template v-if="activityInfo.hasJoined">
|
||||
累计天数还剩
|
||||
</template>
|
||||
@ -19,7 +21,9 @@
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<view class="info-list">
|
||||
<!-- 倒计时区域 -->
|
||||
<view class="info-item countdown-box">
|
||||
<view class="countdown-container">
|
||||
<view class="countdown-item">
|
||||
<text class="number">{{activityInfo.hasJoined ? activityInfo.remainingDuration : (activityInfo.remainingDays || '0')}}</text>
|
||||
@ -38,93 +42,94 @@
|
||||
<text class="unit">秒</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 进度条区域 -->
|
||||
<view class="progress-bar">
|
||||
<view class="progress-track">
|
||||
<view class="progress-fill" :style="{ width: processNum + '%' }"></view>
|
||||
</view>
|
||||
<view class="progress-labels">
|
||||
<text class="start">0天</text>
|
||||
<text class="end">{{totalDays}}天</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 3. 活动信息区域 -->
|
||||
<view class="bg-white padding margin-bottom-sm activity-info-box" style="border-radius:12rpx;margin-top: 24rpx;">
|
||||
<view v-if="activityInfo.beers" class="brand-info" @click="toBrand">
|
||||
<!-- 活动信息区域 -->
|
||||
<view class="section">
|
||||
<view class="section-title">活动信息</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item" v-if="activityInfo.beers" @click="toBrand">
|
||||
<text>活动发起方</text>
|
||||
<view class="right-content">
|
||||
<image :src="activityInfo.beers[0].breweryLogo" class="brand-logo"></image>
|
||||
<view class="brand-text">
|
||||
<view class="initiator">活动发起方</view>
|
||||
<view class="section-title">{{ activityInfo.beers[0].brandName}}</view>
|
||||
<text class="info-text">{{ activityInfo.beers[0].brandName}}</text>
|
||||
<text class="cuIcon-right"></text>
|
||||
</view>
|
||||
<view class="cuIcon-right"></view>
|
||||
</view>
|
||||
<template v-if="currentTab == 1">
|
||||
<view class="activity-duration">首次扫码开始累计 <text class="duration-value">{{activityInfo.duration || '-'}} 天内</text></view>
|
||||
<view class="activity-target">
|
||||
{{ activityInfo.beer_scope === 0 ? '全系列酒款' : '以下酒款' }}累计扫码 ≥ {{activityInfo.activityTarget || '-'}} 桶
|
||||
<view class="info-item">
|
||||
<text>活动时间</text>
|
||||
<view class="right-content">
|
||||
<text class="info-text">首次扫码开始累计 <text class="highlight">{{activityInfo.duration || '-'}} 天内</text></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text>活动目标</text>
|
||||
<view class="right-content">
|
||||
<text class="info-text">{{ activityInfo.beerScope === 0 ? '品牌全系列酒款' : '以下酒款' }}累计扫码 ≥ <text class="highlight">{{activityInfo.activityTarget || '-'}} 桶</text></text>
|
||||
</view>
|
||||
</template>
|
||||
<scroll-view v-if="currentTab == 1" scroll-x="true" class="scroll-container">
|
||||
<view v-for="(it, index) in activityInfo.beers" :key="index" style="display: inline-block;" class="row-box" @click="toReview(it)">
|
||||
<view class="beer-box">
|
||||
<image :src="it.cover" class="cover"></image>
|
||||
<view class="title word-all">{{ it.beerName || ''}}</view>
|
||||
<view class="desc word-all">{{ it.beerStyles || '' }}</view>
|
||||
<view class="desc word-all">{{ it.brandName ||'' }}</view>
|
||||
<view class="flex align-center num">
|
||||
<image src="@/static/vector.png" style="width: 20rpx;height: 20rpx;margin-right: 10rpx;">
|
||||
</image>
|
||||
{{ it.beerOverallRating || 0 }}（{{ it.beerReviewsCount || 0}}）
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 参与酒款区域 -->
|
||||
<view class="section">
|
||||
<view class="section-title">参与酒款</view>
|
||||
<scroll-view scroll-x="true" class="beer-scroll">
|
||||
<view class="beer-list">
|
||||
<view v-for="(it, index) in activityInfo.beers" :key="index" class="beer-card" @click="toBeerDetail(it)">
|
||||
<image :src="it.cover" class="beer-image"></image>
|
||||
<view class="beer-info">
|
||||
<text class="name">{{ it.beerName || ''}}</text>
|
||||
<text class="style">{{ it.beerStyles || '' }}</text>
|
||||
<view class="rating">
|
||||
<image src="@/static/vector.png" class="rating-icon"></image>
|
||||
<text>{{ it.beerOverallRating || 0 }}（{{ it.beerReviewsCount || 0}}）</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 1 商品 2 啤酒币 -->
|
||||
<view v-if="activityInfo.activityRewardType == 1 || currentTab == 1" class="bg-white padding margin-bottom-sm"
|
||||
style="border-radius:12rpx;">
|
||||
<view class="section-title margin-bottom-sm">挑战奖励</view>
|
||||
<view v-if="activityInfo.activityRewardGoods" class="flex align-center">
|
||||
<image :src="activityInfo.activityRewardGoods.goodsCover" style="width: 144rpx;height: 204rpx;margin-right:16rpx;border-radius: 12rpx;"></image>
|
||||
<view class="flex-1">
|
||||
<view class="flex flex-1 align-center">
|
||||
<view class="flex-1">
|
||||
<view class="word-all margin-bottom-sm" style="color:#1E2019">{{activityInfo.activityRewardGoods.goodsName}}</view>
|
||||
<!-- <view class="word-all margin-bottom-sm" style="color:rgba(30, 32, 25, 0.8)">风味西打酒</view>
|
||||
<view class="word-all margin-bottom-sm" style="color:#1E2019">TasteRoom 风味屋</view> -->
|
||||
|
||||
<!-- 奖励区域 -->
|
||||
<view class="section" v-if="activityInfo.activityRewardType">
|
||||
<view class="section-title">挑战奖励</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item reward-content" v-if="activityInfo.activityRewardType == 1">
|
||||
<image :src="activityInfo.activityRewardGoods.goodsCover" class="goods-image" mode="aspectFit"></image>
|
||||
<view class="goods-info">
|
||||
<text class="name">{{activityInfo.activityRewardGoods.goodsName}}</text>
|
||||
<view class="specs-info">
|
||||
<text class="specs-label">规格：</text>
|
||||
<text class="specs-value">{{activityInfo.activityRewardGoods.specs}}</text>
|
||||
</view>
|
||||
<text class="count">奖励数量：{{activityInfo.activityRewardCount}}份</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-item reward-content" v-if="activityInfo.activityRewardType == 2">
|
||||
<view class="coin-container">
|
||||
<image :src="activityInfo.brandLogo" class="coin-logo" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="coin-info">
|
||||
<text class="name">{{activityInfo.breweryName}}品牌啤酒币</text>
|
||||
<text class="count">奖励数量： {{ activityInfo.activityRewardCount }}枚</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-red text-right">x<text class="text-xxl text-bold">{{activityInfo.activityRewardCount}}</text></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="activityInfo.activityRewardType == 2" class="bg-white padding margin-bottom-sm"
|
||||
style="border-radius:12rpx;">
|
||||
<view class="margin-bottom-sm">奖励</view>
|
||||
<view class="flex align-center">
|
||||
<!-- <image src="@/static/img/icon-logo.png" class="margin-right"
|
||||
style="width: 72rpx;height: 72rpx;border-radius: 30rpx;"></image> -->
|
||||
<view class="flex flex-1 align-center">
|
||||
<view class="flex-1 word-all" style="color:#1E2019">啤酒币</view>
|
||||
<view class="text-red text-right">x<text
|
||||
class="text-xxl text-bold">{{ activityInfo.activityRewardCount }}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view style="height: 200rpx;background-color: transparent;"></view> -->
|
||||
<!-- 5. 底部操作栏 -->
|
||||
<view class="bg-white flex justify-center align-start padding-top bottom-bar">
|
||||
<view class="scan-btn"
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="bottom-bar">
|
||||
<view class="action-button"
|
||||
:class="{
|
||||
'btn-disabled': !isLoggedIn || !isVerified || (!activityInfo.hasJoined && activityInfo.remainingDays <= 0)
|
||||
'disabled': !isLoggedIn || !isVerified || (!activityInfo.hasJoined && activityInfo.remainingDays <= 0)
|
||||
}"
|
||||
@click="activityInfo.remainingDays <= 0 && !activityInfo.hasJoined ? null : handleButtonClick">
|
||||
<text class="cuIcon-qr_code margin-right-xs"></text>
|
||||
扫桶标自动开始累计
|
||||
<text class="cuIcon-qr_code"></text>
|
||||
<text>扫桶标自动开始累计</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -360,14 +365,8 @@
|
||||
this.isLoggedIn = !!token;
|
||||
this.isVerified = barInfo && barInfo.authState === 1;
|
||||
},
|
||||
handleButtonClick() {
|
||||
const token = uni.getStorageSync('token');
|
||||
if (!token) {
|
||||
this.$refs.loginPopup.open();
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查认证状态
|
||||
// 检查认证状态并处理
|
||||
checkAuthAndHandle() {
|
||||
const barInfo = uni.getStorageSync('barInfo');
|
||||
if (!barInfo) {
|
||||
uni.showModal({
|
||||
@ -382,10 +381,9 @@
|
||||
}
|
||||
}
|
||||
});
|
||||
return;
|
||||
return false;
|
||||
}
|
||||
|
||||
// 处理不同的认证状态
|
||||
if (barInfo.authState === 2) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
@ -399,14 +397,11 @@
|
||||
}
|
||||
}
|
||||
});
|
||||
return;
|
||||
return false;
|
||||
} else if (barInfo.authState === 1) {
|
||||
// 已认证，允许操作
|
||||
this.handleScan();
|
||||
return;
|
||||
return true;
|
||||
}
|
||||
|
||||
// 未认证状态
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '请先认证门店',
|
||||
@ -419,6 +414,18 @@
|
||||
}
|
||||
}
|
||||
});
|
||||
return false;
|
||||
},
|
||||
handleButtonClick() {
|
||||
const token = uni.getStorageSync('token');
|
||||
if (!token) {
|
||||
this.$refs.loginPopup.open();
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.checkAuthAndHandle()) {
|
||||
this.handleScan();
|
||||
}
|
||||
},
|
||||
onLoginSuccess(data) {
|
||||
// 登录成功后重新检查状态
|
||||
@ -430,57 +437,32 @@
|
||||
this.init();
|
||||
}
|
||||
|
||||
// 检查认证状态
|
||||
const barInfo = uni.getStorageSync('barInfo');
|
||||
if (!barInfo) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '请先认证门店',
|
||||
showCancel: true,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/registration'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 处理不同的认证状态
|
||||
if (barInfo.authState === 2) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您的门店正在认证中，请耐心等待',
|
||||
showCancel: true,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/registration'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
return;
|
||||
} else if (barInfo.authState === 1) {
|
||||
// 已认证，允许操作
|
||||
if (this.checkAuthAndHandle()) {
|
||||
this.handleScan();
|
||||
}
|
||||
},
|
||||
// 跳转到酒款详情页
|
||||
toBeerDetail(beer) {
|
||||
if (!beer || !beer.id) {
|
||||
uni.showToast({
|
||||
title: '酒款信息不完整',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 未认证状态
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '请先认证门店',
|
||||
showCancel: true,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/registration'
|
||||
// 确保id是数字类型
|
||||
const beerId = parseInt(beer.id);
|
||||
if (isNaN(beerId)) {
|
||||
uni.showToast({
|
||||
title: '酒款ID无效',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/review?beerId=' + beerId
|
||||
});
|
||||
}
|
||||
},
|
||||
@ -499,24 +481,101 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-content {
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
color: #F9F9F9;
|
||||
padding-bottom: 200rpx;
|
||||
background: #F7F7F7;
|
||||
|
||||
.progress-box {
|
||||
position: relative;
|
||||
.page-content {
|
||||
padding: 24rpx 32rpx;
|
||||
padding-bottom: calc(152rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.section {
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
|
||||
.title-text {
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
overflow: hidden;
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
padding: 32rpx;
|
||||
color: #333333;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 32rpx;
|
||||
bottom: 0;
|
||||
width: 48rpx;
|
||||
height: 4rpx;
|
||||
background: #19367A;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-list {
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 32rpx;
|
||||
border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.right-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
|
||||
.brand-logo {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
border: 1rpx solid #19367A;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
text-align: right;
|
||||
|
||||
.highlight {
|
||||
color: #19367A;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.cuIcon-right {
|
||||
color: #CCCCCC;
|
||||
font-size: 24rpx;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.countdown-box {
|
||||
padding: 24rpx 32rpx;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.countdown-container {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 32rpx;
|
||||
justify-content: center;
|
||||
|
||||
.countdown-item {
|
||||
display: flex;
|
||||
@ -530,6 +589,8 @@
|
||||
background: #F5F5F5;
|
||||
padding: 8rpx 12rpx;
|
||||
border-radius: 12rpx;
|
||||
min-width: 80rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.unit {
|
||||
@ -540,260 +601,203 @@
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
padding-left: 8rpx;
|
||||
.beer-scroll {
|
||||
padding: 24rpx 0;
|
||||
|
||||
.progress-track {
|
||||
height: 16rpx;
|
||||
background: rgba(227, 227, 229, 0.6);
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #D42E78 0%, #19367A 100%);
|
||||
border-radius: 12rpx;
|
||||
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 2rpx 4rpx rgba(212, 46, 120, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.progress-labels {
|
||||
.beer-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
font-family: Roboto;
|
||||
font-weight: 500;
|
||||
|
||||
&.start {
|
||||
color: #D42E78;
|
||||
}
|
||||
&.end {
|
||||
color: #19367A;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 横向滚动容器样式 */
|
||||
.scroll-container {
|
||||
display: flex; /* 使用弹性布局 */
|
||||
padding-top: 16rpx; /* 顶部内边距 */
|
||||
flex-direction: row; /* 水平方向排列 */
|
||||
white-space: nowrap; /* 防止内容换行 */
|
||||
min-height: 505rpx; /* 最小高度确保内容显示完整 */
|
||||
|
||||
/* 行容器样式 */
|
||||
.row-box {
|
||||
&:nth-child(1) { /* 第一个子元素特殊处理 */
|
||||
margin-left: 32rpx; /* 左侧外边距，与容器对齐 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 啤酒卡片样式 */
|
||||
.beer-box {
|
||||
width: 208rpx; /* 卡片固定宽度 */
|
||||
background: #FFFFFF; /* 白色背景 */
|
||||
margin-right: 12rpx; /* 卡片间距 */
|
||||
margin-bottom: 36rpx; /* 底部外边距 */
|
||||
box-sizing: border-box; /* 盒模型计算方式 */
|
||||
display: flex; /* 弹性布局 */
|
||||
flex-direction: column; /* 垂直方向排列 */
|
||||
justify-content: flex-start; /* 内容从顶部开始排列 */
|
||||
|
||||
/* 啤酒图片封面样式 */
|
||||
.cover {
|
||||
width: 208rpx; /* 图片宽度 */
|
||||
height: 300rpx; /* 图片高度 */
|
||||
border-radius: 12rpx; /* 圆角效果 */
|
||||
margin-bottom: 16rpx; /* 与下方文字的间距 */
|
||||
}
|
||||
|
||||
/* 啤酒名称样式 */
|
||||
.title {
|
||||
font-size: 32rpx; /* 字体大小 */
|
||||
color: #030303; /* 文字颜色 */
|
||||
font-weight: 600; /* 字体粗细 */
|
||||
line-height: 48rpx; /* 行高 */
|
||||
margin-bottom: 8rpx; /* 底部间距 */
|
||||
white-space: nowrap; /* 不换行 */
|
||||
overflow: hidden; /* 溢出隐藏 */
|
||||
text-overflow: ellipsis; /* 文本溢出显示省略号 */
|
||||
}
|
||||
|
||||
/* 描述文本样式 */
|
||||
.desc {
|
||||
font-family: Roboto; /* 字体 */
|
||||
font-size: 24rpx; /* 字体大小 */
|
||||
font-weight: normal; /* 字体粗细 */
|
||||
line-height: 32rpx; /* 行高 */
|
||||
color: #606060; /* 文字颜色 */
|
||||
margin-bottom: 8rpx; /* 底部间距 */
|
||||
white-space: nowrap; /* 不换行 */
|
||||
overflow: hidden; /* 溢出隐藏 */
|
||||
text-overflow: ellipsis; /* 文本溢出显示省略号 */
|
||||
}
|
||||
|
||||
/* 数量/评分样式 */
|
||||
.num {
|
||||
display: flex; /* 弹性布局 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
font-size: 20rpx; /* 字体大小 */
|
||||
color: #606060; /* 文字颜色 */
|
||||
line-height: 32rpx; /* 行高 */
|
||||
|
||||
image {
|
||||
margin-right: 10rpx; /* 图标右侧间距 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 奖励盒子
|
||||
.reward-box {
|
||||
background: #FFFFFF;
|
||||
border-radius: 30rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
padding: 0 32rpx;
|
||||
gap: 24rpx;
|
||||
|
||||
.progress-track {
|
||||
height: 12rpx;
|
||||
background: #E3E3E5;
|
||||
.beer-card {
|
||||
width: 200rpx;
|
||||
flex-shrink: 0;
|
||||
background: #F9F9F9;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 16rpx;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #D42E78 0%, #19367A 100%);
|
||||
border-radius: 6rpx;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
background: #F0F0F0;
|
||||
}
|
||||
|
||||
.progress-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 12rpx;
|
||||
.beer-image {
|
||||
width: 200rpx;
|
||||
height: 280rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
.beer-info {
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.style {
|
||||
font-size: 24rpx;
|
||||
color: #67677A;
|
||||
|
||||
&.start {
|
||||
color: #D42E78;
|
||||
}
|
||||
&.end {
|
||||
color: #19367A;
|
||||
}
|
||||
}
|
||||
}
|
||||
color: rgba(51, 51, 51, 0.8);
|
||||
margin-bottom: 8rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.activity-info-box {
|
||||
padding: 32rpx;
|
||||
min-height: 360rpx; /* 设置最小高度 */
|
||||
|
||||
.brand-info {
|
||||
.rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
// padding-bottom: 24rpx;
|
||||
// border-bottom: 1rpx solid #F5F5F5;
|
||||
border-radius: 12rpx;
|
||||
gap: 8rpx;
|
||||
|
||||
.brand-logo {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-right: 16rpx;
|
||||
.rating-icon {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reward-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
padding: 0 32rpx 32rpx;
|
||||
|
||||
.goods-image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
flex: 1;
|
||||
|
||||
.initiator {
|
||||
color: #979797;
|
||||
font-size: 24rpx;
|
||||
font-weight: normal;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activity-duration {
|
||||
color: #0B0E26;
|
||||
font-size: 28rpx;
|
||||
font-weight: normal;
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.duration-value {
|
||||
color: #D42E78;
|
||||
.name {
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 12rpx;
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.specs-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
.specs-label {
|
||||
font-size: 32rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.specs-value {
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.activity-target {
|
||||
color: #0B0E26;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 24rpx;
|
||||
.count {
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
margin-top: 16rpx;
|
||||
height: 505rpx; /* 固定高度确保滚动区域统一 */
|
||||
.coin-container {
|
||||
position: relative;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
.coin-logo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
background: #FFFFFF;
|
||||
padding: 16rpx;
|
||||
box-sizing: border-box;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.coin-info {
|
||||
flex: 1;
|
||||
|
||||
.name {
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 12rpx;
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
border-radius: 12rpx;
|
||||
height: 182rpx;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #FFFFFF;
|
||||
padding: 24rpx 32rpx;
|
||||
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.scan-btn {
|
||||
.action-button {
|
||||
width: 686rpx;
|
||||
height: 96rpx;
|
||||
background: #19367A;
|
||||
border-radius: 12rpx;
|
||||
height: 88rpx;
|
||||
background: linear-gradient(135deg, #19367A, #2C4C99);
|
||||
border-radius: 44rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
letter-spacing: 2rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(25, 54, 122, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.btn-disabled {
|
||||
background: #E5E6EB;
|
||||
color: #86909C;
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 2rpx 8rpx rgba(25, 54, 122, 0.1);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background: #EFEFEF;
|
||||
color: #999999;
|
||||
box-shadow: none;
|
||||
|
||||
&:active {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cuIcon-qr_code {
|
||||
font-size: 36rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #0B0E26;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
1
static/heart-remove.svg
Normal file
1
static/heart-remove.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 15 KiB |
1
static/information.svg
Normal file
1
static/information.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Loading…
x
Reference in New Issue
Block a user