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

feat: 优化啤酒币轮播效果 1.调整轮播切换时间为300ms 2.优化轮播指示点样式和位置

Browse Source
This commit is contained in:
davy 2025-04-08 12:17:00 +08:00
parent efbe517a92
commit 91888ec292
1 changed files with 137 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

239
pagesCoin/beerCoin.vue
View File

@ -3,7 +3,10 @@
<!-- 顶部币种展示 --> <!-- 顶部币种展示 -->
<view class="coin-section"> <view class="coin-section">
<view class="coin-box left-box"> <view class="coin-box left-box">
<view class="title">通用啤酒币</view> <view class="brand-header">
<image class="brand-logo" src="/static/logo.png" mode="aspectFill"></image>
<text class="title">通用啤酒币</text>
</view>
<view class="amount-row"> <view class="amount-row">
<text class="amount">{{commonCoin}}</text> <text class="amount">{{commonCoin}}</text>
<text class="cuIcon-rechargefill coin-icon"></text> <text class="cuIcon-rechargefill coin-icon"></text>
@ -13,20 +16,30 @@
<swiper class="coin-box right-box" <swiper class="coin-box right-box"
:current="currentBrandIndex" :current="currentBrandIndex"
@change="onSwiperChange" @change="onSwiperChange"
:duration="500" :duration="300"
circular circular
> >
<swiper-item v-for="(item, index) in sortedBrandCoins" :key="index"> <swiper-item v-for="(item, index) in sortedBrandCoins" :key="index">
<view class="brand-content"> <view class="brand-content">
<view class="brand-header"> <view class="brand-header">
<image class="brand-logo" :src="item.logo" mode="aspectFill"></image> <image class="brand-logo" :src="item.brandLogo || '/static/logo.png'" mode="aspectFill"></image>
<text class="title">{{item.name}}</text> <text class="title">{{item.brandName}}</text>
</view> </view>
<view class="amount-row"> <view class="amount-row">
<text class="amount">{{item.balance}}</text> <text class="amount">{{item.balance}}</text>
<text class="cuIcon-rechargefill coin-icon"></text> <text class="cuIcon-rechargefill coin-icon"></text>
</view> </view>
<view class="desc">{{item.exchangeCount}}款热门商品可兑换</view> <view class="desc">{{item.goodsNum}}款热门商品可兑换</view>
</view>
</swiper-item>
<!-- 添加空数据状态提示 -->
<swiper-item v-if="sortedBrandCoins.length === 0">
<view class="brand-content empty-content">
<view class="empty-icon">
<text class="cuIcon-info"></text>
</view>
<view class="empty-text">暂未获得任何品牌啤酒币</view>
<view class="empty-desc">扫描酒款即可获得品牌啤酒币</view>
</view> </view>
</swiper-item> </swiper-item>
</swiper> </swiper>
@ -97,31 +110,51 @@
.coin-box { .coin-box {
background: #FFFFFF; background: #FFFFFF;
border-radius: 16rpx; border-radius: 16rpx;
padding: 24rpx; padding: 12rpx;
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04); // 简化阴影 box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04); // 简化阴影
border: 1rpx solid rgba(242, 242, 242, 0.8); // 简化边框 border: 1rpx solid rgba(242, 242, 242, 0.8); // 简化边框
/* 币种标题样式 */ /* 品牌标题区域 */
.title { .brand-header {
font-size: 28rpx; display: flex;
color: #333333; align-items: flex-start;
font-weight: 600; padding: 8rpx;
line-height: 20rpx;
margin-bottom: 16rpx; /* 品牌logo样式 */
.brand-logo {
width: 72rpx;
height: 72rpx;
border-radius: 12rpx;
margin-right: 12rpx;
}
/* 品牌名称样式 */
.title {
font-size: 28rpx;
color: #333333;
font-weight: 600;
text-align: right;
flex: 1;
padding-top: 8rpx;
}
} }
/* 币种数量行样式 */ /* 币种数量行样式 */
.amount-row { .amount-row {
margin-bottom: 26rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end;
padding-right: 12rpx;
margin-bottom: 8rpx;
margin-top: -24rpx;
/* 数量文字样式 */ /* 数量文字样式 */
.amount { .amount {
font-size: 48rpx; font-size: 48rpx;
color: #1A1A1A; color: #1A1A1A;
font-weight: 600; font-weight: 600;
line-height: 48rpx;
} }
/* 币种图标样式 */ /* 币种图标样式 */
@ -129,49 +162,36 @@
color: #FFD700; color: #FFD700;
font-size: 30rpx; font-size: 30rpx;
margin-left: 10rpx; margin-left: 10rpx;
line-height: 48rpx;
} }
} }
/* 底部描述文字样式 */ /* 底部描述文字样式 */
.desc { .desc {
font-size: 20rpx; font-size: 20rpx;
font-weight: normal;
line-height: 130%;
color: #606060; color: #606060;
text-align: right;
line-height: 28rpx;
padding-right: 20rpx;
} }
} }
/* 左侧通用啤酒币卡片样式 */ /* 左侧通用啤酒币卡片样式 */
.left-box { .left-box {
width: 298rpx; width: 298rpx;
height: 180rpx; height: 198rpx;
background: #FFFFFF;
} }
/* 右侧品牌啤酒币轮播卡片样式 */ /* 右侧品牌啤酒币轮播卡片样式 */
.right-box { .right-box {
width: 382rpx; width: 382rpx;
height: 180rpx; height: 198rpx;
background: #FFFFFF;
/* 品牌内容容器 */ /* 品牌内容容器 */
.brand-content { .brand-content {
height: 100%; height: 100%;
padding-right: 24rpx;
/* 品牌标题区域 */ box-sizing: border-box;
.brand-header {
display: flex;
align-items: center;
margin-bottom: 16rpx;
/* 品牌logo样式 */
.brand-logo {
width: 36rpx;
height: 36rpx;
border-radius: 8rpx;
margin-right: 12rpx;
}
}
} }
} }
} }
@ -362,51 +382,37 @@ export default {
total: 0, total: 0,
commonCoin: 0, commonCoin: 0,
currentBrandIndex: 0, currentBrandIndex: 0,
sortedBrandCoins: [ sortedBrandCoins: [],
{
id: 1,
name: '青岛啤酒',
logo: '/static/images/brand1.png',
balance: 120,
exchangeCount: 5
},
{
id: 2,
name: '百威啤酒',
logo: '/static/images/brand2.png',
balance: 80,
exchangeCount: 3
},
{
id: 3,
name: '雪花啤酒',
logo: '/static/images/brand3.png',
balance: 50,
exchangeCount: 2
}
],
isTabFixed: false, isTabFixed: false,
statusBarHeight: 0, statusBarHeight: 0,
tabOffsetTop: 160, // 调整标签栏距离顶部的固定距离 tabOffsetTop: 160,
isLoadAll: false, // 是否已加载全部数据 isLoadAll: false
} }
}, },
onLoad() { onLoad() {
// 获取状态栏高度 // 获取状态栏高度
const systemInfo = uni.getSystemInfoSync() try {
this.statusBarHeight = systemInfo.statusBarHeight const systemInfo = uni.getSystemInfoSync()
this.statusBarHeight = systemInfo.statusBarHeight || 0
} catch (e) {
console.error('获取系统信息失败', e)
}
this.getGoodsListFun() // 初始化数据
this.initData()
}, },
onShow() { onShow() {
// 每次页面显示时获取最新的啤酒币余额
this.getStoreCoinBalanceFun() this.getStoreCoinBalanceFun()
}, },
// 页面滚动监听 // 页面滚动监听
onPageScroll(e) { onPageScroll(e) {
this.isTabFixed = e.scrollTop >= this.tabOffsetTop if (e && typeof e.scrollTop === 'number') {
this.isTabFixed = e.scrollTop >= this.tabOffsetTop
}
}, },
// 添加上拉触底事件 // 添加上拉触底事件
@ -415,6 +421,22 @@ export default {
}, },
methods: { methods: {
// 初始化数据
async initData() {
try {
// 先获取啤酒币余额
await this.getStoreCoinBalanceFun()
// 然后获取商品列表
await this.getGoodsListFun()
} catch (error) {
console.error('初始化数据失败', error)
uni.showToast({
title: '加载失败',
icon: 'none'
})
}
},
// 切换标签 // 切换标签
async changeTag(tag) { async changeTag(tag) {
if (this.curTag === tag) return if (this.curTag === tag) return
@ -432,11 +454,12 @@ export default {
// 数据请求成功后再更新UI // 数据请求成功后再更新UI
this.curTag = tag this.curTag = tag
this.queryForm = params this.queryForm = params
this.total = res.total this.total = res.total || 0
this.goodsList = res.rows || [] this.goodsList = res.rows || []
this.isLoadAll = this.goodsList.length >= this.total // 更新加载状态 this.isLoadAll = this.goodsList.length >= this.total
} catch (error) { } catch (error) {
console.error('切换标签失败', error)
uni.showToast({ uni.showToast({
title: '加载失败', title: '加载失败',
icon: 'none' icon: 'none'
@ -446,7 +469,9 @@ export default {
// 轮播切换事件 // 轮播切换事件
onSwiperChange(e) { onSwiperChange(e) {
this.currentBrandIndex = e.detail.current if (e && e.detail && typeof e.detail.current === 'number') {
this.currentBrandIndex = e.detail.current
}
}, },
// 获取商品列表 // 获取商品列表
@ -457,21 +482,20 @@ export default {
try { try {
const res = await getGoodsList(this.queryForm) const res = await getGoodsList(this.queryForm)
this.total = res.total this.total = res.total || 0
// 如果是加载更多，则追加数据 // 如果是加载更多，则追加数据
if (this.queryForm.pageNum > 1) { if (this.queryForm.pageNum > 1) {
this.goodsList.push(...(res.rows || [])) this.goodsList = [...this.goodsList, ...(res.rows || [])]
} else { } else {
this.goodsList = res.rows || [] this.goodsList = res.rows || []
this.isLoadAll = false // 重置加载状态 this.isLoadAll = false
} }
// 判断是否已加载全部 // 判断是否已加载全部
if (this.goodsList.length >= this.total) { this.isLoadAll = this.goodsList.length >= this.total
this.isLoadAll = true
}
} catch (error) { } catch (error) {
console.error('获取商品列表失败', error)
uni.showToast({ uni.showToast({
title: '加载失败', title: '加载失败',
icon: 'none' icon: 'none'
@ -482,65 +506,72 @@ export default {
}, },
// 获取啤酒币余额 // 获取啤酒币余额
getStoreCoinBalanceFun() { async getStoreCoinBalanceFun() {
const token = uni.getStorageSync('token') try {
const userInfo = uni.getStorageSync('userInfo') const token = uni.getStorageSync('token');
const userInfo = uni.getStorageSync('userInfo');
if (!token || !userInfo || userInfo.isVerified !== 1) { if (!token || !userInfo) {
this.sortedBrandCoins = [] this.sortedBrandCoins = [];
this.commonCoin = 0 this.commonCoin = 0;
return return;
} }
const res = await getStoreCoinBalance();
getStoreCoinBalance().then(res => {
if (res.data?.length > 0) { if (res.data?.length > 0) {
// 获取通用啤酒币 // 获取通用啤酒币
const commonCoin = res.data.find(it => it.breweryId == 0) const commonCoin = res.data.find(it => it.breweryId == 0);
this.commonCoin = commonCoin?.balance || 0 this.commonCoin = commonCoin?.balance || 0;
// 获取品牌啤酒币列表并排序 // 获取品牌啤酒币列表并排序
// TODO: 后续接口返回完整数据后，替换下面的处理逻辑 const brandCoins = res.data.filter(it => it.breweryId != 0);
const brandCoins = res.data.filter(it => it.breweryId != 0)
if (brandCoins.length > 0) { if (brandCoins.length > 0) {
// 这里使用虚拟数据，实际项目中需要使用真实数据 this.sortedBrandCoins = brandCoins.map(item => ({
this.sortedBrandCoins = this.sortedBrandCoins.map((brand, index) => { id: item.id,
const realData = brandCoins[index] breweryId: item.breweryId,
return { brandName: item.brandName,
...brand, brandLogo: item.brandLogo,
balance: realData?.balance || brand.balance balance: item.balance || 0,
} goodsNum: item.goodsNum || 0,
}).sort((a, b) => b.balance - a.balance) barName: item.barName,
barCode: item.barCode,
barCity: item.barCity
})).sort((a, b) => b.balance - a.balance);
} else {
this.sortedBrandCoins = [];
} }
} else { } else {
this.sortedBrandCoins = [] this.sortedBrandCoins = [];
this.commonCoin = 0 this.commonCoin = 0;
} }
}).catch(() => { } catch (error) {
this.sortedBrandCoins = [] console.error('获取啤酒币余额失败', error);
this.commonCoin = 0 this.sortedBrandCoins = [];
}) this.commonCoin = 0;
}
}, },
// 跳转商品详情 // 跳转商品详情
toDetail(item) { toDetail(item) {
if (!item || !item.id) return
uni.navigateTo({ uni.navigateTo({
url: `/pagesCoin/goodsDetail?id=${item.id}&breweryId=${item.breweryId}` url: `/pagesCoin/goodsDetail?id=${item.id}&breweryId=${item.breweryId || 0}`
}) })
}, },
// 加载更多 // 加载更多
async loadMore() { async loadMore() {
// 如果正在加载、已加载全部，或列表为空，则不处理
if (this.loading || this.isLoadAll || this.goodsList.length === 0) return if (this.loading || this.isLoadAll || this.goodsList.length === 0) return
// 如果当前数量小于总数，则加载下一页
if (this.goodsList.length < this.total) { if (this.goodsList.length < this.total) {
this.queryForm.pageNum++ this.queryForm.pageNum++
await this.getGoodsListFun() await this.getGoodsListFun()
} else { } else {
this.isLoadAll = true this.isLoadAll = true
} }
}, }
} }
} }
</script> </script>