diff --git a/pages/index/my.vue b/pages/index/my.vue
index 2dbe9bb..b2fdff3 100644
--- a/pages/index/my.vue
+++ b/pages/index/my.vue
@@ -42,17 +42,50 @@
-
- 本月累计扫码酒款数量
-
-
- {{myScanData.scanCount}}
- 击败全国{{myScanData.percent}}%认证门店
-
-
-
-
+
+
+
+
+
+ 本月累计扫码酒款数量
+
+ {{scanCount}}
+
+ *击败全国0%认证门店
+
+
+
+
+
+
+ {{item.brandName}}
+
+
+ {{item.balance}}
+
+
+ {{item.goodsNum}}款热门商品可兑换
+
+
+
+
+
+
+
+
+ 暂未获得任何品牌啤酒币
+ 扫描酒款即可获得品牌啤酒币
+
+
+
@@ -123,6 +156,7 @@
import { getMyScanData } from '@/api/user.js'
import loginPopup from '@/components/loginPopup.vue';
import { getToken, removeToken, getUserInfo as getUserInfoFromAuth, checkLogin, clearLoginStatus } from '@/utils/auth.js';
+ import { getStoreCoinBalance } from '@/api/bar.js'
export default {
components: {
@@ -135,7 +169,10 @@
barInfo: null,
myScanData: null,
statusBaeHeight: 40,
- isLoggedIn: false
+ isLoggedIn: false,
+ currentBrandIndex: 0,
+ sortedBrandCoins: [],
+ scanCount: 0
};
},
computed: {
@@ -163,6 +200,7 @@
onShow() {
console.log('页面显示，检查登录状态');
this.checkLoginStatus();
+ this.getStoreCoinBalanceFun();
},
methods: {
// 检查登录状态
@@ -570,6 +608,49 @@
} finally {
uni.hideLoading();
}
+ },
+ onSwiperChange(e) {
+ this.currentBrandIndex = e.detail.current;
+ },
+ // 获取啤酒币余额
+ async getStoreCoinBalanceFun() {
+ try {
+ const token = uni.getStorageSync('token');
+ const userInfo = uni.getStorageSync('userInfo');
+
+ if (!token || !userInfo) {
+ this.sortedBrandCoins = [];
+ return;
+ }
+
+ const res = await getStoreCoinBalance();
+
+ if (res.data?.length > 0) {
+ // 获取品牌啤酒币列表并排序
+ const brandCoins = res.data.filter(it => it.breweryId != 0);
+
+ if (brandCoins.length > 0) {
+ 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 = [];
+ }
+ } catch (error) {
+ console.error('获取啤酒币余额失败', error);
+ this.sortedBrandCoins = [];
+ }
}
}
}
@@ -849,4 +930,140 @@
}
}
}
+
+ /* 数据统计区域样式 */
+ .data-section {
+ padding: 24rpx;
+
+ /* 币种区域样式 */
+ .coin-section {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 24rpx;
+
+ /* 左侧扫码统计卡片样式 */
+ .left-box {
+ width: 298rpx;
+ height: 180rpx;
+ background: #FFFFFF;
+ border-radius: 16rpx;
+ padding: 24rpx;
+ 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;
+ margin-bottom: 16rpx;
+ }
+
+ .amount-row {
+ margin-bottom: 26rpx;
+
+ .amount {
+ font-size: 48rpx;
+ color: #1A1A1A;
+ font-weight: 600;
+ }
+ }
+
+ .desc {
+ font-size: 20rpx;
+ color: #606060;
+ }
+ }
+
+ /* 右侧品牌啤酒币轮播卡片样式 */
+ .right-box {
+ width: 382rpx;
+ height: 180rpx;
+ background: #FFFFFF;
+ border-radius: 16rpx;
+ box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+ border: 1rpx solid rgba(242, 242, 242, 0.8);
+
+ /* 品牌内容容器 */
+ .brand-content {
+ height: 100%;
+ padding: 16rpx;
+ box-sizing: border-box;
+
+ /* 品牌标题区域 */
+ .brand-header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 12rpx;
+
+ .brand-logo {
+ width: 72rpx;
+ height: 72rpx;
+ border-radius: 12rpx;
+ margin-right: 16rpx;
+ }
+
+ .title {
+ font-size: 28rpx;
+ color: #333333;
+ font-weight: 600;
+ flex: 1;
+ }
+ }
+
+ /* 币种数量行样式 */
+ .amount-row {
+ display: flex;
+ align-items: center;
+ margin-bottom: 12rpx;
+
+ .amount {
+ font-size: 48rpx;
+ color: #1A1A1A;
+ font-weight: 600;
+ }
+
+ .coin-icon {
+ color: #FFD700;
+ font-size: 30rpx;
+ margin-left: 10rpx;
+ }
+ }
+
+ /* 底部描述文字样式 */
+ .desc {
+ font-size: 20rpx;
+ color: #606060;
+ }
+
+ /* 空数据状态样式 */
+ &.empty-content {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ .empty-icon {
+ font-size: 40rpx;
+ color: #CCCCCC;
+ margin-bottom: 8rpx;
+ }
+
+ .empty-text {
+ font-size: 26rpx;
+ color: #333333;
+ font-weight: 500;
+ margin-bottom: 6rpx;
+ }
+
+ .empty-desc {
+ font-size: 20rpx;
+ color: #999999;
+ }
+ }
+ }
+ }
+ }
+ }
\ No newline at end of file