diff --git a/pagesCoin/beerCoin.vue b/pagesCoin/beerCoin.vue index de382d2..041b578 100644 --- a/pagesCoin/beerCoin.vue +++ b/pagesCoin/beerCoin.vue @@ -3,7 +3,10 @@ - 通用啤酒币 + + + 通用啤酒币 + {{commonCoin}} @@ -13,20 +16,30 @@ - - {{item.name}} + + {{item.brandName}} {{item.balance}} - {{item.exchangeCount}}款热门商品可兑换 + {{item.goodsNum}}款热门商品可兑换 + + + + + + + + + 暂未获得任何品牌啤酒币 + 扫描酒款即可获得品牌啤酒币 @@ -97,31 +110,51 @@ .coin-box { background: #FFFFFF; border-radius: 16rpx; - padding: 24rpx; + padding: 12rpx; box-sizing: border-box; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04); // 简化阴影 border: 1rpx solid rgba(242, 242, 242, 0.8); // 简化边框 - /* 币种标题样式 */ - .title { - font-size: 28rpx; - color: #333333; - font-weight: 600; - line-height: 20rpx; - margin-bottom: 16rpx; + /* 品牌标题区域 */ + .brand-header { + display: flex; + align-items: flex-start; + padding: 8rpx; + + /* 品牌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 { - margin-bottom: 26rpx; display: flex; align-items: center; + justify-content: flex-end; + padding-right: 12rpx; + margin-bottom: 8rpx; + margin-top: -24rpx; /* 数量文字样式 */ .amount { font-size: 48rpx; color: #1A1A1A; font-weight: 600; + line-height: 48rpx; } /* 币种图标样式 */ @@ -129,49 +162,36 @@ color: #FFD700; font-size: 30rpx; margin-left: 10rpx; + line-height: 48rpx; } } /* 底部描述文字样式 */ .desc { font-size: 20rpx; - font-weight: normal; - line-height: 130%; color: #606060; + text-align: right; + line-height: 28rpx; + padding-right: 20rpx; } } /* 左侧通用啤酒币卡片样式 */ .left-box { width: 298rpx; - height: 180rpx; - background: #FFFFFF; + height: 198rpx; } /* 右侧品牌啤酒币轮播卡片样式 */ .right-box { width: 382rpx; - height: 180rpx; - background: #FFFFFF; + height: 198rpx; /* 品牌内容容器 */ .brand-content { height: 100%; - - /* 品牌标题区域 */ - .brand-header { - display: flex; - align-items: center; - margin-bottom: 16rpx; - - /* 品牌logo样式 */ - .brand-logo { - width: 36rpx; - height: 36rpx; - border-radius: 8rpx; - margin-right: 12rpx; - } - } + padding-right: 24rpx; + box-sizing: border-box; } } } @@ -362,51 +382,37 @@ export default { total: 0, commonCoin: 0, currentBrandIndex: 0, - 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 - } - ], + sortedBrandCoins: [], isTabFixed: false, statusBarHeight: 0, - tabOffsetTop: 160, // 调整标签栏距离顶部的固定距离 - isLoadAll: false, // 是否已加载全部数据 + tabOffsetTop: 160, + isLoadAll: false } }, onLoad() { // 获取状态栏高度 - const systemInfo = uni.getSystemInfoSync() - this.statusBarHeight = systemInfo.statusBarHeight + try { + const systemInfo = uni.getSystemInfoSync() + this.statusBarHeight = systemInfo.statusBarHeight || 0 + } catch (e) { + console.error('获取系统信息失败', e) + } - this.getGoodsListFun() + // 初始化数据 + this.initData() }, onShow() { + // 每次页面显示时获取最新的啤酒币余额 this.getStoreCoinBalanceFun() }, // 页面滚动监听 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: { + // 初始化数据 + async initData() { + try { + // 先获取啤酒币余额 + await this.getStoreCoinBalanceFun() + // 然后获取商品列表 + await this.getGoodsListFun() + } catch (error) { + console.error('初始化数据失败', error) + uni.showToast({ + title: '加载失败', + icon: 'none' + }) + } + }, + // 切换标签 async changeTag(tag) { if (this.curTag === tag) return @@ -432,11 +454,12 @@ export default { // 数据请求成功后再更新UI this.curTag = tag this.queryForm = params - this.total = res.total + this.total = res.total || 0 this.goodsList = res.rows || [] - this.isLoadAll = this.goodsList.length >= this.total // 更新加载状态 + this.isLoadAll = this.goodsList.length >= this.total } catch (error) { + console.error('切换标签失败', error) uni.showToast({ title: '加载失败', icon: 'none' @@ -446,7 +469,9 @@ export default { // 轮播切换事件 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 { const res = await getGoodsList(this.queryForm) - this.total = res.total + this.total = res.total || 0 // 如果是加载更多，则追加数据 if (this.queryForm.pageNum > 1) { - this.goodsList.push(...(res.rows || [])) + this.goodsList = [...this.goodsList, ...(res.rows || [])] } else { this.goodsList = res.rows || [] - this.isLoadAll = false // 重置加载状态 + this.isLoadAll = false } // 判断是否已加载全部 - if (this.goodsList.length >= this.total) { - this.isLoadAll = true - } + this.isLoadAll = this.goodsList.length >= this.total } catch (error) { + console.error('获取商品列表失败', error) uni.showToast({ title: '加载失败', icon: 'none' @@ -482,65 +506,72 @@ export default { }, // 获取啤酒币余额 - getStoreCoinBalanceFun() { - const token = uni.getStorageSync('token') - const userInfo = uni.getStorageSync('userInfo') - - if (!token || !userInfo || userInfo.isVerified !== 1) { - this.sortedBrandCoins = [] - this.commonCoin = 0 - return - } - - getStoreCoinBalance().then(res => { + async getStoreCoinBalanceFun() { + try { + const token = uni.getStorageSync('token'); + const userInfo = uni.getStorageSync('userInfo'); + + if (!token || !userInfo) { + this.sortedBrandCoins = []; + this.commonCoin = 0; + return; + } + + const res = await getStoreCoinBalance(); + if (res.data?.length > 0) { // 获取通用啤酒币 - const commonCoin = res.data.find(it => it.breweryId == 0) - this.commonCoin = commonCoin?.balance || 0 + const commonCoin = res.data.find(it => it.breweryId == 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) { - // 这里使用虚拟数据，实际项目中需要使用真实数据 - this.sortedBrandCoins = this.sortedBrandCoins.map((brand, index) => { - const realData = brandCoins[index] - return { - ...brand, - balance: realData?.balance || brand.balance - } - }).sort((a, b) => b.balance - a.balance) + this.sortedBrandCoins = brandCoins.map(item => ({ + id: item.id, + breweryId: item.breweryId, + brandName: item.brandName, + brandLogo: item.brandLogo, + balance: item.balance || 0, + goodsNum: item.goodsNum || 0, + barName: item.barName, + barCode: item.barCode, + barCity: item.barCity + })).sort((a, b) => b.balance - a.balance); + } else { + this.sortedBrandCoins = []; } } else { - this.sortedBrandCoins = [] - this.commonCoin = 0 + this.sortedBrandCoins = []; + this.commonCoin = 0; } - }).catch(() => { - this.sortedBrandCoins = [] - this.commonCoin = 0 - }) + } catch (error) { + console.error('获取啤酒币余额失败', error); + this.sortedBrandCoins = []; + this.commonCoin = 0; + } }, // 跳转商品详情 toDetail(item) { + if (!item || !item.id) return uni.navigateTo({ - url: `/pagesCoin/goodsDetail?id=${item.id}&breweryId=${item.breweryId}` + url: `/pagesCoin/goodsDetail?id=${item.id}&breweryId=${item.breweryId || 0}` }) }, // 加载更多 async loadMore() { - // 如果正在加载、已加载全部，或列表为空，则不处理 if (this.loading || this.isLoadAll || this.goodsList.length === 0) return - // 如果当前数量小于总数，则加载下一页 if (this.goodsList.length < this.total) { this.queryForm.pageNum++ await this.getGoodsListFun() } else { this.isLoadAll = true } - }, + } } } \ No newline at end of file